Design F$B333 avec centralisation

[gdseb]

Bonjour,
J’utilise ce menu c’est vraiment bien.
Cependant une question:
Y’a-t-il possibilité de d’appeler le design en passant l’id en paramètre :

A chaque fois que j’appelle le design contenant le menu (id=15), l’iframe du 1er design (id=12) est affiché : c’est normal.
Je voudrais pouvoir appeler un autre design (id=7 par exemple) depuis l’id 15 (le menu)

C’est possible ?

[noodom]

Salut @gdseb,

J’ai repris ce menu pour y ajouter des améliorations (navigation par frame et configuration par json principalement ) :

[TUTO noodom] Nouvelle refonte du menu F$B33 avec navigation par frame

Bonsoir, Suite à ce post sur l’ajout de la gestion du menu par un fichier de configuration Json pour le menu F$B33 : Je vous propose une version plus complète qui ajoute la navigation par frame ! Les avantages : Le menu est à ajouter sur un seul Design : moins galère à installer, si on veut le modifier, etc… Les Designs en lien avec chaque bouton n’auront pas besoin d’avoir le menu : ils ne sont plus spécifique à un menu et peuvent être partagés Il sera possible d’avoir plusieurs menus di…

Et j’ai aussi ajouté la possibilité que tu remontes avec le paramètre link_id dans l’url :

[gdseb]

merci @noodom

[Bricopathe]

Salut à tous,

Je commence juste à tester les designs sur Jeedom.
Je m’intéresse à mettre en place le CCS du premier post mais la mise en forme ne remonte pas correctement

• j’ai créé un fichier « fenetre.css » situé dans un répertoire html/design dans lequel j’ai recopié ce qui était indiqué dans le premier post
• j’ai créé une zone texte dans laquelle j’ai recopié le code HTML du premier post, et modifié le chemin en « design/fenetre.css »
  Je me retrouve avec un cadre qui ne ressemble pas à ce qu’il devrait, et aucun changement si je modifie le fichier css
  Ai je oublié un paramètre?

[Diablofx]

Bonjour,

Suite à l’update 4.2 de Jeedom core j’ai eu des soucis sur mon design basé sur celui de F$B333, avec le message : « commencez par envoyer une image d’arrière plan » car la partie JS du design n’arrivait plus à récupérer l’url de background du plan.

J’ai fais un rapide correctif qui fonctionne chez moi, si cela peut dépanner en attendant que quelqu’un de plus qualifié que moi propose une solution plus élégante :

Dans /montheme/js/theme.js

Repérer ce bout de code :

var imgBackground = $(".container-fluid img[src*='data/plan/']");
if (typeof(imgBackground.attr("src")) != "undefined") {
    imgBackground.remove();
    var urlImg = imgBackground.attr("src");
} else {
    alert("commencez par envoyer une image d'arriere plan");
}

Rajouter /* avant et */ après pour obtenir :

/*
	var imgBackground = $(".container-fluid img[src*='data/plan/']");
    if (typeof(imgBackground.attr("src")) != "undefined") {
        imgBackground.remove();
        var urlImg = imgBackground.attr("src");
    } else {
        alert("commencez par envoyer une image d'arriere plan");
    }
*/

Copier en dessous :

var elementBackground = document.getElementById('div_pageContainer').getElementsByClassName('div_backgroundPlan')[0].getElementsByClassName('container-fluid')[0].getElementsByTagName('div')[1]
var elementStyle = getComputedStyle(elementBackground).background;
var testelementStyleURL = elementStyle.indexOf('.jpg');
if (testelementStyleURL != -1) {
	var debutChaine = elementStyle.indexOf('data/plan/');
	var finChaine = elementStyle.indexOf('.jpg')+4;
	var urlBackground = elementStyle.substring(debutChaine, finChaine);
  	$(elementBackground).remove();
	}
else {
        alert("commencez par envoyer une image d'arriere plan");
    }

var urlImg = urlBackground;

Pour obtenir au final :

/*
	var imgBackground = $(".container-fluid img[src*='data/plan/']");
    if (typeof(imgBackground.attr("src")) != "undefined") {
        imgBackground.remove();
        var urlImg = imgBackground.attr("src");
    } else {
        alert("commencez par envoyer une image d'arriere plan");
    }
*/
/* Get plan background URL after V4.2 update*/
var elementBackground = document.getElementById('div_pageContainer').getElementsByClassName('div_backgroundPlan')[0].getElementsByClassName('container-fluid')[0].getElementsByTagName('div')[1]
var elementStyle = getComputedStyle(elementBackground).background;
var testelementStyleURL = elementStyle.indexOf('.jpg');
if (testelementStyleURL != -1) {
	var debutChaine = elementStyle.indexOf('data/plan/');
	var finChaine = elementStyle.indexOf('.jpg')+4;
	var urlBackground = elementStyle.substring(debutChaine, finChaine);
  	$(elementBackground).remove();
	}
else {
        alert("commencez par envoyer une image d'arriere plan");
    }

var urlImg = urlBackground;

L’update 4.2 m’a aussi fait apparaitre une scrollbar supplémentaire à celle du navigateur, dont je ne voulais pas, voici un bout de CSS pour l’enlever :

Rajouter dans /montheme/css/style.css les lignes suivantes :

/*Remove scrollbar after V4.2 update*/
#div_pageContainer .div_backgroundPlan {
	overflow : visible !important;
}

Il fait un peu froid à la maison, je rentre de congés ce soir et ai donc juste fait préchauffer l’appart !

[BorisioCiro]

Bonjour,

Désolé, je débute totalement avec les designs.
Je ne comprends vraiment rien entre les répertoires, les codes CSS, HTML…

Que dois-je faire pour implémenter ce super design svp?

