Devices

Screens, computers, peripherals, network gear and simple solids.

import { ... } from 'cseen/devices';

Functions

antenna

An antenna: a whip on a base, a parabolic dish on a mount, or a lattice tower. Has a signal anchor at the feed that waves attach to.

function antenna(o?: AntennaOpts): Antenna

Parameter	Type
o?	AntennaOpts

Returns Antenna

Options: AntennaOpts

Example

import { Scene, ground } from 'cseen';
import { antenna } from 'cseen/devices';

const s = new Scene();
s.add(ground(), antenna({ at: [0, 0, 0], kind: 'dish', height: 2 }));

Run it in the playground →

See it in the gallery.

browser

A browser window. The page is empty unless you give content (any SVG) or use write / code.

function browser(o?: BrowserOpts): Device

Parameter	Type
o?	BrowserOpts

Returns Device

Options: BrowserOpts

Example

import { Scene, ground } from 'cseen';
import { browser } from 'cseen/devices';

const s = new Scene();
s.add(ground(), browser({ at: [0, 0, 0], width: 4, url: 'example.com' }));

Run it in the playground →

See it in the gallery.

cloud

A cloud made of overlapping balls. Put it up in the air with at: [x, y, z].

function cloud(o?: CloudOpts): Spheres

Parameter	Type
o?	CloudOpts

Returns Spheres

Options: CloudOpts

Example

import { Scene, ground } from 'cseen';
import { cloud } from 'cseen/devices';

const s = new Scene();
s.add(ground(), cloud({ at: [0, 0, 1.5], size: 2.4 }));

Run it in the playground →

See it in the gallery.

cylinder

A cylinder standing on the point at.

function cylinder(o?: CylinderOpts): Group

Parameter	Type
o?	CylinderOpts

Returns Group

Options: CylinderOpts

Example

import { Scene, ground } from 'cseen';
import { cylinder } from 'cseen/devices';

const s = new Scene();
s.add(ground(), cylinder({ at: [0, 0, 0], r: 0.8, h: 1.2 }));

Run it in the playground →

See it in the gallery.

database

The classic database icon: stacked discs.

function database(o?: DatabaseOpts): Group

Parameter	Type
o?	DatabaseOpts

Returns Group

Options: DatabaseOpts

Example

import { Scene, ground } from 'cseen';
import { database } from 'cseen/devices';

const s = new Scene();
s.add(ground(), database({ at: [0, 0, 0], r: 0.9, layers: 3 }));

Run it in the playground →

See it in the gallery.

document

A sheet of paper with a folded corner and lines of text. Stands facing the viewer; rotate it with rot.

function document(o?: DocumentOpts): Plane

Parameter	Type
o?	DocumentOpts

Returns Plane

Options: DocumentOpts

Example

import { Scene, ground } from 'cseen';
import { document } from 'cseen/devices';

const s = new Scene();
s.add(ground(), document({ at: [0, 0, 0], width: 1.6, title: 'notes' }));

Run it in the playground →

See it in the gallery.

keyboard

A keyboard. keyboard({ layout: 'tkl' }), then kb.press('A') or kb.type('hello') to animate it.

function keyboard(o?: KeyboardOpts): Keyboard

Parameter	Type
o?	KeyboardOpts

Returns Keyboard

Options: KeyboardOpts

Example

import { Scene, ground } from 'cseen';
import { keyboard } from 'cseen/devices';

const s = new Scene();
s.add(ground(), keyboard({ at: [0, 0, 0], layout: 'tkl' }));

Run it in the playground →

See it in the gallery.

keyboardLayout

Every key of a layout, with its place. Exported so a layout can be inspected, tested or drawn some other way.

function keyboardLayout(layout?: KeyboardLayout, iso?: boolean): { keys: KeyDef[]; width: number; depth: number; }

Parameter	Type
layout?	KeyboardLayout
iso?	boolean

Returns { keys: KeyDef[]; width: number; depth: number; }

laptop

A laptop, open. lean is how far the lid leans back from upright, in degrees.

function laptop(o?: LaptopOpts): Device

Parameter	Type
o?	LaptopOpts

Returns Device

Options: LaptopOpts

Example

import { Scene, ground } from 'cseen';
import { laptop } from 'cseen/devices';

const s = new Scene();
s.add(ground(), laptop({ at: [0, 0, 0], width: 3.2, lean: 16 }));

Run it in the playground →

See it in the gallery.

micHand

A handheld microphone, lying upright with its head on top. Pick it up with moveTo and rotateTo. at is the bottom of the handle.

function micHand(o?: MicOpts): Group

Parameter	Type
o?	MicOpts

Returns Group

Options: MicOpts

Example

import { Scene, ground } from 'cseen';
import { micHand } from 'cseen/devices';

const s = new Scene();
s.add(ground(), micHand({ at: [0, 0, 0], height: 1.4 }));

Run it in the playground →

See it in the gallery.

micStand

A microphone on a stand: a round base, a pole, a boom arm and the capsule. at is the centre of the base.

function micStand(o?: MicOpts): Group

Parameter	Type
o?	MicOpts

Returns Group

Options: MicOpts

Example

import { Scene, ground } from 'cseen';
import { micStand } from 'cseen/devices';

const s = new Scene();
s.add(ground(), micStand({ at: [0, 0, 0], height: 2.2 }));

Run it in the playground →

See it in the gallery.

monitor

A desktop monitor on a stand. at is the centre of its base.

function monitor(o?: MonitorOpts): Device

Parameter	Type
o?	MonitorOpts

Returns Device

Options: MonitorOpts

Example

import { Scene, ground } from 'cseen';
import { monitor } from 'cseen/devices';

const s = new Scene();
s.add(ground());
const m = s.add(monitor({ at: [0, 0, 0], width: 3 }));
m.write(['hello'], { fontSize: 0.3 });   // a screen is empty until you put something on it

Run it in the playground →

See it in the gallery.

mouse

A computer mouse, pointing away from the viewer (front is -y). at is the centre of its base. Move it with moveTo.

function mouse(o?: MouseOpts): Group

Parameter	Type
o?	MouseOpts

Returns Group

Options: MouseOpts

Example

import { Scene, ground } from 'cseen';
import { mouse } from 'cseen/devices';

const s = new Scene();
s.add(ground(), mouse({ at: [0, 0, 0], length: 1 }));

Run it in the playground →

See it in the gallery.

phone

A phone, upright.

function phone(o?: PhoneOpts): Device

Parameter	Type
o?	PhoneOpts

Returns Device

Options: PhoneOpts

Example

import { Scene, ground } from 'cseen';
import { phone } from 'cseen/devices';
import { notification } from 'cseen/ui';

const s = new Scene();
s.add(ground());
const p = s.add(phone({ at: [0, 0, 0], height: 2.4 }));
p.put(notification({ title: 'Deploy finished', body: 'my.app is live.' }), { at: [0.05, 0.8], width: 0.9 });

Run it in the playground →

See it in the gallery.

photoCamera

A photo camera with a lens, pointing at the viewer. For the abstract camera of a scene, see cameraGlyph.

function photoCamera(o?: PhotoCameraOpts): Group

Parameter	Type
o?	PhotoCameraOpts

Returns Group

Options: PhotoCameraOpts

Example

import { Scene, ground } from 'cseen';
import { photoCamera } from 'cseen/devices';

const s = new Scene();
s.add(ground(), photoCamera({ at: [0, 0, 0], size: 1.5 }));

Run it in the playground →

See it in the gallery.

router

A router with antennas, status lights and ports. Has a signal anchor for waves, and leds you can animate.

function router(o?: RouterOpts): RouterDevice

Parameter	Type
o?	RouterOpts

Returns RouterDevice

Options: RouterOpts

Example

import { Scene, ground } from 'cseen';
import { router } from 'cseen/devices';

const s = new Scene();
s.add(ground(), router({ at: [0, 0, 0], width: 1.8 }));

Run it in the playground →

See it in the gallery.

server

A rack of servers with indicator lights. at is the centre of its base.

function server(o?: ServerOpts): Group

Parameter	Type
o?	ServerOpts

Returns Group

Options: ServerOpts

Example

import { Scene, ground } from 'cseen';
import { server } from 'cseen/devices';

const s = new Scene();
s.add(ground(), server({ at: [0, 0, 0], width: 1.8, units: 3 }));

Run it in the playground →

See it in the gallery.

speaker

A loudspeaker cabinet with a woofer and a tweeter, facing the viewer.

function speaker(o?: SpeakerOpts): Group

Parameter	Type
o?	SpeakerOpts

Returns Group

Options: SpeakerOpts

Example

import { Scene, ground } from 'cseen';
import { speaker } from 'cseen/devices';

const s = new Scene();
s.add(ground(), speaker({ at: [0, 0, 0], height: 1.8 }));

Run it in the playground →

See it in the gallery.

sphere

A shaded sphere resting on the point at.

function sphere(o?: SphereOpts): Surface

Parameter	Type
o?	SphereOpts

Returns Surface

Options: SphereOpts

Example

import { Scene, ground } from 'cseen';
import { sphere } from 'cseen/devices';

