Custom Steps

InSkill supports custom steps that allow you to build customizable workflows and behaviors. Steps can contain html/javascript to create a web UI or programable logic. Steps have access to the task data, and can save data into the task. Some examples:

UI with multiple input fields to calculate and graph data
Script to call an HTTPS api and save the returned data

Editor Overview

A. Editor Views - Custom steps are edited in the "Advanced" tab and can be previewed using the "Preview" tab

B. Maximize - Maximize/minimize editing window

C. Upload Image - Upload an image and add it to the step body

D. Editors

Visual Editor - Edit step body using visual editor tools (basic formatting, tables, etc.)
Text Editor - Edit step body as raw html (the body will be wrapped into a complete html document with head and body tags. You should not include DOCTYPE, head, or body tags in the step)

Styling Custom Steps

Html styling can be applied to individual steps using style tags in the step body or at the account/product level by uploading a css file in the settings page.

Inline Styles

Account Styles

Product Styles

Scripting

Use script tags to include custom javascript in a step's body

The following Inskill variables/utilities are accessible to scripts defined in the step body via the Inskill namespace.

var Inskill = {
  User: {
    firstname,
    lastname,
    name,
    email
  },
  Session: {
    task: {
      product_id,
      data,
      asset: {
        id,
        sn
    },
    hasData(path, product_id=null),
    getData(path, product_id=null),        // e.g. Inskill.Session.getData('error_code')
    setData(path, value, product_id=null), // e.g. Inskill.Session.setData('error_code', 5);
    uploadImage(name, file),               // upload image and store url via setData
      
    /** commands: continue, finished, end */
    message(command),                 // e.g. Inskill.Session.message({ 'end': '' });
  },
  Utils: {
    empty,
    getData,
    setData,
    pickKeys,
  },
  UI: {
    waitscreen(start=true) /* start/stop wait screen spinner */
	}
};

Examples

// print the task information to console log (works in a browser)
console.log(Inskill.Session.task);

// save data in the task (like any observation)
Inskill.Session.setData('error_code', 5);
Inskill.Session.setData('sensors.pressure', 5);

// Advance task to the next step (like if the user pressed the continue button)
Inskill.Session.message({ 'continue': '' });

// End the task (like if the user pressed the Finished button)
Inskill.Session.message({ 'finished': '' });

// Hide default step buttons (such as continue, not solved, or finished buttons)
Inskill.Session.message({ 'end': '' });


// Display a waitscreen spinner to the user
Inskill.UI.waitscreen(true);

// Stop the waitscreen spinner (after 5 seconds)
 setTimeout(() => Inskill.UI.waitscreen(false), 5000);

// Upload an image and store the url in session data
// name: the variable name to store the url under (same as the path in setData)
// file: a File or Blob object (e.g. from an <input type="file">)
var input = document.getElementById('fileInput');
var result = await Inskill.Session.uploadImage('photo', input.files[0]);
// result.url contains the uploaded image url

Asset specific steps

If a task should do something different depending on the asset used, the following html tag will find a resource named "parts" and replace this step's body with that resource.

<p>my custom step</p>
<inresource name="parts" />

If a resource is not found, nothing happens, so the page can have the default information and an asset can overwrite it with its resource. The resource should be an uploaded file with html just like the rules given above.