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