UI on screens

Progress, notifications, dialogs, badges and chat that live on a screen.

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

Functions

badge

A small round badge with a count, such as an unread marker.

function badge(o?: BadgeOpts): Badge

Parameter	Type
o?	BadgeOpts

Returns Badge

Options: BadgeOpts

Example

import { Scene, ground } from 'cseen';
import { badge } from 'cseen/ui';

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

Run it in the playground →

chat

A chat: bubbles from you and from them, with typing dots. Animate typeOn per message.

function chat(o?: ChatOpts): Chat

Parameter	Type
o?	ChatOpts

Returns Chat

Options: ChatOpts

Example

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

const s = new Scene();
s.add(ground());
const p = s.add(phone({ at: [0, 0, 0], height: 2.6 }));
p.put(chat({ messages: [{ from: 'them', text: 'Is it live?' }, { from: 'me', text: 'Yes, just now.' }] }), { at: [0.05, 0.1], width: 0.9 });

Run it in the playground →

dialog

A dialog box with a title, a body and buttons.

function dialog(o?: DialogOpts): Dialog

Parameter	Type
o?	DialogOpts

Returns Dialog

Options: DialogOpts

Example

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

const s = new Scene();
s.add(ground());
const m = s.add(monitor({ at: [0, 0, 0], width: 3.4 }));
m.put(dialog({ title: 'Delete project?', body: 'This cannot be undone.', buttons: ['Cancel', 'Delete'], size: [2.4, 1.4] }), { at: [0.2, 0.2], width: 0.6 });

Run it in the playground →

notification

A notification card with a title, a body and an optional icon.

function notification(o?: NotificationOpts): Notification

Parameter	Type
o?	NotificationOpts

Returns Notification

Options: NotificationOpts

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 →

progress

A progress indicator as a bar, a ring or separate segments. Animate value from 0 to 1.

function progress(o?: ProgressOpts): Progress

Parameter	Type
o?	ProgressOpts

Returns Progress

Options: ProgressOpts

Example

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

const s = new Scene();
s.add(ground());
const m = s.add(monitor({ at: [0, 0, 0], width: 3 }));
m.put(progress({ kind: 'bar', label: true }), { at: [0.1, 0.5], width: 0.8 });

Run it in the playground →

toast

A short message in a pill, such as a confirmation.

function toast(o?: ToastOpts): Toast

Parameter	Type
o?	ToastOpts

Returns Toast

Options: ToastOpts

Example

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

const s = new Scene();
s.add(ground());
const m = s.add(monitor({ at: [0, 0, 0], width: 3 }));
m.put(toast({ text: 'Saved' }), { at: [0.3, 0.45], width: 0.4 });

Run it in the playground →

Classes

Badge

The little count on an icon. Animate count; it hides at 0.

new Badge(o?: BadgeOpts): Badge

Options: BadgeOpts

Extends UiNode.

Member	Description
o: BadgeOpts
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

Chat

A conversation: messages from me on the right in the accent colour, from them on the left. shown counts how many messages are visible, so tween(chat, { shown: 3 }) brings them in one by one. While the next message from them has not arrived, three typing dots show where it will appear, then the message replaces them. A long conversation scrolls like a real chat: when the text is already at its smallest and still does not fit, the oldest messages leave.

new Chat(o?: ChatOpts): Chat

Options: ChatOpts

Extends UiNode.

Member	Description
o: ChatOpts
messages: Message[]
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

Dialog

A dialog box with a title, text and buttons. The last button is the main one. pop (0 to 1) opens it.

new Dialog(o?: DialogOpts): Dialog

Options: DialogOpts

Extends UiNode.

Member	Description
o: DialogOpts
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

Notification

A notification card. slide (0 to 1) brings it in from above: animate it with tween(n, { slide: 1 }).

new Notification(o?: NotificationOpts): Notification

Options: NotificationOpts

Extends UiNode.

Member	Description
o: NotificationOpts
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

Progress

A progress indicator. Animate value (0 to 1): tween(p, { value: 1 }, { duration: 2 }).

new Progress(o?: ProgressOpts): Progress

Options: ProgressOpts

Extends UiNode.

Member	Description
o: ProgressOpts
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

Toast

A small pill with one line of text. slide (0 to 1) brings it up from below.

new Toast(o?: ToastOpts): Toast

Options: ToastOpts

Extends UiNode.

Member	Description
o: ToastOpts
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

Options and types

BadgeOpts

Options of badge.

Extends UiOpts.

Option	Type	Default	Description
count?	number		the number shown
role?	string		colour role or CSS colour of the highlights. Default accent.

ChatOpts

Options of chat.

Extends UiOpts.

Option	Type	Default	Description
messages?	Message[]		the conversation so far
typing?	boolean		show typing dots after the last message
role?	string		colour role or CSS colour of the highlights. Default accent.

DialogOpts

Options of dialog.

Extends UiOpts.

Option	Type	Default	Description
title?	string		the heading
body?	string		the message
buttons?	string[]		button labels, the last one is the main action
role?	string		colour role or CSS colour of the highlights. Default accent.

Message

One chat message: who sent it and what it says.

Option	Type	Default	Description
from	'me' | 'them'		who wrote it: me is on the right, them on the left
text	string		what it says

NotificationOpts

Options of notification.

Extends UiOpts.

Option	Type	Default	Description
title?	string		the heading
body?	string		the message
icon?	boolean		show an icon
role?	string		colour role or CSS colour of the highlights. Default accent.

ProgressOpts

Options of progress.

Extends UiOpts.

Option	Type	Default	Description
kind?	'bar' | 'ring' | 'segments'		a bar, a ring, or a bar of separate segments
value?	number		how far along, 0 to 1. Animatable.
label?	string | boolean		show the percentage (true), or your own text
segments?	number		number of segments, for kind ‘segments’
role?	string		colour role or CSS colour of the highlights. Default accent.

ToastOpts

Options of toast.

Extends UiOpts.

Option	Type	Default	Description
text?	string		the message
role?	string		colour role or CSS colour of the highlights. Default accent.

UiOpts

Options shared by everything that lives on a screen.

type UiOpts = SvgPlaneOpts & {
  /** colour role or CSS colour of the highlights. Default accent. */
  role?: string;
}