From 307b0c9213cbef234b6b6152160bc88bc2c8e639 Mon Sep 17 00:00:00 2001 From: Lee Morgan Date: Wed, 24 Feb 2016 14:48:28 +0000 Subject: [PATCH] Added Javascript docs live demo example Change-Id: Ifca2f2f905ba81cdf725737907790586a12a5452 --- emscripten-examples/dali-doc-demo.html | 293 ++++++++++++++++++++++++++++++--- 1 file changed, 266 insertions(+), 27 deletions(-) diff --git a/emscripten-examples/dali-doc-demo.html b/emscripten-examples/dali-doc-demo.html index d6a9c95..ac0146d 100644 --- a/emscripten-examples/dali-doc-demo.html +++ b/emscripten-examples/dali-doc-demo.html @@ -1,11 +1,11 @@ + + - -

Dali Docs

+ function getEmbeddedImage() { + "use strict"; + // name is presumed to be in the html as base64 data + var doc = document; + var c = doc.createElement("canvas"); + var img = doc.getElementById("testImage"); + c.width = img.naturalWidth; + c.height = img.naturalHeight; + var context = c.getContext("2d"); + context.drawImage(img, 0, 0 ); + var imageData = context.getImageData(0, 0, img.naturalWidth, img.naturalHeight); // <-ImageData + var uint8clampedarray = new Uint8ClampedArray(imageData.data); + var uint8array = new Uint8Array(uint8clampedarray); + var image = new dali.BufferImage(uint8array, imageData.width, imageData.height, dali.PixelFormat.RGBA8888); + return image; + } + + function createExampleColorActor() { + var halfQuadSize = 0.5; + var verts = dali.createPropertyBuffer( {format: [ ["aPosition", dali.PropertyType.VECTOR3], + ["aCol", dali.PropertyType.VECTOR4] ], + data: { "aPosition": [ [-halfQuadSize, -halfQuadSize, 0.0], + [+halfQuadSize, -halfQuadSize, 0.0], + [-halfQuadSize, +halfQuadSize, 0.0], + [+halfQuadSize, +halfQuadSize, 0.0] + ], + "aCol": [ [0, 0, 0, 1], + [1, 0, 1, 1], + [0, 1, 0, 1], + [1, 1, 1, 1] + ] + } + }); + + var indices = dali.createPropertyBuffer( { format: [ ["indices", dali.PropertyType.INTEGER]], + data: { "indices": [0, 3, 1, 0, 2, 3] } } ) ; + + var geometry = new dali.Geometry(); + geometry.addVertexBuffer(verts); + geometry.setIndexBuffer(indices); + + var vertex = "" + + "attribute mediump vec3 aPosition;" + + "attribute mediump vec4 aCol;" + + "uniform mediump mat4 uMvpMatrix;" + + "uniform mediump vec3 uSize;" + + "uniform lowp vec4 uColor;" + + "varying lowp vec4 vColor;" + + "" + + "void main()" + + "{" + + " vColor = aCol * uColor;" + + " mediump vec4 vertexPosition = vec4(aPosition,1.0);" + + " vertexPosition.xyz *= uSize;" + + " gl_Position = uMvpMatrix * vertexPosition;" + + "}"; - - mScript = Dali::Toolkit::Script::New(); - mScript.ExecuteFile( mScriptFileName); - - + var fragment = "" + + "varying lowp vec4 vColor;" + + "uniform lowp vec4 uColor;" + + "" + + "void main()" + + "{" + + " gl_FragColor = vColor * uColor;" + + "}"; + + var shader = new dali.Shader(vertex, fragment, dali.ShaderHints.HINT_NONE); + var material = new dali.Material(shader); + var renderer = new dali.Renderer(geometry, material); + var actor = new dali.Actor(); + actor.addRenderer(renderer); + return actor; + } + + // Currently no toolkit, so no image actor so we create from scratch + function createExampleImageActor() { + var halfQuadSize = 0.5; + var verts = dali.createPropertyBuffer( {format: [ ["aPosition", dali.PropertyType.VECTOR3], + ["aTexCoord", dali.PropertyType.VECTOR2] ], + data: { "aPosition": [ [-halfQuadSize, -halfQuadSize, 0.0], + [+halfQuadSize, -halfQuadSize, 0.0], + [-halfQuadSize, +halfQuadSize, 0.0], + [+halfQuadSize, +halfQuadSize, 0.0] + ], + "aTexCoord": [ [0, 0], + [1, 0], + [0, 1], + [1, 1] + ] + } + }); + + var indices = dali.createPropertyBuffer( { format: [ ["indices", dali.PropertyType.INTEGER]], + data: { "indices": [0, 3, 1, 0, 2, 3] } } ) ; + var geometry = new dali.Geometry(); + geometry.addVertexBuffer(verts); + geometry.setIndexBuffer(indices); + + var vertex = "" + + "// atributes\n" + + "attribute mediump vec3 aPosition;" + + "attribute mediump vec2 aTexCoord;\n" + + "// inbuilt\n" + + "uniform mediump mat4 uMvpMatrix;" + + "uniform mediump vec3 uSize;" + + "uniform lowp vec4 uColor;" + + "// varying\n" + + "varying mediump vec2 vTexCoord;\n" + + "" + + "void main()" + + "{" + + " mediump vec4 vertexPosition = vec4(aPosition, 1.0);" + + " vertexPosition.xyz *= uSize;" + + " gl_Position = uMvpMatrix * vertexPosition;" + + " vTexCoord = aTexCoord;\n" + + "}"; + + var fragment = "" + + "uniform lowp vec4 uColor;" + + "uniform sampler2D sTexture;\n" + + "varying mediump vec2 vTexCoord;\n" + + "\n" + + "void main()" + + "{" + + " gl_FragColor = texture2D(sTexture, vTexCoord) * uColor;\n" + + "}"; + + var shader = new dali.Shader(vertex, fragment, dali.ShaderHints.HINT_NONE); + var material = new dali.Material(shader); + var image = getEmbeddedImage() ; + var sampler = new dali.Sampler(); + material.addTexture(image, "sTexture", sampler); + var renderer = new dali.Renderer(geometry, material); + var actor = new dali.Actor(); + actor.addRenderer(renderer); + return actor; + } + - +

Dali Docs (Live Example)

+
+
+ Downloading... +
+ + +

Positioning Actors

+

An actor inherits its parent's position. The relative position between the actor & parent is determined by 3 properties:

+
    +
  1. PositionExample. This Vector3 property defines a point relative to the parent actor's area.
    2. +
+

The default is "top-left", which can be visualized in 2D as (0, 0), but is actually Vector3(0, 0, 0.5) in the 3D DALi world. The actor's position is relative to this point.

+ 
// to change parent origin to the centre
+myActor.positionExample = [0.5, 0.5, 0.5];
+
+ + + + +
+ + + +
+ + + + + +
    +
  1. AnchorPoint. This Vector3 property defines a point relative to the child actor's area.
    2. +
+

The default is "center", which can be visualized in 2D as (0.5, 0.5), but is actually Vector3(0.5, 0.5, 0.5) in the 3D DALi world. The actor's position is also relative to this point.

+ 
// setting anchor point to the centre
+myActor.anchorPoint = [0.5, 0.5, 0.5];
+
+ + + +
+ + + +
+ + + + +
    +
  1. Position. This is the position vector between the parent-origin and anchor-point.
    2. +
+

Therefore by default, an actors position is the distance between its center and the top-left corner of its parent.

+

An actor added directly to the stage with position (X = stageWidth0.5, Y = stageHeight0.5), would appear in the center of the screen. Likewise an actor with position (X = actorWidth0.5, Y = actorWidth0.5), would appear at the top-left of the screen.

+

Note that since DALi is a 3D toolkit, this behaviour is the result of a default perspective camera setup.

+
+ + + + +
+ + + + +
+

The parent in the example already has a parentOrigin [0.5, 0.5, 0.5] so a zero position displays in the centre. This can be changed below

+ + + + +
+ + + + +
+
+ + + -- 2.7.4