简柏林 / thingskit · Commits

Commit 3019bf7570a0879b97848dc9210518a309acdc0f

Authored by Igor Kulikov
Committed by GitHub
2 parents e9240700 91afd716

Merge pull request #212 from thingsboard/feature/TB-70 

TB-70: RPC widgets: Implemented switch control widget.
Inline Side-by-side
Showing 13 changed files with 568 additions and 12 deletions
... ... @@ -48,9 +48,25 @@
48 48 "templateHtml": "<tb-knob ctx='ctx'></tb-knob>",
49 49 "templateCss": "",
50 50 "controllerScript": "self.onInit = function() {\n var scope = self.ctx.$scope;\n scope.ctx = self.ctx;\n}\n\nself.onResize = function() {\n if (self.ctx.resize) {\n self.ctx.resize();\n }\n}\n\nself.onDestroy = function() {\n}\n",
51   - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"minValue\": {\n \"title\": \"Minimum value\",\n \"type\": \"number\",\n \"default\": 0\n },\n \"maxValue\": {\n \"title\": \"Maximum value\",\n \"type\": \"number\",\n \"default\": 100\n },\n \"initialValue\": {\n \"title\": \"Initial value\",\n \"type\": \"number\",\n \"default\": 50\n },\n \"title\": {\n \"title\": \"Knob title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"getValueMethod\": {\n \"title\": \"Get value method\",\n \"type\": \"string\",\n \"default\": \"getValue\"\n },\n \"setValueMethod\": {\n \"title\": \"Set value method\",\n \"type\": \"string\",\n \"default\": \"setValue\"\n },\n \"requestTimeout\": {\n \"title\": \"RPC request timeout\",\n \"type\": \"number\",\n \"default\": 500\n }\n },\n \"required\": [\"minValue\", \"maxValue\", \"getValueMethod\", \"setValueMethod\", \"requestTimeout\"]\n },\n \"form\": [\n \"minValue\",\n \"maxValue\",\n \"initialValue\",\n \"getValueMethod\",\n \"setValueMethod\",\n \"title\",\n \"requestTimeout\"\n ]\n}",
  51 + "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"minValue\": {\n \"title\": \"Minimum value\",\n \"type\": \"number\",\n \"default\": 0\n },\n \"maxValue\": {\n \"title\": \"Maximum value\",\n \"type\": \"number\",\n \"default\": 100\n },\n \"initialValue\": {\n \"title\": \"Initial value\",\n \"type\": \"number\",\n \"default\": 50\n },\n \"title\": {\n \"title\": \"Knob title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"getValueMethod\": {\n \"title\": \"Get value method\",\n \"type\": \"string\",\n \"default\": \"getValue\"\n },\n \"setValueMethod\": {\n \"title\": \"Set value method\",\n \"type\": \"string\",\n \"default\": \"setValue\"\n },\n \"requestTimeout\": {\n \"title\": \"RPC request timeout\",\n \"type\": \"number\",\n \"default\": 500\n }\n },\n \"required\": [\"minValue\", \"maxValue\", \"getValueMethod\", \"setValueMethod\", \"requestTimeout\"]\n },\n \"form\": [\n \"minValue\",\n \"maxValue\",\n \"initialValue\",\n \"title\",\n \"getValueMethod\",\n \"setValueMethod\",\n \"requestTimeout\"\n ]\n}",
52 52 "dataKeySettingsSchema": "{}\n",
53   - "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"requestTimeout\":500,\"maxValue\":100,\"initialValue\":50,\"minValue\":0,\"title\":\"Knob control\"},\"title\":\"Knob Control\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"decimals\":2}"
  53 + "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"requestTimeout\":500,\"maxValue\":100,\"initialValue\":50,\"minValue\":0,\"title\":\"Knob control\",\"getValueMethod\":\"getValue\",\"setValueMethod\":\"setValue\"},\"title\":\"Knob Control\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"decimals\":2}"
  54 + }
  55 + },
  56 + {
  57 + "alias": "switch_control",
  58 + "name": "Switch Control",
  59 + "descriptor": {
  60 + "type": "rpc",
  61 + "sizeX": 4,
  62 + "sizeY": 2.5,
  63 + "resources": [],
  64 + "templateHtml": "<tb-switch ctx='ctx'></tb-switch>",
  65 + "templateCss": "",
  66 + "controllerScript": "self.onInit = function() {\n var scope = self.ctx.$scope;\n scope.ctx = self.ctx;\n}\n\nself.onResize = function() {\n if (self.ctx.resize) {\n self.ctx.resize();\n }\n}\n\nself.onDestroy = function() {\n}\n",
  67 + "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"initialValue\": {\n \"title\": \"Initial value\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"title\": {\n \"title\": \"Switch title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"showOnOffLabels\": {\n \"title\": \"Show on/off labels\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"getValueMethod\": {\n \"title\": \"Get value method\",\n \"type\": \"string\",\n \"default\": \"getValue\"\n },\n \"setValueMethod\": {\n \"title\": \"Set value method\",\n \"type\": \"string\",\n \"default\": \"setValue\"\n },\n \"requestTimeout\": {\n \"title\": \"RPC request timeout\",\n \"type\": \"number\",\n \"default\": 500\n }\n },\n \"required\": [\"getValueMethod\", \"setValueMethod\", \"requestTimeout\"]\n },\n \"form\": [\n \"initialValue\",\n \"title\",\n \"showOnOffLabels\",\n \"getValueMethod\",\n \"setValueMethod\",\n \"requestTimeout\"\n ]\n}",
  68 + "dataKeySettingsSchema": "{}\n",
  69 + "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"requestTimeout\":500,\"initialValue\":false,\"getValueMethod\":\"getValue\",\"setValueMethod\":\"setValue\",\"showOnOffLabels\":true,\"title\":\"Switch control\"},\"title\":\"Switch Control\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"decimals\":2}"
54 70 }
55 71 }
56 72 ]
... ...
... ... @@ -15,7 +15,9 @@
15 15 */
16 16
17 17 import tbKnob from './knob.directive';
  18 +import tbSwitch from './switch.directive';
