iot-with-document-store-db

git clone git://git.codymlewis.com/iot-with-document-store-db.git
Log | Files | Refs | README

index.js (3292B)


      1 var sensorMap = document.getElementById('sensor-map');
      2 var sensorMapCtx = sensorMap.getContext('2d');
      3 var frames = undefined;
      4 var frameRate = 20;
      5 var maxX = 65;
      6 var maxY = 65;
      7 var sensors = new Map();
      8 var canvasMap = createMap();
      9 window.addEventListener('resize', resizeCanvas, false);
     10 
     11 window.onload = () => {
     12     constructMap();
     13 }
     14 
     15 sensorMap.addEventListener('click', (event) => {
     16     var xDiv = (window.innerWidth * 0.8) / maxX;
     17     var yDiv = (window.innerWidth * 0.8) / maxY;
     18     var x = Math.floor(((event.pageX - sensorMap.offsetLeft) / (xDiv)));
     19     var y = Math.floor(((event.pageY - sensorMap.offsetTop) / (yDiv)));
     20     if (sensors[x] !== undefined && sensors[x][y] !== undefined) {
     21         window.location = `/nodes/${sensors[x][y].id}`;
     22     }
     23 });
     24 
     25 function createMap() {
     26     var newMap = []
     27     for (var i = 0; i < maxX; ++i) {
     28         var row = []
     29         for(var j = 0; j < maxY; ++j) {
     30             if(Math.random() * 100 < 75) {
     31                 row[j] = "#0F0";
     32             } else {
     33                 row[j] = "#00F";
     34             }
     35         }
     36         newMap[i] = row;
     37     }
     38     return newMap;
     39 }
     40 
     41 function constructMap() {
     42     resizeCanvas();
     43     getAllSensors();
     44 }
     45 
     46 function resizeCanvas() {
     47     sensorMap.width = window.innerWidth * 0.8;
     48     sensorMap.height = window.innerHeight * 0.8;
     49     if (frames !== undefined) {
     50         clearInterval(frames);
     51     }
     52     frames = setInterval(() => { drawFrame(); }, frameRate);
     53 }
     54 
     55 function getAllSensors() {
     56     var xhttp = new XMLHttpRequest();
     57     xhttp.onreadystatechange = function() {
     58         if (this.readyState == 4 && this.status == 200) {
     59             var sensorsData = eval(`(${xhttp.responseText})`);
     60             for (let i in sensorsData['docs']) {
     61                 sensor = sensorsData['docs'][i]
     62                 if (sensors[sensor.x] === undefined) {
     63                     sensors[sensor.x] = new Map();
     64                 }
     65                 sensors[sensor.x][sensor.y] = new Thing(sensor.id, sensor.x, sensor.y, sensor.type);
     66             }
     67         }
     68     };
     69     xhttp.open("GET", `/node-data`, true);
     70     xhttp.send();
     71 }
     72 
     73 function drawFrame() {
     74     var xDiv = (window.innerWidth * 0.8) / maxX;
     75     var yDiv = (window.innerWidth * 0.8) / maxY;
     76     for (var x = 0; x < maxX; ++x) {
     77         for (var y = 0; y < maxY; ++y) {
     78             sensorMapCtx.fillStyle = canvasMap[x][y];
     79             sensorMapCtx.fillRect(x * xDiv, y * yDiv, xDiv, yDiv);
     80             if (sensors[x] !== undefined && sensors[x][y] !== undefined) {
     81                 sensorMapCtx.fillStyle = "#CCC";
     82                 sensorMapCtx.fillRect(x * xDiv, y * yDiv, xDiv, yDiv);
     83             }
     84         }
     85     }
     86 }
     87 
     88 class Thing {
     89     constructor(id, x, y, type) {
     90         this.id = id;
     91         this.x = x;
     92         this.y = y;
     93         this.type = type;
     94     }
     95 
     96     getData() {
     97         var data = null;
     98         var xhttp = new XMLHttpRequest();
     99         xhttp.onreadystatechange = function() {
    100             if (this.readyState == 4 && this.status == 200) {
    101                 data = eval(`(${xhttp.responseText})`);
    102             }
    103         };
    104         xhttp.open("POST", `http://127.0.0.1:5984/sensors/${this.id}`, true);
    105         xhttp.send();
    106         return sensors
    107     }
    108 
    109     toString() {
    110         return `Sensor: ${this.id}\nType: ${this.type}\nco-ordinates: ${this.x}, ${this.y}`
    111     }
    112 }