XProfan

- page 37 -

p.specht

gentille Spielerei, mais qui finale Sinn veux sich Je ne so droite erschließen. Hat quelque chose de Grabpflege. Bien sûr gilt: qui peux et veux, qui soll dürfen. mais je erinnere: "Tempus fugit!"
Gruss

XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...

29.10.2020 ▲

HofK

qui Sinn ist seulement einmal trop regarder, quoi on so faire peux, à CPU-Simulation 3D dans den Browser trop apporter.

là [...]

im paragraphe -Test- CPU-Simulation quelques Grundübungen. au-dessous aussi Mix de HTML/CSS avec WebGl. cela wird de three.js soutenu.

Allerdings c'est moi cela quelque chose flach.

c'est pourquoi est un weiterer Test dans travail. comment folgt pourrait qui sélection qui Assembler-Mnemonics air:

qui wireframe représentation dient seulement qui Kontrolle, si qui Kürzel parfait sur den Abschnitten être assis. Per raycast wird qui sélection des gewünschten Befehls realisiert.

01.11.2020 ▲

Michael
W.

Einstellrädchen zur sélection

8/16/32/64-Bit Register animiert um Bitschiebereien, Bitumschaltungen usw. trop beobachten. aussi qui Flags animiert.

Evtl. un Extrafeld à Ergebnisse de Stringmanipulationen (XCHG, STOSD, ...) nachverfolgen trop peut.

je crois, là hat encore niemand à 3D gedacht. Hört sich cool à.

Alle Sprachen
System: Windows 8/10, XProfan X4
Programmieren, das spannendste Detektivspiel der Welt.

01.11.2020 ▲

p.specht

seulement la fois qui MC860 Microprozessor, qui u.a. im Laptop-Vorläufer qui MC-Reihe - u.a. de SHARP - verbaut était. Mir wäre oui qui 6502 vom Commodore C64 www.visual6502.org/ lieber, mais qui hat encore trop viele Adressierungsvarianten. jusque einem 80x86 ou bien qui Core-i-x Reihe ist ensuite mais encore un plus Weg. Pour cela 3D-Programme könnten sich jedenfalls Computermuseen intéresser - comme Blickfang.
Gruss

Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...

02.11.2020 ▲

HofK

Michael W. (01.11.2020)

STOPP - STOPP - STOPP - STOPP - STOPP - STOPP

p.specht (02.11.2020)

STOPP - STOPP - STOPP - STOPP - STOPP - STOPP

pas sur cela but hinaus schießen !!!

dans qui Projektbeschreibung steht:

Simulation minimales 8 Bit Prozessorsystem - 256 Byte RAM

und dir justement tout autor, avec einem possible encore überschaubarem System qui Grundlagen trop verdeutlichen.

Selbst qui ersten 8 Bit ordinateur brauchten praktikable 16 Bit Adressen um wirklich Sinnvolles trop ermöglichen. mais sauf quelques Gedächtniskünstlern peux aucun 64000 Dinge überschauen. déjà qui 256 RAM Speicherzellen liegen sur meinem "Merkniveau". mais avec encore moins ca va pas, et 8 Bit sommes qui absolute la base. Abgesehen vom reinen Uralt-calculette, là pourrait on sûrement avec 4 Bit dans qui Simulation loslegen.

chez den Maschinenbefehlen musste je longtemps optimaliser, à grundlegenden Befehle unterzubringen. aussi qui Register avons seulement überschaubare 8 Bit!

Bien sûr habe je mich dabei am MC 68000 orientiert, mais là peux on pas simple quelque chose prendre. il est un 16/32 Bit Prozessor.

j'ai définitif pas avant komplexere, réellement existierende Prozessoren trop simulieren.

cela wäre aussi seeeeeeeeeeeeeeeeeeeeeeeeeeeeeeehr aufwändig.

02.11.2020 ▲

HofK

So pourrait sich cela ruban qui Assembler Mnemonics dans flacher Cosinus-onde aus qui Hülle wickeln. qui Hülle besteht aus sept geschlossenen Flächen, une ist offen. ici encore seitlich offen et Les chiffres-Textur zur Kontrolle.

Allerdings werde je cela herauswickeln pas lente animieren. cela nervt, si on nacheinander qui Befehle eingeben voudrais. Es muss so flott comment avec qui Listbox sous Windows aller.

02.11.2020 ▲

HofK

