matgla · matgla · Nov 29, 2024 · Nov 29, 2024
diff --git a/README.md b/README.md
@@ -100,6 +100,26 @@ $global.FIRMWARE=my_awesome_binary.elf
 include @run_firmware.resc
 ```
 
+# Board visualization 
+There is possibility to visualize board using python visualization plugin. 
+> [!IMPORTANT]
+> Only Raspberry Pico based boards are currently supported
+> You can add buttons or leds and they will be automatically registered
+> But totally different boards are not supported yet
+
+To use it create python virtual env, then inside virtualenv:
+```
+pip3 install -r visualization/requirements.txt
+renode --console your_simulation.resc
+
+inside renode console:
+(rasbperry_pico) startVisualization 8080 
+```
+and open localhost:8080 in your web browser.
+
+Current visualization is ugly, but it works!
+
+
 # Multi Node simulation. 
 Many RP2040 simulators may interwork together. I am using that possibility in full MSPC simulation. To interwork between them GPIOConnector may be used, please check existing usage (`simulation` directory):
  [MSPC Board Simulation](https://github.com/matgla/mspc-south-bridge/) 

diff --git a/boards/initialize_custom_board.resc b/boards/initialize_custom_board.resc
@@ -1,8 +1,11 @@
 $machine_name?="raspberry_pico"
+$visualization_path?=$ORIGIN/../visualization
 
 include $ORIGIN/../cores/initialize_peripherals.resc
 machine LoadPlatformDescription $platform_file
 sysbus LoadELF $ORIGIN/../bootroms/rp2040/b2.elf
 
+include $ORIGIN/../visualization/visualization.py 
 
+setVisualizationPath $visualization_path
 
diff --git a/emulation/peripherals/gpio/rp2040_gpio.cs b/emulation/peripherals/gpio/rp2040_gpio.cs
@@ -802,7 +802,7 @@ public bool GetPullUp(int pin)
         public void SetPullDown(int pin, bool state)
         {
             pullDown[pin] = state;
-            if (!IsPinOutput(pin) && state == true)
+            if (state == true)
             {
                 State[pin] = false;
                 Connections[pin].Set(false);
@@ -812,7 +812,7 @@ public void SetPullDown(int pin, bool state)
         public void SetPullUp(int pin, bool state)
         {
             pullUp[pin] = state;
-            if (!IsPinOutput(pin) && state == true)
+            if (state == true)
             {
                 State[pin] = true;
                 Connections[pin].Set(true);
@@ -1247,14 +1247,22 @@ private void EnableInterruptsForCore(int core, int startingPin, ulong value)
                 bool levelLow = (value & (1u << (i * 4))) != 0;
                 if (levelLow)
                 {
-                    this.Log(LogLevel.Noisy, "Enabling level low interrupt for pin: {0}", pin);
+                    this.Log(LogLevel.Noisy, "Enabling level low interrupt for pin: {0}, current: {1}", pin, State[pin]);
+                    if (!State[pin])
+                    {
+                        IRQ[core].Set(true);
+                    }
                 }
                 irqProc[core, pin].LevelLow = levelLow;
 
                 bool levelHigh = (value & (1u << (i * 4 + 1))) != 0;
                 if (levelHigh)
                 {
-                    this.Log(LogLevel.Noisy, "Enabling level high interrupt for pin: {0}", pin);
+                    this.Log(LogLevel.Noisy, "Enabling level high interrupt for pin: {0}, current: {1}", pin, State[pin]);
+                    if (State[pin])
+                    {
+                        IRQ[core].Set(true);
+                    }
                 }
                 irqProc[core, pin].LevelHigh = levelHigh;
 

diff --git a/run_firmware.resc b/run_firmware.resc
@@ -1,5 +1,6 @@
 $machine_name?="rasbperry_pico"
 $platform_file?=$ORIGIN/boards/raspberry_pico.repl
+$visualization_file?=$ORIGIN/visualization/raspberry_pico
 include $ORIGIN/boards/initialize_custom_board.resc
 
 sysbus LoadELF $global.FIRMWARE

diff --git a/visualization/__init__.py b/visualization/__init__.py
diff --git a/visualization/assets/button.svg b/visualization/assets/button.svg
diff --git a/visualization/assets/led.svg b/visualization/assets/led.svg
diff --git a/visualization/index.html b/visualization/index.html
@@ -0,0 +1,23 @@
+<html>
+
+<head>
+  <link rel="stylesheet" href="./raspberry_pico/assets/style.css">
+  <script src="messages.js"> </script>
+</head>
+
+<body>
+  <div id="app">
+    <div id="container">
+      <svg class="board" version="1.1" width="100%" height="100%">
+        <image xlink:href="./raspberry_pico/assets/Raspberry_Pi_Pico_top.jpg" y="0" x="0" preserveAspectRatio="1"
+          height="100%" width="100%" />
+      </svg>
+    </div>
+    <div id="widgets">
+      <div id="leds"> </div>
+      <div id="buttons"> </div>
+    </div>
+  </body>
+
+</html>
+
diff --git a/visualization/led.js b/visualization/led.js
diff --git a/visualization/licenses.txt b/visualization/licenses.txt
@@ -0,0 +1 @@
+raspberry pico - https://commons.wikimedia.org/wiki/File:Raspberry_Pi_Pico_top.jpg
diff --git a/visualization/messages.js b/visualization/messages.js
@@ -0,0 +1,164 @@
+var ws;
+
+i = 0;
+ledColors = ["red", "green", "blue", "orange", "pink"];
+
+function getNextColor() {
+  colorIndex = i++ % ledColors.length;
+  console.log("Getting: ", colorIndex);
+
+  return ledColors[colorIndex];
+}
+
+function changeLedState(led, state, color = null) {
+  svg = led.querySelector("svg");
+  if (svg) {
+    const circle = svg.querySelector("#On");
+    if (circle && !state) {
+      if (circle.style != null) {
+        circle.style.display = "none";
+      }
+    }
+    else if(circle)  {
+      if (circle.style != null) {
+        circle.style.display = "block";
+      }
+    }
+    if (color)
+    {
+    console.log(color, " is ")
+    }
+    if (circle && color != null)
+    {
+      console.log("Setting color: " + color)
+      const bulb = circle.querySelector("circle");
+      if (bulb)
+      {
+        bulb.style.fill = color;
+      }
+    }
+  }
+}
+
+function registerLed(name, state) {
+  if (name == "led") {
+    console.log("adding board led handler");
+    return;
+  }
+  console.log("adding user led: ", name)
+  var ledContainer = document.createElement("div");
+  ledContainer.className = "ledElement"
+
+  var led = document.createElement("div");
+  fetch("./assets/led.svg")
+    .then(response => response.text())
+    .then(svgContent => {
+      led.innerHTML = svgContent
+      led.id = name;
+      led.className = "led";
+      console.log("Adding led");
+      changeLedState(led, state, getNextColor());
+      var ledText = document.createElement("div");
+      ledText.innerHTML += name;  
+      ledContainer.appendChild(ledText)
+      ledContainer.appendChild(led)
+      document.getElementById("leds").appendChild(ledContainer);
+    })
+    .catch(error => console.error("Error loading SVG: ", error));
+}
+
+function sendMessage(obj) {
+  ws.send(JSON.stringify(obj));
+}
+
+function registerButton(name) {
+  var buttonsContainer = document.createElement("div");
+  buttonsContainer.className = "buttonElement";
+  var button = document.createElement("div");
+  button.className = "button";
+  button.id = name;
+
+  fetch("./assets/button.svg")
+    .then(response => response.text())
+    .then(svgContent => {
+      button.innerHTML = svgContent;
+      var buttonText = document.createElement("div");
+      buttonText.innerHTML += name;  
+      buttonsContainer.appendChild(buttonText);
+      buttonsContainer.appendChild(button);
+      document.getElementById("buttons").appendChild(buttonsContainer);
+   })
+   .catch(error => console.error("Error loading SVG: ", error));
+
+  button.addEventListener('mousedown', function () {
+    console.log("Button " + name + " pressed");
+    let message = {
+      "type": "action",
+      "target": "button",
+      "name": name,
+      "action": "press"
+    };
+    sendMessage(message);
+  });
+
+  button.addEventListener('mouseup', function () {
+    console.log("Button " + name + "released");
+    let message = {
+      "type": "action",
+      "target": "button",
+      "name": name,
+      "action": "release"
+    };
+    sendMessage(message);
+  })
+
+  document.getElementById("buttons").appendChild(button);
+}
+
+function ledStateChange(msg) {
+  changeLedState(document.getElementById(msg["name"]), msg["state"]);
+}
+
+function registerAsset(msg) {
+  if (msg["peripheral_type"] == "led") {
+    registerLed(msg["name"], msg["state"]);
+  }
+  if (msg["peripheral_type"] == "button") {
+    registerButton(msg["name"]);
+  }
+}
+
+function processMessage(msg) {
+  if (msg["msg"] == "register") {
+    registerAsset(msg);
+    return;
+  }
+  if (msg["msg"] == "state_change") {
+    ledStateChange(msg);
+    return;
+  }
+  console.log("Got unhandled message: ", msg);
+}
+
+window.addEventListener('DOMContentLoaded', (event) => {
+  let interactive = document.getElementsByClassName("interactive");
+  ws = new WebSocket("ws://" + location.host + "/ws");
+
+  ws.onopen = function () {
+    console.log("WebSocket is open");
+  }
+
+  ws.onmessage = function (e) {
+    const obj = JSON.parse(e.data);
+    processMessage(obj);
+  }
+
+  ws.onclose = function () {
+    console.log("WebSocket is close")
+  }
+
+  ws.onerror = function (e) {
+    console.log("WebSocket error:")
+    console.log(e)
+  }
+})
diff --git a/visualization/raspberry_pico/assets/Raspberry_Pi_Pico_top.jpg b/visualization/raspberry_pico/assets/Raspberry_Pi_Pico_top.jpg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		raspberry pico - https://commons.wikimedia.org/wiki/File:Raspberry_Pi_Pico_top.jpg