2024-05-02 15:54:10 +02:00
|
|
|
<!doctype html>
|
2024-05-03 00:33:23 +02:00
|
|
|
<html lang='en'>
|
2024-05-02 15:54:10 +02:00
|
|
|
<head>
|
2024-05-03 00:33:23 +02:00
|
|
|
<meta charset='utf-8'>
|
|
|
|
|
<meta http-equiv='x-ua-compatible' content='ie=edge'>
|
2024-05-02 15:54:10 +02:00
|
|
|
<title>Material Design Gauge</title>
|
2024-05-03 00:33:23 +02:00
|
|
|
<meta name='description'
|
|
|
|
|
content='Simple Material Design gauge control implemented in pure CSS/HTML'>
|
|
|
|
|
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
|
|
|
|
<link rel='stylesheet' type='text/css' href='material-gauge.css'>
|
2024-05-02 15:54:10 +02:00
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
background-color: #1d211e;
|
|
|
|
|
color: #cae0d0;
|
|
|
|
|
font-family: Roboto, Helvetica, Arial, sans-serif;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
height: 32px;
|
|
|
|
|
letter-spacing: normal;
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
padding-top: 100px;
|
|
|
|
|
}
|
2024-05-02 16:25:33 +02:00
|
|
|
.center {
|
|
|
|
|
width: 60%; min-width: 420px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
2024-05-02 15:54:10 +02:00
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-05-03 00:33:23 +02:00
|
|
|
<div class='center'>
|
|
|
|
|
<div style='overflow: hidden; display: flex; justify-content: center;'>
|
|
|
|
|
<div class='gauge gauge--liveupdate' id='gauge' style='float:left;'>
|
|
|
|
|
<span class='gaugeLabel'>Humidity</span>
|
|
|
|
|
<div class='gauge__container'>
|
2024-05-02 16:25:33 +02:00
|
|
|
|
2024-05-03 00:33:23 +02:00
|
|
|
<!-- <div class='gauge__marker'></div> -->
|
|
|
|
|
<div class='gauge__background'></div>
|
|
|
|
|
<div class='gauge__center'></div>
|
|
|
|
|
<div class='gauge__data'></div>
|
2024-05-03 01:33:38 +02:00
|
|
|
<!-- <div class='gauge__needle'></div> -->
|
2024-05-02 16:25:33 +02:00
|
|
|
</div>
|
2024-05-03 00:33:23 +02:00
|
|
|
<div class='gauge__labels mdl-typography__headline'>
|
|
|
|
|
<span class='gauge__label--low'></span>
|
|
|
|
|
<span class='gauge__label--spacer'></span>
|
|
|
|
|
<span class='gauge__label--high'></span>
|
2024-05-02 16:25:33 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-05-03 00:33:23 +02:00
|
|
|
<div class='gauge gauge--liveupdate' id='gauge2' style='float:left;'>
|
|
|
|
|
<span class='gaugeLabel'>Moisture</span>
|
|
|
|
|
<div class='gauge__container'>
|
|
|
|
|
<!-- <div class='gauge__marker'></div> -->
|
|
|
|
|
<div class='gauge__background'></div>
|
|
|
|
|
<div class='gauge__center'></div>
|
|
|
|
|
<div class='gauge__data'></div>
|
|
|
|
|
<div class='gauge__needle'></div>
|
2024-05-02 16:25:33 +02:00
|
|
|
</div>
|
2024-05-03 00:33:23 +02:00
|
|
|
<div class='gauge__labels mdl-typography__headline'>
|
|
|
|
|
<span class='gauge__label--low'></span>
|
|
|
|
|
<span class='gauge__label--spacer'></span>
|
|
|
|
|
<span class='gauge__label--high'></span>
|
2024-05-02 16:25:33 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-05-03 00:33:23 +02:00
|
|
|
<div class='gauge gauge--liveupdate' id='gauge3' style='float:left;'>
|
|
|
|
|
<span class='gaugeLabel'>Temperature</span>
|
|
|
|
|
<div class='gauge__container'>
|
|
|
|
|
<!-- <div class='gauge__marker'></div> -->
|
|
|
|
|
<div class='gauge__background'></div>
|
|
|
|
|
<div class='gauge__center'></div>
|
|
|
|
|
<div class='gauge__data'></div>
|
|
|
|
|
<div class='gauge__needle'></div>
|
2024-05-02 16:25:33 +02:00
|
|
|
</div>
|
2024-05-03 00:33:23 +02:00
|
|
|
<div class='gauge__labels mdl-typography__headline'>
|
|
|
|
|
<span class='gauge__label--low'></span>
|
|
|
|
|
<span class='gauge__label--spacer'></span></span>
|
|
|
|
|
<span class='gauge__label--high'></span>
|
2024-05-02 16:25:33 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-03 00:33:23 +02:00
|
|
|
<script src='material-gauge.js'></script>
|
2024-05-02 15:54:10 +02:00
|
|
|
<script>
|
|
|
|
|
|
2024-05-03 00:33:23 +02:00
|
|
|
var gauge = new Gauge(document.getElementById('gauge'));
|
|
|
|
|
var gauge2 = new Gauge(document.getElementById('gauge2'));
|
|
|
|
|
var gauge3 = new Gauge(document.getElementById('gauge3'));
|
2024-05-02 16:25:33 +02:00
|
|
|
|
2024-05-02 22:39:18 +02:00
|
|
|
//gauge.value(75);
|
|
|
|
|
//gauge2.value(50);
|
|
|
|
|
gauge.value(25);
|
2024-05-02 16:25:33 +02:00
|
|
|
gauge2.value(50);
|
2024-05-02 22:39:18 +02:00
|
|
|
gauge3.value(33, 42, '°C');
|
2024-05-02 16:25:33 +02:00
|
|
|
|
2024-05-02 15:54:10 +02:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
