XProfan

- Página 37 -

p.specht

Nette Spielerei, pero la finale Sinn voluntad se No así bastante erschließen. Sombrero algo de Grabpflege. Natürlich gilt: Wer kann y voluntad, el se dürfen. Aber Yo 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

Der Sinn es sólo una vez a schauen, qué así hacer kann, a CPU-Simulation 3D en el Navegador a bringen.

Dort [...]

en el Abschnitt -Test- CPU-Simulation algunos Grundübungen. Darunter auch Mix de HTML/CSS con WebGl. Das se de three.js unterstützt.

Sin embargo, el algo flach.

Deshalb es una weiterer Test en Arbeit. Como folgt podría el Auswahl el Ensamblador-Mnemonics aussehen:

El wireframe Darstellung dient sólo el Kontrolle, si el Kürzel perfekt en el Abschnitten sitzen. Per raycast se el Auswahl des deseado Befehls realisiert.

01.11.2020 ▲

Michael
W.

Einstellrädchen a Auswahl

8/16/32/64-Bit Register animiert en Bitschiebereien, Bitumschaltungen usw. a beobachten. Auch el Flags animiert.

Evtl. una Extrafeld a Ergebnisse de Stringmanipulationen (XCHG, STOSD, ...) nachverfolgen a puede.

Yo glaube, como ha todavía niemand a 3D pensamiento. Hört se fresco a.

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

01.11.2020 ▲

p.specht

Erst veces el MC860 Microprozessor, el u.a. en el Laptop-Vorläufer el MC-Reihe - u.a. de SHARP - verbaut war. Mir wäre De hecho, el 6502 vom Commodore C64 www.visual6502.org/ más bien, pero la ha ya otra vez a viele Adressierungsvarianten. Bis a una 80x86 oder el Core-i-x Reihe es entonces aber todavía una más Weg. Für el 3D-Programa könnten se jedenfalls Computermuseen interés - como 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

No encima el Ziel hinaus schießen !!!

In el Projektbeschreibung es:

Simulation minimales 8 Bit Prozessorsystem - 256 Byte RAM

Lo va gerade por lo tanto, con un möglichst todavía überschaubarem Sistema el Grundlagen a verdeutlichen.

Selbst el ersten 8 Bit Computer brauchten praktikable 16 Bit Adressen en wirklich Sinnvolles a ermöglichen. Aber außer algunos Gedächtniskünstlern kann keiner 64000 Dinge überschauen. Schon el 256 RAM Speicherzellen mentira encima mi "Merkniveau". Aber con todavía weniger es no, y 8 Bit son el absolute Base. Abgesehen vom reinen Uralt-Taschenrechner, como podría uno sicher con 4 Bit en el Simulation loslegen.

En el Maschinenbefehlen musste Yo largo optimieren, a grundlegenden Befehle unterzubringen. Auch el Register haben sólo überschaubare 8 Bit!

Natürlich Yo mich esta al MC 68000 orientiert, aber como puede ser no simplemente algo tomar. Er es una 16/32 Bit Prozessor.

Yo habe definitiv no antes komplexere, tatsächlich existierende Prozessoren a simulieren.

Das wäre auch seeeeeeeeeeeeeeeeeeeeeeeeeeeeeeehr aufwändig.

02.11.2020 ▲

HofK

So podría se el Band el Ensamblador Mnemonics en flacher Cosinus-Welle de el Hülle wickeln. El Hülle besteht de sieben geschlossenen Flächen, una es offen. Hier todavía seitlich offen y Ziffern-Textur a Kontrolle.

Aunque voluntad Yo el herauswickeln no langsam animieren. Das nervt, si uno nacheinander el Befehle eingeben möchte. Lo muss así flott como con el Listbox bajo Windows ir.

02.11.2020 ▲

HofK

So sieht el aufgewickelte Liste en el Box de. Hier el Box en wireframe en mejor hinein schauen a puede. Muss todavía algo experimentieren, aber eventuell es una mittelmäßig transparente Box con eben solchen Deckeln una gute Solución.

Nun fehlt todavía rápido Aus- y Einwickelung.

06.11.2020 ▲

HofK

Mit Designstudien puede ser bastante viel Tiempo verplbringen.

07.11.2020 ▲

HofK

Antes uno correcto loslegt, son algunos Versuche a Machbarkeit siempre sinnvoll.

Lo zeigt se, dass se como algunos Dinge querstellen.

So es kein Problema el Auswahlbox con Raycast en 3D a bauen y Buttons beliebiger Form a gestalten, aber con el vielen notwendigen Eingaben hay una Problema.

Editierbare Eingabefelder como ellos en el Betriebssystemen y el Browsern realisiert son nachzubauen, es una extra Projekt y no trivial. Posesiones como algo tiefer recherchiert.

