Magic Leap MagicScript Landscape Application. UiTab

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

image file
https://pixabay.com/ja/illustrations/%E3%83%80%E3%82%A4%E3%83%A4%E3%83%A2%E3%83%B3%E3%83%89-%E5%88%86%E9%9B%A2-%E9%80%8F%E6%98%8E-1857736/

3d model file
https://poly.google.com/view/esWz3QtmDCX

Create Project

magic-script init my-tab org.magicscript.tab "Tab"
cd my-tab
mkdir res

place imgae file and 3d model file in res folder.

Code

Change app.package

DATAS = "digest.sha512.signed" : "." \
        "bin/" : "bin/" \
        "res/" : "res/"
OPTIONS = package/minApiLevel/2

Change app.js

import { LandscapeApp, ui } from 'lumin';
const { 
  UiTab,
  UiText,
  UiImage,
  UiLinearLayout, 
  EclipseLabelType, 
  Orientation, 
  Alignment} = ui;

export class App extends LandscapeApp {
  onAppStart () {
    const prism = this.requestNewPrism([0.9, 0.3, 0.5]);
    const topLayout = UiLinearLayout.Create(prism);
    const text = UiText.Create(
      prism, "Standard Tabs:", EclipseLabelType.kT7);

    text.setTextSize(0.0303);
    topLayout.addItem(text, 
        [0.04, 0.04, 0, 0], Alignment.CENTER_LEFT);
    topLayout.setOrientation(Orientation.kHorizontal);

    const tabLayout = UiLinearLayout.Create(prism);
    tabLayout.setOrientation(Orientation.kVertical);

    const tab1 = UiTab.Create(prism, "Tab1");
    tab1.setTextColor([1, 1, 1, 0.4]);
    tabLayout.addItem(tab1,
        [0, 0, 0.02, 0.02], Alignment.CENTER_LEFT);

    const tab2 = UiTab.Create(prism, "Tab2");
    tab2.setTextColor([1, 1, 1, 0.4]);
    tabLayout.addItem(tab2, 
        [0, 0, 0.02, 0.02], Alignment.CENTER_LEFT);

    topLayout.addItem(tabLayout, 
        [0.04, 0.04, 0, 0], Alignment.CENTER_LEFT);

    const resource = prism.createModelResourceId(
        "res/ar-poop-vroom.glb", 0.1);
    const model = prism.createModelNode(resource);
    const image = UiImage.Create(prism, 
        "res/diamond-1857736_640.png", 0.1, 0.1);
    topLayout.addItem(image, 
        [0.04, 0.04, 0, 0], Alignment.CENTER_LEFT);
    tab1.onActivateSub(function(event)
      {
        topLayout.removeItem(2);
        topLayout.addItem(image, 
          [0.04, 0.04, 0, 0], Alignment.CENTER_LEFT);
      }  
    );
    tab2.onActivateSub(function(event)
      {
        topLayout.removeItem(2);
        topLayout.addItem(model, 
          [0.04, 0.04, 0, 0], Alignment.CENTER_LEFT);
      }  
    );
    prism.getRootNode().addChild(topLayout);
  }
}

Build

magic-script build -i

Run

magic-script run --port=10000

Reference
UiTab(Magic Script API Doc)
https://docs.magicscript.org/lumin.ui.UiTab.html

Tabs (UiTab)(Guide C++)
https://creator.magicleap.com/learn/guides/luminrt-uitab

magicscript
https://www.magicscript.org/

Thanks!