Javascript Execution

The Javascript Execution block allows you to execute Javascript code in the browser. This is useful for doing complex operations that are not supported by other blocks.

To use this block, you must do the following:

1. install extension named 'MegaPortal-IDE' on VSCode.
2. click 'Connection QRCode' button of extension to display a QRCode.
3. connect your iPhone to the same WiFi as your 'MegaPortal-IDE' running device.
4. tap 'connect' button on your iPhone to scan the QRCode.

the supported Javascript API is display as an Typescript interface below and these codes are provided by the extension when you initialize a empty project.

Types

enum ReturnPayloadTypeEnum {
  any = 'any',
  array = 'array',
  string = 'string',
  number = 'number',
  data = 'data',
  image = 'image',
  visionObservation = 'visionObservation',
  textObservation = 'textObservation',
}

enum ReturnPayloadType {
  string = 'string',
  number = 'number',
  data = 'data',
  classificationObservations = 'classificationObservations',
  recognizedObjectObservations = 'recognizedObjectObservations',
  textObservations = 'textObservations',
  array = 'array',
}

/** for NativeLogger */
type NativeLoggerType = {
  log: (message: string[]) => void
};

/** for NativeForm */
type NativeFormType = {
  showForm: (
    formString: string,
    callback: (err: Error, formString: string) => void,
  ) => void
};

/** for NativeCommunication */
type NativeCommunicationType = {
  done: (payload: any[], callback: (err: Error) => void) => void
  getContextValue: (
    variableName: string,
    callback: (err: Error, value: string) => void,
  ) => void
  openUrlSchema: (
    url: string,
    callback: (err: Error) => void
  ) => void
};

// eslint-disable-next-line @typescript-eslint/naming-convention
declare const NativeLogger: NativeLoggerType;
// eslint-disable-next-line @typescript-eslint/naming-convention
declare const NativeForm: NativeFormType;
// eslint-disable-next-line @typescript-eslint/naming-convention
declare const NativeTable: NativeTableType;
// eslint-disable-next-line @typescript-eslint/naming-convention
declare const NativeCommunication: NativeCommunicationType;

type MegaFormNode = {
  id: string
  key: string
};

type MegaForm = {
  title: string
  sections: MegaFormSection[]
} & MegaFormNode;

type MegaFormSection = {
  header?: string
  footer?: string
  items: MegaFormItem[]
} & MegaFormNode;

type MegaFormItem = {
  val: string
  boolVal: Boolean
  type: MegaFormItemTextType | MegaFormItemOptionType | MegaFormItemToggleType
} & MegaFormNode;

type MegaFormItemTextType = {
  text: {
    title: string
  }
};

type MegaFormItemOptionType = {
  options: {
    options: {
      val: string
      text: string
    }[]
    title: string
  }
};

type MegaFormItemToggleType = {
  toggle: {
    title: string
  }
};

/** for NativeTable */
type NativeTableType = {
  showTable: (formString: string, callback: (err: Error) => void) => void
};

type MegaTableNode = {
  id: string
};

type MegaTable = {
  title: string
  columns: MegaTableColumn[]
  rows: MegaTableRow[]
} & MegaTableNode;

type MegaTableColumn = {
  title: string
} & MegaTableNode;

type MegaTableRow = {
  values: string[]
} & MegaTableNode;

type ReturnPayloadData = {
  string?: { value: string }
  number?: { value: number }
  // not elaborated yet
  data?: { value: any }
  classificationObservations?: { value: VNClassificationObservation[] }
  recognizedObjectObservations?: { value: VNRecognizedObjectObservation[] }
  textObservations?: { value: VNTextObservation[] }
  array?: { value: ReturnPayload[] }
};

type ReturnPayload = {
  type: ReturnPayloadTypeEnum
  payload: ReturnPayloadData
};

type VNObservation = {
  confidence: number
};

type CGPoint = [number, number];

type VNRectangleObservation = {
  bottomLeft: CGPoint
  bottomRight: CGPoint
  topLeft: CGPoint
  topRight: CGPoint
};

type VNRecognizedText = {
  string: string
} & VNObservation;

type VNClassificationObservation = {
  identifier: string
} & VNObservation;

type VNRecognizedObjectObservation = {
  boundingBox: VNRectangleObservation
  labels: VNClassificationObservation[]
} & VNObservation;

type VNTextObservation = {
  candidates: VNRecognizedText[]
} & VNObservation &
  VNRectangleObservation;

Functions

import "./global";
import { ReturnPayloadTypeEnum, ReturnPayloadType } from './enum';

// generated uuid based on current timestamp
export function uuid() {
    let uuid = Date.now() + "" + (Math.random() + "").slice(2);
    return uuid;
}

export function destructurePayload(data: ReturnPayload): any {
    if (data.type === ReturnPayloadTypeEnum.array) {
        return data.payload!.array!.value.map((item) => {
            return destructurePayload(item);
        });
    } else if (data.type === ReturnPayloadTypeEnum.data) {
        return data.payload!.data!.value;
    } else if (data.type === ReturnPayloadTypeEnum.image) {
        return undefined;
    } else if (data.type === ReturnPayloadTypeEnum.number) {
        return data.payload!.number!.value;
    } else if (data.type === ReturnPayloadTypeEnum.string) {
        return data.payload!.string!.value;
    } else if (data.type === ReturnPayloadTypeEnum.textObservation) {
        return data.payload!.textObservations!.value.map((item) => {
            return item;
        });
    } else if (data.type === ReturnPayloadTypeEnum.visionObservation) {
        if (data.payload!.classificationObservations) {
            return data.payload!.classificationObservations!.value.map((item) => {
                return item;
            });
        } else if (data.payload!.recognizedObjectObservations) {
            return data.payload!.recognizedObjectObservations!.value.map((item) => {
                return item;
            });
        } else if (data.payload!.textObservations) {
            return data.payload!.textObservations!.value.map((item) => {
                return item;
            });
        } else {
            return undefined;
        }
    } else {
        return undefined;
    }
}

export function showForm(form: MegaForm): Promise<MegaForm> {
    return new Promise((resolve, reject) => {
        NativeForm.showForm(
            JSON.stringify(form),
            (err, formString) => {
                if (err) {
                    reject(err);
                } else {
                    resolve(JSON.parse(formString));
                }
            }
        );
    });
}

export function showTable(table: MegaTable): Promise<void> {
    return new Promise((resolve, reject) => {
        NativeTable.showTable(
            JSON.stringify(table),
            (err) => {
                if (err) {
                    reject(err);
                } else {
                    resolve();
                }
            }
        );
    });
}

export function done(payload: any[]): Promise<void> {
    return new Promise((resolve, rejects) => {
        NativeCommunication.done(
            payload,
            (err) => {
                if (err) {
                    rejects(err);
                } else {
                    resolve();
                }
            }
        );
    });
}

export function getContextValue(variableName: string): Promise<string> {
    return new Promise((resolve, reject) => {
        NativeCommunication.getContextValue(
            variableName,
            (err, value) => {
                if (err) {
                    reject(err);
                } else {
                    resolve(value);
                }
            }
        );
    });
}

export function openUrlSchema(url: string): Promise<void> {
    return new Promise((resolve, reject) => {
        NativeCommunication.openUrlSchema(
            url,
            (err) => {
                if (err) {
                    reject(err);
                } else {
                    resolve();
                }
            }
        );
    });
}