Simulator PicoBlazea u JavaScriptu

[teo1]

Pozdrav svima!
2020. godine postojala je mogućnost da se laboratorijske vježbe na FERIT-u budu morale održavati od kuće. Na svu sreću, do toga nije došlo. No, zbog toga me je profesor Arhitekture računala na FERIT-u, Ivan Aleksi, zamolio da napravim asembler i emulator za PicoBlaze (malo računalo koje proizvodi Xilinx koje se koristi kao primjer jednostavnog računala na kolegiju Arhitektura računala na FERIT-u) koji se može vrtjeti u internetskom pregledniku, da se laboratorijske vježbe iz Arhitekture računala lako mogu održati od kuće. I napravio sam ga, mislim da je najstariji internetski preglednik u kojem se on može vrtjeti Firefox 52 (posljednja verzija Firefoxa koja se može vrtjeti na Windows XP-u i verzija Firefoxa koja se dobije uz Oracle Solaris 11.4).
Međutim, s njime ima nekih problema koje nisam uspio sam riješiti:

1. Layout se pokida u većini mobilnih preglednika, najviše u Firefoxu za Android, kad se prijeđe u landscape način rada.
2. Primjer PicoBlaze programa "Decimal to Binary" (drugi primjer s lijeva) pokušao sam pokrenuti na pravom PicoBlazeu, ali nisam uspio. Jednostavno nije reagirao ni na što što sam tipkao na UART terminalu. Nisam uspio točnije dijagnosticirati problem, čak ni to je li problem u mom programu ili u načinu na koji sam namjestio PicoBlaze.
3. Dok sam, tri godine nakon što sam napravio taj simulator PicoBlazea, pisao primjer programa "Regbanks-Flags Test" (sedmi s lijeva), primjetio sam da se heksadekadske konstante `a`, `b` i `c` bojaju krivo, kao da su "flags". Primjerice, ovaj komad koda:

address 0
load s0, 0
load s0, a
regbank a

Oboji se ovako:

A to je netočno. `a` u `load s0, a` je heksadekadska konstanta, i treba biti obojana kao i token `0` u `load s0, 0`. Za sada je work-around da se, kada je `a` heksadekadska konstanta, umjesto `a` piše `0a`. Da budem jasan, oba se asembliraju ispravno, samo se oboje krivo.
4. Ne znam kako se zastavice na pravom PicoBlazeu ponašaju kada se promijeni regbank. Ima li PicoBlaze zasebne zastavice za svaki regbank (kao što ima Z80), ili svi regbanki koriste iste zastavice? Na primjer, uzmimo u obzir ovaj programski kod:

regbank a
load s0, 0
sub  s0, 0
regbank b
load s0, 1
sub  s0, 0
regbank a
jump z , success
jump nz, failure

Hoće li on skočiti na label `success` ili na label `failure`? U mom simulatoru PicoBlazea (u primjeru programa "Regbanks-Flags Test", sedmi primjer s lijeva), on skače na `success`, i mislim da će tako biti i na pravom PicoBlazeu, ali nisam siguran. Otvorio sam to pitanje na StackOverflowu i nisam do sada dobio nikakav odgovor.
5. Zašto je taj moj simulator PicoBlazea toliko spor u usporedbi s drugim simulatorima PicoBlazea?

Također, bih li mogao napraviti da se asemblerski kod boja dok ga korisnik tipka, a ne samo kada korisnik stisne gumb "Highlight Assembly"? Otvorio sam to pitanje na StackOverflowu i dobio sam nekakav odgovor, ali sumnjam da je to što on predlaže najbolje rješenje.
Dokumentacija za moj asembler i emulator PicoBlazea dostupna je na hrvatskom jeziku, u slučaju da nekome koristi.
Svaka pomoć je dobrodošla. Taj asembler i emulator PicoBlazea je moj završni rad, a ostao mi je još samo jedan kolegij prije njega (Osnove automatskog upravljanja). Source code možete vidjeti tako da ga otvorite i pritisnete CTRL+U, a možete ga i vidjeti na GitHubu. Nisu korišteni nikakvi frameworksi, ni za CSS ni za JavaScript, tako da to ne predstavlja barrier to entry. Program je oko 3'500 redaka.

[sali]

teo1 kaže:

4. Ne znam kako se zastavice na pravom PicoBlazeu ponašaju kada se promijeni regbank. Ima li PicoBlaze zasebne zastavice za svaki regbank (kao što ima Z80), ili svi regbanki koriste iste zastavice?