So sieht qui aufgewickelte liste dans qui Box aus. ici qui Box dans wireframe um besser hinein regarder trop peut. Muss et avec ca experimentieren, mais eventuell ist une mittelmäßig transparente Box avec plan solchen Deckeln une gute Solution.

eh bien fehlt encore qui schnelle Aus- et Einwickelung.

06.11.2020 ▲

HofK

avec Designstudien peux on assez viel Zeit Verplapporter.

07.11.2020 ▲

HofK

Bevor on richtig loslegt, sommes quelques Versuche zur Machbarkeit toujours sinnvoll.

Es zeigt sich, dass sich là quelques Dinge querstellen.

So ist es ne...aucune Problem qui Auswahlbox avec Raycast dans 3D trop construire et Buttons beliebiger forme trop gestalten, mais avec den vielen notwendigen Eingaben gibt es un Problem.

Editierbare Eingabefelder comment vous dans den Betriebssystemen et den Browsern realisiert sommes nachzubauen, est un extra projet et pas trivial. Habe là quelque chose tiefer recherchiert.

alors un neuer Ansatz.

cela projet wird dans deux Bereiche zerlegt, qui ansatzweise aussi déjà im XProfan Programme par farbliche Unterscheidung erkennbar sommes. Allerdings là pas konsequent. So erscheint dans qui farblich helleren CPU un Eingabefeld, si on den le cours des Maschinenprogramms anhält. là peux on den Befehlszähler récente mettons et cela Programme fonctionne ab cette Adresse plus.

L'idée ist, Eingaben qui Ablaufsteuerung et qui Assemblerprogrammierung unmittelbar mittels HTML/CSS trop realisieren et keinen CSS3DRenderer trop benutzen. qui CPU, qui RAM et cela MGA-Display volonté beim Programmlauf 3D animiert. Ähnlich comment beim projet qui Rahmenkonstruktion volonté zusätzlich deux Renderer benutzt et qui Bereiche convenable, ici mais fest, angeordnet. Dabei überdecken sich qui HTML/CSS Bereich et un Renderer. Im Bild qui linke Bereich.

chez cette Vorgehensweise pourrait on eh bien qui Listbox des Browsers benutzen. mais vous ist "störrisch". il peut vous évident pas wirklich pour eigenem Willen libre designen.
HTML/CSS habe je bisher pour mich toujours seulement sur Sparflamme gehalten et suis eh bien sur un paire Dinge gestoßen, qui je so pas vermutet hatte. qui SelectBox wird qui Optionen betreffend pas im Browser, mais sur cela jeweilige Betriebsystem gerändert. Daher aussi cela Problem beim CSS3DRenderer. j'ai assez tief gegraben, viele Hilfskonstruktionen pour spezielle Zwecke trouvé mais cet variante comme pour mich inutilisable verworfen. alors gibt es une Mix. Eingabe mittels Textfeldern dans HTML/CSS, Listbox avec three.js per Raycast. chez weiteren Elementen comment Button et Checkbox aller beide Varianten, là peux je mich später festlegen.

qui Browser sommes doch une assez inhomogene Angelegenheit, wild gewachsen!

Um qui unübersichtliche et wenig flexible HTML Notation trop vermeiden ( mag je depuis ihrer introduction pas, ist une Seitenbeschreibung, aucun Programmiersprache) habe je une Funktion geschrieben et peux so flexibel avec qui Anordnung experimentieren. qui Funktion peux on chez besoin verfeinern.

function makeElement( parent, element, type, background, left, top, width, height ) {

    const elm = document.createElement( element );

    si ( type !=='' ) elm.setAttribute( 'type', type );

        elm.style.position ='absolute';

        si ( background !=='' ) elm.style.background = background;

            elm.style.left = left;
            elm.style.top = top;

            si ( width !== undefined ) elm.style.width = width;

                si ( height !== undefined ) elm.style.height = height;

                    parent.appendChild( elm );
                    return elm;

                }

Einrückungen ici pas korrekt , là si ( ) sans nachfolgende { }

avec cela hat on une übersichtliche et vite änderbare Gestaltung.

