parent
fe26a28fc8
commit
b60f542093
2 changed files with 667 additions and 0 deletions
@ -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…
Reference in new issue