Start using fenced code blocks with language identifiers to improve highlighting with GitHub Pages
This commit is contained in:
Jeff Parsons
parent
415e7ed984
commit
2ba7f502c1
12 changed files with 247 additions and 209 deletions
|
|
@ -2,7 +2,7 @@
|
|||
layout: page
|
||||
title: JavaScript Machines
|
||||
menu_title: About
|
||||
menu_order: 10
|
||||
menu_order: 9
|
||||
permalink: /docs/about/
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -26,22 +26,22 @@ experiment!
|
|||
|
||||
### Using C1Pjs
|
||||
|
||||
> **NOTE:** For those of you who never used a *real* Challenger 1P machine, if any of the operational
|
||||
**NOTE:** For those of you who never used a *real* Challenger 1P machine, if any of the operational
|
||||
details of the machine seem bizarre, that's not the simulator's fault. It's how the machine
|
||||
actually operated.
|
||||
|
||||
> Some of those details are artifacts of teletype-based interfaces, which were more common
|
||||
Some of those details are artifacts of teletype-based interfaces, which were more common
|
||||
than a video monitor interface in the 1970's. On a teletype, there was no way to physically
|
||||
erase printed characters, so you had to count underscores to know how many characters had been
|
||||
erased internally.
|
||||
|
||||
> Also, the wide margins on either side of the screen were a side-effect of how the machine
|
||||
Also, the wide margins on either side of the screen were a side-effect of how the machine
|
||||
displayed video on a conventional television set; they helped ensure that no characters would be
|
||||
displayed off-screen and therefore unreadable. As a result, even though the machine contained
|
||||
enough video memory for 32 rows of characters, each with 32 columns, the usable portion was much
|
||||
smaller.
|
||||
|
||||
> The original C1P, with its more modern keyboard and video monitor interface, obviously could
|
||||
The original C1P, with its more modern keyboard and video monitor interface, obviously could
|
||||
have done a better job processing and displaying user input (and in fact, I wrote some
|
||||
machine-language extensions back in the day that did exactly that). And Ohio Scientific did improve
|
||||
later models, but the original C1P functioned exactly as shown, with all its teletype-like
|
||||
|
|
@ -49,18 +49,18 @@ idiosyncrasies and television-related limitations.
|
|||
|
||||
#### Starting the Simulator
|
||||
|
||||
> Press the **RUN** or **BREAK** button to start the C1Pjs Simulator.
|
||||
Press the **RUN** or **BREAK** button to start the C1Pjs Simulator.
|
||||
|
||||
> Press **C** to select a COLD START.
|
||||
Press **C** to select a COLD START.
|
||||
|
||||
> At the MEMORY SIZE prompt, press **Return** to use all available memory.
|
||||
At the MEMORY SIZE prompt, press **Return** to use all available memory.
|
||||
|
||||
> At the TERMINAL WIDTH prompt, press **Return** to select the default screen width.
|
||||
At the TERMINAL WIDTH prompt, press **Return** to select the default screen width.
|
||||
|
||||
> Wait for the BASIC "OK" prompt before using the **Load File** button;
|
||||
Wait for the BASIC "OK" prompt before using the **Load File** button;
|
||||
this will allow the Simulator to automatically "LOAD" and "RUN" the selected program.
|
||||
|
||||
> NOTE: The wide margins on the left and right sides of the screen are normal.
|
||||
NOTE: The wide margins on the left and right sides of the screen are normal.
|
||||
The Challenger 1P's display was organized as 32 rows x 32 columns of text,
|
||||
but its video circuitry lacked a "guard band" feature, which meant that only
|
||||
about 24 characters per line, and 24 total lines, in the center of the screen
|
||||
|
|
@ -71,87 +71,87 @@ eventually want to patch the ROMs to enable 32 characters per row.
|
|||
|
||||
#### Typing in the Simulator
|
||||
|
||||
> The C1P normally uses only upper-case characters and expects its SHIFT-LOCK key to be locked,
|
||||
The C1P normally uses only upper-case characters and expects its SHIFT-LOCK key to be locked,
|
||||
so the Simulator initially locks it, independent of your CAPS-LOCK key.
|
||||
|
||||
> The C1P keyboard lacks characters found on modern keyboards such as ~ and \_.
|
||||
The C1P keyboard lacks characters found on modern keyboards such as ~ and \_.
|
||||
Unsupported keys are simply ignored.
|
||||
|
||||
> Characters can be erased using the **DELETE** key instead of the documented **SHIFT-O**.
|
||||
Characters can be erased using the **DELETE** key instead of the documented **SHIFT-O**.
|
||||
For each character that's erased internally, an underscore is displayed.
|
||||
|
||||
> Lines can be erased using the **@** key instead of the documented **SHIFT-P**.
|
||||
Lines can be erased using the **@** key instead of the documented **SHIFT-P**.
|
||||
|
||||
> The BASIC power operator can be typed using the **^** key instead of the documented **SHIFT-N**;
|
||||
The BASIC power operator can be typed using the **^** key instead of the documented **SHIFT-N**;
|
||||
for example, typing "PRINT 5^2" should display "25".
|
||||
|
||||
> RUN and LIST commands can be aborted by pressing **CTRL-C**, unless the current program has
|
||||
RUN and LIST commands can be aborted by pressing **CTRL-C**, unless the current program has
|
||||
disabled BASIC keyboard polling. Use the BASIC command "POKE 530,0" to re-enable BASIC keyboard polling,
|
||||
or press **BREAK** and then **W** for a WARM START.
|
||||
|
||||
> Pressing **CTRL-O** disables input echo until it is pressed again;
|
||||
Pressing **CTRL-O** disables input echo until it is pressed again;
|
||||
presumably this feature was added to prevent the display of passwords or other sensitive information.
|
||||
|
||||
> If the Simulator is not responding to any keys, try clicking on the black display area to restore focus;
|
||||
If the Simulator is not responding to any keys, try clicking on the black display area to restore focus;
|
||||
if all else fails, press **BREAK** and then **W** for a WARM START.
|
||||
|
||||
#### Operating Tips
|
||||
|
||||
> ##### Using The Control Panel
|
||||
##### Using The Control Panel
|
||||
|
||||
> > Press the **Run** button to start the Simulator; it will change to **Halt** while running.
|
||||
Press the **Run** button to start the Simulator; it will change to **Halt** while running.
|
||||
|
||||
> > Press the **Step** button while the simulated CPU is halted to execute a single instruction;
|
||||
Press the **Step** button while the simulated CPU is halted to execute a single instruction;
|
||||
hold the **Step** button to step through multiple instructions.
|
||||
|
||||
> > Press the **Reset** button to halt and reset the simulated CPU; screen memory will be erased,
|
||||
Press the **Reset** button to halt and reset the simulated CPU; screen memory will be erased,
|
||||
but all other memory will be preserved, permitting a WARM START.
|
||||
|
||||
> > Press the **Load File** button to load the selected BASIC program into the simulated cassette device;
|
||||
Press the **Load File** button to load the selected BASIC program into the simulated cassette device;
|
||||
the Simulator will attempt to automatically "LOAD" and "RUN" the selected program.
|
||||
|
||||
> > Alternatively, use the BASIC "LOAD" command to begin loading a program from the simulated cassette device.
|
||||
Alternatively, use the BASIC "LOAD" command to begin loading a program from the simulated cassette device.
|
||||
Press the spacebar at the end of the "LOAD" operation to restore keyboard control.
|
||||
|
||||
> > Press the **Load Disk** button to mount the selected disk image into the simulated floppy disk drive;
|
||||
Press the **Load Disk** button to mount the selected disk image into the simulated floppy disk drive;
|
||||
press **BREAK** and then **D** to boot from the image and load the OS-65D operating system.
|
||||
|
||||
> ##### Using The Debugger
|
||||
##### Using The Debugger
|
||||
|
||||
> > A built-in Debugger is provided as part of the Control Panel.
|
||||
A built-in Debugger is provided as part of the Control Panel.
|
||||
|
||||
> > Type **?** and then **Enter** to display the list of Debugger commands.
|
||||
Type **?** and then **Enter** to display the list of Debugger commands.
|
||||
|
||||
> > The instruction frequency ("f") and history ("p") commands collect data only while the CPU is
|
||||
The instruction frequency ("f") and history ("p") commands collect data only while the CPU is
|
||||
running (not stepping) and one or more breakpoints have been set; set a dummy execution breakpoint
|
||||
(eg, "bp 0") to enable collection.
|
||||
|
||||
> ##### Controlling The Speed
|
||||
##### Controlling The Speed
|
||||
|
||||
> > The default speed of the simulated CPU is roughly 1Mhz, or one million simulated CPU cycles per second.
|
||||
The default speed of the simulated CPU is roughly 1Mhz, or one million simulated CPU cycles per second.
|
||||
|
||||
> > Press the **FAST** button to allow the Simulator to run as fast as possible; press **SLOW** to return to
|
||||
Press the **FAST** button to allow the Simulator to run as fast as possible; press **SLOW** to return to
|
||||
the default speed of 1Mhz.
|
||||
|
||||
> > Slow computers, as well as browsers with slow JavaScript interpreters, may not be able to achieve 1Mhz operation;
|
||||
Slow computers, as well as browsers with slow JavaScript interpreters, may not be able to achieve 1Mhz operation;
|
||||
in those situations, the speed controls will have no effect.
|
||||
|
||||
### Embedding
|
||||
|
||||
> Want to embed the C1Pjs Simulator on your own web page? Everything you need to know is explained [here](embed/).
|
||||
Want to embed the C1Pjs Simulator on your own web page? Everything you need to know is explained [here](embed/).
|
||||
You can even launch multiple simulations on a single page; check out the C1P "Server Array"
|
||||
[demo](/devices/c1p/machine/8kb/array/).
|
||||
|
||||
### Implementation
|
||||
|
||||
> This computer simulation was written in JavaScript, in part to test the performance limits of web-based applications.
|
||||
This computer simulation was written in JavaScript, in part to test the performance limits of web-based applications.
|
||||
The result was one of the **fastest** JavaScript implementations of a 6502-based computer simulation on the web.
|
||||
|
||||
> This application uses XML to define the machine architecture, XSLT to transform the XML into HTML, and JavaScript
|
||||
This application uses XML to define the machine architecture, XSLT to transform the XML into HTML, and JavaScript
|
||||
to implement the simulation and bind it to the various HTML elements. The C1Pjs screen is implemented using the HTML5
|
||||
<canvas> element, so the application requires a browser that supports HTML5.
|
||||
|
||||
> This application was tested with current versions of Safari, Firefox, Chrome and Internet Explorer. Somewhat less
|
||||
This application was tested with current versions of Safari, Firefox, Chrome and Internet Explorer. Somewhat less
|
||||
current versions will probably work as well, with the exception of Internet Explorer, which did not add support for
|
||||
the <canvas> tag until IE9.
|
||||
|
||||
|
|
|
|||
|
|
@ -18,17 +18,19 @@ Embedding The C1Pjs Simulator
|
|||
|
||||
If you want to read as little as possible, then just paste the following code onto a web page:
|
||||
|
||||
<div id="myC1P"/></div><div style="clear:both"></div>
|
||||
<script type="text/javascript"
|
||||
src="http://www.pcjs.org/versions/c1pjs/1.21.6/c1p.js">
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
window.embedC1P(
|
||||
"myC1P",
|
||||
"http://www.pcjs.org/devices/c1p/machine/8kb/embed/machine.xml",
|
||||
"http://www.pcjs.org/versions/c1pjs/1.21.6/components.xsl"
|
||||
);
|
||||
</script>
|
||||
```html
|
||||
<div id="myC1P"/></div><div style="clear:both"></div>
|
||||
<script type="text/javascript"
|
||||
src="http://www.pcjs.org/versions/c1pjs/1.21.6/c1p.js">
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
window.embedC1P(
|
||||
"myC1P",
|
||||
"http://www.pcjs.org/devices/c1p/machine/8kb/embed/machine.xml",
|
||||
"http://www.pcjs.org/versions/c1pjs/1.21.6/components.xsl"
|
||||
);
|
||||
</script>
|
||||
```
|
||||
|
||||
Otherwise, read on to learn how embedding works, and how you can create your own machine configuration and customize
|
||||
its appearance.
|
||||
|
|
@ -46,37 +48,41 @@ there's no documentation beyond the sample XML files and the default [XML styles
|
|||
|
||||
The example at the top of this page uses an [XML file](/devices/c1p/machine/8kb/embed/machine.xml) that looks like:
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<machine id="OSI" class="c1pjs" border="1" width="272px" pos="right" padleft="16px" padright="16px" padbottom="16px">
|
||||
<computer id="c1p" name="Challenger 1P">
|
||||
<module type="cpu" refid="cpu6502" start="0x0000" end="0xffff"/>
|
||||
<module type="ram" refid="ram8K" start="0x0000" end="0x1fff"/>
|
||||
<module type="rom" refid="romNull" start="0x2000" end="0x9fff"/>
|
||||
<module type="rom" refid="romBasic" start="0xa000" end="0xbfff"/>
|
||||
<module type="video" refid="video" start="0xd000" end="0xd3ff"/>
|
||||
<module type="keyboard" refid="keyboard" start="0xdf00" end="0xdfff"/>
|
||||
<module type="serial" refid="serialPort" start="0xf000" end="0xf0ff"/>
|
||||
<module type="rom" refid="romSystem" start="0xf800" end="0xffff"/>
|
||||
</computer>
|
||||
<cpu id="cpu6502"/>
|
||||
<ram id="ram8K" size="0x2000"/>
|
||||
<rom id="romNull" size="0x8000"/>
|
||||
<rom id="romBasic" size="0x2000" image="http://www.pcjs.org/devices/c1p/rom/basic-gcpatch.hex"/>
|
||||
<rom id="romSystem" size="0x0800" image="http://www.pcjs.org/devices/c1p/rom/system.hex"/>
|
||||
<video id="video" screenwidth="256" screenheight="192" cols="32" rows="32"
|
||||
charset="http://www.pcjs.org/devices/c1p/video/chargen1x.png" padtop="8px" padleft="8px" padbottom="8px"/>
|
||||
<keyboard id="keyboard" pos="center">
|
||||
<control type="button" class="input" binding="ctrl-c">CTRL-C</control>
|
||||
<control type="button" class="input" binding="ctrl-o">CTRL-O</control>
|
||||
<control type="button" class="input" binding="break">BREAK</control>
|
||||
</keyboard>
|
||||
<serial id="serialPort" demo="true"/>
|
||||
</machine>
|
||||
```xml
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<machine id="OSI" class="c1pjs" border="1" width="272px" pos="right" padleft="16px" padright="16px" padbottom="16px">
|
||||
<computer id="c1p" name="Challenger 1P">
|
||||
<module type="cpu" refid="cpu6502" start="0x0000" end="0xffff"/>
|
||||
<module type="ram" refid="ram8K" start="0x0000" end="0x1fff"/>
|
||||
<module type="rom" refid="romNull" start="0x2000" end="0x9fff"/>
|
||||
<module type="rom" refid="romBasic" start="0xa000" end="0xbfff"/>
|
||||
<module type="video" refid="video" start="0xd000" end="0xd3ff"/>
|
||||
<module type="keyboard" refid="keyboard" start="0xdf00" end="0xdfff"/>
|
||||
<module type="serial" refid="serialPort" start="0xf000" end="0xf0ff"/>
|
||||
<module type="rom" refid="romSystem" start="0xf800" end="0xffff"/>
|
||||
</computer>
|
||||
<cpu id="cpu6502"/>
|
||||
<ram id="ram8K" size="0x2000"/>
|
||||
<rom id="romNull" size="0x8000"/>
|
||||
<rom id="romBasic" size="0x2000" image="http://www.pcjs.org/devices/c1p/rom/basic-gcpatch.hex"/>
|
||||
<rom id="romSystem" size="0x0800" image="http://www.pcjs.org/devices/c1p/rom/system.hex"/>
|
||||
<video id="video" screenwidth="256" screenheight="192" cols="32" rows="32"
|
||||
charset="http://www.pcjs.org/devices/c1p/video/chargen1x.png" padtop="8px" padleft="8px" padbottom="8px"/>
|
||||
<keyboard id="keyboard" pos="center">
|
||||
<control type="button" class="input" binding="ctrl-c">CTRL-C</control>
|
||||
<control type="button" class="input" binding="ctrl-o">CTRL-O</control>
|
||||
<control type="button" class="input" binding="break">BREAK</control>
|
||||
</keyboard>
|
||||
<serial id="serialPort" demo="true"/>
|
||||
</machine>
|
||||
```
|
||||
|
||||
Machine configuration files can also be "self-starting" if they contain the following XML stylesheet reference at the
|
||||
top of the file:
|
||||
|
||||
<?xml-stylesheet type="text/xsl" href="http://www.pcjs.org/versions/c1pjs/1.21.6/machine.xsl"?>
|
||||
```xml
|
||||
<?xml-stylesheet type="text/xsl" href="http://www.pcjs.org/versions/c1pjs/1.21.6/machine.xsl"?>
|
||||
```
|
||||
|
||||
For example, here's a self-starting [machine.xml](/devices/c1p/machine/8kb/large/machine.xml) configuration.
|
||||
After it loads, use your browser's "View Source" command and you'll see that it's very similar to the
|
||||
|
|
@ -102,40 +108,46 @@ NOTE: For larger simulator windows (eg, screenwidth of 512 and screenheight of 3
|
|||
If you decide to include the <disk> component, you can simply link to an existing component definition XML file,
|
||||
such as samples.xml:
|
||||
|
||||
<machine id="OSI" border="1" width="272px">
|
||||
<computer id="c1p" name="Challenger 1P">
|
||||
...
|
||||
<module type="ram" refid="ram32K" start="0x0000" end="0x7fff"/>
|
||||
<module type="rom" refid="romNull" start="0x8000" end="0x9fff"/>
|
||||
<module type="rom" refid="romBasic" start="0xa000" end="0xbfff"/>
|
||||
<module type="disk" refid="disk" start="0xc000" end="0xc0ff"/>
|
||||
<module type="video" refid="video" start="0xd000" end="0xd7ff"/>
|
||||
...
|
||||
</computer>
|
||||
...
|
||||
<disk ref="http://www.pcjs.org/apps/c1p/samples.xml"/>
|
||||
...
|
||||
</machine>
|
||||
```xml
|
||||
<machine id="OSI" border="1" width="272px">
|
||||
<computer id="c1p" name="Challenger 1P">
|
||||
...
|
||||
<module type="ram" refid="ram32K" start="0x0000" end="0x7fff"/>
|
||||
<module type="rom" refid="romNull" start="0x8000" end="0x9fff"/>
|
||||
<module type="rom" refid="romBasic" start="0xa000" end="0xbfff"/>
|
||||
<module type="disk" refid="disk" start="0xc000" end="0xc0ff"/>
|
||||
<module type="video" refid="video" start="0xd000" end="0xd7ff"/>
|
||||
...
|
||||
</computer>
|
||||
...
|
||||
<disk ref="http://www.pcjs.org/apps/c1p/samples.xml"/>
|
||||
...
|
||||
</machine>
|
||||
```
|
||||
|
||||
Step 3: Add the C1Pjs Simulator to your web page
|
||||
---
|
||||
Somewhere on your page, you need to add the following **<script>** element:
|
||||
|
||||
<script type="text/javascript" src="http://www.pcjs.org/versions/c1pjs/1.21.6/c1p.js"></script>
|
||||
```html
|
||||
<script type="text/javascript" src="http://www.pcjs.org/versions/c1pjs/1.21.6/c1p.js"></script>
|
||||
```
|
||||
|
||||
To include the C1Pjs Debugger, use [c1p-dbg.js](/versions/c1pjs/1.21.6/c1p-dbg.js) instead of
|
||||
[c1p.js](/versions/c1pjs/1.21.6/c1p.js), and include some additional definitions in your machine
|
||||
definition XML file:
|
||||
|
||||
<machine id="OSI" border="1" width="272px">
|
||||
<computer id="c1p" name="Challenger 1P">
|
||||
...
|
||||
</computer>
|
||||
...
|
||||
<debugger id="debugger"/>
|
||||
<panel ref="http://www.pcjs.org/devices/c1p/panel/default.xml"/>
|
||||
...
|
||||
</machine>
|
||||
```xml
|
||||
<machine id="OSI" border="1" width="272px">
|
||||
<computer id="c1p" name="Challenger 1P">
|
||||
...
|
||||
</computer>
|
||||
...
|
||||
<debugger id="debugger"/>
|
||||
<panel ref="http://www.pcjs.org/devices/c1p/panel/default.xml"/>
|
||||
...
|
||||
</machine>
|
||||
```
|
||||
|
||||
The [Panel](/devices/c1p/panel/default.xml) XML file included above defines a variety of buttons and
|
||||
input/output controls that are bound to the CPU and Debugger components according to their *binding*
|
||||
|
|
@ -149,7 +161,9 @@ Step 4: Activate the C1Pjs Simulator
|
|||
---
|
||||
Add the following to your page's **<body>** element:
|
||||
|
||||
<body onload="window.embedC1P('myC1P','embed.xml')">
|
||||
```html
|
||||
<body onload="window.embedC1P('myC1P','embed.xml')">
|
||||
```
|
||||
|
||||
and insert a **<div id="myC1P"></div>** where you want the simulator to appear.
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ PCjs Documentation
|
|||
|
||||
[PCjs](/docs/about/pcjs/) is a full-featured IBM PC, PC XT and PC AT emulator written entirely in JavaScript.
|
||||
|
||||
After you've read the Documentation, check out with the [Examples](examples/), read the [Source Code](/modules/pcjs/),
|
||||
After you've read the Documentation, check out the [Examples](examples/), read the [Source Code](/modules/pcjs/),
|
||||
and experiment!
|
||||
|
||||
{% include machine.html id="ibm5150" %}
|
||||
|
|
@ -44,58 +44,66 @@ A PCjs machine XML file defines all a machine's components, including:
|
|||
|
||||
Here's a simple machine XML file that includes an 8088 CPU and 16Kb of RAM:
|
||||
|
||||
<machine id="ibm">
|
||||
<computer id="pc" name="IBM PC"/>
|
||||
<cpu id="cpu8088" model="8088"/>
|
||||
<ram id="ramLow" addr="0x00000" size="0x04000"/>
|
||||
</machine>
|
||||
```xml
|
||||
<machine id="ibm">
|
||||
<computer id="pc" name="IBM PC"/>
|
||||
<cpu id="cpu8088" model="8088"/>
|
||||
<ram id="ramLow" addr="0x00000" size="0x04000"/>
|
||||
</machine>
|
||||
```
|
||||
|
||||
However, that machine isn't usable, since it lacks a keyboard, screen, or any code (ROMs) to execute.
|
||||
|
||||
A simple machine definition that actually works might look like:
|
||||
|
||||
<machine id="ibm" class="pc" width="720px">
|
||||
<computer id="pc" name="IBM PC"/>
|
||||
<cpu id="cpu8088" model="8088"/>
|
||||
<ram id="ramLow" addr="0x00000" size="0x04000"/>
|
||||
<rom id="romBASIC" addr="0xf6000" size="0x8000" file="ibm-basic-1.00.json"/>
|
||||
<rom id="romBIOS" addr="0xfe000" size="0x2000" file="1981-04-24.json"/>
|
||||
<keyboard id="keyboard"/>
|
||||
<video id="videoMDA" model="mda" screenwidth="720" screenheight="350" charset="ibm-mda-cga.json">
|
||||
<name>Monochrome Display</name>
|
||||
</video>
|
||||
<chipset id="chipset" model="5150" sw1="01000001" sw2="11110000"/>
|
||||
</machine>
|
||||
```xml
|
||||
<machine id="ibm" class="pc" width="720px">
|
||||
<computer id="pc" name="IBM PC"/>
|
||||
<cpu id="cpu8088" model="8088"/>
|
||||
<ram id="ramLow" addr="0x00000" size="0x04000"/>
|
||||
<rom id="romBASIC" addr="0xf6000" size="0x8000" file="ibm-basic-1.00.json"/>
|
||||
<rom id="romBIOS" addr="0xfe000" size="0x2000" file="1981-04-24.json"/>
|
||||
<keyboard id="keyboard"/>
|
||||
<video id="videoMDA" model="mda" screenwidth="720" screenheight="350" charset="ibm-mda-cga.json">
|
||||
<name>Monochrome Display</name>
|
||||
</video>
|
||||
<chipset id="chipset" model="5150" sw1="01000001" sw2="11110000"/>
|
||||
</machine>
|
||||
```
|
||||
|
||||
Here is an [example](examples/example1.html) of this machine's [XML](examples/example1.xml) file.
|
||||
|
||||
Machine definitions can also include visual elements. For example, we can include a "Run" button with the CPU component.
|
||||
Note that as soon as the machine is ready and the CPU starts running, the "Run" button will change to "Halt".
|
||||
|
||||
<machine id="ibm" class="pc" width="720px">
|
||||
<computer id="pc" name="IBM PC"/>
|
||||
<cpu id="cpu8088" model="8088">
|
||||
<control type="button" class="input" binding="run">Run</control>
|
||||
</cpu>
|
||||
...
|
||||
</machine>
|
||||
```xml
|
||||
<machine id="ibm" class="pc" width="720px">
|
||||
<computer id="pc" name="IBM PC"/>
|
||||
<cpu id="cpu8088" model="8088">
|
||||
<control type="button" class="input" binding="run">Run</control>
|
||||
</cpu>
|
||||
...
|
||||
</machine>
|
||||
```
|
||||
|
||||
Next, we can add a Floppy Disk Controller (FDC) component. And since we want to be able to "load" and "unload" floppy
|
||||
disks at will, we'll include some UI controls.
|
||||
|
||||
<machine id="ibm" class="pc" width="720px">
|
||||
<fdc id="fdcNEC" autoMount="{A: {name: 'PC-DOS 1.0', path: 'pcdos-1.00.json'}}">
|
||||
<control type="container">
|
||||
<control type="list" class="input" binding="listDrives"/>
|
||||
<control type="list" class="input" binding="listDisks">
|
||||
<disk path="">None</disk>
|
||||
<disk path="pcdos-1.00.json">PC-DOS 1.0</disk>
|
||||
</control>
|
||||
<control type="button" class="input" binding="loadDrive">Load</control>
|
||||
</control>
|
||||
</fdc>
|
||||
...
|
||||
</machine>
|
||||
```xml
|
||||
<machine id="ibm" class="pc" width="720px">
|
||||
<fdc id="fdcNEC" autoMount="{A: {name: 'PC-DOS 1.0', path: 'pcdos-1.00.json'}}">
|
||||
<control type="container">
|
||||
<control type="list" class="input" binding="listDrives"/>
|
||||
<control type="list" class="input" binding="listDisks">
|
||||
<disk path="">None</disk>
|
||||
<disk path="pcdos-1.00.json">PC-DOS 1.0</disk>
|
||||
</control>
|
||||
<control type="button" class="input" binding="loadDrive">Load</control>
|
||||
</control>
|
||||
</fdc>
|
||||
...
|
||||
</machine>
|
||||
```
|
||||
|
||||
Here is an [example](examples/example2.html) of the updated machine's [XML](examples/example2.xml)
|
||||
file.
|
||||
|
|
@ -105,11 +113,13 @@ file.
|
|||
Inside a web page, add a <div> to contain the machine, load the *pc.js* script
|
||||
(*pc-dbg.js* if you need the PCjs [Debugger](debugger/)), and then call *embedPC()*:
|
||||
|
||||
<div id="example2"/>
|
||||
<script type="text/javascript" src="pc.js"/>
|
||||
<script type="text/javascript">
|
||||
embedPC("example2", "example2.xml", "components.xsl");
|
||||
</script>
|
||||
```xml
|
||||
<div id="example2"/>
|
||||
<script type="text/javascript" src="pc.js"/>
|
||||
<script type="text/javascript">
|
||||
embedPC("example2", "example2.xml", "components.xsl");
|
||||
</script>
|
||||
```
|
||||
|
||||
In fact, this is exactly what we did in the previous [example](examples/example2.html).
|
||||
|
||||
|
|
@ -131,7 +141,9 @@ machine XML file; eg:
|
|||
*components.css*, which your web page should also load, usually with a <link> tag inside the <head>
|
||||
element; eg:
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="components.css">
|
||||
```xml
|
||||
<link rel="stylesheet" type="text/css" href="components.css">
|
||||
```
|
||||
|
||||
### Using the PCjs Debugger
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue