diff --git a/README b/README index 77a178a..1103da8 100644 --- a/README +++ b/README @@ -8,6 +8,7 @@ T.O.C. 2.1. Minimum Requirements 2.2. Building the Repository 3. Creating an example + 4. Installing Emscripten examples 1. GBS Builds @@ -57,3 +58,16 @@ Then run the following commands: - Modify "com.samsung.dali-demo.xml" to include your example so that it can be launched on target. - No changes are required to the make system as long as the above is followed, your example will be automatically built & installed. + +4. Installing Emscripten Examples +================================= + +Some Emscripten Javascript examples are included in dali-demo. + +They do not require building, to install them run the provided install script. +Note: Your dali-env must be setup as it will install to your dali-env/opt/share/emscripten directory. + +# cd ./emscripten-examples +# ./install.sh + +Run the examples by either opening them in a browser, or, running the browser from the command line with an example as a parameter. diff --git a/build/tizen/CMakeLists.txt b/build/tizen/CMakeLists.txt index c21bf09..f9234d4 100644 --- a/build/tizen/CMakeLists.txt +++ b/build/tizen/CMakeLists.txt @@ -14,10 +14,6 @@ IF(DEFINED DALI_APP_DIR) ELSE() SET(APP_DATA_DIR ${PREFIX}/share/com.samsung.dali-demo) SET(BINDIR ${PREFIX}/bin) - - # Directory for compiled Emscripten artifacts along with Emscripten examples and demos. - SET(EMSCRIPTEN_ENV_DIR ${APP_DATA_DIR}/../emscripten/) - SET(EMSCRIPTEN_EXAMPLE_DIR ${ROOT_SRC_DIR}/emscripten-examples/) ENDIF() @@ -98,10 +94,3 @@ INCLUDE_DIRECTORIES(${DEMO_SRC_DIR}) ADD_SUBDIRECTORY(demo) ADD_SUBDIRECTORY(examples) ADD_SUBDIRECTORY(builder) - -IF(NOT DEFINED DALI_APP_DIR) - FILE( MAKE_DIRECTORY ${EMSCRIPTEN_ENV_DIR} ) - CONFIGURE_FILE( ${EMSCRIPTEN_EXAMPLE_DIR}/dali-toy.js ${EMSCRIPTEN_ENV_DIR}/ ) - CONFIGURE_FILE( ${EMSCRIPTEN_EXAMPLE_DIR}/dali-toy.html ${EMSCRIPTEN_ENV_DIR}/ ) - CONFIGURE_FILE( ${EMSCRIPTEN_EXAMPLE_DIR}/dali-doc-demo.html ${EMSCRIPTEN_ENV_DIR}/ ) -ENDIF() diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml index 1c7a295..036a122 100644 --- a/com.samsung.dali-demo.xml +++ b/com.samsung.dali-demo.xml @@ -1,5 +1,5 @@ - + 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

+ + + + +
+ + + + +
+
+ + + diff --git a/emscripten-examples/install.sh b/emscripten-examples/install.sh new file mode 100755 index 0000000..41d9ed1 --- /dev/null +++ b/emscripten-examples/install.sh @@ -0,0 +1,9 @@ +#!/bin/bash + +INSTALL_PATH=$DESKTOP_PREFIX/share/emscripten/ + +echo "Installing Emscripten examples to: $INSTALL_PATH" + +mkdir -p $INSTALL_PATH +cp -v *.{js,html} $INSTALL_PATH/ + diff --git a/packaging/com.samsung.dali-demo.spec b/packaging/com.samsung.dali-demo.spec index 1d370c8..b776336 100755 --- a/packaging/com.samsung.dali-demo.spec +++ b/packaging/com.samsung.dali-demo.spec @@ -2,7 +2,7 @@ Name: com.samsung.dali-demo Summary: The OpenGLES Canvas Core Demo -Version: 1.1.23 +Version: 1.1.24 Release: 1 Group: System/Libraries License: Apache-2.0