ProjectABE EEPROM Companion WIP


I’ve made a basic EEPROM companion for projectABE (see attached screenshot).
Since I can’t upload html files I will include the code itself and instructions:

Step 1: Download the offline version of ProjectABE (here)
Step 2: Go into the “www” subfolder inside the ProjectABE folder
Step 3: Rename “index.html” to “projectABE.html” (some OS’s are case sensitive so be sure to use the same lowercase and uppercase letters shown here.
Step 4: Edit the “projectABE.html” file in your favorite text editor
Step 5: Add the following code into the “<head>” section (right before the line containing “</head>” works)

<script>
    function init()
    {
        window.addEventListener('message', receiver, false);
    }
    function receiver(e)
    {
        if (e.data == "getEEPROM")
        {
            var data = new Uint8Array(1024);
            for (var i = 0; i < 1024; ++i)
                data[i] = EEPROM[i];
            e.source.postMessage(data, "*");
        }
        else
        {
            for (var i = 0; i < 1024; ++i)
                EEPROM[i] = e.data[i];
        }
    }
</script>

Step 6: Create a new “index.html” file and paste the following into it

<html>
    <head>
        <style type="text/css">
            input#loadFile
            {
                border: 2px dashed rgb(192, 192, 192);
                background-color: rgb(224, 224, 224);
                padding: 16px 16px 16px 8px;
                width: 100%;
            }
            div#data
            {
                border: 2px solid rgb(192, 192, 192);
                background-color: rgb(64, 64, 64);
                color: rgb(0, 224, 0);
                font-family: monospace;
                padding: 8px;
            }
        </style>
        <script type="text/javascript">
            function saveEEPROM()
            {
                var link = document.getElementById("downloadLink");
                var data = document.getElementById("data").innerHTML.split(" ");
                var rawData = new Uint8Array(1024);
                for (var i = 0; i < 1024; ++i)
                {
                    rawData[i] = parseInt(data[i], 16);
                }
                var blob = new Blob([rawData], {type: "octet/stream"});
                link.href = window.URL.createObjectURL(blob);
                link.click();
                window.URL.revokeObjectURL(blob);
            }
            function loadEEPROM(data)
            {
                var html = "";
                for (var i = 0; i < data.length; ++i)
                {
                    html += data[i].toString(16).padStart(2, "0").toUpperCase();
                    if (i < data.length - 1)
                        html += " ";
                    //if (i % 16 == 15)
                    //    html += "<br>";
                }
                document.getElementById('data').innerHTML = html;
            }
            function loadFile(data)
            {
                var array = new Uint8Array(1024);
                for (var i = 0; i < 1024; ++i)
                    array[i] = data.charCodeAt(i);
                window.frames["projectABE"].contentWindow.postMessage(array, "*");
                return array;
            }
            function handleFileSelect(evt)
            {
                var reader = new FileReader();
                reader.onload = function(event) {loadEEPROM(loadFile(event.target.result))};
                reader.onerror = function(event) {document.getElementById('data').innerHTML = "File could not be read! Code " + event.target.error.code;};
                reader.readAsBinaryString(evt.target.files[0]);
            }
            function refreshEEPROM()
            {
                window.frames["projectABE"].contentWindow.postMessage("getEEPROM", "*");
            }
            function receiver(e)
            {
                loadEEPROM(e.data);
            }
            function init()
            {
                var html = "";
                document.getElementById('loadFile').addEventListener('change', handleFileSelect, false);
                window.addEventListener('message', receiver, false);
                for (var i = 0; i < 1024; ++i)
                {
                    html += "FF ";
                    if (i % 16 == 15)
                        html += "<br>";
                }
                document.getElementById('data').innerHTML = html;
                window.setInterval(refreshEEPROM, 1000);
            }
        </script>
    </head>
    <body onLoad="init()" style="padding: 0px; margin: 0px;">
        <div style="display: inline-block; width: 375px; height: 99vh; overflow: auto">
            <center><span style="font-size: 18pt;">EEPROM Data</span></center>
            <input type="file" id="loadFile" name="loadFile"/><br/>
            <input type="button" id="refresh" onClick="refreshEEPROM()" value="Refresh"/>
            <input type="button" id="saveButton" onClick="saveEEPROM()" value="Save EEPROM"/><a download="data.eeprom" id="downloadLink" style="display: none">Download</a><br/>
            <div id="data"></div>
        </div>
        <iframe id="projectABE" src="projectABE.html?url=new" style="width: 500px; height: 99vh;border-width: 0px;"></iframe>
    </body>
</html>

Step 7: Now you should be able to launch the projectABE executable (or drag and drop a .hex file onto it) and see the EEPROM viewer on the left (you’ll have to resize the window as projectABE auto-resizes itself but doesn’t include space for the EEPROM viewer).

EEPROM files are binary files containing the raw 1024 bytes of EEPROM data (same as those used with the “ArbyUtility” for Android).

This will provide a decent enough workaround until EEPROM management can be incorporated into the emulator.

7 Likes

Whoah! Mods for the emulator? Nice!

1 Like