Sergey Tarnavskiy
9 years ago
3 changed files with 456 additions and 0 deletions
@ -0,0 +1,438 @@ |
|||
/* |
|||
* Copyright © 2016-2017 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
import $ from 'jquery'; |
|||
import canvasGauges from 'canvas-gauges'; |
|||
/*import tinycolor from 'tinycolor2';*/ |
|||
|
|||
export default class TbAnalogueCompass { |
|||
constructor(ctx, canvasId) { |
|||
this.ctx = ctx; |
|||
|
|||
canvasGauges.performance = window.performance; // eslint-disable-line no-undef, angular/window-service
|
|||
|
|||
var gaugeElement = $('#'+canvasId, ctx.$container); |
|||
|
|||
var settings = ctx.settings; |
|||
var majorTicks = (settings.majorTicks && settings.majorTicks.length > 0) ? angular.copy(settings.majorTicks) : ["N","NE","E","SE","S","SW","W","NW"]; |
|||
majorTicks.push(majorTicks[0]); |
|||
|
|||
function getFontFamily(fontSettings) { |
|||
var family = fontSettings && fontSettings.family ? fontSettings.family : 'Roboto'; |
|||
if (family === 'RobotoDraft') { |
|||
family = 'Roboto'; |
|||
} |
|||
return family; |
|||
} |
|||
|
|||
var gaugeData = { |
|||
|
|||
renderTo: gaugeElement[0], |
|||
|
|||
// Generic options
|
|||
minValue: 0, |
|||
maxValue: 360, |
|||
majorTicks: majorTicks, |
|||
minorTicks: settings.minorTicks || 22, |
|||
ticksAngle: 360, |
|||
startAngle: 180, |
|||
strokeTicks: settings.showStrokeTicks || false, |
|||
highlights: false, |
|||
valueBox: false, |
|||
|
|||
//needle
|
|||
needleCircleSize: settings.needleCircleSize || 15, |
|||
needleType: 'line', |
|||
needleStart: 75, |
|||
needleEnd: 99, |
|||
needleWidth: 3, |
|||
needleCircleOuter: false, |
|||
|
|||
//borders
|
|||
borders: settings.showBorder || false, |
|||
borderInnerWidth: 0, |
|||
borderMiddleWidth: 0, |
|||
borderOuterWidth: settings.borderOuterWidth || 10, |
|||
borderShadowWidth: 0, |
|||
|
|||
//colors
|
|||
colorPlate: settings.colorPlate || '#222', |
|||
colorMajorTicks: settings.colorMajorTicks || '#f5f5f5', |
|||
colorMinorTicks: settings.colorMinorTicks || '#ddd', |
|||
colorNeedle: settings.colorNeedle || '#f08080', |
|||
colorNeedleEnd: settings.colorNeedle || '#f08080', |
|||
colorNeedleCircleInner: settings.colorNeedleCircle || '#e8e8e8', |
|||
colorNeedleCircleInnerEnd: settings.colorNeedleCircle || '#e8e8e8', |
|||
colorBorderOuter: settings.colorBorder || '#ccc', |
|||
colorBorderOuterEnd: settings.colorBorder || '#ccc', |
|||
colorNeedleShadowDown: "#222", |
|||
|
|||
//fonts
|
|||
fontNumbers: getFontFamily(settings.majorTickFont), |
|||
fontNumbersSize: settings.majorTickFont && settings.majorTickFont.size ? settings.majorTickFont.size : 20, |
|||
fontNumbersStyle: settings.majorTickFont && settings.majorTickFont.style ? settings.majorTickFont.style : 'normal', |
|||
fontNumbersWeight: settings.majorTickFont && settings.majorTickFont.weight ? settings.majorTickFont.weight : '500', |
|||
colorNumbers: settings.majorTickFont && settings.majorTickFont.color ? settings.majorTickFont.color : '#ccc', |
|||
|
|||
//animations
|
|||
animation: settings.animation !== false && !ctx.isMobile, |
|||
animationDuration: (angular.isDefined(settings.animationDuration) && settings.animationDuration !== null) ? settings.animationDuration : 500, |
|||
animationRule: settings.animationRule || 'cycle', |
|||
animationTarget: settings.animationTarget || 'needle' |
|||
}; |
|||
this.gauge = new canvasGauges.RadialGauge(gaugeData).draw(); |
|||
} |
|||
|
|||
update() { |
|||
if (this.ctx.data.length > 0) { |
|||
var cellData = this.ctx.data[0]; |
|||
if (cellData.data.length > 0) { |
|||
var tvPair = cellData.data[cellData.data.length - |
|||
1]; |
|||
var value = tvPair[1]; |
|||
this.gauge.value = value; |
|||
} |
|||
} |
|||
} |
|||
|
|||
mobileModeChanged() { |
|||
var animation = this.ctx.settings.animation !== false && !this.ctx.isMobile; |
|||
this.gauge.update({animation: animation}); |
|||
} |
|||
|
|||
resize() { |
|||
this.gauge.update({width: this.ctx.width, height: this.ctx.height}); |
|||
} |
|||
|
|||
static get settingsSchema() { |
|||
return { |
|||
"schema": { |
|||
"type": "object", |
|||
"title": "Settings", |
|||
"properties": { |
|||
"majorTicks": { |
|||
"title": "Major ticks names", |
|||
"type": "array", |
|||
"items": { |
|||
"title": "Tick name", |
|||
"type": "string" |
|||
} |
|||
}, |
|||
"minorTicks": { |
|||
"title": "Minor ticks count", |
|||
"type": "number", |
|||
"default": 22 |
|||
}, |
|||
"showStrokeTicks": { |
|||
"title": "Show ticks stroke", |
|||
"type": "boolean", |
|||
"default": false |
|||
}, |
|||
"needleCircleSize": { |
|||
"title": "Needle circle size", |
|||
"type": "number", |
|||
"default": 15 |
|||
}, |
|||
"showBorder": { |
|||
"title": "Show border", |
|||
"type": "boolean", |
|||
"default": true |
|||
}, |
|||
"borderOuterWidth": { |
|||
"title": "Border width", |
|||
"type": "number", |
|||
"default": 10 |
|||
}, |
|||
"colorPlate": { |
|||
"title": "Plate color", |
|||
"type": "string", |
|||
"default": "#222" |
|||
}, |
|||
"colorMajorTicks": { |
|||
"title": "Major ticks color", |
|||
"type": "string", |
|||
"default": "#f5f5f5" |
|||
}, |
|||
"colorMinorTicks": { |
|||
"title": "Minor ticks color", |
|||
"type": "string", |
|||
"default": "#ddd" |
|||
}, |
|||
"colorNeedle": { |
|||
"title": "Needle color", |
|||
"type": "string", |
|||
"default": "#f08080" |
|||
}, |
|||
"colorNeedleCircle": { |
|||
"title": "Needle circle color", |
|||
"type": "string", |
|||
"default": "#e8e8e8" |
|||
}, |
|||
"colorBorder": { |
|||
"title": "Border color", |
|||
"type": "string", |
|||
"default": "#ccc" |
|||
}, |
|||
"majorTickFont": { |
|||
"title": "Major tick font", |
|||
"type": "object", |
|||
"properties": { |
|||
"family": { |
|||
"title": "Font family", |
|||
"type": "string", |
|||
"default": "Roboto" |
|||
}, |
|||
"size": { |
|||
"title": "Size", |
|||
"type": "number", |
|||
"default": 20 |
|||
}, |
|||
"style": { |
|||
"title": "Style", |
|||
"type": "string", |
|||
"default": "normal" |
|||
}, |
|||
"weight": { |
|||
"title": "Weight", |
|||
"type": "string", |
|||
"default": "500" |
|||
}, |
|||
"color": { |
|||
"title": "color", |
|||
"type": "string", |
|||
"default": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"animation": { |
|||
"title": "Enable animation", |
|||
"type": "boolean", |
|||
"default": true |
|||
}, |
|||
"animationDuration": { |
|||
"title": "Animation duration", |
|||
"type": "number", |
|||
"default": 500 |
|||
}, |
|||
"animationRule": { |
|||
"title": "Animation rule", |
|||
"type": "string", |
|||
"default": "cycle" |
|||
}, |
|||
"animationTarget": { |
|||
"title": "Animation target", |
|||
"type": "string", |
|||
"default": "needle" |
|||
} |
|||
}, |
|||
"required": [] |
|||
}, |
|||
"form": [ |
|||
{ |
|||
"key": "majorTicks", |
|||
"items":[ |
|||
"majorTicks[]" |
|||
] |
|||
}, |
|||
"minorTicks", |
|||
"showStrokeTicks", |
|||
"needleCircleSize", |
|||
"showBorder", |
|||
"borderOuterWidth", |
|||
{ |
|||
"key": "colorPlate", |
|||
"type": "color" |
|||
}, |
|||
{ |
|||
"key": "colorMajorTicks", |
|||
"type": "color" |
|||
}, |
|||
{ |
|||
"key": "colorMinorTicks", |
|||
"type": "color" |
|||
}, |
|||
{ |
|||
"key": "colorNeedle", |
|||
"type": "color" |
|||
}, |
|||
{ |
|||
"key": "colorNeedleCircle", |
|||
"type": "color" |
|||
}, |
|||
{ |
|||
"key": "colorBorder", |
|||
"type": "color" |
|||
}, |
|||
{ |
|||
"key": "majorTickFont", |
|||
"items": [ |
|||
"majorTickFont.family", |
|||
"majorTickFont.size", |
|||
{ |
|||
"key": "majorTickFont.style", |
|||
"type": "rc-select", |
|||
"multiple": false, |
|||
"items": [ |
|||
{ |
|||
"value": "normal", |
|||
"label": "Normal" |
|||
}, |
|||
{ |
|||
"value": "italic", |
|||
"label": "Italic" |
|||
}, |
|||
{ |
|||
"value": "oblique", |
|||
"label": "Oblique" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"key": "majorTickFont.weight", |
|||
"type": "rc-select", |
|||
"multiple": false, |
|||
"items": [ |
|||
{ |
|||
"value": "normal", |
|||
"label": "Normal" |
|||
}, |
|||
{ |
|||
"value": "bold", |
|||
"label": "Bold" |
|||
}, |
|||
{ |
|||
"value": "bolder", |
|||
"label": "Bolder" |
|||
}, |
|||
{ |
|||
"value": "lighter", |
|||
"label": "Lighter" |
|||
}, |
|||
{ |
|||
"value": "100", |
|||
"label": "100" |
|||
}, |
|||
{ |
|||
"value": "200", |
|||
"label": "200" |
|||
}, |
|||
{ |
|||
"value": "300", |
|||
"label": "300" |
|||
}, |
|||
{ |
|||
"value": "400", |
|||
"label": "400" |
|||
}, |
|||
{ |
|||
"value": "500", |
|||
"label": "500" |
|||
}, |
|||
{ |
|||
"value": "600", |
|||
"label": "600" |
|||
}, |
|||
{ |
|||
"value": "700", |
|||
"label": "800" |
|||
}, |
|||
{ |
|||
"value": "800", |
|||
"label": "800" |
|||
}, |
|||
{ |
|||
"value": "900", |
|||
"label": "900" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"key": "majorTickFont.color", |
|||
"type": "color" |
|||
} |
|||
] |
|||
}, |
|||
"animation", |
|||
"animationDuration", |
|||
{ |
|||
"key": "animationRule", |
|||
"type": "rc-select", |
|||
"multiple": false, |
|||
"items": [ |
|||
{ |
|||
"value": "linear", |
|||
"label": "Linear" |
|||
}, |
|||
{ |
|||
"value": "quad", |
|||
"label": "Quad" |
|||
}, |
|||
{ |
|||
"value": "quint", |
|||
"label": "Quint" |
|||
}, |
|||
{ |
|||
"value": "cycle", |
|||
"label": "Cycle" |
|||
}, |
|||
{ |
|||
"value": "bounce", |
|||
"label": "Bounce" |
|||
}, |
|||
{ |
|||
"value": "elastic", |
|||
"label": "Elastic" |
|||
}, |
|||
{ |
|||
"value": "dequad", |
|||
"label": "Dequad" |
|||
}, |
|||
{ |
|||
"value": "dequint", |
|||
"label": "Dequint" |
|||
}, |
|||
{ |
|||
"value": "decycle", |
|||
"label": "Decycle" |
|||
}, |
|||
{ |
|||
"value": "debounce", |
|||
"label": "Debounce" |
|||
}, |
|||
{ |
|||
"value": "delastic", |
|||
"label": "Delastic" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"key": "animationTarget", |
|||
"type": "rc-select", |
|||
"multiple": false, |
|||
"items": [ |
|||
{ |
|||
"value": "needle", |
|||
"label": "Needle" |
|||
}, |
|||
{ |
|||
"value": "plate", |
|||
"label": "Plate" |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue