PG Software Development

Flashing or Blinking LED's can be a useful addition to draw attention to various controls and activities in your projects.
This post will demonstrate how to make an CSS and XML working example of the following TBK export:

This is developed as an example of XML technology, but the attached file with this post contains BOTH the XML and normal actions editor TBK examples. This provides an opportunity to explore how the page is developed in each case.

Development Details:
NOTE: The CSS file will be required whether you choose to use the XML version of not.

1. Create a single page ToolBook file and enable it for PowerPac usage.
2. Select Menu > PowerPac > Create/Edit File ... > CSS Stylesheet > CSS (Blank)
   This will open a blank CSS file.
3. Copy the contents of the following CSS document to your blank CSS file.
   Save the file in the same folder as the TBK and name it "led-styles.css"
   
4. Draw 4 bordered fields and size them to 24px square (360 ToolBook page units).
   Also draw a single button to execute the animation.
   Your page should look similar to the one below:
   

   

   ToolBook page layout.

   Image 1.png (28.41 KiB) Viewed 6197 times

5. Name the fields "redLED", "yellowLED", "greenLED", and "blueLED".
   Group the LEDs together and name the group "LED".
   Name the button "AnimateAll".
6. Create an onload page action for the group "LED" that simply makes sure the group is hidden when the page loads.
   

   

   Onload page action for group "LED"

   Image 2.png (12.14 KiB) Viewed 6197 times

7. Select Menu > PowerPac > Create/Edit File ... > XML Document > XML (Blank)
   This will open a blank XML document.
8. Overwrite the contents of the blank XML document with the contents of the following XML document.
   Save the file to the same folder as your TBK file and name it "animatedLEDs.xml"
   
9. Create an onload page action to load the XML document "animatedLEDs.xml"
   

   

   Create onload action to load XML file.

   Image 9.png (24.6 KiB) Viewed 6197 times

10. Add both the "led-styles.css" and "animatedLEDs.xml" to the media folder in the book export using the DHTML Export Tree Manager.
    

    

    Add files to export tree.

    Image 3.png (82.81 KiB) Viewed 6197 times

11. (optional) Add a first page transition to the opening page of the book.
    Select Menu > PowerPac > Export Options ... > Configure Page Transitions ...
    

    

    Add page transition to first page.

    Image 5.png (42.47 KiB) Viewed 6197 times

12. Export your project.
    Open the export in Firefox or Chrome (must use PowerPac server).
    Clicking the button "AnimateAll" will begin the color animations on the 4 LED's on the page.

ENJOY!