# 🖌 Relooking des Dashboards de l'IPX800 V5

**URL:** <https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736>\
**Category:** Tutoriels\
**Tags:** ipx800-v5\
**Created:** [Janvier 16, 2022, 7:40 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736 "2022-01-16T19:40:05Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Janvier 16, 2022, 7:40 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736/1 "2022-01-16T19:40:05Z")

</div>

Bonjour à tous,

pour le fun, je vous invite à créer ce petit widget HTML sur un dashboard classique.  
Le thème rend transparents les widgets et les barres de navigation.  
Le script a pour but d’ajouter un contour aux widgets puis ajoute une image de fond au Dashboard, à la manière des LiveView.

```auto
<style>
.widget .widget-color{
border: 1px solid #44A;
}
html,body {  
   background: url("https://lh3.googleusercontent.com/-XEUwiDdU10g/UXgepNsUyWI/AAAAAAAAAGE/WsH8Pm2SFXs/s1600/water-red-wallpaperzeit.blogspot.com0150.png") repeat 0 0 fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover; /* Mozilla*/
    -o-background-size: cover; /* Opera*/
    background-size: cover; /* Generic*/
}
</style>

```

puis à importer et appliquer ce thème sur votre IPX 🙂  
[Transparent.zip](https://forum.gce-electronics.com/uploads/short-url/7YlSMm71XmxdNPINtCOpgrDdu2E.zip) (634 Octets)

Have fun 🙂

voir le résultat sur un dashboard :

> **ouvrez ici**
>
> ![image](https://forum.gce-electronics.com/uploads/default/original/3X/c/b/cb0f32932733c6028b0f0df85b5f152a7f0b4040.jpeg)

bonne journée

---

<div class="post-metadata">

**Author:** ![seraphinou](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/seraphinou/32/6569_2.png) [@seraphinou](https://forum.gce-electronics.com/u/seraphinou)\
**Post date:** [Janvier 16, 2022, 8:02 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736/2 "2022-01-16T20:02:26Z")

</div>

hello @fgtoul  
c 'est mis en place c 'est classe , on peut changer les couleurs ?

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Janvier 16, 2022, 8:05 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736/3 "2022-01-16T20:05:55Z")

</div>

tu peux changer tout ce que tu veux, le thème et l’image de fond comme tu veux.  
C’était juste un exemple pour montrer comment mettre une image en fond de dashboard classique.  
Vu que j’ai rendu les widgets transparents, j’ai ajouté un attribut border afin de mieux les délimiter (en toute discrétion).  
Le thème (fichier joint) rend les widgets transparents.

Pour plus de réactivité, pense à rendre l’image de fond disponible sur le réseau local.

---

<div class="post-metadata">

**Author:** ![Bernard61](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/bernard61/32/11639_2.png) [@Bernard61](https://forum.gce-electronics.com/u/Bernard61)\
**Post date:** [Janvier 16, 2022, 8:07 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736/4 "2022-01-16T20:07:58Z")

</div>

Bonsoir,

C’est fait, Merci

 ![Merci FGTOUL](https://forum.gce-electronics.com/uploads/default/original/3X/c/5/c50e6334fc8684021aac18ae13782a9ec268b12c.jpeg)

---

<div class="post-metadata">

**Author:** ![jbbeauf](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/j/ad7895/32.png) [@jbbeauf](https://forum.gce-electronics.com/u/jbbeauf)\
**Post date:** [Janvier 16, 2022, 11:07 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736/5 "2022-01-16T23:07:25Z")

</div>

Il est sympa le thème transparent ! Merci

> [@fgtoul](#):
>
> `html,body { `

ça ne fonctionnerait pas si le widget était mis dans un iframe par défaut (ref. [Widget HTML ipxv5 - #4 par jbbeauf](https://forum.gce-electronics.com/t/widget-html-ipxv5/14267/4))

---

<div class="post-metadata">

**Author:** ![cce66](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/c/8797f3/32.png) [@cce66](https://forum.gce-electronics.com/u/cce66)\
**Post date:** [Janvier 17, 2022, 12:40 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736/6 "2022-01-17T00:40:18Z")

</div>

Moi ce que je vois c’est qu’il y en a qui bossent pendant que d’autres jouent avec leurs poissons rouges !!! 🤣

---

<div class="post-metadata">

**Author:** ![harry83](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/h/c4cdca/32.png) [@harry83](https://forum.gce-electronics.com/u/harry83)\
**Post date:** [Janvier 17, 2022, 5:53 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736/7 "2022-01-17T17:53:45Z")

</div>

Bonjour @fgtoul  
Je vois que tu effectues des transformations [Ipx800v4](https://gce-electronics.com/1483-.html) vers [ipx800v5](https://gce-electronics.com/1799-.html). Est-ce que tu prévois de compléter tes anciens tutos pour migrer vers [ipx800v5](https://gce-electronics.com/1799-.html) ?  
Cdlt

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Janvier 17, 2022, 5:57 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736/8 "2022-01-17T17:57:49Z")

</div>

bonjour Harry83,  
c’est dans la todo list, mais très chronophage.  
Cependant, Il n’y a que les widgets html à convertir, tout le reste est valable.  
Les scènes de la [V4](https://gce-electronics.com/1483-.html) sont assez simples à convertir en règle [V5](https://gce-electronics.com/1799-.html), les branchements sont identiques.  
bne soirée

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Janvier 17, 2022, 6:00 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736/9 "2022-01-17T18:00:39Z")

</div>

Bonjour,  
ça fonctionne sur tous les widgets natifs et html, à condition effectivement de ne pas les mettre systématiquement dans un iFrame. Sinon, il suffit d’ajouter un peu de style css sur la balise iframe ou de créer une classe 🙂  
il faudrait essayer avec les attributs _allowtransparency_ et _background-color:transparent_  
bonne soirée

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Janvier 18, 2022, 5:07 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736/10 "2022-01-18T17:07:40Z")

</div>

Comme je ne suis pas du genre à rester sur une question en suspens, voici le css pour les iFrame 🙂

```auto
<iframe width=100% height=100% allowtransparency="true" frameBorder="0" srcdoc='
<body style="background-color:transparent"><script type="text/javascript"></script>
<p style="color:#fff">12345</p>
</body>'></iframe>

```

Testé sur Mozilla, Edge et Chrome

 ![image](https://forum.gce-electronics.com/uploads/default/original/3X/a/2/a27a4427191cd6b5aa1799c2d3b5bae74f99cf16.png)

Si je reprends un widget complet fourni ici :

> [@Widget HTML ipxv5](https://forum.gce-electronics.com/t/widget-html-ipxv5/14267/4):
>
> J’en profite pour vous partager l’exemple de François que j’ai modifié pour: corriger l’icône quand le garage est fermé corriger le changement d’icône ouvert/fermé qui ne fonctionnait pas pour moi (Firefox) Inclure le tout dans un iframe ce qui permet de dupliquer le Widget sans avoir à changer le nom des fonctions et des ID des éléments HTML. Ça permet de transposer à une autre porte très facilement. → Proposition d’amélioration pour les Widgets HTML @GCE: inclure le code HTML dans un ifram…

ça donne :

```auto
<iframe width=100% height=100% allowtransparency="true" frameBorder="0" srcdoc='
    <link rel="stylesheet" href="assets/lib/gce-glyph/gce-glyph.min.css">
    <body style="background-color:transparent">
    <script type="text/javascript">
      /* Get state and set widget */
      function init() {
        let lockColor,
            lockIcon,
            stateMsg;
        
        getState((ipx) => {
          let garageState = ipx.ioRelayState[0]; // Isolated relay state
          
          if (garageState == "off") {
            lockColor = "#FF0000"; // red
            lockIcon = "icon-lock-open_security";
            stateMsg = "Porte ouverte";
          } else if (garageState == "on") {
            lockColor = "#32CD32"; // green
            lockIcon = "icon-lock_security";
            stateMsg = "Porte fermée";
          }
          
          setIcon(lockIcon, lockColor);
          setMessage(stateMsg, lockColor);
          setState(garageState, lockColor);
        });
      }
      /***/
      
      /* Get data from API */
      function getState(cb) {
        fetch("/api/system/ipx?ApiKey=API_KEY", {method: "GET"}).then((ret) => { // Get IPX object
          ret.json().then((ipx) => {
            cb(ipx); // Return IPX state from API
          });
        });
      }
      /***/
      
      /* Set icon and color */
      function setIcon(icon, color) {
        let myIcon = document.getElementById("myIcon");
        myIcon.style.color = color;
        myIcon.className = "";
        myIcon.classList.add("gce-glyph");
        myIcon.classList.add(icon);
      }
      /***/
      
      /* Set state message */
      function setMessage(text, color) {
        let msg = document.getElementById("myStateMsg");
        msg.style.color = color;
        msg.innerHTML = text;
      }
      /***/
      
      /* Set garage state */
      function setState(text, color) {
        let garage = document.getElementById("myGarageState");
        garage.style.color = color;
        garage.innerHTML = text;
      }
      /***/
      
      /* Auto refresh (optional) */
      function autoRefresh() {
        setInterval(() => {
          init();
        }, 1000); // 1 sec
      }
      /***/
      
      init();
      autoRefresh(); // Optional
    </script>
    
    <table width="100%" style="padding: 10px">
      <tr style="display: flex; align-item: center; justify-content: space-between">
        <!--Icon -->
        <td>
          <i id="myIcon" class="gce-glyph"></i>
        </td>
        <!---->
        
        <!-- State message -->
        <td>
          <span id="myStateMsg" style="font-size: 15px"></span>
        </td>
        <!---->
        
        <!-- Garage state -->
        <td>
          <span id="myGarageState" style="font-size: 15px;"></span>
        </td>
        <!---->
      </tr>
    </table>
</body>
'></iframe>

```

 ![image](https://forum.gce-electronics.com/uploads/default/original/3X/8/7/8753e35912c4bab51317d2c9f06152c1e33d1827.png)

---

<div class="post-metadata">

**Author:** ![didierm](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/didierm/32/4_2.png) [@didierm](https://forum.gce-electronics.com/u/didierm)\
**Post date:** [Janvier 29, 2022, 8:57 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736/11 "2022-01-29T20:57:20Z")

</div>

Bonjour à tous,  
@fgtoul j’ai joué avec le thème transparent  
les dashboards classique deviennent aussi bien que les livewiews  
merci pour le partage toujours de qualité 😉

 ![pied forum cheminée](https://forum.gce-electronics.com/uploads/default/original/3X/c/f/cfcc84f78d22d5cf6a019373cf6f03b5b434ad75.jpeg)  
👍

---

<div class="post-metadata">

**Author:** ![cce66](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/c/8797f3/32.png) [@cce66](https://forum.gce-electronics.com/u/cce66)\
**Post date:** [Janvier 18, 2023, 5:50 UTC](https://forum.gce-electronics.com/t/relooking-des-dashboards-de-lipx800-v5/14736/12 "2023-01-18T17:50:09Z")

</div>

@fgtoul Je ne sais pas pourquoi mais cela ne sembles plus marcher ! 😪