Tempest

Verstehe ich schon, schick mir doch mal deine Wunsch Farben als RGB bzw HEX Wert dann teste ich das mal

Überschrift Oben : Background + Text

Spalten Bezeichner : Background + Text

Spalten mit Werten : Background + Text

Border ja/nein + Farbe

Das habe ich schnell erklärt.

Ich stehe eher auf Minimalismus.
Gerade zu bunter Farbeneinsatz lenkt einen von der eigentlichen Information ab.
Gestern erst hatte ich ein schönes Tutorial zweier Grafiker angeschaut. Sehr interessant, wie die an solche Darstellungen rangehen, um das wesentliche einer Message hervorheben.
Aber dafür spielten sie auch eine hohe Anzahl an Möglichkeiten durch, um das Optimum zu finden.

Die bereits schlichten Beispiele von erpe oben gezeigt, finde ich stimmig. Das meteoblue kann natürlich auch mit dezent farbigen Symbolen versehen werden, wie der Screenshot von der Tempestvariante zeigt.

Tabellenform ist immer schwierig. Viele Infos aber gar nicht unmittelbar erfassbar. Da schaust Du drauf und fühlst Dich unmittelbar erschlagen.

Daher finde ich auch die Highcharts Demo toll. Alles grafisch ansprechend in einem Schaubild und wenig Zahlenmaterial. Cool

Das ist aber nur meine Sicht der Dinge.

Gesendet von iPhone XS mit Tapatalk

@boui vielen Dank für den Input. Ich Versuch Mal das so umzusetzen

Sent from my Pixel 4 using Tapatalk

um es etwas einfacher zu machen:
beim meteoblue-module ist das ja auch nur eine „Tabelle“ in einer html-Sting-Variablen :wink:

<table border='0'><tr><td align='center'><font style='font-size: 12px;'>Heute<br><font/></td><td align='center'><font style='font-size: 12px;'>Morgen<br><font/></td><td align='center'><font style='font-size: 12px;'>Übermorgen<br><font/></td><td align='center'><font style='font-size: 12px;'>8.1.<font/></td><td align='center'><font style='font-size: 12px;'>9.1.<font/></td><td align='center'><font style='font-size: 12px;'>10.1.<font/></td><td align='center'><font style='font-size: 12px;'>11.1.<font/></td></tr><tr><td align='center'><img src='/hook/SymconMeteoblue/12_iday_monochrome_hollow.svg' width='64' height='64'></td><td align='center'><img src='/hook/SymconMeteoblue/13_iday_monochrome_hollow.svg' width='64' height='64'></td><td align='center'><img src='/hook/SymconMeteoblue/17_iday_monochrome_hollow.svg' width='64' height='64'></td><td align='center'><img src='/hook/SymconMeteoblue/13_iday_monochrome_hollow.svg' width='64' height='64'></td><td align='center'><img src='/hook/SymconMeteoblue/04_iday_monochrome_hollow.svg' width='64' height='64'></td><td align='center'><img src='/hook/SymconMeteoblue/04_iday_monochrome_hollow.svg' width='64' height='64'></td><td align='center'><img src='/hook/SymconMeteoblue/04_iday_monochrome_hollow.svg' width='64' height='64'></td></tr><tr><td align='center'><font style='font-size: 12px;'>min. 0°C</font></td><td align='center'><font style='font-size: 12px;'>min. 0°C</font></td><td align='center'><font style='font-size: 12px;'>min. -1°C</font></td><td align='center'><font style='font-size: 12px;'>min. -0°C</font></td><td align='center'><font style='font-size: 12px;'>min. -2°C</font></td><td align='center'><font style='font-size: 12px;'>min. -2°C</font></td><td align='center'><font style='font-size: 12px;'>min. -3°C</font></td></tr><tr><td align='center'><font style='font-size: 12px;'>max. 2°C</font></td><td align='center'><font style='font-size: 12px;'>max. 2°C</font></td><td align='center'><font style='font-size: 12px;'>max. 1°C</font></td><td align='center'><font style='font-size: 12px;'>max. 3°C</font></td><td align='center'><font style='font-size: 12px;'>max. 1°C</font></td><td align='center'><font style='font-size: 12px;'>max. -0°C</font></td><td align='center'><font style='font-size: 12px;'>max. -1°C</font></td></tr><tr><td align='center'><font style='font-size: 12px;'>Bedeckt mit leichtem Regen<font/>   </td><td align='center'><font style='font-size: 12px;'>Bedeckt mit leichtem Schneefall<font/>   </td><td align='center'><font style='font-size: 12px;'>Überwiegend bewölkt mit leichtem Schneefall<font/>   </td><td align='center'><font style='font-size: 12px;'>Bedeckt mit leichtem Schneefall<font/>   </td><td align='center'><font style='font-size: 12px;'>Bedeckt<font/>   </td><td align='center'><font style='font-size: 12px;'>Bedeckt<font/>   </td><td align='center'><font style='font-size: 12px;'>Bedeckt<font/>   </td></tr></table>

Im folgenden das Forecast Skript.

Es muss mit den persönlichen Daten parametrisiert werden.

Es liest die Daten von der Tempest Seite ein und speichert für die (eventuelle) Nutzung in HighChart ein serialisiertes Array (X = Timestamp Y = Wert) mit allen angezeigten Daten ab sowie eine String Variable zur HTML Anzeige.

Zur Darstellung der Symbole lädt das Program on the fly SVG Dateien von dieser Seite : https://cdn.jsdelivr.net/gh/YR/weather-symbols@8.0.1/dist/svg/

