+ Antworten
Seite 6 von 8 ErsteErste ... 4 5 6 7 8 LetzteLetzte
Ergebnis 51 bis 60 von 71
  1. #51
    Registriert seit
    Jan 2019
    Beiträge
    55

    Moin,

    und noch eine blödere Anfängerfrage.... Ich hab den Code des Widgets jetz in die Variable eingelesen und wie lass ich mir die Box anzeigen im Webfront? Hab die Variable in eine Kategorie verlinkt und lass diese anzeigen, sieht dann aber so aus wie in der Doku:
    HTML-Box — IP-Symcon :: Automatisierungssoftware

    Grüße

    Matthias

  2. #52
    Registriert seit
    Mar 2018
    Ort
    85560
    Beiträge
    95

    Wink Vielen Dank

    Zitat Zitat von Fonzo Beitrag anzeigen
    Dazu musst Du entsprechend die Werte anpassen, die angezeigt werden sollen und auch das CSS.
    Vom Grundprinzip sieht das so aus, must Du dann eben noch mit den Werten ergänzen die Du angezeigt haben willst bzw. das Layout an die persönlichen Vorlieben anpassen.

    PHP-Code:
    $api_secret "XXXXXXXXX";
    $latitude "51.06";
    $longitude "9.47";
    define ('ID_WEATHER_NEXT_DAYS'18506 /*[Info\Wetter\DarkSky\DarkSky Visualisierung\Wetterbericht Dark Sky Daily]*/); // ObjektID einer String Variable mit Variablenprofil HTMLBox
    .......... 
    Vielen Dank für das Script, sieht echt super aus. Langsam kommt der durchblick

    Habe noch einen Fehler in der Anzeige. Es wird links vom Wettersymbol ein Fragezeichen angezeigt. Konnte jedoch nicht erkennen an was das liegt.
    Kannst Du feststellen an was das liegt?

    Name:  WetterFragezeichen-01.png
