1 <?xml version="1.0" encoding="utf-8"?> 2 <page> 3 <config delay=""> 4 <!--Configuration tags--> 5 6 <!--Move the page to position 0, 0 and make the background transparent 7 NOTE: on book load setBrowserWindowStyles() is executed to drop out the 8 window color for use on the forum. (See the tbk file.)--> 9 <setPageContentPosition> 10 { left : 0, top : 0, width : '', height : '', addScrollbars : '', 11 transparentPageBG : true } 12 </setPageContentPosition> 13 14 <!--Load stylesheet and notify the group named "LED"--> 15 <stylesheet notify="LED"> 16 ../media/led-styles.css 17 </stylesheet> 18 </config> 19 20 <!--Configure the colored LEDs by assigned a class from our stylesheet--> 21 <redLED> 22 <userProperty> 23 { myProp : 'className', 24 myVal : 'led-red', 25 get_set : 'set', 26 parseGrp : false, 27 append : false } 28 </userProperty> 29 </redLED> 30 31 <yellowLED> 32 <userProperty> 33 { myProp : 'className', 34 myVal : 'led-yellow', 35 get_set : 'set', 36 parseGrp : false, 37 append : false } 38 </userProperty> 39 </yellowLED> 40 41 <greenLED> 42 <userProperty> 43 { myProp : 'className', 44 myVal : 'led-green', 45 get_set : 'set', 46 parseGrp : false, 47 append : false } 48 </userProperty> 49 </greenLED> 50 51 <blueLED> 52 <userProperty> 53 { myProp : 'className', 54 myVal : 'led-blue', 55 get_set : 'set', 56 parseGrp : false, 57 append : false } 58 </userProperty> 59 </blueLED> 60 61 <!--Handle the notification that the stylesheet is loaded and ready. 62 NOTE: Toolbook is set to hide this group on load page so everything 63 happens nice and smooth with no flashing unstyled objects.--> 64 <LED> 65 <!--Group of LED's (red, yellow, green, blue)--> 66 <function name="myUser" event="user" params="evt,value" useTB="true"> 67 <![CDATA[ 68 /* CLIFTON: Just show this group of objects. 69 ***/ 70 tbfunction_pgTBObjSet(this.name, 'visible', true); 71 ]]> 72 </function> 73 </LED> 74 75 <!--Create onclick function for the "AnimateAll" button--> 76 <AnimateAll> 77 <function name="myClick" event="click" params="evt,undef,target,mX,mY,isShift,isCntrl" useTB="true"> 78 <![CDATA[ 79 /* CLIFTON: Assign progressive animations to the LED's. 80 Loop forever and do not send user events on each loop. 81 All we are doing is setting a progressive animation. 82 NOTE: Start the first (red) one immediately, then start the others 83 separated by 250ms each. 84 ***/ 85 tbfunction_pgAnimateCSS('redLED', 'blink-red', 0, true, '', '', '', false); 86 tbfunction_pgAnimateCSS('yellowLED', 'blink-yellow', 250, true, '', '', '', false); 87 tbfunction_pgAnimateCSS('greenLED', 'blink-green', 500, true, '', '', '', false); 88 tbfunction_pgAnimateCSS('blueLED', 'blink-blue', 750, true, '', '', '', false); 89 ]]> 90 </function> 91 </AnimateAll> 92 93 <!--Additional <config#> ... </config#> sections as required.--> 94 95 </page>