🖌 Relooking des Dashboards de l'IPX800 V5

fgtoul · Janvier 16, 2022, 7:40

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.

<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 (634 Octets)

Have fun

voir le résultat sur un dashboard :

ouvrez ici

bonne journée

seraphinou · Janvier 16, 2022, 8:02

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

fgtoul · Janvier 16, 2022, 8:05

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.

Bernard61 · Janvier 16, 2022, 8:07

Bonsoir,

C’est fait, Merci

jbbeauf · Janvier 16, 2022, 11:07

Il est sympa le thème transparent ! Merci

ça ne fonctionnerait pas si le widget était mis dans un iframe par défaut (ref. Widget HTML ipxv5 - #4 par jbbeauf)

cce66 · Janvier 17, 2022, 12:40

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

harry83 · Janvier 17, 2022, 5:53

Bonjour @fgtoul
Je vois que tu effectues des transformations Ipx800v4 vers ipx800v5. Est-ce que tu prévois de compléter tes anciens tutos pour migrer vers ipx800v5 ?
Cdlt

fgtoul · Janvier 17, 2022, 5:57

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 sont assez simples à convertir en règle V5, les branchements sont identiques.
bne soirée

fgtoul · Janvier 17, 2022, 6:00

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

fgtoul · Janvier 18, 2022, 5:07

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

<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

Si je reprends un widget complet fourni ici :

ça donne :

<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>

didierm · Janvier 29, 2022, 8:57

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é

cce66 · Janvier 18, 2023, 5:50

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