Logo

    Home

    Documentation

    Use Cases

    Training

    Applications

    Release Notes

    Freehand Drawing Editor

    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.

    image
    image
    Scratchpad object in a screen
    Scratchpad object in a screen

    How to use it

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

    Back to DocumentationDocumentation

    Back to Home Page

    Logo
    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);