Wizards

Wizards are dedicated to the creation of step-by-step guides for beginners or end-users. Wizards are inspired by Teachable machine's training wizard demo that walks users through training their machine learning model. Marcelle wizards are more flexible and allow developers to specify what components should be displayed at every step. Therefore, wizards can be used to assist the training but could also guide users in the analysis of the model's result.

Installation

To install the package:

npm

npm install @marcellejs/layouts

yarn

npm add @marcellejs/layouts

pnpm

pnpm add @marcellejs/layouts

To use the package in your app, import both the CSS and the JS constructors:

import '@marcellejs/layouts/dist/marcelle-layouts.css';
import { wizard } from '@marcellejs/layouts';

Wizard

The following factory function creates and returns an empty Wizard:

function wizard(): Wizard;

properties

Name	Type	Description	Hold
$current	Stream<number>	Stream specifying the current page index	✓

Example

const wizard = marcelle.wizard();

wizard
  .page()
  .title('Record examples for class A')
  .description('Hold on the record button to capture training examples for class A')
  .use(input, wizardButton, wizardText)
  .page()
  .title('Record examples for class B')
  .description('Hold on the record button to capture training examples for class B')
  .use(input, wizardButton, wizardText)
  .page()
  .title('Train the model')
  .description('Now that we have collected images, we can train the model from these examples.')
  .use(b, prog)
  .page()
  .title('Test the classifier')
  .description('Reproduce your gestures to test if the classifier works as expected')
  .use([input, plotResults]);

.hide()

hide(): void

Hide the dashboard application. This destroys the current view, if it exists, but preserves the configuration, meaning that the dashboard can still be re-started.

.show()

show(): void

Show the dashboard application. The application, a Svelte component instance, is mounted on the document's body, creating an overlay on the current web page without destroying any content.

.page()

page(): WizardPage

Add a new page to the wizard, and returns the corresponding WizardPage instance.

WizardPage

They are created using the page method of a Dashboard.

.description()

description(desc: string): WizardPage

Specifies the description, or help, of the current step.

.page()

page(): WizardPage

Add a page to the parent wizard.

.title()

title(title: string): WizardPage

Define the title of the step.

.use()

use(...components: Array<Component | Component[] | string>): WizardPage

Add a set of components to the step. The syntax is similar to the one for Dashoards. By default, components are stacked vertically in the right column of the page. Each argument can either be:

• A component Component, displayed full-width on the right column
• An array of component, which are then distributed horizontally
• A string, which defines a section title