Posted at

Magic Leap MagicScript Landscape Application. UiCircleConfirmation

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.1.1

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

Create Project

magic-script init my-cc org.magicscript.cc "Circle Confirmation"

cd my-cc

Code

Change app.js

import { LandscapeApp, ui } from 'lumin';

const {
UiLinearLayout
, UiCircleConfirmation
, UiText
, EclipseLabelType
, Alignment} = ui;

export class App extends LandscapeApp {
onAppStart () {
const prism = this.requestNewPrism([0.5, 0.5, 0.5]);
const layout = UiLinearLayout.Create(prism);
layout.setAlignment(Alignment.CENTER_CENTER);

const text = UiText.CreateEclipseLabel(
prism,
'0%',
EclipseLabelType.kT7
);

const cc = UiCircleConfirmation.Create(prism, 0.1);
cc.setAlignment(Alignment.TOP_CENTER);
cc.onConfirmationUpdateSub(function(event)
{
let progress = (cc.getAngle() * 100) / 628;
progress*=100;
progress = Math.floor(progress);
text.setTextColor([1.0, 1.0, 1.0 - progress / 100, 1.0]);
text.setText(progress + "%");
});
cc.onConfirmationCompleteSub(function(event)
{
text.setTextColor([1.0, 1.0, 0.0, 1.0]);
text.setText("100%");
});
layout.addItem(cc
, [0.01, 0.01, 0.01, 0.01]
, Alignment.TOP_CENTER);
layout.addItem(text
, [0.01, 0.01, 0.01, 0.01]
, Alignment.BOTTOM_CENTER);
prism.getRootNode().addChild(layout);
}
}

Build

magic-script build -i

Run

magic-script run --port=10000

Reference

UiCircleConfirmation (MagicScript API)

https://docs.magicscript.org/lumin.ui.UiCircleConfirmation.html

magicscript

https://www.magicscript.org/

Thanks!