LoginSignup
0
0

More than 3 years have passed since last update.

Magic Leap MagicScript Landscape Application. WebSocket

Last updated at Posted at 2019-06-12

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!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0