initial commit

static/pp/pp.js

@@ -0,0 +1,182 @@
+(function() {
+    var canvas = document.getElementById("pp-canvas");
+    var ctx = canvas.getContext("2d");
+
+    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+    var radius = Math.min(w, h) * 2;
+    var radiusPeople = radius / 6;
+
+    canvas.width = w;
+    canvas.height = h;
+
+    ctx.translate(w / 2, h / 2);
+
+    var sliceToColor = [
+        '#ECEAE0',
+        '#AC2832',
+        '#CB8C1D',
+    ];
+
+    var sliceToRoom = [
+        'BAD',
+        'WOHNI',
+        'KÜCHE',
+    ]
+
+    var imageSrc = [
+        './felix.png',
+        './tobias.png',
+        './andre.png',
+    ];
+    // Bad, Küche, Wohni
+    var pathRooms = [];
+
+    function drawBackground(ctx, radius) {
+        sliceToColor.forEach(function (color, index) {
+            drawSlice(index, sliceToColor.length, color);
+        });
+    }
+
+    function drawSlice(num, total, color) {
+        var sliceSize = 360 / total;
+        var start = Math.PI * 2 * (((num - 1) * sliceSize) / 360);
+        var end = Math.PI * 2 * ((num * sliceSize) / 360);
+        let path = new Path2D();
+        ctx.beginPath(path)
+        path.moveTo(0, 0);
+        path.arc(0, 0, radius, start + 0.52, end + 0.52, false);
+        path.lineTo(0, 0);
+        ctx.fillStyle = color;
+        path.closePath();
+
+        if (pathRooms.length < total) {
+            pathRooms.push(path);
+        }
+
+        ctx.fill(path);
+    }
+
+    var secondsLoop = 3 * 7 * 24 * 60 * 60;
+
+    function degrees_to_radians(degrees) {
+        var pi = Math.PI;
+        return degrees * (pi/180);
+    }
+
+    function drawPeople() {
+        var now = Date.now() / 1000 - 4 * 60 * 60 * 24;
+        var part = now % secondsLoop;
+        var ang;
+        var num;
+        ctx.font = radiusPeople*0.15 + "px arial";
+        ctx.textBaseline="middle";
+        ctx.textAlign="center";
+        ctx.fillStyle = 'black';
+        var sliceSize = 360 / sliceToColor.length;
+
+        for(num = 0; num < sliceToColor.length; num++){
+            ang = Math.PI * 2 * ((num * sliceSize) / 360);
+            ang += degrees_to_radians((360 / secondsLoop) * part);
+
+            ctx.rotate(ang);
+            ctx.translate(0, -radiusPeople*0.85);
+            ctx.rotate(-ang);
+            ctx.drawImage(images[num], 0 - images[num].width / 2, 0 - images[num].height / 2, images[num].width, images[num].height);
+            ctx.rotate(ang);
+            ctx.translate(0, radiusPeople*0.85);
+            ctx.rotate(-ang);
+        }
+    }
+
+    function drawRoomNames() {
+        var ang;
+        var num;
+        var radiusCaptions = radiusPeople * 1.3;
+        ctx.font = radiusCaptions*0.15 + "px arial";
+        ctx.textBaseline="middle";
+        ctx.textAlign="center";
+        ctx.fillStyle = 'black';
+        var sliceSize = 360 / sliceToColor.length;
+
+        for(num = 0; num < sliceToColor.length; num++){
+            ang = Math.PI * 2 * ((num * sliceSize + sliceSize / 2) / 360);
+
+            ctx.rotate(ang);
+            ctx.translate(0, -radiusCaptions*0.85);
+            ctx.rotate(-ang);
+            ctx.fillText(sliceToRoom[num], 0, 0);
+            ctx.rotate(ang);
+            ctx.translate(0, radiusCaptions*0.85);
+            ctx.rotate(-ang);
+        }
+    }
+
+    function init() {
+        if (!isImgLoaded) {
+            return;
+        }
+
+        w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+        h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+        radius = Math.min(w, h) * 2;
+        radiusPeople = radius / 6;
+        canvas.width = w;
+        canvas.height = h;
+        ctx.translate(w / 2, h / 2);
+        isInitialized = true;
+        drawBackground();
+        drawRoomNames();
+        drawPeople();
+
+        canvas.addEventListener('mousemove', e => {
+            let bound = canvas.getBoundingClientRect();
+            let x = e.pageX - bound.top;
+            let y = e.pageY - bound.left;
+            activeRoom = false;
+            pathRooms.forEach((path, index) => {
+                if (ctx.isPointInPath(path, x, y)) {
+                    activeRoom = index;
+                }
+            });
+        });
+    }
+
+    window.onresize = init;
+
+    var isInitialized = false;
+    var isImgLoaded = false;
+    var images = imageSrc.map(function(){return false;});
+
+    function preloadImages() {
+        imageSrc.forEach(function(imgSrc, index) {
+            var newImg = new Image();
+            newImg.indexSrc = index;
+
+            newImg.onload = function() {
+                var factor = (newImg.width / radius) * 13;
+                newImg.width = newImg.width / factor;
+                newImg.height = newImg.height / factor;
+                images[index] = newImg;
+
+                isImgLoaded = images.reduce(function(acc, cur) {
+                    return acc && cur;
+                }, true)
+                init();
+            };
+
+            newImg.src = imgSrc;
+        });
+    }
+
+    preloadImages();
+
+    setInterval(function() {
+        if (!isInitialized) {
+            return;
+        }
+        drawBackground();
+        drawRoomNames();
+        drawPeople();
+    }, 1000);
+})();