Also una neuer Ansatz.

Das Projekt se en zwei Bereiche zerlegt, el ansatzweise auch ya en el XProfan Programa por farbliche Unterscheidung erkennbar son. Aunque hay no konsequent. So erscheint en el farblich helleren CPU una Eingabefeld, si uno el Lauf des Maschinenprogramms anhält. Dort puede ser el Befehlszähler neu conjunto y el Programa se ejecuta de dieser Adresse más.

La idea es, Eingaben el Ablaufsteuerung y el Assemblerprogrammierung unmittelbar mittels HTML/CSS a realisieren y no CSS3DRenderer a benutzen. El CPU, el RAM y el MGA-Display voluntad beim Programmlauf 3D animiert. Ähnlich como beim Projekt el Rahmenkonstruktion voluntad zusätzlich zwei Renderer benutzt y el Bereiche passend, hier aber fest, angeordnet. Dabei überdecken se el HTML/CSS Zona y una Renderer. Im Bild el linke Zona.

En dieser Vorgehensweise podría uno nun el Listbox des Browsers benutzen. Aber ellos es "störrisch". Se puede ellos offenbar no wirklich después de eigenem Willen frei designen.
HTML/CSS Yo bisher para mich siempre sólo en Sparflamme y celebró bin nun en unos pocos Dinge gestoßen, el Yo así no vermutet hatte. El SelectBox se el Optionen betreffend no en el Navegador, pero encima el jeweilige Betriebsystem gerändert. Daher auch el problema beim CSS3DRenderer. Yo habe bastante tief gegraben, viele Hilfskonstruktionen para spezielle Zwecke gefunden aber esta Variante como para mich unbrauchbar verworfen. Also hay una Mix. Eingabe mittels Textfeldern en HTML/CSS, Listbox con three.js por Raycast. En más Elementen como Button y Checkbox ir beide Varianten, como kann Yo mich später festlegen.

El Navegador son doch una bastante inhomogene Angelegenheit, wild gewachsen!

Um el unübersichtliche y wenig flexible HTML Notation a vermeiden ( mag Yo seit ihrer Einführung no, es una Seitenbeschreibung, no Lenguaje de programación) Yo una Función geschrieben y kann así flexibel con el Anordnung experimentieren. El Función puede ser en Bedarf verfeinern.

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

    const elm = document.createElement( element );

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

        elm.style.position ='absolute';

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

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

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

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

                    parent.appendChild( elm );
                    volver elm;

                }

Einrückungen hier no korrekt , como if ( ) sin nachfolgende { }

Damit ha uno una übersichtliche y rápidamente ä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 =' Entrada, 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', 'texto', '#eeeeee', '60px',  '50px', '60px', '14px' );
inputFile.value ='input.hcx';
const outputFile = makeElement( containerLeft,'input', 'texto', '#eeeeee', '60px',  '80px', '60px', '14px' );
outputFile.value ='output.hcx';
const clockSlider = makeElement( containerLeft,'input','range', '#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,'seleccionar', '', '', '60px',  '250px', '100px', '18px' );
mnemonics.options[ 0 ] = new Opción('Testtext0', 'Testvalue0' );
mnemonics.options[ 1 ] = new Opción('Testtext1', 'Testvalue1' );

Hier es todavía el SelectBox con el Optionen enthalten.

20.11.2020 ▲

HofK

Im Bild son ahora vier Varianten uno Auswahlliste a sehen.

Links con unvollständiger Anzahl de Einträgen el Select-Box de Firefox bajo Windows, entonces como Textur en una Box Mesh, danach con definierten Elementen (siehe Codeschnipsel) y zuletzt Textur en una Plane Mesh.

Bajo Chrome y Opera son el Abstände el Einträge el Listbox geringer - inkonsistent y total todavía a groß para mi Zwecke. Auch el Breite se 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', 'O ', '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,'seleccionar', '', '', '60px',  '650px', '100px', '18px' );
mnemonicsSelect.options[ 0 ] = new Opción('NOP', 'NOP' );
mnemonicsSelect.options[ 1 ] = new Opción('CMP', 'CMP' );
mnemonicsSelect.options[ 2 ] = new Opción('SWD', 'SWD' );
mnemonicsSelect.options[ 3 ] = new Opción('SWM', 'SWM' );
mnemonicsSelect.options[ 4 ] = new Opción('MUL', 'MUL' );
mnemonicsSelect.options[ 5 ] = new Opción('DIV', 'DIV' );

El optisch y de el Freiheit el Anordnung her beste Solución es wohl el Variante con el definierten Elementen. El Auswahl es con uno Función

function onContainerLeftMouseDown( event ) {

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

}

en el el Mauskoordinaten como Base el Berechnung dienen.

21.11.2020 ▲