Design avec iframe et ancrage

Utilisation du core de Jeedom Design
1

Bonjour à tous

Je vous fait un petit retour sur une tentative d’amélioration de la réactivé pour une interface design sur tablette.

J’ai une tablette murale en mode portrait (800x1280)avec fullkiosk pour afficher mes designs, le passage d’une page à l’autre par menu est parfois un peu péniblement long…

J’ai donc créé un design principal : en 800x12800 (pour l’affichage de 10 pages)

Sur ce design, je place un équipement qui utilise HTML Display pour afficher le menu que voici :
ce menu est mobile, il est place automatique en haut de la page affichée par le navigateur.
Avec la transparence activée.

je ne suis pas le créateur du code de ce menu, je ne sais plus de qui il s’agit, mais merci à lui :slight_smile:

<div style="position: fixed; top: 0px; left: 50%; width: 100%; margin: 0 0 0 -400px;">
  <nav class="menu-goo">
  <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
  <label class="menu-open-button" for="menu-open">
    <span class="hamburger hamburger-1"></span>
    <span class="hamburger hamburger-2"></span>
    <span class="hamburger hamburger-3"></span>
  </label>
  <a href="#ancre1" class="menu-item"> <i class="icon jeedomapp-home-jeedom"></i> </a>
  <a href="#ancre2" class="menu-item"> <i class="fas fa-eye"></i> </a>
  <a href="#ancre3" class="menu-item"> <i class="icon jeedomapp-preset"></i> </a>
  <a href="#ancre4" class="menu-item"> <i class="icon jeedom-surveillance1"></i> </a>
  <a href="#ancre5" class="menu-item"> <i class="icon techno-courbes"></i> </a>
  <a href="#ancre6" class="menu-item"> <i class="icon loisir-musical"></i> </a>
  <a href="#ancre7" class="menu-item"> <i class="icon meteo-nuage-soleil"></i> </a>
  <a href="#ancre8" class="menu-item"> <i class="icon nature-planet5"></i> </a>  
</nav>
</div>
<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="shadowed-goo">
          
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
          <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
          <feOffset in="shadow" dx="1" dy="1" result="shadow" />
          <feComposite in2="shadow" in="goo" result="goo" />
          <feComposite in2="goo" in="SourceGraphic" result="mix" />
      </filter>
      <filter id="goo">
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feComposite in2="goo" in="SourceGraphic" result="mix" />
      </filter>
    </defs>
</svg>

<style>
.menu-goo {
  -webkit-filter: url("#shadowed-goo");
          filter: url("#shadowed-goo");
}

