From 0df546b592312c3b004a5ab227e30c0bfa74a563 Mon Sep 17 00:00:00 2001 From: terraputix Date: Mon, 16 Feb 2026 00:32:54 +0100 Subject: [PATCH] delete canvas based stuff --- src/routes/weather/canvas/cloud-cover.ts | 78 ---------------------- src/routes/weather/canvas/daylight.ts | 20 ------ src/routes/weather/canvas/precip.ts | 20 ------ src/routes/weather/canvas/raster.ts | 42 ------------ src/routes/weather/canvas/temp-gradient.ts | 60 ----------------- 5 files changed, 220 deletions(-) delete mode 100644 src/routes/weather/canvas/cloud-cover.ts delete mode 100644 src/routes/weather/canvas/daylight.ts delete mode 100644 src/routes/weather/canvas/precip.ts delete mode 100644 src/routes/weather/canvas/raster.ts delete mode 100644 src/routes/weather/canvas/temp-gradient.ts diff --git a/src/routes/weather/canvas/cloud-cover.ts b/src/routes/weather/canvas/cloud-cover.ts deleted file mode 100644 index 228e58f..0000000 --- a/src/routes/weather/canvas/cloud-cover.ts +++ /dev/null @@ -1,78 +0,0 @@ -export default ( - ctx: CanvasRenderingContext2D | null | undefined, - config: ConfigInterface, - series: Float32Array | null | undefined, - canvasElement: HTMLCanvasElement -): void => { - if (ctx && series) { - ctx.beginPath(); - ctx.moveTo(0, 35 + (series[0] ** 1.5 / 1000) * 30); - for (const [index, value] of series.entries()) { - ctx.strokeStyle = '#444'; - ctx.lineWidth = 0.1; - const nextValue = series[index + 1]; - - const xc = - (index * config.deltaX + - 0.5 * config.deltaX + - (index * config.deltaX + 1.5 * config.deltaX)) / - 2; - const yc = (35 + (value ** 1.5 / 1000) * 30 + 35 + (nextValue ** 1.5 / 1000) * 30) / 2; - - ctx.quadraticCurveTo( - index * config.deltaX + 0.5 * config.deltaX, - 35 + (value ** 1.5 / 1000) * 30, - xc, - yc - ); - } - - ctx.quadraticCurveTo( - config.maxX, - 35 + (series[series.length - 1] ** 1.5 / 1000) * 30, - config.maxX, - 35 + (series[series.length - 1] ** 1.5 / 1000) * 30 - ); - ctx.quadraticCurveTo( - config.maxX, - 35 - (series[series.length - 1] ** 1.5 / 1000) * 30, - config.maxX, - 35 - (series[series.length - 1] ** 1.5 / 1000) * 30 - ); - - // same series but reversed - for (const [ind, _v] of series.entries()) { - const index = series.length - 1 - ind; - const value = series[index]; - const nextValue = series[index - 1]; - - ctx.strokeStyle = '#444'; - ctx.lineWidth = 0.1; - - const xc = - (index * config.deltaX + - 0.5 * config.deltaX + - (index * config.deltaX - 0.5 * config.deltaX)) / - 2; - const yc = (35 - (value ** 2 / 10000) * 30 + (35 - (nextValue ** 2 / 10000) * 30)) / 2; - - ctx.quadraticCurveTo( - index * config.deltaX + 0.5 * config.deltaX, - 35 - (value ** 2 / 10000) * 30, - xc, - yc - ); - } - ctx.quadraticCurveTo( - 0.5 * config.deltaX, - 35 - (series[0] ** 1.5 / 1000) * 30, - 0, - 35 - (series[0] ** 1.5 / 1000) * 30 - ); - - ctx.closePath(); - //to fill the space in the shape - ctx.fillStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--muted-foreground').split(' ').join(',')}, 0.5)`; - ctx.fill(); - } -}; diff --git a/src/routes/weather/canvas/daylight.ts b/src/routes/weather/canvas/daylight.ts deleted file mode 100644 index fa9cf63..0000000 --- a/src/routes/weather/canvas/daylight.ts +++ /dev/null @@ -1,20 +0,0 @@ -export default ( - ctx: CanvasRenderingContext2D | null | undefined, - config: ConfigInterface, - series: Date[] -): void => { - if (ctx) { - for (const [index, value] of series.entries()) { - if (value.getHours() > 6 && value.getHours() < 21) { - ctx.beginPath(); - ctx.moveTo(index * config.deltaX, config.maxY); - ctx.lineTo(index * config.deltaX, 0); - ctx.lineTo((index + 1) * config.deltaX, 0); - ctx.lineTo((index + 1) * config.deltaX, config.maxY); - ctx.closePath(); - ctx.fillStyle = '#f4ff0014'; - ctx.fill(); - } - } - } -}; diff --git a/src/routes/weather/canvas/precip.ts b/src/routes/weather/canvas/precip.ts deleted file mode 100644 index 53e9044..0000000 --- a/src/routes/weather/canvas/precip.ts +++ /dev/null @@ -1,20 +0,0 @@ -export default ( - ctx: CanvasRenderingContext2D | null | undefined, - config: ConfigInterface, - series: Float32Array | null | undefined, - canvasElement: HTMLCanvasElement -): void => { - if (ctx && series) { - for (const [index, value] of series.entries()) { - ctx.beginPath(); - ctx.moveTo(index * config.deltaX + 0.5 * config.deltaX, config.maxY); - - ctx.strokeStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--primary').split(' ').join(',')}, 1)`; - ctx.lineWidth = 12; - - ctx.lineTo(index * config.deltaX + 0.5 * config.deltaX, config.maxY - value ** 0.55 * 45); - ctx.stroke(); - ctx.closePath(); - } - } -}; diff --git a/src/routes/weather/canvas/raster.ts b/src/routes/weather/canvas/raster.ts deleted file mode 100644 index d14b623..0000000 --- a/src/routes/weather/canvas/raster.ts +++ /dev/null @@ -1,42 +0,0 @@ -export default ( - ctx: CanvasRenderingContext2D | null | undefined, - config: ConfigInterface, - series: Date[], - today: Date, - canvasElement: HTMLCanvasElement -): void => { - if (ctx && series) { - for (const [index, _v] of series.entries()) { - ctx.beginPath(); - ctx.moveTo(index * config.deltaX, 0); - ctx.lineTo(index * config.deltaX, config.maxY); - if (series[index].getHours() === 0) { - ctx.strokeStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--border').split(' ').join(',')}, 1)`; - ctx.lineWidth = 3; - } else if ( - series[index].getDate() === today.getDate() && - series[index].getHours() === today.getHours() - ) { - // fill now line - // TODO: update this line every minute - ctx.stroke(); - ctx.closePath(); - ctx.beginPath(); - ctx.strokeStyle = 'red'; - ctx.lineWidth = 5; - const minutes = today.getMinutes(); - ctx.moveTo(index * config.deltaX + (config.deltaX / 60) * minutes, 0); - ctx.lineTo(index * config.deltaX + (config.deltaX / 60) * minutes, config.maxY); - ctx.stroke(); - ctx.closePath(); - ctx.strokeStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--border').split(' ').join(',')}, 0.75)`; - ctx.lineWidth = 1; - } else { - ctx.strokeStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--border').split(' ').join(',')}, 0.75)`; - ctx.lineWidth = 1; - } - ctx.stroke(); - ctx.closePath(); - } - } -}; diff --git a/src/routes/weather/canvas/temp-gradient.ts b/src/routes/weather/canvas/temp-gradient.ts deleted file mode 100644 index 94c7772..0000000 --- a/src/routes/weather/canvas/temp-gradient.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { getColor } from '../utils/colors'; - -export default ( - ctx: CanvasRenderingContext2D | null | undefined, - config: ConfigInterface, - series: Float32Array | null | undefined, - unit = 'celsius' -): void => { - if (ctx && series) { - const tempGradientFill = ctx.createLinearGradient(0, 0, 0, config.maxY); - tempGradientFill.addColorStop(0, getColor(config.maxTemp, unit) + '5c'); - tempGradientFill.addColorStop(0.25, getColor(config.maxTemp, unit) + '5c'); - tempGradientFill.addColorStop(0.85, getColor(config.minTemp, unit) + '06'); - tempGradientFill.addColorStop(1, getColor(config.minTemp, unit) + '00'); - - ctx.beginPath(); - ctx.moveTo( - 0, - 0.25 * config.maxY + ((config.maxTemp - series[0]) / config.diffTemp) * 0.55 * config.maxY - ); - for (const [index, value] of series.filter((t) => !isNaN(t)).entries()) { - const indexDiffTemp = config.maxTemp - value; - const indexDiffTempNext = config.maxTemp - series[index + 1]; - - ctx.strokeStyle = '#d3d3d3'; - ctx.lineWidth = 4; - - const xc = - (index * config.deltaX + - 0.5 * config.deltaX + - (index * config.deltaX + 1.5 * config.deltaX)) / - 2; - const yc = - (0.25 * config.maxY + - (indexDiffTemp / config.diffTemp) * 0.55 * config.maxY + - (0.25 * config.maxY + (indexDiffTempNext / config.diffTemp) * 0.55 * config.maxY)) / - 2; - - ctx.quadraticCurveTo( - index * config.deltaX + 0.5 * config.deltaX, - 0.25 * config.maxY + (indexDiffTemp / config.diffTemp) * 0.55 * config.maxY, - xc, - yc - ); - } - ctx.quadraticCurveTo( - config.maxX, - 0.25 * config.maxY + - ((config.maxTemp - series[series.length - 1]) / config.diffTemp) * 0.55 * config.maxY, - (config.maxX + config.maxX + config.deltaX) / 2, - 0.25 * config.maxY + - ((config.maxTemp - series[series.length - 1]) / config.diffTemp) * 0.55 * config.maxY - ); - ctx.lineTo(config.maxX, config.maxY); - ctx.lineTo(0, config.maxY); - ctx.closePath(); - ctx.fillStyle = tempGradientFill; - ctx.fill(); - } -};