Skip to content
Newer
Older
100644 160 lines (144 sloc) 5.85 KB
4ff9521 @benlemasurier websocket (draft 76) implementation (a very, very broken one.)
authored Oct 11, 2010
1 <html>
30c09f9 @benlemasurier websockets working, original example copied and modified to use webso…
authored Oct 12, 2010
2 <head>
3 <title>test.</title>
6b9aa7f @benlemasurier real-time sparkfun.com visitors plotted on nasa's BlueMarble imagery
authored May 27, 2011
4 <script src="js/prototype.js" type="text/javascript"></script>
5 <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
30c09f9 @benlemasurier websockets working, original example copied and modified to use webso…
authored Oct 13, 2010
6 <style type="text/css">
7 body {
8 font-family: helvetica, arial;
9 background-color: #eee;
10 margin: 0;
11 padding: 0;
12 }
13
14 ul { padding: 0; margin: 0; }
15 ul#messages { max-height: 320px; height: 320px; overflow: auto; }
16 ul#messages ul { border-bottom: solid 3px #333; }
17 ul#messages ul li { display: inline-block; padding: 5px 10px; }
18 ul#messages ul li.severity { width: 100px; color: #fff; font-weight: bold; }
19 ul#messages ul li.severity.emerge {
20 background-color: red;
21 }
22 ul#messages ul li.severity.alert {
23 background-color: orange;
24 }
25 ul#messages ul li.severity.crit {
26 background-color: #0066cc;
27 }
28 ul#messages ul li.severity.err {
29 background-color: #ffff00;
30 }
31 ul#messages ul li.severity.warning {
32 background-color: #660000;
33 }
34 ul#messages ul li.severity.notice {
35 background-color: #0099cc;
36 }
37 ul#messages ul li.severity.info {
38 background-color: #99cc00;
39 }
40 ul#messages ul li.severity.debug {
41 background-color: #999966;
42 }
43 ul#messages ul li.severity.none {
44 background-color: white;
45 }
46 </style>
47 </head>
48
49 <body>
50 <ul id="messages">
51 </ul>
52
53 <script language="javascript">
54 document.observe("dom:loaded", function() {
55 function LogLevelYPixelLocation() {
56 this.emerge = 10;
57 this.alert = 50;
58 this.crit = 90;
59 this.err = 130;
60 this.warning = 180;
61 this.notice = 220;
62 this.info = 260;
63 this.debug = 300;
64 this.none = 340;
65 }
66
67 function LogLevelCount() {
68 this.emerge = 0;
69 this.alert = 0;
70 this.crit = 0;
71 this.err = 0;
72 this.warning = 0;
73 this.notice = 0;
74 this.info = 0;
75 this.debug = 0;
76 this.none = 0;
77 }
78
79 function LogLevelColors() {
80 this.emerge = "red";
81 this.alert = "orange";
82 this.crit = "#0066cc";
83 this.err = "#ffff00";
84 this.warning = "#660000";
85 this.notice = "#0099cc";
86 this.info = "#99cc00";
87 this.debug = "#999966";
88 this.none = "white";
89 }
90
91 function LogLevelWidths() {
92 this.emerge = 0;
93 this.alert = 0;
94 this.crit = 0;
95 this.err = 0;
96 this.warning = 0;
97 this.notice = 0;
98 this.info = 0;
99 this.debug = 0;
100 this.none = 0;
101 }
102
103 var last_id = 0,
104 canvas = $('buzz'),
6db701e @benlemasurier cleaning things up, i guess. web socket visualization just got a bit …
authored Oct 12, 2010
105 decay = 0.4,
30c09f9 @benlemasurier websockets working, original example copied and modified to use webso…
authored Oct 13, 2010
106 log_levels = ["emerge", "alert", "crit", "err", "warning", "notice", "info", "debug", "none" ],
107 level_location = new LogLevelYPixelLocation,
108 level_counts = new LogLevelCount,
109 level_colors = new LogLevelColors,
110 level_widths = new LogLevelWidths;
111
112 window.setInterval(function() {
113 var ctx = canvas.getContext('2d');
114
115 log_levels.each(function(level) {
116 // Clear rect for current level
117 ctx.clearRect(0, level_location[level], canvas.width, 20);
118
119 // Draw rect
120 ctx.fillStyle = level_colors[level];
121 ctx.fillRect(0, level_location[level], level_widths[level], 20);
122
123 // bar decay
124 if(level_widths[level] > decay) {
125 level_widths[level] -= decay;
126 }
127 });
6db701e @benlemasurier cleaning things up, i guess. web socket visualization just got a bit …
authored Oct 13, 2010
128 }, 1);
30c09f9 @benlemasurier websockets working, original example copied and modified to use webso…
authored Oct 13, 2010
129
130 var ws = new WebSocket('ws://localhost:8008');
131 ws.onmessage = function(evt) {
132 var log = evt.data.evalJSON();
133 if(log.id !== last_id) {
134 last_id = log.id;
135 $('messages').insert({ top: "<ul><li class=\"severity " + log.severity + "\">" + log.severity + "</li><li class=\"message\">" + log.message + "</li></ul>" });
136
137 $('messages').childElements().each(function(message) {
138 if(message.viewportOffset().top > ($('messages').getDimensions().height - message.getDimensions().height)) {
139 message.remove();
140 }
141 });
142
143 // canvas stuff. (never done this..)
144 if(canvas.getContext) {
145 if(level_widths[log.severity] < canvas.width) {
6db701e @benlemasurier cleaning things up, i guess. web socket visualization just got a bit …
authored Oct 13, 2010
146 level_widths[log.severity] = canvas.width;
30c09f9 @benlemasurier websockets working, original example copied and modified to use webso…
authored Oct 13, 2010
147 }
148 level_counts[log.severity]++;
149 } else {
150 canvas.innerHTML = 'yr browser sucks.';
151 }
152 }
153 };
154 });
155 </script>
156
157 <canvas id="buzz" width="800" height="400px"></canvas>
158 </body>
4ff9521 @benlemasurier websocket (draft 76) implementation (a very, very broken one.)
authored Oct 12, 2010
159 </html>
Something went wrong with that request. Please try again.