Durch die Diskussion um die beste Darstellung kam ich zu dem Schluss das Geschmäcker halt verschieden sind. Von daher hat das Program die Möglichkeit die farbliche sowie inhaltliche Darstellung über eine Parametrisierung beliebig anzupassen

Ich habe darauf verzichtet automatisch einen Timer anzulegen. Der Nutzer kann das relativ einfach selbst erledigen

Viel Spaß

Ver.s 1.0 vom 6.1.2021

Vers.1.1 vom 7.1.2021

Fehler behoben : Es werden nun all 10 Tage der Vorhersage angezeigt
Lon/lat getauscht
Bei Bedarf können nun eigene Wettersymbole geladen werden

Vers. 1.2 vom 9.1.2021
API Änderungen angepasst
Alpha Steuerung nun wie in der Stunden Vorhersage

Vers. 1.2.1 vom 9.1.2021
Tabellen Breite wird FIX eingestellt

Vers. 1.2.2 vom 9.1.2021
Schriftgröße kann verändert werden,
Verbesserung der CSS/HTML TAGS
Wahl Tabellenbreite in % oder PX
Long/Lat Koordinaten werden bei der neuen API nicht mehr benötigt



<?php
//----------------------------------------Version 1.2.2 Datum 09.01.2021 BestEx/erpe --------------------------------
// Das Skript legt automatisch zwei Variablen an : All Data => ist eine String Variable in der serialisiert das von Tempest empfangene Array mit Daten für den Nutzer abgelegt wird. Das Program nutzt diese Variable nicht
// Daily Forecast =>  ist eine String Variable die den HTML String zur Anzeige des Forecasts  beinhaltet. 


// Hier bitte die entsprechenden Daten eintragen

$token = ''; // Das Token kann hier generiert werden : https://tempestwx.com/settings/tokens/

$Station_ID = '';





$path = 'https://cdn.jsdelivr.net/gh/YR/weather-symbols@8.0.1/dist/svg/'; // Pfad für die Wetter Symbole
//$path = IPS_GetKernelDir() ."webfront\\user\\icons\\";
$icon_type = '.svg';// Typ des ICONS 

// In diesem Array die Dateinamen der ICONS eintragen
$condition_icons = array(

'clear-day' => '43d',
'clear-night' => '43d',
'cloudy' => '43d',
'foggy' => '43d',
'partly-cloudy-day' => '43d',
'partly-cloudy-night' => '43d',
'possibly-rainy-day' => '43d',
'possibly-rainy-night' => '43d',
'possibly-sleet-day' => '43d',
'possibly-sleet-night' => '43d',
'possibly-snow-day' => '43d',
'possibly-snow-night' => '43d',
'possibly-thunderstorm-day' => '43d',
'possibly-thunderstorm-night' => '43d',
'rainy' => '43d',
'sleet' => '43d',
'snow' => '43d',
'thunderstorm' => '43d',
'windy' => '43d'

);

$default_icons = true; // Falls eigene ICONS verwendet werden  auf false setzen



//  HEX Farbfelder können beliebig erweitert werden 


$alpha = '33'; // Transparenzwert für den Hintergrund
$alpha_text = ''; // Transparenzwert für den Text 


$blue = '5ba2ec';
$white = 'FFFFFF' ;
$light_blue = '80d7ff';
$light_green = '90EE90';
$dark_grey = 'A9A9A9';
$light_grey = 'D3D3D3';
$red = 'FF2626';
$yellow = 'DFDF00';
$green = '2DC800';
$orange = 'FFC895';
$blood_orange = 'FF6666';
$fire = 'FF3300';
$black = '000000';
$violet = '774477';

// Zuordnung der Farben zu den Feldern der Anzeige

$color_label_background = $green.$alpha; 
$color_column_background = $blue.$alpha; 
$color_text_label =$white.$alpha_text;
$color_label_text_temp_high = $white.$alpha_text;
$color_label_text_temp_low = $white.$alpha_text;
$color_column_text = $white.$alpha_text;

// Ein paar Schalter zum Spielen
$border = 'collapse'; // Werte können 'collapse' oder 'separate' sein
$automatic_hi_low_temp_color = false; // Falls true wird die von Tempest übermittelte Farbe für den Hintergrund genutzt
$nr_of_days_in_forecast = 10; //max 10
$tabellen_breite_in_przt = true;
$width = 100; // Breite der Anzeige (Falls % max. 100 ansonsten in PX) in  Sollte angepasst werden wenn die Anzahl der Vorhersage Tage verringert wird.
$fontSize = 16; //Schriftgröße in px

// Hier kann die angezeigte Menge der Informationen beeinflusst werden
$display_symbols = true;
$display_condition = true;
$display_T_high = true;
$display_T_low = true;
$display_Precip = true;
$display_Precip_in_Przt = true;
$display_Daylight = true;


//------------------------------ Ab hier bitte nichts mehr verändern ------------------------------------------------------------

if($default_icons)
{ 
      $condition_icons = array(

      'clear-day' => '01d',
      'clear-night' => '01n',
      'cloudy' => '04',
      'foggy' => '15',
      'partly-cloudy-day' => '02d',
      'partly-cloudy-night' => '02n',
      'possibly-rainy-day' => '40d',
      'possibly-rainy-night' => '40n',
      'possibly-sleet-day' => '43d',
      'possibly-sleet-night' => '43n',
      'possibly-snow-day' => '45d',
      'possibly-snow-night' => '45n',
      'possibly-thunderstorm-day' => '24d',
      'possibly-thunderstorm-night' => '24n',
      'rainy' => '46',
      'sleet' => '48',
      'snow' => '50',
      'thunderstorm' => '30',
      'windy' => '10'

      );
}

