JavaScript
MagicLeap
MagicScript

Magic Leap MagicScript Landscape Application. WebSocket

Prepare

Magic Leap One

https://www.magicleap.com/magic-leap-one

mlsdk v.0.21.0

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

magic-script-cli v2.2.1

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

magic-script-polyfills v2.4.0

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

Create Project


magic-script init
? What is the name of your application? my-sws
? What is the app ID of your application? my-sws
? In which folder do you want to save this project? my-sws
? Do you want a Landscape App? Yes
cd my-sws

Code

Change app.js

import { LandscapeApp, ui } from 'lumin';

const {
UiLinearLayout,
UiText,
UiTextEdit,
UiButton,
EclipseLabelType,
Alignment,
HorizontalTextAlignment } = ui;

export class App extends LandscapeApp {
onAppStart () {
const prism = this.requestNewPrism([0.7, 0.6, 0.5]);
const layout = UiLinearLayout.Create(prism);
let ws = null;
let isConnected = false;
layout.setLocalPosition([-0.1, 0.1, 0]);

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

const edit = UiTextEdit.Create(prism, "", 0.4, 0.05);
edit.onTextChangedSub(function (uiEventData) {
btn_send.setEnabled(edit.getText().length > 0);
});
edit.setAlignment(Alignment.CENTER_CENTER);
edit.setTextAlignment(HorizontalTextAlignment.kCenter);

const btn_close = UiButton.Create(prism, 'Close', 0, 0.1);
btn_close.onActivateSub(function (uiEventData) {
ws.close();
btn_close.setEnabled(false);
isConnected = false;
});
btn_close.setEnabled(false);

const btn_send = UiButton.Create(prism, 'Send', 0, 0.1);
btn_send.onActivateSub(function (uiEventData) {
if (isConnected)
{
text.setText('Send...');
btn_send.setEnabled(false);
ws.send(edit.getText());
btn_send.setEnabled(false);
edit.setText("");
}
else
{
ws = new WebSocket('wss://echo.websocket.org');
ws.onerror = function(error)
{
text.setText('Error: ' + error);
};
ws.onopen = function() {
text.setText('Send...');
btn_close.setEnabled(true);
btn_send.setEnabled(false);
ws.send(edit.getText());
edit.setText("");
isConnected = true;
};
ws.onmessage = function(message) {
text.setText(message);
};
}
});
btn_send.setEnabled(false);

layout.addItem(text, [0, 0, 0.03, 0]
, Alignment.BOTTOM_LEFT);
layout.addItem(edit, [0, 0, 0.03, 0]
, Alignment.BOTTOM_LEFT);
layout.addItem(btn_send, [0, 0, 0.03, 0]
, Alignment.BOTTOM_LEFT);
layout.addItem(btn_close, [0, 0, 0.03, 0]
, Alignment.BOTTOM_LEFT);
prism.getRootNode().addChild(layout);
}

// Known Issue
// Web Inspector does not work unless the updateLoop function is present in source.
// It can be removed for production code.
updateLoop (delta) {
return true;
}
}

Change manifest.xml

<manifest xmlns:ml="magicleap"

ml:package="my-sws"
ml:version_name="0.0.1"
ml:version_code="1">
<application ml:visible_name="my-sws"
ml:sdk_version="1.0">
<component ml:name=".universe"
ml:visible_name="my-sws"
ml:binary_name="bin/index.js"
ml:type="Universe">
<mode ml:shareable="true"/>
<icon ml:model_folder=""
ml:portal_folder=""/>
</component>
<uses-privilege ml:name="MagicScript"/>
<uses-privilege ml:name="Internet"/>
</application>
</manifest>

Build

magic-script build -i

Run

magic-script run --port=10000

Reference

websocket.js

https://github.com/magic-script/magic-script-polyfills/blob/35684eeb2e45c4b133419135f9193343ce3af291/src/websocket.js

Thanks!