| index.htmlView |
|---|
| 1 … | +<!doctype html> |
| 2 … | +<html> |
|
| 3 … | +<head> |
| 4 … | +<meta charset=utf-8> |
| 5 … | +<title>ssb-activity</title> |
| 6 … | +<script src=common.js></script> |
| 7 … | +</head> |
| 8 … | +<body> |
| 9 … | +<div style="text-align:center"> |
| 10 … | + <h2>Daily active users</h2> |
| 11 … | + <img id=graph src=day.png alt="Graph of daily active feeds"> |
| 12 … | +</div> |
| 13 … | + |
| 14 … | +<script> |
| 15 … | + |
| 16 … | +var img = document.getElementById('graph') |
| 17 … | +var imgData, origImgData |
| 18 … | +var width, height |
| 19 … | + |
| 20 … | +var colors = { |
| 21 … | + yellow: [255, 255, 0, 255], |
| 22 … | + red: [255, 0, 0, 255], |
| 23 … | + black: [0, 0, 0, 255], |
| 24 … | + grey: [200, 200, 200, 255], |
| 25 … | + bg: [255, 255, 255, 0], |
| 26 … | + highlight: [0, 0, 0, 255] |
| 27 … | +} |
| 28 … | + |
| 29 … | +var canvas = document.createElement('canvas') |
| 30 … | +var ctx |
| 31 … | +function onImageLoad() { |
| 32 … | + width = canvas.width = img.width |
| 33 … | + height = canvas.height = img.height |
| 34 … | + ctx = canvas.getContext('2d') |
| 35 … | + ctx.drawImage(img, 0, 0) |
| 36 … | + imgData = ctx.getImageData(0, 0, width, height) |
| 37 … | + origImgData = ctx.getImageData(0, 0, width, height) |
| 38 … | + img.parentNode.insertBefore(canvas, img) |
| 39 … | + img.parentNode.removeChild(img) |
| 40 … | + canvas.style.maxWidth = '100%' |
| 41 … | +} |
| 42 … | +if (img.complete) onImageLoad() |
| 43 … | +else img.onload = onImageLoad |
| 44 … | + |
| 45 … | +function getPoint(e) { |
| 46 … | + return [ |
| 47 … | + Math.floor(e.offsetX * width / canvas.offsetWidth), |
| 48 … | + Math.floor(e.offsetY * height / canvas.offsetHeight) |
| 49 … | + ] |
| 50 … | +} |
| 51 … | + |
| 52 … | +function colorEquals(a, b) { |
| 53 … | + return a && b |
| 54 … | + && a[0] === b[0] |
| 55 … | + && a[1] === b[1] |
| 56 … | + && a[2] === b[2] |
| 57 … | +} |
| 58 … | + |
| 59 … | +function getPixel(x, y) { |
| 60 … | + var i = (y * width + x) << 2 |
| 61 … | + var data = origImgData.data |
| 62 … | + return [ |
| 63 … | + data[i], |
| 64 … | + data[i+1], |
| 65 … | + data[i+2], |
| 66 … | + data[i+3] |
| 67 … | + ] |
| 68 … | +} |
| 69 … | + |
| 70 … | +function setPixel(x, y, color) { |
| 71 … | + var i = (y * width + x) << 2 |
| 72 … | + var data = imgData.data |
| 73 … | + data[i] = color[0] |
| 74 … | + data[i+1] = color[1] |
| 75 … | + data[i+2] = color[2] |
| 76 … | + data[i+3] = 255 |
| 77 … | +} |
| 78 … | + |
| 79 … | +var prevColor |
| 80 … | + |
| 81 … | +function replaceColor(oldColor, newColor) { |
| 82 … | + for (var x = 0; x < width; x++) { |
| 83 … | + for (var y = height-1; y > 0; y--) { |
| 84 … | + var c = getPixel(x, y) |
| 85 … | + if (colorEquals(c, colors.bg)) break |
| 86 … | + if (colorEquals(c, oldColor)) { |
| 87 … | + setPixel(x, y, newColor) |
| 88 … | + break |
| 89 … | + } |
| 90 … | + } |
| 91 … | + } |
| 92 … | +} |
| 93 … | + |
| 94 … | +canvas.addEventListener('mousemove', function (e) { |
| 95 … | + var point = getPoint(e) |
| 96 … | + var color = getPixel(point[0], point[1]) |
| 97 … | + if (colorEquals(color, colors.black) |
| 98 … | + || colorEquals(color, colors.bg) |
| 99 … | + || colorEquals(color, prevColor)) return |
| 100 … | + if (prevColor) replaceColor(prevColor, prevColor) |
| 101 … | + replaceColor(color, colors.highlight) |
| 102 … | + prevColor = color |
| 103 … | + ctx.putImageData(imgData, 0, 0) |
| 104 … | +}, false) |
| 105 … | + |
| 106 … | +canvas.addEventListener('mouseout', function (e) { |
| 107 … | + if (prevColor) replaceColor(prevColor, prevColor) |
| 108 … | + ctx.putImageData(imgData, 0, 0) |
| 109 … | + prevColor = null |
| 110 … | +}, false) |
| 111 … | + |
| 112 … | +</script> |
| 113 … | +</body> |
| 114 … | +</html> |