1 Altia, Inc. Psd layers to hardware layersNOTE: For future reference, all portions of this lesson follow the step-by-step process that is shown in the Altia Support knowledge base video at: https://altia.zendesk.com/entries/ Video-30-mins-Psd-Layers-to-Hardware-Based-Layers-in-30-mins-or-Less- Time codes like 00:34 are in the following slides indicating where to find that step in the video.

2 Step 1: Prep the psd file for photoprotoTime - 0:00 to 11:42 Find and remove common/repeating layers. Ensure only ONE example of any common element of artwork/layer content, resulting in a tall/flat stack of layers and PhotoProto objects. PhotoProto creates Image objects, Text I/Os, and Decks (cleandeck) objects. One object per layer rule is satisfied in this case to clock images straight from flash using DMA. Choose a layer naming convention home_preset1_btn_card, home_preset2_btn_card for example For Deck objects, make the second word of the PhotoProto Deck object be the prefix, while the layer names are the suffix. OPTIONAL: Use Layer Comps to prototype screens, but do NOT run PhotoProto with layer comps in use (uncheck the Layer Comps option).

3 Step 2: Import photoproto output to Altia designTime - 11:45 to 15:54 Create a blank Layer Manager object that matches the same size of your Photoshop canvas widthXheight. Place the Layer Manager object at coordinate (0,0). Delete Layer 0. File->Import XML (find/import your PhotoProto output) Place the Layer Manager above the top-level PhotoProto Group. Ungroup top-level PhotoProto Group. Right-click -> Collapse All

4 Step 3: for now…manual effort: drag objects into layersTime - 15:55 to 16:58 Drag and drop every PhotoProto object (starting with top-most object in navigator) into the layer manager object Ensure each new layer has a higher/great layer ID (release mouse when Layer Manager row in Navigator is boxed)

5 Step 4: assign all layers APAL format, then change text layers to ALpha8 format.Time - 15:56 to 20:10 Drag and drop every PhotoProto object (starting with top-most object in navigator) into the layer manager object Ensure each new layer has a higher/great layer ID (release mouse when Layer Manager row in Navigator is boxed) Assign all layers the APAL format. TIP: Use this helper control code to do so: GLOBALS holder_str_var // GLOBALS anim_suffix // GLOBALS disp_prefix // // // WHEN update_layers_now == {}  //  // change the display object prefix, range start, range end, anim_suffix, and desired value for each call  //  CALL update_layers {“layer_manager_obj_prefix" “format" 6} {}  //  END   // ROUTINE update_layers {disp_prefix start end anim_suffix disp_val} {}  //  EXPR loop_cnt {start}  EXPR loop_end {end + 1}  LOOP loop_cnt < {loop_end}   //   EXPR holder_str_var {[$format "%s_layer_id" disp_prefix]}   {loop_cnt}   EXPR holder_str_var {[$format "%s_layer_%s" disp_prefix "format"]}    EXPR holder_str_var {[$format "%s_layer_%s" disp_prefix anim_suffix]}    {disp_val}    //    //    END     EXPR loop_cnt {loop_cnt + 1}   END For Text I/O layers, assign them the ALPHA8 format, then assign the layer’s “Color” attributre based upon the color of the text.. This can be found by looking at the #rrggbb value of the Text I/O. The steps on this slide will also be done automatically in a future release.

6 Step 5: confirm 1 object per layer ruleTime - 20:11 to 21:33 Ensure each layer is either a single Text I/O, a single Image object, or a single Deck, with only 1 Image object per card. Enables the images to be clocked directly from flash using DMA (makes the hardware perform much better). PhotoProto currently cannot created nested objects anyway, so usually, this rule is met already.

7 Step 6: copy object animation names to layer manager’s layer names (make API doc)Time - 21:35 to 23:30 Create a living API document to tell the C coders which objects need to be talked to via code for each screen. NOTE: Instead of using Navigator as shown in the video, use the Animation pane instead. For Image objects, copy the _image_name animation name. For Decks, copy the _card animation name. For Text I/Os, copy the _text animation name. Paste these names in each “Layer Name” field within Layer Manager. NOTE: This is a manual process for now, but will become automated in a future version.

8 Step 7: Define screens by using “Layer Groups” within the layer manager paneTime – 23:31 to 28:19 Turn on a set of layers that comprise the objects for a screen, then click New Layer Group. Repeat for each screen. IMPORTANT: Think of a GUI as a series of “layouts”. If one “screen” looks identical to another “screen” (or many other “screens”), it is using the same “layout”, and thus, should use the same layers/objects. This will be just one “Layer Group”. The code will simply populate the same set of objects with different card values and _text values to generate the different “screens” using the same single “layout”. Make 1 “Layer Group” per “layout” Use the same layers across multiple layer groups, if they have different layouts, but share common elements (like a common BG). TIP: Use “Duplicate Layer Group” to shortcut creating a similar Layer Group. C code can now use the _group_id animation of the Layer Manager object to change screens. NOTE: Advanced screens may require additional layer management code.

9 Step 8: Familiarize the C coder(s) with the API document (The layer names)Time – 28:21 to 29:57 (end of video) Inform the C coders to open the dsn file, then look at the Layer Manager pane per Layer Group. The C code will need to register callbacks for each button’s _card animation (so that buttons can trigger code/functions) The C code should have #define value for each Deck’s _card animation to drive through the cards. For example, to change an icon in a Deck of many different icons. Finally, the C code needs to note and talk to each Text I/O object’s _text animation to change values and line item titles throughout the GUI. Each screen will only need to be concerned with talking to the visible objects in that Layer Group.

10 OPTIONAL: Extra things to know…To merge multiple PhotoProto exports: Import the PhotoProto content ONLY for the layers in Photoshop that are not yet in the dsn. To do so, turn off the visibility of all layers in Photoshop except for the new ones you want to bring in. Assign the background element layers in the Layer Manager some really high value, like This will ensure you can perform the drag-n-drop steps on slide 4 (and steps following) without causing overlap issues in the layer stack. Perform the same steps on the newly imported layers (slide 4 through 8). IMPORTANT: The layer Manager provides you with “free” X and Y-axis motion animation via the layer’s individual X and Y position attributes. Alpha (fade) is also provided. Thus, do not define any keyframe animations to handle that. Use the layer animations (via code). PhotoProto and the Layer Manager will not provide you with things like rotation animations (e.g. for rotating needles) Group a needle Image object, and define a rotation animation on just that one Group. Use that animation name as the layer name to continue with the API document creation practice from slide 7. Advanced stimulus must be created by hand in Altia Design, using the method shown in the knowledge base video linked within this KB article about making gestures: https://altia.zendesk.com/entries/ How-to-Create-Gestures-in-Altia-Design Optimization only: Create a common pal file for all APAL/PAL layers using the steps shown in this knowledge base video (only if required…may be optional): https://altia.zendesk.com/entries/ Video-30-mins-Optimizing-Layers-within- the-Layer-Manager-using-custom-palette-colors-and-optimal-me