.menu-goo .menu-item,.menu-goo .menu-open-button {
  background: #0099FF;
  border-radius: 100%;
  width: 70px;
  height: 70px;
  margin-left: 25px;
  position: absolute;
  top: 20px;
  color: white !important;
  font-size:40px;
  text-align: center;
  line-height: 70px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.menu-goo .menu-open {
  display: none;
}

.menu-goo .hamburger {
  width: 25px;
  height: 3px;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}

.menu-goo .hamburger-1 {
  -webkit-transform: translate3d(0, -8px, 0);
          transform: translate3d(0, -8px, 0);
}

.menu-goo .hamburger-2 {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.menu-goo .hamburger-3 {
  -webkit-transform: translate3d(0, 8px, 0);
          transform: translate3d(0, 8px, 0);
}

.menu-goo .menu-open:checked + .menu-open-button .hamburger-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
          transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-goo .menu-open:checked + .menu-open-button .hamburger-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
          transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-goo .menu-open:checked + .menu-open-button .hamburger-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
          transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu-goo .menu {
  position: absolute;
  left: 50%;
  margin-left: -80px;
  padding-top: 20px;
  padding-left: 80px;
  width: 650px;
  height: 150px;
  box-sizing: border-box;
  font-size: 20px;
  text-align: left;
}

.menu-goo .menu-item:hover {
  background: white;
  color: #0099FF !important;
}
.menu-goo .menu-item:nth-child(3) {
  transition-duration: 180ms;
}
.menu-goo .menu-item:nth-child(4) {
  transition-duration: 180ms;
}
.menu-goo .menu-item:nth-child(5) {
  transition-duration: 180ms;
}
.menu-goo .menu-item:nth-child(6) {
  transition-duration: 180ms;
}

.menu-goo .menu-open-button {
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
          transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}

.menu-goo .menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
          transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-goo .menu-open:checked + .menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
          transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-goo .menu-open:checked ~ .menu-item {
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu-goo .menu-open:checked ~ .menu-item:nth-child(3) {
  transition-duration: 170ms;
  -webkit-transform: translate3d(70px, 0, 0);
          transform: translate3d(70px, 0, 0);
}
.menu-goo .menu-open:checked ~ .menu-item:nth-child(4) {
  transition-duration: 250ms;
  -webkit-transform: translate3d(140px, 0, 0);
          transform: translate3d(140px, 0, 0);
}
.menu-goo .menu-open:checked ~ .menu-item:nth-child(5) {
  transition-duration: 330ms;
  -webkit-transform: translate3d(210px, 0, 0);
          transform: translate3d(210px, 0, 0);
}
.menu-goo .menu-open:checked ~ .menu-item:nth-child(6) {
  transition-duration: 410ms;
  -webkit-transform: translate3d(280px, 0, 0);
          transform: translate3d(280px, 0, 0);
}
.menu-goo .menu-open:checked ~ .menu-item:nth-child(7) {
  transition-duration: 410ms;
  -webkit-transform: translate3d(350px, 0, 0);
          transform: translate3d(350px, 0, 0);
}
.menu-goo .menu-open:checked ~ .menu-item:nth-child(8) {
  transition-duration: 410ms;
  -webkit-transform: translate3d(420px, 0, 0);
          transform: translate3d(420px, 0, 0);
}
.menu-goo .menu-open:checked ~ .menu-item:nth-child(9) {
  transition-duration: 410ms;
  -webkit-transform: translate3d(490px, 0, 0);
          transform: translate3d(490px, 0, 0);
}
.menu-goo .menu-open:checked ~ .menu-item:nth-child(10) {
  transition-duration: 410ms;
  -webkit-transform: translate3d(560px, 0, 0);
          transform: translate3d(560px, 0, 0);
} 
.menu-goo .menu-open:checked ~ .menu-item:nth-child(11) {
  transition-duration: 410ms;
  -webkit-transform: translate3d(630px, 0, 0);
          transform: translate3d(630px, 0, 0);
}  
</style>

puis je place une zone texte/html contenant

<a name="ancre1">
  <div style="float:left; width:100%; height:100%;">	
  <iframe id="pagecontent_iframe" height="100%" width="100%" frameBorder="0" scrolling="no" src="index.php?v=d&p=plan&plan_id=111&fullscreen=1">
  </iframe>
</div>

Merci à @noodom pour ce code

Il faut personnaliser l’ID en mettant celui de votre 1er page
j’agrandie au max en hauteur et largeur pour voir l’ensemble de mon design.

puis à la suite, je met une autre zone texte/html, idem que la précédent en mettant l’ancrage à 2 et le bon ID

et ainsi de suite afin d’ajout a la suite l’une de l’autre, toutes mes zones de design.

J’ai dupliqué mes designs habituels pour juste enlever le menu d’origine.

le passage entre les menus est super rapide.

ca charge peut être un peu en mémoire, avec 1 design le navigateur affiche 11-15Mb, avec 4 designs je suis à 22-24Mb

je ne sais pas si cela à une incidence à lancer plusieurs fois l’interface web de jeedom, puisque cela revient à ca dans chaque iframe.

Pour échanger :slight_smile:

3 « J'aime »
2

C’est super fluide :heart_eyes:, je suis en iframe et c’est plus long donc je vais regarder de près ces petite ancres :wink:

3

avec une seule iframe, dont le design change dedans suivant le menu, tu as toujours cette latence du chargement, c’est normal.

Le fait de mettre une iframe par design sur un même design, ca permet :

  • Un chargement unique et donc une fluidité entre les choix dans le menu qui deplace la page au bon endroit
  • De ne pas refaire complètement ses designs
  • De pouvoir avoir des équipements ou commandes en plusieurs exemplaires sur des designs différents
  • Un menu unique a gérer

Après ma crainte, c’est la charge, car cela revient à lancer plusieurs pages jeedom sur le même navigateur, je ne sais pas si c’est réellement un problème, j’attends l’avis des experts :wink:

1 « J'aime »
4

Je viens de tester sur la tablette, 1er chargement un peu long mais ensuite, super fluidité.
faut encore que je règle l’affichage, sur certaines iframes alors que le scrolling est à NO, il y a quand même des scroll H et V, c’est pas chouette à l’affichage, faut que je diminue un peu les sous design je penses.

5

J’espérais que les spécialistes Jeedom allaient un peu s’exprimer sur cette utilisation des design

Je l’ai mis en production depuis plusieurs jours sur la tablette

La fonction, rechargement de la page par fullykiosk est un peu longue, ce qui semble normal, j’ai une 15aines de frames et donc de page http ouvertes sur le même design, mais une fois fait c’est super fluide

J’ai cru remarquer quelques soucis de widget qui ne se mettaient pas à jour à l’ouverture de l’affichage de la tablette alors que cela fonctionne quand l’affichage est déjà en cours, faut que je creuse un peu.

cela ne semble pas charger Jeedom plus que ça

J’aimerais bien savoir si c’est un problème pour le système que 15 pages http soient ouvertes en simultanées, ou si le système de cache fait que cela est transparent.

6

Je suis avec attention ton post.
Je cherche a faire quelque chose de semblable afin que le résultat soit en mode « one page ».
As tu pu resoudre tes problèmes ?

Pour la charge c’est pas un problème. Au pire ca te ralenti un peu jeedom d’ou l interet d’avoir une machine jeedom un peu plus costaud.
Je trouve que les designs jeedom sont tres lourd d’une maniere generale. Il faudrait creuser. Les images ? Le code du design ?

Sinon si ton one design fonctionne bien, ca serait bien de rajouter le scrolling avec slider plutôt que d’appuyer sur les menus.
Qu en penses tu ?

7

bonjour, j’avous que j’ai fait machine arrière et je suis revenu avec mes designs classiques, j’ai eu un comportement bizarre sur mon jeedom, avec les saturations mémoires, j’ai aussi fait en parallèle du ménage des mes virtuels, apparement le prb semble ne plus se reproduire mais je ne sais pas d’où cela vient. donc pour le moment, je laisse tomber le design mono