109 lines
4.2 KiB
TypeScript
109 lines
4.2 KiB
TypeScript
///
|
|
/// Copyright © 2016-2020 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 { WidgetContext } from '@home/models/widget-component.models';
|
|
import * as CanvasGauges from 'canvas-gauges';
|
|
import {
|
|
AnalogueCompassSettings,
|
|
analogueCompassSettingsSchema
|
|
} from '@home/components/widget/lib/analogue-compass.models';
|
|
import { deepClone, isDefined } from '@core/utils';
|
|
import { JsonSettingsSchema } from '@shared/models/widget.models';
|
|
import { getFontFamily } from '@home/components/widget/lib/settings.models';
|
|
import { TbBaseGauge } from '@home/components/widget/lib/analogue-gauge.models';
|
|
import RadialGaugeOptions = CanvasGauges.RadialGaugeOptions;
|
|
import BaseGauge = CanvasGauges.BaseGauge;
|
|
import RadialGauge = CanvasGauges.RadialGauge;
|
|
|
|
const analogueCompassSettingsSchemaValue = analogueCompassSettingsSchema;
|
|
|
|
export class TbAnalogueCompass extends TbBaseGauge<AnalogueCompassSettings, RadialGaugeOptions> {
|
|
|
|
static get settingsSchema(): JsonSettingsSchema {
|
|
return analogueCompassSettingsSchemaValue;
|
|
}
|
|
|
|
constructor(ctx: WidgetContext, canvasId: string) {
|
|
super(ctx, canvasId);
|
|
}
|
|
|
|
protected createGaugeOptions(gaugeElement: HTMLElement, settings: AnalogueCompassSettings): RadialGaugeOptions {
|
|
|
|
const majorTicks = (settings.majorTicks && settings.majorTicks.length > 0) ? deepClone(settings.majorTicks) :
|
|
['N','NE','E','SE','S','SW','W','NW'];
|
|
majorTicks.push(majorTicks[0]);
|
|
|
|
return {
|
|
renderTo: gaugeElement,
|
|
|
|
// Generic options
|
|
minValue: 0,
|
|
maxValue: 360,
|
|
majorTicks,
|
|
minorTicks: settings.minorTicks || 22,
|
|
ticksAngle: 360,
|
|
startAngle: 180,
|
|
strokeTicks: settings.showStrokeTicks || false,
|
|
highlights: [],
|
|
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 && !this.ctx.isMobile,
|
|
animationDuration: (isDefined(settings.animationDuration) && settings.animationDuration !== null) ? settings.animationDuration : 500,
|
|
animationRule: settings.animationRule || 'cycle',
|
|
animationTarget: settings.animationTarget || 'needle'
|
|
};
|
|
}
|
|
|
|
protected createGauge(gaugeData: RadialGaugeOptions): BaseGauge {
|
|
return new RadialGauge(gaugeData);
|
|
}
|
|
}
|