Sartog - De retour (un peu) et un nouveau design en cours

Présentation et Vitrine d'installations
13

Concernant la météo :

Jeedom - meteo
Jeedom - meteo328×635 17.3 KB

Ce dernier est un widget appliqué sur un virtuel et se décompose de 3 parties :

  • La partie supérieur, indiquant :
    • la météo actuelle (source : plugin météo officiel)
    • la température réelle mesurée (source : plugin Netatmo - module extérieur)
  • La partie centrale, indiquant :
    • L’heure du lever et coucher de soleil (source : plugin météo officiel)
    • Température mini et maxi du jour (source : plugin météo officiel)
    • Direction du vent, vitesse et rafale (source : plugin Netatmo - anénomètre)
    • Pluviométrie du jour et pluviométrie prévisionnelle (source : plugin Netatmo - pluviomètre et plugin météo officiel)
  • La partie basse, indiquant :
    • La météo pour les 3 jours à venir
    • Température mini et maxi pour les 3 jours à venir.

Voici les éléments qui constituent cela :

  • Virtuel :
    Concernant le virtuel, rien de compliqué.
    Une commande de type info et sous-type « autre » suffit.
    Dans valeur, l’ensemble des informations dont j’ai besoin :

    Jeedom - virtuel
    Jeedom - virtuel1653×472 55.9 KB

  • Le Widget :
    Il faut créer un widget Code de type Info / Autre
    Jeedom - Creation

et y mettre le code suivant :

<div class="cmd-widget" data-type="info" data-subtype="string" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">

  <link rel="stylesheet" href="/data/plan/icons/weather-underground/wu-icons-style.css">
  <link rel="stylesheet" href="/data/plan/icons/weather-icons/weather-icons.css">
  <link rel="stylesheet" href="/data/plan/icons/weather-icons/weather-icons-wind.css">
  <link rel="stylesheet" href="/data/plan/css/weather.css">

  <div class="mia-meteo-cadre">

    <!-- 1er cadre : météo actuelle -->
    <div class="" id="mia-meteo-cadre-now">
      <span class="" id="mia-meteo-now-icone"></span>
      <span class="" id="mia-meteo-now-temperature"></span>
      <span class="" id="mia-meteo-now-temps"></span>
    </div>

    <!-- 2nd cadre : détail météo actuelle -->
    <div class="mia-meteo-cadre-detail">
      <div class="mia-meteo-detail-grid">
        <span class="mia-meteo-detail-texte" id="mia-meteo-lever-soleil"></span>
        <span class="mia-meteo-detail-texte" id="mia-meteo-coucher-soleil"></span>
        <span class="mia-meteo-detail-texte" id="mia-meteo-now-temperature-mini"><i class="wi wi-thermometer-exterior"></i></span>
        <span class="mia-meteo-detail-texte" id="mia-meteo-now-temperature-maxi"><i class="wi wi-thermometer"></i></span>
        <span class="mia-meteo-detail-texte" id="mia-meteo-now-vent-icone"></span>
        <span class="mia-meteo-detail-texte" id="mia-meteo-now-vent"></span>
        <span class="mia-meteo-detail-texte"><i class="mia-meteo-detail-icone-pluie wi wi-raindrops"></i></span>
        <span class="mia-meteo-detail-texte" id="mia-meteo-now-pluie"></span>
      </div>
    </div>

    <!-- 3ème cadre : météo à venir -->
    <div class="mia-meteo-cadre-prevision-grid">
      <div>
        <span class="mia-meteo-prevision-jour" id="mia-meteo-jour1-nom"></span>
        <span class="" id="mia-meteo-jour1-icone"></span>
        <span class="mia-meteo-prevision-temperature" id="mia-meteo-jour1-temperature"></span>
      </div>
      <div>
        <span class="mia-meteo-prevision-jour" id="mia-meteo-jour2-nom"></span>
        <span class="" id="mia-meteo-jour2-icone"></span>
        <span class="mia-meteo-prevision-temperature" id="mia-meteo-jour2-temperature"></span>
      </div>
      <div>
        <span class="mia-meteo-prevision-jour" id="mia-meteo-jour3-nom"></span>
        <span class="" id="mia-meteo-jour3-icone"></span>
        <span class="mia-meteo-prevision-temperature" id="mia-meteo-jour3-temperature"></span>
      </div>
    </div>

  </div>

  <script src="/data/plan/js/weather.js"></script>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
      
      mia_meteo(_options.display_value);
      
    }

    jeedom.cmd.update['#id#']({display_value:'#state#'});
  </script>