chatGPT javlja da picoBlaze ima samo jedan set zastavica, i uvijek se odnose na trenutno aktivni regbank
rekao bih da zastavice ovise isključivo o statusu prethodne operacije, izmjena regbanka ne utiče na zastavice, što znači da možeš izmijeniti regbank, i nastaviti koristiti prethodno (zatečeno) stanje zastavica

picoblaze/6 ima dva seta (regbank) od po 16 8bitnih registara, registru se može dodijeliti alias ime

[ruka-slave]

teo1 kaže:

Također, bih li mogao napraviti da se asemblerski kod boja dok ga korisnik tipka, a ne samo kada korisnik stisne gumb "Highlight Assembly"? Otvorio sam to pitanje na StackOverflowu i dobio sam nekakav odgovor, ali sumnjam da je to što on predlaže najbolje rješenje.
Dokumentacija za moj asembler i emulator PicoBlazea dostupna je na hrvatskom jeziku, u slučaju da nekome koristi.

Bilo koji pametniji editor ti već odavna može raditi higlight sintakse/ključnih riječi dok korisnik tipka u masu programskihjezika, uključujući asemblere. Primjer:
https://en.wikipedia.org/wiki/Multi-Edit

Ono što je bitno je da ubaciš u njega sintax rules za konkretni jezik. Za asembler je to dosta jednostavno.

Teoretski bi se dalo označiti i petlje, potprograme, prenošenje parametara i sl. dakle kompletna provjera sintakse, samo je za to nužno emulirati u editoru kompilator/asembler.

[teo1]

sali kaže:

chatGPT javlja da picoBlaze ima samo jedan set zastavica, i uvijek se odnose na trenutno aktivni regbank
rekao bih da zastavice ovise isključivo o statusu prethodne operacije, izmjena regbanka ne utiče na zastavice, što znači da možeš izmijeniti regbank, i nastaviti koristiti prethodno (zatečeno) stanje zastavica

picoblaze/6 ima dva seta (regbank) od po 16 8bitnih registara, registru se može dodijeliti alias ime

Pravilo je da nikad ne koristiš ChatGPT za stvari u koje se ne razumiješ, jer nikad ne znaš kad halucinira. Jedini način da znamo zasigurno je da napravimo eksperiment na pravom PicoBlazeu. Recimo, da pokrenemo moj program "Regbanks-Flags Test" na pravom PicoBlazeu spojenom na UART terminal i vidimo što će ispisati.

[sali]

teo1 kaže:

Pravilo je da nikad ne koristiš ChatGPT za stvari u koje se ne razumiješ, jer nikad ne znaš kad halucinira. Jedini način da znamo zasigurno je da napravimo eksperiment na pravom PicoBlazeu. Recimo, da pokrenemo moj program "Regbanks-Flags Test" na pravom PicoBlazeu spojenom na UART terminal i vidimo što će ispisati.

chatGPT sam naveo iz šale (mada zna dati ideju u kom smjeru istraživati), u zbilji sam provjerio drugu relevantnu dokumentaciju
nemam fizički pristup picoblaze uređaju, a svaki emulator uvodi svoj nivo nepouzdanosti i neodređenosti

[teo1]

ruka-slave kaže:

Bilo koji pametniji editor ti već odavna može raditi higlight sintakse/ključnih riječi dok korisnik tipka u masu programskihjezika, uključujući asemblere. Primjer:

https://en.wikipedia.org/wiki/Multi-Edit



Ono što je bitno je da ubaciš u njega sintax rules za konkretni jezik. Za asembler je to dosta jednostavno.



Teoretski bi se dalo označiti i petlje, potprograme, prenošenje parametara i sl. dakle kompletna provjera sintakse, samo je za to nužno emulirati u editoru kompilator/asembler.

Ali problem je kako mu to zadati u JavaScriptu. Postavljanje `innerHTML` od `contenteditable` elementa vraća mu kursor na početak, a moj pokušaj da vratim kursor tamo gdje je bio ne funkcionira.

Poslano sa mog SM-J330F koristeći Tapatalk

[sali]

teo1 kaže:

Ali problem je kako mu to zadati u JavaScriptu. Postavljanje `innerHTML` od `contenteditable` elementa vraća mu kursor na početak, a moj pokušaj da vratim kursor tamo gdje je bio ne funkcionira.

chatGPT predlaže da se sa range.setStart postavi željena lokacija kursora unutar objekta (innerHTML), naravno prvo se ista (lokacija) spremi

