JavaScript
MagicLeap
MagicScript

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!