</div>

  • Les fichiers sources :
    A l’image de l’horloge (voir message avant celui-ci), mes fichier sources sont stockés dans data/plan.
    Pour ce widget, il y a plusieurs fichiers :

  • weather.css : contient le css du widget

  • weather.js : contient le code javascript permettant l’affichage de toutes les informations

  • wu-icons-style.css : pour les icônes des prévision

  • weather-icons.css : pour les icônes de la météo actuelle

  • weather-icons-wind.css : pour les icônes du vent

  • weather.png : c’est l’image représentant les arbres et montagne habillant la partie haute du widget.

Le fichier css (weather.css) contient ceci :

/* cadre principal */

.mia-meteo-cadre {
    width: 300px;
    height: 610px;
    background: transparent;
    border-radius: 32px;
    box-shadow: 5px 5px 10px 5px rgba(136, 165, 191, 0.5), -5px -5px 10px 5px rgba(255, 255, 255, 0.8);
}


/***** cadre 1 *****/

.mia-meteo-cadre-now {
    width: 300px;
    height: 250px;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 150px 150px;
    grid-template-rows: 130px 40px;
    border-radius: 25px 25px 0 0;
    background: url(../img/weather.png) no-repeat bottom/100%;
}

.mia-meteo-now-soleil {
    background-color: #87CEFA;
}

.mia-meteo-now-nuageux {
    background-color: #B0C4DE;
    filter: saturate(70%);
}

.mia-meteo-now-pluie {
    background-color: #719dc0;
    filter: grayscale(40%);
}

.mia-meteo-now-orage {
    background-color: #4682B4;
    filter: grayscale(50%);
}

.mia-meteo-now-neige {
    background-color: #FFFAFA;
}

.mia-meteo-now-nuit {
    background-color: #191970;
    filter: grayscale(50%);
}

.mia-meteo-now-icone {
    grid-column: 1;
    grid-row: 1;
    margin-left: 10px;
}

.mia-meteo-now-temperature,
.mia-meteo-now-temps {
    padding-right: 20px;
    text-align: right;
    font-family: inherit;
    font-weight: lighter;
}

.mia-meteo-now-temperature {
    grid-column: 2;
    grid-row: 1;
    padding-top: 35px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 70px;
}

.mia-meteo-now-temps {
    grid-column: 1/3;
    grid-row: 2;
    margin-right: 5px;
    font-family: Cambria, serif;
    font-size: 30px;
    white-space: nowrap;
}

.mia-meteo-now-color-white {
    color: white;
}

.mia-meteo-now-color-blue {
    color: rgb(44, 103, 180);
}


/***** cadre 2 *****/

.mia-meteo-cadre-detail {
    width: 290px;
    height: 150px;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 0px;
    background: transparent;
    border-radius: 25px 0 0 25px;
    box-shadow: inset 5px 5px 10px 0px rgba(136, 165, 191, 0.5), inset -5px -5px 10px 0px rgba(255, 255, 255, 0.8);
}

.mia-meteo-detail-grid {
    width: 290px;
    height: 140px;
    padding-top: 15px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 0px;
    grid-column-gap: 0px;
}

.mia-meteo-detail-grid span:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    text-indent: 30px;
}

.mia-meteo-detail-grid span:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    text-indent: 10px;
}

.mia-meteo-detail-grid span:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    text-indent: 34px;
}

.mia-meteo-detail-grid span:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    text-indent: 14px;
}

.mia-meteo-detail-grid span:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
}

.mia-meteo-detail-grid span:nth-child(6) {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
    text-indent: 75px;
}

