projects / ceph.git / blame
| Commit | Line | Data |
|---|---|---|
| 7c673cae FG |
1 | <!DOCTYPE html> |
| 2 | <html> | |
| 3 | ||
| 4 | <head> | |
| 5 | <meta charset='UTF-8'> | |
| 6 | ||
| 7 | <title>Websocket Meters</title> | |
| 8 | <!-- | |
| 9 | Version 0.1 Contributed by William Greathouse 9-Sep-2013 | |
| 10 | Simple demo of WebSocket connection use. Not a great example of web coding, | |
| 11 | but it is functional. | |
| 12 | ||
| 13 | The meter displays are adapted from CSS-TRICKS Progress Bars by Chris Coyier | |
| 14 | at http://css-tricks.com/css3-progress-bars/ | |
| 15 | --> | |
| 16 | <style> | |
| 17 | body { | |
| 18 | background: #222; | |
| 19 | } | |
| 20 | h1 { | |
| 21 | color: white; | |
| 22 | text-align: center; | |
| 23 | } | |
| 24 | button { | |
| 25 | width: 225px; | |
| 26 | height: 30px; | |
| 27 | margin: auto 10px; | |
| 28 | background-color: #ccc; | |
| 29 | -moz-border-radius: 5px; | |
| 30 | -webkit-border-radius: 5px; | |
| 31 | border-radius:6px; | |
| 32 | color: blue; | |
| 33 | font-size: 20px; | |
| 34 | } | |
| 35 | button:hover { | |
| 36 | background-color: #888; | |
| 37 | } | |
| 38 | button:hover:disabled { | |
| 39 | background-color: #ccc; | |
| 40 | } | |
| 41 | button:disabled { | |
| 42 | color: lightgray; | |
| 43 | } | |
| 44 | ||
| 45 | .button_container { | |
| 46 | width:550px; | |
| 47 | display:block; | |
| 48 | margin-left:auto; | |
| 49 | margin-right:auto; | |
| 50 | } | |
| 51 | ||
| 52 | .meter { | |
| 53 | height: 20px; /* Can be anything */ | |
| 54 | position: relative; | |
| 55 | background: #555; | |
| 56 | -moz-border-radius: 25px; | |
| 57 | -webkit-border-radius: 25px; | |
| 58 | border-radius: 25px; | |
| 59 | padding: 10px; | |
| 60 | -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); | |
| 61 | -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); | |
| 62 | box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); | |
| 63 | } | |
| 64 | .meter > span { | |
| 65 | display: block; | |
| 66 | height: 100%; | |
| 67 | -webkit-border-top-right-radius: 20px; | |
| 68 | -webkit-border-bottom-right-radius: 20px; | |
| 69 | -moz-border-radius-topright: 20px; | |
| 70 | -moz-border-radius-bottomright: 20px; | |
| 71 | border-top-right-radius: 20px; | |
| 72 | border-bottom-right-radius: 20px; | |
| 73 | -webkit-border-top-left-radius: 20px; | |
| 74 | -webkit-border-bottom-left-radius: 20px; | |
| 75 | -moz-border-radius-topleft: 20px; | |
| 76 | -moz-border-radius-bottomleft: 20px; | |
| 77 | border-top-left-radius: 20px; | |
| 78 | border-bottom-left-radius: 20px; | |
| 79 | background-color: rgb(43,194,83); | |
| 80 | background-image: -webkit-gradient( | |
| 81 | linear, | |
| 82 | left bottom, | |
| 83 | left top, | |
| 84 | color-stop(0, rgb(43,194,83)), | |
| 85 | color-stop(1, rgb(84,240,84)) | |
| 86 | ); | |
| 87 | background-image: -moz-linear-gradient( | |
| 88 | center bottom, | |
| 89 | rgb(43,194,83) 37%, | |
| 90 | rgb(84,240,84) 69% | |
| 91 | ); | |
| 92 | -webkit-box-shadow: | |
| 93 | inset 0 2px 9px rgba(255,255,255,0.3), | |
| 94 | inset 0 -2px 6px rgba(0,0,0,0.4); | |
| 95 | -moz-box-shadow: | |
| 96 | inset 0 2px 9px rgba(255,255,255,0.3), | |
| 97 | inset 0 -2px 6px rgba(0,0,0,0.4); | |
| 98 | box-shadow: | |
| 99 | inset 0 2px 9px rgba(255,255,255,0.3), | |
| 100 | inset 0 -2px 6px rgba(0,0,0,0.4); | |
| 101 | position: relative; | |
| 102 | overflow: hidden; | |
| 103 | } | |
| 104 | .meter > span:after, .animate > span > span { | |
| 105 | content: ""; | |
| 106 | position: absolute; | |
| 107 | top: 0; left: 0; bottom: 0; right: 0; | |
| 108 | background-image: | |
| 109 | -webkit-gradient(linear, 0 0, 100% 100%, | |
| 110 | color-stop(.25, rgba(255, 255, 255, .2)), | |
| 111 | color-stop(.25, transparent), color-stop(.5, transparent), | |
| 112 | color-stop(.5, rgba(255, 255, 255, .2)), | |
| 113 | color-stop(.75, rgba(255, 255, 255, .2)), | |
| 114 | color-stop(.75, transparent), to(transparent) | |
| 115 | ); | |
| 116 | background-image: | |
| 117 | -moz-linear-gradient( | |
| 118 | -45deg, | |
| 119 | rgba(255, 255, 255, .2) 25%, | |
| 120 | transparent 25%, | |
| 121 | transparent 50%, | |
| 122 | rgba(255, 255, 255, .2) 50%, | |
| 123 | rgba(255, 255, 255, .2) 75%, | |
| 124 | transparent 75%, | |
| 125 | transparent | |
| 126 | ); | |
| 127 | z-index: 1; | |
| 128 | -webkit-background-size: 50px 50px; | |
| 129 | -moz-background-size: 50px 50px; | |
| 130 | -webkit-animation: move 2s linear infinite; | |
| 131 | -webkit-border-top-right-radius: 20px; | |
| 132 | -webkit-border-bottom-right-radius: 20px; | |
| 133 | -moz-border-radius-topright: 20px; | |
| 134 | -moz-border-radius-bottomright: 20px; | |
| 135 | border-top-right-radius: 20px; | |
| 136 | border-bottom-right-radius: 20px; | |
| 137 | -webkit-border-top-left-radius: 20px; | |
| 138 | -webkit-border-bottom-left-radius: 20px; | |
| 139 | -moz-border-radius-topleft: 20px; | |
| 140 | -moz-border-radius-bottomleft: 20px; | |
| 141 | border-top-left-radius: 20px; | |
| 142 | border-bottom-left-radius: 20px; | |
| 143 | overflow: hidden; | |
| 144 | } | |
| 145 | ||
| 146 | .animate > span:after { | |
| 147 | display: none; | |
| 148 | } | |
| 149 | ||
| 150 | @-webkit-keyframes move { | |
| 151 | 0% { | |
| 152 | background-position: 0 0; | |
| 153 | } | |
| 154 | 100% { | |
| 155 | background-position: 50px 50px; | |
| 156 | } | |
| 157 | } | |
| 158 | ||
| 159 | .orange > span { | |
| 160 | background-color: #f1a165; | |
| 161 | background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); | |
| 162 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a)); | |
| 163 | background-image: -webkit-linear-gradient(#f1a165, #f36d0a); | |
| 164 | } | |
| 165 | ||
| 166 | .red > span { | |
| 167 | background-color: #f0a3a3; | |
| 168 | background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); | |
| 169 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323)); | |
| 170 | background-image: -webkit-linear-gradient(#f0a3a3, #f42323); | |
| 171 | } | |
| 172 | ||
| 173 | .nostripes > span > span, .nostripes > span:after { | |
| 174 | -webkit-animation: none; | |
| 175 | background-image: none; | |
| 176 | } | |
| 177 | ||
| 178 | #output { | |
| 179 | background-color: #ccc; | |
| 180 | height: 240px; | |
| 181 | overflow-y: auto; | |
| 182 | } | |
| 183 | ||
| 184 | </style> | |
| 185 | </head> | |
| 186 | ||
| 187 | <body> | |
| 188 | <div id="page_wrap"> | |
| 189 | ||
| 190 | <h1>Meter Updates via WebSocket</h1> | |
| 191 | ||
| 192 | <p/> | |
| 193 | ||
| 194 | <div class="meter"> | |
| 195 | <span id="meter1" style="width: 25%"></span> | |
| 196 | </div> | |
| 197 | ||
| 198 | <p/> | |
| 199 | ||
| 200 | <div class="meter orange nostripes"> | |
| 201 | <span id="meter2" style="width: 33.3%"></span> | |
| 202 | </div> | |
| 203 | ||
| 204 | <p/> | |
| 205 | ||
| 206 | <div class="meter red"> | |
| 207 | <span id="meter3" style="width: 80%"></span> | |
| 208 | </div> | |
| 209 | ||
| 210 | <p/> | |
| 211 | ||
| 212 | </div> | |
| 213 | <div class="button_container"> | |
| 214 | <div> | |
| 215 | <button id="connection" onclick="toggleConnection(this)">WebSocket Connect</button> | |
| 216 | <button id="update" disabled onclick="toggleUpdate(this)">Disable Update</button> | |
| 217 | </div> | |
| 218 | </div> | |
| 219 | <p/> | |
| 220 | <div id="output"></div> | |
| 221 | ||
| 222 | </body> | |
| 223 | ||
| 224 | <script language="javascript" type="text/javascript"> | |
| 225 | var connection; // websocket connection | |
| 226 | ||
| 227 | function writeToScreen (message) { | |
| 228 | var div = document.createElement('div'); | |
| 229 | var output = document.getElementById('output'); | |
| 230 | div.innerHTML = message; | |
| 231 | output.appendChild(div); | |
| 232 | output.scrollTop = output.scrollHeight; | |
| 233 | } | |
| 234 | ||
| 235 | function ws_connect() { | |
| 236 | // check for websocket support | |
| 237 | // for Internet Explorer < 10 there are options for websocket support that | |
| 238 | // could be integrated into production code, but for now, we are expecting | |
| 239 | // browser support to be present for this demo | |
| 240 | if ('WebSocket' in window) { | |
| 241 | ||
| 242 | writeToScreen('Connecting'); | |
| 243 | connection = new WebSocket('ws://' + window.location.host + '/meters'); | |
| 244 | connection.onopen = function(ev) { | |
| 245 | document.getElementById("connection").innerHTML = "WebSocket Disconnect"; | |
| 246 | document.getElementById("update").disabled=false; | |
| 247 | document.getElementById("update").innerHTML = "Disable Update"; | |
| 248 | writeToScreen('CONNECTED'); | |
| 249 | var message = 'update on'; | |
| 250 | writeToScreen('SENT: ' + message); | |
| 251 | connection.send(message); | |
| 252 | }; | |
| 253 | ||
| 254 | connection.onclose = function(ev) { | |
| 255 | document.getElementById("update").disabled=true; | |
| 256 | document.getElementById("update").innerHTML = "Enable Update"; | |
| 257 | document.getElementById("connection").innerHTML = "WebSocket Connect"; | |
| 258 | writeToScreen('DISCONNECTED'); | |
| 259 | }; | |
| 260 | ||
| 261 | connection.onmessage = function(ev) { | |
| 262 | if (ev.data.substr(0,5) == "meter") | |
| 263 | { | |
| 264 | var target = ev.data.split(":")[0]; | |
| 265 | var meter = document.getElementById(target); | |
| 266 | var data = ev.data.split(":")[1].split(","); | |
| 267 | var percent = (data[0]*100)/data[1]; | |
| 268 | meter.style.width = percent+"%"; | |
| 269 | } | |
| 270 | else | |
| 271 | writeToScreen('RECEIVED: ' + ev.data); | |
| 272 | }; | |
| 273 | ||
| 274 | connection.onerror = function(ev) { | |
| 275 | alert("WebSocket error"); | |
| 276 | }; | |
| 277 | ||
| 278 | } else { | |
| 279 | alert("WebSocket is not available!!!\n" + | |
| 280 | "Demo will not function."); | |
| 281 | } | |
| 282 | } | |
| 283 | ||
| 284 | // user connect/disconnect | |
| 285 | function toggleConnection(el) { | |
| 286 | var tag=el.innerHTML; | |
| 287 | if (tag == "WebSocket Connect") | |
| 288 | { | |
| 289 | ws_connect(); | |
| 290 | } | |
| 291 | else | |
| 292 | { | |
| 293 | connection.close(); | |
| 294 | } | |
| 295 | } | |
| 296 | ||
| 297 | // user turn updates on/off | |
| 298 | function toggleUpdate(el) { | |
| 299 | var tag=el.innerHTML; | |
| 300 | var message; | |
| 301 | if (tag == "Enable Update") | |
| 302 | { | |
| 303 | message = 'update on'; | |
| 304 | el.innerHTML = "Disable Update"; | |
| 305 | } | |
| 306 | else | |
| 307 | { | |
| 308 | message = 'update off'; | |
| 309 | el.innerHTML = "Enable Update"; | |
| 310 | } | |
| 311 | writeToScreen('SENT: ' + message); | |
| 312 | connection.send(message); | |
| 313 | } | |
| 314 | </script> | |
| 315 | ||
| 316 | </html> |