Merci d’avance et désolé

[noodom]

Salut,

Je te propose une solution de génération automatique de ce menu avec la procédure que je décris ici :

[TUTO noodom] Génération automatique de menus noodom

Helloo, Je vous propose un scénario de génération automatique de mes menus disponibles ici : GitHub - noodom/jeedom_menus. La procédure de création du scénario est décrite ici : jeedom_menus/installation at master · noodom/jeedom_menus · GitHub. Création du scénario : Nouvelle méthode simplifiée de création

Ancienne méthode

EDIT : ancienne méthode, voir la nouvelle méthode simplifiée dans le post ci-dessous. : - ajouter une action pour spécifier le tag menuName avec le …

Je te laisse regarder plus en détail si ça te convient et si tu as des questions.

[BorisioCiro]

Merci beaucoup, je regarde ça dans le WE

[Nemeraud]

Bonjour

il y a aussi des plugins maintenant, plus simple pour gérer un menu

j’utilise : Djeesign pour un menu en mode VUE
et Htmldisplay pour le menu des DESIGN

avec le code suivant qu’il suffit de mettre dans un équipement créé dans le plugin, puis d’ajouter l’équipement dans vos designs

c’est un menu déroulant, il ne prend pas trop de place

<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="#" class="menu-item" onclick="planHeader_id=72; displayPlan();"> <i class="icon jeedomapp-home-jeedom"></i> </a>
  <a href="#" class="menu-item" onclick="planHeader_id=71; displayPlan();"> <i class="fas fa-eye"></i> </a>
  <a href="#" class="menu-item" onclick="planHeader_id=73; displayPlan();"> <i class="icon jeedomapp-preset"></i> </a>
  <a href="#" class="menu-item" onclick="planHeader_id=67; displayPlan();"> <i class="icon jeedom-surveillance1"></i> </a>
  <a href="#" class="menu-item" onclick="planHeader_id=77; displayPlan();"> <i class="icon techno-courbes"></i> </a>
  <a href="#" class="menu-item" onclick="planHeader_id=94; displayPlan();"> <i class="icon loisir-musical"></i> </a>
  <a href="#" class="menu-item" onclick="planHeader_id=87; displayPlan();"> <i class="icon meteo-nuage-soleil"></i> </a>
  <!--<a href="#" class="menu-item" onclick="planHeader_id=95; displayPlan();"> <i class="icon jeedom2-tirelire6"></i> </a>-->
  <a href="#" class="menu-item" onclick="planHeader_id=93; displayPlan();"> <i class="icon nature-planet5"></i> </a>  
</nav>

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

A adapter suivant vos besoins

il y a aussi pimp my jeedom

Je ne connais pas la solution donné par Noodom mais c’est surement très bien

[noodom]

@Nemeraud

il y a aussi pimp my jeedom

En effet, comment ai-je pu zapper ?
Une partie de mes menus proposés est bien disponible dans Pimp (menus F$B33, Animation et menuVerticalTom).
La liste complète de mes autres menus (générable très facilement en une ligne de scénario détaillée ci-dessus) qui gèrent une navigation par frame (pas de duplication ni rechargement du menu à chaque sélection des boutons) :

GitHub - noodom/jeedom_menus

Par curiosité, j’ai testé rapidement DJeesign, je n’ai pas réussi à générer et utiliser un menu. Le développement est toujours maintenu ?
Sinon, j’ai des comportements bizarres à l’enregistrement : champs non liès à un menu.
Le plugin ne permet la génération que de 2 menus ?

[Nemeraud]

Salut @noodom

Pour DJeesign, je l’utilise comme menu pour la partie VUE depuis des années, il fonctionne mais j’ai pas essayé de créé un nouveau menu

d’ailleurs dans ton module Menu dans Pimp my jeedom, j’avais même pas percuté que c’était toi le créateur de cette partie quand j’ai proposé ce plugin :-), c’est dommage que l’on ne puisse faire des menus que vers des pages DESIGN et pas VUE

[BorisioCiro]

Je viens de tester, ça a l’air top !!!

C’est responsive ??

Je vais tenter de l’adapter Merci !

EDIT premiere petite question: tes planHeader_id, ils ramènent vers quoi stp?

[Nemeraud]

Bonsoir, vers des design, mais cela doit s’adapter pour pointer vers des vues

[BorisioCiro]

Nickel merci !

Autre question bête, tu trouves à quel endroit toutes les icônes que tu as utilisé dans tes class? J’en aurais bien changé mais pour cela il me faudrait leur petit nom…

"i class=« icon jeedomapp-home-jeedom » par exemple

[Nemeraud]

Ce sont les icônes de jeedom, faut récupérer leur nom dans la base d’icônes

[BorisioCiro]

Tout bêtement… Désolé de la question^^

[Nemeraud]

Il n’y a aucune question bête

[BorisioCiro]

Petite question plus htmlienne: y’aurait-il un moyen de faire naviguer les sous menus sur la même page plutôt que renvoyer chaque clic sur le menu du haut vers une autre page ?

[noodom]

Hello,

Avec cette méthode oui et sans s’occuper de html

Design F$B333 avec centralisation

En effet, comment ai-je pu zapper ? Une partie de mes menus proposés est bien disponible dans Pimp (menus F$B33, Animation et menuVerticalTom). La liste complète de mes autres menus (générable très facilement en une ligne de scénario détaillée ci-dessus) qui gèrent une navigation par frame (pas de duplication ni rechargement du menu à chaque sélection des boutons) : Par curiosité, j’ai testé rapidement DJeesign, je n’ai pas réussi à générer et utiliser un menu. Le développem…

[BorisioCiro]

en prenant pimp my jeedom tu veux dire, ou en lancant ton générateur de menu?