inline-svg

<style>
   inline-svg:hover {
      --path-color: green;
   }
</style>

<inline-svg src="test.svg"></inline-svg>

Element Attributes:

src

URL for the SVG

CSS Attributes:

--path-color

Color of SVG path elements

emulator-skin

Surrond the canvas element of an emulator with this element to give it the look of a vintage computer.

<emulator-skin name="macplus">
   <canvas id="screen-area"></canvas>
   <div id="sidebar">
      Additional content can go here
   </div>
</emulator-skin>

Element Attributes:

name

Name of skin (e.g. "macplus")

flush

Set to "right" to push the emulator's screen to the right side of the page

JavaScript Methods:

loadByName(name)

Same as "name" attribute

getNames()

Return an array of names of skins

animated-zoom

Surrounding an emulator's canvas with this element to give it the ability to animate in and out of full screen mode:

<animated-zoom>
   <canvas></canvas>
</animated-zoom>

This element provides no controls for triggering the action. Use this element alone if you intend to build your own user interface, otherwise combine it with emulator-buttons for a complete solution.

JavaScript Methods:

zoomIn()

Zooms the contents to full screen

zoomOut()

Zooms the contents back to the original size

toggleZoom()

Alternates between the zoomed and unzoomed state

isZoomed()

Returns the current zoom state

emulator-buttons (for use with animated-zoom)

Surround an element with emulator-buttons and animated-zoom to give the emulator interactive on-screen buttons:

<animated-zoom>
   <emulator-buttons>
      <canvas></canvas>
   </emulator-buttons>
</animated-zoom>

The buttons will be shown on the emulator's screen when the user hovers over it. The buttons do the following actions:

• Left: Triggers the surrounding animate-zoom into zooming out to full-screen.
• Center: Allows the user to interact with the emulator.
• Right: Triggers a callback function to reset the emulator.

JavaScript Methods:

setRestartAction(callback)

Sets a function to be called when the user clicks the restart button

Credits:

emulator-popups

Shows dialog and status boxes over the emulator.

<div style="position: relative">
   <canvas></canvas>
   <emulator-popups></emulator-popups>
</div>

The various dialog boxes can be triggered by JavaScript and will provide results via callbacks.

JavaScript Methods:

setVisibility(named, visibility)

Shows or hides a named popup

setStatus(status)

Sets the string on the status popup (does not show it)

askForFile(prompt, callback)

Shows the popup asking the user to choose a local file; calls callback with file as an argument

askForRom(callback)

Shows the popup informing the user that a ROM is needed and allowing the user choose one; calls callback with file as an argument

getNames()

Returns an array of popup names

file-icons

Shows icons for mounting disks or triggering actions.

<file-icons>
   <a data-type="type" href="resource-url" data-json="{ ... }"></a>
</file-icons>

Anchor Attributes:

data-type

Select icon type

href

Link to the resource (such as to a disk image)

data-json

Additional configuration data, JSON encoded

Data-Type Values:

• folder
• folder-dot
• boot-hd
• boot-floppy
• floppy
• boot-rom
• rom
• doc
• hyperlink
• download-file
• download-floppy
• upload-file
• upload-floppy
• enter-url
• cassette
• power

Credits:

serial-modem

Uses peer.js to establish a simulated dial up connection through WebRTC between two browser windows (possibly across the world).

Automatically assigns a virtual phone number for the user, implements the Hayes command set for control and supports a terminal widget for interaction.

<serial-modem peer-config='{"key":"your-peerjs-cloud-key"}'>
</serial-modem>

JavaScript Methods:

setReceiveDataCallback(function (data) {...})

Sets a function to be called when data is available from the remote end (when online) or the command interpreter (when in command mode)

sendData(data)

Sends data to the remote end (when online) or the command interpreter (when in command mode)

Element Attributes:

peer-config

JSON string containing option argument for PeerJS Peer object, which generally will contain your PeerJS Cloud key, or connection info for your private PeerServer. Alternatively, you may set RetroWeb.peerJSConfig to a JavaScript object.

class

If "no-terminal" is present, the terminal will be inaccessible.
If "hide-terminal" is present, the terminal will start out hidden and a "Show Terminal" link will be present.