henine
/
wubloader
mirror of https://github.com/ekimekim/wubloader
1
0
Fork 0
Code Issues Releases Wiki Activity

Implement scaling

Browse Source
bus-progress-ui
ElementalAlchemist 2 weeks ago
parent b5a62e5a88
commit c3bde04f3c
3 changed files with 43 additions and 27 deletions
Show Stats Download Patch File Download Diff File

9
thrimbletrimmer/driveclock/drive.css
Unescape Escape View File

@ -0,0 +1,9 @@
#scale {
display: block;
margin-top: 20px;
}
#scale-disclaimer {
font-size: 75%;
font-style: italic;
}

7
thrimbletrimmer/driveclock/drive.html
Unescape Escape View File

@ -8,5 +8,12 @@
</head> </head>
<body> <body>
<canvas id="road" width="1920" height="100"></canvas> <canvas id="road" width="1920" height="100"></canvas>
<label id="scale">
Scale:
<input id="scale-input" type="number" value="1" min="0.1" step="0.1" />
</label>
<p id="scale-disclaimer">
Scale modifications will be applied on the next update, which occur every 10 seconds.
</p>
</body> </body>
</html> </html>

54
thrimbletrimmer/driveclock/drive.js
Unescape Escape View File

@ -37,11 +37,14 @@ const POINT_OFFSET = 17;
// at route start. This array can be looped every point. // at route start. This array can be looped every point.
const BUS_STOP_POSITIONS = [1, 55.2, 125.4, 166.3, 233.9, 295.2]; const BUS_STOP_POSITIONS = [1, 55.2, 125.4, 166.3, 233.9, 295.2];
// The default scaling factor is 20 seconds per pixel at max speed. const BUS_DAY_IMAGE = new Image();
// This gives us BUS_DAY_IMAGE.src = "bus_day.png";
// - 3px per minute const BUS_NIGHT_IMAGE = new Image();
// - 4px per mile BUS_NIGHT_IMAGE.src = "bus_night.png";
let scaleFactor = 1; const BUS_STOP_IMAGE = new Image();
BUS_STOP_IMAGE.src = "db_stop.png";
const POINT_IMAGE = new Image();
POINT_IMAGE.src = "point.png";
function nextPhase(timeOfDay) { function nextPhase(timeOfDay) {
switch (timeOfDay) { switch (timeOfDay) {
@ -107,10 +110,17 @@ async function drawRoad() {
drawBackground(context, timeOfDay, 0, BUS_FRONT_OFFSET); drawBackground(context, timeOfDay, 0, BUS_FRONT_OFFSET);
const maxWidth = 1920 - BUS_FRONT_OFFSET; const maxWidth = 1920 - BUS_FRONT_OFFSET;
// The default scaling factor (1) is 20 seconds per pixel at max speed.
// This gives us
// - 3px per minute
// - 4px per mile
let scaleFactor = +document.getElementById("scale-input").value;
if (scaleFactor === 0 || isNaN(scaleFactor)) {
scaleFactor = 1;
}
// TODO Figure out scaling factor
const startMinute = busData.clock_minutes; const startMinute = busData.clock_minutes;
const timeDuration = maxWidth / 3; const timeDuration = maxWidth / (3 * scaleFactor);
let previousTime = startMinute; let previousTime = startMinute;
let previousTimeOfDay = timeOfDay; let previousTimeOfDay = timeOfDay;
@ -126,7 +136,7 @@ async function drawRoad() {
} }
// TODO Figure out scaling factor // TODO Figure out scaling factor
const pixelWidth = thisDuration * 3; const pixelWidth = thisDuration * 3 * scaleFactor;
drawBackground(context, previousTimeOfDay, x, pixelWidth); drawBackground(context, previousTimeOfDay, x, pixelWidth);
remainingDuration -= thisDuration; remainingDuration -= thisDuration;
@ -144,22 +154,15 @@ async function drawRoad() {
distanceToNextPoint = 469.3 - currentPointProgress; distanceToNextPoint = 469.3 - currentPointProgress;
} }
// TODO Figure out scaling factor x += distanceToNextPoint * 4 * scaleFactor;
x += distanceToNextPoint * 4; context.drawImage(POINT_IMAGE, x - POINT_OFFSET, 0);
const pointImage = new Image();
pointImage.src = "point.png";
context.drawImage(pointImage, x - POINT_OFFSET, 0);
while (x < maxWidth) { while (x < maxWidth) {
// TODO Figure out scaling factor x += 360 * 4 * scaleFactor;
x += 360 * 4; context.drawImage(POINT_IMAGE, x - POINT_OFFSET, 0);
context.drawImage(pointImage, x - POINT_OFFSET, 0);
} }
const distanceOnRoute = (distance - 109.3) % 360; const distanceOnRoute = (distance - 109.3) % 360;
const busStopImage = new Image(); let distanceTracked = distanceOnRoute - BUS_FRONT_OFFSET / (4 * scaleFactor);
busStopImage.src = "db_stop.png";
// TODO Figure out scaling factor
let distanceTracked = distanceOnRoute - BUS_FRONT_OFFSET / 4;
if (distanceTracked < 0) { if (distanceTracked < 0) {
distanceTracked += 720; distanceTracked += 720;
} }
@ -178,18 +181,15 @@ async function drawRoad() {
} }
const nextBusStopDistance = nextBusStopPosition - distanceTrackedOnRoute; const nextBusStopDistance = nextBusStopPosition - distanceTrackedOnRoute;
distanceTracked += nextBusStopDistance; distanceTracked += nextBusStopDistance;
// TODO Figure out scaling factor x += nextBusStopDistance * 4 * scaleFactor;
x += nextBusStopDistance * 4; context.drawImage(BUS_STOP_IMAGE, x - BUS_STOP_OFFSET, 0);
context.drawImage(busStopImage, x - BUS_STOP_OFFSET, 0);
} }
const busImage = new Image();
if (timeOfDay === "night") { if (timeOfDay === "night") {
busImage.src = "bus_night.png"; context.drawImage(BUS_NIGHT_IMAGE, 0, 0);
} else { } else {
busImage.src = "bus_day.png"; context.drawImage(BUS_DAY_IMAGE, 0, 0);
} }
context.drawImage(busImage, 0, 0);
} }
window.addEventListener("DOMContentLoaded", (event) => { window.addEventListener("DOMContentLoaded", (event) => {

Write Preview
Loading…
Cancel
Save