[teo1]

sali kaže:

chatGPT predlaže da se sa range.setStart postavi željena lokacija kursora unutar objekta (innerHTML), naravno prvo se ista (lokacija) spremi

To sam i ja pokušao, pa nije išlo. Otvorio sam pitanje na StackOverflowu o tome.

Poslano sa mog SM-J330F koristeći Tapatalk

[sali]

teo1 kaže:

To sam i ja pokušao, pa nije išlo. Otvorio sam pitanje na StackOverflowu o tome.

zašto bi čekao da neko odgovori, samo potražiš, čini se jednostavno za riješiti taj problemčić ...
https://konstantin.digital/blog/how-...itable-element
link o toj temi se nađe za 3 minute, bildam neku aplikaciju, pa sam pogledao dok čekam ...

[teo1]

sali kaže:

zašto bi čekao da neko odgovori, samo potražiš, čini se jednostavno za riješiti taj problemčić ...

https://konstantin.digital/blog/how-...itable-element

link o toj temi se nađe za 3 minute, bildam neku aplikaciju, pa sam pogledao dok čekam ...

Ha, kao prvo, taj članak je napisan 2022. godine, i nisam ga mogao naći 2020. godine kad sam radio svoj simulator PicoBlazea. Kao drugo, pregledao sam ga malo, i ne razumijem ga. Možda je jezična barijera u pitanju.

Poslano sa mog SM-J330F koristeći Tapatalk

[sali]

teo1 kaže:

taj članak je napisan 2022. godine, i nisam ga mogao naći 2020. godine kad sam radio svoj simulator PicoBlazea

članak je samo ilustracija, prvi kojeg je pretraga izbacila, samo sam htio podsjetiti da DOM tehnologija (već desetak godina) podržava traženje i postavljanje pozicije kursora unutar editabilnog elementa

[ruka-slave]

Nisam odmah shvatio da si sam pisao editor, jer to je nešto sasvim drugo. Oko pozicioniranja kursora u JS ti ne mogu pomoći.

==============

Glede flagova kod zamjene registara. Na manualu za v6
https://www.eng.auburn.edu/~nelson/c...aze/kcpsm6.pdf

na strani 6 se vidi shema veza, gdje komande za zamjenu registara nisu u istom skupu s onima koje utječu na flagove (Carry, Zero, Int.en.). Dakle izvršenje naredbe zamjene registara ne bi smjelo afektiari sadržaje flagova. Smisao je da obaviš instrukciju koja afektira flag, zamijeniš registre a u b, pozoveš potprogram koji ispita stanje flagova i nešto obavi, vratiš rezultat u registrima b, i onda nastaviš dalje. Esencijalno, zamjena registara služi za prijenos parametara i/ili keširanje podataka. Naravno, to se mora isprobati.

==============

Glede syntax higlihtinga, to je esencijano alat za provjeru ispravnosti osnova sintakse, dakle bukvalno "line parser". (ili multiline za naredbe u više redaka).

Možeš ga napraviti na više načina:
1. Okidanje provjere na zahtjev.
2. Okidanje provjere na kraju naredbenog retka(tj. nakon unošenja "terminal sign")
3. Provjera dok tipkaš.

Ovaj treći način je najteži za izvesti, jer podrazumijeva da će ti "pozadinski" syntax checker kontrolirati doslovce svaku tipku koju pritiskaš. Što nije problem ako znaš što radiš.

Konkretni problem s regbank naredbom i koloriranjem atributa - regbank, ako sam dobro vidio, jedina je koja barata s cijelim skupom registara, koji se, nezgodno, zovu "A"/"a" i "B"/"b". Što je nešto sasvim drugo od numeričke vrijednosti A/a, B/b, ili pak memorijske lokacije A/a, B/b. Esnecijalno imaš dvije naredbe - "regbank a" i "regbank b" koje se 1:1 translatiraju u binarnu formu tipa 1111 1100 i 1111 1101.

U biti keyword koji prehodi a, b itd. određuje da li se radi o nazivu registra, numeričkoj vrijednosti ili memorijskoj lokaciji. Dakle, krajnje pojednostavljene sintaktičke jendažbe imaju strukturu:

<keyword> [p1] ["s" [q1]] [; comment]

<keyword> je obavezan za izvršnu naredbu (koja procesuira kod).
[p1] opcionalni prvi parametar
["s"] opcionalni separator od drugog parametra
[q1] opcionalni drugi parameter (treći, četvrti...)
[;...] opcionalni komentar