$variable_types = [
                                    'Boolean' => 0,
                                    'Integer' => 1,
                                    'Float' => 2,
                                    'String' => 3
                      ];

$url = 'https://swd.weatherflow.com/swd/rest/better_forecast?station_id='.$Station_ID.'&units_temp=c&units_wind=kph&units_pressure=hpa&units_precip=cm&units_distance=km'; 

$headers = array(
    "Content-Type: application/json; charset=utf-8",
    "Authorization: Bearer ".$token
);

$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$resp = curl_exec($ch);
curl_close($ch);

$forecast = json_decode ($resp);
$array = json_decode(json_encode($forecast), true);
//print_r($array);



$label_background = '<td style="background-color: #'.$color_label_background.'" colspan="1" >';
$column_background = '<td style="background-color: #'.$color_column_background.'" colspan="1" >';


$label_text_color = '<FONT COLOR="#'.$color_text_label.'">';
$label_text_color_TH = '<FONT COLOR="#'.$color_label_text_temp_high.'">';
$label_text_color_TL = '<FONT COLOR="#'.$color_label_text_temp_low.'">';
$column_text_color = '<FONT COLOR="#'.$color_column_text.'">';

if($tabellen_breite_in_przt) $przt = '%'; else $przt ='';

foreach($array['forecast']['daily'] as $key => $value)
{
      if(array_key_exists('conditions',$value)) $condition[$value['day_start_local']]['conditions'] = $value['conditions'];else $display_condition = false;
      if(array_key_exists('air_temp_high',$value)) $condition[$value['day_start_local']]['air_temp_high'] = $value['air_temp_high'];else $display_T_high = false;
      if(array_key_exists('air_temp_low',$value))$condition[$value['day_start_local']]['air_temp_low'] = $value['air_temp_low'];else $display_T_low = false;
      if(array_key_exists('precip_type',$value))$condition[$value['day_start_local']]['precip_type'] = $value['precip_type'];else $display_Precip = false;
      if(array_key_exists('precip_probability',$value))$condition[$value['day_start_local']]['precip_probability'] = $value['precip_probability'];else $display_Precip_in_Przt= false;
      if(array_key_exists('sunrise',$value))$condition[$value['day_start_local']]['sunrise'] = date("H:i",$value['sunrise']);else $display_Daylight = false;
      if(array_key_exists('sunset',$value))$condition[$value['day_start_local']]['sunset'] = date("H:i",$value['sunset']);else $display_Daylight = false;
      $condition[$value['day_start_local']]['air_temp_high_color'] = ''; // $value['air_temp_high_color'];
      $condition[$value['day_start_local']]['air_temp_low_color'] = ''; // $value['air_temp_low_color'];
      if(array_key_exists('icon',$value))$condition[$value['day_start_local']]['icon'] = $value['icon'];else $display_symbols = false;
}
$string_data = serialize($condition); 
$ID = manage_variable(false,$_IPS['SELF'],'All Data',$variable_types['String'],'~TextBox','0',false);
SetValueString($ID,$string_data);

//print_r($condition);

$content  = '<style type="text/css">table.Forecast_Profile {  table-layout: fixed; width: '.$width.$przt.'; border-collapse: '.$border.'; } table.Forecast_Profile td { border: 0px solid #444455;  font-size: '.$fontSize.'px; } </style>'; // add
$content .= '<table class="Forecast_Profile">';

$content .= '<tr>'; //add
$content .= $label_background.$label_text_color.'Daily'; 
$nr = 0;
foreach($condition as $key => $value)
{
      if($nr >= $nr_of_days_in_forecast) break;
      $content .= $label_background.$label_text_color.date("D d",$key); 
      $nr++;
      $content .= '</td>'; //add
}
$content .= '</tr>' ; //</td> removed

if($display_symbols)
{ 
      $content .= $label_background.$label_text_color.' '; 
      $nr = 0;
      foreach($condition as $key => $value)
      {
            if($nr >= $nr_of_days_in_forecast) break;
            $filename = $path.$condition_icons[$value['icon']].$icon_type;
            $icon =  file_get_contents($filename); 
            $content .= $label_background.$label_text_color.$icon; 
            $nr++;
            $content .= '</td>'; //add
      }
      $content .= '</tr>' ; //</td> removed
}

if($display_condition)
{ 
      $content .= $label_background.$label_text_color.'Condition'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {
            if($nr >= $nr_of_days_in_forecast) break;
            $content .= $column_background.$column_text_color.$value['conditions'] ;
            $nr++;
            $content .= '</td>'; //add
      }
      $content .= '</tr>' ; //</td> removed
}

if($display_T_high)
{ 
      $content .= $label_background.$label_text_color.'T High'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {
            if($nr >= $nr_of_days_in_forecast) break;
            if($automatic_hi_low_temp_color)
            { 
                  $content .= '<td style="background-color: #'.$value['air_temp_high_color']. $alpha. '" colspan="1" >'.$label_text_color_TH.$value['air_temp_high'].' °C' ;
            }
            else
            {
                  $content .= $column_background.$column_text_color.$value['air_temp_high'].' °C' ;      
            }
            $nr++;
            $content .= '</td>'; //add
      }
      $content .= '</tr>' ; //</td> removed
}

