ti2-minirechner-web/mem-vis.html at main · natureFrameworkManager/ti2-minirechner-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Bugsink Error Tracking with Sentry SDK -->
        <script src="js/bundle.tracing.min.js"></script>
        <script src="js/contextlines.min.js"></script>
        <script src="js/captureconsole.min.js"></script>
        <script>
            Sentry.init({
                dsn: "http://7ec7b01388da44d59446d39cda560c79@bugsink.casparkroll.de/1",
                sendDefaultPii: false,
                release: "0.9.0",
                attachStacktrace: true,
                integrations: [Sentry.contextLinesIntegration(), Sentry.captureConsoleIntegration(['warn', 'error'])],
            });
        </script>
        <!-- Umami Analytics -->
        <script defer src="https://analytics.casparkroll.de/script.js" data-website-id="a12b6576-589a-40f0-9c11-8c9709d767b1" data-performance="true" data-do-not-track="true"></script>

        <title>RAM Visualizer</title>
    </head>
    <body>
        <h1>RAM Visualizer</h1>
        <p>This visualizer shows the contents of the RAM in real-time.</p>
        <p>It connects to the memory broadcast channel to receive updates.</p>
        <div id="memory-contents"></div>
        <script>
            const memBC = new BroadcastChannel("memory-channel");
            const memoryContentsDiv = document.getElementById("memory-contents");

            function updateMemoryDisplay(data) {
                let html = "<table border='1'><tr><th>Address</th><th>Value (Hex)</th><th>Value (Binary)</th></tr>";
                for (let i = 0; i < data.length; i++) {
                    html += `<tr><td>${i.toString(16).toUpperCase().padStart(2, '0')}</td><td>${data[i].toString(16).toUpperCase().padStart(2, '0')}</td><td>${data[i].toString(2).padStart(8, '0')}</td></tr>`;
                }
                html += "</table>";
                memoryContentsDiv.innerHTML = html;
            }

            memBC.onmessage = (ev) => {
                if (ev.data.msg === "update" || ev.data.msg == "state") {
                    updateMemoryDisplay(ev.data.data);
                }
            };

            setInterval(() => {
                memBC.postMessage({msg: "request-state"});
            }, 1000);
        </script>
    </body>
</html>