diff --git a/web/new website/gauge.js b/web/new website/gauge.js index 6040164..5319b5c 100644 --- a/web/new website/gauge.js +++ b/web/new website/gauge.js @@ -1,10 +1,12 @@ // JavaScript function updateGauge(value) { const gaugeValue = document.getElementById('gaugeValue'); + const gaugeText = document.getElementById('gaugeText'); const maxGaugeValue = 100; // Maximum value the gauge can display const rotationDegree = ((value / maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90) gaugeValue.style.transform = `rotate(${rotationDegree}deg)`; + gaugeText.textContent = value; // Update the text // Change color based on value if (value <= 40) { @@ -17,4 +19,4 @@ function updateGauge(value) { } // Example usage: -updateGauge(50); // Rotates the gauge to 0 degrees (50 out of 100) and changes color to orange \ No newline at end of file +updateGauge(50); // Rotates the gauge to 0 degrees (50 out of 100), changes color to orange, and updates the text to "50" \ No newline at end of file diff --git a/web/new website/index.html b/web/new website/index.html index 240352b..e323269 100644 --- a/web/new website/index.html +++ b/web/new website/index.html @@ -1,32 +1,60 @@ + - bruh + +
+

Gauge Group

-
-
-
- - -
- +
+
+
+ + +
+
0
+
+
+
+
+
+ + +
+
0
+
+
+
+
+
+ + +
+
0
+
+
+
+
+
+ + +
+
0
+
- - - - + - \ No newline at end of file diff --git a/web/new website/style.css b/web/new website/style.css index b17f43c..ff6f00c 100644 --- a/web/new website/style.css +++ b/web/new website/style.css @@ -4,24 +4,6 @@ box-sizing: border-box; } -.gaugeContainer { - width: 300px; - height: 300px; - border: 3px solid black; - border-radius: 50%; - margin: 50px auto; - position: relative; -} - -.center-point { - width: 20px; - height: 20px; - background-color: black; - border-radius: 50%; - position: absolute; - top: 137px; - left: 137px; -} .speedometer-scale { width: 8px; @@ -29,16 +11,15 @@ background-color: black; } -/* CSS */ /* CSS */ .gaugeContainer { - width: 300px; - height: 300px; + width: 30vw; + height: 300pxx; border: 3px solid black; - border-radius: 50%; + fill: grey; margin: 50px auto; position: relative; - display: block; + overflow: hidden; /* Hide the first half of the gauge */ } .gaugeValue { @@ -48,12 +29,60 @@ bottom: 50%; left: 50%; transform-origin: bottom; - transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition for rotation and color change */ + transition: transform 0.3s ease, background-color 0.3s ease; +} + +.gaugeText { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + text-align: center; + z-index: 2; /* Bring the value to the front */ } .gaugeImage { display: block; margin-left: auto; margin-right: auto; - width: 100%; + width: auto; + z-index: 2; /* Bring the value to the front */ +} + +.gaugeContainer { + width: 80%; /* Adjust this value as necessary */ + height: 80%; /* Adjust this value as necessary */ + border: 3px solid black; + fill: grey; + margin: 10% auto; + position: relative; + overflow: hidden; +} + +.Node { + display: flex; /* Use Flexbox */ + justify-content: space-between; /* Distribute the items evenly along the horizontal line */ + flex-wrap: wrap; /* Allow the items to wrap onto multiple lines if necessary */ +} + +.Sensorvalues { + flex: 1 0 20%; /* Allow the items to grow and shrink as necessary, and set the base width to 20% */ + margin: 10px; /* Add some margin around the items */ + background-color: #333; /* Dark background color */ + color: #fff; /* Light text color */ + padding: 20px; /* Some padding around the gauges */ + border-radius: 10px; /* Round borders */ +} + +.gaugeGroup { + background-color: #333; /* Dark background color */ + color: #fff; /* Light text color */ + padding: 20px; /* Some padding around the gauges */ + margin-bottom: 20px; /* Some margin below the group */ +} + +.groupTitle { + text-align: center; /* Center the title */ + margin-bottom: 20px; /* Some margin below the title */ } \ No newline at end of file