Soulager ses designs

Salut,

Bon c’est juste pour vous exposer ce que j’ai fait et voir ce que vous en pensez :joy: :yum:

Pour ma tablette servant au WAF, j’ai fait des designs mais le changement de page était assez lent, ce qui m’a voulu une petite remarque du WAF :exploding_head:

Du coup mes design qui sont simples, je les ai transformé en image png (<80ko) et la dessus je mets mes objets Jeedom

Ex:
Le fond de mon design en *.png de 68ko

Une fois collé en fond sur mon design, j’ajoute mes objets jeedom et cela donne ca

4 « J'aime »

Interessant comme idee car je trouvais les rechargements un peu long parfois (bon moi ma solution a été de laisser tomber mes design et utiliser partout #plugin-jeedomconnect)

T as fait une comparaison chronométré pour savoir combien de tps de chargement tu gagnais avec la solution img ?

La « contrepartie » c est qu il faut que tes appareils qui utilisent ce design aient tous la meme taille par contre non !?

Comme précisé j’utilise les design uniquement sur la tablette utilisée par le waf donc pas de souci

Comme demandé, est ce que t as chronométré pour avoir la différence ? Pour se rendre compte de l amélioration.

Je viens de le faire car je l’avais pas fait, et je gagne 1.5 seconde
J’ai nettement moins d’objets à charger et la taille est aussi bien réduite.

En tout cas le WAF ne râle plus de la latence quand elle passe d’un menu à l’autre sur la tablette ^^

1 « J'aime »

Et ca … c est presque plus important que le design lui meme !! :rofl:

3 « J'aime »

Hello
Juste par curiosité : comment faisais-tu sans l’image de fond ?

Entièrement d’accord.

Pour ma part, j’ai pris le parti flat design, chiadé mes virtuels et n’est posé comme image que le menu en svg dans un bloc texte/html.
Code :

<svg version="1.1" viewBox="0 0 140 800" height="800" width="140" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="RadialGradient1" cx="0.5" cy="0.5" fx="0.975" fy="0.5" r="0.5">
      <stop offset="0%" stop-color="#454648"/>
      <stop offset="100%" stop-color="#232323"/>
    </radialGradient>
    <radialGradient id="RadialGradient2">
      <stop offset="0%" stop-color="#454648"/>
      <stop offset="100%" stop-color="#232323"/>
    </radialGradient>
  </defs>
  <g id="Fond" style="display:inline">
    <circle cx="-1900" cy="400" r="2000" fill="url(#RadialGradient1)" stroke="#e6e6e6" stroke-width="2"/>
    <circle cx="70" cy="400" r="60" fill="url(#RadialGradient2)" stroke="#c3c3c3" stroke-width="2"/>
  </g>
</svg>

Avec un petit overflow: hidden; en css perso du bloc au cas ou…

Resultat :

1 « J'aime »