You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
606 lines
53 KiB
606 lines
53 KiB
<!--
|
|
yunkong2.vis-canvas-gauges
|
|
|
|
version: "0.1.5"
|
|
|
|
Copyright 2016 bluefox<dogafox@gmail.com>
|
|
|
|
-->
|
|
<script type="text/javascript" src="widgets/canvas-gauges/js/gauge.min.js"></script>
|
|
|
|
<script language="javascript">
|
|
'use strict';
|
|
// Add words for bars
|
|
if (vis.editMode) {
|
|
$.extend(systemDictionary, {
|
|
"linear": {"en": "linear", "de": "linear", "ru": "linear"},
|
|
"quad": {"en": "quad", "de": "quad", "ru": "quad"},
|
|
"quint": {"en": "quint", "de": "quint", "ru": "quint"},
|
|
"cycle": {"en": "cycle", "de": "cycle", "ru": "cycle"},
|
|
"elastic": {"en": "elastic", "de": "elastic", "ru": "elastic"},
|
|
"dequad": {"en": "dequad", "de": "dequad", "ru": "dequad"},
|
|
"dequint": {"en": "dequint", "de": "dequint", "ru": "dequint"},
|
|
"decycle": {"en": "decycle", "de": "decycle", "ru": "decycle"},
|
|
"debounce": {"en": "debounce", "de": "debounce", "ru": "debounce"},
|
|
"delastic": {"en": "delastic", "de": "delastic", "ru": "delastic"},
|
|
"arrow": {"en": "arrow", "de": "arrow", "ru": "arrow"},
|
|
"minValue": {"en": "min", "de": "min", "ru": "minValue"},
|
|
"maxValue": {"en": "max", "de": "max", "ru": "maxValue"},
|
|
"valueOffset": {"en": "Value offset", "de": "Wertoffset", "ru": "valueOffset"},
|
|
"hCount": {"en": "Highlights number", "de": "Anzahl von Sektoren", "ru": "Кол-во секторов"},
|
|
"group_highlights": {"en": "Highlights", "de": "Sektoren", "ru": "Сектора"},
|
|
"highlightsFrom": {"en": "From", "de": "Von", "ru": "highlightsFrom"},
|
|
"highlightsTo": {"en": "To", "de": "Bis", "ru": "highlightsTo"},
|
|
"highlightsColor": {"en": "Color", "de": "Farbe", "ru": "highlightsColor"},
|
|
"majorTicks": {"en": "Major ticks", "de": "majorTicks", "ru": "majorTicks"},
|
|
"minorTicks": {"en": "Minor ticks", "de": "minorTicks", "ru": "minorTicks"},
|
|
"strokeTicks": {"en": "Stroke ticks", "de": "strokeTicks", "ru": "strokeTicks"},
|
|
"majorTicksInt": {"en": "Before comma ", "de": "majorTicksInt", "ru": "majorTicksInt"},
|
|
"majorTicksDec": {"en": "After comma", "de": "majorTicksDec", "ru": "majorTicksDec"},
|
|
"group_animation": {"en": "Animation", "de": "group_animation", "ru": "group_animation"},
|
|
"animation": {"en": "Enabled", "de": "animation", "ru": "animation"},
|
|
"animationDuration": {"en": "Duration", "de": "animationDuration", "ru": "animationDuration"},
|
|
"animationRule": {"en": "Rule", "de": "animationRule", "ru": "animationRule"},
|
|
"animatedValue": {"en": "Value", "de": "animatedValue", "ru": "animatedValue"},
|
|
"animateOnInit": {"en": "Animate on start", "de": "animateOnInit", "ru": "animateOnInit"},
|
|
"group_colorsGauge": {"en": "Colors", "de": "Farben", "ru": "group_colorsGauge"},
|
|
"colorPlate": {"en": "Plate", "de": "Plate", "ru": "colorPlate"},
|
|
"colorPlateEnd": {"en": "Plate end", "de": "PlateEnd", "ru": "colorPlateEnd"},
|
|
"colorMajorTicks": {"en": "Major ticks", "de": "MajorTicks", "ru": "colorMajorTicks"},
|
|
"colorMinorTicks": {"en": "Minor ticks", "de": "MinorTicks", "ru": "colorMinorTicks"},
|
|
"colorTitle": {"en": "Title", "de": "Title", "ru": "colorTitle"},
|
|
"colorUnits": {"en": "Units", "de": "Units", "ru": "colorUnits"},
|
|
"colorNumbers": {"en": "Numbers", "de": "Numbers", "ru": "colorNumbers"},
|
|
"colorNeedle": {"en": "Needle", "de": "Needle", "ru": "colorNeedle"},
|
|
"colorNeedleEnd": {"en": "NeedleEnd", "de": "NeedleEnd", "ru": "colorNeedleEnd"},
|
|
"colorValueText": {"en": "ValueText", "de": "ValueText", "ru": "colorValueText"},
|
|
"colorValueTextShadow": {"en": "Value text shadow", "de": "ValueTextShadow", "ru": "colorValueTextShadow"},
|
|
"colorBorderShadow": {"en": "Border shadow", "de": "BorderShadow", "ru": "colorBorderShadow"},
|
|
"colorBorderOuter": {"en": "Border outer", "de": "BorderOuter", "ru": "colorBorderOuter"},
|
|
"colorBorderOuterEnd": {"en": "Border outer end", "de": "BorderOuterEnd", "ru": "colorBorderOuterEnd"},
|
|
"colorBorderMiddle": {"en": "Border middle", "de": "BorderMiddle", "ru": "colorBorderMiddle"},
|
|
"colorBorderMiddleEnd": {"en": "Border middle end", "de": "BorderMiddleEnd", "ru": "colorBorderMiddleEnd"},
|
|
"colorBorderInner": {"en": "Border inner", "de": "BorderInner", "ru": "colorBorderInner"},
|
|
"colorBorderInnerEnd": {"en": "Border inner end", "de": "BorderInnerEnd", "ru": "colorBorderInnerEnd"},
|
|
"colorValueBoxRect": {"en": "Value box rect", "de": "ValueBoxRect", "ru": "colorValueBoxRect"},
|
|
"colorValueBoxRectEnd": {"en": "Value box rect end", "de": "ValueBoxRectEnd", "ru": "colorValueBoxRectEnd"},
|
|
"colorValueBoxBackground": {"en": "Value box background", "de": "ValueBoxBackground", "ru": "colorValueBoxBackground"},
|
|
"colorValueBoxShadow": {"en": "Value box shadow", "de": "ValueBoxShadow", "ru": "colorValueBoxShadow"},
|
|
"colorNeedleShadowUp": {"en": "Needle shadow up", "de": "NeedleShadowUp", "ru": "colorNeedleShadowUp"},
|
|
"colorNeedleShadowDown": {"en": "Needle shadow down", "de": "NeedleShadowDown", "ru": "colorNeedleShadowDown"},
|
|
"needle": {"en": "Needle", "de": "needle", "ru": "needle"},
|
|
"needleShadow": {"en": "NeedleShadow", "de": "needleShadow", "ru": "needleShadow"},
|
|
"needleType": {"en": "NeedleType", "de": "needleType", "ru": "needleType"},
|
|
"needleStart": {"en": "NeedleStart", "de": "needleStart", "ru": "needleStart"},
|
|
"needleEnd": {"en": "NeedleEnd", "de": "needleEnd", "ru": "needleEnd"},
|
|
"needleWidth": {"en": "NeedleWidth", "de": "needleWidth", "ru": "needleWidth"},
|
|
"group_borders": {"en": "Borders", "de": "Rahmen", "ru": "group_borders"},
|
|
"borders": {"en": "Enabled", "de": "Aktiviert", "ru": "borders"},
|
|
"borderOuterWidth": {"en": "Outer width", "de": "borderOuterWidth", "ru": "borderOuterWidth"},
|
|
"borderMiddleWidth": {"en": "Middle width", "de": "borderMiddleWidth", "ru": "borderMiddleWidth"},
|
|
"borderInnerWidth": {"en": "Inner width", "de": "borderInnerWidth", "ru": "borderInnerWidth"},
|
|
"borderShadowWidth": {"en": "Shadow width", "de": "borderShadowWidth", "ru": "borderShadowWidth"},
|
|
"group_valueBox": {"en": "Value Box", "de": "Wert-Box", "ru": "group_valueBox"},
|
|
"valueBox": {"en": "Enabled", "de": "Aktiviert", "ru": "valueBox"},
|
|
"valueBoxStroke": {"en": "Box stroke", "de": "valueBoxStroke", "ru": "valueBoxStroke"},
|
|
"valueText": {"en": "Text", "de": "valueText", "ru": "valueText"},
|
|
"valueTextShadow": {"en": "Text shadow", "de": "valueTextShadow", "ru": "valueTextShadow"},
|
|
"valueBoxBorderRadius": {"en": "Box border radius", "de": "valueBoxBorderRadius", "ru": "valueBoxBorderRadius"},
|
|
"valueInt": {"en": "Before comma", "de": "Vor Komma", "ru": "valueInt"},
|
|
"valueDec": {"en": "After comma", "de": "Nach Komma", "ru": "valueDec"},
|
|
"group_fonts": {"en": "Fonts", "de": "Schriften", "ru": "group_fonts"},
|
|
"fontNumbers": {"en": "Numbers", "de": "Numbers", "ru": "fontNumbers"},
|
|
"fontTitle": {"en": "Title", "de": "Title", "ru": "fontTitle"},
|
|
"fontUnits": {"en": "Units", "de": "Units", "ru": "fontUnits"},
|
|
"fontValue": {"en": "Value", "de": "Value", "ru": "fontValue"},
|
|
"fontNumbersSize": {"en": "Numbers size", "de": "Numbers Size", "ru": "fontNumbersSize"},
|
|
"fontTitleSize": {"en": "Title size", "de": "Title Size", "ru": "fontTitleSize"},
|
|
"fontUnitsSize": {"en": "Units size", "de": "Units Size", "ru": "fontUnitsSize"},
|
|
"fontValueSize": {"en": "Value size", "de": "Value Size", "ru": "fontValueSize"},
|
|
"fontNumbersStyle": {"en": "Numbers style", "de": "Numbers Style", "ru": "fontNumbersStyle"},
|
|
"fontTitleStyle": {"en": "Title style", "de": "Title Style", "ru": "fontTitleStyle"},
|
|
"fontUnitsStyle": {"en": "Units style", "de": "Units Style", "ru": "fontUnitsStyle"},
|
|
"fontValueStyle": {"en": "Value style", "de": "Value Style", "ru": "fontValueStyle"},
|
|
"fontNumbersWeight": {"en": "Numbers weight", "de": "Numbers Weight", "ru": "fontNumbersWeight"},
|
|
"fontTitleWeight": {"en": "Title weight", "de": "Title Weight", "ru": "fontTitleWeight"},
|
|
"fontUnitsWeight": {"en": "Units weight", "de": "Units Weight", "ru": "fontUnitsWeight"},
|
|
"fontValueWeight": {"en": "Value weight", "de": "Value Weight", "ru": "fontValueWeight"},
|
|
"group_gaugeBar": {"en": "Gauge bar", "de": "Gauge Bar", "ru": "group_gaugeBar"},
|
|
"barBeginCircle": {"en": "Begin circle", "de": "BeginCircle", "ru": "barBeginCircle"},
|
|
"barWidth": {"en": "Width", "de": "Width", "ru": "barWidth"},
|
|
"barLength": {"en": "Length", "de": "Length", "ru": "barLength"},
|
|
"barStrokeWidth": {"en": "Stroke width", "de": "StrokeWidth", "ru": "barStrokeWidth"},
|
|
"barProgress": {"en": "Progress", "de": "Progress", "ru": "barProgress"},
|
|
"group_colorsBar": {"en": "Bar colors", "de": "Bar-Farbe", "ru": "group_colorsBar"},
|
|
"colorBarStroke": {"en": "Bar stroke", "de": "BarStroke", "ru": "colorBarStroke"},
|
|
"colorBar": {"en": "Bar", "de": "Bar", "ru": "colorBar"},
|
|
"colorBarEnd": {"en": "BarEnd", "de": "BarEnd", "ru": "colorBarEnd"},
|
|
"colorBarProgress": {"en": "BarProgress", "de": "BarProgress", "ru": "colorBarProgress"},
|
|
"colorBarProgressEnd": {"en": "BarProgressEnd", "de": "BarProgressEnd", "ru": "colorBarProgressEnd"},
|
|
"group_positions": {"en": "Positions", "de": "Position", "ru": "group_positions"},
|
|
"tickSide": {"en": "Tick's side", "de": "tick Side", "ru": "tickSide"},
|
|
"needleSide": {"en": "Needle's side", "de": "needle Side", "ru": "needleSide"},
|
|
"numberSide": {"en": "Number's side", "de": "number Side", "ru": "numberSide"},
|
|
"group_ticksBar": {"en": "Bar ticks", "de": "Ticks Bar", "ru": "group_ticksBar"},
|
|
"ticksWidth": {"en": "Width", "de": "ticksWidth", "ru": "ticksWidth"},
|
|
"ticksWidthMinor": {"en": "Width minor", "de": "ticksWidthMinor", "ru": "ticksWidthMinor"},
|
|
"ticksPadding": {"en": "Padding", "de": "ticksPadding", "ru": "ticksPadding"},
|
|
"plate": {"en": "plate", "de": "plate", "ru": "plate"},
|
|
"animationTarget": {"en": "Animation target", "de": "Animationsziel", "ru": "animationTarget"},
|
|
"group_gaugeRadial": {"en": "Gauge radial", "de": "Radial", "ru": "group_gaugeRadial"},
|
|
"ticksAngle": {"en": "Ticks's angle", "de": "ticksAngle", "ru": "ticksAngle"},
|
|
"startAngle": {"en": "Start Angle", "de": "startAngle", "ru": "startAngle"},
|
|
"group_colorsRadial": {"en": "Colors for radial", "de": "Farbe (radiall)", "ru": "group_colorsRadial"},
|
|
"colorNeedleCircleOuter": {"en": "Needle circle outer", "de": "NeedleCircleOuter", "ru": "colorNeedleCircleOuter"},
|
|
"colorNeedleCircleOuterEnd": {"en": "Needle circle outer end", "de": "NeedleCircleOuterEnd", "ru": "colorNeedleCircleOuterEnd"},
|
|
"colorNeedleCircleInner": {"en": "Needle circle inner", "de": "NeedleCircleInner", "ru": "colorNeedleCircleInner"},
|
|
"colorNeedleCircleInnerEnd": {"en": "Needle circle inner end", "de": "NeedleCircleInnerEnd", "ru": "colorNeedleCircleInnerEnd"},
|
|
"group_needleRadial": {"en": "Needle for radial", "de": "Zeiger (radial)", "ru": "group_needleRadial"},
|
|
"needleCircleSize": {"en": "Circle size", "de": "Circle Size", "ru": "needleCircleSize"},
|
|
"needleCircleInner": {"en": "Circle inner", "de": "Circle Inner", "ru": "needleCircleInner"},
|
|
"needleCircleOuter": {"en": "Circle outer", "de": "Circle Outer", "ru": "needleCircleOuter"}
|
|
});
|
|
}
|
|
|
|
//jQuery.extend(true, vis.binds, {
|
|
vis.binds['canvas-gauges'] = {
|
|
version: "0.1.5",
|
|
showVersion: function () {
|
|
if (vis.binds['canvas-gauges'].version) {
|
|
console.log('Version vis-canvas-gauges: ' + vis.binds['canvas-gauges'].version);
|
|
vis.binds['canvas-gauges'].version = null;
|
|
}
|
|
},
|
|
gaugeDestroy: function (wid, $wid) {
|
|
if ($wid && $wid.length) {
|
|
var bound = $wid.data('bound');
|
|
if (bound) {
|
|
var bindHandler = $wid.data('bindHandler');
|
|
for (var b = 0; b < bound.length; b++) {
|
|
vis.states.unbind(bound[b], bindHandler);
|
|
}
|
|
}
|
|
var gauge = $wid.data('gauge');
|
|
if (gauge) {
|
|
gauge.destroy();
|
|
$wid.data('gauge', null);
|
|
}
|
|
}
|
|
},
|
|
|
|
gauge: function (view, data, type) {
|
|
var wid = data.attr('wid');
|
|
var $wid = $('#' + wid).css('overflow', 'visible');
|
|
if (!$wid.length) {
|
|
setTimeout(function () {
|
|
vis.binds['canvas-gauges'].gauge(view, data, type);
|
|
}, 100);
|
|
return;
|
|
}
|
|
if (!$wid.is(':visible')) {
|
|
setTimeout(function () {
|
|
vis.binds['canvas-gauges'].gauge(view, data, type);
|
|
}, 1000);
|
|
return;
|
|
}
|
|
|
|
$wid.css('overflow', 'visible');
|
|
|
|
var w = $wid.width();
|
|
var h = $wid.height();
|
|
var gauge = $wid.data('gauge');
|
|
|
|
var options = {
|
|
width: w,
|
|
height: h,
|
|
title: data.attr('title') || '',
|
|
minValue: parseFloat(data.attr('minValue')) || 0,
|
|
maxValue: parseFloat(data.attr('maxValue')),
|
|
units: data.attr('units') || '',
|
|
factor: parseFloat(data.attr('factor')) || 1,
|
|
offset: parseFloat(data.attr('valueOffset')) || 0,
|
|
|
|
minorTicks: parseInt(data.attr('minorTicks'), 10) || 1,
|
|
strokeTicks: data.attr('strokeTicks') === 'true' || data.attr('strokeTicks') === true,
|
|
majorTicksInt: parseInt(data.attr('majorTicksInt'), 10) || 4,
|
|
majorTicksDec: parseInt(data.attr('majorTicksDec'), 10) || 2,
|
|
|
|
animation: data.attr('animation') === 'true' || data.attr('animation') === true,
|
|
animationDuration: parseInt(data.attr('animationDuration')) || 500,
|
|
animationRule: data.attr('animationRule') || 'linear',
|
|
animatedValue: data.attr('animatedValue') === 'true' || data.attr('animatedValue') === true,
|
|
animateOnInit: data.attr('animateOnInit') === 'true' || data.attr('animateOnInit') === true
|
|
};
|
|
|
|
if (isNaN(options.maxValue)) options.maxValue = 100;
|
|
|
|
if (data.attr('colorPlate')) options.colorPlate = data.attr('colorPlate');
|
|
if (data.attr('colorPlateEnd')) options.colorPlateEnd = data.attr('colorPlateEnd');
|
|
if (data.attr('colorMajorTicks')) options.colorMajorTicks = data.attr('colorMajorTicks');
|
|
if (data.attr('colorMinorTicks')) options.colorMinorTicks = data.attr('colorMinorTicks');
|
|
if (data.attr('colorTitle')) options.colorTitle = data.attr('colorTitle');
|
|
if (data.attr('colorUnits')) options.colorUnits = data.attr('colorUnits');
|
|
if (data.attr('colorNumbers')) options.colorNumbers = data.attr('colorNumbers');
|
|
if (data.attr('colorNeedle')) options.colorNeedle = data.attr('colorNeedle');
|
|
if (data.attr('colorNeedleEnd')) options.colorNeedleEnd = data.attr('colorNeedleEnd');
|
|
if (data.attr('colorValueText')) options.colorValueText = data.attr('colorValueText');
|
|
if (data.attr('colorValueTextShadow')) options.colorValueTextShadow = data.attr('colorValueTextShadow');
|
|
if (data.attr('colorBorderShadow')) options.colorBorderShadow = data.attr('colorBorderShadow');
|
|
if (data.attr('colorBorderOuter')) options.colorBorderOuter = data.attr('colorBorderOuter');
|
|
if (data.attr('colorBorderOuterEnd')) options.colorBorderOuterEnd = data.attr('colorBorderOuterEnd');
|
|
if (data.attr('colorBorderMiddle')) options.colorBorderMiddle = data.attr('colorBorderMiddle');
|
|
if (data.attr('colorBorderMiddleEnd')) options.colorBorderMiddleEnd = data.attr('colorBorderMiddleEnd');
|
|
if (data.attr('colorBorderInner')) options.colorBorderInner = data.attr('colorBorderInner');
|
|
if (data.attr('colorBorderInnerEnd')) options.colorBorderInnerEnd = data.attr('colorBorderInnerEnd');
|
|
if (data.attr('colorValueBoxRect')) options.colorValueBoxRect = data.attr('colorValueBoxRect');
|
|
if (data.attr('colorValueBoxRectEnd')) options.colorValueBoxRectEnd = data.attr('colorValueBoxRectEnd');
|
|
if (data.attr('colorValueBoxBackground'))options.colorValueBoxBackground = data.attr('colorValueBoxBackground');
|
|
if (data.attr('colorValueBoxShadow')) options.colorValueBoxShadow = data.attr('colorValueBoxShadow');
|
|
if (data.attr('colorNeedleShadowUp')) options.colorNeedleShadowUp = data.attr('colorNeedleShadowUp');
|
|
if (data.attr('colorNeedleShadowDown')) options.colorNeedleShadowDown = data.attr('colorNeedleShadowDown');
|
|
|
|
if (data.attr('needle') !== undefined && data.attr('needle') !== '') options.needle = data.attr('needle') === 'true' || data.attr('needle') === true;
|
|
if (data.attr('needleShadow') !== undefined && data.attr('needleShadow') !== '') options.needleShadow = data.attr('needleShadow') === 'true' || data.attr('needleShadow') === true;
|
|
if (data.attr('needleType') !== undefined && data.attr('needleType') !== '') options.needleType = data.attr('needleType');
|
|
if (data.attr('needleStart') !== undefined && data.attr('needleStart') !== '') options.needleStart = parseFloat(data.attr('needleStart'));
|
|
if (data.attr('needleEnd') !== undefined && data.attr('needleEnd') !== '') options.needleEnd = parseFloat(data.attr('needleEnd'));
|
|
if (data.attr('needleWidth') !== undefined && data.attr('needleWidth') !== '') options.needleWidth = parseFloat(data.attr('needleWidth'));
|
|
|
|
if (data.attr('borders') !== undefined && data.attr('borders') !== '') options.borders = data.attr('borders') === 'true' || data.attr('borders') === true;
|
|
if (data.attr('borderOuterWidth') !== undefined && data.attr('borderOuterWidth') !== '') options.borderOuterWidth = parseFloat(data.attr('borderOuterWidth'));
|
|
if (data.attr('borderMiddleWidth') !== undefined && data.attr('borderMiddleWidth') !== '') options.borderMiddleWidth = parseFloat(data.attr('borderMiddleWidth'));
|
|
if (data.attr('borderInnerWidth') !== undefined && data.attr('borderInnerWidth') !== '') options.borderInnerWidth = parseFloat(data.attr('borderInnerWidth'));
|
|
if (data.attr('borderShadowWidth') !== undefined && data.attr('borderShadowWidth') !== '') options.borderShadowWidth = parseFloat(data.attr('borderShadowWidth'));
|
|
|
|
if (data.attr('valueBox') !== undefined && data.attr('valueBox') !== '') options.valueBox = data.attr('valueBox') === 'true' || data.attr('valueBox') === true;
|
|
if (data.attr('valueText') !== undefined && data.attr('valueText') !== '') options.valueText = data.attr('valueText');
|
|
if (data.attr('valueBoxStroke') !== undefined && data.attr('valueBoxStroke') !== '') options.valueBoxStroke = parseFloat(data.attr('valueBoxStroke'));
|
|
if (data.attr('valueTextShadow') !== undefined) options.valueTextShadow = data.attr('valueTextShadow');
|
|
if (data.attr('valueBoxBorderRadius') !== undefined && data.attr('valueBoxBorderRadius') !== '') options.valueBoxBorderRadius = parseFloat(data.attr('valueBoxBorderRadius'));
|
|
if (data.attr('valueInt') !== undefined && data.attr('valueInt') !== '') options.valueInt = parseInt(data.attr('valueInt'), 10);
|
|
if (data.attr('valueDec') !== undefined && data.attr('valueDec') !== '') options.valueDec = parseInt(data.attr('valueDec'), 10);
|
|
|
|
if (data.attr('fontNumbers') !== undefined && data.attr('fontNumbers') !== '') options.fontNumbers = data.attr('fontNumbers');
|
|
if (data.attr('fontTitle') !== undefined && data.attr('fontTitle') !== '') options.fontTitle = data.attr('fontTitle');
|
|
if (data.attr('fontUnits') !== undefined && data.attr('fontUnits') !== '') options.fontUnits = data.attr('fontUnits');
|
|
if (data.attr('fontValue') !== undefined && data.attr('fontValue') !== '') options.fontValue = data.attr('fontValue');
|
|
if (data.attr('fontNumbersSize') !== undefined && data.attr('fontNumbersSize') !== '') options.fontNumbersSize = parseInt(data.attr('fontNumbersSize'), 10);
|
|
if (data.attr('fontTitleSize') !== undefined && data.attr('fontTitleSize') !== '') options.fontTitleSize = parseInt(data.attr('fontTitleSize'), 10);
|
|
if (data.attr('fontUnitsSize') !== undefined && data.attr('fontUnitsSize') !== '') options.fontUnitsSize = parseInt(data.attr('fontUnitsSize'), 10);
|
|
if (data.attr('fontValueSize') !== undefined && data.attr('fontValueSize') !== '') options.fontValueSize = parseInt(data.attr('fontValueSize'), 10);
|
|
|
|
if (data.attr('fontNumbersStyle') !== undefined && data.attr('fontNumbersStyle') !== '') options.fontNumbersStyle = data.attr('fontNumbersStyle');
|
|
if (data.attr('fontTitleStyle') !== undefined && data.attr('fontTitleStyle') !== '') options.fontTitleStyle = data.attr('fontTitleStyle');
|
|
if (data.attr('fontUnitsStyle') !== undefined && data.attr('fontUnitsStyle') !== '') options.fontUnitsStyle = data.attr('fontUnitsStyle');
|
|
if (data.attr('fontValueStyle') !== undefined && data.attr('fontValueStyle') !== '') options.fontValueStyle = data.attr('fontValueStyle');
|
|
if (data.attr('fontNumbersWeight') !== undefined && data.attr('fontNumbersWeight') !== '') options.fontNumbersWeight = data.attr('fontNumbersWeight');
|
|
if (data.attr('fontTitleWeight') !== undefined && data.attr('fontTitleWeight') !== '') options.fontTitleWeight = data.attr('fontTitleWeight');
|
|
if (data.attr('fontUnitsWeight') !== undefined && data.attr('fontUnitsWeight') !== '') options.fontUnitsWeight = data.attr('fontUnitsWeight');
|
|
if (data.attr('fontValueWeight') !== undefined && data.attr('fontValueWeight') !== '') options.fontNumbers = data.attr('fontValueWeight');
|
|
|
|
var hCount = parseInt(data.attr('hCount'), 10) || 0;
|
|
|
|
if (hCount) {
|
|
options.highlights = [];
|
|
for (var u = 1; u <= hCount; u++) {
|
|
if (data.attr('highlightsFrom' + u) === undefined || data.attr('highlightsFrom' + u) === '') continue;
|
|
|
|
if (type === 'radial') {
|
|
options.highlights.push({
|
|
from: (parseFloat(data.attr('highlightsFrom' + u)) || 0),
|
|
to: parseFloat(data.attr('highlightsTo' + u)),
|
|
color: data.attr('highlightsColor' + u)
|
|
});
|
|
} else {
|
|
options.highlights.push({
|
|
from: (parseFloat(data.attr('highlightsFrom' + u)) || 0) - options.minValue,
|
|
to: parseFloat(data.attr('highlightsTo' + u)) - options.minValue,
|
|
color: data.attr('highlightsColor' + u)
|
|
});
|
|
|
|
}
|
|
}
|
|
} else {
|
|
options.highlights = false;
|
|
}
|
|
|
|
// convert majorTicks
|
|
var majorTicks = data.attr('majorTicks');
|
|
|
|
if (typeof majorTicks === 'string' && majorTicks.indexOf(',') !== -1) {
|
|
majorTicks = majorTicks.split(',');
|
|
for (var m = majorTicks.length - 1; m >= 0; m--) {
|
|
majorTicks[m] = majorTicks[m].trim();
|
|
}
|
|
} else {
|
|
majorTicks = parseFloat(majorTicks);
|
|
if (majorTicks) {
|
|
var start = options.minValue;
|
|
var step = (options.maxValue - options.minValue) / (majorTicks - 1);
|
|
majorTicks = [];
|
|
while(start <= options.maxValue) {
|
|
majorTicks.push(start);
|
|
start += step;
|
|
}
|
|
} else {
|
|
majorTicks = undefined;
|
|
}
|
|
}
|
|
|
|
if (!majorTicks) {
|
|
majorTicks = [];
|
|
var start = options.minValue;
|
|
var step = (options.maxValue - options.minValue) / 5;
|
|
while(start <= options.maxValue) {
|
|
majorTicks.push(start);
|
|
start += step;
|
|
}
|
|
}
|
|
|
|
options.majorTicks = majorTicks;
|
|
|
|
if (type === 'radial') {
|
|
vis.binds['canvas-gauges'].radialGauge(view, data, options, $wid);
|
|
} else {
|
|
vis.binds['canvas-gauges'].linearGauge(view, data, options, $wid);
|
|
}
|
|
|
|
if (gauge) {
|
|
gauge.update(options);
|
|
} else {
|
|
options.value = options.minValue || 0;
|
|
$wid.html('<canvas class="vis-canvas-gauges"></canvas>');
|
|
options.renderTo = $wid.find('.vis-canvas-gauges')[0];
|
|
if (type === 'radial') {
|
|
gauge = new RadialGauge(options);
|
|
} else {
|
|
gauge = new LinearGauge(options);
|
|
}
|
|
$wid.data('gauge', gauge);
|
|
gauge.draw();
|
|
|
|
if (vis.editMode && vis.activeWidgets.indexOf(wid) !== -1) {
|
|
$wid.resizable('destroy');
|
|
vis.resizable($wid);
|
|
}
|
|
}
|
|
|
|
var oid = data.attr('oid');
|
|
|
|
if ((oid || oid === 0) && oid !== 'nothing_selected') {
|
|
var val = vis.states.attr(oid + '.val');
|
|
if (val === undefined || val === null) {
|
|
val = parseFloat(val);
|
|
} else {
|
|
var updateGauge = function (e, newVal /* , oldVal*/) {
|
|
gauge.value = parseFloat(newVal) * gauge.options.factor + gauge.options.offset;
|
|
};
|
|
|
|
// remember all ids, that bound
|
|
$wid.data('bound', [oid + '.val']);
|
|
|
|
// remember bind handler
|
|
$wid.data('bindHandler', updateGauge);
|
|
|
|
vis.states.bind(oid + '.val', updateGauge);
|
|
}
|
|
gauge.value = val * gauge.options.factor + gauge.options.offset;
|
|
}
|
|
|
|
// register destroy handler
|
|
$wid.data('destroy', vis.binds['canvas-gauges'].gaugeDestroy);
|
|
},
|
|
|
|
linearGauge: function (view, data, options, $wid) {
|
|
options.borderRadius = parseFloat($wid.css('border-radius'));
|
|
if (data.attr('barBeginCircle') !== undefined && data.attr('barBeginCircle') !== '') options.barBeginCircle = parseFloat(data.attr('barBeginCircle'));
|
|
if (data.attr('barWidth') !== undefined && data.attr('barWidth') !== '') options.barWidth = parseFloat(data.attr('barWidth'));
|
|
if (data.attr('barLength') !== undefined && data.attr('barLength') !== '') options.barLength = parseFloat(data.attr('barLength'));
|
|
if (data.attr('barStrokeWidth') !== undefined && data.attr('barStrokeWidth') !== '') options.barStrokeWidth = parseFloat(data.attr('barStrokeWidth'));
|
|
if (data.attr('barProgress') !== undefined && data.attr('barProgress') !== '') options.barProgress = data.attr('barProgress') === 'true' || data.attr('barProgress') === true;
|
|
|
|
if (data.attr('colorBarStroke') !== undefined && data.attr('colorBarStroke') !== '') options.colorBarStroke = data.attr('colorBarStroke');
|
|
if (data.attr('colorBar') !== undefined && data.attr('colorBar') !== '') options.colorBar = data.attr('colorBar');
|
|
if (data.attr('colorBarEnd') !== undefined && data.attr('colorBarEnd') !== '') options.colorBarEnd = data.attr('colorBarEnd');
|
|
if (data.attr('colorBarProgress') !== undefined && data.attr('colorBarProgress') !== '') options.colorBarProgress = data.attr('colorBarProgress');
|
|
if (data.attr('colorBarProgressEnd') !== undefined && data.attr('colorBarProgressEnd') !== '') options.colorBarProgressEnd = data.attr('colorBarProgressEnd');
|
|
|
|
if (data.attr('tickSide') !== undefined && data.attr('tickSide') !== '') options.tickSide = data.attr('tickSide');
|
|
if (data.attr('needleSide') !== undefined && data.attr('needleSide') !== '') options.needleSide = data.attr('needleSide');
|
|
if (data.attr('numberSide') !== undefined && data.attr('numberSide') !== '') options.numberSide = data.attr('numberSide');
|
|
|
|
if (data.attr('ticksWidth') !== undefined && data.attr('ticksWidth') !== '') options.ticksWidth = parseFloat(data.attr('ticksWidth'));
|
|
if (data.attr('ticksWidthMinor') !== undefined && data.attr('ticksWidthMinor') !== '') options.ticksWidthMinor = parseFloat(data.attr('ticksWidthMinor'));
|
|
if (data.attr('ticksPadding') !== undefined && data.attr('ticksPadding') !== '') options.barBeginCircle = parseFloat(data.attr('ticksPadding'));
|
|
},
|
|
radialGauge: function (view, data, options, $wid) {
|
|
if (data.attr('ticksAngle') !== undefined && data.attr('ticksAngle') !== '') options.ticksAngle = parseFloat(data.attr('ticksAngle'));
|
|
if (data.attr('startAngle') !== undefined && data.attr('startAngle') !== '') options.startAngle = parseFloat(data.attr('startAngle'));
|
|
|
|
if (data.attr('colorNeedleCircleOuter') !== undefined && data.attr('colorNeedleCircleOuter') !== '') options.colorNeedleCircleOuter = data.attr('colorNeedleCircleOuter');
|
|
if (data.attr('colorNeedleCircleOuterEnd') !== undefined && data.attr('colorNeedleCircleOuterEnd') !== '') options.colorNeedleCircleOuterEnd = data.attr('colorNeedleCircleOuterEnd');
|
|
if (data.attr('colorNeedleCircleInner') !== undefined && data.attr('colorNeedleCircleInner') !== '') options.colorNeedleCircleInner = data.attr('colorNeedleCircleInner');
|
|
if (data.attr('colorNeedleCircleInnerEnd') !== undefined && data.attr('colorNeedleCircleInnerEnd') !== '') options.colorNeedleCircleInnerEnd = data.attr('colorNeedleCircleInnerEnd');
|
|
|
|
if (data.attr('needleCircleSize') !== undefined && data.attr('needleCircleSize') !== '') options.needleCircleSize = parseFloat(data.attr('needleCircleSize'));
|
|
if (data.attr('needleCircleInner') !== undefined && data.attr('needleCircleInner') !== '') options.needleCircleInner = data.attr('needleCircleInner') === 'true' || data.attr('needleCircleInner') === true;
|
|
if (data.attr('needleCircleOuter') !== undefined && data.attr('needleCircleOuter') !== '') options.needleCircleOuter = data.attr('needleCircleOuter') === 'true' || data.attr('needleCircleOuter') === true;
|
|
|
|
if (data.attr('animationTarget') !== undefined && data.attr('animationTarget') !== '') options.animationTarget = data.attr('animationTarget');
|
|
}
|
|
};
|
|
|
|
if (vis.editMode) {
|
|
vis.binds['canvas-gauges'].changedId = function (widgetID, view, newId/*, fields*/) {
|
|
var obj = vis.objects[newId];
|
|
var changed = [];
|
|
var wData = vis.views[view].widgets[widgetID].data;
|
|
var wwData = vis.widgets[widgetID].data;
|
|
|
|
if (obj && obj.common && obj.type === 'state') {
|
|
if (obj.common.min !== undefined && (wData.minValue === undefined || wData.minValue === '')) {
|
|
wData.minValue = obj.common.min;
|
|
wwData.minValue = obj.common.min;
|
|
changed.push('minValue');
|
|
}
|
|
if (obj.common.max !== undefined && (wData.maxValue === undefined || wData.maxValue === '')) {
|
|
wData.maxValue = obj.common.max;
|
|
wwData.maxValue = obj.common.max;
|
|
changed.push('maxValue');
|
|
}
|
|
if (obj.common.unit !== undefined && (wData.units === undefined || wData.units === '')) {
|
|
wData.units = obj.common.unit;
|
|
wwData.units = obj.common.unit;
|
|
changed.push('units');
|
|
}
|
|
if (obj.common.name && (wData.title === undefined || wData.title === '')) {
|
|
wData.title = obj.common.name;
|
|
wwData.title = obj.common.name;
|
|
changed.push('title');
|
|
}
|
|
}
|
|
|
|
return changed.length ? changed : null;
|
|
};
|
|
}
|
|
|
|
vis.binds['canvas-gauges'].showVersion();
|
|
</script>
|
|
|
|
<!--script id="tplCGlinearGauge"
|
|
type="text/ejs"
|
|
class="vis-tpl"
|
|
data-vis-type="temperature,number"
|
|
data-vis-set="canvas-gauges"
|
|
data-vis-name="Linear"
|
|
data-vis-update-style="true"
|
|
data-vis-prev='<img src="widgets/canvas-gauges/img/prev/Prev_cgLinear.png"></img>'
|
|
data-vis-attrs="oid/id/changedId;minValue;maxValue;units;title;factor[1];valueOffset[0];hCount[1]/slider,0,20,1;"
|
|
data-vis-attrs0="group.highlights/byindex;highlightsFrom(1-hCount);highlightsTo(1-hCount);highlightsColor(1-hCount)/color;"
|
|
data-vis-attrs1="group.ticks;majorTicks/slider,0,20,1;minorTicks/slider,0,20,1;strokeTicks/checkbox;majorTicksInt/slider,0,10,1;majorTicksDec/slider,0,10,1;"
|
|
data-vis-attrs2="group.animation;animation[true]/checkbox;animationDuration/slider,0,2000,50;animationRule/select,linear,quad,quint,cycle,bounce,elastic,dequad,dequint,decycle,debounce,delastic;animatedValue/checkbox;animateOnInit/checkbox;"
|
|
data-vis-attrs3="group.colorsGauge;colorPlate/color;colorPlateEnd/color;colorMajorTicks/color;colorMinorTicks/color;colorTitle/color;colorUnits/color;colorNumbers/color;colorNeedle/color;colorNeedleEnd/color;colorValueText/color;colorValueTextShadow/color;colorBorderShadow/color;colorBorderOuter/color;colorBorderOuterEnd/color;colorBorderMiddle/color;colorBorderMiddleEnd/color;colorBorderInner/color;colorBorderInnerEnd/color;colorValueBoxRect/color;colorValueBoxRectEnd/color;colorValueBoxBackground/color;colorValueBoxShadow/color;colorNeedleShadowUp/color;colorNeedleShadowDown/color;"
|
|
data-vis-attrs4="group.needle;needle/checkbox;needleShadow/checkbox;needleType/select,arrow,line;needleStart/slider,0,20,1;needleEnd/slider,0,20,1;needleWidth/slider,0,20,1;"
|
|
data-vis-attrs5="group.borders;borders[true]/checkbox;borderOuterWidth/slider,0,20,1;borderMiddleWidth/slider,0,20,1;borderInnerWidth/slider,0,20,1;borderShadowWidth/slider,0,20,1;;"
|
|
data-vis-attrs6="group.valueBox;valueBox[false]/checkbox;valueBoxStroke/slider,0,20,1;valueText;valueTextShadow/checkbox;valueBoxBorderRadius/slider,0,20,1;valueInt/slider,0,20,1;valueDec/slider,0,20,1;"
|
|
data-vis-attrs7="group.fonts;fontNumbers/fontname;fontTitle/fontname;fontUnits/fontname;fontValue/fontname;"
|
|
data-vis-attrs8="fontNumbersSize/slider,0,100,1;fontTitleSize/slider,0,100,1;fontUnitsSize/slider,0,100,1;fontValueSize/slider,0,100,1;"
|
|
data-vis-attrs9="fontNumbersStyle/nselect,normal,italic,oblique;fontTitleStyle/nselect,normal,italic,oblique;fontUnitsStyle/nselect,normal,italic,oblique;fontValueStyle/nselect,normal,italic,oblique;"
|
|
data-vis-attrs10="fontNumbersWeight/auto,normal,bold,bolder,lighter;fontTitleWeight/auto,normal,bold,bolder,lighter;fontUnitsWeight/auto,normal,bold,bolder,lighter;fontValueWeight/auto,normal,bold,bolder,lighter;"
|
|
>
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow: visible; width: 150px; height: 250px; border-radius: 10px" id="<%= this.data.attr('wid') %>"></div>
|
|
<% vis.binds['canvas-gauges'].gauge(this.view, this.data, 'linear'); %>
|
|
</script-->
|
|
<script id="tplCGlinearGauge"
|
|
type="text/ejs"
|
|
class="vis-tpl"
|
|
data-vis-type="temperature,number"
|
|
data-vis-set="canvas-gauges"
|
|
data-vis-name="Linear"
|
|
data-vis-update-style="true"
|
|
data-vis-prev='<img src="widgets/canvas-gauges/img/prev/Prev_cgLinear.png"></img>'
|
|
data-vis-attrs="oid/id/changedId;minValue;maxValue;units;title;factor[1];valueOffset[0];hCount[1]/slider,0,20,1;"
|
|
data-vis-attrs0="group.highlights/byindex;highlightsFrom(1-hCount);highlightsTo(1-hCount);highlightsColor(1-hCount)/color;"
|
|
data-vis-attrs1="group.ticks;majorTicks/slider,0,20,1;minorTicks[5]/slider,0,20,1;strokeTicks/checkbox;majorTicksInt/slider,0,10,1;majorTicksDec/slider,0,10,1;"
|
|
data-vis-attrs2="group.animation;animation[true]/checkbox;animationDuration/slider,0,2000,50;animationRule/select,linear,quad,quint,cycle,bounce,elastic,dequad,dequint,decycle,debounce,delastic;animatedValue/checkbox;animateOnInit/checkbox;"
|
|
data-vis-attrs3="group.colorsGauge;colorPlate/color;colorPlateEnd/color;colorMajorTicks/color;colorMinorTicks/color;colorTitle/color;colorUnits/color;colorNumbers/color;colorNeedle/color;colorNeedleEnd/color;colorValueText/color;colorValueTextShadow/color;colorBorderShadow/color;colorBorderOuter/color;colorBorderOuterEnd/color;colorBorderMiddle/color;colorBorderMiddleEnd/color;colorBorderInner/color;colorBorderInnerEnd/color;colorValueBoxRect/color;colorValueBoxRectEnd/color;colorValueBoxBackground/color;colorValueBoxShadow/color;colorNeedleShadowUp/color;colorNeedleShadowDown/color;"
|
|
data-vis-attrs4="group.needle;needle/checkbox;needleShadow/checkbox;needleType/select,arrow,line;needleStart/slider,0,100,1;needleEnd/slider,0,100,1;needleWidth/slider,0,50,1;"
|
|
data-vis-attrs5="group.borders;borders[true]/checkbox;borderOuterWidth/slider,0,20,1;borderMiddleWidth/slider,0,20,1;borderInnerWidth/slider,0,20,1;borderShadowWidth/slider,0,20,1;"
|
|
data-vis-attrs6="group.valueBox;valueBox[false]/checkbox;valueBoxStroke/slider,0,20,1;valueText;valueTextShadow/checkbox;valueBoxBorderRadius/slider,0,20,1;valueInt/slider,0,20,1;valueDec/slider,0,20,1;"
|
|
data-vis-attrs7="group.fonts;fontNumbers/fontname;fontTitle/fontname;fontUnits/fontname;fontValue/fontname;"
|
|
data-vis-attrs8="fontNumbersSize/slider,0,100,1;fontTitleSize/slider,0,100,1;fontUnitsSize/slider,0,100,1;fontValueSize/slider,0,100,1;"
|
|
data-vis-attrs9="fontNumbersStyle/nselect,normal,italic,oblique;fontTitleStyle/nselect,normal,italic,oblique;fontUnitsStyle/nselect,normal,italic,oblique;fontValueStyle/nselect,normal,italic,oblique;"
|
|
data-vis-attrs10="fontNumbersWeight/auto,normal,bold,bolder,lighter;fontTitleWeight/auto,normal,bold,bolder,lighter;fontUnitsWeight/auto,normal,bold,bolder,lighter;fontValueWeight/auto,normal,bold,bolder,lighter;"
|
|
data-vis-attrs11="group.gaugeBar;barBeginCircle/slider,0,360,1;barWidth/slider,0,50,1;barLength/slider,0,100,1;barStrokeWidth/slider,0,50,0;barProgress[true]/checkbox;"
|
|
data-vis-attrs12="group.colorsBar;colorBarStroke/color;colorBar/color;colorBarEnd/color;colorBarProgress/color;colorBarProgressEnd/color;"
|
|
data-vis-attrs13="group.positions;tickSide/select,both,left,right;needleSide/select,both,left,right;numberSide/select,both,left,right;"
|
|
data-vis-attrs14="group.ticksBar;ticksWidth/slider,0,50,1;ticksWidthMinor/slider,0,50,1;ticksPadding/slider,0,50,1;"
|
|
>
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow: visible; width: 150px; height: 250px; border-radius: 10px" id="<%= this.data.attr('wid') %>"></div>
|
|
<% vis.binds['canvas-gauges'].gauge(this.view, this.data, 'linear'); %>
|
|
</script>
|
|
|
|
<script id="tplCGradialGauge"
|
|
type="text/ejs"
|
|
class="vis-tpl"
|
|
data-vis-type="number"
|
|
data-vis-set="canvas-gauges"
|
|
data-vis-name="Radial"
|
|
data-vis-update-style="true"
|
|
data-vis-prev='<img src="widgets/canvas-gauges/img/prev/Prev_cgRadial.png"></img>'
|
|
data-vis-attrs="oid/id/changedId;minValue;maxValue;units;title;factor[1];valueOffset[0];hCount[1]/slider,0,20,1;"
|
|
data-vis-attrs0="group.highlights/byindex;highlightsFrom(1-hCount);highlightsTo(1-hCount);highlightsColor(1-hCount)/color;"
|
|
data-vis-attrs1="group.ticks;majorTicks/slider,0,20,1;minorTicks[4]/slider,0,20,1;strokeTicks/checkbox;majorTicksInt/slider,0,10,1;majorTicksDec/slider,0,10,1;"
|
|
data-vis-attrs2="group.animation;animation[true]/checkbox;animationDuration/slider,0,2000,50;animationRule/select,linear,quad,quint,cycle,bounce,elastic,dequad,dequint,decycle,debounce,delastic;animatedValue/checkbox;animateOnInit/checkbox;animationTarget/select,needle,plate;"
|
|
data-vis-attrs3="group.colorsGauge;colorPlate/color;colorPlateEnd/color;colorMajorTicks/color;colorMinorTicks/color;colorTitle/color;colorUnits/color;colorNumbers/color;colorNeedle/color;colorNeedleEnd/color;colorValueText/color;colorValueTextShadow/color;colorBorderShadow/color;colorBorderOuter/color;colorBorderOuterEnd/color;colorBorderMiddle/color;colorBorderMiddleEnd/color;colorBorderInner/color;colorBorderInnerEnd/color;colorValueBoxRect/color;colorValueBoxRectEnd/color;colorValueBoxBackground/color;colorValueBoxShadow/color;colorNeedleShadowUp/color;colorNeedleShadowDown/color;"
|
|
data-vis-attrs4="group.needle;needle[true]/checkbox;needleShadow[true]/checkbox;needleType[select]/select,arrow,line;needleStart/slider,0,100,1;needleEnd/slider,0,100,1;needleWidth/slider,0,50,1;"
|
|
data-vis-attrs5="group.borders;borders[true]/checkbox;borderOuterWidth[2]/slider,0,20,1;borderMiddleWidth[2]/slider,0,20,1;borderInnerWidth[2]/slider,0,20,1;borderShadowWidth[2]/slider,0,20,1;"
|
|
data-vis-attrs6="group.valueBox;valueBox[false]/checkbox;valueBoxStroke/slider,0,20,1;valueText;valueTextShadow/checkbox;valueBoxBorderRadius/slider,0,20,1;valueInt/slider,0,20,1;valueDec/slider,0,20,1;"
|
|
data-vis-attrs7="group.fonts;fontNumbers/fontname;fontTitle/fontname;fontUnits/fontname;fontValue/fontname;"
|
|
data-vis-attrs8="fontNumbersSize/slider,0,100,1;fontTitleSize/slider,0,100,1;fontUnitsSize/slider,0,100,1;fontValueSize/slider,0,100,1;"
|
|
data-vis-attrs9="fontNumbersStyle/nselect,normal,italic,oblique;fontTitleStyle/nselect,normal,italic,oblique;fontUnitsStyle/nselect,normal,italic,oblique;fontValueStyle/nselect,normal,italic,oblique;"
|
|
data-vis-attrs10="fontNumbersWeight/auto,normal,bold,bolder,lighter;fontTitleWeight/auto,normal,bold,bolder,lighter;fontUnitsWeight/auto,normal,bold,bolder,lighter;fontValueWeight/auto,normal,bold,bolder,lighter;"
|
|
data-vis-attrs11="group.gaugeRadial;ticksAngle[270]/slider,0,360,1;startAngle[45]/slider,0,360,1;"
|
|
data-vis-attrs12="group.colorsRadial;colorNeedleCircleOuter/color;colorNeedleCircleOuterEnd/color;colorNeedleCircleInner/color;colorNeedleCircleInnerEnd/color;"
|
|
data-vis-attrs13="group.needleRadial;needleCircleSize/slider,0,200,1;needleCircleInner/checkbox;needleCircleInner/checkbox;needleCircleOuter/checkbox;"
|
|
>
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow: visible; width: 200px; height: 200px;" id="<%= this.data.attr('wid') %>"></div>
|
|
<% vis.binds['canvas-gauges'].gauge(this.view, this.data, 'radial'); %>
|
|
</script>
|
|
|
|
<script id="tplCGCompas"
|
|
type="text/ejs"
|
|
class="vis-tpl"
|
|
data-vis-type="number"
|
|
data-vis-set="canvas-gauges"
|
|
data-vis-name="Compas"
|
|
data-vis-update-style="true"
|
|
data-vis-prev='<img src="widgets/canvas-gauges/img/prev/Prev_cgCompas.png"></img>'
|
|
data-vis-attrs="oid/id/changedId;minValue[0];maxValue[360];units;title;factor[1];valueOffset[0];hCount[1]/slider,0,20,1;"
|
|
data-vis-attrs0="group.highlights/byindex;highlightsFrom(1-hCount);highlightsTo(1-hCount);highlightsColor(1-hCount)/color;"
|
|
data-vis-attrs1="group.ticks;majorTicks[N,NE,E,SE,S,SW,W,NW,N];minorTicks[22]/slider,0,20,1;strokeTicks[false]/checkbox;majorTicksInt/slider,0,10,1;majorTicksDec/slider,0,10,1;"
|
|
data-vis-attrs2="group.animation;animation[true]/checkbox;animationDuration[1000]/slider,0,2000,50;animationRule/select,linear,quad,quint,cycle,bounce,elastic,dequad,dequint,decycle,debounce,delastic;animatedValue/checkbox;animateOnInit/checkbox;animationTarget/select,needle,plate;"
|
|
data-vis-attrs3="group.colorsGauge;colorPlate[#222]/color;colorPlateEnd/color;colorMajorTicks[#f5f5f5]/color;colorMinorTicks[#ddd]/color;colorTitle/color;colorUnits/color;colorNumbers[#ccc]/color;colorNeedle[rgba(240,128,128,1)]/color;colorNeedleEnd[rgba(255,160,122,.9)]/color;colorValueText/color;colorValueTextShadow/color;colorBorderShadow/color;colorBorderOuter[#ccc]/color;colorBorderOuterEnd[#ccc]/color;colorBorderMiddle/color;colorBorderMiddleEnd/color;colorBorderInner/color;colorBorderInnerEnd/color;colorValueBoxRect/color;colorValueBoxRectEnd/color;colorValueBoxBackground/color;colorValueBoxShadow/color;colorNeedleShadowUp/color;colorNeedleShadowDown[#222]/color;"
|
|
data-vis-attrs4="group.needle;needle/checkbox;needleShadow/checkbox;needleType[line]/select,arrow,line;needleStart[75]/slider,0,100,1;needleEnd[99]/slider,0,100,1;needleWidth[3]/slider,0,50,1;"
|
|
data-vis-attrs5="group.borders;borders[true]/checkbox;borderOuterWidth[10]/slider,0,20,1;borderMiddleWidth[0]/slider,0,20,1;borderInnerWidth[0]/slider,0,20,1;borderShadowWidth[0]/slider,0,20,1;"
|
|
data-vis-attrs6="group.valueBox;valueBox[false]/checkbox;valueBoxStroke/slider,0,20,1;valueText;valueTextShadow[false]/checkbox;valueBoxBorderRadius/slider,0,20,1;valueInt/slider,0,20,1;valueDec/slider,0,20,1;"
|
|
data-vis-attrs7="group.fonts;fontNumbers/fontname;fontTitle/fontname;fontUnits/fontname;fontValue/fontname;"
|
|
data-vis-attrs8="fontNumbersSize/slider,0,100,1;fontTitleSize/slider,0,100,1;fontUnitsSize/slider,0,100,1;fontValueSize/slider,0,100,1;"
|
|
data-vis-attrs9="fontNumbersStyle/nselect,normal,italic,oblique;fontTitleStyle/nselect,normal,italic,oblique;fontUnitsStyle/nselect,normal,italic,oblique;fontValueStyle/nselect,normal,italic,oblique;"
|
|
data-vis-attrs10="fontNumbersWeight/auto,normal,bold,bolder,lighter;fontTitleWeight/auto,normal,bold,bolder,lighter;fontUnitsWeight/auto,normal,bold,bolder,lighter;fontValueWeight/auto,normal,bold,bolder,lighter;"
|
|
data-vis-attrs11="group.gaugeRadial;ticksAngle[360]/slider,0,360,1;startAngle[180]/slider,0,360,1;"
|
|
data-vis-attrs12="group.colorsRadial;colorNeedleCircleOuter[#ccc]/color;colorNeedleCircleOuterEnd/color;colorNeedleCircleInner/color;colorNeedleCircleInnerEnd/color;"
|
|
data-vis-attrs13="group.needleRadial;needleCircleSize[15]/slider,0,200,1;needleCircleInner/checkbox;needleCircleInner/checkbox;needleCircleOuter[false]/checkbox;"
|
|
>
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow: visible; width: 200px; height: 200px;" id="<%= this.data.attr('wid') %>"></div>
|
|
<% vis.binds['canvas-gauges'].gauge(this.view, this.data, 'radial'); %>
|
|
</script>
|
|
|
|
<script id="tplCGflatGauge"
|
|
type="text/ejs"
|
|
class="vis-tpl"
|
|
data-vis-type="temperature,number"
|
|
data-vis-set="canvas-gauges"
|
|
data-vis-name="Flat"
|
|
data-vis-update-style="true"
|
|
data-vis-prev='<img src="widgets/canvas-gauges/img/prev/Prev_cgFlat.png"></img>'
|
|
data-vis-attrs="oid/id/changedId;minValue;maxValue;units;title;factor[1];valueOffset[0];hCount[1]/slider,0,20,1;"
|
|
data-vis-attrs0="group.highlights/byindex;highlightsFrom(1-hCount);highlightsTo(1-hCount);highlightsColor(1-hCount)/color;"
|
|
data-vis-attrs1="group.ticks;majorTicks/slider,0,20,1;minorTicks[10]/slider,0,20,1;strokeTicks[true]/checkbox;majorTicksInt/slider,0,10,1;majorTicksDec/slider,0,10,1;"
|
|
data-vis-attrs2="group.animation;animation[true]/checkbox;animationDuration/slider,0,2000,50;animationRule/select,linear,quad,quint,cycle,bounce,elastic,dequad,dequint,decycle,debounce,delastic;animatedValue/checkbox;animateOnInit/checkbox;"
|
|
data-vis-attrs3="group.colorsGauge;colorPlate[#fff]/color;colorPlateEnd/color;colorMajorTicks/color;colorMinorTicks/color;colorTitle/color;colorUnits/color;colorNumbers/color;colorNeedle[red]/color;colorNeedleEnd[rgba(255,0,0,0.7)]/color;colorValueText/color;colorValueTextShadow/color;colorBorderShadow/color;colorBorderOuter/color;colorBorderOuterEnd/color;colorBorderMiddle/color;colorBorderMiddleEnd/color;colorBorderInner/color;colorBorderInnerEnd/color;colorValueBoxRect/color;colorValueBoxRectEnd/color;colorValueBoxBackground/color;colorValueBoxShadow/color;colorNeedleShadowUp/color;colorNeedleShadowDown/color;"
|
|
data-vis-attrs4="group.needle;needle/checkbox;needleShadow/checkbox;needleType[line]/select,arrow,line;needleStart/slider,0,100,1;needleEnd/slider,0,100,1;needleWidth[3]/slider,0,50,1;"
|
|
data-vis-attrs5="group.borders;borders[false]/checkbox;borderOuterWidth[0]/slider,0,20,1;borderMiddleWidth[0]/slider,0,20,1;borderInnerWidth[0]/slider,0,20,1;borderShadowWidth[0]/slider,0,20,1;;"
|
|
data-vis-attrs6="group.valueBox;valueBox[false]/checkbox;valueBoxStroke/slider,0,20,1;valueText;valueTextShadow/checkbox;valueBoxBorderRadius/slider,0,20,1;valueInt/slider,0,20,1;valueDec/slider,0,20,1;"
|
|
data-vis-attrs7="group.fonts;fontNumbers/fontname;fontTitle/fontname;fontUnits/fontname;fontValue/fontname;"
|
|
data-vis-attrs8="fontNumbersSize/slider,0,100,1;fontTitleSize/slider,0,100,1;fontUnitsSize/slider,0,100,1;fontValueSize/slider,0,100,1;"
|
|
data-vis-attrs9="fontNumbersStyle/nselect,normal,italic,oblique;fontTitleStyle/nselect,normal,italic,oblique;fontUnitsStyle/nselect,normal,italic,oblique;fontValueStyle/nselect,normal,italic,oblique;"
|
|
data-vis-attrs10="fontNumbersWeight/auto,normal,bold,bolder,lighter;fontTitleWeight/auto,normal,bold,bolder,lighter;fontUnitsWeight/auto,normal,bold,bolder,lighter;fontValueWeight/auto,normal,bold,bolder,lighter;"
|
|
data-vis-attrs11="group.gaugeBar;barBeginCircle[0]/slider,0,360,1;barWidth[5]/slider,0,50,1;barLength/slider,0,100,1;barStrokeWidth/slider,0,50,0;barProgress[true]/checkbox;"
|
|
data-vis-attrs12="group.colorsBar;colorBarStroke/color;colorBar/color;colorBarEnd/color;colorBarProgress[#db9994]/color;colorBarProgressEnd/color;"
|
|
data-vis-attrs13="group.positions;tickSide[left]/select,both,left,right;needleSide[left]/select,both,left,right;numberSide[left]/select,both,left,right;"
|
|
data-vis-attrs14="group.ticksBar;ticksWidth[50]/slider,0,50,1;ticksWidthMinor[15]/slider,0,50,1;ticksPadding/slider,0,50,1;"
|
|
>
|
|
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow: visible; width: 360px; height: 100px;" id="<%= this.data.attr('wid') %>"></div>
|
|
<% vis.binds['canvas-gauges'].gauge(this.view, this.data, 'linear'); %>
|
|
</script> |