magic-script / magic-script-components Goto Github PK

Description

In Lumin, PageView, GridLayout and LinearLayout components allow setting padding/alignment per item. In React Native, we use only defaultItemPadding/defaultItemAlignment attributes which set the same values to all items.

Example

<LinearLayout
    localPosition={[-0.5, 0.5, 0]}
    width={0.5}
    height={0.8}
    itemPadding={[
        {index: 0, padding: [0, 0, 0, 0   ]},
        {index: 1, padding: [0, 0, 0, 0.05]},
        {index: 2, padding: [0, 0, 0, 0.1 ]},
        {index: 3, padding: [0, 0, 0, 0.15]}
    ]}
>
    <Text textSize={0.1 } text='Ganymede' textColor={[255, 165, 0, 0.8]} />
</LinearLayout>

Completion status

• Android
• iOS
• Lumin

Description

On Lumin, we need better logs and error messages when a mistake is made.

Completion status

• Lumin

docs/components/Audio.md
docs/components/Model.md
docs/components/Image.md
docs/components/Video.md
docs/components/TextEdit.md

Shall have harmonized file name / absolute file name / path property names.

Description

• Consider adding support for React/React-Native CSS-like styles.
• If properties don’t exist then it is ignored.
• Can leverage existing react-native code to “inspire” us.
• Colour styling is already supported via chroma-js lib.
• Layout (flex) styling.
  
- See https://facebook.github.io/react-native/docs/image-style-props for more details.

Completion status

• Android
• iOS
• Lumin

from ModelNode, obviously

• Lumin
• iOS
• Android

Description

We want to have a way to consolidate the rendering on React-Native to be able to display MagicScript components along with react components at the same time.

Completion status

• Android
• iOS

Some of the components have custom events that need to be described.

Description

• Expose a Quad node on which you can render WebGL and custom shaders.

• Needs a deep dive and follow up on how to expose and implement this
.
• Pre-requisite of Particles and Animated Characters.

Completion status

• Android
• iOS
• Lumin

Description

• Colours specified as names, [0-255], [0-1], hex etc. (already done)
• Similarly for specifying euler, radian, degree values for rotation and quaternions and matrices.

Completion status

• Android
• iOS
• Lumin

• Lumin
• iOS
• Android

All the attributes defining the UI presentation of the UI element need to be extracted in a CSS.

Add unit tests for each supported tag (UI element)

Description

Common code from magic-script-components-react-native and magic-script-components-lumin repos should be kept in magic-script-components repo.

Good candidates for the move:

• chroma-js
• gl-matrix
• new components that have JS business logic like Planes
• property validation
• OptionGroup from Catalog app

Completion status

• Android
• iOS
• Lumin

Description

Add support for quad nodes. A quad node represents a simple 2-d rectangle that can be drawn on.

Quad node's supported properties (based on QuadNode.h and quad-builder.js):

QuadNode: RenderNode {
  renderResourceId: number
  texCoords: vec4
  viewMode: ViewMode(FullArea, LeftRight)
  size: vec2
}

Completion status

• Android
• iOS

Each component or type doc shall have a description (one sentence at least) of what this component do or what this type for.

TimePicker should support the following formats:

• hh:mm:ss p
• hh:mm p
• hh:ss p
• hh:mm:ss
• hh:mm
• hh:ss
• mm:ss

Need to be able to specify the entire node hierarchy, not just a model

Folder /platform/lumin-runtime should be in a separate package named 'magic-script-components-lumin' and imported to the app on demand.

Description

Enable applications to launch at any page route.
Example deeplink: catalog://scene/14

Completion status

• Android
• iOS
• Lumin

Description

Integrate chroma-js library to support the following colour formats:

//   string: 'hotpink'; '#ff3399'; 'F39'
//   number: 0xff3399
//   array: [r, g, b, a?] = [0..255, 0..255, 0..255, 0..1]
//   object: { h:120, s:1, l:0.75}; { l:80, c:25, h:200 }; { c:1, m:0.5, y:0, k:0.2}; { r:255, g: 0, b: 0, a: 0.5 }

Completion status

• Android
• iOS
• Lumin

• [iOS] Custom gesture recognizers magic-script/magic-script-components-react-native#255

Description

Lumin RT LandscapeApp supports more than one prism. Components should support multiple prisms as well.

Examples

Main app component:

<MyApp
    type="landscape"
    volumes={[
        { id: 1, size: [1.4, 1.2, 1], position: [...] },
        { id: 2, size: [1.4, 1.2, 1], position: [...] },
        { id: 3, size: [1.4, 1.2, 1], position: [...] },
    ]}
    message="Hello Components"
/>

Sample scene:

<View volumeId={2}>
    <Button volumeId={3}>Click me</Button>
</View/>

Completion status

• Android
• iOS
• Lumin

The colorPicker component throws an error on creation:

E MagicScript: VM: Unhandled promise rejection: ReferenceError: properties is not defined

In order to simplify the UI declaration by avoiding multiple if/else or switch blocks the property value should accept (and ignore) value of undefined.

There is a risk of silently masking a bug when the undefined value is actually due to a bug. In order to address this situation the framework should print warning message to the console (debug mode only).

Description

An on-demand mechanism which allows developers to place the scene in selected point based on discovered planes.

• Fully based on Planes Detection
• Requires to provide a mechanism which will present a single plane which the user is looking at.
• On Android, this feature is fully supported by ARCore (initial implementation already integrated).
• On Lumin, this feature is natively supported for landscape apps (prisms). For immersive apps, Initial Placement is not supported and needs to be implemented.

Completion status

• Android
• iOS
• Lumin

Description

System events should be exposed in JSX.

Completion status

• Android
• iOS
• Lumin

DatePicker should support the following data formats:

• MM/DD/YYYY
• DD/MM/YYYY
• MM/YYYY
• DD/YYYY

Description

Resources defined once in the JSX can be re-used

Completion status

• Android
• iOS
• Lumin

Add documentation describing the supported UI elements and usage.

enhancement:

I want you to be able to get the image from the URL as follows.

<image width={0.15}
height={0.25}
src={'https://tokufxug.sakura.ne.jp/magicscript/sadao.png'}
localPosition={[-0.25, 0.20, 0]}>

Thanks.

Description

Draws a border or debug styling information - for debug only.

Completion status

• Android
• iOS
• Lumin

1. Replace width with length
2. Replace height with thickness

WebView component only has width and height properties. There is no way to specify a URL to load.

enhancement:

Video file settings appear to support only videoPath.
I also want to support videoUri (setVideoUri).

Thanks.

Some components use property size of type vec2 which is array of two elements ([width, height]) and other use properties as width and height. This is inconsistent and needs to be addressed.

We need to generate the JSON schema automatically from the source code for this repo instead of from Lumin Runtime.

Please have @ddubrow review

This means allowing users to specify an file or http path and the platform implementation performing the http request or file request on the users behalf and transparent to the user.

The following audio properties should accept an array (item per channel):

• spatialSoundDirection
• spatialSoundDirectSendLevels
• spatialSoundDistance
• spatialSoundPosition
• spatialSoundRadiation
• spatialSoundRoomSendLevels

Description

Add support for light nodes. A light node is a component for setting the properties of light in the scene.

Light node's supported properties (based on LightNode.h and light-builder.js):

LightNode: TransformNode {
  type: LightType(Directional, Point, Spot)
  color: vec4
  intensity: number
  range: number
  spotAngle: number
  castsShadows: boolean
}

Completion status

• Android
• iOS

We should add an example to the Button Component that creates a button with icon.

We should add or update properties showing how to add a button component that includes an icon (system icon and custom icon).

Use middleware like e.g. chroma.js to enable standard CSS and React Native colors in addition to the GL color notion used currently.

• iOS

As I understand it, FBX files work as models for the Lumin target, but not the iOS or Android targets. In order to reduce the number of platform-related bugs in my project, I would like some sort of "strict mode" in which only features that work on all targets are available.

Description

• Make magic-script run work on the simulator.
• Currently uses mxs bin/index.js, so just run this for now and work with SDK team to enable starting simulator from the command line if not already running.
• Add resigning and make sure -s can specify the certificate to use for build and resign.

Completion status

• Lumin

Currently, only the overload that accepts an item index is exposed to scripting (presumably because of the lack of method overloading in JavaScript).

Need to investigate whether renaming a function for scripting only is supported by Intergen (and whether adding such support is the easiest path forward, otherwise).

Description

Save to sandbox, read/write files to the local sandbox, copy, delete, create, move (CRUD)

Completion status

• Android
• iOS
• Lumin

Description

An on-demand mechanism which allows developers to get information on JSX side about detected planes.

Solution proposal

Initial analysis shows that a flexible planes detection mechanism could be implemented as NativeModule. This solution gives developers a possibility of how to present planes and how to handle interaction with them. Additionally, with few additional JSX lines, it could provide Initial Placement feature.

// module creation
this.planeDetector = NativeModules.ARPlaneDetector;

// registering notification
this.planeDetector.addObserver(this.onDetectPlane);
this.planeDetector.addObserver(this.onPlaneDidTap);

// possible API calls 
this.planeDetector.startPlaneDetection();
this.planeDetector.startEntryMode('Tap any plane to select scene origin.', true);
this.planeDetector.getAllPlanes();
this.planeDetector.stopEntryMode();

// registered callback
onPlaneDetected = (plane, anchor) => { 

}

// registered callback
onPlaneDidTap = (plane, anchor, touch) => {

}

Completion status

• Android
• iOS
• Lumin