Posted at

Magic Leap MagicScript Landscape Application. UiTimePicker

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-time org.magicscript.time "Time Picker"

cd my-time

Code

Change app.js

import { LandscapeApp, ui } from 'lumin';

const {
UiGridLayout
,UiText
,UiTimePicker
,Time
,Side
,EclipseLabelType
,Alignment
,HorizontalTextAlignment } = ui;

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

const text = UiText.CreateEclipseLabel(
prism,
'',
EclipseLabelType.kT7
);
text.setAlignment(Alignment.CENTER_CENTER);
text.setTextAlignment(HorizontalTextAlignment.kCenter);

const time = new Time();
time.setHour(8);
time.setMinute(8);
time.setSecond(0);

const tp =
UiTimePicker.Create(prism, "Start Time", Side.kTop, "hh:mm:ss", time);
tp.setColor([1.0, 1.0, 0.0, 1.0]);
tp.setAlignment(Alignment.CENTER_CENTER);
tp.onTimeChangedSub(function(uiEventData)
{
text.setText(tp.getTimeString());
});
layout.addItem(tp, [0.03, 0.03, 0.03, 0.03]);
layout.addItem(text, [0.03, 0.03, 0.03, 0.03]);
prism.getRootNode().addChild(layout);
}
}

Build

magic-script build -i

Run

magic-script run --port=10000

Reference

UiTimePicker (MagicScript API)

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

magicscript

https://www.magicscript.org/

Thanks!