page pollens

Ici tout ce qui concerne les interfaces personnalisables pour Domoticz : Custom Pages, Reacticz, Domoboard...

Modérateur : vil1driver

Répondre
papoo
Messages : 1893
Enregistré le : 10 janv. 2016, 11:29
Localisation : Limoges (87)
Contact :

page pollens

Message par papoo » 02 juin 2019, 13:57

pour celles et ceux qui souhaiteraient intégrer un graphique pollens à monitor
voici un début de solution.
le script n'est pas forcement optimisé, il est livré "as is",
cela donne ça chez moi
pollens_monitor.png
pollens_monitor.png (455.88 Kio) Vu 376 fois
à vous de l'optimiser, l'adapter a votre propre utilisation (en partageant bien sur vos efforts avec nous)
certains navigateurs refuserons d'afficher le résultat d'une api tiers, il vous faudra modifier les paramètres de votre web server (nginx/apache...) pour autoriser l'Access-Control-Allow-Origin
une page pollens.html où vous devrez personnaliser le numéro de département

Code : Tout sélectionner

<!-- load page stylesheet -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$('head').append('<link rel="stylesheet" href="css/pollens.css">');
</script>
<script>

var departement = 87;
var JsonAddress = "https://www.pollens.fr/risks/thea/counties/"+departement;
var tailleMin   = 8;

function  dynClass(i, field, tailleMin){
    var pollen
    var CSS
    var CSS1

    if      ( i === 0 )  { pollen = "Tilleul"}
    else if ( i === 1 )  { pollen = "Ambroisies"}
    else if ( i === 2 )  { pollen = "Olivier"}
    else if ( i === 3 )  { pollen = "Plantain"}
    else if ( i === 4 )  { pollen = "Noisetier"}
    else if ( i === 5 )  { pollen = "Aulne"}
    else if ( i === 6 )  { pollen = "Armoise"}
    else if ( i === 7 )  { pollen = "Châtaignier"}
    else if ( i === 8 )  { pollen = "Urticacées"}
    else if ( i === 9 )  { pollen = "Oseille"}
    else if ( i === 10 ) { pollen = "Graminées"}
    else if ( i === 11 ) { pollen = "Chêne"}
    else if ( i === 12 ) { pollen = "Platane"}
    else if ( i === 13 ) { pollen = "Bouleau"}
    else if ( i === 14 ) { pollen = "Charme"}
    else if ( i === 15 ) { pollen = "Peuplier"}
    else if ( i === 16 ) { pollen = "Frêne"}
    else if ( i === 17 ) { pollen = "Saule"}
    else if ( i === 18 ) { pollen = "Cyprès "}
    if ( typeof field == 'number') {
        var taille = field * 20;
        if (taille === 0) {taille = tailleMin}
    }
    
    CSS = $("div."+pollen).css("width",taille +"%");
    CSS1 = $("div."+pollen).toggleClass("alerte"+field);

return CSS, CSS1
}

$.getJSON(JsonAddress, function (json) {
    $.each(json.risks, function(i, pollens){
        $.each(pollens, function(j, field){
            if ( typeof field == 'number') {
                dynClass(i, field, tailleMin)
            }
        });//$.each(pollens,
    });//$.each(json.risks
    });//$.getJSON(JsonAddress



</script>
<!-- Page -->
<div class="cnt v-wrap">
<div class="v-box">
<!-- contenu -->

<!--
le contenu de votre page ne doit pas dépasser les dimensions suivantes
largeur: 962px
hauteur: 500px
-->
<!-- <p>Tilleul</p> -->
<div class="container">
  <div class="skills Tilleul">Tilleul</div>
</div>

<!-- <p>Ambroisies</p> -->
<div class="container">
  <div class="skills Ambroisies">Ambroisies</div>
</div>

<!-- <p>Olivier</p> -->
<div class="container">
  <div class="skills Olivier">Olivier</div>
</div>

<!-- <p>Plantain</p> -->
<div class="container">
  <div class="skills Plantain">Plantain</div>
