Commit b866fb2a authored by Peter H. Jin's avatar Peter H. Jin
Browse files

Add IP color app

parent c1ebf85e
Pipeline #189913986 passed with stage
in 32 seconds
<html>
<head>
<script type="text/javascript" src="iputil.js"></script>
<script type="text/javascript">
function drawTextWithAnchor(ctx, text, x, y, anchor) {
let textM = ctx.measureText(text).width;
ctx.fillText(text, x - (textM * anchor), y);
}
function ipColor() {
let ip = document.getElementById("ipAddress").value;
let ip_x = my_iputil.expandIPv6(ip);
if (!ip_x) {
alert("Invalid IP address");
return false;
}
let c = document.getElementById("ipcolor");
let ctx = c.getContext("2d");
let gradient = ctx.createLinearGradient(0, 0, 640, 0);
let a = [0, 0, 0, 0];
gradient.addColorStop(0, "#" + (a[0] = ip_x[1] + ip_x[2].substring(0, 2)));
gradient.addColorStop(0.33, "#" + (a[1] = ip_x[2].substring(2, 4) + ip_x[3]));
gradient.addColorStop(0.66, "#" + (a[2] = ip_x[4] + ip_x[5].substring(0, 2)));
gradient.addColorStop(1, "#" + (a[3] = ip_x[6].substring(2, 4) + ip_x[7]));
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 640, 440);
ctx.fillStyle = "white";
ctx.fillRect(0, 440, 640, 480);
ctx.fillStyle = "black";
ctx.font = '24px serif';
drawTextWithAnchor(ctx, a[0], 0, 470, 0);
drawTextWithAnchor(ctx, a[1], 213, 470, 0.5);
drawTextWithAnchor(ctx, a[2], 427, 470, 0.5);
drawTextWithAnchor(ctx, a[3], 640, 470, 1);
}
var myIP = "";
function fillMyIP() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) myIP = String(JSON.parse(xhr.responseText).remoteIP || "2001:db8::1");
}
xhr.open("GET", "https://vm6-superhost.srv.peterjin.org/time");
xhr.send(null);
}
</script>
<title>What color is my IP address?</title>
</head>
<body onload="fillMyIP();">
<p>Enter an IP address to view its color: <input type="text" size=40 id="ipAddress" /><br />
<a href="javascript:document.getElementById('ipAddress').value=myIP;void(0);">Fill with my IP address</a>
<input type="submit" value="View color" onclick="ipColor(); return false;" /></p>
<p><canvas id="ipcolor" width="640" height="480"></canvas></p>
<p>Copyright 2020 Peter H. Jin. Inspired by <a href="https://www.vyncke.org/myipcolor.php">Eric Vyncke</a>.</p>
</body>
</html>
var my_iputil = {};
my_iputil.expandIPv6 = function(ostr) {
let expandZero = function(i, n) {
let s = String(i);
while (s.length < n) {
s = "0" + s;
}
return s;
}
let str = String(ostr);
let m = str.match(/^(.*):([0-9]+)\.([0-9]+)\.([0-9]+)\.([0-9]+)$/);
if (m) {
let a = [Number(m[2]), Number(m[3]), Number(m[4]), Number(m[5])];
if (!(a[0] < 256)) return null;
if (!(a[1] < 256)) return null;
if (!(a[2] < 256)) return null;
if (!(a[3] < 256)) return null;
str = m[1] + ":" + (a[0] * 256 + a[1]).toString(16) + ":" + (a[2] * 256 + a[3]).toString(16);
}
if (str === "::") return ["0000", "0000", "0000", "0000", "0000", "0000", "0000", "0000"];
m = str.match(/^[0-9a-fA-F:]*$/);
if (!m) return null;
let dc1 = str.indexOf("::");
let dc2 = str.lastIndexOf("::");
if (dc1 !== dc2) return null;
if (dc1 >= 0) {
/* count the number of :'s, there should be exactly 7. */
let nr_colon = -2;
for (let i of str) {
if (i === ':') nr_colon++;
}
if (nr_colon < 0 || nr_colon > 6) return null;
let fix_l = ["0:", "0:0:", "0:0:0:", "0:0:0:0:", "0:0:0:0:0:", "0:0:0:0:0:0:", "0:0:0:0:0:0:0:"];
let fix_c = [":", ":0:", ":0:0:", ":0:0:0:", ":0:0:0:0:", ":0:0:0:0:0:", ":0:0:0:0:0:0:"];
let fix_r = [":0", ":0:0", ":0:0:0", ":0:0:0:0", ":0:0:0:0:0", ":0:0:0:0:0:0", ":0:0:0:0:0:0:0"];
let which_p = (dc1 === 0 ? fix_l : dc1 === (str.length - 2) ? fix_r : fix_c)[6 - nr_colon];
str = str.replace("::", which_p);
}
str = str.toLowerCase();
let p = /^([0-9a-f]{1,4}):([0-9a-f]{1,4}):([0-9a-f]{1,4}):([0-9a-f]{1,4}):([0-9a-f]{1,4}):([0-9a-f]{1,4}):([0-9a-f]{1,4}):([0-9a-f]{1,4})$/;
let x = str.match(p);
if (x) {
let r = [];
for (let i = 1; i <= 8; i++) {
r.push(expandZero(x[i], 4));
}
return r;
}
return null;
}
// exports.iputil = my_iputil;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment