LoginSignup
0

More than 3 years have passed since last update.

Magic Leap MagicScript Components Landscape Application. ListView

Posted at

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

magic-script-components v0.0.9
https://www.npmjs.com/package/magic-script-components

Create Project

magic-script init my-list org.magicscript.list "List Component"
cd my-list

Install

npm install
npm install magic-script-components
npm install --save-dev @babel/core @babel/plugin-transform-react-jsx rollup-plugin-babel

Code
Create a new .babelrc file

{
    "plugins": [
        "@babel/plugin-syntax-jsx",
        "@babel/plugin-transform-react-jsx"
    ]
}

Change rollup.config.js

// Rollup config for consuming some npm modules in MagicScript
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  external: ['uv', 'lumin', 'ssl'],
  input: 'src/main.js',
  preserveModules: true,
  output: {
    dir: 'bin',
    format: 'es'
  },
  plugins: [
    babel({exclude: "node_modules/**"}),
    resolve(), 
    commonjs()]
};

Change app.js

import React from 'react';
import { CustomListView } from './components/index.js';

export class MyApp extends React.Component {
  constructor(props) {
    super(props);

    this.items = [
      '01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
      '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
      '21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
    ];
  }

  render() {
    return (
      <view name='main-view'>  
        <CustomListView items={this.items} ></CustomListView>
      </view>
    );
  }
}

Create components folder in src folder.
Create index.js newly in components folder.

export { default as CustomListView } from './custom-listview.js';

Create custom-listview.js newly in components folder.

import React from 'react';

export default class CustomListView extends React.Component {
    constructor(props) {
        super(props);
        this.items = props.items;
    }

    render() {
        let i = 0;
        let viewItems = [];
        for (; i < this.items.length; i++)
        {
            viewItems.push(
                <listViewItem>
                    <text textSize={0.10} textColor={[0.1, 1, 0.1, 0.84]}>{this.items[i]}</text>
                </listViewItem>
            );
        }
        return (
            <listView width={0.5} height={0.5}>
                {viewItems}
            </listView>
        );
    }
}

Create global-scope.js newly in src folder.

globalThis.process = { env: { NODE_ENV:"development" } };
export default process;

Change main.js

// Add support for things like setTimeout, setInterval and fetch.
// Simply importing this sets all these as global definitions.
// They are declared in the .eslintrc so your editor won't complain.
import 'magic-script-polyfills';
import './global-scope.js';

import React from 'react';
import mxs from 'magic-script-components';

// Load main app logic from the app class.
import { MyApp } from './app.js';

mxs.bootstrap(<MyApp type='landscape' volumeSize={[1,1,1]} caption='MagicScript CustomList'/>);

Capture_000108.JPG

Build

magic-script build -i

Run

magic-script run --port=10000

Reference

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

Lists (UiListView)(Guide C++)
https://creator.magicleap.com/learn/guides/luminrt-uilistview

magic-script-components (Github)
https://github.com/magic-script/magic-script-components

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