Freehand Drawing Editor

Description
How to use it

Description

Freehand Drawing Editors can be created in Build.One using he SwatFreeHand object types. The SimpleSwatFreeHand is a painting control where users can draw freehand elements. You can choose the thickness of the pen and the colour. You can also save the drawing to a dataset and recall it.

Scratchpad object in a screen

How to use it

Add the SimpleSwatFreehand control to a panel
Add a Toolbar to the same panel
Change the “Attributes” for the attribute “Toolbarkey” and fill in “FreeHandMenu”
Connect the Toolbar with the SimpleSwatFreehand with TableIO
Connect a datasoruce to the SimpleSwatFreehand
Add a typescript file to your screen and add the following functions (All functions are fully configurable through this file )

function getFreeHandWidget(eventSource: akioma.swat.Toolbar): akioma.swat.FreeHand | undefined {
  return eventSource.window.getFirstChildByType<akioma.swat.FreeHand>('freeHand');
}

export function saveFreeHand(eventSource: akioma.swat.Toolbar) {
  const widget = getFreeHandWidget(eventSource);
  widget?.save();
}

export function undoFreeHand(eventSource: akioma.swat.Toolbar) {
  const widget = getFreeHandWidget(eventSource);
  widget?.undo();
}

export function redoFreeHand(eventSource: akioma.swat.Toolbar) {
  const widget = getFreeHandWidget(eventSource);
  widget?.redo();
}

export function resetFreeHand(eventSource: akioma.swat.Toolbar) {
  const widget = getFreeHandWidget(eventSource);
  widget?.reset();
}

export function addTextFreeHand(eventSource: akioma.swat.Toolbar) {
  const widget = getFreeHandWidget(eventSource);
  widget?.addText();
}

export function selectStrokeColorFreeHand(eventSource: akioma.swat.Toolbar) {
  const widget = getFreeHandWidget(eventSource);
  const event = eventSource.dynObject.akEvent;
  const value = event.payload.itemName;
  widget?.selectStrokeColor(value);
}

export function selectStrokeSizeFreeHand(eventSource: akioma.swat.Toolbar) {
  const widget = getFreeHandWidget(eventSource);
  const event = eventSource.dynObject.akEvent;
  const value = Number(event.payload.itemName.replace('px', ''));
  widget?.selectStrokeSize(value);

Back to Documentation

Back to Home Page