if($display_T_low )
{ 
      $content .= $label_background.$label_text_color.'T Low'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {
            if($nr >= $nr_of_days_in_forecast) break;
            if($automatic_hi_low_temp_color)
            { 
                  $content .= '<td style="background-color: #'.$value['air_temp_low_color'].$alpha. '" colspan="1" >'.$label_text_color_TL.$value['air_temp_low'].' °C' ;
            }
            else
            {
                  $content .= $column_background.$column_text_color.$value['air_temp_low'].' °C' ;
            }
            $nr++;
            $content .= '</td>'; //add
      }
      $content .= '</tr>' ; //</td> removed
}

if($display_Precip)
{ 
      $content .= $label_background.$label_text_color.'Precip'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {
            if($nr >= $nr_of_days_in_forecast) break;
            $content .= $column_background.$column_text_color.$value['precip_type'] ;
            $nr++;
            $content .= '</td>'; //add
      }
      $content .= '</tr>' ; //</td> removed
}

if($display_Precip_in_Przt)
{ 
      $content .= $label_background.$label_text_color.'Precip %'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {
            if($nr >= $nr_of_days_in_forecast) break;
            $content .= $column_background.$column_text_color.$value['precip_probability']." %" ;
            $nr++;
            $content .= '</td>'; //add
      }
      $content .= '</tr>' ; //</td> removed
}

if($display_Daylight)
{ 
      $content .= $label_background.$label_text_color.'Daylight'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {
            if($nr >= $nr_of_days_in_forecast) break;
            $content .= $column_background.$column_text_color.$value['sunrise'].' to '.$value['sunset'];
            $nr++;
            $content .= '</td>'; //add
      }
      $content .= '</tr>' ; //</td> removed
}
$content .= '</table>'; //moved

$ID = manage_variable(false,$_IPS['SELF'],'Daily Forecast',$variable_types['String'],'~HTMLBox','0',false);
SetValueString($ID,$content);


function manage_variable($profil_update,$parent,$name,$type,$profil,$aggregation_type,$logging)
{
      Global $var_liste;
      $archive_id = IPS_GetInstanceListByModuleID ('{43192F0B-135B-4CE7-A0A7-1475603F3060}')[0];
      $var_id = @IPS_GetVariableIDByName ($name, $parent);
      if($var_id === false)
      {
            $var_id = IPS_CreateVariable ($type);
            IPS_SetVariableCustomProfile ($var_id, $profil );
            IPS_SetName($var_id, $name);
            IPS_SetParent($var_id, $parent);
            if($logging or ($type != 3))
            { 
                  AC_SetLoggingStatus ($archive_id, $var_id, $logging);
                  AC_SetAggregationType ($archive_id, $var_id, $aggregation_type);
            }
            else
            {
                  AC_SetLoggingStatus ($archive_id, $var_id, $logging);
            }
            IPS_ApplyChanges($archive_id);
      }
      else
      {     
                  if(IPS_GetVariable($var_id)['VariableCustomProfile']  != $profil)
                  {   
                  if(IPS_GetVariable($var_id)['VariableType'] == $type)
                  {
                        IPS_LogMessage("Tempest", " Variablen Profil auf aktuellen Stand gebracht ".IPS_GetName($var_id)." Profil : ".$profil." Var ID".$var_id." CP ".IPS_GetVariable($var_id)['VariableCustomProfile']);
                        IPS_SetVariableCustomProfile ($var_id, $profil );
                  }
                  else
                  {
                        IPS_LogMessage("Tempest", " Variablen gelöscht ".IPS_GetName($var_id)." Profil : ".$profil." Var ID".$var_id." CP ".IPS_GetVariable($var_id)['VariableCustomProfile']);
                        IPS_DeleteVariable ($var_id);
                        check_variable($profil_update,$parent,$name,$type,$profil,$aggregation_type,$logging,$ID,$time_stamp);
                        return false;
                  }
            }
            else
            {

            }
      } 
      return $var_id;                 
}


Funktioniert erst mal. wobei ich erst mal Long/Lat vertauscht hatte. Besser erst $latitude dann $longitude im Script dann kommt man nicht durcheinander.

Wo kann ich meine Station_ID erfahren? Ich habe die Nummer aus der Browser Adressleiste genommen. Scheint Ok zu sein. Aber wo kann ich das normalerweise sehen?

Angezeigt wird immer ein Tag weniger als angewählt. Bei original 10 im Skript, nur 9.

Für spätere Versionen deines Skripts könntest du auch die Möglichkeit schaffen eigene Wetter Icons zu nutzen.

Wo kann ich meine Station_ID erfahren? Ich habe die Nummer aus der Browser Adressleiste genommen. Scheint Ok zu sein. Aber wo kann ich das normalerweise sehen?

in der Tempest App unter Settings -> Status
oder aus der Browser Adressleiste :wink:

Ahh, danke. Habe es gefunden und ist die gleiche.

Vers.1.1 vom 7.1.2020

Fehler behoben : Es werden nun all 10 Tage der Vorhersage angezeigt
Lon/lat getauscht
Bei Bedarf können nun eigene Wettersymbole geladen werden

Vielen Dank für deine bisherige Arbeit rund um Tempest.

Sieht jetzt gut aus.
Kann man eine (jede) Farbe auch auf Transparenz setzen?

Und die Krönung wäre noch eine Vorhersage der nächsten Stunden…:slight_smile:

Falls Transparenz gewünscht wird einfach 2 HEX Digits an das Ende der HEX Farbinfo setzten (Alpha Kanal)
Hier sind die möglichen HEX Werte https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

