Permalink
Browse files

Imported hacky prototype mobile heatmap code, to use as a starting po…

…int for developing a more serious heatmap generator.
  • Loading branch information...
Jono Xia
Jono Xia committed Apr 20, 2012
1 parent 9129c1c commit 4ddf3db5596bf2992e2b8f0268bc5a1be54fdb32
@@ -0,0 +1,64 @@
+
+<html>
+<head>
+<style>
+table { min-width: 300px;
+}
+.listing {
+ float: left;
+}
+#picture {
+ float: left;
+}
+caption {
+ height: 50px;
+ text-align: left;
+ border:
+}
+
+</style>
+<script src="jquery.js"></script>
+<script src="make-heatmap.js"></script>
+</head>
+<body onload="loadCanvas();">
+<div id="picture">
+<canvas id="the-canvas" width="732" height="581"></canvas>
+<div id="debug"></div>
+</div>
+<div class='listing'>
+<table>
+<caption>
+Total number of hits on each element:
+</caption>
+
+ <tr><td><span id='value0' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(-0.777847280876,75.1620515168%,50.1080343446%)">4923</span></td><td><span class='label'>Switch tab</span></td></tr>
+ <tr><td><span id='value1' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(4.38089582681,74.0873133694%,49.3915422463%)">2845</span></td><td><span class='label'>Hide Left bar</span></td></tr>
+ <tr><td><span id='value2' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(4.59897194801,74.0418808442%,49.3612538961%)">2782</span></td><td><span class='label'>Show Left bar</span></td></tr>
+ <tr><td><span id='value3' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(8.71035257346,73.1853432139%,48.7902288092%)">1845</span></td><td><span class='label'>Close tab</span></td></tr>
+ <tr><td><span id='value4' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(15.7198931866,71.7250222528%,47.8166815019%)">961</span></td><td><span class='label'>URL bar</span></td></tr>
+ <tr><td><span id='value5' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(16.4481060344,71.5733112428%,47.7155408286%)">901</span></td><td><span class='label'>Show Right bar</span></td></tr>
+ <tr><td><span id='value6' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(16.7291446424,71.5147615328%,47.6765076885%)">879</span></td><td><span class='label'>Hide Right bar</span></td></tr>
+ <tr><td><span id='value7' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(30.5040260506,68.6449945728%,45.7633297152%)">290</span></td><td><span class='label'>Edit URL bar</span></td></tr>
+ <tr><td><span id='value8' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(31.7383077122,68.38785256%,45.5919017066%)">265</span></td><td><span class='label'>Reload</span></td></tr>
+ <tr><td><span id='value9' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(33.0594749206,68.1126093915%,45.408406261%)">241</span></td><td><span class='label'>Open Panel</span></td></tr>
+ <tr><td><span id='value10' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(34.8799610485,67.7333414482%,45.1555609655%)">212</span></td><td><span class='label'>GConsole</span></td></tr>
+ <tr><td><span id='value11' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(36.0154762319,67.496775785%,44.9978505234%)">196</span></td><td><span class='label'>Bookmarks</span></td></tr>
+ <tr><td><span id='value12' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(37.1032066634,67.2701652785%,44.8467768523%)">182</span></td><td><span class='label'>Addons</span></td></tr>
+ <tr><td><span id='value13' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(39.0309618728,66.8685496098%,44.5790330732%)">160</span></td><td><span class='label'>Stop</span></td></tr>
+ <tr><td><span id='value14' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(43.3822961465,65.9620216361%,43.9746810908%)">121</span></td><td><span class='label'>New Tab</span></td></tr>
+ <tr><td><span id='value15' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(47.1799405974,65.1708457089%,43.4472304726%)">96</span></td><td><span class='label'>Downloads</span></td></tr>
+ <tr><td><span id='value16' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(50.9789115045,64.3793934366%,42.9195956244%)">77</span></td><td><span class='label'>Search</span></td></tr>
+ <tr><td><span id='value17' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(51.6835329245,64.2325973074%,42.8217315383%)">74</span></td><td><span class='label'>Back</span></td></tr>
+ <tr><td><span id='value18' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(54.9000849872,63.5624822943%,42.3749881962%)">62</span></td><td><span class='label'>Site ID</span></td></tr>
+ <tr><td><span id='value19' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(55.826013054,63.3695806138%,42.2463870758%)">59</span></td><td><span class='label'>Preferences</span></td></tr>
+ <tr><td><span id='value20' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(59.8003613154,62.5415913926%,41.6943942618%)">48</span></td><td><span class='label'>History</span></td></tr>
+ <tr><td><span id='value21' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(64.558386989,61.5503360439%,41.0335573626%)">38</span></td><td><span class='label'>Bookmark Star</span></td></tr>
+ <tr><td><span id='value22' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(67.5785726163,60.9211307049%,40.6140871366%)">33</span></td><td><span class='label'>Desktop tabs</span></td></tr>
+ <tr><td><span id='value23' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(70.450975316,60.3227134758%,40.2151423172%)">29</span></td><td><span class='label'>Undo close tab</span></td></tr>
+ <tr><td><span id='value24' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(83.5892796073,57.5855667485%,38.3903778323%)">17</span></td><td><span class='label'>Forward</span></td></tr>
+</table>
+
+</div>
+
+</body>
+</html>
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,128 @@
+
+
+<html>
+<head>
+<style>
+table { min-width: 300px;
+}
+.listing {
+ float: left;
+}
+#picture {
+ float: left;
+}
+caption {
+ height: 50px;
+ text-align: left;
+ border:
+}
+
+</style>
+<script src="jquery.js"></script>
+<script language="javascript">
+ var rectangles = [
+ [9, 165, 72, 49],
+ [3, 232, 27, 24],
+ [84, 160, 62, 416],
+ [84, 160, 62, 416],
+ [131, 119, 201, 41],
+ [332, 165, 46, 413],
+ [332, 165, 46, 413],
+ [91, 11, 194, 42],
+ [332, 119, 39, 40],
+ [557, 115, 55, 43],
+ [377, 120, 40, 37],
+ [6, 540, 73, 38],
+ [498, 117, 58, 39],
+ [286, 10, 38, 40],
+ [381, 540, 48, 40],
+ [90, 120, 41, 39],
+ [310, 54, 63, 47],
+ [167, 53, 69, 48],
+ [443, 115, 55, 44],
+ [378, 161, 50, 42],
+ [243, 55, 63, 46],
+ [10, 481, 72, 49],
+ [379, 205, 50, 37],
+ [379, 248, 50, 40],
+ [613, 115, 56, 43]];
+
+ function loadCanvas() {
+ var can = $("#the-canvas");
+ var ctx = can[0].getContext("2d");
+ var img = new Image();
+ img.onload = function() {
+ ctx.drawImage(img, 0, 0);
+ for (var i = 0; i < rectangles.length; i++) {
+ if (i == 3 || i == 6) continue;
+ var span = $("#value" + i);
+ ctx.globalAlpha = 0.8;
+ ctx.fillStyle = span.css("background-color");
+ ctx.fillRect(rectangles[i][0], rectangles[i][1], rectangles[i][2], rectangles[i][3]);
+ ctx.globalAlpha = 1.0;
+ ctx.fillStyle = "white";
+ ctx.font = "14pt Helvetica";
+ var txt = span.html() + "%";
+ ctx.fillText(txt, rectangles[i][0] + 10, rectangles[i][1] + 20);
+ }
+ }
+ img.src = "fennec-ui-bw.png";
+
+ var x = 0;
+ var y = 0;
+ can.bind("mousedown", function(evt) {
+ x = evt.clientX - can.offset().left;
+ y = evt.clientY - can.offset().top;
+ });
+ can.bind("mouseup", function(evt) {
+ var endX = evt.clientX - can.offset().left;
+ var endY = evt.clientY - can.offset().top;
+
+ $("#debug").append(x + ", " + y + ", " + (endX - x) + ", " + (endY - y) + "<br/>");
+ });
+ }
+</script>
+</head>
+<body onload="loadCanvas();">
+<div id="picture">
+<canvas id="the-canvas" width="732" height="581"></canvas>
+<div id="debug"></div>
+</div>
+<div class='listing'>
+<table>
+<caption>
+Percentage of users who used each item at least once:
+</caption>
+
+
+ <tr><td><span id='value0' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(0.785664972441,74.8363197974%,49.8908798649%)">98</span></td><td><span class='label'>Switch tab</span></td></tr>
+ <tr><td><span id='value1' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(4.00975104801,74.1646351983%,49.4430901322%)">94</span></td><td><span class='label'>Close tab</span></td></tr>
+ <tr><td><span id='value2' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(5.67306926029,73.8181105708%,49.2120737138%)">92</span></td><td><span class='label'>Hide Left bar</span></td></tr>
+ <tr><td><span id='value3' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(5.67306926029,73.8181105708%,49.2120737138%)">92</span></td><td><span class='label'>Show Left bar</span></td></tr>
+ <tr><td><span id='value4' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(7.3725493822,73.464052212%,48.976034808%)">90</span></td><td><span class='label'>URL bar</span></td></tr>
+ <tr><td><span id='value5' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(23.5382904484,70.0961894899%,46.7307929933%)">73</span></td><td><span class='label'>Hide Right bar</span></td></tr>
+ <tr><td><span id='value6' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(23.5382904484,70.0961894899%,46.7307929933%)">73</span></td><td><span class='label'>Show Right bar</span></td></tr>
+ <tr><td><span id='value7' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(25.6801506424,69.6499686162%,46.4333124108%)">71</span></td><td><span class='label'>Edit URL bar</span></td></tr>
+ <tr><td><span id='value8' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(27.8823527974,69.1911765005%,46.1274510004%)">69</span></td><td><span class='label'>Reload</span></td></tr>
+ <tr><td><span id='value9' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(41.2466379044,66.4069504366%,44.2713002911%)">58</span></td><td><span class='label'>Addons</span></td></tr>
+ <tr><td><span id='value10' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(43.942525979,65.8453070877%,43.8968713918%)">56</span></td><td><span class='label'>Stop</span></td></tr>
+ <tr><td><span id='value11' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(46.734715891,65.263600856%,43.5090672374%)">54</span></td><td><span class='label'>New Tab</span></td></tr>
+ <tr><td><span id='value12' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(62.4217475204,61.9954692666%,41.3303128444%)">44</span></td><td><span class='label'>Downloads</span></td></tr>
+ <tr><td><span id='value13' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(62.4217475204,61.9954692666%,41.3303128444%)">44</span></td><td><span class='label'>Search</span></td></tr>
+ <tr><td><span id='value14' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(79.8655498619,58.3613437788%,38.9075625192%)">35</span></td><td><span class='label'>Open Panel</span></td></tr>
+ <tr><td><span id='value15' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(79.8655498619,58.3613437788%,38.9075625192%)">35</span></td><td><span class='label'>Site ID</span></td></tr>
+ <tr><td><span id='value16' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(84.3337949324,57.4304593891%,38.2869729261%)">33</span></td><td><span class='label'>Desktop tabs</span></td></tr>
+ <tr><td><span id='value17' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(89.0730039024,56.443124187%,37.628749458%)">31</span></td><td><span class='label'>Bookmarks</span></td></tr>
+ <tr><td><span id='value18' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(89.0730039024,56.443124187%,37.628749458%)">31</span></td><td><span class='label'>Preferences</span></td></tr>
+ <tr><td><span id='value19' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(94.1181741505,55.392047052%,36.928031368%)">29</span></td><td><span class='label'>Bookmark Star</span></td></tr>
+ <tr><td><span id='value20' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(94.1181741505,55.392047052%,36.928031368%)">29</span></td><td><span class='label'>History</span></td></tr>
+ <tr><td><span id='value21' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(94.1181741505,55.392047052%,36.928031368%)">29</span></td><td><span class='label'>Undo close tab</span></td></tr>
+ <tr><td><span id='value22' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(125.81460078,48.7886248374%,32.5257498916%)">19</span></td><td><span class='label'>Back</span></td></tr>
+ <tr><td><span id='value23' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(125.81460078,48.7886248374%,32.5257498916%)">19</span></td><td><span class='label'>Forward</span></td></tr>
+ <tr><td><span id='value24' style="padding: 5px; text-align: right; margin: 0 10 0 0; display:block; background-color: hsl(134.050949081,47.0727189414%,31.3818126276%)">17</span></td><td><span class='label'>Console</span></td></tr>
+</table>
+</div>
+
+</body>
+</html>
+
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,109 @@
+ var data = [
+ {elemName: "Addons", value: 1.5},
+ {elemName: "Back", value: 1.7},
+ {elemName: "Bookmark Star", value: 0.8},
+ {elemName: "Bookmarks", value: 3.5},
+ {elemName: "Close tab", value: 23.5},
+ {elemName: "Console", value: 0.5},
+ {elemName: "Desktop tabs", value: 0.7},
+ {elemName: "Downloads", value: 1.5},
+ {elemName: "Edit URL bar", value: 5.1},
+ {elemName: "Forward", value: 0.5},
+ {elemName: "Hide Left bar", value: 27.4},
+ {elemName: "Hide Right bar", value: 10.6},
+ {elemName: "History", value: 1.2},
+ {elemName: "New Tab", value: 1.8},
+ {elemName: "Open Panel", value: 1.3},
+ {elemName: "Preferences", value: 0.9},
+ {elemName: "Reload", value: 4.9},
+ {elemName: "Search", value: 1.7},
+ {elemName: "Show Left bar", value: 26.7},
+ {elemName: "Show Right bar", value: 10.6},
+ {elemName: "Site ID", value: 1.8},
+ {elemName: "Stop", value: 2.5},
+ {elemName: "Switch tab", value: 55.8},
+ {elemName: "URL bar", value: 15.7},
+ {elemName: "Undo close tab", value: 0.5}
+];
+
+ var rectangles = [
+ {elemName: "Switch tab", coords: [9, 165, 72, 49]},
+ {elemName: "Hide Left bar", coords: [84, 160, 62, 416]},
+ {elemName: "Show Left bar", coords: [84, 160, 62, 416]},
+ {elemName: "Close tab", coords: [3, 232, 27, 24]}, // close tab
+ {elemName: "URL bar", coords: [131, 119, 201, 41]}, // url bar
+ {elemName: "Show Right bar", coords: [332, 165, 46, 413]}, // show right bar
+ {elemName: "Hide Right bar", coords: [332, 165, 46, 413]}, // hide right bar
+ {elemName: "Edit URL bar", coords: [91, 11, 194, 42]}, // edit url bar
+ {elemName: "Reload", coords: [332, 119, 39, 40]}, // reload
+ {elemName: "Open Panel", coords: [381, 540, 48, 40]}, // open panel
+ {elemName: "Console", coords: [613, 115, 56, 43]}, // console
+ {elemName: "Bookmarks", coords: [167, 53, 69, 48]}, // bookmarks
+ {elemName: "Addons", coords: [557, 115, 55, 43]}, // addons
+ {elemName: "Stop", coords: [377, 120, 40, 37]}, // stop
+ {elemName: "New Tab", coords: [6, 540, 73, 38]}, // new tab
+ {elemName: "Downloads", coords: [498, 117, 58, 39]}, // downloads
+ {elemName: "Search", coords: [286, 10, 38, 40]}, // search
+ {elemName: "Back", coords: [379, 205, 50, 37]}, // back
+ {elemName: "Site ID", coords: [90, 120, 41, 39]}, // site id
+ {elemName: "Preferences", coords: [443, 115, 55, 44]}, // preferences
+ {elemName: "History", coords: [243, 55, 63, 46]}, // history
+ {elemName: "Bookmark Star", coords: [378, 161, 50, 42]}, // bookmark star
+ {elemName: "Desktop tabs", coords: [310, 54, 63, 47]}, // desktop tabs
+ {elemName: "Undo close tab", coords: [10, 481, 72, 49]}, // undo close tab
+ {elemName: "Forward", coords: [379, 248, 50, 40]} // forward
+];
+
+function loadCanvas() {
+ var can = $("#the-canvas");
+ var ctx = can[0].getContext("2d");
+ var img = new Image();
+ img.onload = function() {
+ ctx.drawImage(img, 0, 0);
+
+ // for each table row, draw a rectangle with matching color onto the image
+ // put the data inside it
+ var tableRows = document.getElementsByTagName("tr");
+
+ for (var i = 0; i < tableRows.length; i++) {
+ var row = tableRows[i];
+ var spans = row.getElementsByTagName("span");
+
+ var datum = parseFloat(spans[0].innerHTML);
+ var color = $(spans[0]).css("background-color");
+ var elemName = spans[1].innerHTML;
+
+ if (elemName == "Hide Right bar" || elemName == "Hide Left bar") {
+ continue;
+ }
+
+ for (var j = 0; j < rectangles.length; j++) {
+ if (rectangles[j].elemName == elemName) {
+ ctx.globalAlpha = 0.8;
+ ctx.fillStyle = color;
+ var coords = rectangles[j].coords;
+ ctx.fillRect(coords[0], coords[1], coords[2], coords[3]);
+ ctx.globalAlpha = 1.0;
+ ctx.fillStyle = "white";
+ ctx.font = "14pt Helvetica";
+ ctx.fillText(datum, coords[0] + 10, coords[1] + 20);
+ break;
+ }
+ }
+ }
+ };
+ img.src = "fennec-ui-bw.png";
+
+ var x = 0;
+ var y = 0;
+ can.bind("mousedown", function(evt) {
+ x = evt.clientX - can.offset().left;
+ y = evt.clientY - can.offset().top;
+ });
+ can.bind("mouseup", function(evt) {
+ var endX = evt.clientX - can.offset().left;
+ var endY = evt.clientY - can.offset().top;
+
+ $("#debug").append(x + ", " + y + ", " + (endX - x) + ", " + (endY - y) + "<br/>");
+ });
+}
Oops, something went wrong.

0 comments on commit 4ddf3db

Please sign in to comment.