Dalj treba raspisati za svaki skup naredbi i skup parametara.

To zalazi u pitanje parsiranja formalnih izraza, a ne znam kako si ti to izveo. Čak i u varijanti (3) je to trivijalno, ali, opet, ne znam kkao si to izveo, da li
- uvođenjem formalnog parsera gdje imaš odvojene defincije parsabilnih elemenata u npr nekoj tekst fajli/headeru,
- ili ad hoc "if then else" skup naredbi.

Pretpostavljam ovo drugo, jer je prvo dosta složenije, iako puno općenitije, i ne bi stalo u neki omanji program.

Dakle, da bih mogao dati savjet oko syntax highlightinga/checkinga, morao bih znati kako isti obavljaš.(tj.checking, highlighting je posljedica)

[teo1]

@ruka-slave Evo ti izvorni kôd mog parsera za PicoBlaze asembler, ako ti to šta pomaže.

Poslano sa mog SM-J330F koristeći Tapatalk

[teo1]

sali kaže:

članak je samo ilustracija, prvi kojeg je pretraga izbacila, samo sam htio podsjetiti da DOM tehnologija (već desetak godina) podržava traženje i postavljanje pozicije kursora unutar editabilnog elementa

Hoće li to funkcionirati u WebPositiveu, koji (izgleda) ne podržava monospace fontove? WebPositive je jedini browser na HaikuOS-u u kojem se moj simulator PicoBlazea može koristiti, i ne bih želio slomiti kompatibilnost s njime. Otter ne podržava dovoljno JavaScripta da pokrene moj simulator PicoBlazea.

Poslano sa mog SM-J330F koristeći Tapatalk

[teo1]

Našao sam još jedan bug u sintaksnom highlighteru. Naime, moj sintaksni highlighter nakon znakova veće od (`>`) i manje od (`<`) umeće točku-zarez (`;`), čineći programe koji sadrže te znakove sintaksno netočnima. Primjer toga imate na GitHubu: https://github.com/FlatAssembler/Pic...in_JS/issues/7

[teo1]

Izgleda da je zapravo najproblematičniji dio mog PicoBlaze Simulatora upravo syntax highlighter asemblerskog koda. Evo njegovog izvornog koda:

