Magic Leap MagicScript Landscape Application. UiProgressBar

Prepare
Magic Leap One
https://www.magicleap.com/magic-leap-one

mlsdk v.0.20.0
https://creator.magicleap.com/downloads/lumin-sdk/overview

magic-script-cli v2.0.1
https://www.npmjs.com/package/magic-script-cli

magic-script-polyfills v2.2.0
https://www.npmjs.com/package/magic-script-polyfills

Create Project

magic-script init my-prog org.magicscript.prog "Progress Bar"
cd my-prog

Code

Change app.js

import { LandscapeApp, ui } from 'lumin';
const { 
  UiLinearLayout, 
  UiProgressBar, 
  UiButton,
  Alignment} = ui;

export class App extends LandscapeApp {

  init() {
    this._prism = null;
    return 0;
  }

  onAppStart () {
    let value = 0;
    let isProgress = false;
    const prism = this.requestNewPrism([0.5, 0.5, 0.5]);
    const layout = UiLinearLayout.Create(prism);
    layout.setAlignment(Alignment.CENTER_CENTER);

    const button = UiButton.Create(prism, 'Progress', 0, 0.1);
    button.onActivateSub(function (uiEventData) {
        value = 0;
        isProgress = true;
        progress.setValue(0);
    });

    const progress = 
        UiProgressBar.Create(prism, 0.4, 0.01);
    progress.setMinMax(0, 100);
    progress.setProgressColor(
      [1.0, 1.0, 0.0, 0.5],
      [1.0, 0.0, 0.0, 1.0]
    );
    progress.setValue(0);

    prism.onUpdate = function(delta)
    {
        if (isProgress)
        {
            if (value < 100)
            {
                value++;
                progress.setValue(value);
            }
            else
            {
                isProgress = false;
            }
        }
        return true;
    };

    layout.addItem(progress
      , [0.01, 0.01, 0.01, 0.01]
      , Alignment.TOP_CENTER);
    layout.addItem(button
        , [0.01, 0.02, 0.01, 0.01]
        , Alignment.CENTER_CENTER);
    prism.getRootNode().addChild(layout);
    this._prism = prism;
  }

  updateLoop(delta) {
     if (this._prism.onUpdate) 
     {
        this._prism.onUpdate(delta);
     }
     return true;
  }
}

Build

magic-script build -i

Run

magic-script run --port=10000

Reference
UiProgressBar(Magic Script API Doc)
https://docs.magicscript.org/lumin.ui.UiProgressBar.html

Progress Bar (UiProgressBar)(Guide C++)
https://creator.magicleap.com/learn/guides/luminrt-uiprogressbar

magicscript
https://www.magicscript.org/

Thanks!