.mia-meteo-detail-grid span:nth-child(7) {
    grid-column: 2;
    grid-row: 3;
    text-align: left;
}

.mia-meteo-detail-grid span:nth-child(8) {
    grid-column: 2;
    grid-row: 3;
    text-align: left;
    text-indent: 40px;
}

.mia-meteo-detail-texte {
    display: inline-block;
    color: #A7ACB1;
    font-weight: lighter;
    font-family: Cambria, serif;
    font-size: 20px;
    line-height: 1.5;
}

.mia-meteo-detail-icone-vent {
    font-size: 40px;
    position: relative;
    top: -5px;
    left: 45px;
}

.mia-meteo-detail-icone-pluie {
    font-size: 40px;
    position: relative;
    top: -5px;
    left: 25px;
}

/***** Cadre 3 *****/

.mia-meteo-cadre-prevision-grid {
    width: 290px;
    height: 170px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 0px;
}

.mia-meteo-cadre-prevision-grid div {
    width: 80px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    border-radius: 25px;
    box-shadow: 5px 5px 10px 0px rgba(136, 165, 191, 0.5), -5px -5px 10px 0px rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 2;
}

.mia-meteo-prevision-jour {
    display: block;
    margin-top: 10px !important;
    color: #A7ACB1;
    font-family: Cambria, serif;
    font-weight: lighter;
    font-size: 12px;
}

.mia-meteo-prevision-temperature {
    display: block;
    color: #A7ACB1;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: lighter;
    font-size: 14px;
}

Le fichier js (weather.js) contient ceci :