Hits: 229
Größe:  45.3 KB
    Viele Grüße
    PeterL
    IP-Symcon 5.1 (Beta) Professional - LAN Gateway enOcean, LAN Gateway Z-Wave
    IPS-Studio 3.4

  3. #53
    Registriert seit
    Oct 2011
    Ort
    Hattersheim (Hessen)
    Beiträge
    6,622

    Zitat Zitat von lretep Beitrag anzeigen
    Habe noch einen Fehler in der Anzeige. Es wird links vom Wettersymbol ein Fragezeichen angezeigt. Konnte jedoch nicht erkennen an was das liegt.
    Das ist kein Fehler sondern eine persönliche Einstellungssache ob man man das will oder nicht. Solche Dinge werden alle im CSS festgelegt, das ? ist in dem Fall nur exemplarisch da, weil man ja wissen muss wann bzw. wo ein hover Effekt auftritt. Wenn Dir persönlich bekannt ist wenn Du über ein Element gehst dass dann weitere Information eingeblendet wird kannst Du das ? auch einfach wegnehmen.

    Das gesamte Layout wie Farbe, Schriftart, Schriftgröße usw. wird im CSS definiert, damit kannst Du das individuell anpassen. Das ? wird im figure:before Element im CSS unter content definiert. Das kannst Du im CSS anpassen siehe auch Tutorial Bilder mit Bildunterschriften.

    Also einfach
    PHP-Code:
    figure:before 
      
    content"?"
      
    positionabsolute
      
    backgroundrgba(255,255,255,0.75); 
      
    colorblack;
      
    width24px;
      
    height24px;
      -
    webkit-border-radius12px;
      -
    moz-border-radius:    12px;
      
    border-radius:         12px;
      
    text-aligncenter;
      
    font-size14px;
      
    line-height24px;
      
    /* Only Fx 4 supporting transitions on psuedo elements so far... */
      
    -webkit-transitionall 0.6s ease;
      -
    moz-transitionall 0.6s ease;
      -
    o-transitionall 0.6s ease;
      
    opacity0.75;    
    }
    figure:hover:before {
      
    opacity0;

    löschen, dann wird auch kein Fragezeichen mehr angezeigt, dann must man aber eben auch wissen, dass dort etwas eingeblendet wird, wenn man in dem Bereich geht. Das ist also persönliche Ansicht, wie man das eben haben will.
    Geändert von Fonzo (26.03.19 um 00:51 Uhr)

  4. #54
    Registriert seit
    Oct 2011
    Ort
    Oberding
    Beiträge
    320

    Zitat Zitat von Fonzo Beitrag anzeigen
    Dazu musst Du entsprechend die Werte anpassen, die angezeigt werden sollen und auch das CSS.
    Vom Grundprinzip sieht das so aus, must Du dann eben noch mit den Werten ergänzen die Du angezeigt haben willst bzw. das Layout an die persönlichen Vorlieben anpassen.

    PHP-Code:
    $api_secret "XXXXXXXXX";
    $latitude "51.06";
    $longitude "9.47";

    define ('ID_WEATHER_NEXT_DAYS'18506 /*[Info\Wetter\DarkSky\DarkSky Visualisierung\Wetterbericht Dark Sky Daily]*/); // ObjektID einer String Variable mit Variablenprofil HTMLBox
    define ('ID_WEATHER_NOW'14937 /*[Info\Wetter\DarkSky\DarkSky Visualisierung\Wetterbericht Dark Sky Now]*/); // ObjektID einer String Variable mit Variablenprofil HTMLBox

    $url "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?exclude=minutely,hourlylang=de&units=si";
    $ch curl_init();
    curl_setopt($chCURLOPT_RETURNTRANSFER1); 
    curl_setopt($chCURLOPT_URL$url); 
    $result curl_exec($ch);
    curl_close($ch);  
    $darksky_data json_decode($resulttrue);

    $weather_now $darksky_data["currently"];
    $weather_daily $darksky_data["daily"]["data"];

    SetValue(ID_WEATHER_NOWWeather_Now($weather_now));
    SetValue(ID_WEATHER_NEXT_DAYSWeather_Now_And_Next_Days($weather_daily));

    function 
    Weather_Now($weather_now)
    {
          
    $html '<head>
    <meta charset="utf-8">
    <title>Wetter</title>
    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
    <script>var __adobewebfontsappname__="dreamweaver"</script>
    <script src="http://use.edgefonts.net/source-sans-pro:n6:default;acme:n4:default;bilbo:n4:default.js" type="text/javascript"></script>'
    .
    Get_CSS().'
    </head>

    <body>'
    ;
       
    $html .= '<table>';
       
    $html.= '<tr>
               <td class="weathertablecell">
               <section class="weatherframe">
                     <div class="weathertitledate">Aktuell</div>
                   <figure class="cap-bot"><img src="https://darksky.net/images/weather-icons/'
    .$weather_now['icon'].'.png" alt="Wettericon" width="70" height="70"><figcaption>'.$weather_now['summary'].'</figcaption></figure>
                   <section class="weatherpicright">
                       <div class="temperature">'
    .round($weather_now['temperature'], 1).' °C</div>
                             <div class="humidity">'
    .$weather_now['humidity'].'%</div>
                      </section>
                      <section class="weatherpicbottom">
                          <div class="wind">Ø Wind: '
    .$weather_now['windSpeed'].' km/h</div>
                          <div class="temperaturefeel">'
    .round($weather_now['apparentTemperature'], 1).' °C gefühlt</div>
                          <div class="pressure">'
    .$weather_now['pressure'].' hPa</div>
                          <div class="visibility">Sichtweite '
    .$weather_now['visibility'].' km</div>
                       </section>
                 </section>
                </td>'
    ;

       
    $html .= "</tr>
                </table>"
    ;
          
    $html .= '</body>
    </html>'
    ;
       return 
    $html;
    }

    function 
    Weather_Now_And_Next_Days($weather_daily)
    {

    $html '<head>
    <meta charset="utf-8">
    <title>Wetter</title>
    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
    <script>var __adobewebfontsappname__="dreamweaver"</script>
    <script src="http://use.edgefonts.net/source-sans-pro:n6:default;acme:n4:default;bilbo:n4:default.js" type="text/javascript"></script>'
    .
    Get_CSS().'
    </head>

    <body>'
    ;
       
    $html .= '<table>';

       
    $html.= '<tr>';

       foreach (
    $weather_daily as $day => $data){
          if (
    isToday($data['time'])){
             
    $weekday "Heute";
          } else {
             
    $day_names = array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
             
    $weekday $day_names[date("w",intval($data['time']))];
          }

          
    $html.= '<td class="weathertablecell">
                      <section class="weatherframe">
                           <div class="weathertitledate">'
    .$weekday.'</div>
                       <figure class="cap-bot"><img src="https://darksky.net/images/weather-icons/'
    .$data['icon'].'.png" alt="Wettericon" width="70" height="70"><figcaption>'.$data['summary'].'</figcaption></figure>
                       <section class="weatherpicright">
                           <div class="temperaturemax">'
    .round($data['temperatureHigh'], 1).' °C</div>
                           <div class="temperaturemin">'
    .round($data['temperatureLow'], 1).' °C</div>
                       </section>
                       <section class="weatherpicbottom">
                              <div class="wind">Ø Wind: '
    .$data['windSpeed'].' km/h</div>
                              <div class="wind">Ø Wind Böen: '
    .$data['windGust'].' km/h</div>
                              <div class="cloud">Wolken: '
    .ConvertPercent($data['cloudCover']).' %</div>
                              <div class="humidity">Ø Feuchtigkeit: '
    .ConvertPercent($data['humidity']).' %</div>';
        if(isset(
    $data['precipType']))
        {
            
    $precipitation_type Get_PrecipitationType($data['precipType']);
            if(
    $precipitation_type != "")
            {
            
    $html.= '<div class="precipitationtype">Niederschlagstyp: '.$precipitation_type.'</div>';
            }
        }

        
    $html.= '<div class="precipitationprobability">Regen: '.ConvertPercent($data['precipProbability']).' %</div>                          
                        </section>
                       </section>
                       </td>'
    ;
       }
       
    $html .= "</tr>
                </table>"
    ;
       
    $html .= '</body>
    </html>'
    ;
       return 
    $html;
    }

    function 
    Get_PrecipitationType($precipitation_type)
    {
    $precipitation_type "";
    if (
    $precipitation_type == "rain")
    {
        
    $precipitation_type "Regen";

    if (
    $precipitation_type == "snow")
    {
        
    $precipitation_type "Schnee";
    }
    if (
    $precipitation_type == "sleet")
    {
        
    $precipitation_type "Schneeregen";
    }

    return 
    $precipitation_type;
    }

    function 
    isToday($time){
       
    $begin mktime(000);
       
    $end mktime(235959);
       
    // check if given time is between begin and end
       
    return (($time >= $begin) && ($time <= $end));
    }

    function 
    ConvertPercent($value)
    {
        
    $percentage $value 100;
        return 
    $percentage;
    }

    function 
    Get_CSS()
    {
    $style '<style>
    body { background-color:transparent; }
    .weathertablecell {
        width: 170px;
        text-shadow: 1px 1px 0px rgba(66,66,66,1.00);
        vertical-align: top;
        padding-bottom: 0px;
        padding-top: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    .weatherframe {
        background-color: rgba(136,123,123,0.55);
        border-radius: 25px;
        padding-left: 0px;
        margin-left: 4px;
        margin-right: 4px;
        padding-top: 0px;
        margin-top: 3px;
        -webkit-box-shadow: 2px 2px 13px 0px rgba(50,49,49,1.00);
        box-shadow: 2px 2px 13px 0px rgba(50,49,49,1.00);
        padding-bottom: 0px;
        margin-bottom: 0px;
        position: relative;
        height: 275px;
    }

    .weathertitlehour {
        color: rgba(241,241,241,1.00);
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        text-align: center;
        padding-top: 6px;
    }
    figure {
        display: block;
        position: relative;
        overflow: hidden;
        margin-left: 1px;
        margin-right: 1px;
        margin-top: 0px;
    }
    figcaption {
        position: absolute;
        background: rgba(0,0,0,0.55);
        color: white;
        padding: 10px 20px;
        opacity: 0;
        bottom: 0;
        left: -30%;
        -webkit-transition: all 0.6s ease;
        -moz-transition: all 0.6s ease;
        -o-transition: all 0.6s ease;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        font-size: xx-small;
    }
    figure:hover figcaption {
      opacity: 1;
      left: 0;
    }
    .cap-left figcaption { bottom: 0; left: -30%; }
    .cap-left:hover figcaption { left: 0; }

    .cap-right figcaption { bottom: 0; right: -30%; }
    .cap-right:hover figcaption { right: 0; }

    .cap-top figcaption { left: 0; top: -30%; }
    .cap-top:hover figcaption { top: 0; }

    .cap-bot figcaption { left: 0; bottom: -30%;}
    .cap-bot:hover figcaption { bottom: 0; }
    figure:before { 
      content: "?"; 
      position: absolute; 
      background: rgba(255,255,255,0.75); 
      color: black;
      width: 24px;
      height: 24px;
      -webkit-border-radius: 12px;
      -moz-border-radius:    12px;
      border-radius:         12px;
      text-align: center;
      font-size: 14px;
      line-height: 24px;
      /* Only Fx 4 supporting transitions on psuedo elements so far... */
      -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      opacity: 0.75;    
    }
    figure:hover:before {
      opacity: 0;
    }
    .temperature {
        position: relative;
        text-align: right;
        color: rgba(235,235,235,1.00);
        padding-right: 5px;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
    }
    .humidity {
        position: relative;
        text-align: right;
        color: rgba(235,235,235,1.00);
        padding-right: 5px;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
    }
    .wind {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .weathertitledate {
        padding-top: 6px;
        text-align: center;
        color: rgba(241,241,241,1.00);
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    }
    .temperaturefeel {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .pressure {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .rain {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .precipitationtype {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .precipitationprobability {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .cloud {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .humidity {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .weatherframe .weatherpicright {
        position: relative;
        top: -18px;
    }
    .weatherframe .weatherpicbottom {
        position: relative;
        left: auto;
        right: auto;
        top: -20px;
    }


    .visibility {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .temperaturemax {
        position: relative;
        text-align: right;
        color: rgba(235,235,235,1.00);
        padding-right: 5px;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
    }
    .temperaturemin {
        position: relative;
        text-align: right;
        color: rgba(235,235,235,1.00);
        padding-right: 5px;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
    }
    </style>'
    ;
    return 
    $style;

    Hallo Fonzo,

    vielen Dank für deine Antwort und das Script. Es funktioniert sehr gut. Ich habe allerdings noch zwei Fragen, wie kann man denn die Anzahl an Tagen eingrenzen. Mir würde die Anzeige 4 Tagen vollkommen reichen.

    Und ist es möglich den "Hover Text" auch auf deutsch zu bekommen, bei mir ist dieser Englisch.

    Wäre super wenn du mir das noch beantworten könntest.


    Vielen Dank und Grüße
    Stephan

  5. #55
    Registriert seit
    Oct 2011
    Ort
    Hattersheim (Hessen)
    Beiträge
    6,622

    Zitat Zitat von firewire Beitrag anzeigen
    Ich habe allerdings noch zwei Fragen, wie kann man denn die Anzahl an Tagen eingrenzen. Mir würde die Anzeige 4 Tagen vollkommen reichen.
    Dazu must Du nur eine if Prüfung mit dem Wert in der foreach Schleife einfügen, die beim Limit die Schleife unterbricht (Anzahl der Tage wird in Zeile 6 angegeben).

    PHP-Code:
    <?php

    $api_secret 
    "XXXXX";
    $latitude "51.7";
    $longitude "9.8";
    $limit 4// maximale Anzahl der Tage

    define ('ID_WEATHER_NEXT_DAYS'18506 /*[Info\Wetter\DarkSky\DarkSky Visualisierung\Wetterbericht Dark Sky Daily]*/); // ObjektID einer String Variable mit Variablenprofil HTMLBox
    define ('ID_WEATHER_NOW'14937 /*[Info\Wetter\DarkSky\DarkSky Visualisierung\Wetterbericht Dark Sky Now]*/); // ObjektID einer String Variable mit Variablenprofil HTMLBox

    $url "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?lang=de&units=si";
    $ch curl_init();
    curl_setopt($chCURLOPT_RETURNTRANSFER1); 
    curl_setopt($chCURLOPT_URL$url); 
    $result curl_exec($ch);
    curl_close($ch);  
    $darksky_data json_decode($resulttrue);

    $weather_now $darksky_data["currently"];
    $weather_daily $darksky_data["daily"]["data"];
    $weather_hourly $darksky_data["hourly"]["data"];


    SetValue(ID_WEATHER_NOWWeather_Now($weather_now));
    SetValue(ID_WEATHER_NEXT_DAYSWeather_Now_And_Next_Days($weather_daily$limit));

    function 
    Weather_Now($weather_now)
    {
          
    $html '<head>
    <meta charset="utf-8">
    <title>Wetter</title>
    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
    <script>var __adobewebfontsappname__="dreamweaver"</script>
    <script src="http://use.edgefonts.net/source-sans-pro:n6:default;acme:n4:default;bilbo:n4:default.js" type="text/javascript"></script>'
    .
    Get_CSS().'
    </head>

    <body>'
    ;
       
    $html .= '<table>';
       
    $html.= '<tr>
               <td class="weathertablecell">
               <section class="weatherframe">
                     <div class="weathertitledate">Aktuell</div>
                   <figure class="cap-bot"><img src="https://darksky.net/images/weather-icons/'
    .$weather_now['icon'].'.png" alt="Wettericon" width="70" height="70"><figcaption>'.$weather_now['summary'].'</figcaption></figure>
                   <section class="weatherpicright">
                       <div class="temperature">'
    .round($weather_now['temperature'], 1).' °C</div>
                             <div class="humidity">'
    .$weather_now['humidity'].'%</div>
                      </section>
                      <section class="weatherpicbottom">
                          <div class="wind">Ø Wind: '
    .$weather_now['windSpeed'].' km/h</div>
                          <div class="temperaturefeel">'
    .round($weather_now['apparentTemperature'], 1).' °C gefühlt</div>
                          <div class="pressure">'
    .$weather_now['pressure'].' hPa</div>
                          <div class="visibility">Sichtweite '
    .$weather_now['visibility'].' km</div>
                       </section>
                 </section>
                </td>'
    ;

       
    $html .= "</tr>
                </table>"
    ;
          
    $html .= '</body>
    </html>'
    ;
       return 
    $html;
    }

    function 
    Weather_Now_And_Next_Days($weather_daily$limit)
    {

    $html '<head>
    <meta charset="utf-8">
    <title>Wetter</title>
    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
    <script>var __adobewebfontsappname__="dreamweaver"</script>
    <script src="http://use.edgefonts.net/source-sans-pro:n6:default;acme:n4:default;bilbo:n4:default.js" type="text/javascript"></script>'
    .
    Get_CSS().'
    </head>

    <body>'
    ;
       
    $html .= '<table>';

       
    $html.= '<tr>';
        
    $i 1;
       foreach (
    $weather_daily as $day => $data){
          if (
    isToday($data['time'])){
             
    $weekday "Heute";
          } else {
             
    $day_names = array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
             
    $weekday $day_names[date("w",intval($data['time']))];
          }

          
    $html.= '<td class="weathertablecell">
                      <section class="weatherframe">
                           <div class="weathertitledate">'
    .$weekday.'</div>
                       <figure class="cap-bot"><img src="https://darksky.net/images/weather-icons/'
    .$data['icon'].'.png" alt="Wettericon" width="70" height="70"><figcaption>'.$data['summary'].'</figcaption></figure>
                       <section class="weatherpicright">
                           <div class="temperaturemax">'
    .round($data['temperatureHigh'], 1).' °C</div>
                           <div class="temperaturemin">'
    .round($data['temperatureLow'], 1).' °C</div>
                       </section>
                       <section class="weatherpicbottom">
                              <div class="wind">Ø Wind: '
    .$data['windSpeed'].' km/h</div>
                              <div class="wind">Ø Wind Böen: '
    .$data['windGust'].' km/h</div>
                              <div class="cloud">Wolken: '
    .ConvertPercent($data['cloudCover']).' %</div>
                              <div class="humidity">Ø Feuchtigkeit: '
    .ConvertPercent($data['humidity']).' %</div>';
        if(isset(
    $data['precipType']))
        {
            
    $precipitation_type Get_PrecipitationType($data['precipType']);
            if(
    $precipitation_type != "")
            {
            
    $html.= '<div class="precipitationtype">Niederschlagstyp: '.$precipitation_type.'</div>';
            }
        }

        
    $html.= '<div class="precipitationprobability">Regen: '.ConvertPercent($data['precipProbability']).' %</div>                          
                        </section>
                       </section>
                       </td>'
    ;
        
    $i++;
        if(
    $limit $i)
        {
        break;
        }               
       }
       
    $html .= "</tr>
                </table>"
    ;
       
    $html .= '</body>
    </html>'
    ;
       return 
    $html;
    }

    function 
    Get_PrecipitationType($precipitation_type)
    {
    $precipitation_type "";
    if (
    $precipitation_type == "rain")
    {
        
    $precipitation_type "Regen";

    if (
    $precipitation_type == "snow")
    {
        
    $precipitation_type "Schnee";
    }
    if (
    $precipitation_type == "sleet")
    {
        
    $precipitation_type "Schneeregen";
    }

    return 
    $precipitation_type;
    }

    function 
    isToday($time){
       
    $begin mktime(000);
       
    $end mktime(235959);
       
    // check if given time is between begin and end
       
    return (($time >= $begin) && ($time <= $end));
    }

    function 
    ConvertPercent($value)
    {
        
    $percentage $value 100;
        return 
    $percentage;
    }

    function 
    Get_CSS()
    {
    $style '<style>
    body { background-color:transparent; }
    .weathertablecell {
        width: 170px;
        text-shadow: 1px 1px 0px rgba(66,66,66,1.00);
        vertical-align: top;
        padding-bottom: 0px;
        padding-top: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    .weatherframe {
        background-color: rgba(136,123,123,0.55);
        border-radius: 25px;
        padding-left: 0px;
        margin-left: 4px;
        margin-right: 4px;
        padding-top: 0px;
        margin-top: 3px;
        -webkit-box-shadow: 2px 2px 13px 0px rgba(50,49,49,1.00);
        box-shadow: 2px 2px 13px 0px rgba(50,49,49,1.00);
        padding-bottom: 0px;
        margin-bottom: 0px;
        position: relative;
        height: 275px;
    }

    .weathertitlehour {
        color: rgba(241,241,241,1.00);
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        text-align: center;
        padding-top: 6px;
    }
    figure {
        display: block;
        position: relative;
        overflow: hidden;
        margin-left: 1px;
        margin-right: 1px;
        margin-top: 0px;
    }
    figcaption {
        position: absolute;
        background: rgba(0,0,0,0.55);
        color: white;
        padding: 10px 20px;
        opacity: 0;
        bottom: 0;
        left: -30%;
        -webkit-transition: all 0.6s ease;
        -moz-transition: all 0.6s ease;
        -o-transition: all 0.6s ease;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        font-size: xx-small;
    }
    figure:hover figcaption {
      opacity: 1;
      left: 0;
    }
    .cap-left figcaption { bottom: 0; left: -30%; }
    .cap-left:hover figcaption { left: 0; }

    .cap-right figcaption { bottom: 0; right: -30%; }
    .cap-right:hover figcaption { right: 0; }

    .cap-top figcaption { left: 0; top: -30%; }
    .cap-top:hover figcaption { top: 0; }

    .cap-bot figcaption { left: 0; bottom: -30%;}
    .cap-bot:hover figcaption { bottom: 0; }
    figure:before { 
      content: "?"; 
      position: absolute; 
      background: rgba(255,255,255,0.75); 
      color: black;
      width: 24px;
      height: 24px;
      -webkit-border-radius: 12px;
      -moz-border-radius:    12px;
      border-radius:         12px;
      text-align: center;
      font-size: 14px;
      line-height: 24px;
      /* Only Fx 4 supporting transitions on psuedo elements so far... */
      -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      opacity: 0.75;    
    }
    figure:hover:before {
      opacity: 0;
    }
    .temperature {
        position: relative;
        text-align: right;
        color: rgba(235,235,235,1.00);
        padding-right: 5px;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
    }
    .humidity {
        position: relative;
        text-align: right;
        color: rgba(235,235,235,1.00);
        padding-right: 5px;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
    }
    .wind {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .weathertitledate {
        padding-top: 6px;
        text-align: center;
        color: rgba(241,241,241,1.00);
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    }
    .temperaturefeel {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .pressure {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .rain {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .precipitationtype {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .precipitationprobability {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .cloud {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .humidity {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .weatherframe .weatherpicright {
        position: relative;
        top: -18px;
    }
    .weatherframe .weatherpicbottom {
        position: relative;
        left: auto;
        right: auto;
        top: -20px;
    }


    .visibility {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        color: rgba(225,225,225,1.00);
        font-size: x-small;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
    }
    .temperaturemax {
        position: relative;
        text-align: right;
        color: rgba(235,235,235,1.00);
        padding-right: 5px;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
    }
    .temperaturemin {
        position: relative;
        text-align: right;
        color: rgba(235,235,235,1.00);
        padding-right: 5px;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
        text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
    }
    </style>'
    ;
    return 
    $style;
    }
    Zitat Zitat von firewire Beitrag anzeigen
    Und ist es möglich den "Hover Text" auch auf deutsch zu bekommen, bei mir ist dieser Englisch.
    Kann ich nicht nachvollziehen, da ja lang=de eingestellt ist, daher sollte das auf deutsch abgefragt werden bzw. wird bei mir auch in deutsch angezeigt.
    Geändert von Fonzo (26.03.19 um 00:53 Uhr)

  6. #56
    Registriert seit
    Mar 2018
    Ort
    85560
    Beiträge
    95

    @Fonzo
    ......
    Das ist kein Fehler sondern eine persönliche Einstellungssache ob man man das will oder nicht. Solche Dinge werden alle im CSS festgelegt, das ? ist in dem Fall nur exemplarisch da, weil man ja wissen muss wann bzw. wo ein hover Effekt auftritt. Wenn Dir persönlich bekannt ist wenn Du über ein Element gehst dass dann weitere Information eingeblendet wird kannst Du das ? auch einfach wegnehmen.

    Das gesamte Layout wie Farbe, Schriftart, Schriftgröße usw. wird im CSS definiert, damit kannst Du das individuell anpassen. Das ? wird im figure:before Element im CSS unter content definiert. Das kannst Du im CSS anpassen siehe auch Tutorial Bilder mit Bildunterschriften.
    ........
    Danke, soweit klar.




    @firewire
    Und ist es möglich den "Hover Text" auch auf deutsch zu bekommen, bei mir ist dieser Englisch.
    @fonzo
    Kann ich nicht nachvollziehen, da ja lang=de eingestellt ist, daher sollte das auf deutsch abgefragt werden bzw. wird bei mir auch in deutsch angezeigt.
    Also bei mir am PC ist der HoverText an allen Tagen auch in Englisch!
    Viele Grüße
    PeterL
    IP-Symcon 5.1 (Beta) Professional - LAN Gateway enOcean, LAN Gateway Z-Wave
    IPS-Studio 3.4

  7. #57
    Registriert seit
    Oct 2011
    Ort
    Hattersheim (Hessen)
    Beiträge
    6,622

    Zitat Zitat von lretep Beitrag anzeigen
    Also bei mir am PC ist der HoverText an allen Tagen auch in Englisch!
    Wenn Du eine Anfrage in deutsch anforderst bekommst Du eine Antwort in english?
    PHP-Code:
    $api_secret "XXXX";
    $latitude "51.9";
    $longitude "9.6";

    $url "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?lang=de&units=si";
    $ch curl_init();
    curl_setopt($chCURLOPT_RETURNTRANSFER1); 
    curl_setopt($chCURLOPT_URL$url); 
    $result curl_exec($ch);
    curl_close($ch);  
    $darksky_data json_decode($resulttrue);
    var_dump($darksky_data); 

  8. #58
    Registriert seit
    Dec 2006
    Ort
    Oberkrämer bei Berlin
    Beiträge
    1,456

    Mein HoverText ist auf Deutsch.
    Welcher Text von Fonzos VarDump ist gemeint? (Damit wir vom gleichen reden)
    MfG: Heiner_________________IPS5.2, NUC-i5 Lüfterlos, SSD, Win10Home, 24/7; IPS-Mobile Android V5.1.0; FHZ1300PC: FS20, HMS100, KS300, PS50, FHT; WDE1; Harmony1100 + Wandlung einzelner FHT80TF in FS20 Adressen mit FS20Manager; 3x ChromoflexII + 14x IIIRC; DMX4ALL, ArtNet (Dimmer6); IPS-868: EKM, RGBW, WDT, JKM/Termojet; 1Wire über blauem DS9490R; HomeMatic: CCU3, LAN_Adapter, Hm + HmIP, Winmatic; XBee Pro: Roomba;

  9. #59
    Registriert seit
    Oct 2011
    Ort
    Oberding
    Beiträge
    320

    PHP-Code:
    $url "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?lang=de&units=si"
    Hi Fonzo,

    so ist der Text jetzt auch bei mir auf deutsch.

    Davor sah die Zeile so aus und es kam auf englisch.
    PHP-Code:
    $url "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?exclude=minutely,hourlylang=de&units=si"

    Grüße
    Stephan

  10. #60
    Registriert seit
    Oct 2011
    Ort
    Hattersheim (Hessen)
    Beiträge
    6,622

    Zitat Zitat von firewire Beitrag anzeigen
    Davor sah die Zeile so aus und es kam auf englisch.
    PHP-Code:
    $url "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?exclude=minutely,hourlylang=de&units=si"
    Da fehlt ein & deshalb geht das nicht:
    PHP-Code:
    $url "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?exclude=minutely,hourly&lang=de&units=si"

Ähnliche Themen

  1. Antworten: 1
    Letzter Beitrag: 02.11.16, 18:58
  2. Sky+ Receiver per Lan
    Von hoschiman0 im Forum Audio & Video, TK-Anlagen, ISDN
    Antworten: 0
    Letzter Beitrag: 27.09.16, 19:27
  3. Schweizer Wetterdienst
    Von msiegw im Forum Allgemeine Diskussion
    Antworten: 1
    Letzter Beitrag: 04.04.16, 23:16
  4. TVTV Sky Programm
    Von MichB im Forum Anleitungen / Nützliche PHP Skripte
    Antworten: 1
    Letzter Beitrag: 08.02.16, 17:58
  5. Deutscher Wetterdienst
    Von alien80 im Forum WebFront
    Antworten: 1
    Letzter Beitrag: 08.11.10, 11:07