Built in Windows

<window>

Creates a window in the scene that you can reference for later actions. You populate the window contents with HTML from a file (or remote URL). Afterwards, you can pass the id of this window to many of the other actions to specify that they should take place in this window.

Attributes

• id - A unique ID that you will use to reference it later.
• title - A title to show in the titlebar.
• contentURL - The location of an HTML file with the contents of the window.
• contentRect - The containing rect of the content (vs. the chrome) in Scene space. It is of the form { origin: { x, y }, size: { width, height } }. You can pass "center" or "offscreen-left"/"offscreen-right"/"offscreen-bottom"/"offscreen-top" to automatically position the window.

const window = require("demokit/window");

<window id = "the-window"
        title = "The Window"
        contentURL = "./path/to/html-file.html"
        contentRect = { { origin: { x: "center", y: 500 }, size: { width: 500, height: 500  } } } />

<terminal>

A window prepopulated to appear like a terminal window. You can use type and paste to simulate interactions with it.

const terminal = require("demokit/window/terminal");

<terminal   id = "terminal"
            contentRect = { { origin: { x: "center", y: 500 }, size: { width: 500, height: 500  } } } />

<using window = "terminal">
    <type>curl <paste>http://google.com</paste></type>
    <type><br pause = { 800 } /><paste>HTTP/1.1 200 OK</paste><br/><paste>$ </paste></type>
</using>

--

<editor>

A window prepopulated to appear like a code editor. You can interact with it normally with type as it uses code-mirror.

Attributes

• source - A source string to display in the editor.
• firstLineNumber (defaults to 1) - A line number to start the file at.

const editor = require("demokit/window/code-editor");

<editor id = "editor"
        source = { fs.readFileSync("./a-code-file.js") }
        contentRect = { { origin: { x: "center", y: 500 }, size: { width: 500, height: 500  } } } />

---

<browser>

A window prepopulated to look like a browser window. Use the contentURL attribute just like in <window> to specify the page to load.

const browser = require("demokit/window/browser");

<browser    id = "browser"
            contentURL = "https://duckduckgo.com"
            contentRect = { { origin: { x: "center", y: 500 }, size: { width: 500, height: 500  } } } />