简柏林 / thingskit · Commits

Commit 99923be0344c52a88af8dbb2a2d90e9f25ebc628

Authored by Igor Kulikov
Committed by GitHub
2 parents 1cc9bc01 a99d0737

Merge pull request #362 from Terny22/analogue-compass-widget 

Added new analogue compass widget
Inline Side-by-side
Showing 3 changed files with 456 additions and 0 deletions
... ... @@ -68,6 +68,22 @@
68 68 "dataKeySettingsSchema": "{}\n",
69 69 "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":60,\"startAngle\":67.5,\"ticksAngle\":225,\"showBorder\":true,\"defaultColor\":\"#e65100\",\"needleCircleSize\":7,\"highlights\":[{\"from\":-60,\"to\":-50,\"color\":\"#42a5f5\"},{\"from\":-50,\"to\":-40,\"color\":\"rgba(66, 165, 245, 0.83)\"},{\"from\":-40,\"to\":-30,\"color\":\"rgba(66, 165, 245, 0.66)\"},{\"from\":-30,\"to\":-20,\"color\":\"rgba(66, 165, 245, 0.5)\"},{\"from\":-20,\"to\":-10,\"color\":\"rgba(66, 165, 245, 0.33)\"},{\"from\":-10,\"to\":0,\"color\":\"rgba(66, 165, 245, 0.16)\"},{\"from\":0,\"to\":10,\"color\":\"rgba(229, 115, 115, 0.16)\"},{\"from\":10,\"to\":20,\"color\":\"rgba(229, 115, 115, 0.33)\"},{\"from\":20,\"to\":30,\"color\":\"rgba(229, 115, 115, 0.5)\"},{\"from\":30,\"to\":40,\"color\":\"rgba(229, 115, 115, 0.66)\"},{\"from\":40,\"to\":50,\"color\":\"rgba(229, 115, 115, 0.83)\"},{\"from\":50,\"to\":60,\"color\":\"#e57373\"}],\"showUnitTitle\":true,\"colorPlate\":\"#cfd8dc\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":2,\"valueInt\":3,\"valueDec\":1,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":1000,\"animationRule\":\"bounce\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"colorNeedleShadowDown\":\"rgba(188, 143, 143, 0.78)\",\"units\":\"°C\",\"majorTicksCount\":12,\"numbersFont\":{\"family\":\"Roboto\",\"size\":20,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":28,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"family\":\"Segment7Standard\",\"size\":30,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\"},\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\",\"unitTitle\":\"Temperature\",\"minValue\":-60},\"title\":\"Temperature radial gauge - Canvas Gauges\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}"
70 70 }
  71 + },
  72 + {
  73 + "alias": "analogue_compass",
  74 + "name": "Analogue Compass",
  75 + "descriptor": {
  76 + "type": "latest",
  77 + "sizeX": 6,
  78 + "sizeY": 5,
  79 + "resources": [],
  80 + "templateHtml": "<canvas id=\"compass\"></canvas>",
  81 + "templateCss": "",
  82 + "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueCompass(self.ctx, 'compass');\n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.getSettingsSchema = function() {\n return TbAnalogueCompass.settingsSchema;\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1\n };\n}\n\nself.onDestroy = function() {\n}\n",
  83 + "settingsSchema": "{}",
  84 + "dataKeySettingsSchema": "{}\n",
  85 + "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\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"minorTicks\":22,\"needleCircleSize\":15,\"showBorder\":true,\"borderOuterWidth\":10,\"colorPlate\":\"#222\",\"colorMajorTicks\":\"#f5f5f5\",\"colorMinorTicks\":\"#ddd\",\"colorNeedle\":\"#f08080\",\"colorNeedleCircle\":\"#e8e8e8\",\"colorBorder\":\"#ccc\",\"majorTickFont\":{\"family\":\"Roboto\",\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#ccc\"},\"animation\":true,\"animationDuration\":500,\"animationRule\":\"cycle\",\"animationTarget\":\"needle\",\"majorTicks\":[\"N\",\"NE\",\"E\",\"SE\",\"S\",\"SW\",\"W\",\"NW\"]},\"title\":\"Analogue Compass\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{}}"
  86 + }
71 87 }
72 88 ]
73 89 }
\ No newline at end of file
... ...
... ... @@ -27,6 +27,7 @@ import thingsboardRpcWidgets from '../widget/lib/rpc';
27 27 import TbFlot from '../widget/lib/flot-widget';
28 28 import TbAnalogueLinearGauge from '../widget/lib/analogue-linear-gauge';
29 29 import TbAnalogueRadialGauge from '../widget/lib/analogue-radial-gauge';
  30 +import TbAnalogueCompass from '../widget/lib/analogue-compass';