Also Grün = ‚2DC800‘ Grün mit 50% Transparenz = ‚2DC80080‘

Allerdings gibt es hier eine kleine Komplikation :

Android uses #AARRGGBB (see doc as pointed out by @gkaffka).

Web browsers uses #RRGGBBAA (see Can I use… Support tables for HTML5, CSS3, etc for browser support).

Hi,

ich habe eine Nachricht von WeatherFlow erhalten, dass die versprochene Zugabe nun verschickt werden, bzw. man sogar die Wahl hat zwischen

  • einem Hub Batterie Pack (Wert 40$)
  • dem WEATHERmeter (Wert 70$) oder
  • einem Shop-Gutschein (Wert 50$)

Ab Ende März wird dann wohl auch aus dem Shop nach Europa ausgeliefert.

Hat jemand von euch schon jemand nachgefragt, wie unsere Sammelbestellungen gehandhabt werden? In dem angegebenen Link kann ich wohl nur eine Option auswählen, aber nicht für jedes erworbene Tempest Gerät einzeln.

Burkhard

@bumaas:
Ich weiß nicht wirklich welches ich nehmen würde. Shop-Gutschein bräuchte ich nicht, höchstens wenn man sie weitergeben könnte und mehrere sammeln damit jemand einen weiteren Tempest ordern könnte.
WEATHERmeter brauche ich nicht. Ist eher was um unterwegs Wind messen zu wollen.
Hub Batterie Pack wäre wohl das Beste. Nur hoffe ich dass man es dauernd am Verbraucher lassen kann. So funktionierte es nämlich bei den Powerpacks bisher nicht.

@BestEx:
Mit der vollen und teilweisen Transparenz sieht alles doch viel schöner aus. (brrr… grüner Hintergrund).
Eins hätte ich noch: kann man die Tabellenbreite für alle Tage gleich machen? Jetzt sind die Spalten unterschiedlich breit, je nach Text. Und somit die Icons mal groß, mal klein.

Das Skript legt die stündliche Wetter Vorhersage als Stringvariable ab.

Die Anzahl der Stunden und der Abstand der Stunden kann parametrisiert werden
ebenso welche Informationen angezeigt werden sowie die Transparenz und Farbeinstellung für Hintergrund und Text

Wetter Symbole werden extern geladen, können aber auch lokal vorgehalten werden

Zur besseren Übersicht kann eine Tabellenstruktur optional eingeschaltet werden.
Die Personalisierung (Token etc.) erfolgt identisch zur Tagesvorhersage

Viel Spaß

Vers. 1.0 Datum 8.1.2021

Vers. 1.1 Datum 9.1.2021
API Anpassung

Vers. 1.1.1 Datum 9.1.2021
Tabellenbreite FIX, Chance für Precip% und default Precip deaktiviert

Vers. 1.2 vom 10.1.2021
Schriftgröße kann verändert werden,
Verbesserung der CSS/HTML TAGS
Wahl Tabellenbreite in % oder PX
Long/Lat Koordinaten werden bei der neuen API nicht mehr benötigt
Zeile mit Datum eingeführt



<?php
//----------------------------------------Version 1.2 Datum 10.01.2021 BestEx --------------------------------
// Das Skript legt automatisch zwei Variablen an : All Data => ist eine String Variable in der serialisiert das von Tempest empfangene Array mit Daten für den Nutzer abgelegt wird. Das Program nutzt diese Variable nicht
// Hourly Forecast =>  ist eine String Variable die den HTML String zur Anzeige des Forecasts  beinhaltet. 


// Hier bitte die entsprechenden Daten eintragen

$token = ''; // Das Token kann hier generiert werden : https://tempestwx.com/settings/tokens/

$Station_ID = '';

//-------------------------------------------Parameter um die Anzeige zu personalisieren-------------------------------

$path = 'https://cdn.jsdelivr.net/gh/YR/weather-symbols@8.0.1/dist/svg/'; // Pfad für die Wetter Symbole
$icon_type = '.svg';// Typ des ICONS 

// In diesem Array die Dateinamen der ICONS eintragen
$condition_icons = array(

'clear-day' => '',
'clear-night' => '',
'cloudy' => '',
'foggy' => '',
'partly-cloudy-day' => '',
'partly-cloudy-night' => '',
'possibly-rainy-day' => '',
'possibly-rainy-night' => '',
'possibly-sleet-day' => '',
'possibly-sleet-night' => '',
'possibly-snow-day' => '',
'possibly-snow-night' => '',
'possibly-thunderstorm-day' => '',
'possibly-thunderstorm-night' => '',
'rainy' => '',
'sleet' => '',
'snow' => '',
'thunderstorm' => '',
'windy' => ''

);

$default_icons = true; // Falls eigene ICONS verwendet werden  auf false setzen
$alpha = '33'; // Transparenzwert für den Hintergrund
$alpha_text = ''; // Transparenzwert für den Text 

//  HEX Farbfelder können beliebig erweitert werden 
$blue = '5ba2ec';
$white = 'FFFFFF' ;
$light_blue = '80d7ff';
$light_green = '90EE90';
$dark_grey = 'A9A9A9';
$light_grey = 'D3D3D3';
$red = 'FF2626';
$yellow = 'DFDF00';
$green = '2DC800';
$orange = 'FFC895';
$blood_orange = 'FF6666';
$fire = 'FF3300';
$black = '000000';
$violet = '774477';

// Zuordnung der Farben zu den Feldern der Anzeige

