# Data sources

# fileUpload

marcelle.fileUpload(): fileUpload;

A file upload component, that creates a stream of files.

# Streams

Name Type Description Hold
$files Stream<never()> Stream of files

# Example

const myFileUpload = marcelle.fileUpload();
myFileUpload.$files.subscribe((x) => console.log('fileUpload $files:', x));

# imageUpload

marcelle.imageUpload({ width?: number, height?: number }): ImageUpload;

An Image upload component, that creates a stream of images and thumbnails. Images are cropped and rescaled to match the target dimensions, if these are non-zero, otherwise the dimensions are unchanged.

# Parameters

Option Type Description Required Default
width number Target image width 0
height number Target image height 0

# Streams

Name Type Description Hold
$images Stream<ImageData> Stream of images in the ImageData (opens new window) format.
$thumbnails Stream<string> Stream of thumbnail images in base64 dataURI (opens new window) format.

# Screenshot

Screenshot of the imageUpload component

# Example

const imgUpload = marcelle.imageUpload();
imgUpload.$images.subscribe((x) => console.log('imageUpload $images:', x));

# sketchPad

marcelle.sketchpad(): Sketchpad;

An input sketching component allowing the user to draw. The generate generates a stream of images of the sketches, as well as stream for various user actions.

# Streams

Name Type Description Hold
$images Stream<ImageData> Stream of images in the ImageData (opens new window) format.
$thumbnails Stream<string> Stream of thumbnail images in base64 dataURI (opens new window) format.
$strokeStart Stream<undefined> Stream of empty (undefined) events occurring every time the user starts drawing
$strokeEnd Stream<undefined> Stream of empty (undefined) events occurring every time the user stops drawing

# Screenshot

Screenshot of the sketchpad component

# Example

const sketch = marcelle.sketchpad();
sketch.$strokeStart.subscribe(() => console.log('sketchpad $strokeStart'));
sketch.$strokeEnd.subscribe(() => console.log('sketchpad $strokeEnd'));

# webcam

marcelle.webcam({ width?: number, height?: number, period?: number }): Webcam;

A webcam source component, producing a periodic stream of images.

# Parameters

Option Type Description Required Default
width number The target image width 224
height number The target image height 224
period number The period in ms at which images are sampled 50

# Streams

Name Type Description Hold
$images Stream<ImageData> Stream of images in the ImageData (opens new window) format.
$thumbnails Stream<string> Stream of thumbnail images in base64 dataURI (opens new window) format.
$active Stream<boolean> Boolean stream specifying if the webcam is active (streaming)
$ready Stream<boolean> Boolean stream specifying if the webcam is ready
$mediastream Stream<MediaStream> Stream of MediaStream corresponding to the selected webcam. Events are emitted whenever a webcam is selected.

# Screenshot

Screenshot of the webcam component

# Example

const webcam = marcelle.webcam();
webcam.$images.subscribe((x) => console.log('webcam $images:', x));