Add Image

Quick Start
  1. Click "Javascript Buffers" tab.
  2. Click "Select Javscript Buffer" dropdown and choose "02. Textured Quad".
  3. Click "Clear and Run" to clear the stage and execute the selected Javascript buffer
  4. Click on the image in the Dali view to select the created actor
  5. Click "Properties" tab to view the actor properties
  6. Press F12 or Tools|Javascript Console to open the console. The selected actor can be accessed by typing "dali.actor" in the console.
  • The example uses the function shaderFromUIBuffer(name) which gets a shader from one of the buffers in the "Shader buffers" tab.
  • You can load images to the "Image Buffers" and create shaders in "Shader Buffers" and retrieve them in Javascript with the functions shaderFromUIBuffer(name) and imageFromUIBuffer(name) which create a Dali::Shader() or Dali::Image()
  • The example uses the "Pass Through Texture" shader so you can select and edit that shader buffer and then re-click "Clear and Run" to run with your modified shader
Tips
  • "dali.stage.add(actor)" adds actors to a root actor for rudamentary scene rotation
  • Data is saved to the browser IndexedBuffer so will persist over sessions. However the browser has control over when this data may be dropped.
    • The button below will remove this persisted data and reload the page (sometimes needed if upgrading dali-toy)
  • There are some helper functions useable in the developer console (see below).
  • The functions imageFromUiBuffer(name) and shaderFromUiBuffer(name) will return a Dali.Image() or Dali.Shader() by name from the tabs.
  • The shader buffers will attempt to compile the shader and display errors in the margin
Mouse
  • Left click - select actor. Left drag - move actor in X/Y plane
  • Middle drag - rotate root rotation actor
  • Right drag up/down - move actor in Z plane
DALi Javascript wrapping

See numbered examples in Javascript Buffer tab.

DALi helper variables 
dali.actor;     // currently selected (clicked) actor or null
DALi toy helper functions 
dali.actor.position = [0,100,0];         // property access via dot notation
shader.weight = 3;                       // uniforms access from shader object
col = collectByName();                   // collect all actors on stage for dotted notation access
col.picture_4_png.position = [100,0,0];

clear();                                 // Clear all. If things are still funky right click the reload button
                                         // Open developer console, click "Empty Cache and hard reload" (chrome)