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

playground - playing aroudn with gauge meter, modify to my needs

Browse source
This commit is contained in:
Marcus 2024-05-02 16:34:35 +02:00
parent 86bb4fff64
commit 5c3a7d04d8
1 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -32,7 +32,7 @@
<div class="center">
<div style="overflow: hidden;">
<div class="gauge gauge--liveupdate" id="gauge" style="float:left;">
<span >asd</span>
<span >Humidity</span>
<div class="gauge__container">
<!-- <div class="gauge__marker"></div> -->
@ -49,6 +49,7 @@
</div>
<div class="gauge gauge--liveupdate" id="gauge2" style="float:left;">
<span >Moisture</span>
<div class="gauge__container">
<!-- <div class="gauge__marker"></div> -->
<div class="gauge__background"></div>
@ -57,13 +58,14 @@
<div class="gauge__needle"></div>
</div>
<div class="gauge__labels mdl-typography__headline">
<span class="gauge__label--low">0%</span>
<span class="gauge__label--spacer"></span>
<span class="gauge__label--high">100%</span>
<span class="gauge__label--low"></span>
<span class="gauge__label--spacer">50%</span>
<span class="gauge__label--high"></span>
</div>
</div>
<div class="gauge gauge--liveupdate" id="gauge3" style="float:left;">
<span >Temperature</span>
<div class="gauge__container">
<!-- <div class="gauge__marker"></div> -->
<div class="gauge__background"></div>
@ -72,9 +74,9 @@
<div class="gauge__needle"></div>
</div>
<div class="gauge__labels mdl-typography__headline">
<span class="gauge__label--low">0%</span>
<span class="gauge__label--spacer"></span>
<span class="gauge__label--high">100%</span>
<span class="gauge__label--low"></span>
<span class="gauge__label--spacer">25°C</span>
<span class="gauge__label--high"></span>
</div>
</div>
</div>
@ -88,7 +90,7 @@
gauge.value(75);
gauge2.value(50);
gauge3.value(25);
gauge3.value((29*100)/42);
</script>
</body>