18 19
19 20 export default angular.module('thingsboard.widgets.rpc', [
20   - tbKnob
  21 + tbKnob,
  22 + tbSwitch
21 23 ]).name;
... ...
... ... @@ -63,7 +63,7 @@ function KnobController($element, $scope, $document) {
63 63 knobTitleContainer = knob.find('.title-container'),
64 64 knobTitle = knob.find('.knob-title'),
65 65 knobMinmaxContainer = knob.find('.minmax-container'),
66   - minmaxLanel = knob.find('.minmax-label'),
  66 + minmaxLabel = knob.find('.minmax-label'),
67 67 textMeasure = knob.find('#text-measure'),
68 68 startDeg = -1,
69 69 currentDeg = 0,
... ... @@ -92,8 +92,6 @@ function KnobController($element, $scope, $document) {
92 92 vm.maxValue = angular.isDefined(vm.ctx.settings.maxValue) ? vm.ctx.settings.maxValue : 100;
93 93 vm.title = angular.isDefined(vm.ctx.settings.title) ? vm.ctx.settings.title : '';
94 94
95   - vm.darkTheme = vm.ctx.settings.theme == 'dark';
96   -
97 95 var canvasBarData = {
98 96 renderTo: canvasBarElement[0],
99 97 hideValue: true,
... ... @@ -267,7 +265,7 @@ function KnobController($element, $scope, $document) {
267 265 setFontSize(knobTitle, vm.title, knobTitleContainer.height(), knobTitleContainer.width());
268 266 setFontSize(knobError, vm.error, knobErrorContainer.height(), knobErrorContainer.width());
269 267 var minmaxHeight = knobMinmaxContainer.height();
270   - minmaxLanel.css({'fontSize': minmaxHeight+'px', 'lineHeight': minmaxHeight+'px'});
  268 + minmaxLabel.css({'fontSize': minmaxHeight+'px', 'lineHeight': minmaxHeight+'px'});
271 269 checkValueSize();
272 270 }
273 271
... ...
... ... @@ -14,7 +14,7 @@
14 14 * limitations under the License.
15 15 */
16 16
17   -$knob-img: url('./knob.svg');
  17 +$knob-img: url('./svg/knob.svg');
18 18
19 19 $bars-margin-pct: percentage(0.033);
20 20 $background-margin-pct: percentage(0.05);
... ... @@ -33,9 +33,6 @@ $background-color: #e6e7e8;
33 33 width:100%;
34 34 height:100%;
35 35 background: $background-color;
36   - &.dark {
37   - background: #000;
38   - }
39 36
40 37 .knob {
41 38 position: relative;
... ...
... ... @@ -16,7 +16,7 @@
16 16
17 17 -->
18 18
19   -<div class="tb-knob" layout="column" ng-class="{'dark': vm.darkTheme}" ng-style="{'pointerEvents': vm.ctx.isEdit ? 'none' : 'all'}">
  19 +<div class="tb-knob" layout="column" ng-style="{'pointerEvents': vm.ctx.isEdit ? 'none' : 'all'}">
20 20 <div id="knob-container" flex layout="column" layout-align="center center">
21 21 <div class="knob">
22 22 <div class="value-container" layout="row" layout-align="center center">
... ...
ui/src/app/widget/lib/rpc/svg/knob.svg renamed from ui/src/app/widget/lib/rpc/knob.svg
  1 +<svg id="svg5466" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="8.4667mm" width="23.616mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 83.679981 29.999998" xmlns:dc="http://purl.org/dc/elements/1.1/">
  2 + <defs id="defs5468">
  3 + <linearGradient id="linearGradient6001-5" y2="-327.83" gradientUnits="userSpaceOnUse" x2="895.4" gradientTransform="translate(-31.905 97.852)" y1="-357.17" x1="895.4">
  4 + <stop id="stop5439" stop-color="#bdbdc1" offset="0"/>
  5 + <stop id="stop5441" stop-color="#f4f4f4" offset="1"/>
  6 + </linearGradient>
  7 + <linearGradient id="linearGradient6003-6" y2="-392.51" gradientUnits="userSpaceOnUse" x2="892.44" gradientTransform="matrix(1 0 0 .78494 -34.597 55.388)" y1="-366.35" x1="892.44">
  8 + <stop id="stop5486" stop-color="#838383" offset="0"/>
  9 + <stop id="stop5492" stop-color="#979797" offset=".53774"/>
  10 + <stop id="stop5488" stop-color="#a7a7a7" offset="1"/>
  11 + </linearGradient>
  12 + <linearGradient id="linearGradient6436" y2="-334.29" xlink:href="#linearGradient5528" gradientUnits="userSpaceOnUse" x2="913.4" gradientTransform="matrix(.78723 0 0 .78723 192.99 -72.172)" y1="-349.49" x1="913.38"/>
  13 + <linearGradient id="linearGradient5528">
  14 + <stop id="stop5530" stop-color="#3d3d3d" stop-opacity=".86275" offset="0"/>
  15 + <stop id="stop5532" stop-color="#fff" stop-opacity="0" offset="1"/>
  16 + </linearGradient>
  17 + <radialGradient id="radialGradient5502-17-9" xlink:href="#linearGradient5496" gradientUnits="userSpaceOnUse" cy="-341.87" cx="916.16" gradientTransform="matrix(4.5735 -.17574 .13786 3.5876 -3230.9 1043.7)" r="7.5588"/>
  18 + <linearGradient id="linearGradient5496">
  19 + <stop id="stop5498" stop-color="#fff" stop-opacity="0" offset="0"/>
  20 + <stop id="stop5550" stop-color="#fff" stop-opacity=".10435" offset=".17494"/>
  21 + <stop id="stop5552" stop-color="#fff" stop-opacity=".92174" offset=".39279"/>
  22 + <stop id="stop5500" stop-color="#fff" offset="1"/>
  23 + </linearGradient>
  24 + </defs>
  25 + <g id="layer1" transform="translate(-126.73 -454.51)">
  26 + <g id="g6480" transform="translate(-692.33 714.68)">
  27 + <g>
  28 + <path id="rect5195-5-0-1-9-6" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m826.67-260.18c-4.201 0.00074-7.606 3.8877-7.6055 8.6819v12.639c0.00065 4.7933 3.4054 8.6788 7.6055 8.6795h68.469c4.2001-0.00073 7.6049-3.8862 7.6055-8.6795v-12.639c0.00053-4.7942-3.4046-8.6812-7.6055-8.6819z" fill="url(#linearGradient6001-5)"/>
  29 + <path id="rect5195-5-0-1-4-0-6" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m826.67-257.4c-4.201 0.00062-7.606 3.2632-7.6055 7.2872v10.608c0.00065 4.0232 3.4054 7.2845 7.6055 7.2851h68.469c4.2001-0.00062 7.6049-3.2619 7.6055-7.2851v-10.608c0.00053-4.024-3.4046-7.2866-7.6055-7.2872z" fill="#585859"/>
  30 + <path id="rect5195-5-0-1-4-3-0-8" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m826.67-253.64c-4.201 0.00052-7.606 2.7592-7.6055 6.1617v8.9697c0.00065 3.4018 3.4054 6.1594 7.6055 6.16h68.469c4.2001-0.00052 7.6049-2.7581 7.6055-6.16v-8.9697c0.00053-3.4025-3.4046-6.1612-7.6055-6.1617z" fill="url(#linearGradient6003-6)"/>
  31 + </g>
  32 + <g id="g5554-2-1" transform="translate(-29.817 95.669)">
  33 + <circle id="path5494-3-7-8" cx="911.68" cy="-340.85" r="6.0124" fill="url(#linearGradient6436)"/>
  34 + <circle id="path5494-1-9" cx="911.68" cy="-340.85" r="5.3939" fill="url(#radialGradient5502-17-9)"/>
  35 + </g>
  36 + <g id="g5554-8-6-2" transform="translate(-71.652 95.669)">
  37 + <circle id="path5494-3-9-2-9" cx="911.68" cy="-340.85" r="6.0124" fill="url(#linearGradient6436)"/>
  38 + <circle id="path5494-7-0-5" cx="911.68" cy="-340.85" r="5.3939" fill="url(#radialGradient5502-17-9)"/>
  39 + </g>
  40 + <path id="rect5195-5-0-1-4-0-4-4" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m826.67-257.4c-4.201 0.00062-7.606 3.2632-7.6055 7.2872v10.608c0.00065 4.0232 3.4054 7.2845 7.6055 7.2851h68.469c4.2001-0.00062 7.6049-3.2619 7.6055-7.2851v-10.608c0.00053-4.024-3.4046-7.2866-7.6055-7.2872z" fill-opacity=".39080" fill="#ff6e4a"/>
  41 + </g>
  42 + </g>
  43 +</svg>
... ...
  1 +<svg id="svg4749" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="8.4667mm" width="23.616mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 83.679981 29.999998" xmlns:dc="http://purl.org/dc/elements/1.1/">
  2 + <defs id="defs4751">
  3 + <linearGradient id="linearGradient5443" y2="-327.83" gradientUnits="userSpaceOnUse" x2="895.4" y1="-357.17" x1="895.4">
  4 + <stop id="stop5439" stop-color="#bdbdc1" offset="0"/>
  5 + <stop id="stop5441" stop-color="#f4f4f4" offset="1"/>
  6 + </linearGradient>
  7 + <linearGradient id="linearGradient5490" y2="-392.51" gradientUnits="userSpaceOnUse" x2="892.44" gradientTransform="matrix(1 0 0 .78494 -2.6922 -42.464)" y1="-366.35" x1="892.44">
  8 + <stop id="stop5486" stop-color="#838383" offset="0"/>
  9 + <stop id="stop5492" stop-color="#979797" offset=".53774"/>
  10 + <stop id="stop5488" stop-color="#a7a7a7" offset="1"/>
  11 + </linearGradient>
  12 + <linearGradient id="linearGradient5534" y2="-334.29" xlink:href="#linearGradient5528" gradientUnits="userSpaceOnUse" x2="913.4" gradientTransform="matrix(.78723 0 0 .78723 192.99 -72.172)" y1="-349.49" x1="913.38"/>
  13 + <linearGradient id="linearGradient5528">
  14 + <stop id="stop5530" stop-color="#3d3d3d" stop-opacity=".86275" offset="0"/>
  15 + <stop id="stop5532" stop-color="#fff" stop-opacity="0" offset="1"/>
  16 + </linearGradient>
  17 + <radialGradient id="radialGradient5502" xlink:href="#linearGradient5496" gradientUnits="userSpaceOnUse" cy="-341.87" cx="916.16" gradientTransform="matrix(4.5735 -.17574 .13786 3.5876 -3230.9 1043.7)" r="7.5588"/>
  18 + <linearGradient id="linearGradient5496">
  19 + <stop id="stop5498" stop-color="#fff" stop-opacity="0" offset="0"/>
  20 + <stop id="stop5550" stop-color="#fff" stop-opacity=".10435" offset=".17494"/>
  21 + <stop id="stop5552" stop-color="#fff" stop-opacity=".92174" offset=".39279"/>
  22 + <stop id="stop5500" stop-color="#fff" offset="1"/>
  23 + </linearGradient>
  24 + </defs>
  25 + <g id="layer1" transform="translate(-312.45 -714.51)">
  26 + <g id="g5878" transform="translate(-538.52 1072.5)">
  27 + <g>
  28 + <path id="rect5195-5-0-1" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m858.57-358.03c-4.201 0.00074-7.606 3.8877-7.6055 8.6819v12.639c0.00065 4.7933 3.4054 8.6788 7.6055 8.6795h68.469c4.2001-0.00073 7.6049-3.8862 7.6055-8.6795v-12.639c0.00053-4.7942-3.4046-8.6812-7.6055-8.6819z" fill="url(#linearGradient5443)"/>
  29 + <path id="rect5195-5-0-1-4" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m858.57-355.25c-4.201 0.00062-7.606 3.2632-7.6055 7.2872v10.608c0.00065 4.0232 3.4054 7.2845 7.6055 7.2851h68.469c4.2001-0.00062 7.6049-3.2619 7.6055-7.2851v-10.608c0.00053-4.024-3.4046-7.2866-7.6055-7.2872z" fill="#585859"/>
  30 + <path id="rect5195-5-0-1-4-3" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m858.57-351.49c-4.201 0.00052-7.606 2.7592-7.6055 6.1617v8.9697c0.00065 3.4018 3.4054 6.1594 7.6055 6.16h68.469c4.2001-0.00052 7.6049-2.7581 7.6055-6.16v-8.9697c0.00053-3.4025-3.4046-6.1612-7.6055-6.1617z" fill="url(#linearGradient5490)"/>
  31 + </g>
  32 + <g id="g5554" transform="translate(2.0884 -2.1835)">
  33 + <circle id="path5494-3" cx="911.68" cy="-340.85" r="6.0124" fill="url(#linearGradient5534)"/>
  34 + <circle id="path5494" cx="911.68" cy="-340.85" r="5.3939" fill="url(#radialGradient5502)"/>
  35 + </g>
  36 + <g id="g5554-8" transform="translate(-39.746 -2.1835)">
  37 + <circle id="path5494-3-9" cx="911.68" cy="-340.85" r="6.0124" fill="url(#linearGradient5534)"/>
  38 + <circle id="path5494-7" cx="911.68" cy="-340.85" r="5.3939" fill="url(#radialGradient5502)"/>
  39 + </g>
  40 + </g>
  41 + </g>
  42 +</svg>
... ...
  1 +<svg id="svg7523" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="7.6161mm" width="11.594mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 41.08074 26.986356" xmlns:dc="http://purl.org/dc/elements/1.1/">
  2 + <defs id="defs7525">
  3 + <linearGradient id="linearGradient6257" y2="-412.79" gradientUnits="userSpaceOnUse" x2="821.92" gradientTransform="matrix(1 0 0 1.0219 -4.8132 52.955)" y1="-386.98" x1="822.46">
  4 + <stop id="stop5264" stop-color="#3d3d3d" offset="0"/>
  5 + <stop id="stop5266" stop-color="#fbfbfb" offset="1"/>
  6 + </linearGradient>
  7 + <linearGradient id="linearGradient6259" y2="-350.07" gradientUnits="userSpaceOnUse" x2="821.71" gradientTransform="translate(-3.8933 5.8759)" y1="-372.35" x1="821.89">
  8 + <stop id="stop5239" stop-color="#d1d1d1" offset="0"/>
  9 + <stop id="stop5243" stop-color="#e2e3e2" offset=".36037"/>
  10 + <stop id="stop5245" stop-color="#ededed" offset=".67781"/>
  11 + <stop id="stop5241" stop-color="#fcfcfc" offset="1"/>
  12 + </linearGradient>
  13 + <linearGradient id="linearGradient6261" y2="-333.89" gradientUnits="userSpaceOnUse" x2="913.16" gradientTransform="matrix(.78723 0 0 .78723 105.52 -77.537)" y1="-348.85" x1="912.9">
  14 + <stop id="stop5650" stop-color="#939393" offset="0"/>
  15 + <stop id="stop5652" stop-color="#fff" offset="1"/>
  16 + </linearGradient>
  17 + <radialGradient id="radialGradient5502-1-0-6" gradientUnits="userSpaceOnUse" cy="-342.2" cx="916.19" gradientTransform="matrix(1.9993 -.036196 .028926 1.5978 -997.39 230.16)" r="7.5588">
  18 + <stop id="stop5656" stop-color="#fff" stop-opacity="0" offset="0"/>
  19 + <stop id="stop5658" stop-color="#fff" stop-opacity=".18551" offset=".20750"/>
  20 + <stop id="stop5660" stop-color="#fff" stop-opacity=".32464" offset=".31814"/>
  21 + <stop id="stop5662" stop-color="#fff" offset="1"/>
  22 + </radialGradient>
  23 + </defs>
  24 + <g id="layer1" transform="translate(-259.46 -610.3)">
  25 + <g id="g6501" transform="translate(-602.12 869.32)">
  26 + <g id="g5664-5" transform="translate(57.91 100.68)">
  27 + <g id="g5329-3-4" transform="translate(13.694 -2.3675)">
  28 + <path id="rect5195-5-0-8-35" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m797.58-357.34a7.6067 7.8088 0 0 0 -7.6055 7.8098v11.369a7.6067 7.8088 0 0 0 7.6055 7.8076h25.87a7.6067 7.8088 0 0 0 7.6055 -7.8076v-11.369a7.6067 7.8088 0 0 0 -7.6055 -7.8098h-25.87z" fill="#1b1b1b"/>
  29 + <g id="g5300-6-7" transform="translate(-6.6863 11.667)">
  30 + <path id="rect5195-5-03-5" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m804.57-368.63a7.429 7.5918 0 0 0 -7.4279 7.5927v11.053a7.429 7.5918 0 0 0 7.4279 7.5906h25.266a7.429 7.5918 0 0 0 7.4279 -7.5906v-11.053a7.429 7.5918 0 0 0 -7.4279 -7.5927h-25.266z" fill="url(#linearGradient6257)"/>
  31 + <path id="rect5195-3-6" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m805.23-367.67a7.0362 7.0362 0 0 0 -7.0352 7.0371v10.244a7.0362 7.0362 0 0 0 7.0352 7.0352h23.93a7.0362 7.0362 0 0 0 7.0352 -7.0352v-10.244a7.0362 7.0362 0 0 0 -7.0352 -7.0371h-23.93z" fill="url(#linearGradient6259)"/>
  32 + </g>
  33 + </g>
  34 + <circle id="path5494-3-9-7-5" cx="824.21" cy="-346.21" r="6.0124" fill="url(#linearGradient6261)"/>
  35 + <circle id="path5494-7-8-95" cx="824.21" cy="-346.21" r="5.3939" fill="url(#radialGradient5502-1-0-6)"/>
  36 + </g>
  37 + <path id="rect5195-5-0-8-3-8" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m869.18-259.03a7.6067 7.8088 0 0 0 -7.6055 7.8098v11.369a7.6067 7.8088 0 0 0 7.6055 7.8076h25.87a7.6067 7.8088 0 0 0 7.6055 -7.8076v-11.369a7.6067 7.8088 0 0 0 -7.6055 -7.8098h-25.87z" fill-opacity=".78448" fill="#ff6e40"/>
  38 + </g>
  39 + </g>
  40 +</svg>
... ...
  1 +<svg id="svg6201" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="7.6161mm" width="11.594mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 41.08074 26.986349" xmlns:dc="http://purl.org/dc/elements/1.1/">
  2 + <defs id="defs6203">
  3 + <linearGradient id="linearGradient5382" y2="-412.79" gradientUnits="userSpaceOnUse" x2="821.92" gradientTransform="matrix(1 0 0 1.0219 -4.8132 52.955)" y1="-386.98" x1="822.46">
  4 + <stop id="stop5264" stop-color="#3d3d3d" offset="0"/>
  5 + <stop id="stop5266" stop-color="#fbfbfb" offset="1"/>
  6 + </linearGradient>
  7 + <linearGradient id="linearGradient5384" y2="-350.07" gradientUnits="userSpaceOnUse" x2="821.71" gradientTransform="translate(-3.8933 5.8759)" y1="-372.35" x1="821.89">
  8 + <stop id="stop5239" stop-color="#d1d1d1" offset="0"/>
  9 + <stop id="stop5243" stop-color="#e2e3e2" offset=".36037"/>
  10 + <stop id="stop5245" stop-color="#ededed" offset=".67781"/>
  11 + <stop id="stop5241" stop-color="#fcfcfc" offset="1"/>
  12 + </linearGradient>
  13 + <linearGradient id="linearGradient5644" y2="-333.89" gradientUnits="userSpaceOnUse" x2="913.16" gradientTransform="matrix(.78723 0 0 .78723 105.52 -77.537)" y1="-348.85" x1="912.9">
  14 + <stop id="stop5650" stop-color="#939393" offset="0"/>
  15 + <stop id="stop5652" stop-color="#fff" offset="1"/>
  16 + </linearGradient>
  17 + <radialGradient id="radialGradient5502-1-0" gradientUnits="userSpaceOnUse" cy="-342.2" cx="916.19" gradientTransform="matrix(1.9993 -.036196 .028926 1.5978 -997.39 230.16)" r="7.5588">
  18 + <stop id="stop5656" stop-color="#fff" stop-opacity="0" offset="0"/>
  19 + <stop id="stop5658" stop-color="#fff" stop-opacity=".18551" offset=".20750"/>
  20 + <stop id="stop5660" stop-color="#fff" stop-opacity=".32464" offset=".31814"/>
  21 + <stop id="stop5662" stop-color="#fff" offset="1"/>
  22 + </radialGradient>
  23 + </defs>
  24 + <g id="layer1" transform="translate(-288.03 -544.58)">
  25 + <g id="g5664" transform="translate(-515.63 904.29)">
  26 + <g id="g5329-3" transform="translate(13.694 -2.3675)">
  27 + <path id="rect5195-5-0-8" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m797.58-357.34a7.6067 7.8088 0 0 0 -7.6055 7.8098v11.369a7.6067 7.8088 0 0 0 7.6055 7.8076h25.87a7.6067 7.8088 0 0 0 7.6055 -7.8076v-11.369a7.6067 7.8088 0 0 0 -7.6055 -7.8098h-25.87z" fill="#1b1b1b"/>
  28 + <g id="g5300-6" transform="translate(-6.6863 11.667)">
  29 + <path id="rect5195-5-03" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m804.57-368.63a7.429 7.5918 0 0 0 -7.4279 7.5927v11.053a7.429 7.5918 0 0 0 7.4279 7.5906h25.266a7.429 7.5918 0 0 0 7.4279 -7.5906v-11.053a7.429 7.5918 0 0 0 -7.4279 -7.5927h-25.266z" fill="url(#linearGradient5382)"/>
  30 + <path id="rect5195-3" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m805.23-367.67a7.0362 7.0362 0 0 0 -7.0352 7.0371v10.244a7.0362 7.0362 0 0 0 7.0352 7.0352h23.93a7.0362 7.0362 0 0 0 7.0352 -7.0352v-10.244a7.0362 7.0362 0 0 0 -7.0352 -7.0371h-23.93z" fill="url(#linearGradient5384)"/>
  31 + </g>
  32 + </g>
  33 + <circle id="path5494-3-9-7" cy="-346.21" cx="824.21" r="6.0124" fill="url(#linearGradient5644)"/>
  34 + <circle id="path5494-7-8" cy="-346.21" cx="824.21" r="5.3939" fill="url(#radialGradient5502-1-0)"/>
  35 + </g>
  36 + </g>
  37 +</svg>
... ...
  1 +/*
  2 + * Copyright © 2016-2017 The Thingsboard Authors
  3 + *
  4 + * Licensed under the Apache License, Version 2.0 (the "License");
  5 + * you may not use this file except in compliance with the License.
  6 + * You may obtain a copy of the License at
  7 + *
  8 + * http://www.apache.org/licenses/LICENSE-2.0
  9 + *
  10 + * Unless required by applicable law or agreed to in writing, software
  11 + * distributed under the License is distributed on an "AS IS" BASIS,
  12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 + * See the License for the specific language governing permissions and
  14 + * limitations under the License.
  15 + */
  16 +
  17 +import './switch.scss';
  18 +
  19 +/* eslint-disable import/no-unresolved, import/default */
  20 +
  21 +import switchTemplate from './switch.tpl.html';
  22 +
  23 +/* eslint-enable import/no-unresolved, import/default */
  24 +
  25 +export default angular.module('thingsboard.widgets.rpc.switch', [])
  26 + .directive('tbSwitch', Switch)
  27 + .name;
  28 +
  29 +/*@ngInject*/
  30 +function Switch() {
  31 + return {
  32 + restrict: "E",
  33 + scope: true,
  34 + bindToController: {
  35 + ctx: '='
  36 + },
  37 + controller: SwitchController,
  38 + controllerAs: 'vm',
  39 + templateUrl: switchTemplate
  40 + };
  41 +}
  42 +
  43 +/*@ngInject*/
  44 +function SwitchController($element, $scope) {
  45 + let vm = this;
  46 +
  47 + vm.showTitle = false;
  48 + vm.value = false;
  49 + vm.error = '';
  50 +
  51 + var switchElement = angular.element('.switch', $element),
  52 + switchContainer = angular.element('#switch-container', $element),
  53 + mdSwitch = angular.element('md-switch', switchElement),
  54 + onoffContainer = angular.element('.onoff-container', $element),
  55 + onLabel = angular.element('.on-label', $element),
  56 + offLabel = angular.element('.off-label', $element),
  57 + switchTitleContainer = angular.element('.title-container', $element),
  58 + switchTitle = angular.element('.switch-title', $element),
  59 + textMeasure = angular.element('#text-measure', $element),
  60 + switchErrorContainer = angular.element('.error-container', $element),
  61 + switchError = angular.element('.switch-error', $element);
  62 +
  63 +
  64 + vm.onValue = onValue;
  65 +
  66 + $scope.$watch('vm.ctx', () => {
  67 + if (vm.ctx) {
  68 + init();
  69 + }
  70 + });
  71 +
  72 + function init() {
  73 +
  74 + vm.title = angular.isDefined(vm.ctx.settings.title) ? vm.ctx.settings.title : '';
  75 + vm.showTitle = vm.title && vm.title.length ? true : false;
  76 + vm.showOnOffLabels = angular.isDefined(vm.ctx.settings.showOnOffLabels) ? vm.ctx.settings.showOnOffLabels : true;
  77 + vm.ctx.resize = resize;
  78 + $scope.$applyAsync(() => {
  79 + resize();
  80 + });
  81 + var initialValue = angular.isDefined(vm.ctx.settings.initialValue) ? vm.ctx.settings.initialValue : false;
  82 + setValue(initialValue);
  83 +
  84 + var subscription = vm.ctx.defaultSubscription;
  85 + var rpcEnabled = subscription.rpcEnabled;
  86 +
  87 + vm.isSimulated = $scope.widgetEditMode;
  88 +
  89 + vm.requestTimeout = 500;
  90 + if (vm.ctx.settings.requestTimeout) {
  91 + vm.requestTimeout = vm.ctx.settings.requestTimeout;
  92 + }
  93 + vm.getValueMethod = 'getValue';
  94 + if (vm.ctx.settings.getValueMethod && vm.ctx.settings.getValueMethod.length) {
  95 + vm.getValueMethod = vm.ctx.settings.getValueMethod;
  96 + }
  97 + vm.setValueMethod = 'setValue';
  98 + if (vm.ctx.settings.setValueMethod && vm.ctx.settings.setValueMethod.length) {
  99 + vm.setValueMethod = vm.ctx.settings.setValueMethod;
  100 + }
  101 + if (!rpcEnabled) {
  102 + onError('Target device is not set!');
  103 + } else {
  104 + if (!vm.isSimulated) {
  105 + rpcRequestValue();
  106 + }
  107 + }
  108 + }
  109 +
  110 + const switchAspectRation = 2.7893;
  111 +
  112 + function resize() {
  113 + var width = switchContainer.width();
  114 + var height;
  115 + if (vm.showOnOffLabels) {
  116 + height = switchContainer.height()*2/3;
  117 + } else {
  118 + height = switchContainer.height();
  119 + }
  120 + var ratio = width/height;
  121 + if (ratio > switchAspectRation) {
  122 + width = height*switchAspectRation;
  123 + } else {
  124 + height = width/switchAspectRation;
  125 + }
  126 + switchElement.css({width: width, height: height});
  127 + mdSwitch.css('height', height+'px');
  128 + mdSwitch.css('width', width+'px');
  129 + mdSwitch.css('min-width', width+'px');
  130 + angular.element('.md-container', mdSwitch).css('height', height+'px');
  131 + angular.element('.md-container', mdSwitch).css('width', width+'px');
  132 +
  133 +
  134 + if (vm.showTitle) {
  135 + setFontSize(switchTitle, vm.title, switchTitleContainer.height() * 2 / 3, switchTitleContainer.width());
  136 + }
  137 +
  138 + if (vm.showOnOffLabels) {
  139 + onoffContainer.css({width: width, height: switchContainer.height() / 3});
  140 + setFontSize(onLabel, 'OFF', onoffContainer.height(), onoffContainer.width() / 2);
  141 + setFontSize(offLabel, 'OFF', onoffContainer.height(), onoffContainer.width() / 2);
  142 + }
  143 +
  144 + setFontSize(switchError, vm.error, switchErrorContainer.height(), switchErrorContainer.width());
  145 + }
  146 +
  147 + function setValue(value) {
  148 + vm.value = value ? true : false;
  149 + }
  150 +
  151 + function onValue() {
  152 + rpcUpdateValue(vm.value);
  153 + }
  154 +
  155 + function onError(error) {
  156 + $scope.$applyAsync(() => {
  157 + vm.error = error;
  158 + setFontSize(switchError, vm.error, switchErrorContainer.height(), switchErrorContainer.width());
  159 + });
  160 + }
  161 +
  162 + function setFontSize(element, text, fontSize, maxWidth) {
  163 + var textWidth = measureTextWidth(text, fontSize);
  164 + while (textWidth > maxWidth) {
  165 + fontSize--;
  166 + textWidth = measureTextWidth(text, fontSize);
  167 + }
  168 + element.css({'fontSize': fontSize+'px', 'lineHeight': fontSize+'px'});
  169 + }
  170 +
  171 + function measureTextWidth(text, fontSize) {
  172 + textMeasure.css({'fontSize': fontSize+'px', 'lineHeight': fontSize+'px'});
  173 + textMeasure.text(text);
  174 + return textMeasure.width();
  175 + }
  176 +
  177 + function rpcRequestValue() {
  178 + vm.error = '';
  179 + vm.ctx.controlApi.sendTwoWayCommand(vm.getValueMethod, null, vm.requestTimeout).then(
  180 + (responseBody) => {
  181 + setValue(responseBody);
  182 + },
  183 + () => {
  184 + var errorText = vm.ctx.defaultSubscription.rpcErrorText;
  185 + onError(errorText);
  186 + }
  187 + );
  188 + }
  189 +
  190 + function rpcUpdateValue(value) {
  191 + if (vm.executingUpdateValue) {
  192 + vm.scheduledValue = value;
  193 + return;
  194 + } else {
  195 + vm.scheduledValue = null;
  196 + vm.rpcValue = value;
  197 + vm.executingUpdateValue = true;
  198 + }
  199 + vm.error = '';
  200 + vm.ctx.controlApi.sendOneWayCommand(vm.setValueMethod, value, vm.requestTimeout).then(
  201 + () => {
  202 + vm.executingUpdateValue = false;
  203 + if (vm.scheduledValue != null && vm.scheduledValue != vm.rpcValue) {
  204 + rpcUpdateValue(vm.scheduledValue);
  205 + }
  206 + },
  207 + () => {
  208 + vm.executingUpdateValue = false;
  209 + var errorText = vm.ctx.defaultSubscription.rpcErrorText;
  210 + onError(errorText);
  211 + }
  212 + );
  213 + }
  214 +}
... ...
  1 +/**
  2 + * Copyright © 2016-2017 The Thingsboard Authors
  3 + *
  4 + * Licensed under the Apache License, Version 2.0 (the "License");
  5 + * you may not use this file except in compliance with the License.
  6 + * You may obtain a copy of the License at
  7 + *
  8 + * http://www.apache.org/licenses/LICENSE-2.0
  9 + *
  10 + * Unless required by applicable law or agreed to in writing, software
  11 + * distributed under the License is distributed on an "AS IS" BASIS,
  12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 + * See the License for the specific language governing permissions and
  14 + * limitations under the License.
  15 + */
  16 +
  17 +$thumb-img: url('./svg/thumb.svg');
  18 +$thumb-checked-img: url('./svg/thumb-checked.svg');
  19 +$thumb-bar-img: url('./svg/thumb-bar.svg');
  20 +$thumb-bar-checked-img: url('./svg/thumb-bar-checked.svg');
  21 +
  22 +$background-color: #e6e7e8;
  23 +
  24 +$error-height: 14px;
  25 +
  26 +.tb-switch {
  27 + width:100%;
  28 + height:100%;
  29 + background: $background-color;
  30 +
  31 + .error-container {
  32 + position:absolute;
  33 + top: 1%;
  34 + left: 0;
  35 + right: 0;
  36 + z-index:4;
  37 + height: $error-height;
  38 + .switch-error {
  39 + color: #ff3315;
  40 + white-space: nowrap;
  41 + }
  42 + }
  43 +
  44 + .onoff-container {
  45 + height: 100%;
  46 + color: #757575;
  47 + font-weight: 500;
  48 + white-space: nowrap;
  49 + .off-label {
  50 + color: #b7b5b5;
  51 + }
  52 + .on-label {
  53 + color: #ff7e57;
  54 + text-shadow: #ff6e4a 1px 1px 10px, #ffd1c3 1px 1px 10px;
  55 + }
  56 + }
  57 + .title-container {
  58 + .switch-title {
  59 + color: #757575;
  60 + font-weight: 500;
  61 + white-space: nowrap;
  62 + }
  63 + }
  64 +
  65 + #switch-container {
  66 + padding-left: 10px;
  67 + padding-right: 10px;
  68 + }
  69 + .switch {
  70 + position: relative;
  71 + md-switch {
  72 + margin: 0;
  73 + position:absolute;
  74 + top: 0;
  75 + left: 0;
  76 + bottom: 0;
  77 + right: 0;
  78 + .md-container {
  79 + margin: 0;
  80 + }
  81 + .md-bar {
  82 + left: 0;
  83 + width: 100%;
  84 + top: 0;
  85 + height: 100%;
  86 + border-radius: 0;
  87 + background:$thumb-bar-img no-repeat;
  88 + background-size: contain;
  89 + }
  90 + .md-thumb-container {
  91 + left: 0.25%;
  92 + width: 50%;
  93 + top: 5%;
  94 + height: 90%;
  95 + }
  96 + .md-thumb {
  97 + top: 0;
  98 + left: 0;
  99 + height: 100%;
  100 + width: 100%;
  101 + background:$thumb-img no-repeat;
  102 + background-size: contain;
  103 + border-radius: 0;
  104 + box-shadow: none;
  105 + }
  106 +
  107 + &.md-checked {
  108 + .md-bar {
  109 + background:$thumb-bar-checked-img no-repeat;
  110 + background-size: contain;
  111 + }
  112 + .md-thumb {
  113 + background:$thumb-checked-img no-repeat;
  114 + background-size: contain;
  115 + }
  116 + }
  117 +
  118 + }
  119 + }
  120 + #text-measure {
  121 + position: absolute;
  122 + visibility: hidden;
  123 + height: auto;
  124 + width: auto;
  125 + white-space: nowrap;
  126 + }
  127 +}
... ...
  1 +<!--
  2 +
  3 + Copyright © 2016-2017 The Thingsboard Authors
  4 +
  5 + Licensed under the Apache License, Version 2.0 (the "License");
  6 + you may not use this file except in compliance with the License.
  7 + You may obtain a copy of the License at
  8 +
  9 + http://www.apache.org/licenses/LICENSE-2.0
  10 +
  11 + Unless required by applicable law or agreed to in writing, software
  12 + distributed under the License is distributed on an "AS IS" BASIS,
  13 + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14 + See the License for the specific language governing permissions and
  15 + limitations under the License.
  16 +
  17 +-->
  18 +
  19 +<div class="tb-switch" layout="column" ng-style="{'pointerEvents': vm.ctx.isEdit ? 'none' : 'all'}">
  20 + <div class="error-container" ng-style="{'background': vm.error.length ? 'rgba(255,255,255,0.25)' : 'none'}"
  21 + layout="row" layout-align="center center">
  22 + <span class="switch-error">{{ vm.error }}</span>
  23 + </div>
  24 + <div flex="30" class="title-container" layout="row" layout-align="center center" ng-show="vm.showTitle">
  25 + <span class="switch-title">{{vm.title}}</span>
  26 + </div>
  27 + <div flex="{{vm.showTitle ? 70 : 100}}" id="switch-container" layout="column" layout-align="center center">
  28 + <div class="switch">
  29 + <md-switch md-no-ink aria-label="Switch control" ng-model="vm.value" ng-change="vm.onValue()">
  30 + </md-switch>
  31 + </div>
  32 + <div class="onoff-container" layout="row" layout-align="center start" ng-show="vm.showOnOffLabels">
  33 + <span flex class="off-label" ng-show="!vm.value" style="text-align: center;">OFF</span>
  34 + <span flex ng-show="vm.value"></span>
  35 + <span flex class="on-label" ng-show="vm.value" style="text-align: center;">ON</span>
  36 + <span flex ng-show="!vm.value"></span>
  37 + </div>
  38 + </div>
  39 + <div id="text-measure"></div>
  40 +</div>
... ...