const s = new Scene();
s.add(ground(), sphere({ at: [0, 0, 0], r: 0.9 }));

Run it in the playground →

See it in the gallery.

tablet

A tablet, landscape by default, standing on its edge.

function tablet(o?: TabletOpts): Device

Parameter	Type
o?	TabletOpts

Returns Device

Options: TabletOpts

Example

import { Scene, ground } from 'cseen';
import { tablet } from 'cseen/devices';

const s = new Scene();
s.add(ground(), tablet({ at: [0, 0, 0], width: 2.5 }));

Run it in the playground →

See it in the gallery.

terminal

A terminal window with an empty body. Dark in every theme unless light is set. Use write or code to put commands in it.

function terminal(o?: TerminalOpts): Device

Parameter	Type
o?	TerminalOpts

Returns Device

Options: TerminalOpts

Example

import { Scene } from 'cseen';
import { terminal } from 'cseen/devices';

const s = new Scene({ view: 'front' });
const t = s.add(terminal({ at: [0, 0, 0], width: 4, title: 'zsh' }));
t.write(['$ npm install', 'added 1 package'], { cursor: true });

Run it in the playground →

See it in the gallery.

tv

A flat-screen television on two feet.

function tv(o?: TvOpts): Device

Parameter	Type
o?	TvOpts

Returns Device

Options: TvOpts

Example

import { Scene, ground } from 'cseen';
import { tv } from 'cseen/devices';

const s = new Scene();
s.add(ground(), tv({ at: [0, 0, 0], width: 4.4 }));

Run it in the playground →

See it in the gallery.

Classes

Antenna

An antenna. signal is the point waves start from: the tip of a whip, the feed of a dish, the top of a tower.

new Antenna(o?: NodeOpts): Antenna

Extends Group.

Member	Description
signal(): (): V3	where a signal leaves from (and arrives at), as an anchor that follows the antenna
setFeed(p: V3): void	sets the signal point, in the antenna’s own space

Device

A thing with a screen. Its screen starts empty. Put anything on it with write, code, or by passing an SVG as screen. write and code return the text, so you can animate it with typeOn.

new Device(o?: NodeOpts): Device

Extends Group.

Member	Description
screen: { at: V3; size: [number, number]; }	where the screen is, in the device’s own space: its bottom left corner and its size
host: Group	the group the screen lives in (a laptop’s lid, for example)
ink?: string | undefined	default text colour on this screen
put<T extends Node>(el: T & { size: [number, number]; }, o?: { at?: [number, number]; width?: number; }): T	puts an element (a notification, a chat, a progress bar) on the screen. at is where its bottom left corner goes and width how wide it is, both as a fraction of the screen. It keeps its own proportions.
write(text: string | string[], o?: Partial<TextBlockOpts>): TextBlock	writes text on the screen
code(src: string | string[], o?: Partial<TextBlockOpts>): TextBlock	writes coloured code on the screen

Key

A single keycap. press (0 to 1) pushes it down, lit (0 to 1) tints it toward the accent colour.

new Key(def: KeyDef, cap: Cap, role: string, z: number): Key

Extends Node.

Member	Description
def: KeyDef	where this key sits on the board and what it is called
collect(out: Prim[]): void	draws the cap as a top face and four sloped sides. Pressing shortens the cap; lit raises the fill and mixes in the accent.

Keyboard

A keyboard with accurate key sizes and positions and no legends. Keys are found by id: kb.key('A').

new Keyboard(o?: KeyboardOpts): Keyboard

Options: KeyboardOpts

Extends Group.

Member	Description
keys: Map<string, Key>	every key by id
size: [number, number]	width and depth of the board in world units
key(id: string): Key	a key by id, e.g. ‘A’, ‘Enter’, ‘Space’, ‘LShift’, ‘F5’. Throws if there is no such key.
press(id: string, hold?: number): Anim	presses a key down and up again (as an animation)
type(text: string, o?: { gap?: number; hold?: number; }): Anim	types a string: one press per character, so a keyboard can drive a typing animation. Letters and digits map to keys; keys it cannot find are skipped.

RouterDevice

A wifi router with antennas, indicator lights and ports. leds are Dots you can animate; signal is above the antennas.

new RouterDevice(o?: NodeOpts): RouterDevice

Extends Group.

Member	Description
leds: Dot[]
signal(): (): V3	where a signal leaves from (and arrives at), above the antennas, as an anchor that follows the router
setTop(p: V3): void	sets the signal point, in the router’s own space

Options and types

AntennaOpts

Options of antenna.

Extends NodeOpts.

