|
9 | 9 | </div> |
10 | 10 | <div style="padding:16px;"> |
11 | 11 | Top Color : <input type="textbox" id="TopColor" value="00FF00"></input> Bottom Color : <input type="textbox" id="BottomColor" value="FF0000"></input> |
12 | | - |
13 | 12 | </div> |
| 13 | + <div style="padding:16px;"> |
| 14 | + Generic Command: <input type="textbox" id="GenericCommand" value="/api?top_init=1&top=0|3|FF0000&top_bg=00FF00&bottom_init=1&bottom_bg=FF0000" size="100"> |
| 15 | + </div> |
14 | 16 | <div> |
15 | 17 | <p class="status">last status call</p> |
16 | 18 | </div> |
17 | 19 |
|
18 | 20 | <button id="Reset">Reset UFO</button> |
19 | 21 | <button id="SetTop">Set TOP</button> |
20 | 22 | <button id="SetBottom">Set Bottom</button> |
| 23 | + <button id="ExecuteGeneric">Execute Generic</button> |
21 | 24 | <br> |
22 | 25 | <button id="KnightRider">Knight Rider</button> |
| 26 | + <br> |
23 | 27 | <button id="Steps">Steps</button> |
| 28 | + <br> |
| 29 | + <button id="Cafe">Coffeemaschines</button> |
| 30 | + <br> |
| 31 | + <button id="Inauguration">Inauguration</button> |
| 32 | + <br> |
| 33 | + <button id="Standup">Standup</button> |
| 34 | + <br> |
| 35 | + <button id="RequestStatus">Request Status</button> |
24 | 36 |
|
25 | 37 |
|
26 | 38 | <script> |
| 39 | + // Position keeps track of current position |
| 40 | + var knightRiderPos = 0; |
| 41 | + // Direction: 1=clock wise: 0=counter clockwise |
| 42 | + var knightRiderDirection = 1; |
| 43 | + var keepDoingKnightRider = true; |
| 44 | + |
27 | 45 | function getUFOURL() { |
28 | 46 | return "http://" + $('#IP').val(); |
29 | 47 | } |
|
32 | 50 | $.ajax({ |
33 | 51 | url: fullURL |
34 | 52 | }).done(function() { |
35 | | - $('.status').append("success"); |
| 53 | + $('.status').text("success"); |
36 | 54 | }).fail(function() { |
37 | | - $('.status').append("success"); |
| 55 | + $('.status').text("fail"); |
38 | 56 | }); |
39 | 57 | } |
40 | 58 |
|
41 | 59 | $("#Reset").click(function () { |
| 60 | + keepDoingKnightRider = false; |
42 | 61 | callUFO("/api?top_init=0&bottom_init=0"); |
43 | 62 | }); |
44 | 63 |
|
|
52 | 71 | callUFO("/api?bottom_init=0&bottom_bg=" + color); |
53 | 72 | }); |
54 | 73 |
|
| 74 | + $("#ExecuteGeneric").click(function () { |
| 75 | + var executeURL = $('#GenericCommand').val(); |
| 76 | + callUFO(executeURL); |
| 77 | + }); |
| 78 | + |
| 79 | + function doKnightRider() { |
| 80 | + if(keepDoingKnightRider) { |
| 81 | + // find the next position |
| 82 | + if(knightRiderDirection == 1) knightRiderPos++; else knightRiderPos--; |
| 83 | + |
| 84 | + // reverse direction if we are at the end |
| 85 | + if(knightRiderPos > 12) knightRiderDirection = 0; |
| 86 | + if(knightRiderPos < 1) knightRiderDirection = 1; |
| 87 | + |
| 88 | + // get our strings we need for the API |
| 89 | + var ufoString = knightRiderPos + "|3|FF0000"; |
| 90 | + |
| 91 | + callUFO("/api?top_init=1&top=" + ufoString + "&top_bg=000000&bottom_init=1&bottom=" + ufoString + "&bottom_bg=000000"); |
| 92 | + |
| 93 | + // now call us in a loop every 100ms |
| 94 | + setTimeout(doKnightRider, 100); |
| 95 | + } |
| 96 | + } |
| 97 | + |
| 98 | + $("#KnightRider").click(function () { |
| 99 | + // Knight Rider will move 3 Red LEDS clockwise and then counterclockwise -> just like KITT in Knight Rider :-) |
| 100 | + knightRiderPos = 0; |
| 101 | + knightRiderDirection = 1; |
| 102 | + keepDoingKnightRider = true; |
| 103 | + doKnightRider(); |
| 104 | + }); |
| 105 | + |
55 | 106 | $("#Steps").click(function () { |
56 | 107 | // Visualizing Steps Statistics from Andi (Blue - 0000FF) and his girlfriend (Yellow - FFFF00) |
57 | 108 | // Top ROW: How far away are both of us on our daily goal. Daily goal is 10000. All of us have 7 LEDs to visualize. We keep LED 0 black |
58 | 109 | // Bottom ROW: Who is currently winning the Average Day Challenge. Visualizing current status of each and morphing to current lead |
59 | | - callUFO("/api?top_init=1&top_bg=000000&top=1|1|0000FF|7|3|FFFF00&bottom_init=1&bottom=0|8|0000FF|8|7|FFFF00&bottom_whirl=100&bottom_bg=0000FF&bottom_morph=1000|5"); |
| 110 | + callUFO("/api?top_init=1&top_bg=000000&top=1|1|0000FF|7|3|FFFF00&top_whirl=100&bottom_init=1&bottom_bg=0000FF&bottom=0|8|0000FF|8|7|FFFF00&bottom_morph=1000|5"); |
| 111 | + }); |
| 112 | + |
| 113 | + |
| 114 | + $("#Cafe").click(function () { |
| 115 | + // Visualizing the Queue Length on the two Coffee Machines in Linz |
| 116 | + // Top is the Left Coffee Machine -> always very busy |
| 117 | + // Bottom is the Right Coffee Machine -> not that busy -> I go with that :-) |
| 118 | + callUFO("/api?top_init=1&top_bg=000000&top=1|8|FF0000|&top_whirl=50&bottom_init=1&bottom_bg=00FF00&bottom=0|15|000000&bottom_morph=500|5"); |
60 | 119 | }); |
| 120 | + |
| 121 | + $("#Inauguration").click(function () { |
| 122 | + // Visualization of the Inauguration Crowds 2009 and 2017 |
| 123 | + // Top Row: 2009: Obama (dark color) + all other rainbow colors |
| 124 | + // Bottom Row: 2017: Trump (a hint of Orange) + some red (followers) and some white :-) |
| 125 | + callUFO("/api?top_init=1&top_bg=FF0000&top=0|2|000000|2|2|34AA71|4|2|08D874|6|2|08CAD8|8|2|5C7FD1|10|2|134DD6|12|2|7113D6|13|1|CF13D6|14|1|D61340&top_whirl=50&bottom_init=1&bottom_bg=FFFFFF&bottom=0|2|FFA500|2|6|0000FF&bottom_whirl=50"); |
| 126 | + }); |
| 127 | + |
| 128 | + var standupCurrentMember = 1; |
| 129 | + var standupCurrentTimer = 15; |
| 130 | + var standupColors = ["FF0000", "00FF00", "0000FF", "FF00FF", "00FFFF"]; |
| 131 | + var keepDoingStandup = false; |
| 132 | + function doStandup() { |
| 133 | + if(keepDoingStandup) { |
| 134 | + standupCurrentTimer--; |
| 135 | + if(standupCurrentTimer <= 0) {standupCurrentMember++;standupCurrentTimer=15;} |
| 136 | + if(standupCurrentMember == 6) {keepDoingStandup = false;callUFO("/api?top_init=0&bottom_init=0");return;} |
| 137 | + |
| 138 | + var topRing = ""; |
| 139 | + for(i=0;i<5;i++) { |
| 140 | + var currentIndex = i*3; |
| 141 | + if(i>0) topRing += "|"; |
| 142 | + topRing += currentIndex + "|3|" + standupColors[i]; |
| 143 | + } |
| 144 | + |
| 145 | + var bottomRing = "0|" + standupCurrentTimer + "|" + standupColors[standupCurrentMember-1]; |
| 146 | + |
| 147 | + callUFO("/api?top_init=1&top=" + topRing + "&bottom_init=1&bottom_bg=000000&bottom=" + bottomRing); |
| 148 | + |
| 149 | + // now call us in a loop every 100ms |
| 150 | + setTimeout(doStandup, 500); |
| 151 | + } |
| 152 | + } |
| 153 | + |
| 154 | + $("#Standup").click(function () { |
| 155 | + // Daily Standup Meetings |
| 156 | + // Top Row: Each Team Member who is present is represented by a color |
| 157 | + // Bottom Row: Acts Like a Timer: How much time left for current member |
| 158 | + standupCurrentMember = 0; |
| 159 | + standupCurrentTimer = 0; |
| 160 | + keepDoingStandup = true; |
| 161 | + doStandup(); |
| 162 | + }); |
| 163 | + |
| 164 | + $("#RequestStatus").click(function () { |
| 165 | + // Visualizing STatus of Requests (HTTP Status and Response Time) |
| 166 | + // Top Row: Distribution of HTTP Status Codes (2xx == GREEN, 3xx == BLUE, 4xx == YELLOW, 5XX = RED) |
| 167 | + // Bottom Row: Requests per Performance Buckete (<1s == GREEN, <3s = YELLOW, <5s == ORANGE, >5s == RED) |
| 168 | + callUFO("/api?top_init=1&top=0|8|00FF00|8|2|0000FF|10|2|FFFF00|12|4|FF0000&top_whirl=50&bottom_init=1&bottom=0|1|00FF00|1|6|FFFF00|7|3|FF6600|10|5|FF0000&bottom_whirl=50"); |
| 169 | + }); |
| 170 | + |
61 | 171 | </script> |
62 | 172 |
|
63 | 173 | </body> |
|
0 commit comments