$color_label_background = $green.$alpha; 
$color_column_background = $blue.$alpha; 
$color_text_label =$white.$alpha_text;
$color_label_text_gust = $white.$alpha_text;
$color_label_text_average = $white.$alpha_text;
$color_column_text = $white.$alpha_text;

// Ein paar Schalter zum Spielen
$border = 'separate'; // Werte können 'collapse' oder 'separate' sein
$automatic_color = true; // Falls true wird die von Tempest übermittelte Farbe für den Hintergrund genutzt
$nr_of_hours_in_forecast = 48; //max 240
$stunden_intervall = 1; // z.b. bei 4 wird nur jede 4te Stunde angezeigt 
$tabellen_breite_in_przt = false;
$width = 4600; // Breite der Anzeige (Falls % max. 100 ansonsten in PX) in  Sollte angepasst werden wenn die Anzahl der Vorhersage Tage verringert wird.
$fontSize = 14; //Schriftgröße in px


// Hier kann die angezeigte Menge der Informationen beeinflusst werden
$display_symbols = true;
$display_condition = true;
$display_T = true;
$display_T_feels_like = true;
$display_Precip_type = true;
$display_Precip = true;
$display_Precip_in_Przt = true;
$display_sea_level_pressure = true;
$display_relative_humidity = true;
$display_wind_avg = true;
$display_wind_gust = true;
$display_wind_direction_cardinal = true;
$display_uv = true;

//------------------------------ Ab hier bitte nichts mehr verändern ------------------------------------------------------------

if($default_icons)
{ 
      $condition_icons = array(

      'clear-day' => '01d',
      'clear-night' => '01n',
      'cloudy' => '04',
      'foggy' => '15',
      'partly-cloudy-day' => '02d',
      'partly-cloudy-night' => '02n',
      'possibly-rainy-day' => '40d',
      'possibly-rainy-night' => '40n',
      'possibly-sleet-day' => '43d',
      'possibly-sleet-night' => '43n',
      'possibly-snow-day' => '45d',
      'possibly-snow-night' => '45n',
      'possibly-thunderstorm-day' => '24d',
      'possibly-thunderstorm-night' => '24n',
      'rainy' => '46',
      'sleet' => '48',
      'snow' => '50',
      'thunderstorm' => '30',
      'windy' => '10'

      );
}

$variable_types = [
                                    'Boolean' => 0,
                                    'Integer' => 1,
                                    'Float' => 2,
                                    'String' => 3
                      ];

$url = 'https://swd.weatherflow.com/swd/rest/better_forecast?station_id='.$Station_ID.'&units_temp=c&units_wind=kph&units_pressure=hpa&units_precip=cm&units_distance=km'; 

$headers = array(
    "Content-Type: application/json; charset=utf-8",
    "Authorization: Bearer ".$token
);


$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$resp = curl_exec($ch);
curl_close($ch);

$forecast = json_decode ($resp);
$array = json_decode(json_encode($forecast), true);
//print_r($array);



$label_background = '<td style="background-color: #'.$color_label_background.'" colspan="1" >';
$column_background = '<td style="background-color: #'.$color_column_background.'" colspan="1" >';


$label_text_color = '<FONT COLOR="#'.$color_text_label.'">';
$column_text_color = '<FONT COLOR="#'.$color_column_text.'">';

if($tabellen_breite_in_przt) $przt = '%'; else $przt ='';

$key = 0;
while($key < count($array['forecast']['hourly']))
{
      $value = $array['forecast']['hourly'][$key];
      if(array_key_exists('conditions',$value)) $condition[$value['time']]['conditions'] = $value['conditions']; else $display_condition = false;
      if(array_key_exists('local_hour',$value)) $condition[$value['time']]['hour'] = $value['local_hour'];
      if(array_key_exists('local_hour',$value)) $condition[$value['time']]['day'] = $value['local_day'];
      if(array_key_exists('air_temperature',$value))$condition[$value['time']]['air_temperature'] = $value['air_temperature']; else $display_T = false;
      if(array_key_exists('feels_like',$value))$condition[$value['time']]['feels_like'] = $value['feels_like']; else $display_T_feels_like = false;
      if(array_key_exists('precip',$value))$condition[$value['time']]['precip'] = $value['precip']; else $display_Precip = false;
      if(array_key_exists('precip_probability',$value))$condition[$value['time']]['precip_probability'] = $value['precip_probability']; else $display_Precip_in_Przt = false;
      if(array_key_exists('sea_level_pressure',$value))$condition[$value['time']]['sea_level_pressure'] = $value['sea_level_pressure']; else $display_sea_level_pressure = false;
      if(array_key_exists('relative_humidity',$value))$condition[$value['time']]['relative_humidity'] = $value['relative_humidity']; else $display_relative_humidity = false;
      if(array_key_exists('precip_type',$value))$condition[$value['time']]['precip_type'] = $value['precip_type']; else $display_Precip_type = false;
      if(array_key_exists('icon',$value))$condition[$value['time']]['icon'] = $value['icon'];else $display_symbols = false;
      if(array_key_exists('wind_avg',$value))$condition[$value['time']]['wind_avg'] = $value['wind_avg']; else $display_wind_avg = false;
      if(array_key_exists('wind_avg_color',$value))$condition[$value['time']]['wind_avg_color'] = $value['wind_avg_color']; else $automatic_color = false;
      if(array_key_exists('wind_gust',$value))$condition[$value['time']]['wind_gust'] = $value['wind_gust']; else $display_wind_gust = false;
      if(array_key_exists('wind_gust_color',$value))$condition[$value['time']]['wind_gust_color'] = $value['wind_gust_color']; else $automatic_color = false;
      if(array_key_exists('wind_direction_cardinal',$value))$condition[$value['time']]['wind_direction_cardinal'] = $value['wind_direction_cardinal']; else $display_wind_direction_cardinal = false;
      if(array_key_exists('uv',$value))$condition[$value['time']]['uv'] = $value['uv']; else $display_uv = false;
      $key = $key + $stunden_intervall;

}
$string_data = serialize($condition); 
$ID = manage_variable(false,$_IPS['SELF'],'All Data',$variable_types['String'],'~TextBox','0',false);
SetValueString($ID,$string_data);

