ipcollage/index.html at master · aphid/ipcollage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE HTML>
<html>

<head>
  <style type="text/css">
    body {
      background-color: #000;
    }

    canvas {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 512px;
      height: 512px;
      margin-top: -256px;
      /* Half the height */
      margin-left: -256px;
      /* Half the width */
    }
  </style>
  <title></title>


</head>

<body>
  <div style="text-align: center;">
    <canvas width="512" height="512"></canvas>
  </div>

  <script type="text/javascript">
    var mostrecent = [];
    var lasttimestamp = 1;

    window.setInterval("fetchIPs()", 15000);

    async function fetchIPs() {
      var lastip;
      let data = await fetch("ipcollage.php?time=" + lasttimestamp);
      data = await data.json();
      if (lasttimestamp == 1) {
        document.title = data.visits[data.visits.length - 1].ip;
      }
      for (let visit of data.visits)
        if (visit.timestamp > lasttimestamp) {
          drawIP(visit.ip);
          lasttimestamp = visit.timestamp;
        }


    }


    function drawIP(ip) {
      var splitip = ip.split(".");
      var r = splitip[0];
      var x = splitip[0];
      var g = splitip[1];
      var y = splitip[1];
      var b = splitip[2];
      var w = splitip[2];
      var a = splitip[3] / 255;
      var h = splitip[3];
      var canvas = document.querySelector("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
        ctx.fillRect(x, y, w, h);
      }

    }
  </script>
</body>

</html>