Merge the cloud cover layer and the rain layer into a single layer

This is similar to what is done in [Meteoblue](https://www.meteoblue.com/weather-maps#map=cloudsAndPrecipitation~hourly~auto~sfc~none), [Meteociel](https://www.meteociel.fr/modeles/arome.php?ech=3&mode=24&map=0), or [XCTherm](https://xctherm.com/icon).

backend/common/src/main/scala/org/soaringmeteo/LocationForecasts.scala

@@ -210,8 +210,8 @@ object LocationForecasts {
  ),
  "iso" -> forecast.isothermZero.fold(Json.Null)(elevation => Json.fromInt(elevation.toMeters.round.toInt)),
  "r" -> Json.obj(
- "t" -> Json.fromInt(forecast.totalRain.toMillimeters.round.toInt),
- "c" -> Json.fromInt(forecast.convectiveRain.toMillimeters.round.toInt)
+ "t" -> Json.fromBigDecimal(BigDecimal(forecast.totalRain.toMillimeters).setScale(1, BigDecimal.RoundingMode.HALF_UP)),
+ "c" -> Json.fromBigDecimal(BigDecimal(forecast.convectiveRain.toMillimeters).setScale(1, BigDecimal.RoundingMode.HALF_UP))
  ),
  "mslet" -> Json.fromInt(forecast.mslet.toPascals.round.toInt / 100), // hPa
  "c" -> Json.fromInt(forecast.totalCloudCover),

backend/common/src/main/scala/org/soaringmeteo/out/Raster.scala

@@ -117,16 +117,35 @@ object Raster {
  ),
  // Clouds and Rain
  Raster(
- "cloud-cover",
- intData(_.totalCloudCover),
+ "clouds-rain",
+ doubleData { forecast =>
+ val rain = forecast.totalRain.toMillimeters
+ if (rain >= 0.2) {
+ rain + 100
+ } else {
+ forecast.totalCloudCover.toDouble
+ }
+ },
  ColorMap(
- 20 -> 0x00000000,
- 40 -> 0x0000003f,
- 60 -> 0x0000007f,
- 80 -> 0x000000bf,
- 100 -> 0x000000ff
- ).withFallbackColor(0x000000ff),
- GreyaPngEncoding // FIXME Make it just Gray and handle transparency on the client-side
+ // Clouds
+ 5.0 -> 0xffffff00,
+ 20.0 -> 0xffffffff,
+ 40.0 -> 0xbdbdbdff,
+ 60.0 -> 0x888888ff,
+ 80.0 -> 0x4d4d4dff,
+ 100.2 -> 0x111111ff, // we don’t show the rain unless it is higher than 0.2 millimeters
+ // Rain
+ 101.0 -> 0x9df8f6ff,
+ 102.0 -> 0x0000ffff,
+ 104.0 -> 0x2a933bff,
+ 106.0 -> 0x49ff36ff,
+ 1010.0 -> 0xfcff2dff,
+ 1020.0 -> 0xfaca1eff,
+ 1030.0 -> 0xf87c00ff,
+ 1050.0 -> 0xf70c00ff,
+ 1100.0 -> 0xac00dbff,
+ ).withFallbackColor(0xac00dbff),
+ RgbaPngEncoding
  ),
  Raster(
  "cumulus-depth",
@@ -140,17 +159,6 @@ object Raster {
  ).withFallbackColor(0xff0000ff),
  RgbaPngEncoding
  ),
- Raster(
- "rain",
- intData(_.totalRain.toMillimeters.round.toInt),
- ColorMap(
- 1 -> 0x0000ff00,
- 3 -> 0x0000ff55,
- 7 -> 0x0000ffb3,
- 10 -> 0x0000ffff
- ).withFallbackColor(0x0000ffff),
- RgbaPngEncoding
- )
  )
 
  /** Abstract over the type of data extracted from the forecast */

frontend/src/LayersSelector.tsx

@@ -13,9 +13,8 @@ import {
  soaringLayerTopWindLayer,
  surfaceWindLayer
 } from './layers/Wind';
-import {cloudCoverLayer} from './layers/CloudCover';
+import {cloudsRainLayer} from './layers/CloudsRain';
 import {thermalVelocityLayer} from './layers/ThermalVelocity';
-import {rainLayer} from './layers/Rain';
 import {cumuliDepthLayer} from './layers/CumuliDepth';
 import {showDate} from './shared';
 import {Checkbox, Radio, Select} from './styles/Forms';
