EE2 simulator initial commit

experiment/simulation/css/imgs.css

@@ -48,11 +48,13 @@
     display: none;
     filter:brightness(200);
     position: absolute;
+    z-index: 2000;
 
 }
 .blinkArrowRed{
     display: none;
     position: absolute;
+    z-index: 2000;
 }
 
 .main-window-videos{

experiment/simulation/css/layout.css

@@ -299,10 +299,9 @@ body{
     font-size: 1.0rem;
     position: absolute;
     text-align: justify;
-    background-color: black!important;
+    background-color: black;
     color: white;
     width: 35px;
-    max-width: 50px;
     padding: 0 1px; 
     border-radius: 4px;
 }

experiment/simulation/css/scenes.css

@@ -27,7 +27,8 @@
 .anime-header{
     display: none;
     position: relative;
-    top: 0px
+    top: 0px;
+    z-index: 6000;
 }
 
 /* step2 - project intro */

experiment/simulation/css/sliders.css

@@ -0,0 +1,156 @@
+/* body{
+    background-color: #f1ece3;
+} */
+.universal-slider{
+    position: absolute;
+    top: -60px;
+    left:-30px;
+}
+.universal-slider .slider-circuit{
+    position: relative;
+    left: 8px;
+    top: 8px;
+    z-index: 20;
+}
+.universal-slider .slider .slider_R,.range-slider{
+    position: absolute;
+    left: 557px;
+    top: 115px;
+    z-index: 499;
+    -webkit-appearance: none;
+    appearance: none;
+    transform: rotate(-90deg);
+    width: 80px;
+    height: 30px;
+    height: 10px;
+    border-radius: 5px;
+    /* background: #d3d3d3; */
+    background: transparent;
+    outline: none;
+    opacity: 0.9;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+}
+.universal-slider .slider .slider_R::-webkit-slider-thumb,.range-slider::-webkit-slider-thumb{
+    -webkit-appearance: none;
+    appearance: none;
+    height: 30px;
+    width: 30px;
+    border: 0;
+    transform: rotate(90deg);
+    background: url('../src/images/sliders/slider_tip.png');
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    cursor: pointer;
+
+}
+/* .universal-slider .slider .slider_R::-moz-range-thumb,.range-slider::-moz-range-thumb{
+    -webkit-appearance: none;
+    appearance: none;
+    height: 30px;
+    width: 30px;
+    border: 0;
+    transform: rotate(90deg);
+    background: url('./img/slider_tip.png');
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    cursor: pointer;
+
+} */
+.universal-slider .slider .slider_R:hover,.range-slider:hover{
+    /* background-color: black; */
+    opacity: 1;
+}
+
+.universal-slider .slider .slider_R+img{
+    position: absolute;
+    left: 569px;
+    top: 120px;
+    z-index: 498;
+}
+.universal-slider .slider .value-box{
+    background-color: white;
+    text-align: black;
+    border: 1px solid black;
+    width: fit-content;
+    display: flex;
+    padding: 0 3px;
+}
+.universal-slider .slider .value-box input{
+    border: none;
+    outline: none;
+    width: 30px;
+    font-weight: bold;
+}
+
+
+
+
+/* ! Fix positions of all slider input value */
+.universal-slider .slider .r .value-box{
+    position: absolute;
+    left: 588px;
+    top: 54px;
+    z-index: 500;
+}
+/* slider d */
+.universal-slider .slider .slider_D{
+    transform: rotate(0deg);
+    left: 281px;
+    top: 143.8px;
+    width: 80px;
+    background-color: transparent;
+}
+
+.universal-slider .slider .d .value-box{
+    position: absolute;
+    left: 299px;
+    top: 97px;
+    z-index: 500;
+}
+.universal-slider .slider .slider_D+img{
+    position: absolute;
+    left: 218px;
+    top: 141px;
+    width: 80px;
+    z-index: 10;
+}
+
+/* slider v */
+.universal-slider .slider .v .meter{
+    width: 113px;
+    position: absolute;
+    top: 12px;
+    left: 70px;
+}
+
+.universal-slider .slider .v .slider-V-arrow{
+    width: 35px;
+    cursor: pointer;
+    position: absolute;
+    z-index: 200;
+}
+
+.slider-v-r1{
+    transform: rotate(0deg);
+    top: 65px;
+    left: 100px;
+}
+.slider-v-r2{
+    transform: rotate(50deg);
+    top: 62px;
+    left: 110px;
+}
+.slider-v-r3{
+    transform: rotate(110deg);
+    top: 67px;
+    left: 119px;
+}
+.universal-slider .slider .v .value-box{
+    position: absolute;
+    top: 103px;
+    left: 116px;
+    z-index: 200;
+}

experiment/simulation/helper/GRAPH/graph.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Horizontal Bar Chart with Rotated Y-axis Labels</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
+</head>
+<body>
+    <div style="width: 50%; margin: 100px;">
+        <canvas id="myHorizontalBarChart" height="400" width="300"></canvas>
+    </div>
+
+    <script>
+        var ctx = document.getElementById('myHorizontalBarChart').getContext('2d');
+
+        var data = {
+            labels: ['Data 1', 'Data 2', 'Data 3'],
+            datasets: [
+                {
+                    label: 'Dataset 1',
+                    backgroundColor: 'rgba(255, 0, 0, 1)',
+                    borderColor: 'rgba(255, 0, 0, 1)',
+                    borderWidth: 1,
+                    data: [20, 35, 25]
+                },
+                {
+                    label: 'Dataset 2',
+                    backgroundColor: 'rgba(0, 0, 255, 1)',
+                    borderColor: 'rgba(0, 0, 255, 1)',
+                    borderWidth: 1,
+                    data: [30, 15, 40]
+                },
+                {
+                    label: 'Dataset 3',
+                    backgroundColor: 'rgba(0, 128, 0, 1)',
+                    borderColor: 'rgba(0, 128, 0, 1)',
+                    borderWidth: 1,
+                    data: [10, 20, 30]
+                }
+            ]
+        };
+
+        var options = {
+            maintainAspectRatio: false,
+            scales: {
+                xAxes: [{
+                    ticks: {
+                        fontSize: 17,
+                        fontWeight: 'bold',
+                        fontColor: 'black',
+                        beginAtZero: true
+                    }
+                }],
+                yAxes: [{
+                    ticks: {
+                        fontSize: 17,
+                        fontWeight: 'bold',
+                        fontColor: 'black',
+                        beginAtZero: true
+                    },
+                    position: 'right', // Align y-axis labels to the right side
+                    maxRotation: 90, // Rotate labels to 90 degrees
+                    minRotation: 90,
+                    callback: function(value) {
+                        return value; // You can add custom formatting here if needed
+                    }
+                }]
+            }
+        };
+
+        var myHorizontalBarChart = new Chart(ctx, {
+            type: 'horizontalBar',
+            data: data,
+            options: options
+        });
+    </script>
+</body>
+</html>