Add option to invert colors

jalibu · Nov 16, 2023 · 0ea3f27 · 0ea3f27
1 parent 124b4f5
commit 0ea3f27
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 3 deletions.
diff --git a/MMM-RAIN-MAP.css b/MMM-RAIN-MAP.css
@@ -50,3 +50,7 @@
 .leaflet-container {
   background-color: transparent !important;
 }
+
+.rain-map-wrapper.inverted-colors .leaflet-tile-pane {
+  filter: invert(100%) hue-rotate(180deg);
+}
diff --git a/MMM-RAIN-MAP.js b/MMM-RAIN-MAP.js
diff --git a/README.md b/README.md
@@ -52,6 +52,7 @@ If you also like this module and want to thank, please rate this repository with
      displayHoursBeforeRain: -1,
      extraDelayLastFrameMs: 1000,
      extraDelayCurrentFrameMs: 3000,
+     invertColors: false,
      markers: [
       { lat: 49.41, lng: 8.717, color: "red" },
       { lat: 48.856, lng: 2.35, color: "green" },
@@ -88,6 +89,7 @@ If you also like this module and want to thank, please rate this repository with
 | `displayHoursBeforeRain`   | This option allows, to show or hide the map depending on the expected or current weather situation. The allowed values and options depend on your weather module which feeds MMM-RAIN-MAP with weather conditions under the hood.<br/><br/><b>Supported modules and different functionality</b><br/>Basic options, provided by both modules: If set to `0` the map shows up on rain, if set to `-1` the map is always displayed.<br/><ul><li>[weather](https://github.com/MichMich/MagicMirror/tree/master/modules/default/weather)<br>When used with type `hourly` allowes you to use the weather forecast data and to display the map when rain is expected within a defined number of hours by setting a value greater `0`.</li><li>[MMM-OpenWeatherForecast](https://github.com/jclarke0000/MMM-OpenWeatherForecast)</li></ul>**Type:** `number` <br> **Default value:** `-1` |
 | `extraDelayLastFrameMs`    | Add an extra delay to pause the animation on the last frame (last available forecast weather situation).<br><br>**Type:** `int` <br> **Default value:** `1000` (time in milliseconds)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `extraDelayCurrentFrameMs` | Add an extra delay to pause the animation on the frame for the current weather situation.<br><br>**Type:** `int` <br> **Default value:** `3000` (time in milliseconds)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `invertColors`             | Option to invert the colors of the map tiles. Can be used to display the map in a kind of dark mode.<br><br>**Type:** `boolean` <br> **Default value:** `false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `markers`                  | Optional list of markers on the map.<br> See examples and Markers-Object documentation below for details. <br><br>**Type:** `array[Marker]` <br> **Default value:** `Sample set`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `mapPositions`             | **Required:** List of zoom/center positions for the map.<br> See examples and MapPosition-Object documentation below for details. <br><br>**Type:** `array[MapPosition]` <br> **Default value:** `Sample set`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `mapHeight`                | Height of the map. Must be string with pixels and "px" postfix. Percentage values won't work.<br><br>**Type:** `string` (pixels) <br> **Default value:** `'420px'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mmm-rain-map",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "type": "module",
   "description": "A Rain Radar Map based on the Rainviewer API for the MagicMirror² platform.",
   "main": "MMM-RAIN-MAP.js",

diff --git a/src/frontend/Frontend.ts b/src/frontend/Frontend.ts
@@ -18,6 +18,7 @@ Module.register<Config>('MMM-RAIN-MAP', {
     displayTime: true,
     displayTimeline: true,
     displayHoursBeforeRain: -1,
+    invertColors: false,
     substitudeModules: [],
     extraDelayLastFrameMs: 2000,
     extraDelayCurrentFrameMs: 2000,
@@ -75,6 +76,9 @@ Module.register<Config>('MMM-RAIN-MAP', {
     // Create app-wrapper
     const app = document.createElement('div')
     app.classList.add('rain-map-wrapper')
+    if (this.config.invertColors) {
+      app.classList.add('inverted-colors')
+    }
 
     // Create time-wrapper
     if (this.config.displayTime) {

diff --git a/src/types/Config.ts b/src/types/Config.ts
@@ -11,6 +11,7 @@ export type Config = {
   substitudeModules: string[]
   extraDelayLastFrameMs: number
   extraDelayCurrentFrameMs: number
+  invertColors: boolean
   markers: Marker[]
   mapPositions: MapPosition[]
   mapUrl: string