function highlightToken(token) {
  if (token[0] === ";")
    return `<span class="comment">${token}</span>`;
  for (const mnemonic of mnemonics)
    if (RegExp("^" + mnemonic + "$", "i").test(token) ||
        /^interrupt$/i.test(token))
      return `<span class="mnemonic">${token}</span>`;
  for (const directive of preprocessor)
    if (RegExp("^" + directive + "$", "i").test(token))
      return `<span class="directive">${token}</span>`;
  if (/^s(\d|[a-f])$/i.test(token))
    return `<span class="register">${token}</span>`;
  if (/^N?[CZAB]$/i.test(token))
    // TODO: This actually sometimes incorrectly highlights "a" as
    // a flag, when it is in fact a hexadecimal constant. You can
    // read more about it here:
    // https://github.com/FlatAssembler/PicoBlaze_Simulator_in_JS/issues/6
    return `<span class="flag">${token}</span>`;
  if (/:$/.test(token))
    return `<span class="label">${token}</span>`;
  if (token[0] === '"')
    return `<span class="string">${token}</span>`;
  if (/^(\d|[a-f])+$/i.test(token) || /\'d$/.test(token) || /\'b$/.test(token))
    return `<span class="number">${token}</span>`;
  return token;
}
function syntaxHighlighter(/*edit*/) {
  //"edit" should contain the cursor position, but that seems not to work.
  // I have opened a StackOverflow question about that:
  // https://stackoverflow.com/q/76566400/8902065
  if (areWeHighlighting)
    return;
  areWeHighlighting = true;
  const assemblyCodeDiv = document.getElementById("assemblyCode");
  const assemblyCode =
      assemblyCodeDiv.innerText.replace(/&/g, "&amp;")
          .replace(
              /</g,
              "&lt;") // This appears to cause this bug:
                      // https://github.com/FlatAssembler/PicoBlaze_Simulator_in_JS/issues/7
          .replace(/>/g, "&gt;");
  // const start=edit.selectionStart,
  //  end=edit.selectionEnd; //Cursor position.
  if (assemblyCode.indexOf("&") != -1) {
    alert(
        "Sorry about that, but syntax highlighting of the programs containing `<`, `&`, and `>` is not supported yet.");
    areWeHighlighting = false;
    return;
  }
  let areWeInAString = false;
  let areWeInAComment = false;
  let currentToken = "";
  let highlightedText = "";
  for (let i = 0; i < assemblyCode.length; i++) {
    if (assemblyCode[i] === ";" && !areWeInAString) {
      highlightedText += highlightToken(currentToken);
      currentToken = ";";
      areWeInAComment = true;
      continue;
    }
    if (areWeInAComment && assemblyCode[i] !== "\n") {
      currentToken += assemblyCode[i];
      continue;
    }
    if (assemblyCode[i] === "\n") {
      areWeInAString = false;
      areWeInAComment = false;
      highlightedText += highlightToken(currentToken) + "<br/>";
      currentToken = "";
      continue;
    }
    if (assemblyCode[i] === ":" && !areWeInAString) {
      highlightedText += highlightToken(currentToken + assemblyCode[i]);
      currentToken = "";
      continue;
    }
    if ((assemblyCode[i] === " " || assemblyCode[i] === "\t" ||
         assemblyCode[i] === "," || assemblyCode[i] === "+" ||
         assemblyCode[i] === "-" || assemblyCode[i] === "*" ||
         assemblyCode[i] === "/" || assemblyCode[i] === "^") &&
        !areWeInAString) {
      highlightedText += highlightToken(currentToken) + assemblyCode[i];
      currentToken = "";
      continue;
    }
    if (assemblyCode[i] === '"' && !areWeInAString) {
      highlightedText += highlightToken(currentToken);
      currentToken = '"';
      areWeInAString = true;
      continue;
    }
    if ((assemblyCode[i] === "(" || assemblyCode[i] === ")" ||
         assemblyCode[i] === "[" || assemblyCode[i] === "]" ||
         assemblyCode[i] === "{" || assemblyCode[i] === "}") &&
        !areWeInAString) {
      highlightedText += highlightToken(currentToken) +
                         '<span class="parenthesis">' + assemblyCode[i] +
                         "</span>";
      currentToken = "";
      continue;
    }
    if (assemblyCode[i] !== '"') {
      currentToken += assemblyCode[i];
      continue;
    }
    if (assemblyCode[i] === '"' && areWeInAString) {
      highlightedText += highlightToken(currentToken + '"');
      currentToken = "";
      areWeInAString = false;
    }
  }
  highlightedText += highlightToken(currentToken);
  assemblyCodeDiv.innerHTML = highlightedText;
  // The following code is supposed to move the cursor to the correct
  // position, but it doesn't work.
  /*
  const range=document.createRange();
  range.setStart(assemblyCodeDiv,start);
  range.setEnd(assemblyCodeDiv,end);
  const selection=window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  */
  setUpLineNumbers();
  areWeHighlighting = false;
}

[teo1]

Noćas sam se dosjetio kako da pojednostavim algoritam parsiranja PicoBlaze asemblera, a da rezultat ostane isti. I te sam izmjene implementirao: https://github.com/FlatAssembler/Pic...ster/parser.js

[teo1]

Naišao sam na jedan veoma neobičan bug u svom simulatoru PicoBlazea: https://github.com/FlatAssembler/Pic...in_JS/issues/8
Ukoliko je UART disabliran, pretprocesor ignorira naredbu `disable a` (za dodavanje znaka za novi red na terminal za vrijeme asembliranja). Ne znam kako pretprocesor uopće može znati je li UART enabliran ili disabliran. Pokušao sam reproducirati problem u nekakvom minimalnom primjeru (koji postavlja innerHTML od skrivenog <pre>-a prije nego što se taj <pre> prikaže), pa nisam uspio. Ukratko, ne znam što se zbiva u tom mom programu što sam većinom napisao prije 3 godine, i nemam pojma što da dalje radim (kako da točnije dijagnosticiram problem).

[teo1]

U međuvremenu, korisnik GitHuba agustiza otkrio je i ispravio jedan bug u jezgri simulatora, u tome kako je implementirana sra bit-shifting naredba. A nakon toga smo napravili neke automatske testove koristeći JEST framework.

[teo1]

Izmijenio sam header svog simulatora PicoBlazea da spominje Aguina Izaguirrea kao autora. Pretpostavljam da će taj simulator izgledati profesionalnije ukoliko je odmah očito da je riječ o internacionalnom open-source projektu. I možda motivira još nekog da nam se pridruži.