beenull/webvm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Svelte: Extend the WebVM component to have graphical output

Browse source
This commit is contained in:
Alessandro Pignotti 2024-10-14 16:39:57 +02:00
parent f7fc244db4
commit c84a38ca02
1 changed files with 20 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/lib/WebVM.svelte
View file

@ -22,8 +22,10 @@
var linkAddon = new WebLinksAddon(); var linkAddon = new WebLinksAddon();
term.loadAddon(linkAddon); term.loadAddon(linkAddon);
var cxReadFunc = null; var cxReadFunc = null;
function writeData(buf) function writeData(buf, vt)
{ {
if(vt != 1)
return;
term.write(new Uint8Array(buf)); term.write(new Uint8Array(buf));
} }
function readData(str) function readData(str)
@ -68,6 +70,14 @@
printMessage(introMessage); printMessage(introMessage);
initCheerpX(); initCheerpX();
} }
function handleActivateConsole(vt)
{
if(vt != 7)
return;
// Raise the display to the foreground
const display = document.getElementById("display");
display.style.zIndex = 10;
}
async function initCheerpX() async function initCheerpX()
{ {
// TODO: Check for SAB support // TODO: Check for SAB support
@ -134,6 +144,12 @@
cx.registerCallback("diskActivity", hddCallback); cx.registerCallback("diskActivity", hddCallback);
term.scrollToBottom(); term.scrollToBottom();
cxReadFunc = cx.setCustomConsole(writeData, term.cols, term.rows); cxReadFunc = cx.setCustomConsole(writeData, term.cols, term.rows);
const display = document.getElementById("display");
if(display)
{
cx.setKmsCanvas(display, 1024, 768);
cx.setActivateConsole(handleActivateConsole);
}
// Run the command in a loop, in case the user exits // Run the command in a loop, in case the user exits
while (true) while (true)
{ {
@ -153,6 +169,9 @@
<Nav /> <Nav />
<div class="absolute top-10 bottom-0 left-0 right-0"> <div class="absolute top-10 bottom-0 left-0 right-0">
<SideBar on:connect={handleConnect}/> <SideBar on:connect={handleConnect}/>
{#if configObj.needsDisplay}
<canvas class="absolute top-0 bottom-0 left-14 right-0" width="1024" height="768" id="display"></canvas>
{/if}
<div class="absolute top-0 bottom-0 left-14 right-0 p-1 scrollbar" id="console"> <div class="absolute top-0 bottom-0 left-14 right-0 p-1 scrollbar" id="console">
</div> </div>
</div> </div>