//print_r($condition);

$content  = '<style type="text/css">table.Forecast_Profile {table-layout: fixed; width: '.$width.$przt.'; border-collapse: '.$border.'; } table.Forecast_Profile td { border: 0px solid #444455;  font-size: '.$fontSize.'px; } </style>';
$content .= '<table class="Forecast_Profile">';

$content .= '<tr>'; 
$content .= $label_background.$label_text_color.'Date'; 

$nr = 0;
foreach($condition as $key => $value)
{

      if($nr >= $nr_of_hours_in_forecast) break;
      if( 
            ($value['hour'] == '0:00')
            or
            ($nr == 0)
        )
        { 
            $content .= $label_background.$label_text_color.$value['day']; 
        }
        else 
        {
            $content .= $label_background.$label_text_color.' ';        
        }
      $nr++;
      $content .= '</td>';
}
$content .= '</tr>';

$content .= $label_background.$label_text_color.'Hour'; 
$nr = 0;
foreach($condition as $key => $value)
{

      if($nr >= $nr_of_hours_in_forecast) break;
      $content .= $label_background.$label_text_color.$value['hour'].':00'; 
      $nr++;
      $content .= '</td>';
}
$content .= '</tr>';


if($display_symbols)
{ 
      $content .= $label_background.$label_text_color.' '; 
      $nr = 0;
      foreach($condition as $key => $value)
      {

            if($nr >= $nr_of_hours_in_forecast) break;
            $filename = $path.$condition_icons[$value['icon']].$icon_type;
            $icon =  file_get_contents($filename); 

            $content .= $label_background.$label_text_color.$icon; 
            $nr++;
            $content .= '</td>';
      }
      $content .= '</tr>';
}

if($display_condition)
{ 
      $content .= $label_background.$label_text_color.'Condition'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {

            if($nr >= $nr_of_hours_in_forecast) break;
            $content .= $column_background.$column_text_color.$value['conditions'] ;
            $nr++;
            $content .= '</td>';
      }
      $content .= '</tr>';
}

if($display_T)
{ 
      $content .= $label_background.$label_text_color.'Temp.'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {

            if($nr >= $nr_of_hours_in_forecast) break;
            $content .= $column_background.$column_text_color.$value['air_temperature'].' °C' ;      
            $nr++;
            $content .= '</td>';
      }
      $content .= '</tr>';
}





if($display_T_feels_like )
{ 
      $content .= $label_background.$label_text_color.'Feels Like'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {

            if($nr >= $nr_of_hours_in_forecast) break;
            $content .= $column_background.$column_text_color.$value['feels_like'].' °C' ;
            $nr++;     
            $content .= '</td>';
      }
      $content .= '</tr>';
}


if($display_Precip_type)
{ 
      $content .= $label_background.$label_text_color.'Type'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {

            if($nr >= $nr_of_hours_in_forecast) break;
            $content .= $column_background.$column_text_color.$value['precip_type'];      
            $nr++;
            $content .= '</td>';
      }
      $content .= '</tr>';
}





if($display_Precip)
{ 
      $content .= $label_background.$label_text_color.'Precip'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {
            
            if($nr >= $nr_of_hours_in_forecast) break;

            $content .= $column_background.$column_text_color.$value['precip'] ;
            $nr++;
            $content .= '</td>';
      }
      $content .= '</tr>';
}


if($display_Precip_in_Przt)
{ 
      $content .= $label_background.$label_text_color.'Chance'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {

            if($nr >= $nr_of_hours_in_forecast) break;

            $content .= $column_background.$column_text_color.$value['precip_probability']." %" ;
            $nr++;
            $content .= '</td>';
      }

      $content .= '</tr>';
}

if($display_sea_level_pressure)
{ 
      $content .= $label_background.$label_text_color.'hPa'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {

            if($nr >= $nr_of_hours_in_forecast) break;

            $content .= $column_background.$column_text_color.$value['sea_level_pressure'];
            $nr++;
            $content .= '</td>';
      }
      $content .= '</tr>';

}

if($display_relative_humidity)
{ 
      $content .= $label_background.$label_text_color.'Humidity'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {

            if($nr >= $nr_of_hours_in_forecast) break;

            $content .= $column_background.$column_text_color.$value['relative_humidity'].' %';
            $nr++;
            $content .= '</td>';
      }

      $content .= '</tr>';
}


if($display_wind_avg)
{ 
      $content .= $label_background.$label_text_color.'Wind ~ km/h'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {

            if($nr >= $nr_of_hours_in_forecast) break;
            if($automatic_color)
            { 
                  $content .= '<td style="background-color: #'.$value['wind_avg_color'].$alpha. '" colspan="1" >'.$label_text_color.$value['wind_avg'] ;
            }
            else
            {
                  $content .= $column_background.$column_text_color.$value['wind_avg']; 
            }
            $nr++;
            $content .= '</td>';

      }

      $content .= '</tr>';
}



