Merge pull request #18 from virtual-labs/testing

Testing to main

Author: ravikiran2020

experiment/procedure.md

@@ -5,10 +5,25 @@
 3. **Proceed to the Experiment**: Click on **Submit** to begin the experiment with the defined parameters for the clipping window and the line coordinates.
 
 4. **Navigate Through the Experiment**:
-   - Use **Next Iteration** to advance to the next step of the Cohen-Sutherland algorithm, which clips the line segment according to the defined clipping window.
-   - Use **Previous Iteration** to move back to the previous step if needed, allowing you to review each stage of the clipping process.
-   - Use the **Reset** button to clear the current experiment and start new with default parameters for the clipping window and line coordinates.
+   - Use **Next Iteration** to advance through the Cohen-Sutherland algorithm steps:
+     - The algorithm will check if points are inside the clipping window
+     - Compute intersection points with window boundaries
+     - Draw the clipped line segments
+   - Use **Previous Iteration** to move back to the previous step, allowing you to review:
+     - The state of the line at each step
+     - Intersection points computed
+     - Clipping decisions made
+   - Use the **Reset** button to clear the current experiment and start new with default parameters
 
-5. **End of Experiment**: Upon completion of the experiment, you can:
-   - Start a new experiment with different starting and ending coordinates for the line within the same clipping window.
-   - Adjust the parameters of the clipping window to experiment with different clipping scenarios.
+5. **Monitor the Experiment Progress**:
+   - Watch the **Observations** column on the right side for:
+     - Current step message explaining what's happening
+     - Logic text showing the current clipping operation
+     - Point status showing which point is being processed
+     - Line status showing which boundary is being checked
+     - Table showing coordinates of points and intersections
+
+6. **End of Experiment**: Upon completion of the experiment, you can:
+   - Start a new experiment with different starting and ending coordinates for the line within the same clipping window
+   - Adjust the parameters of the clipping window to experiment with different clipping scenarios
+   - Review the final clipped line and all intermediate steps using the Previous Iteration button

experiment/simulation/Vlabs.jar

@@ -1,4 +1,3 @@
-
 .page {
   overflow: hidden;
   margin: 1rem;
@@ -7,21 +6,26 @@
 .text {
   text-align: center;
 }
-.columns{
+
+.columns {
   margin: 0.1vw;
 }
+
 .table-body {
   overflow: auto;
   height: 100%;
 }
+
 .error-text {
   color: red;
   display: none;
   font-size: 12px;
 }
+
 #canvas-wrap {
   position: relative;
-} /* Make this a positioned parent */
+}
+
 .point-div {
   position: absolute;
   display: none;
@@ -33,9 +37,11 @@
   padding: 4px;
   margin: 2px;
 }
+
 .error {
   border: 2px solid red;
 }
+
 .v-canvas-container {
   width: 100%;
   height: 100%;
@@ -67,6 +73,7 @@
 .left {
   order: 1;
 }
+
 .right {
   order: 3;
 }
@@ -84,9 +91,6 @@
 }
 
 .v-datalist-title {
-  /* background-color: #2C9AD1; */
-  /* background-blend-mode: overlay; */
-  /* border-radius: 1rem; */
   border-bottom: 0;
 }
 
@@ -111,33 +115,52 @@
 
 @media screen and (max-width: 768px) {
   /* Adjust columns for mobile screens */
+  .workspace {
+    width: 98%;  /* Match instructions div width */
+    margin: 0 auto;
+    padding: 0 1%;  /* Add small padding on sides */
+  }
+
   .workspace .column {
     margin-bottom: 1rem;
     padding: 0.5rem;
   }
 
+  /* Specific adjustments for left and right columns */
+  #left.column.is-10-mobile {
+    width: 100%;  /* Full width within workspace */
+    margin: 0;  /* Remove auto margins */
+  }
+
+  .right.column.is-10-mobile {
+    width: 100%;  /* Full width within workspace */
+    margin: 0;  /* Remove auto margins */
+  }
+
+  /* Ensure canvas column maintains its width */
+  #canvas-wrap.column.is-12-mobile {
+    width: 100%;  /* Full width within workspace */
+    padding: 0;  /* Remove padding to maximize canvas space */
+  }
+
   /* Specific adjustments */
   #left {
-    order: 1; /* Ensure correct order for mobile layout */
+    order: 1;
   }
 
   .right {
-    order: 2; /* Ensure correct order for mobile layout */
+    order: 2;
   }
 
   .exp {
-    order: 3; /* Ensure correct order for mobile layout */
+    order: 3;
   }
 }
 
-
-
-
 .v-button {
   background-color: #04aa6d;
   border-radius: 0.5rem;
   font-size: small;
-  /* width: 30%; */
 }
 
 .next-btn {
@@ -155,43 +178,40 @@
   border-radius: 0.5rem;
 }
 
-
 #procedure-message {
-    display: none;
-    position: fixed;
-    max-width: 100vw; /* Full width */
-    max-height: 90vh; /* Prevent overflow */
-    overflow-y: auto; /* Scroll if content exceeds height */
-    background: linear-gradient(135deg, #f0f4f8, #d6e1e7); /* Gradient background */
-    z-index: 1000;
-    padding: 35px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* Deeper shadow for more depth */
-    border-radius: 16px; /* Rounded corners for a smoother look */
-    text-align: left;
-    top: 40%; /* Center vertically */
-    left: 50%; /* Center horizontally */
-    transform: translate(-50%, -50%);
-    animation: fadeIn 0.5s ease-out; /* Fade-in animation */
-    border: 2px solid #3498db; /* Border with a light blue color */
-}
-
-/* Add a subtle fade-in animation */
+  display: none;
+  position: fixed;
+  max-width: 100vw;
+  max-height: 90vh;
+  overflow-y: auto;
+  background: linear-gradient(135deg, #f0f4f8, #d6e1e7);
+  z-index: 1000;
+  padding: 35px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  border-radius: 16px;
+  text-align: left;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: fadeIn 0.5s ease-out;
+  border: 2px solid #3498db;
+}
+
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-/* Optional: add hover effect */
 #procedure-message:hover {
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
-    transform: translate(-50%, -50%) scale(1.05); /* Slight zoom effect */
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+  transform: translate(-50%, -50%) scale(1.05);
 }
 
 .instr-font {
-    font-size: 1rem;
-    color: #000;
+  font-size: 1rem;
+  color: #000;
 }

experiment/simulation/css/main.css

@@ -187,6 +187,11 @@
       <div class="v-datalist-container components-list">
         <div class="v-datalist-title">Observations</div>
         <div class="v-datalist-row">
+          <div id="observation-step-message" style="margin-bottom: 8px; color: #333; font-weight: bold;"></div>
+          <div id="text"></div>
+          <div id="logic_text"></div>
+          <div id="pointstat_text"></div>
+          <div id="linestat_text"></div>
           <div class="v-table-wrap">
             <table id="observations-table" class="table is-bordered is-fullwidth">
               <thead id="table-head">
@@ -198,16 +203,13 @@
               <tbody class="table-body"></tbody>
             </table>
           </div>
-          <div id="result"></div>
         </div>
       </div>
     </div>
   </div>
 
-  </div>
-  <script src="js/main.js "></script>
-  <script src="https://cdn.jsdelivr.net/gh/virtual-labs/virtual-style@0.0.8-b/js/script.js "></script>
-
+  <script src="js/main.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/virtual-labs/virtual-style@0.0.8-b/js/script.js"></script>
 </body>
 
 </html>