diff --git a/web/new website/gauge.js b/web/new website/gauge.js index 5319b5c..5a6e9cc 100644 --- a/web/new website/gauge.js +++ b/web/new website/gauge.js @@ -1,22 +1,9 @@ -// JavaScript -function updateGauge(value) { - const gaugeValue = document.getElementById('gaugeValue'); - const gaugeText = document.getElementById('gaugeText'); +function updateGauge(gaugeId, value) { + const needle = document.getElementById(`needle${gaugeId}`); + const gaugeText = document.getElementById(`gaugeText${gaugeId}`); 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)`; + needle.style.transform = `rotate(${rotationDegree}deg)`; gaugeText.textContent = value; // Update the text - - // Change color based on value - if (value <= 40) { - gaugeValue.style.backgroundColor = 'green'; - } else if (value <= 80) { - gaugeValue.style.backgroundColor = 'orange'; - } else { - gaugeValue.style.backgroundColor = 'red'; - } -} - -// Example usage: -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 +} \ No newline at end of file diff --git a/web/new website/index.html b/web/new website/index.html index e323269..e90a2df 100644 --- a/web/new website/index.html +++ b/web/new website/index.html @@ -5,56 +5,56 @@ - bruh + Gauges -

Gauge Group

-
+
- -
-
0
+
+
+
0
-
-
- -
-
0
+
+
+ +
+
+
0
-
-
- -
-
0
+
+
+ +
+
+
0
-
-
- -
-
0
+
+
+ +
+
+
0
+ - - - - \ No newline at end of file + \ No newline at end of file diff --git a/web/new website/style.css b/web/new website/style.css index ff6f00c..df50097 100644 --- a/web/new website/style.css +++ b/web/new website/style.css @@ -1,88 +1,125 @@ * { - margin: 0; - padding: 0; box-sizing: border-box; } - -.speedometer-scale { - width: 8px; - height: 280px; - background-color: black; -} - -/* CSS */ -.gaugeContainer { - width: 30vw; - height: 300pxx; - border: 3px solid black; - fill: grey; - margin: 50px auto; - position: relative; - overflow: hidden; /* Hide the first half of the gauge */ -} - -.gaugeValue { - width: 10px; - height: 150px; - position: absolute; - bottom: 50%; - left: 50%; - transform-origin: bottom; - 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: 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 */ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; } .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 */ + width: 70vw; + height: 20vh; + display: flex; + flex-direction: column; /* Keep as column */ + justify-content: flex-start; + background-color: #333; + color: #fff; + padding: 10px; + border-radius: 50px; + border: 2px solid #333; +} +.groupTitle { + width: 100%; + text-align: center; + font-size: 24px; } -.groupTitle { - text-align: center; /* Center the title */ - margin-bottom: 20px; /* Some margin below the title */ +.Node { + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + height: 100%; +} + +.Sensorvalues { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + width: 20%; + height: 100%; + background-color: #ddd; + color: #333; + padding: 10px; + margin: 5px; + border-radius: 10px; + text-align: center; + position: relative; + padding-bottom: 50px; /* Increase bottom padding */ + +} + +.gaugeContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 80%; /* Increase the height from 70% to 80% */ + position: relative; + overflow: visible; +} + +.gaugeImage { + width: 100%; + height: auto; + max-height: 100%; + object-fit: contain; + position: absolute; /* Make the image position absolute */ + top: 0; + left: 0; + z-index: 1; /* Make the image display below the needle */ +} + +.gaugeValue, .gaugeText { + width: 100%; + text-align: center; + font-size: 24px; + z-index: 2; +} + +.gaugeText { + width: 100%; + text-align: center; + font-size: 24px; + z-index: 2; + position: absolute; + bottom: -30px; /* Adjust this value to move the text further down */ + +} + + +.valueContainer { + display: flex; + justify-content: center; + margin-top: 10px; +} + +#valueText { + font-size: 20px; +} + +.needle { + position: absolute; + margin-bottom: 2%; /* Lower the needle to the bottom */ + left: 50%; + width: 2px; + height: 70%; + background-color: black; + transform-origin: bottom; + z-index: 3; /* Make the needle display above the image */ +} + +.contentContainer { + display: flex; + flex-direction: row; /* Layout children side by side */ + width: 100%; + height: 100%; } \ No newline at end of file