function mia_meteo(_valeur){
    // Initialisation des variables.
    var valeur = _valeur.split(',');
    const cond_pluie = ["312", "500", "501", "531", "615", "616"];
    const cond_averse = ["313", "314", "502", "503", "504", "520", "521", "522", "620"];
    const cond_crachin = ["300", "301", "302", "310", "311", "321"];
    const cond_neige = ["600", "601", "602", "621", "622"];
    const cond_neige_fondue = ["611", "612", "613"];
    const cond_pluie_vergla = "511";
    const cond_orage = ["200", "201", "202", "210", "211", "212", "221", "230", "231", "232"];
    const cond_brouillard = ["701", "721", "741"];
    const cond_partiel_soleil = "803";
    const cond_plutot_soleil = ["801", "802"];
    const cond_soleil = 800;
    const cond_nuageux = 804;
    const jour = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'];
    const cadre_now = document.getElementById('mia-meteo-cadre-now');
    const now_icone = document.getElementById('mia-meteo-now-icone');
    const now_temperature = document.getElementById('mia-meteo-now-temperature');
    const now_temps = document.getElementById('mia-meteo-now-temps');
    const lever_soleil = document.getElementById('mia-meteo-lever-soleil');
    const coucher_soleil = document.getElementById('mia-meteo-coucher-soleil');
    const now_temperature_mini = document.getElementById('mia-meteo-now-temperature-mini');
    const now_temperature_maxi = document.getElementById('mia-meteo-now-temperature-maxi');
    const now_vent_icone = document.getElementById('mia-meteo-now-vent-icone');
    const now_vent = document.getElementById('mia-meteo-now-vent');
    const now_pluie = document.getElementById('mia-meteo-now-pluie');
    const jour1_nom = document.getElementById('mia-meteo-jour1-nom');
    const jour1_icone = document.getElementById('mia-meteo-jour1-icone');
    const jour1_temperature = document.getElementById('mia-meteo-jour1-temperature');
    const jour2_nom = document.getElementById('mia-meteo-jour2-nom');
    const jour2_icone = document.getElementById('mia-meteo-jour2-icone');
    const jour2_temperature = document.getElementById('mia-meteo-jour2-temperature');
    const jour3_nom = document.getElementById('mia-meteo-jour3-nom');
    const jour3_icone = document.getElementById('mia-meteo-jour3-icone');
    const jour3_temperature = document.getElementById('mia-meteo-jour3-temperature');
    var nuit = new Boolean(false);
    var now = new Date();
  	var jour_numero = now.getDay();
    var heure = now.getHours().toString() + now.getMinutes().toString().padStart(2, '0');


    // Détermination si c'est le jour ou la nuit.
    if (Number(heure) > Number(valeur[3]) && Number(heure) < Number(valeur[4])) {
        nuit = false;
    } else {
        nuit = true;
    }


    // ******************** //
    // Cadre météo now      //
    // ******************** //

    // Icone et background.
    if (cond_pluie.includes(valeur[0]) === true) {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-rain';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuageux';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-day wu-rain';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-white';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-white';

    } else if (cond_averse.includes(valeur[0]) === true) {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-chancerain';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-pluie';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-day wu-chancerain';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-white';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-white';

    } else if (cond_crachin.includes(valeur[0]) === true) {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-flurries';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuageux';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-day wu-flurries';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-white';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-white';

    } else if (cond_neige_fondue.includes(valeur[0]) === true) {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-chancesleet';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuageux';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-day wu-chancesleet';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-white';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-white';

    } else if (cond_pluie_vergla.includes(valeur[0]) === true) {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-sleet';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuageux';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-day wu-sleet';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-white';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-white';

    } else if (cond_neige.includes(valeur[0]) === true) {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-snow';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-neige';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-black wu-day wu-snow';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-blue';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-blue';

    } else if (cond_orage.includes(valeur[0]) === true) {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-chancetstorms';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-orage';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-day wu-chancetstorms';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-white';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-white';

    } else if (cond_partiel_soleil.includes(valeur[0]) === true) {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-partlysunny';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuageux';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-day wu-partlysunny';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-white';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-white';

    } else if (cond_plutot_soleil.includes(valeur[0]) === true) {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-mostlysunny';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-soleil';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-day wu-mostlysunny';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-white';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-white';

    } else if (cond_brouillard.includes(valeur[0]) === true) {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-fog';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuageux';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-day wu-fog';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-white';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-white';

    } else if (valeur[0] == cond_soleil) {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-sunny';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-soleil';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-day wu-sunny';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-white';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-white';

    } else if (valeur[0] == cond_nuageux) {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-cloudy';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuageux';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-day wu-cloudy';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-white';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-white';

    } else {

        if (nuit === true) {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuit';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-night wu-unknown';
        } else {
            cadre_now.className = 'mia-meteo-cadre-now mia-meteo-now-nuageux';
            now_icone.className = 'mia-meteo-now-icone wu wu-128 wu-white wu-day wu-unknown';
        }

        now_temperature.className = 'mia-meteo-now-temperature mia-meteo-now-color-white';
        now_temps.className = 'mia-meteo-now-temps mia-meteo-now-color-white';
    }


    // ******************** //
    // Cadre météo détail   //
    // ******************** //

    // Température et libellé condition.
    now_temperature.innerHTML = Math.round(valeur[2]) + '°';
    now_temps.innerHTML = valeur[1];

    // Lever et coucher du soleil.
    lever_soleil.innerHTML = '<i class="wi wi-sunrise"></i>&nbsp;' + (valeur[3].length == 3 ? valeur[3].substring(0, 1) + ':' + valeur[3].substring(1) : valeur[3].substring(0, 2) + ':' + valeur[3].substring(2));
    coucher_soleil.innerHTML = '<i class="wi wi-sunset"></i>&nbsp;' + (valeur[4].length == 3 ? valeur[4].substring(0, 1) + ':' + valeur[4].substring(1) : valeur[4].substring(0, 2) + ':' + valeur[4].substring(2));

    // Température mini et maxi.
    now_temperature_mini.innerHTML = '<i class="wi wi-thermometer-exterior"></i>&nbsp;' + valeur[5] + '°';
    now_temperature_maxi.innerHTML = '<i class="wi wi-thermometer"></i>&nbsp;' + valeur[6] + '°';

    // Vent et rafale.
    now_vent_icone.innerHTML = '<i class="mia-meteo-detail-icone-vent wi wi wi-wind from-' + valeur[7] + '-deg"></i>';
    now_vent.innerHTML = '&nbsp; <sup>' + valeur[8] + '</sup> / <sub>' + valeur[9];

    // Pluie actuelle et comulée journée.
    now_pluie.innerHTML = '&nbsp; <sup>' + valeur[10] + '</sup> / <sub>' + valeur[11];


    // ******************** //
    // Cadre prévision      //
    // ******************** //

    // Prévisions + 1.
    ((jour_numero + 1) > 7) ? jour1_nom.innerHTML = jour[jour_numero + 1 - 7] : jour1_nom.innerHTML = jour[jour_numero + 1];
    jour1_icone.className = Prevision_Icone(valeur[12]);
    jour1_temperature.innerHTML = Math.round(valeur[13]) + '° &ensp; ' + Math.round(valeur[14]) + '°';

    // Prévision + 2.
    ((jour_numero + 2) > 7) ? jour2_nom.innerHTML = jour[jour_numero + 2 - 7] : jour2_nom.innerHTML = jour[jour_numero + 2];
    jour2_icone.className = Prevision_Icone(valeur[15]);
    jour2_temperature.innerHTML = Math.round(valeur[16]) + '° &ensp; ' + Math.round(valeur[17]) + '°';

    // Prévision +3.
    ((jour_numero + 3) > 7) ? jour3_nom.innerHTML = jour[jour_numero + 3 - 7] : jour3_nom.innerHTML = jour[jour_numero + 3];
    jour3_icone.className = Prevision_Icone(valeur[18]);
    jour3_temperature.innerHTML = Math.round(valeur[19]) + '° &ensp; ' + Math.round(valeur[20]) + '°';

    // Fonction permettant de retourner l'icône en fonction du n° de condition pour les prévisions.
    function Prevision_Icone(meteo_condition) {

        if (cond_pluie.includes(meteo_condition) === true) {

            return 'wu wu-64 wu-white wu-day wu-rain';

        } else if (cond_averse.includes(meteo_condition) === true) {

            return 'wu wu-64 wu-white wu-day wu-chancerain';

        } else if (cond_crachin.includes(meteo_condition) === true) {

            return 'wu wu-64 wu-white wu-day wu-flurries';

        } else if (cond_neige_fondue.includes(meteo_condition) === true) {

            return 'wu wu-64 wu-white wu-day wu-chancesleet';

        } else if (cond_pluie_vergla.includes(meteo_condition) === true) {

            return 'wu wu-64 wu-white wu-day wu-sleet';

        } else if (cond_neige.includes(meteo_condition) === true) {

            return 'wu wu-64 wu-black wu-day wu-snow';

        } else if (cond_orage.includes(meteo_condition) === true) {

            return 'wu wu-64 wu-white wu-day wu-chancetstorms';

        } else if (cond_partiel_soleil.includes(meteo_condition) === true) {

            return 'wu wu-64 wu-white wu-day wu-partlysunny';

        } else if (cond_plutot_soleil.includes(meteo_condition) === true) {

            return 'wu wu-64 wu-white wu-day wu-mostlysunny';

        } else if (cond_brouillard.includes(meteo_condition) === true) {

            return 'wu wu-64 wu-white wu-day wu-fog';

        } else if (meteo_condition == cond_soleil) {

            return 'wu wu-64 wu-white wu-day wu-sunny';

        } else if (meteo_condition == cond_nuageux) {

            return 'wu wu-64 wu-white wu-day wu-cloudy';

        } else {

            return 'wu wu-64 wu-white wu-day wu-unknown';

        }
    }
}

Ce fichier n’est pas très commenté, si vous avez des questions n’hésitez pas.
A chaque update de l’affichage par Jeedom, ce script fait ceci :

  • Récupération des informations du virtuel dans un array
  • Détermine si nous sommes le jour ou la nuit (afin d’appliquer le bon background de la partie haute du widget)
  • En fonction des valeurs récupérés, affichage des icônes et background adéquat
  • Affichage des informations.

Les fichiers d’icones proviennent de :

Une fois tout cela créé / ajouté, il suffit de faire sur le design « Ajouter commande » et de sélectionner la commande du virtuel créé.

J’espère que ça été clair.
Si des questions, n’hesitez pas :slight_smile:

4 « J'aime »