const containerHead  = makeElement( wrap,'div', '', '#dedede', outerLeft + 'px', outerTop + 'px', widthHead + 'px', heightHead + 'px' );
containerHead.innerHTML ='Project header';
const containerLeft  = makeElement( wrap,'div', '', '#eeeed3', outerLeft + 'px', outerTop + heightHead + 'px', widthLeft + 'px', heightLeft + 'px' );
containerLeft.innerHTML =' Contribution, sequence control and assembler programming';
const containerRight = makeElement( wrap,'div', '', '#fdfde2', outerLeft + widthLeft + 'px', outerTop + heightHead + 'px' );
//containerRight.innerHTML = 'Processor and RAM';
const inputFile  = makeElement( containerLeft,'input', 'text', '#eeeeee', '60px',  '50px', '60px', '14px' );
inputFile.value ='input.hcx';
const outputFile = makeElement( containerLeft,'input', 'text', '#eeeeee', '60px',  '80px', '60px', '14px' );
outputFile.value ='output.hcx';
const clockSlider = makeElement( containerLeft,'input','la gamine', '#33ff33', '80px', '140px', '140px', '14px' );
const clockSpeed =  makeElement( containerLeft,'p',     '', '#ffff33', '20px', '120px', '40px', '16px' );
clockSpeed.innerHTML ='1Hz';
const cacheCheckText = makeElement( wrap,'p', '',  '#d3eed3',  '60px',  '226px',  '50px',  '14px' );
cacheCheckText.innerHTML ='CACHE';
const cacheCheck  = makeElement( containerLeft,'input', 'checkbox', '', '100px',  '180px' );
const deleteFlags = makeElement( containerLeft,'button', '', '', '60px',  '220px', '18px', '18px' );
deleteFlags.innerHTML ='X';
const mnemonics = makeElement( containerLeft,'sélectionner', '', '', '60px',  '250px', '100px', '18px' );
mnemonics.options[ 0 ] = new Option('Testtext0', 'Testvalue0' );
mnemonics.options[ 1 ] = new Option('Testtext1', 'Testvalue1' );

ici ist encore qui SelectBox avec den Optionen enthalten.

20.11.2020 ▲

HofK

Im Bild sommes maintenant quatre Varianten einer Auswahlliste trop voyons.

à gauche avec unvollständiger Anzahl de Entrées qui Select-Box de Firefox sous Windows, ensuite comme Textur sur einem Box Mesh, après avec definierten Elementen (siehe Codeschnipsel) et zuletzt Textur sur einem Plane Mesh.

sous Chrome et Opera sommes qui Abstände qui Einträge qui Listbox geringer - inkonsistent et en tout encore trop grand pour mon Zwecke. aussi qui Breite wird unterschiedlich gehandhabt!

let mnemonics = ['NOP', 'CMP', 'SWD', 'SWM', 'MUL', 'DIV', 'PSA', 'POA', 'JSR', 'RET', 'JIN', 'JIZ', 'JMP', 'LDC', '## ', 'INP', 'OUT', 'PSH', 'POP', 'SSR', 'GSR', 'BTS', 'SWN', 'SHL', 'SHR', 'ROL', 'ROR', 'CLR', 'INC', 'DEC', 'NOT', 'AND', 'OU ', 'ADD', 'SUB', 'MOV', 'LOD', 'STO', 'RCL', 'CPY', 'STP' ];
let mn = [];

for ( let i = 0; i < 41; i ++ ) {

    mn[ i ] = makeElement( containerLeft,'p', '', '#ffffff', '300px',  20 + 14 * i +'px', '40px', '14px' );
    mn[ i ].style.fontSize ='12px';
    mn[ i ].style.textAlign ='left';
    mn[ i ].style.padding ='2px';
    mn[ i ].innerHTML = mnemonics[ i ];

}

const mnemonicsSelect = makeElement( containerLeft,'sélectionner', '', '', '60px',  '650px', '100px', '18px' );
mnemonicsSelect.options[ 0 ] = new Option('NOP', 'NOP' );
mnemonicsSelect.options[ 1 ] = new Option('CMP', 'CMP' );
mnemonicsSelect.options[ 2 ] = new Option('SWD', 'SWD' );
mnemonicsSelect.options[ 3 ] = new Option('SWM', 'SWM' );
mnemonicsSelect.options[ 4 ] = new Option('MUL', 'MUL' );
mnemonicsSelect.options[ 5 ] = new Option('DIV', 'DIV' );

qui optique et de qui Freiheit qui Anordnung her beste Solution ist wohl qui variante avec den definierten Elementen. qui sélection erfolgt avec einer Funktion

function onContainerLeftMouseDown( event ) {

    const x = event.clientX;
    const y = event.clientY;
    ...

}

dans qui qui Mauskoordinaten comme la base qui Berechnung dienen.

21.11.2020 ▲