LoginSignup
0

More than 3 years have passed since last update.

Magic Leap MagicScript Landscape Application. XMLHttpRequest

Last updated at Posted at 2019-05-26

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-xhr org.magicscript.xhr "XMLHttpRequest"
cd my-xhr

Code

Change app.js

import { LandscapeApp, ui } from 'lumin';

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

export class App extends LandscapeApp {
  onAppStart () {
    const prism = this.requestNewPrism([0.5, 0.5, 0.5]);
    const layout = UiLinearLayout.Create(prism);
    layout.setLocalPosition([-0.1, 0.1, 0]);
    const text = UiText.CreateEclipseLabel(
      prism,
      '',
      EclipseLabelType.kB2
    );
    text.setAlignment(Alignment.CENTER_CENTER);
    text.setTextAlignment(HorizontalTextAlignment.kCenter);
    const button = UiButton.Create(prism, 'REQUEST', 0, 0.1);
    button.onActivateSub(function (uiEventData) {
        const xhr = new XMLHttpRequest();
        xhr.addEventListener("load", function(event)
        {
             text.setText(xhr.responseText);   
        });
        xhr.open("GET", "https://magicmodelers.net/");
        xhr.send();
    });

    layout.addItem(text, [0, 0, 0.03, 0]
      , Alignment.BOTTOM_CENTER);
    layout.addItem(button, [0, 0, 0.03, 0]
      , Alignment.BOTTOM_CENTER);
    prism.getRootNode().addChild(layout);   
  }
}

Change .eslintrc.js

// ESLint config for MagicScript Apps
module.exports = {
    env: {
        "es6": true
    },
    globals: {
        // These globals are provided by the vm itself.
        "print": true,
        "globalThis": true,
        // The following globals are provided by `magic-script-polyfills`
        "setTimeout": true,
        "clearTimeout": true,
        "setInterval": true,
        "clearInterval": true,
        "setImmediate": true,
        "clearImmediate": true,
        "fetch": true,
        "Headers": true,
        "Request": true,
        "Response": true,
        "XMLHttpRequest":true ,
    },
    parserOptions: {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    extends: "semistandard",
};

Change manifest.xml

<manifest xmlns:ml="magicleap"
          ml:package="org.magicleap.xhr"
          ml:version_name="0.0.1"
          ml:version_code="1">
  <application ml:visible_name="File System"
               ml:application_type="untrusted"
               ml:sdk_version="1.0">
    <component ml:name=".universe"
               ml:visible_name="File System"
               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
xhr.js (magic-script-polyfills at Github)
https://github.com/magic-script/magic-script-polyfills/blob/master/src/xhr.js

magicscript
https://www.magicscript.org/

Thanks!

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