Test page for test data and clean up

master
Jamie Munro 2 years ago
parent fe26a28fc8
commit b60f542093
  1. 654
      static/p5/sketch-test.js
  2. 13
      test.html

@ -0,0 +1,654 @@
//Global variables
let font;
let regions;
let info;
let serviceIcons = {}
let weatherIcons = {}
let cluster = {};
//weather
let flashActive = false;
let offColor;
let flashColor;
let flashTime = 0;
let flashInterval = 1000;
//messages
let msgIndex = 0;
let msgTime = 0;
let msgInterval = 2000;
//traffic
let redThreshold = 5;
let redTraffic;
let orangeThreshold = 30;
let orangeTraffic;
let yellowThreshold = 50;
let yellowTraffic;
let greenTraffic;
function preload() {
font = loadFont("/static/font/transport/Transport.ttf");
regions = loadJSON("/static/p5/regions.json");
//load weather icons
weatherIcons["cloud"] = loadImage("/static/icons/weather/cloud.png")
weatherIcons["day"] = loadImage("/static/icons/weather/day.png")
weatherIcons["fog"] = loadImage("/static/icons/weather/fog.png")
weatherIcons["ice"] = loadImage("/static/icons/weather/ice.png")
weatherIcons["night"] = loadImage("/static/icons/weather/night.png")
weatherIcons["rain"] = loadImage("/static/icons/weather/rain.png")
weatherIcons["snow"] = loadImage("/static/icons/weather/snow.png")
weatherIcons["sunrise"] = loadImage("/static/icons/weather/sunrise.png")
weatherIcons["sunset"] = loadImage("/static/icons/weather/sunset.png")
weatherIcons["wind"] = loadImage("/static/icons/weather/wind.png")
getData();
}
function setup() {
let canvas = createCanvas(windowWidth, windowHeight);
canvas.id("p5-canvas");
textFont(font);
//timers
msgTime = millis();
flashTime = millis();
//flash colors
offColor = color(255, 255, 255);
flashColor = color(227, 24, 55);
//traffic colors
redTraffic = color(255, 0, 0);
orangeTraffic = color(235, 149, 52);
yellowTraffic = color(242, 238, 7);
greenTraffic = color(0, 255, 00);
}
function draw() {
getData();
background(255, 255, 255);
drawConditions();
drawSpeed();
drawTraffic();
drawServices();
drawMessage();
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
function getData() {
info = {
"dynamicConditions": {
"time":"23:36",
"temperature":-5,
"night":true,
"timeTo":7,
"timeToUnit":"HOURS",
"weather":"SNOW"
},
"staticConditions":
{"defaultWeatherMessage":"Please drive carefully.",
"snowMessage":"SNOW WARNING! Take care.",
"iceMessage":"ICE WARNING! Take care.",
"fogMessage":"FOG WARNING! Use fog lights.",
"rainMessage":"WET SURFACE! Slow down.",
"windMessage":"HIGH WINDS! Take care.",
"nightMessage":"Turn on your headlights."
},
"speed":"40",
"messages": [
"SNOW MAKES IT HARDER TO CONTROL YOUR CAR.",
],
"services":{
"distance":45,
"name":"Fleet Services",
"petrol":205,
"diesel":220,
"electricity":15,
"icons":[
"/static/icons/services/burger_king.png",
"/static/icons/services/kfc.png",
"/static/icons/services/MS.png",
"/static/icons/services/wild_bean.png",
"/static/icons/services/air1.png",
"/static/icons/services/car_Wash.png"
]
}
}
//load any service icons
for (let i = 0; i < info.services.icons.length; i++) {
let url = info.services.icons[i];
if (serviceIcons[url] == undefined) {
serviceIcons[url] = loadImage(url);
}
}
cluster = [
{
"url":"http://localhost:3000",
"speed": {"averageSpeedMs":31,"averageSpeedMph":30}
},
{
"url":"http://localhost:3001",
"speed": {"averageSpeedMs":31,"averageSpeedMph":30}
},
{
"url":"http://localhost:3002",
"speed": {"averageSpeedMs":31,"averageSpeedMph":30}
}
]
}
function drawConditions() {
dimensions = regions.conditions;
x = dimensions.a.x * windowWidth;
y = dimensions.a.y * windowHeight;
w = dimensions.d.x * windowWidth - dimensions.a.x * windowWidth;
h = dimensions.d.y * windowHeight - dimensions.a.y * windowHeight;
noStroke();
fill(0, 112, 60);
rectMode(CORNER);
rect(x, y, w, h);
let dynamicConditions = info.dynamicConditions;
let staticConditions = info.staticConditions;
//time label
lw = 0.1 * w;
lh = 0.2 * h;
label = "TIME";
size = 0.6*sqrt((lw*lh)/label.length);
textSize(size);
fill(255, 255, 255)
textAlign(CENTER);
text(label, x, y + h * 0.1, lw, lh);
//time
tw = 0.1 * w;
th = 0.6 * h;
size = 0.8*sqrt((tw*th)/dynamicConditions.time.length);
textSize(size);
text(dynamicConditions.time, x, y + (0.1*h) + 1.1*lh, tw, th);
//temperature label
label = "TEMP";
size = 0.6*sqrt((lw*lh)/label.length);
textSize(size);
text(label, x + tw, y + h * 0.1, lw, lh);
//temperature
let temp = Math.round(dynamicConditions.temperature) + "°C";
size = 0.8*sqrt((tw*th)/temp.length);
textSize(size);
text(temp, x + tw, y + (0.1*h) + 1.1*lh, tw, th);
//sunrise/sunset
if (dynamicConditions.night) {
label = "SUNRISE";
}
else {
label = "SUNSET";
}
//timeTo label
size = 0.6*sqrt((lw*lh)/label.length);
textSize(size);
text(label, x + 2*tw, y + h * 0.1, lw, lh);
//timeTo
tw = 0.1 * w;
th = 0.4 * h;
size = 0.7*sqrt((tw*th)/2);
textSize(size);
text(dynamicConditions.timeTo, x + 2*tw, y + (0.1*h) + 1.1*lh, tw, th);
//timeTo unit
size = 0.6*sqrt((lw*lh)/label.length);
textSize(size);
label = dynamicConditions.timeToUnit;
if (dynamicConditions.timeTo == 1) label = label.slice(0, -1);
text(label, x + 2*tw, y + (0.1*h) + 1.1*lh + 1.1*th, lw, lh);
//weather label
lw = 0.2 * w;
lh = 0.2 * h;
label = "WEATHER";
size = 0.6*sqrt((lw*lh)/label.length);
textSize(size);
fill(255, 255, 255)
textAlign(CENTER);
text(label, x + 3*tw, y + h * 0.1, lw, lh);
//weather
ww = 0.2 * w;
wh = 0.6 * h;
size = 0.7*sqrt((ww*wh)/dynamicConditions.weather.length);
textSize(size);
text(dynamicConditions.weather, x + 3*tw, y + (0.1*h) + 1.1*lh, ww, wh);
//weather icon
let weatherIcon;
//select icon (order of precedent)
if (dynamicConditions.weather.includes("SNOW")) {
weatherIcon = weatherIcons["snow"];
}
else if (dynamicConditions.temperature <= 0) {
weatherIcon = weatherIcons["ice"];
}
else if (dynamicConditions.weather.includes("FOG")) {
weatherIcon = weatherIcons["fog"];
}
else if (dynamicConditions.weather.includes("WIND")) {
weatherIcon = weatherIcons["wind"];
}
else if (dynamicConditions.weather.includes("RAIN")) {
weatherIcon = weatherIcons["rain"];
}
else {
if (dynamicConditions.night) {
if ((dynamicConditions.timeToUnit == "MINS") || (dynamicConditions.timeTo == "1")) {
weatherIcon = weatherIcons["sunrise"];
}
else {
weatherIcon = weatherIcons["night"];
}
}
else {
if ((dynamicConditions.timeToUnit == "MINS") || (dynamicConditions.timeTo == "1")) {
weatherIcon = weatherIcons["sunset"];
}
else if (dynamicConditions.weather.includes("CLOUDY")) {
weatherIcon = weatherIcons["cloud"];
}
else {
weatherIcon = weatherIcons["day"];
}
}
}
ix = x + 3*tw + ww + 0.01 * w;
iy = y + 0.1 * h;
iw = 0.08 * w;
ih = 0.8 * h;
imageMode(CORNER);
weatherIcon.resize(0, ih);
image(weatherIcon, ix, iy);
//weather message
let flash = false;
let message = staticConditions.defaultWeatherMessage;
if (dynamicConditions.weather.includes("SNOW")) {
message = staticConditions.snowMessage;
flash = true;
}
else if (dynamicConditions.temperature <= 0) {
message = staticConditions.iceMessage;
flash = true;
}
else if (dynamicConditions.weather.includes("FOG")) {
message = staticConditions.fogMessage;
flash = true;
}
else if (dynamicConditions.weather.includes("RAIN")) {
message = staticConditions.rainMessage;
}
else if (dynamicConditions.weather.includes("WIND")) {
message = staticConditions.windMessage;
}
else if (dynamicConditions.night) {
message = staticConditions.nightMessage;
}
mx = ix + iw;
my = iy + 0.2*h;
mw = 0.4 * w;
mh = 0.8 * h;
size = 0.8*sqrt((mw*mh)/message.length);
textSize(size);
if (flashActive) fill(flashColor);
else fill(offColor);
text(message, mx, my, mw, mh);
if (flash) {
let time = millis();
if (time - flashTime > flashInterval) {
flashActive = !flashActive;
flashTime = time;
}
}
else {
flashActive = false;
}
stroke(0);
}
function drawSpeed() {
dimensions = regions.speed;
x = dimensions.a.x * windowWidth;
y = dimensions.a.y * windowHeight;
w = dimensions.d.x * windowWidth - dimensions.a.x * windowWidth;
h = dimensions.d.y * windowHeight - dimensions.a.y * windowHeight;
noStroke();
fill(148, 142, 142);
rectMode(CORNER);
rect(x, y, w, h);
//outer circle
cx = x + w/2;
cy = y + h/2;
r1 = Math.min(w, h) * 0.99;
fill(227, 24, 55);
if (info.speed == "national") fill(0, 0, 0);
circle(cx, cy, r1);
//inner circle
r2 = r1 * 0.8;
fill(255, 255, 255);
circle(cx, cy, r2);
//speed
if (info.speed != "national") {
fill(0, 0, 0);
size = r2 * 0.7;
textSize(size);
textAlign(CENTER);
text(info.speed, cx + size/25, cy + size/2);
}
else {
stroke(0,0,0);
strokeWeight(r1 - r2);
x1 = cx + (0.5 * r2 * Math.cos(3 * Math.PI / 4));
y1 = cy + (0.5 * r2 * Math.sin(3 * Math.PI / 4));
x2 = cx + (0.5 * r2 * Math.cos(7 * Math.PI / 4));
y2 = cy + (0.5 * r2 * Math.sin(7 * Math.PI / 4));
line(x1, y1, x2, y2);
strokeWeight(1);
}
stroke(0); //defaultmsgTime
}
function getTrafficColor(speed) {
if (speed <= redThreshold) return redTraffic;
else if (speed <= orangeThreshold) return orangeTraffic;
else if (speed <= yellowThreshold) return yellowTraffic;
else return greenTraffic;
}
function drawTraffic() {
dimensions = regions.traffic;
x = dimensions.a.x * windowWidth;
y = dimensions.a.y * windowHeight;
w = dimensions.d.x * windowWidth - dimensions.a.x * windowWidth;
h = dimensions.d.y * windowHeight - dimensions.a.y * windowHeight;
noStroke();
fill(61, 58, 51);
rectMode(CORNER);
rect(x, y, w, h);
let station0;
let station1;
let station2;
for (let i = 0; i < cluster.length; i++) {
let station = cluster[i];
if (station.speed == undefined) station.speed = {"averageSpeedMph":70};
if (station.url.includes("3000")) {
station0 = station;
station0.dimensions = {};
}
else if (station.url.includes("3001")) {
station1 = station;
station1.dimensions = {};
}
else if (station.url.includes("3002")) {
station2 = station;
station2.dimensions = {};
}
}
let r = w*0.05;
//calculate dimensions
station0.dimensions.x1 = x + 0.5 * w;
station0.dimensions.y1 = y + h;
station0.dimensions.x2 = station0.dimensions.x1;
station0.dimensions.y2 = station0.dimensions.y1 - 0.5 * h;
station0.dimensions.cx = station0.dimensions.x1 + 1.5*r;
station0.dimensions.cy = station0.dimensions.y1 - 0.5*Math.abs(station0.dimensions.y2 - station0.dimensions.y1);
// station0.dimensions.tx1 = station0.dimensions.x1;
// station0.dimensions.ty1 = station0.dimensions.y1 - 0.5*Math.abs(station0.dimensions.y2 - station0.dimensions.y1) - 0.75*r;
// station0.dimensions.tx2 = station0.dimensions.x1 + 0.45 * r;
// station0.dimensions.ty2 = station0.dimensions.ty1 + 0.75*r;
// station0.dimensions.tx3 = station0.dimensions.x1 - 0.45 * r;
// station0.dimensions.ty3 = station0.dimensions.ty1 + 0.75*r;
station1.dimensions.x1 = station0.dimensions.x2;
station1.dimensions.y1 = station0.dimensions.y2;
station1.dimensions.x2 = station1.dimensions.x1 - 0.3 * w;
station1.dimensions.y2 = 1.3*y;
station1.dimensions.cx = station1.dimensions.x1 - 6*r;
station1.dimensions.cy = station1.dimensions.y1 - 0.5*Math.abs(station1.dimensions.y2 - station1.dimensions.y1);
// station1.dimensions.tx1 = station1.dimensions.x1 - 0.5*Math.abs(station1.dimensions.x2 - station1.dimensions.x1) - 0.75*r;;
// station1.dimensions.ty1 = station1.dimensions.y1 - 0.5*Math.abs(station1.dimensions.y2 - station1.dimensions.y1) - 0.75*r;
// station1.dimensions.tx2 = station1.dimensions.x1 + 0.45 * r;
// station1.dimensions.ty2 = station1.dimensions.ty1 + 0.75*r;
// station1.dimensions.tx3 = station1.dimensions.x1 - 0.45 * r;
// station1.dimensions.ty3 = station1.dimensions.ty1 + 0.75*r;
station2.dimensions.x1 = station0.dimensions.x2;
station2.dimensions.y1 = station0.dimensions.y2;
station2.dimensions.x2 = station2.dimensions.x1 + 0.3 * w;
station2.dimensions.y2 = 1.3*y;
station2.dimensions.cx = station2.dimensions.x1 + 6*r;
station2.dimensions.cy = station2.dimensions.y1 - 0.5*Math.abs(station2.dimensions.y2 - station2.dimensions.y1);
// station2.dimensions.tx1 = station2.dimensions.x1;
// station2.dimensions.ty1 = station2.dimensions.y1 - 0.5*Math.abs(station2.dimensions.y2 - station2.dimensions.y1) - 0.75*r;
// station2.dimensions.tx2 = station2.dimensions.x1 + 0.45 * r;
// station2.dimensions.ty2 = station2.dimensions.ty1 + 0.75*r;
// station2.dimensions.tx3 = station2.dimensions.x1 - 0.45 * r;
// station2.dimensions.ty3 = station2.dimensions.ty1 + 0.75*r;
strokeCap(SQUARE);
//draw traffic conditions
strokeWeight(w * 0.07);
stroke(getTrafficColor(station0.speed.averageSpeedMph));
line(station0.dimensions.x1, station0.dimensions.y1, station0.dimensions.x2, station0.dimensions.y2);
stroke(getTrafficColor(station1.speed.averageSpeedMph));
line(station1.dimensions.x1, station1.dimensions.y1, station1.dimensions.x2, station1.dimensions.y2);
stroke(getTrafficColor(station2.speed.averageSpeedMph));
line(station2.dimensions.x1, station2.dimensions.y1, station2.dimensions.x2, station2.dimensions.y2);
//draw roads
stroke(0);
strokeWeight(w * 0.04);
line(station0.dimensions.x1, station0.dimensions.y1, station0.dimensions.x2, station0.dimensions.y2);
line(station1.dimensions.x1, station1.dimensions.y1, station1.dimensions.x2, station1.dimensions.y2);
line(station2.dimensions.x1, station2.dimensions.y1, station2.dimensions.x2, station2.dimensions.y2);
//draw midlines
stroke(255);
drawingContext.setLineDash([10, 10]); //dashed line
strokeWeight(w * 0.005);
line(station0.dimensions.x1, station0.dimensions.y1, station0.dimensions.x2, station0.dimensions.y2);
line(station1.dimensions.x1, station1.dimensions.y1, station1.dimensions.x2, station1.dimensions.y2);
line(station2.dimensions.x1, station2.dimensions.y1, station2.dimensions.x2, station2.dimensions.y2);
drawingContext.setLineDash([]); // reset into "solid line" mode
//draw speeds
//outer circles
noStroke();
fill(227, 24, 55);
circle(station0.dimensions.cx, station0.dimensions.cy, r);
circle(station1.dimensions.cx, station1.dimensions.cy, r);
circle(station2.dimensions.cx, station2.dimensions.cy, r);
//inner circles
let r2 = r * 0.8;
fill (255, 255, 255);
circle(station0.dimensions.cx, station0.dimensions.cy, r2);
circle(station1.dimensions.cx, station1.dimensions.cy, r2);
circle(station2.dimensions.cx, station2.dimensions.cy, r2);
//speed
fill(0, 0, 0);
let size = r2 * 0.7;
textSize(size);
textAlign(CENTER);
text(Math.round(station0.speed.averageSpeedMph), station0.dimensions.cx + size/25, station0.dimensions.cy + size/2);
text(Math.round(station1.speed.averageSpeedMph), station1.dimensions.cx + size/25, station1.dimensions.cy + size/2);
text(Math.round(station2.speed.averageSpeedMph), station2.dimensions.cx + size/25, station2.dimensions.cy + size/2);
let localStation;
for (let i = 0; i < cluster.length; i++) {
let station = cluster[i];
if (window.location.origin == station.url) {
localStation = station;
}
}
//position indicator
let mx = (localStation.dimensions.x1 + localStation.dimensions.x2)/2;
let my = (localStation.dimensions.y1 + localStation.dimensions.y2)/2;
noStroke();
strokeWeight(2);
fill(3, 227, 252);
circle(mx, my, 50);}
function drawServices() {
dimensions = regions.services;
x = dimensions.a.x * windowWidth;
y = dimensions.a.y * windowHeight;
w = dimensions.d.x * windowWidth - dimensions.a.x * windowWidth;
h = dimensions.d.y * windowHeight - dimensions.a.y * windowHeight;
noStroke();
fill(0, 121, 193);
rectMode(CORNER);
rect(x, y, w, h);
let services = info.services;
//title
tw = 0.99*w;
th = 0.195*h;
title = "Next Services: " + services.distance + " miles"
size = 0.8*sqrt((tw*th)/title.length);
textSize(size);
fill(255, 255, 255)
textAlign(LEFT);
textStyle(BOLD);
text(title, 1.01*x, y, tw, th);
//name
textStyle(NORMAL);
text(services.name, 1.01*x, y+th, tw/2, th);
//fuel
//labels
fw = 0.25 * tw;
fh = th;
text("Petrol:", 1.01*x, y+2*th, fw, fh);
text("Diesel:", 1.01*x, y+3*th, fw, fh);
text("Electric:", 1.01*x, y+4*th, fw, fh);
//prices
petrol = services.petrol != 0 ? services.petrol + "p" : "n/a";
text(petrol, 1.01*x + fw, y+2*th, fw, fh);
diesel = services.diesel != 0 ? services.diesel + "p" : "n/a";
text(diesel, 1.01*x + fw, y+3*th, fw, fh);
electric = services.electricity != 0 ? services.electricity + "p" : "n/a";
text(electric, 1.01*x + fw, y+4*th, fw, fh);
//icons
startX = 1.01*x + 2*fw;
startY = y + 2*th;
aw = w - startX;
ah = y+h - startY;
rows = 2;
cols = 4;
if (services.icons.length < 4) {
rows = 1;
cols = services.icons.length
}
else if (services.icons.length < 8) {
if (services.icons.length % rows == 0) {
cols = services.icons.length / rows;
}
}
iw = 0.99 * (aw / cols);
ih = 0.99 * (ah / rows);
msgTime
currentRow = 0;
for (let i = 0; i < services.icons.length; i++) {
let icon = serviceIcons[services.icons[i]];
let currentCol = i - (currentRow*cols);
ix = startX + currentCol * iw;
iy = startY + currentRow * ih;
image(icon, ix, iy, iw, ih);
if (currentCol + 1 > cols - 1) currentRow++;
}
}
function drawMessage() {
dimensions = regions.message;
x = dimensions.a.x * windowWidth;
y = dimensions.a.y * windowHeight;
w = dimensions.d.x * windowWidth - dimensions.a.x * windowWidth;
h = dimensions.d.y * windowHeight - dimensions.a.y * windowHeight;
//rectange
noStroke();
fill(0, 0, 0);
rectMode(CORNER);
rect(x, y, w, h);
//message
fill(250, 166, 52)
size = 0.8*sqrt((w*h)/info.messages[msgIndex].length);
textSize(size);
textAlign(LEFT);
text(info.messages[msgIndex], 1.01*x, 1.01*y, 0.99*w, 0.99*h);
stroke(0); //default
let time = millis();
if (time - msgTime > msgInterval) {
msgTime = time;
msgIndex++;
if (msgIndex == info.messages.length) msgIndex = 0;
}
}

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="/static/style/global.css">
<script language="javascript" type="text/javascript" src="/static/lib/p5.js"></script>
<script language="javascript" type="text/javascript" src="/static/js/helper.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript" src="/static/p5/sketch-test.js"></script>
</body>
</html>
Loading…
Cancel
Save