Skip to content

html: Live Monitor fixes, Power Button, Disk Image mounting #642

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TangoBravo64 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

html: Live Monitor fixes, Power Button, Disk Image mounting #642

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0e5f4f2
Fixed live monitor argument processing.
TangoBravo64 Feb 1, 2026
4d0d7e3
Added power-off button and firmware version to side panel.
TangoBravo64 Jan 14, 2026
3cfeb6d
Remote player accepts and mounts D64/D71/D81 files.
TangoBravo64 Feb 8, 2026
14dd69e
Properly display the Live Monitor's title bar.
TangoBravo64 Feb 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 69 additions & 51 deletions html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,16 @@
$("#logoutmenuitem").hide();
}
$("#banner").html(product + " HTTP Server");

// show power button for supported boards only
const ProductsWithPwrCtrl = ["Ultimate 64-II", "C64 Ultimate"];
if (ProductsWithPwrCtrl.includes(product))
$("#menu-power").show();

// show firmware version in side panel
if (ultimateInfo.firmware_version)
$("#firmware-version").html("firmware v"+ultimateInfo.firmware_version);

$("#left-nav").css("visibility", "visible");
$(".page").hide();
$("#welcome").show();
Expand Down Expand Up @@ -72,7 +82,19 @@
let [status_code, content] = await make_put_request("http://" + serverIP + "/v1/machine:reset", params);
};

$('#doreboot').click(function(event){
async function doPowerOff() {
let params = {};
if (confirm("Are you sure you want to power off your Ultimate?")) {
let [status_code, content] = await make_put_request("http://" + serverIP + "/v1/machine:poweroff", params);
}
};

$('#dopoweroff').click(function(event) {
event.preventDefault(); // Prevents the default action of the anchor tag
doPowerOff();
});

$('#doreboot').click(function(event) {
event.preventDefault(); // Prevents the default action of the anchor tag
doReboot();
});
Expand Down Expand Up @@ -208,9 +230,10 @@
}

// PRG/CRT(/SID) loader
async function submitRunner() {
let body = $('#runnerfile')[0].files[0];
let extension = getFileExtension(body.name);
async function submitRunner(file, drive) {
if (drive === undefined) drive = "a";
if (file === undefined) file = $('#runnerfile')[0].files[0];
let extension = getFileExtension(file.name);
let params = {};
$("#runmsg").hide();

Expand All @@ -221,14 +244,28 @@
route = "/v1/runners:run_crt";
else if (extension === "SID")
route = "/v1/runners:sidplay";
else if (extension === "D64") {
route = `/v1/drives/${drive}:mount`;
params = {"type":"d64"};
}
else if (extension === "D71") {
route = `/v1/drives/${drive}:mount`;
params = {"type":"d71"};
}
else if (extension === "D81") {
route = `/v1/drives/${drive}:mount`;
params = {"type":"d81"};
}
else
alert("Unsupported file extension: '."+ extension.toLowerCase()+"'");

if (route !== null) {
let [status_code, content] = await make_post_request("http://" + serverIP + route, params, body);
let [status_code, content] = await make_post_request("http://" + serverIP + route, params, file);
if(status_code !== 200)
$("#runmsg").show();
}
return status_code == 200;
}
return false;
}

// BASIC/tokenizer page event handlers
Expand Down Expand Up @@ -270,6 +307,8 @@
$('#uppercaseBASIC').on('change', async function (event) {
$("#basiceditor").toggleClass("uppercase", this.checked); // change upper/lowercase display
});
// browser may have cached the checkbox state on a page reload: synchronize the initially displayed state
$("#basiceditor").toggleClass("uppercase", $('#uppercaseBASIC').prop('checked'));

// convenience: write memory - show error message when access fails
async function writeMemory(param, errorMsg) {
Expand Down Expand Up @@ -845,6 +884,7 @@

}, {
checkArity: false,
processArguments: false,
greetings: 'Ultimate 64 / II+ Remote Monitor\nhelp = list of commands\n'
});

Expand Down Expand Up @@ -1380,6 +1420,14 @@
div#left-nav a:hover {
background-color: #beffff;
}
#firmware-version {
font-size: 12px;
color: darkgray;
text-align: center;
}
#menu-power {
display: none;
}
#login {
padding: 20px;
width: 800px;
Expand All @@ -1390,12 +1438,7 @@
width: 800px;
display: none;
}
#livemon {
flex-grow: 1;
padding: 20px;
display:none;
}
#sidplay {
div#livemon, div#sidplay, div#runner, div#tokenizer {
flex-grow: 1;
padding: 20px;
display:none;
Expand All @@ -1415,35 +1458,7 @@
color: #4caf50;
background-color: #f6fff6;
}
#runner {
flex-grow: 1;
padding: 20px;
display:none;
}
#tokenizer {
flex-grow: 1;
padding: 20px;
display:none;
}
#sidmsg {
flex-grow: 1;
margin-top: 20px;
padding: 20px;
display:none;
background-color: red;
color: white;
width: 400px;
}
#runmsg {
flex-grow: 1;
margin-top: 20px;
padding: 20px;
display:none;
background-color: red;
color: white;
width: 400px;
}
#basicmsg {
#sidmsg, #runmsg, #basicmsg {
flex-grow: 1;
margin-top: 20px;
padding: 20px;
Expand All @@ -1469,7 +1484,7 @@
margin: 5px 0;
}

@font-face {
@font-face {
font-family: 'C64';
src: url('C64_Pro-STYLE.woff') format('woff'); /* Path to your C64 font file */
}
Expand All @@ -1492,7 +1507,7 @@
line-height: 1.5;
width: 900px;
height: 400px;
resize: none;
resize: both;
}

.trinity-dialog {
Expand Down Expand Up @@ -1523,8 +1538,10 @@
}
.trinity-dialog header .title {
margin-top: -2px;
background: var(--color);
background: rgb(160, 182, 247);
padding: 1px 10px;
top: -6px;
left: -2px;
}
.trinity-dialog header {
background: var(--color);
Expand Down Expand Up @@ -1579,9 +1596,10 @@
<li><a id="showtokenizer" href="#">BASIC Editor</a></li>
</ul>
<ul>
<li><a id="doreset" href="#">Reset Machine</a></li>
<li><a id="doreboot" href="#">Reboot Machine</a></li>
<li><a id="domenubutton" href="#">Menu Button</a></li>
<li><a id="doreset" href="#" title="Reset the C64...">Reset Machine</a></li>
<li><a id="doreboot" href="#" title="Reboot the C64...">Reboot Machine</a></li>
<li id="menu-power"><a id="dopoweroff" href="#" title="Standby/Switch off the Ultimate...">Power Off Machine</a></li>
<li><a id="domenubutton" href="#" title="Show menu...">Menu Button</a></li>
</ul>
<ul>
<li><a href="https://1541u-documentation.readthedocs.io/en/latest/api/api_calls.html" target="_blank" rel="noopener">API Documentation</a></li>
Expand All @@ -1590,6 +1608,7 @@
<ul id="logoutmenuitem">
<li><a id="logout" href="#">Logout</a></li>
</ul>
<div id="firmware-version"></div>
</div>

<div id="login" class="page">
Expand Down Expand Up @@ -1642,7 +1661,7 @@ <h1>PRG / CRT Executor</h1>
<br />
or press button to browse
<br /><br />
<input type="file" id="runnerfile" name="file" accept=".prg,.crt,.PRG,.CRT,.sid,.SID" title="Select PRG/CRT/SID file to be run">
<input type="file" id="runnerfile" name="file" accept=".prg,.crt,.sid,.d64,.d71,.d81,.PRG,.CRT,.SID,.D64,.D71,.D81" title="Select PRG/CRT/SID file to be run">
<br /><br />
<input type="button" id="runnersubmit" value="Run Again!" title="Upload and RUN the selected file again">
</div>
Expand All @@ -1652,14 +1671,13 @@ <h1>PRG / CRT Executor</h1>

<div id="livemon" class="page">
<h1>Live Monitor</h1>
<p>Below is a simple 6510 monitor attached to your U64 or UII+.</p>
<p>Remotely inspect and debug the 6510 CPU of your U64 or UII+.</p>
<div id="terminal" class="trinity-dialog">
<header>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<span class="title">Ultimate 64 Monitor</span>
</ul>
<span class="title">Ultimate 64</span>
</header>
<div class="body"></div>
</div>
Expand Down