Bugfix: coil code import from json

Author: Grufoony

src/dsf/mobility/RoadNetwork.cpp

@@ -247,14 +247,16 @@ namespace dsf::mobility {
                        name,
                        geometry));
       // Check if there is coilcode property
-      if (!edge_properties.at_key("coilcode").error() &&
-          edge_properties["coilcode"].has_value()) {
-        if (edge_properties["coilcode"].is_string()) {
-          std::string strCoilCode{edge_properties["coilcode"].get_string().value()};
+      if (!edge_properties.at_key("coilcode").error()) {
+        auto const& epCoilCode = edge_properties["coilcode"];
+        if (epCoilCode.is_string()) {
+          std::string strCoilCode{epCoilCode.get_string().value()};
           addCoil(edge_id, strCoilCode);
-        } else if (edge_properties["coilcode"].is_number()) {
-          std::string strCoilCode =
-              std::to_string(edge_properties["coilcode"].get_uint64());
+        } else if (epCoilCode.is_uint64()) {
+          std::string strCoilCode = std::to_string(epCoilCode.get_uint64());
+          addCoil(edge_id, strCoilCode);
+        } else if (epCoilCode.is_int64()) {
+          std::string strCoilCode = std::to_string(epCoilCode.get_int64());
           addCoil(edge_id, strCoilCode);
         } else {
           spdlog::warn("Invalid coilcode for edge {}, adding default", edge_id);

webapp/index.html

@@ -54,7 +54,13 @@
 
   <!-- Slider for time step -->
   <div class="slider-container">
-    <!-- <label for="timeSlider">TimeStamp</label> -->
+    <div class="slider-controls">
+      <button id="playBtn" title="Play/Pause">▶</button>
+      <div class="fps-control">
+        <label for="fpsInput">FPS:</label>
+        <input type="number" id="fpsInput" value="10" min="1" max="60" />
+      </div>
+    </div>
     <input type="range" id="timeSlider" min="0" step="300" value="0" />
     <span id="timeLabel">N/A</span>
   </div>

webapp/script.js

@@ -658,6 +658,12 @@ loadDataBtn.addEventListener('click', async function() {
     // Set up the time slider based on the density data's maximum time value
     const timeSlider = document.getElementById('timeSlider');
     const timeLabel = document.getElementById('timeLabel');
+    const playBtn = document.getElementById('playBtn');
+    const fpsInput = document.getElementById('fpsInput');
+    
+    let isPlaying = false;
+    let playInterval = null;
+
     // Dynamically determine dt from the first two density datapoints
     let dt = 300;
     if (densities.length > 1) {
@@ -668,6 +674,44 @@ loadDataBtn.addEventListener('click', async function() {
     timeSlider.step = dt;
     timeLabel.textContent = `${formatTime(timeStamp)}`;
 
+    function togglePlay() {
+      isPlaying = !isPlaying;
+      playBtn.textContent = isPlaying ? '⏸' : '▶';
+      
+      if (isPlaying) {
+        const fps = parseInt(fpsInput.value) || 10;
+        const interval = 1000 / fps;
+        
+        playInterval = setInterval(() => {
+          let currentValue = parseInt(timeSlider.value);
+          let maxValue = parseInt(timeSlider.max);
+          
+          if (currentValue >= maxValue) {
+            currentValue = 0; // Loop back to start
+          } else {
+            currentValue += dt;
+          }
+          
+          timeSlider.value = currentValue;
+          // Trigger input event manually
+          timeSlider.dispatchEvent(new Event('input'));
+        }, interval);
+      } else {
+        clearInterval(playInterval);
+        playInterval = null;
+      }
+    }
+
+    playBtn.addEventListener('click', togglePlay);
+
+    fpsInput.addEventListener('change', () => {
+      if (isPlaying) {
+        // Restart with new FPS
+        togglePlay(); // Stop
+        togglePlay(); // Start
+      }
+    });
+
     // Update the visualization when the slider value changes
     timeSlider.addEventListener('input', function() {
       const index = Math.floor(parseInt(timeSlider.value) / dt);

webapp/styles.css

@@ -183,4 +183,40 @@ body, html {
   .settings button:hover {
     background: #e8e8e8;
   }
-  
+  
+  .slider-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+
+  #playBtn {
+    background: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    padding: 2px 8px;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #playBtn:hover {
+    background: #f0f0f0;
+  }
+
+  .fps-control {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+  }
+
+  .fps-control input {
+    width: 40px;
+    margin-left: 5px;
+    padding: 2px;
+  }