DeltaLima/CanGrow
DeltaLima/CanGrow
0
0
Fork 0
Code Issues 14 Pull requests Projects 1 Releases 3 Packages Wiki Activity

playground - hack configurable labes and max data range into gaugemeters

Browse source
This commit is contained in:
Marcus 2024-05-02 22:39:18 +02:00
parent 5c3a7d04d8
commit a7f1a2146a
2 changed files with 30 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
playground/html/material-gauge-gh-pages/index.html
View file

@ -43,7 +43,7 @@
</div> </div>
<div class="gauge__labels mdl-typography__headline"> <div class="gauge__labels mdl-typography__headline">
<span class="gauge__label--low"></span> <span class="gauge__label--low"></span>
<span class="gauge__label--spacer">75%</span> <span class="gauge__label--spacer"></span>
<span class="gauge__label--high"></span> <span class="gauge__label--high"></span>
</div> </div>
</div> </div>
@ -59,7 +59,7 @@
</div> </div>
<div class="gauge__labels mdl-typography__headline"> <div class="gauge__labels mdl-typography__headline">
<span class="gauge__label--low"></span> <span class="gauge__label--low"></span>
<span class="gauge__label--spacer">50%</span> <span class="gauge__label--spacer"></span>
<span class="gauge__label--high"></span> <span class="gauge__label--high"></span>
</div> </div>
</div> </div>
@ -75,7 +75,7 @@
</div> </div>
<div class="gauge__labels mdl-typography__headline"> <div class="gauge__labels mdl-typography__headline">
<span class="gauge__label--low"></span> <span class="gauge__label--low"></span>
<span class="gauge__label--spacer">25°C</span> <span class="gauge__label--spacer"></span></span>
<span class="gauge__label--high"></span> <span class="gauge__label--high"></span>
</div> </div>
</div> </div>
@ -88,9 +88,11 @@
var gauge2 = new Gauge(document.getElementById("gauge2")); var gauge2 = new Gauge(document.getElementById("gauge2"));
var gauge3 = new Gauge(document.getElementById("gauge3")); var gauge3 = new Gauge(document.getElementById("gauge3"));
gauge.value(75); //gauge.value(75);
//gauge2.value(50);
gauge.value(25);
gauge2.value(50); gauge2.value(50);
gauge3.value((29*100)/42); gauge3.value(33, 42, '°C');
</script> </script>
</body> </body>

29
playground/html/material-gauge-gh-pages/material-gauge.js
View file

@ -13,7 +13,8 @@ function Gauge(el) {
data, // `.gauge__data` element data, // `.gauge__data` element
needle, // `.gauge__needle` element needle, // `.gauge__needle` element
value = 0.0, // Current gauge value from 0 to 1 value = 0.0, // Current gauge value from 0 to 1
prop; // Style for transform prop, // Style for transform
valueLabel; // `.gauge__label--spacer` element
// ##### Private Methods and Functions // ##### Private Methods and Functions
@ -22,13 +23,29 @@ function Gauge(el) {
element = el; element = el;
data = element.querySelector(".gauge__data"); data = element.querySelector(".gauge__data");
needle = element.querySelector(".gauge__needle"); needle = element.querySelector(".gauge__needle");
valueLabel = element.querySelector(".gauge__label--spacer");
//valueLabel = element.getElementsByTagName("span"); //valueLabel = element.querySelector("span.gauge__label--spacer");
}; };
var setValue = function(x) { var setValue = function(x, max, unit) {
value = x; percentage = x * 100 / max;
var turns = -0.5 + (x * 0.5); value = percentage / 100;
var turns = -0.5 + (value * 0.5);
data.style[prop] = "rotate(" + turns + "turn)"; data.style[prop] = "rotate(" + turns + "turn)";
needle.style[prop] = "rotate(" + turns + "turn)"; needle.style[prop] = "rotate(" + turns + "turn)";
valueLabel.textContent = x + unit;
/*
for (var i = 0; i < valueLabel.children.length; i++) {
window.alert(valueLabel.children[i].className);
if (valueLabel.children[i].className == "gauge__label--spacer") {
window.alert(valueLabel.children[i]);
valueLabel.children[i].textContent = x + unit;
break;
}
}
*/
}; };
// ##### Object to be Returned // ##### Object to be Returned
@ -43,9 +60,9 @@ function Gauge(el) {
return this; return this;
}; };
exports.value = function(x) { exports.value = function(x, max=100, unit='%') {
if (!arguments.length) { return value; } if (!arguments.length) { return value; }
setValue(x / 100); setValue(x, max, unit);
return this; return this;
}; };