</div>

<!-- <p>Noisetier</p> -->
<div class="container">
  <div class="skills Noisetier">Noisetier</div>
</div>

<!-- <p>Aulne</p> -->
<div class="container">
  <div class="skills Aulne">Aulne</div>
</div>

<!-- <p>Armoise</p> -->
<div class="container">
  <div class="skills Armoise">Armoise</div>
</div>

<!-- <p>Châtaignier</p> -->
<div class="container">
  <div class="skills Châtaignier">Châtaignier</div>
</div>

<!-- <p>Urticacées</p> -->
<div class="container">
  <div class="skills Urticacées">Urticacées</div>
</div>

<!-- <p>Oseille</p> -->
<div class="container">
  <div class="skills Oseille">Oseille</div>
</div>

<!-- <p>Graminées</p> -->
<div class="container">
  <div class="skills Graminées">Graminées</div>
</div>

<!-- <p>Chêne</p> -->
<div class="container">
  <div class="skills Chêne">Chêne</div>
</div>

<!-- <p>Platane</p> -->
<div class="container">
  <div class="skills Platane">Platane</div>
</div>

<!-- <p>Bouleau</p> -->
<div class="container">
  <div class="skills Bouleau">Bouleau</div>
</div>

<!-- <p>Charme</p> -->
<div class="container">
  <div class="skills Charme">Charme</div>
</div>

<!-- <p>Peuplier</p> -->
<div class="container">
  <div class="skills Peuplier">Peuplier</div>
</div>

<!-- <p>Frêne</p> -->
<div class="container">
  <div class="skills Frêne">Frêne</div>
</div>

<!-- <p>Saule</p> -->
<div class="container">
  <div class="skills Saule">Saule</div>
</div>

<!-- <p>Cyprès</p> -->
<div class="container">
  <div class="skills Cyprès">Cyprès</div>
</div>
<!-- fin contenu -->
</div>
</div>
<!-- fin page -->
une page pollens.css

Code : Tout sélectionner

/* * {box-sizing: border-box}
*/
.container {
  width: 100%;
  background-color: #181A1B;
} 

.skills {
  text-align: left;
  padding: 5px;
  color: white;
}

.Tilleul {width: 100%, background-color: #181A1B;}
.Ambroisies {width: 100%, background-color: #181A1B;}
.Olivier {width: 100%, background-color: #181A1B;}
.Plantain {width: 100%, background-color: #181A1B;}
.Noisetier {width: 100%, background-color: #181A1B;}
.Aulne {width: 100%, background-color: #181A1B;}
.Armoise {width: 100%, background-color: #181A1B;}
.Châtaignier {width: 100%, background-color: #181A1B;}
.Urticacées {width: 100%, background-color: #181A1B;}
.Oseille {width: 100%, background-color: #181A1B;}
.Graminées {width: 100%, background-color: #181A1B;}
.Chêne {width: 100%, background-color: #181A1B;}
.Platane {width: 100%, background-color: #181A1B;}
.Bouleau {width: 100%, background-color: #181A1B;}
.Charme {width: 100%, background-color: #181A1B;}
.Peuplier {width: 100%, background-color: #181A1B;}
.Frêne {width: 100%, background-color: #181A1B;}
.Saule {width: 100%, background-color: #181A1B;}
.Cyprès {width: 100%, background-color: #181A1B;} 

.alerte5 {background-color:#CC0200;}
.alerte4 {background-color:#98440D;}
.alerte3 {background-color:#9A9800;}
.alerte2 {background-color:#377D22;}
.alerte1 {background-color:#289905;}
.alerte0 {background-color:#181A1B;}
si vous souhaitez tester le code directement : https://www.w3schools.com/code/tryit.as ... M3SKJACLCU
domoticz beta/RaspBerry PI3 stretch
https://pon.fr github

Disable adblock

This site is supported by ads and donations.
If you see this text you are blocking our ads.
Please consider a Donation to support the site.


Répondre