if($display_wind_gust)
{ 
      $content .= $label_background.$label_text_color.'Gust km/h'; 
      $nr = 0;
      foreach($condition  as $key => $value)
      {

            if($nr >= $nr_of_hours_in_forecast) break;
            if($automatic_color)
            { 
                  $content .= '<td style="background-color: #'.$value['wind_gust_color'].$alpha. '" colspan="1" >'.$label_text_color.$value['wind_gust'] ;
            }
            else
            {
                  $content .= $column_background.$column_text_color.$value['wind_gust']; 
            }
            $nr++;
            $content .= '</td>';          


      }

      $content .= '</tr>';
}


if($display_wind_direction_cardinal)
{ 
      $content .= $label_background.$label_text_color.'Direction'; 
      $nr = 0;
       foreach($condition  as $key => $value)
      {

            if($nr >= $nr_of_hours_in_forecast) break;

            $content .= $column_background.$column_text_color.$value['wind_direction_cardinal'];
            $nr++;
            $content .= '</td>';
      }

      $content .= '</tr>';
}



if($display_uv)
{ 
      $content .= $label_background.$label_text_color.'UV'; 
      $nr = 0;
       foreach($condition  as $key => $value)
      {

            if($nr >= $nr_of_hours_in_forecast) break;

            $content .= $column_background.$column_text_color.$value['uv'];
            $nr++;
            $content .= '</td>';
      }

      $content .= '</tr>';
}

$content .= '</table>';
$ID = manage_variable(false,$_IPS['SELF'],'Hourly Forecast',$variable_types['String'],'~HTMLBox','0',false);
SetValueString($ID,$content);


function manage_variable($profil_update,$parent,$name,$type,$profil,$aggregation_type,$logging)
{
      Global $var_liste;
      $archive_id = IPS_GetInstanceListByModuleID ('{43192F0B-135B-4CE7-A0A7-1475603F3060}')[0];
      $var_id = @IPS_GetVariableIDByName ($name, $parent);
      if($var_id === false)
      {
            $var_id = IPS_CreateVariable ($type);
            IPS_SetVariableCustomProfile ($var_id, $profil );
            IPS_SetName($var_id, $name);
            IPS_SetParent($var_id, $parent);
            if($logging or ($type != 3))
            { 
                  AC_SetLoggingStatus ($archive_id, $var_id, $logging);
                  AC_SetAggregationType ($archive_id, $var_id, $aggregation_type);
            }
            else
            {
                  AC_SetLoggingStatus ($archive_id, $var_id, $logging);
            }
            IPS_ApplyChanges($archive_id);
      }
      else
      {     
                  if(IPS_GetVariable($var_id)['VariableCustomProfile']  != $profil)
                  {   
                  if(IPS_GetVariable($var_id)['VariableType'] == $type)
                  {
                        IPS_LogMessage("Tempest", " Variablen Profil auf aktuellen Stand gebracht ".IPS_GetName($var_id)." Profil : ".$profil." Var ID".$var_id." CP ".IPS_GetVariable($var_id)['VariableCustomProfile']);
                        IPS_SetVariableCustomProfile ($var_id, $profil );

                  }
                  else
                  {
                        IPS_LogMessage("Tempest", " Variablen gelöscht ".IPS_GetName($var_id)." Profil : ".$profil." Var ID".$var_id." CP ".IPS_GetVariable($var_id)['VariableCustomProfile']);
                        IPS_DeleteVariable ($var_id);
                        check_variable($profil_update,$parent,$name,$type,$profil,$aggregation_type,$logging,$ID,$time_stamp);
                        return false;
                  }
            }
            else
            {

            }
      } 
      return $var_id;                 

}



@bumaas @Heidewinkler:
wenn der Hub Batterie Pack quasi als „USV“ dient wäre das nicht schlecht. WEATHERmeter hätte ich auch keine wirkliche Verwendung. Und der Gutschein hilft mir aktuell auch nicht wirklich. -> ich wäre dann auch für den Batterie Pack.

@Heidwinkler @BestEx:

komplett transparent/farblos geht auch. Dazu müssen nur die Farbvariablen „leer“ sein.

Allerdings stehen da auch noch Tabellen Tags drin. Ich bin da noch am Testen, weil die Tabellen Tags wohl auch nicht alle richtig gesetzt werden. Da fehlen z.T. <tr>, <td> und </td>, </tr>. Wenn ich die Daylight Zeile ausblende, fehlt auch der Tabellenabschluss.
Die Tabelle an sich funktioniert aber trotzdem :confused:
Eine Stelle für die Schriftgröße habe ich auch schon gefunden. Feste Spaltenbreite wäre nicht schlecht. Den Icons kann man aber auch eine feste Größe mitgeben. Ich melde mich dann mit dem Ergebnis.

Gruß
Rainer

Richtig klasse was hier entsteht. Respekt.

Gesendet von iPad mit Tapatalk

Automatische Farben ausschalten :

$automatic_color = false;

Sent from my Pixel 4 using Tapatalk

Automatische Farben ausschalten :

$automatic_color = false;

kann ich im Forcast Skript nicht finden

Sry das war für die Stunden Vorhersage, die Tagesvorhersage wird über : $automatic_hi_low_temp_color = true;

Gesteuert

Sent from my Pixel 4 using Tapatalk

musste eben feststellen, dass air_temp_high_color und air_temp_low_color nicht mehr übertragen werden.

dadurch gibt es einen ganze Menge Fehler :banghead:

in den Stundenwerten fehlen die Farbeinträge auch!

Gruß
Rainer