zaphyra's git: oeffisearch

journeyCanvas: improve colors

Improve colors based on suggestions made by
[networkException](https://chaos.social/@networkexception)

Co-authored-by: networkException <git@nwex.de>

diff --git a/src/journeysCanvas.js b/src/journeysCanvas.js
@@ -13,24 +13,31 @@ export class JourneysCanvas extends BaseView {
 
 	static colors = {
 		fill: {
-			'tram': '#cc5555',
-			'subway': '#5555cc',
-			'suburban': '#55aa55',
-			'nationalExpress': '#fff',
-			'national': '#fff',
-			'regionalExpress': '#888',
-			'regional': '#888',
-			'bus': '#aa55aa',
-			default: '#888'
+			'tram': '205, 49, 49',
+			'subway': '21, 106, 184',
+			'suburban': '0, 111, 53',
+			'nationalExpress': '255, 255, 255',
+			'national': '255, 255, 255',
+			'regionalExpress': '169, 169, 169',
+			'regional': '169, 169, 169',
+			'bus': '163, 0, 124',
+			default: '136, 136, 136'
 		},
 		text: {
-			'nationalExpress': '#ee3333',
-			'national': '#ee3333',
-			default: '#fff'
+			'nationalExpress': '255, 0, 0',
+			'national': '255, 0, 0',
+			default: '255, 255, 255'
 		},
-		cancelFill: {
-			'tram': '#fff',
-			default: '#cc4444ff',
+		outline: {
+			'tram': '205, 49, 49',
+			'subway': '21, 106, 184',
+			'suburban': '0, 111, 53',
+			'nationalExpress': '255, 0, 0',
+			'national': '255, 0, 0',
+			'regionalExpress': '169, 169, 169',
+			'regional': '169, 169, 169',
+			'bus': '163, 0, 124',
+			default: '136, 136, 136'
 		},
 		icon: {
 			'walk': 'directions_walk',

@@ -285,6 +292,8 @@ export class JourneysCanvas extends BaseView {
 		}
 
 		canvasContext.clearRect(0, 0, canvasElement.width / this.canvasState.dpr, canvasElement.height / this.canvasState.dpr);
+
+		const radius = 2;
 		let x = this.canvasState.offsetX - this.viewState.indexOffset * this.canvasState.rectWidthWithPadding, y;
 
 		const firstVisibleJourney = Math.max(0, Math.floor((-x + this.canvasState.padding) / this.canvasState.rectWidthWithPadding));

@@ -329,18 +338,31 @@ export class JourneysCanvas extends BaseView {
 
 		let time = this.viewState.journeys[0].legs[0].plannedDeparture;
 
+		// times in background
+		canvasContext.save();
 		canvasContext.font = `${(window.innerWidth / this.canvasState.dpr) > 600 ? 20 : 15}px sans-serif`;
-		canvasContext.fillStyle = '#aaa';
+		canvasContext.fillStyle = '#f2f2f280';
+		canvasContext.strokeStyle = '#f2f2f280';
+		canvasContext.setLineDash([6, 4]);
+		canvasContext.lineWidth = .5;
 		while (time < this.canvasState.lastArrival) {
 			const y = (time - this.canvasState.firstDeparture) * this.canvasState.scaleFactor + 32;
+			canvasContext.beginPath();
 			canvasContext.fillText(time.formatTime(), (window.innerWidth / this.canvasState.dpr) > 600 ? 30 : 10, y);
-			canvasContext.fillRect(0, y, canvasElement.width / this.canvasState.dpr, 1);
-			time = new CustomDate(Number(time) + 3600000);//Math.floor(120/scaleFactor));
+			canvasContext.moveTo(0, y);
+			canvasContext.lineTo(canvasElement.width / this.canvasState.dpr, y);
+			canvasContext.stroke();
+			time = new CustomDate(Number(time) + 3600000); //Math.floor(120/scaleFactor));
 		}
+		canvasContext.restore();
 
-		canvasContext.fillStyle = '#fa5';
 		y = (new Date() - this.canvasState.firstDeparture) * this.canvasState.scaleFactor + 32;
-		canvasContext.fillRect(0, y-2, canvasElement.width / this.canvasState.dpr, 5);
+		canvasContext.strokeStyle = '#f2f2f280';
+		canvasContext.beginPath();
+		canvasContext.moveTo(0, y-2);
+		canvasContext.lineTo(canvasElement.width / this.canvasState.dpr, y);
+		canvasContext.stroke();
+
 
 		if (this.viewState.earlierRef) drawButton('earlier');
 

@@ -348,15 +370,22 @@ export class JourneysCanvas extends BaseView {
 			journey.legs.reverse();
 
 			journey.legs.forEach(leg => {
+				// draw delay boxes
 				if (Math.abs(leg.departureDelay) > 60 || Math.abs(leg.arrivalDelay) > 60) {
 					const duration = (leg.plannedArrival - leg.plannedDeparture) * this.canvasState.scaleFactor;
-
 					y = (leg.plannedDeparture - this.canvasState.firstDeparture) * this.canvasState.scaleFactor + 32;
 
-					canvasContext.fillStyle   = '#44444480';
-					canvasContext.strokeStyle = '#ffffff80';
-					canvasContext.fillRect(x - this.canvasState.padding, y, this.canvasState.rectWidth, duration);
-					canvasContext.strokeRect(x - this.canvasState.padding, y, this.canvasState.rectWidth, duration);
+					if (leg.walking || leg.transfer) {
+						canvasContext.fillStyle = '#77777780';
+						canvasContext.fillRect(x + this.canvasState.rectWidth / 2 - this.canvasState.rectWidth / 10, y, this.canvasState.rectWidth / 5, duration);
+					} else {
+						canvasContext.beginPath();
+						canvasContext.fillStyle   = '#44444480';
+						canvasContext.strokeStyle = `rgba(${this.getColor('outline', leg)}, .5)`;
+						canvasContext.fillRect(x+(radius/2), y-(radius/2), this.canvasState.rectWidth-radius, duration+radius);
+						canvasContext.roundRect(x, y, this.canvasState.rectWidth, duration, radius);
+						canvasContext.stroke();
+					}
 				}
 			});
 

@@ -372,26 +401,43 @@ export class JourneysCanvas extends BaseView {
 			journey.legs.forEach(leg => {
 				if (nextLeg && nextLeg.departure < leg.arrival) xOffset -= 5;
 
-				x += xOffset;
 				const duration = ((leg.arrival || leg.plannedArrival) - (leg.departure || leg.plannedDeparture)) * this.canvasState.scaleFactor;
 
+				x += xOffset;
 				y = ((leg.departure || leg.plannedDeparture) - this.canvasState.firstDeparture) * this.canvasState.scaleFactor + 32;
 
+
+				canvasContext.lineWidth = radius;
+
+				canvasContext.save();
+				canvasContext.beginPath();
 				if (leg.walking || leg.transfer) {
 					canvasContext.fillStyle = '#777';
 					canvasContext.fillRect(x + this.canvasState.rectWidth / 2 - this.canvasState.rectWidth / 10, y, this.canvasState.rectWidth / 5, duration);
 				} else {
-					canvasContext.fillStyle = this.getColor('fill', leg);
-					canvasContext.fillRect(x, y, this.canvasState.rectWidth, duration);
-					canvasContext.strokeStyle = this.getColor('text', leg);
-					canvasContext.strokeRect(x, y, this.canvasState.rectWidth, duration);
+					let opacityBackground = 1;
+
+					if (leg.cancelled) {
+						opacityBackground = .1;
+					}
+
+					canvasContext.fillStyle = `rgba(${this.getColor('fill', leg)}, ${opacityBackground})`;
+					canvasContext.strokeStyle = `rgb(${this.getColor('outline', leg)})`;
+					canvasContext.fillRect(x+(radius/2), y-(radius/2), this.canvasState.rectWidth-radius, duration+radius);
+					canvasContext.roundRect(x, y, this.canvasState.rectWidth, duration, radius);
 				}
+				canvasContext.stroke();
+				canvasContext.restore();
 
-				let preRenderedText = this.getTextCache(formatLineDisplayName(leg.line), this.getColor('text', leg));
+				let preRenderedText = this.getTextCache(formatLineDisplayName(leg.line), `rgb(${this.getColor('text', leg)})`);
 				let offset = duration / 2;
 				if ((offset + preRenderedText.height / this.canvasState.dpr) < duration - 5) {
 					canvasContext.scale(1 / this.canvasState.dpr, 1 / this.canvasState.dpr);
-					canvasContext.drawImage(preRenderedText, this.canvasState.dpr * (x + 5), Math.floor(this.canvasState.dpr * (y + offset) - preRenderedText.height / 2.3));
+					canvasContext.drawImage(
+						preRenderedText,
+						this.canvasState.dpr * (x + 5),
+						Math.floor(this.canvasState.dpr * (y + offset) - preRenderedText.height / 2.3)
+					);
 					canvasContext.scale(this.canvasState.dpr, this.canvasState.dpr);
 					offset += preRenderedText.height / this.canvasState.dpr / 1.3 + 5;
 				}

@@ -400,22 +446,16 @@ export class JourneysCanvas extends BaseView {
 					const preRenderedTypeText = this.getTextCache(typeText, '#555');
 					if ((offset + preRenderedText.height / this.canvasState.dpr) < duration) {
 						canvasContext.scale(1 / this.canvasState.dpr, 1 / this.canvasState.dpr);
-						canvasContext.drawImage(preRenderedTypeText, this.canvasState.dpr * (x + 5), Math.floor(this.canvasState.dpr * (y + offset) - preRenderedTypeText.height / 1.5));
+						canvasContext.drawImage(
+							preRenderedTypeText,
+							this.canvasState.dpr * (x + 5),
+							Math.floor(this.canvasState.dpr * (y + offset) - preRenderedTypeText.height / 1.5)
+						);
 						canvasContext.scale(this.canvasState.dpr, this.canvasState.dpr);
 						offset += preRenderedText.height / this.canvasState.dpr / 1.5;
 					}
 				});
 
-				if (leg.cancelled) {
-					canvasContext.beginPath();
-					canvasContext.moveTo(x, y);
-					canvasContext.lineTo(x + this.canvasState.rectWidth, y + duration);
-					canvasContext.strokeStyle = this.getColor('cancelFill', leg);
-					canvasContext.lineWidth = 5;
-					canvasContext.stroke();
-					canvasContext.lineWidth = 1;
-				}
-
 				/* draw journey start and end time */
 				// note: leg order is reversed at this point in time
 				const times = [];

@@ -424,12 +464,15 @@ export class JourneysCanvas extends BaseView {
 				times.forEach(([time, y]) => {
 					preRenderedText = this.getTextCache(time.formatTime(), '#fff', 15);
 					canvasContext.scale(1 / this.canvasState.dpr, 1 / this.canvasState.dpr);
-					canvasContext.drawImage(preRenderedText, Math.ceil(this.canvasState.dpr * (x + ((this.canvasState.rectWidth - preRenderedText.width/this.canvasState.dpr)) / 2)), this.canvasState.dpr * (y - 7.5));
+					canvasContext.drawImage(
+						preRenderedText,
+						Math.ceil(this.canvasState.dpr * (x + ((this.canvasState.rectWidth - preRenderedText.width/this.canvasState.dpr)) / 2)),
+						this.canvasState.dpr * (y - 7.5)
+					);
 					canvasContext.scale(this.canvasState.dpr, this.canvasState.dpr);
 				});
 
 				if (leg.loadFactor && duration > 20) {
-					[ "#777", "#aaa", "#aaa" ];
 					for (let i = 0; i < 3; i++) {
 						canvasContext.beginPath();
 						canvasContext.fillStyle = this.getColor('loadFactor', leg.loadFactor, i);

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -9,7 +9,7 @@ font-face {
 
 body {
 	margin: 0;
-	background-color: #333;
+	background-color: rgb(33, 35, 37);
 }
 
 * {