Added new settings to web-camera input widget (#2616)

application/src/main/data/json/system/widget_bundles/input_widgets.json

@@ -330,13 +330,13 @@
       "name": "Web Camera Input",
       "descriptor": {
         "type": "latest",
-        "sizeX": 9.5,
-        "sizeY": 6.5,
+        "sizeX": 7.5,
+        "sizeY": 3,
         "resources": [],
         "templateHtml": "<tb-web-camera-widget ctx=\"ctx\">\n</tb-web-camera-widget>",
-        "templateCss": "#container {\n    overflow: auto;\n}\n\n.tbDatasource-container {\n    margin: 5px;\n    padding: 8px;\n}\n\n.tbDatasource-title {\n    font-size: 1.200rem;\n    font-weight: 500;\n    padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n    width: 100%;\n    box-shadow: 0 0 10px #ccc;\n    border-collapse: collapse;\n    white-space: nowrap;\n    font-size: 1.000rem;\n    color: #757575;\n}\n\n.tbDatasource-table td {\n    position: relative;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n    padding: 0px 18px;\n    box-sizing: border-box;\n}",
+        "templateCss": "",
         "controllerScript": "self.onInit = function() {\n    var scope = self.ctx.$scope;\n    scope.ctx = self.ctx;\n}\n\nself.onDataUpdated = function() {\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1\n    }\n}\n\nself.onDestroy = function() {\n}\n",
-        "settingsSchema": "{}",
+        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Web Camera\",\n        \"properties\": {\n            \"widgetTitle\": {\n                \"title\": \"Widget title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"imageFormat\": {\n                \"title\": \"Image Format\",\n                \"type\": \"string\",\n                \"default\": \"image/png\"\n            },\n            \"imageQuality\":{\n                \"title\":\"Image quality that use lossy compression such as jpeg and webp\",\n                \"type\":\"number\",\n                \"default\": 0.92,\n                \"min\": 0,\n                \"max\": 1\n            },\n            \"maxWidth\": {\n                \"title\": \"The maximal image width\",\n                \"type\": \"number\",\n                \"default\": 640\n            }, \n            \"maxHeight\": {\n                \"title\": \"The maximal image heigth\",\n                \"type\": \"number\",\n                \"default\": 480\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"widgetTitle\",\n        {\n            \"key\": \"imageFormat\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"image/jpeg\",\n                    \"label\": \"JPEG\"\n                },\n                {\n                    \"value\": \"image/png\",\n                    \"label\": \"PNG\"\n                },\n                {\n                    \"value\": \"image/webp\",\n                    \"label\": \"WEBP\"\n                }\n            ]\n        },\n        \"imageQuality\",\n        \"maxWidth\",\n        \"maxHeight\"\n    ]\n}",
         "dataKeySettingsSchema": "{}\n",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Web Camera Input\",\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"showLegend\":false,\"actions\":{}}"
       }

ui/src/app/widget/lib/web-camera-input-widget.js

@@ -52,6 +52,11 @@ function WebCameraWidgetController($element, $scope, $window, types, utils, attr
     let canvas = null;
     let photoCamera = null;
     let dataKeyType = "";
+    let width = 640;
+    let height = 480;
+
+    const DEFAULT_IMAGE_TYPE = 'image/jpeg';
+    const DEFAULT_IMAGE_QUALITY = 0.92;
 
     vm.getStream = getStream;
     vm.createPhoto = createPhoto;
@@ -79,6 +84,8 @@ function WebCameraWidgetController($element, $scope, $window, types, utils, attr
                     vm.isEntityDetected = true;
                 }
             }
+            width = vm.ctx.settings.maxWidth ? vm.ctx.settings.maxWidth : 640;
+            height = vm.ctx.settings.maxHeight ? vm.ctx.settings.maxWidth : 480;
             if (datasource.dataKeys.length) {
                 $scope.currentKey = datasource.dataKeys[0].name;
                 dataKeyType = datasource.dataKeys[0].type;
@@ -93,6 +100,24 @@ function WebCameraWidgetController($element, $scope, $window, types, utils, attr
         }
     });
 
+    function getVideoAspectRatio() {
+        if (videoElement.videoWidth && videoElement.videoWidth > 0 &&
+            videoElement.videoHeight && videoElement.videoHeight > 0) {
+            return videoElement.videoWidth / videoElement.videoHeight;
+        }
+        return width / height;
+    }
+
+    vm.videoWidth = function() {
+        const videoRatio = getVideoAspectRatio();
+        return Math.min(width, height * videoRatio);
+    }
+
+    vm.videoHeight = function() {
+        const videoRatio = getVideoAspectRatio();
+        return Math.min(height, width / videoRatio);
+    }
+
     function hasGetUserMedia() {
         return !!($window.navigator.mediaDevices && $window.navigator.mediaDevices.getUserMedia);
     }
@@ -157,10 +182,12 @@ function WebCameraWidgetController($element, $scope, $window, types, utils, attr
     }
 
     function createPhoto() {
-        canvas.width = videoElement.videoWidth;
-        canvas.height = videoElement.videoHeight;
-        canvas.getContext('2d').drawImage(videoElement, 0, 0);
-        vm.previewPhoto = canvas.toDataURL('image/png');
+        canvas.width = vm.videoWidth();
+        canvas.height = vm.videoHeight();
+        canvas.getContext('2d').drawImage(videoElement, 0, 0, vm.videoWidth(), vm.videoHeight());
+        const mimeType = vm.ctx.settings.imageFormat ? vm.ctx.settings.imageFormat : DEFAULT_IMAGE_TYPE;
+        const quality = vm.ctx.settings.imageQuality ? vm.ctx.settings.imageQuality : DEFAULT_IMAGE_QUALITY;
+        vm.previewPhoto = canvas.toDataURL(mimeType, quality);
         vm.isPreviewPhoto = true;
     }