30 31 import TbCanvasDigitalGauge from '../widget/lib/canvas-digital-gauge';
31 32 import TbMapWidget from '../widget/lib/map-widget';
32 33 import TbMapWidgetV2 from '../widget/lib/map-widget2';
... ... @@ -57,6 +58,7 @@ function WidgetService($rootScope, $http, $q, $filter, $ocLazyLoad, $window, $tr
57 58 $window.TbFlot = TbFlot;
58 59 $window.TbAnalogueLinearGauge = TbAnalogueLinearGauge;
59 60 $window.TbAnalogueRadialGauge = TbAnalogueRadialGauge;
  61 + $window.TbAnalogueCompass = TbAnalogueCompass;
60 62 $window.TbCanvasDigitalGauge = TbCanvasDigitalGauge;
61 63 $window.TbMapWidget = TbMapWidget;
62 64 $window.TbMapWidgetV2 = TbMapWidgetV2;
... ...
  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 +import $ from 'jquery';
  17 +import canvasGauges from 'canvas-gauges';
  18 +/*import tinycolor from 'tinycolor2';*/
  19 +
  20 +export default class TbAnalogueCompass {
  21 + constructor(ctx, canvasId) {
  22 + this.ctx = ctx;
  23 +
  24 + canvasGauges.performance = window.performance; // eslint-disable-line no-undef, angular/window-service
  25 +
  26 + var gaugeElement = $('#'+canvasId, ctx.$container);
  27 +
  28 + var settings = ctx.settings;
  29 + var majorTicks = (settings.majorTicks && settings.majorTicks.length > 0) ? angular.copy(settings.majorTicks) : ["N","NE","E","SE","S","SW","W","NW"];
  30 + majorTicks.push(majorTicks[0]);
  31 +
  32 + function getFontFamily(fontSettings) {
  33 + var family = fontSettings && fontSettings.family ? fontSettings.family : 'Roboto';
  34 + if (family === 'RobotoDraft') {
  35 + family = 'Roboto';
  36 + }
  37 + return family;
  38 + }
  39 +
  40 + var gaugeData = {
  41 +
  42 + renderTo: gaugeElement[0],
  43 +
  44 + // Generic options
  45 + minValue: 0,
  46 + maxValue: 360,
  47 + majorTicks: majorTicks,
  48 + minorTicks: settings.minorTicks || 22,
  49 + ticksAngle: 360,
  50 + startAngle: 180,
  51 + strokeTicks: settings.showStrokeTicks || false,
  52 + highlights: false,
  53 + valueBox: false,
  54 +
  55 + //needle
  56 + needleCircleSize: settings.needleCircleSize || 15,
  57 + needleType: 'line',
  58 + needleStart: 75,
  59 + needleEnd: 99,
  60 + needleWidth: 3,
  61 + needleCircleOuter: false,
  62 +
  63 + //borders
  64 + borders: settings.showBorder || false,
  65 + borderInnerWidth: 0,
  66 + borderMiddleWidth: 0,
  67 + borderOuterWidth: settings.borderOuterWidth || 10,
  68 + borderShadowWidth: 0,
  69 +
  70 + //colors
  71 + colorPlate: settings.colorPlate || '#222',
  72 + colorMajorTicks: settings.colorMajorTicks || '#f5f5f5',
  73 + colorMinorTicks: settings.colorMinorTicks || '#ddd',
  74 + colorNeedle: settings.colorNeedle || '#f08080',
  75 + colorNeedleEnd: settings.colorNeedle || '#f08080',
  76 + colorNeedleCircleInner: settings.colorNeedleCircle || '#e8e8e8',
  77 + colorNeedleCircleInnerEnd: settings.colorNeedleCircle || '#e8e8e8',
  78 + colorBorderOuter: settings.colorBorder || '#ccc',
  79 + colorBorderOuterEnd: settings.colorBorder || '#ccc',
  80 + colorNeedleShadowDown: "#222",
  81 +
  82 + //fonts
  83 + fontNumbers: getFontFamily(settings.majorTickFont),
  84 + fontNumbersSize: settings.majorTickFont && settings.majorTickFont.size ? settings.majorTickFont.size : 20,
  85 + fontNumbersStyle: settings.majorTickFont && settings.majorTickFont.style ? settings.majorTickFont.style : 'normal',
  86 + fontNumbersWeight: settings.majorTickFont && settings.majorTickFont.weight ? settings.majorTickFont.weight : '500',
  87 + colorNumbers: settings.majorTickFont && settings.majorTickFont.color ? settings.majorTickFont.color : '#ccc',
  88 +
  89 + //animations
  90 + animation: settings.animation !== false && !ctx.isMobile,
  91 + animationDuration: (angular.isDefined(settings.animationDuration) && settings.animationDuration !== null) ? settings.animationDuration : 500,
  92 + animationRule: settings.animationRule || 'cycle',
  93 + animationTarget: settings.animationTarget || 'needle'
  94 + };
  95 + this.gauge = new canvasGauges.RadialGauge(gaugeData).draw();
  96 + }
  97 +
  98 + update() {
  99 + if (this.ctx.data.length > 0) {
  100 + var cellData = this.ctx.data[0];
  101 + if (cellData.data.length > 0) {
  102 + var tvPair = cellData.data[cellData.data.length -
  103 + 1];
  104 + var value = tvPair[1];
  105 + this.gauge.value = value;
  106 + }
  107 + }
  108 + }
  109 +
  110 + mobileModeChanged() {
  111 + var animation = this.ctx.settings.animation !== false && !this.ctx.isMobile;
  112 + this.gauge.update({animation: animation});
  113 + }
  114 +
  115 + resize() {
  116 + this.gauge.update({width: this.ctx.width, height: this.ctx.height});
  117 + }
  118 +
  119 + static get settingsSchema() {
  120 + return {
  121 + "schema": {
  122 + "type": "object",
  123 + "title": "Settings",
  124 + "properties": {
  125 + "majorTicks": {
  126 + "title": "Major ticks names",
  127 + "type": "array",
  128 + "items": {
  129 + "title": "Tick name",
  130 + "type": "string"
  131 + }
  132 + },
  133 + "minorTicks": {
  134 + "title": "Minor ticks count",
  135 + "type": "number",
  136 + "default": 22
  137 + },
  138 + "showStrokeTicks": {
  139 + "title": "Show ticks stroke",
  140 + "type": "boolean",
  141 + "default": false
  142 + },
  143 + "needleCircleSize": {
  144 + "title": "Needle circle size",
  145 + "type": "number",
  146 + "default": 15
  147 + },
  148 + "showBorder": {
  149 + "title": "Show border",
  150 + "type": "boolean",
  151 + "default": true
  152 + },
  153 + "borderOuterWidth": {
  154 + "title": "Border width",
  155 + "type": "number",
  156 + "default": 10
  157 + },
  158 + "colorPlate": {
  159 + "title": "Plate color",
  160 + "type": "string",
  161 + "default": "#222"
  162 + },
  163 + "colorMajorTicks": {
  164 + "title": "Major ticks color",
  165 + "type": "string",
  166 + "default": "#f5f5f5"
  167 + },
  168 + "colorMinorTicks": {
  169 + "title": "Minor ticks color",
  170 + "type": "string",
  171 + "default": "#ddd"
  172 + },
  173 + "colorNeedle": {
  174 + "title": "Needle color",
  175 + "type": "string",
  176 + "default": "#f08080"
  177 + },
  178 + "colorNeedleCircle": {
  179 + "title": "Needle circle color",
  180 + "type": "string",
  181 + "default": "#e8e8e8"
  182 + },
  183 + "colorBorder": {
  184 + "title": "Border color",
  185 + "type": "string",
  186 + "default": "#ccc"
  187 + },
  188 + "majorTickFont": {
  189 + "title": "Major tick font",
  190 + "type": "object",
  191 + "properties": {
  192 + "family": {
  193 + "title": "Font family",
  194 + "type": "string",
  195 + "default": "Roboto"
  196 + },
  197 + "size": {
  198 + "title": "Size",
  199 + "type": "number",
  200 + "default": 20
  201 + },
  202 + "style": {
  203 + "title": "Style",
  204 + "type": "string",
  205 + "default": "normal"
  206 + },
  207 + "weight": {
  208 + "title": "Weight",
  209 + "type": "string",
  210 + "default": "500"
  211 + },
  212 + "color": {
  213 + "title": "color",
  214 + "type": "string",
  215 + "default": "#ccc"
  216 + }
  217 + }
  218 + },
  219 + "animation": {
  220 + "title": "Enable animation",
  221 + "type": "boolean",
  222 + "default": true
  223 + },
  224 + "animationDuration": {
  225 + "title": "Animation duration",
  226 + "type": "number",
  227 + "default": 500
  228 + },
  229 + "animationRule": {
  230 + "title": "Animation rule",
  231 + "type": "string",
  232 + "default": "cycle"
  233 + },
  234 + "animationTarget": {
  235 + "title": "Animation target",
  236 + "type": "string",
  237 + "default": "needle"
  238 + }
  239 + },
  240 + "required": []
  241 + },
  242 + "form": [
  243 + {
  244 + "key": "majorTicks",
  245 + "items":[
  246 + "majorTicks[]"
  247 + ]
  248 + },
  249 + "minorTicks",
  250 + "showStrokeTicks",
  251 + "needleCircleSize",
  252 + "showBorder",
  253 + "borderOuterWidth",
  254 + {
  255 + "key": "colorPlate",
  256 + "type": "color"
  257 + },
  258 + {
  259 + "key": "colorMajorTicks",
  260 + "type": "color"
  261 + },
  262 + {
  263 + "key": "colorMinorTicks",
  264 + "type": "color"
  265 + },
  266 + {
  267 + "key": "colorNeedle",
  268 + "type": "color"
  269 + },
  270 + {
  271 + "key": "colorNeedleCircle",
  272 + "type": "color"
  273 + },
  274 + {
  275 + "key": "colorBorder",
  276 + "type": "color"
  277 + },
  278 + {
  279 + "key": "majorTickFont",
  280 + "items": [
  281 + "majorTickFont.family",
  282 + "majorTickFont.size",
  283 + {
  284 + "key": "majorTickFont.style",
  285 + "type": "rc-select",
  286 + "multiple": false,
  287 + "items": [
  288 + {
  289 + "value": "normal",
  290 + "label": "Normal"
  291 + },
  292 + {
  293 + "value": "italic",
  294 + "label": "Italic"
  295 + },
  296 + {
  297 + "value": "oblique",
  298 + "label": "Oblique"
  299 + }
  300 + ]
  301 + },
  302 + {
  303 + "key": "majorTickFont.weight",
  304 + "type": "rc-select",
  305 + "multiple": false,
  306 + "items": [
  307 + {
  308 + "value": "normal",
  309 + "label": "Normal"
  310 + },
  311 + {
  312 + "value": "bold",
  313 + "label": "Bold"
  314 + },
  315 + {
  316 + "value": "bolder",
  317 + "label": "Bolder"
  318 + },
  319 + {
  320 + "value": "lighter",
  321 + "label": "Lighter"
  322 + },
  323 + {
  324 + "value": "100",
  325 + "label": "100"
  326 + },
  327 + {
  328 + "value": "200",
  329 + "label": "200"
  330 + },
  331 + {
  332 + "value": "300",
  333 + "label": "300"
  334 + },
  335 + {
  336 + "value": "400",
  337 + "label": "400"
  338 + },
  339 + {
  340 + "value": "500",
  341 + "label": "500"
  342 + },
  343 + {
  344 + "value": "600",
  345 + "label": "600"
  346 + },
  347 + {
  348 + "value": "700",
  349 + "label": "800"
  350 + },
  351 + {
  352 + "value": "800",
  353 + "label": "800"
  354 + },
  355 + {
  356 + "value": "900",
  357 + "label": "900"
  358 + }
  359 + ]
  360 + },
  361 + {
  362 + "key": "majorTickFont.color",
  363 + "type": "color"
  364 + }
  365 + ]
  366 + },
  367 + "animation",
  368 + "animationDuration",
  369 + {
  370 + "key": "animationRule",
  371 + "type": "rc-select",
  372 + "multiple": false,
  373 + "items": [
  374 + {
  375 + "value": "linear",
  376 + "label": "Linear"
  377 + },
  378 + {
  379 + "value": "quad",
  380 + "label": "Quad"
  381 + },
  382 + {
  383 + "value": "quint",
  384 + "label": "Quint"
  385 + },
  386 + {
  387 + "value": "cycle",
  388 + "label": "Cycle"
  389 + },
  390 + {
  391 + "value": "bounce",
  392 + "label": "Bounce"
  393 + },
  394 + {
  395 + "value": "elastic",
  396 + "label": "Elastic"
  397 + },
  398 + {
  399 + "value": "dequad",
  400 + "label": "Dequad"
  401 + },
  402 + {
  403 + "value": "dequint",
  404 + "label": "Dequint"
  405 + },
  406 + {
  407 + "value": "decycle",
  408 + "label": "Decycle"
  409 + },
  410 + {
  411 + "value": "debounce",
  412 + "label": "Debounce"
  413 + },
  414 + {
  415 + "value": "delastic",
  416 + "label": "Delastic"
  417 + }
  418 + ]
  419 + },
  420 + {
  421 + "key": "animationTarget",
  422 + "type": "rc-select",
  423 + "multiple": false,
  424 + "items": [
  425 + {
  426 + "value": "needle",
  427 + "label": "Needle"
  428 + },
  429 + {
  430 + "value": "plate",
  431 + "label": "Plate"
  432 + }
  433 + ]
  434 + }
  435 + ]
  436 + };
  437 + }
  438 +}
... ...