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

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

@ -13,7 +13,8 @@ function Gauge(el) {
data, // `.gauge__data` element
needle, // `.gauge__needle` element
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
@ -22,13 +23,29 @@ function Gauge(el) {
element = el;
data = element.querySelector(".gauge__data");
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) {
value = x;
var turns = -0.5 + (x * 0.5);
var setValue = function(x, max, unit) {
percentage = x * 100 / max;
value = percentage / 100;
var turns = -0.5 + (value * 0.5);
data.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
@ -43,9 +60,9 @@ function Gauge(el) {
return this;
};
exports.value = function(x) {
exports.value = function(x, max=100, unit='%') {
if (!arguments.length) { return value; }
setValue(x / 100);
setValue(x, max, unit);
return this;
};