+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
-
+
toy
+
+
+ - Javascript buffers +
- Image buffers +
- Shader buffers +
- Properties +
- Help +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Add Image
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Tree + +
+
+
+
+
+ -
+
+
+
+
+ + + Properties + +
+
+
+
+
+
+
+ Quick Start
+
+
+
+ -
+
- Click "Javascript Buffers" tab. +
- Click "Select Javscript Buffer" dropdown and choose "02. Textured Quad". +
- Click "Clear and Run" to clear the stage and execute the selected Javascript buffer +
- Click on the image in the Dali view to select the created actor +
- Click "Properties" tab to view the actor properties +
- 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 +
-
+
- "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 +
-
+
- 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 +
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) ++ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Downloading...
+
+
+
+
+
+
+
+
+
+
+
+