@@ -141,9 +140,8 @@ export const LayersSelector = (props: {
  {_4000MAMSLWindEl}
  </fieldset>;
 
- const cloudCoverEl = setupLayerBtn(cloudCoverLayer, 'primary-layer');
+ const cloudsRainEl = setupLayerBtn(cloudsRainLayer, 'primary-layer');
  const cumuliDepthEl = setupLayerBtn(cumuliDepthLayer, 'primary-layer');
- const rainEl = setupLayerBtn(rainLayer, 'primary-layer');
 
  const primaryLayerEl =
  <fieldset style={ fieldsetPaddingStyle }>
@@ -158,9 +156,8 @@ export const LayersSelector = (props: {
  {thqEl}
  {boundaryLayerHeightEl}
  {thermalVelocityEl}
- {cloudCoverEl}
+ {cloudsRainEl}
  {cumuliDepthEl}
- {rainEl}
  </fieldset>;
 
  return <>

frontend/src/layers/CloudsRain.tsx

@@ -0,0 +1,58 @@
+import { ColorScale, Color } from "../ColorScale";
+import {ForecastMetadata, Zone} from '../data/ForecastMetadata';
+import {colorScaleEl, Layer, ReactiveComponents, summarizerFromLocationDetails} from "./Layer";
+
+// TODO Make sure this is consistent with what the backend does (consider providing the scale from the backend)
+const cloudCoverColorScale = new ColorScale([
+ [20, new Color(255, 255, 255, 1.00)],
+ [40, new Color(189, 189, 189, 1.00)],
+ [60, new Color(136, 136, 136, 1.00)],
+ [80, new Color(77, 77, 77, 1.00)],
+ [100, new Color(17, 17, 17, 1.00)],
+]);
+
+const rainColorScale = new ColorScale([
+ [1, new Color(157, 248, 246, 1.00)],
+ [2, new Color(0, 0, 255, 1.00)],
+ [4, new Color(42, 147, 59, 1.00)],
+ [6, new Color(73, 255, 54, 1.00)],
+ [10, new Color(252, 255, 45, 1.00)],
+ [20, new Color(250, 202, 30, 1.00)],
+ [30, new Color(248, 124, 0, 1.00)],
+ [50, new Color(247, 12, 0, 1.00)],
+ [99, new Color(172, 0, 219, 1.00)],
+]);
+
+export const cloudsRainLayer: Layer = {
+ key: 'clouds-rain',
+ name: 'Clouds an Rain',
+ title: 'Clouds and rain',
+ dataPath: 'clouds-rain',
+ reactiveComponents(props: {
+ zone: Zone,
+ forecastMetadata: ForecastMetadata,
+ hourOffset: number
+ }): ReactiveComponents {
+
+ const summarizer = summarizerFromLocationDetails(props, detailedForecast => [
+ ["Total cloud cover", <span>{ Math.round(detailedForecast.cloudCover * 100) }%</span>],
+ ["Rainfall", <span>{ detailedForecast.rain.total } mm</span>]
+ ]);
+
+ const mapKey = <>
+ <div style="margin-bottom: 8px">{ colorScaleEl(rainColorScale, value => ` ${value} mm `) }</div>
+ { colorScaleEl(cloudCoverColorScale, value => ` ${value}% `) }
+ </>;
+ const help = <p>
+ It indicates the cloud cover as well as the amount of precipitation in the time period.
+ The cloud cover is displayed with white and gray shadings, and the precipitation in
+ millimeters is displayed with colours as indicated in the map legend.
+ </p>;
+
+ return {
+ summarizer,
+ mapKey,
+ help
+ }
+ }
+};

frontend/src/layers/Layer.tsx

@@ -48,7 +48,7 @@ export const colorScaleEl = (colorScale: ColorScale, format: (value: number) =>
  )
  }
  </div>
- };
+};
 
  export const summarizerFromLocationDetails = (props: {
  zone: Zone,

frontend/src/layers/Layers.tsx

@@ -1,9 +1,8 @@
 import { soaringLayerDepthLayer } from "./SoaringLayerDepth";
-import { cloudCoverLayer } from "./CloudCover";
+import { cloudsRainLayer } from "./CloudsRain";
 import { thermalVelocityLayer } from "./ThermalVelocity";
 import { soaringLayerTopWindLayer, boundaryLayerWindLayer, surfaceWindLayer, _300MAGLWindLayer, _4000MAMSLWindLayer, _3000MAMSLWindLayer, _2000MAMSLWindLayer } from "./Wind";
 import { xcFlyingPotentialLayer } from "./ThQ";
-import { rainLayer } from "./Rain";
 import { Layer } from "./Layer";
 import { cumuliDepthLayer } from "./CumuliDepth";
 
@@ -13,9 +12,8 @@ const layersByKey: Map<string, Layer> =
  xcFlyingPotentialLayer,
  soaringLayerDepthLayer,
  thermalVelocityLayer,
- cloudCoverLayer,
+ cloudsRainLayer,
  cumuliDepthLayer,
- rainLayer,
  surfaceWindLayer,
  _300MAGLWindLayer,
  _2000MAMSLWindLayer,