C’est noté @noodom . En tout cas merci à toi pour ta disponibilité.
Pour ceux qui voudraient suivre et tester les dernières évolutions, la dernière modification est la suivante :
return '<a id="' + button.link + '" onClick="gotoPlan(this.id,' + button.footer + ',\'' + button.type + '\')">'
(Attention, ',\'' ne contient que des simple quotes et pas des guillemets !)
Bonjour @noodom
Merci pour tout ce boulot !! Je viens de passer en V4 et donc je me relance dans mes designs !
Je tente de mettre en place le menu Animation, j’ai donc créé un design Accueil_Design dans lequel j’ai placé mon HTMLDisplay Menu, puis mon HTMLDisplay Contenu. Ensuite j’ai créé un Design par rubrique présente dans mon menu, puis j’ai mis à jour le perso.json en conséquence.
Mon probleme est que lorsque je lance mon AccueilDesign, le menu est tout de suite masqué par la premiere page de mon menu…Comment faire pour eviter celà ? Mon HTMLDisplay est pourtant bien positionné sous mon HTMLDIsplay Menu…
Merci pour ton aide !
Bon je viens de répondre à ton post précédent 
Je vois que la suite est présente ici.
Attention à bien ajouter le htmlDisplay contenu AVANT le htmlDisplay menu car ça peut poser des problèmes de chargement automatique dans la frame de contenu encore non existantes.
Sinon, tu as bien modifié le zindex de ton htmlDisplay menu ?
C’est good ! ca fonctionne ! effectivement, j’insérais le menu en premier…là ca fonctionne mieux ! Merci !
Parfait !
Hello à tous ! je souhaite pouvoir integrer un footer dans mon design, afin de ne pas avoir à le recharger a chaque fois. J’ai créé un HTMLDisplay mais que mettre dedans pour qu’il appel mon Design Footer ?
Autre question, dans le HTMLDisplay Contenu, le code est le même quelque soit le type de menu ?
Merci !
Salut,
J’ai proposé une solution récemment en réponse dans ce même post. Je te laisse remonter ce post ajouter un footer.
Sinon, le code de déclaration du contenu est bien identique pour tous les menus que je propose.
J’ai testé, mais ca ne fonctionne pas, rien ne s’affiche dans mes frames…
J’ai repris ce qui avait été fait dans le post de @noBru77
Le seul doute que j’ai c’est sur la Fonction gotoPlan(), elle est à placer à la fin du index.html et donc dans le HTMLDisplay Menu ? c’est bien ca?
Sinon j’ai bien créé mon design principal, mes designs menus, mon design footer, je les ai tous mis à la bonne dimension. J’ai modifié mon perso.json en conséquence. J’ai ensuite integré mon HTMLDisplay Contenu dans le design principal, puis le HTMLDisplay Footer et enfin le HTML Display Menu.
Mon menu apparait, avec mes icones, mais les frames restent blanches. Lorsque je clic les boutons, les designs apparaissent à la place du Design principal… 
Bonjour @tonejay,
Voici ce que j’ai mis en place et noodon m’a bien aidé à débugger et cela fonctionne à présent.
Pour le htmlDisplay MENU :
<!--
@noodom / Menu menuJsonFsb33Frame : menu F$B33 avec gestion des boutons par fichier JSon et navigation par frame
- reprise du menu F$B33 simplifié par @salvialf
- ajout de la gestion des boutons par un paramétrage JSon
- ajout de la navigation par frame à l'aide de htmlDisplay
Installation du menu : https://github.com/noodom/jeedom_menus/blob/master/menuJsonFsb33Frame/README.md
-->
<link href="montheme/menuJsonFsb33Frame/css/perso_vert.css" rel="stylesheet" type="text/css">
<div class="menu_top">
</div>
<script id="menuCreation-js">
$(document).ready(function () {
let menuTop = $('.menu_top');
let link_id = (location.search.split('link_id' + '=')[1] || '').split('&')[0];
menuTop.append('Chargement du menu..');
$.getJSON('montheme/menuJsonFsb33Frame/json/perso_home_01.json' + '?v=' + (new Date()).getTime(), function (data) {
let buttons = data.buttons.map(function (button) {
return '<a id="' + button.link + '" onClick="gotoPlan(this.id,' + button.footer + ',\'' + button.type + '\')">'
+ '<li class="monmenu">'
+ '<div class="imagette"><img src="' + button.icon + '" height=50px width=50px></div></br>'
+ '</li>'
+ '</a>';
});
menuTop.empty();
if (buttons.length) {
let listButtons = buttons.join(' ');
let menuList = $('<ul class="monmenu" />').html(listButtons);
menuTop.append(menuList);
}
if (data.parameters) {
// menu parameters
let htmlDisplayId = '[data-eqlogic_id="#id#"]';
$(htmlDisplayId)[0].style.left = data.parameters.menu_x ? data.parameters.menu_x : "1180px";
$(htmlDisplayId)[0].style.top = data.parameters.menu_y ? data.parameters.menu_y : "0px";
$(htmlDisplayId)[0].style.width = data.parameters.menu_width ? data.parameters.menu_width : "100px";
$(htmlDisplayId)[0].style.height = data.parameters.menu_height ? data.parameters.menu_height : "710px";
// frame parameters
$("#menuFrame").offsetParent().style().left = data.parameters.content_x ? data.parameters.content_x : "0px";
$("#menuFrame").offsetParent().style().top = data.parameters.content_y ? data.parameters.content_y : "0px";
$("#menuFrame").offsetParent().style().width = data.parameters.content_width ? data.parameters.content_width : "1180px";
$("#menuFrame").offsetParent().style().height = data.parameters.content_height ? data.parameters.content_height : "710px";
// footer frame parameters
$("#menuFooter").offsetParent().style().left = data.parameters.footer_x ? data.parameters.footer_x : "0px";
$("#menuFooter").offsetParent().style().top = data.parameters.footer_y ? data.parameters.footer_y : "0px";
$("#menuFooter").offsetParent().style().width = data.parameters.footer_width ? data.parameters.footer_width : "1180px";
$("#menuFooter").offsetParent().style().height = data.parameters.footer_height ? data.parameters.footer_height : "710px";
}
let frameDestination = document.getElementById('menuFrame');
if (frameDestination == null) {
// no frame navigation : focus on button with url parameter plan_id as id
let planID = '#' + (location.search.split('plan_id' + '=')[1] || '').split('&')[0];
$(planID + ' li').addClass('selected'); // selected = classe CSS sur élément actif
}
else {
if (link_id == "") {
// frame navigation : set focus on first button
$('#' + data.buttons[0].link + ' li').click();
}
else {
// frame navigation : goto design id (url parameter link_id)
gotoPlan(link_id);
}
}
});
});
// create url destination
function getUrlDestination(urlParam) {
if (isNaN(urlParam)) {
return urlParam;
} else {
return 'index.php?v=d&p=plan&plan_id=' + urlParam + '&fullscreen=1';
}
}
// menu redirection
function gotoPlan(id, idFooter, linkType) {
let urlDestination = getUrlDestination(id);
let urlDestinationFooter = getUrlDestination(idFooter);
// get frame in htmlDisplay equipment
let frameDestination = document.getElementById('menuFrame');
let frameDestinationFooter = document.getElementById('menuFooter');
if (frameDestination == null || linkType == "page") {
// no frame : page redirection
planHeader_id = id;
displayPlan();
}
else {
// display focus
$('.monmenu').removeClass('selected');
$('#' + id + ' li').addClass('selected');
// frame redirection
if (frameDestination.src.split('?')[1] != urlDestination.split('?')[1]) {
frameDestination.src = urlDestination;
}
// frame footer redirection
if (frameDestinationFooter.src.split('?')[1] != urlDestinationFooter.split('?')[1]) {
frameDestinationFooter.src = urlDestinationFooter;
}
}
}
</script>
Pour le htmlDisplay iFrame (contenu):
<iframe id="menuFrame" src="about:blank" style="width:100%;height:100%;border:none;"/>
Pour le htmlDisplay Footer:
<iframe id="menuFooter" src="about:blank" style="width:100%;height:100%;border:none;"/>
Ensuite, voici mon fichier perso_home_01.JSON (à adapter):
{
"buttons": [
{
"link": "2",
"icon": "montheme/menuJsonFsb33Frame/img/02_menu_accueil.png",
"footer": "21",
"type": "frame"
},
{
"link": "3",
"icon": "montheme/menuJsonFsb33Frame/img/03_menu_volets.png",
"footer": "21",
"type": "frame"
},
{
"link": "4",
"icon": "montheme/menuJsonFsb33Frame/img/04_menu_chauffage.png",
"footer": "21",
"type": "frame"
},
{
"link": "5",
"icon": "montheme/menuJsonFsb33Frame/img/05_menu_temp.png",
"footer": "21",
"type": "frame"
},
{
"link": "6",
"icon": "montheme/menuJsonFsb33Frame/img/06_menu_eclairages.png",
"footer": "21",
"type": "frame"
},
{
"link": "7",
"icon": "montheme/menuJsonFsb33Frame/img/07_menu_exterieurs.png",
"footer": "21",
"type": "frame"
},
{
"link": "8",
"icon": "montheme/menuJsonFsb33Frame/img/08_menu_energie.png",
"footer": "21",
"type": "frame"
},
{
"link": "9",
"icon": "montheme/menuJsonFsb33Frame/img/09_menu_alarme.png",
"footer": "21",
"type": "frame"
},
{
"link": "10",
"icon": "montheme/menuJsonFsb33Frame/img/00_menu_next_page.png",
"footer": "21",
"type": "page"
}
],
"parameters": {
"menu_x": "1180px",
"menu_y": "0px",
"menu_width": "100px",
"menu_height": "710px",
"content_x": "0px",
"content_y": "0px",
"content_width": "1180px",
"content_height": "710px",
"footer_x": "0px",
"footer_y": "710px",
"footer_width": "1280px",
"footer_height": "90px"
}
}
Pour ma part, j’ai 2 pages de menu, d’où le perso_home_01.json De même, j’ai 2 htmlDisplay Menu (01 et 02), un pour chaque page de design contenant le menu.
Attention, aussi, j’ai modifié le fichier CSS que voici:
div.menu_top {
width: 100px;
height: 710px;
background-color: rgba(0, 0, 0, 0.8);
border-bottom: 2px solid rgba(0, 0, 0, 1);
}
ul.monmenu ul.monmenu_sep ul.monmenu_end {
list-style-type: none;
color: rgba(255, 255, 255, 0.8);
font-family: Roboto;
font-size: 16px;
font-weight: normal;
}
li.monmenu {
display: block;
width: 100px;
# margin-left: -5px;
text-align: center;
height: 79px;
margin-left: -40px;
padding-top: 15px;
# border-left: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
background-color: rgba(0, 0, 0, 0.2);
}
div.imagette {
text-align: center;
margin-bottom: 5px;
opacity: 1.0;
}
li.monmenu:hover {
background-color: rgba(255, 255, 255, 0.2);
}
li.selected {
display: block;
width: 100px;
# margin-left: -5px;
text-align: center;
height: 79px;
margin-left: -40px;
padding-top: 15px;
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-right: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.2);
}
li.monmenu_sep {
display: block;
width: 100px;
margin-left: -40px;
text-align: center;
height: 79px;
padding-top: 15px;
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
li.monmenu_end {
display:block;
width: 100px;
# margin-left: -5px;
text-align: center;
height: 79px;
margin-left: -40px;
padding-top: 15px;
# border-left: 1px solid rgba(255,255,255,0.3);
# border-bottom: 1px solid rgba(255,255,255,0.3);
background-color: rgba(0,0,0,0.2);
}
div.bouton {
opacity: 1;
}
div.bouton:hover {
opacity: 0.5;
}
Dernier point: le design de la page est en 1280 x 800, le design du iFrame: 1180 x 710 et de Footer: 1280 x 90
Voilà, tu devrais être en mesure de t’en sortir avec tout ça. Et merci encore à @noodom.
J’ai édité mon message pour apporter plus de précisions.
Pfiouuu là ca se complique pour moi qui n’ai pas énormément de connaissance en dev…
Sachant que moi je n’ai pas besoin de choix entre frame et page sur le menu, y a til des différence entre ton index.html et le miens de ce fait ?
Ai-je besoin de modifier dans le CSS ?
De mon coté, ce que j’ai fait avant :
- Modififcation de la ligne 24 comme expliqué par @noodom
- Remplacement de la fonction gotoPlan()
- Ajout de footer dans mon perso.json
perso.json
{
"buttons": [
{
"link": "25",
"icon": "montheme/menuJsonFsb33Frame/img/icon_home.png",
"footer" : "29"
},
{
"link": "26",
"icon": "montheme/menuJsonFsb33Frame/img/icon_light.png",
"footer" : "29"
},
{
"link": "27",
"icon": "montheme/menuJsonFsb33Frame/img/icon_camera.png",
"footer" : "29"
},
{
"link": "28",
"icon": "montheme/menuJsonFsb33Frame/img/icon_camera.png",
"footer" : "29"
}
],
"parameters": {
"menu_x": "0px",
"menu_y": "0px",
"menu_width": "1280px",
"menu_height": "80px",
"content_x": "0px",
"content_y": "80px",
"content_width": "1280px",
"content_height": "570px",
"foot_x": "0px",
"foot_y": "570px",
"foot_width": "1280px",
"foot_height": "150px"
}
}
Mon menu ne s’affiche meme pas…
Si ton Menu ne s’affiche pas, x’est que tu a une erreur soit dans le JSON soit dans ton HTML Menu. Vérifie bien la syntaxe, une virgule en plus ou en moins casse l’ensemble.
Pour tes autres questions, si tu n’utilises pas frame/page, laisse en frame. Ce sera plus simple. Le CSS me sert à formater mon menu: je le veux à la verticale et à droite de mon écran. Tu vas être obligé de le modifier si tu veux autre chose.
Il faut que tu mettes les mains dans le cambouis. Les codes que j’ai mis me sont adaptés. A toi de les adapter à tes besoins.
Crée un nouveau sujet et mets moi en tag. Je vais essayer de t’aider de mon mieux. Explique ce que tu veux obtenir et mets tes fichiers dans ton nouveau sujet.
1 « J'aime »
Bonjour,
Merci pour ce tuto qui m’a permis de mettre en place le menu sur mon design.
J’ai cependant une petite question concernant l’écran d’accueil.
Celui-ci doit-il être vide ?
Si oui, c’est dommage car lorsqu’on arrive sur le design il est vide. On est « obligé » de choisir un onglet du menu pour avoir un affichage.
Si non et que j’y mets des équipements ou commandes, alors pas moyen de revenir dessus une fois que j’ai changé d’onglet
J’ai bien essayé de mettre un lien vers mon design principal dans le menu, mais ça ne marche pas. Est-ce que je rate quelque chose là ?
Salut,
Tu dois arriver sur le lien du premier bouton du menu au chargement.
Donc ça ne doit pas être vide.
Tu peux ajouter un console.log() dans le code et regarder dans le debugger où est le problème.
Par exemple, tu dois voir les traces suivantes si tu ajoutes :
if (link_id == "") {
// frame navigation : set focus on first button
console.log('affichage du design du premier bouton');
$('#' + data.buttons[0].link + ' li').click();
}
2 « J'aime »
En effet, c’est bien le cas. Je ne sais pas pourquoi je n’avais rien du coup, j’ai copié de nouveau le code. Ça marche désormais. Merci 
Bonjour,
Merci encore pour ton tuto, j’ai réussi a faire fonctionner le menu comme je veux, a une exception pret.
J’ai chercher sur ce post et sur goo…le mais je ne trouve pas la solution.
Comment faire pour que la frame du contenu soit transparente et laisse apparaitre le fond d’ecran definit dans le design de base ?
Ce que je ne comprends pas c’est c’est bien le cas pour le menu qui une fois que j’ai defini la frame en transparent, je vois bien que derriere le fond d’ecran est la.
Je fais pareil pour la frame du contenu, je sauvegarde, la je vois bien que la frame est transparent, donc jusque la ok.
Par contre dés que je click sur un lien du menu, le design correspondant apparaît avec un fond gris sombre alors que le design est bien lui aussi en transparent.
Quelqu’un aurait-il une solution ?
Charles
Oui, dans doute un souci avec le htmldisplay :
Voir la réponse ici [TUTO noodom] Présentation d'un nouveau Design horizontal menuAnimation avec paramétrage par fichier JSON et navigation par FRAME - #4 par noodom