Igor Kulikov
9 years ago
committed by
GitHub
GitHub
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