Hallo,
wie gefällt diese Erweiterung ? Die bisherige Möglichkeit von Wertenbereichen war auf aufwendige .png Grafiken beschränkt.
Verwendete meines Wissens nur HAPE. Braucht dafür gutes Know-How in Grafikprogrammen (Adobe Illustrator ).
Hier die elegante Lösung, zur Ergänzung der KNOB-Funktion. Es wird im Hintergrund eine parametrierbare SVG-Grafik erzeugt. Aus heutiger Sicht die bestmögliche Technik.
XXKNOB ist von der "Haptik" das beste mir bekannte Control. Vergleicht es mit XXSLIDER. Besser zu bedienen ist eindeutig XXKNOB.
Sogar die recht kleinen drei KNOBs sind problemlos zu steuern. Probiert eine solche Lösung mit XXSLIDER. Auf dieser kleinen Größe unmöglich.
Übrigens. Auf hochauflösenden Tablets, mit "Retina" Grafik noch wirklich lesbar.
Darum auch die Initiative zur "optischen" Verbesserung von XXKNOB.
image_59892.pngBildschirmfoto 2017-03-26 um 10.19.17.png
Ist eine Erweiterung in custom.js.
NilsS vielleicht könntest DU einen kurzen Qualitätscheck durchführen. Ist meine erste -ohne Unterstützung- erstellte XXAPI-Funktion.
Hier der Code:
Im Experten ist nur ein Textfeld (gleiche Größe und Position wie XXKNOB) mit XXRADIALGAUGE* unterhalb von XXKNOB einzufügen.
image_59893.pngimage_59894.png
Hans
wie gefällt diese Erweiterung ? Die bisherige Möglichkeit von Wertenbereichen war auf aufwendige .png Grafiken beschränkt.
Verwendete meines Wissens nur HAPE. Braucht dafür gutes Know-How in Grafikprogrammen (Adobe Illustrator ).
Hier die elegante Lösung, zur Ergänzung der KNOB-Funktion. Es wird im Hintergrund eine parametrierbare SVG-Grafik erzeugt. Aus heutiger Sicht die bestmögliche Technik.
XXKNOB ist von der "Haptik" das beste mir bekannte Control. Vergleicht es mit XXSLIDER. Besser zu bedienen ist eindeutig XXKNOB.
Sogar die recht kleinen drei KNOBs sind problemlos zu steuern. Probiert eine solche Lösung mit XXSLIDER. Auf dieser kleinen Größe unmöglich.
Übrigens. Auf hochauflösenden Tablets, mit "Retina" Grafik noch wirklich lesbar.
Darum auch die Initiative zur "optischen" Verbesserung von XXKNOB.
image_59892.pngBildschirmfoto 2017-03-26 um 10.19.17.png
Ist eine Erweiterung in custom.js.
NilsS vielleicht könntest DU einen kurzen Qualitätscheck durchführen. Ist meine erste -ohne Unterstützung- erstellte XXAPI-Funktion.
Hier der Code:
Code:
hs.functions.element_loader([
"js/gauge.min.js" // http://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.2/radial/gauge.min.js
]
);
xxAPI.functions.XXRADIALGAUGE = function( oarg ) {
var _id = 'id_radialgauge';
oarg.item.text = "";
/*
if($.isEmptyObject(oarg.item.info)) {
debug(4,"XXRADIALGAUGE no item info " + oarg.item.uid,oarg);
oarg.item.item_callback = function() {
oarg.iscallback = true;
xxAPI.functions.XXRADIALGAUGE( oarg );
}
return;
}
*/
if(!oarg.item.xxapi.hasOwnProperty("gauge")) {
var _majorTicks = ['0','10','20','30','40','50','60','70','80','90','100'];
var _min = 0;
var _max = 100;
var _minorTicks = 2;
var _startAngle = 56;
if(oarg.args[1]=='vol') {
_majorTicks = ['0','10','20','30','40','50','60','70','80'];
_max = 80
}
if(oarg.args[1]=='temp') {
_majorTicks = ['7','9','11','13','15','17','19','21','23','25','27'];
_min = 7;
_max = 27
}
if(oarg.args[1]=='sw') {
_majorTicks = ['','-2','','-1','','0','','1','','2',''];
_min = -2.5;
_max = 2.5
}
// oarg.item.html = "<canvas data-type='radial-gauge' id='id_radialgauge' />";
oarg.item.xxapi.gauge = new RadialGauge({
renderTo: document.createElement('canvas'),
width: oarg.item.width,
height: oarg.item.height,
units: false,
title: false,
value: 0,
borders: false,
minValue: _min,
maxValue: _max,
needle: false,
valueBox: false,
colorValueBoxBackground: 'transparent',
barWidth: 14,
barShadow: 0,
startAngle: _startAngle,
ticksAngle: 360-2*_startAngle,
majorTicks: _majorTicks,
highlights: [{from: _min, to: _max, color: 'transparent'}],
strokeTicks: false,
minorTicks: _minorTicks,
colorPlate: 'transparent',
colorMajorTicks : oarg.item.color,
colorMinorTicks : oarg.item.color,
colorTitle : oarg.item.color,
colorUnits : oarg.item.color,
colorNumbers : oarg.item.color
});
document.body.appendChild(oarg.item.xxapi.gauge.options.renderTo);
oarg.item.xxapi.gauge.draw();
}
if(oarg.iscallback) {
oarg.item.object.html(oarg.item.xxapi.gauge.options.renderTo);
} else {
oarg.item.html = oarg.item.xxapi.gauge.options.renderTo;
}
};
image_59893.pngimage_59894.png
Hans
Kommentar