Option	Type	Default	Description
kind?	'whip' | 'dish' | 'tower'		‘whip’ (a pole), ‘dish’ (a parabolic dish on a mount) or ‘tower’ (a lattice mast)
height?	number		height in world units
tilt?	number		dish only: how far the dish is tipped from pointing straight up, in degrees
yaw?	number		dish only: the direction it faces, in degrees around z (0 faces -y, toward the viewer)
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

BrowserOpts

Options of browser.

Extends ScreenOpts.

Option	Type	Default	Description
width?	number		width in world units
url?	string		the address shown in the address bar
ratio?	number		height over width of the screen
content?	string		text shown inside the page

CloudOpts

Options of cloud.

Extends NodeOpts.

Option	Type	Default	Description
size?	number		width in world units
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS
fill?	number		colour strength, 0 to 1
alpha?	number		see-through amount, 0 to 1

CylinderOpts

Options of cylinder.

Extends NodeOpts.

Option	Type	Default	Description
r?	number		radius
h?	number		height
res?	number		number of sides
fill?	number		colour strength, 0 to 1
alpha?	number		see-through amount, 0 to 1
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

DatabaseOpts

Options of database.

Extends NodeOpts.

Option	Type	Default	Description
r?	number		radius
layers?	number		number of stacked discs
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

DocumentOpts

Options of document.

Extends NodeOpts.

Option	Type	Default	Description
width?	number		width in world units
ratio?	number		height over width
title?	string		a heading line
lines?	number		number of lines of text
seed?	number		changes the lengths of the lines of text

KeyboardLayout

A keyboard layout: full (104 keys), tkl (87), 75 or 60.

type KeyboardLayout = 'full' | 'tkl' | '75' | '60'

KeyboardOpts

Options of keyboard.

Extends NodeOpts.

Option	Type	Default	Description
layout?	KeyboardLayout		‘full’ (104 keys), ‘tkl’ (87), ‘75’ or ‘60’
iso?	boolean		the ISO shape for the left shift and the enter key
width?	number		total width in world units. Default is 0.18 per key unit.
tilt?	number		how far the back of the board is raised, in degrees. Desk keyboards have a little.
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

KeyDef

One key: its place on the board in key units (1 is a standard key), measured from the top left.

Option	Type	Default	Description
id	string		the key’s name, for press and lit
x	number		distance from the left edge in key units
y	number		distance from the top edge in key units
w	number		width in key units
h	number		height in key units
row	number		the row it belongs to

LaptopOpts

Options of laptop.

Extends ScreenOpts.

Option	Type	Default	Description
width?	number		width in world units
lean?	number		how far the lid leans back from upright, in degrees

MicOpts

Options of micStand and micHand.

Extends NodeOpts.

Option	Type	Default	Description
height?	number		height in world units
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

MonitorOpts

Options of monitor.

Extends ScreenOpts.

Option	Type	Default	Description
width?	number		width in world units
ratio?	number		height over width of the screen

MouseOpts

Options of mouse.

Extends NodeOpts.

Option	Type	Default	Description
length?	number		length in world units
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS
cable?	boolean		draw a cable

PhoneOpts

Options of phone.

Extends ScreenOpts.

Option	Type	Default	Description
height?	number		height in world units

PhotoCameraOpts

Options of photoCamera.

Extends NodeOpts.

Option	Type	Default	Description
size?	number		size in world units
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

RouterOpts

Options of router.

Extends NodeOpts.

Option	Type	Default	Description
width?	number		width in world units
antennas?	number		number of antennas
leds?	number		number of status lights
ports?	number		number of ports
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

ServerOpts

Options of server.

Extends NodeOpts.

Option	Type	Default	Description
width?	number		width in world units
units?	number		number of rack units
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

SpeakerOpts

Options of speaker.

Extends NodeOpts.

Option	Type	Default	Description
height?	number		height in world units
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

SphereOpts

Options of sphere.

Extends NodeOpts.

Option	Type	Default	Description
r?	number		radius
res?	number		number of segments around
fill?	number		colour strength, 0 to 1
alpha?	number		see-through amount, 0 to 1
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

TabletOpts

Options of tablet.

Extends ScreenOpts.

Option	Type	Default	Description
width?	number		width in world units
ratio?	number		height over width of the screen

TerminalOpts

Options of terminal.

Extends ScreenOpts.

Option	Type	Default	Description
width?	number		width in world units
title?	string		text in the title bar
ratio?	number		height over width of the screen
light?	boolean		a light terminal that follows the theme. By default a terminal stays dark in every theme.

TvOpts

Options of tv.

Extends ScreenOpts.

Option	Type	Default	Description
width?	number		width in world units