Eigenes Meteogramm statt des eingebetteten von meteoblue

Das Widget von meteoblue war ein fremdes Dokument im iframe: es passte
farblich nicht, liess sich nicht aendern, wurde auf schmalen Schirmen als
Ganzes heruntergerechnet und konnte die eigenen Messwerte nicht zeigen.
Genau das kann das neue Modul - links vom Jetzt-Strich steht, was die
Wetterstation gemessen hat, rechts die Vorhersage.

Aufgebaut wie die uebrigen Anzeige-Module: meteogrammKatalog.js sagt, WAS
gezeigt wird, meteogramm.js nur, WIE. Der Renderer kennt kein Feld und keine
Spur beim Namen. Eine weitere Spur ist damit ein Objekt im Katalog und keine
Codeaenderung.

Ein einziges SVG ueber alle drei Felder, damit Zeitachse, Nachtstreifen,
Jetzt-Linie und Zeiger nur einmal existieren und ueberall gleich sitzen.

Zwei Entscheidungen, die man sonst sucht:

Das Wolkenband zeichnet je Schicht ein Rechteck mit waagerechtem
Farbverlauf. Ein Rechteck je Stunde war der erste Versuch und sah aus wie
Fernsehrauschen - zweihundert harte Kanten nebeneinander. Open-Meteo kennt
ohnehin nur drei Schichten statt eines Hoehenprofils.

Die Strahlung teilt sich das Feld mit der Temperatur, statt ein viertes zu
bekommen: gleicher Tagesrhythmus, gleiche Nacht-Schattierung, und ein
viertes Feld machte das Ganze am Handy hoeher als das externe Widget.

Die alte Einbindung bleibt vorerst und ist umschaltbar. mountMeteogram()
laeuft jetzt erst beim Umschalten - wer meteoblue nie ansieht, laedt es auch
nicht mehr.

Die Karte heisst "Wetter" statt "Forecast": darunter steht bereits eine
zweite Karte dieses Namens.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

restricted/solar.php

@@ -84,16 +84,40 @@
 
         <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 d-flex align-items-stretch">
           <div class="card p-0 mb-4" style="width:100%">
-            <div class="card-header pb-0 pt-1">
-              <h3 class="card-title">Forecast</h3>
+            <!--
+              Wetter. Der Titel hiess frueher "Forecast" wie die Karte
+              darunter, die aus simPower die PV-Ernte vorhersagt - zwei
+              gleichnamige Karten uebereinander.
+            -->
+            <div class="card-header pb-1 pt-1 d-flex align-items-center flex-wrap gap-2">
+              <h3 class="card-title me-auto">Wetter</h3>
+              <!-- Hier haengt das Modul seine Zeitraumknoepfe ein (opt.kopf). -->
+              <div class="mtg-kopf"></div>
+              <!--
+                Eigenes Meteogramm oder das eingebettete von meteoblue.
+                data-mtg-quelle und nicht data-enf-ansicht: zeigeAnsicht() in
+                solarMQTT.js greift seitenweit zu und wuerde sonst die
+                Realtime-Karte mitschalten.
+              -->
+              <div class="enf-umschalter" role="tablist" aria-label="Quelle">
+                <button type="button" class="btn btn-sm active" role="tab" aria-selected="true" data-mtg-quelle="eigen">Eigenes</button>
+                <button type="button" class="btn btn-sm" role="tab" aria-selected="false" data-mtg-quelle="blue">meteoblue</button>
+              </div>
               <div class="card-tools">
                 <button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
                   <i class="bi bi-x-lg"></i>
                 </button>
               </div>
             </div>
-            <div class="card-body pb-1" id="meteogram">
-              
+            <div class="card-body p-2 p-md-3">
+              <!-- js/solar/meteogramm.js aus meteogrammKatalog.js, Daten aus ajax/meteogramm.php -->
+              <div data-mtg-flaeche="eigen" id="meteogramm"></div>
+              <!--
+                Ziel des meteoblue-Rahmens. Die id heisst weiterhin
+                "meteogram" mit einem m, damit mountMeteogram() in common.js
+                unveraendert bleiben kann.
+              -->
+              <div data-mtg-flaeche="blue" id="meteogram" hidden></div>
             </div>
           </div>
           <!-- /.card -->