[TUTO noodom] Présentation d’un Design pour mobile menuMobileSubMenuFrame avec paramétrage par fichier JSON et navigation par FRAME

Tags: #<Tag:0x00007fa7a769c070>

Helloo,

Je vous présente la reprise du menu Design [TUTO] Présentation d'un nouveau Design pour mobile menuMobileSubMenu avec paramétrage par fichier JSON.

Cette version ajoute :

  • la navigation par frame,
  • le paramétrage de la position équipements htmlDisplay pour la position du menu et du contenu des liens des boutons depuis le fichier de configuration JSON
  • la gestion des erreurs.

C’est un menu réalisé pour mobile paramétrable depuis un fichier JSON (déclaration des boutons, définition des couleurs). Il n’est donc plus nécessaire de modifier le code.

Sinon, le menu reste identique :
C’est un menu à positionner en bas d’écran proposant 3 boutons au lancement (2 liens vers un autre écran de Design à gauche et à droite et un bouton Menu au centre permettant d’afficher 5 nouveaux liens supplémentaires vers d’autres écrans de Design).

  • Il est possible de choisir le nombre de boutons simplement en ajoutant leur déclaration dans le fichier /json/perso.json.
  • Il est possible d’avoir un menu identique mais positionné en haut de son écran, avec un affichage du menu secondaire vers le bas en remplaçant les fichiers index.html et perso.css par les fichiers index-up.html et perso-up.css.

Une démonstration est visible ici :

L’installation détaillée et le code est accessible ici :

5 J'aimes

Vraiment top ! Merci !

1 J'aime

Bonjour @noodom

Est il possible d’avoir un 6e bouton dans onglet menu, j’utilise ton menu depuis le début et il est vraiment super mais je manque de place…

Merci encore et bonne soirée

Salut,

Je viens d’ajouter la possibilité d’ajouter autant de boutons que l’on souhaite sur le menu du haut.
L’affichage des boutons est adapté en fonction du nombre de boutons déclarés dans le fichier perso.json.

Il suffit donc de mettre à jour les fichiers modifiés : index.html et perso.css pour la version menu en bas (et index-up.html et perso-up.css pour la version du menu en haut).

image

Ce n’est pas lié à ces modifications mais j’ai pu remarquer qu’en modifiant le paramètre de largeur du menu (menu_width), l’affichage du menu était inadapté (menu haut décalé sous le menu bas). Je regarderai pour corriger ce problème.

quand tu parles menu du haut tu parles bien de celui la ?

Screenshot_20201230-153853

je dois retélécharger qq chose ou j ajoute juste une ligne dans ton fichier de départ pour avoir une icone en plus ?

Oui, c’est bien celui-là : regarde ma capture d’exemple qui en contient un peu plus que 5 :wink:

Sinon, comme je le précise dans mon post, il faut remplacer les fichiers index.html et perso.css, qui contiennent les modifications pour un bon affichage avec plus de 5 boutons.

Ok super je n avais pas vu la capture, je m y attaque ce soir

merci bcp !

Bonjour à tous et meilleurs voeux !

Désolé de poster ici, mais ce message est pour @noodom.
Peux tu nous donner ton code pour implémenter neumorphism sur ton design.
J’ai essayé mais l’éditeur de texte ne prend pas du pug…

Merci d’avance.
Bruce

Salut et bonne année,

De quel code parle tu ?

@noodom
Je parle du code pour le contenu (icône centraux avec neumorphism )
image
Merci d’avance
Bruce

Salut @noodom,

j’ai un petit soucis avec mon design j’avais suivi ton tuto mais j’ai 2 barres de défilement qui apparaissent maintenant, alors je sais qu’actuellement il y a qq soucis de manière générale sur les design avec le plugin camera qui ne les affiche pas mais la je pense rien à voir.

j ai tenté de rajouter fullscreen a la fin dans adresse de chrome mais idem j ai remis l’option plein ecran dans jeedom qui avait sauté.

est ce que quelqu’un a eu la même chose ?
je navais pas utilisé mon design depuis qq jours, et fais plusieurs MAJ depuis, je suis en version 4.1.2

merci et bon week end a tous

image

Salut,

Difficile de savoir comme ça.
Ces barres sont apparues sur quelles modifications ? updates de Jeedom, plugins ? ou sur modification du menu ?

La cause n’est peut-être pas due au menu, à confirmer.
Il faudrait regarder avec le debugger du navigateur en sélectionnant la zone concernée et regarder le css lié.
En jouant les valeurs du CSS (width, height, etc…), tu peux cibler ce qui provoque cet affichage.
Ca peut se jouer à quelques pixels près.

Mais ce n’est pas forcément évident, il va falloir tatonner en debug je pense…

Hello,

bon jai trouvé un autre sujet depuis qui traite de ce problème, apparemment ca vient de la mise à jour du core voici le sujet donc comme je me doutais rien à voir avec ton super outil de design :stuck_out_tongue_winking_eye:

mais du coup je ne dois pas être le seul après ca dépend de la version j’imagine car je suis en béta 4.1.20

Bon dimanche

1 J'aime

OK, merci de ton retour car je n’avais pas vu passer ce post sur le problème du core.
Wait & see…

Hello @noodom, merci beaucoup pour tes menus ! C’est vraiment top !

Y a t il un moyen d’avoir des menus et design responsive ?
J’ai configuré ton menu pour un affichage sur mon mobile mais sur le 2eme mobile de la famille, obligé de scroller vu que l’écran ne fait pas la même taille

Salut et merci🙂

Pour le responsive ce n’est pas si simple car je ne connais pas le contenu des menus dont les widgets ajoutés qui ne seront pas responsive.

Pour ce qui est du menu, tu dois pouvoir t’en sortir en créant 2 designs du menu avec chacun leur fichier de configuration json non ?

Après relecture du code, il y a peut-être moyen d’optimiser le parametrage dans le cadre de ce menu.
Exemple : forcer la largeur du mobile pour la largeur du menu et de la frame de contenu. De la même façon, forcer la hauteur du mobile pour la hauteur totale de la frame du contenu.

A tester :wink:

merci pour ton feedback @noodom :slight_smile:
oui je pense qu’avec 2 designs je peux m’en sortir mais je voulais avoir ton avis sur la faisabilité avant.
Je n’ai jamais joué beaucoup avec les design sur jeedom mais rien que pour déterminer la hauteurxlargeur du design pour qu’il soit adapté à tel ou tel device, à part y aller a tâtons je ne sais pas comment faire. … je n’ai pas trouvé ça très user friendly :slight_smile:

si tu le dis :slight_smile:
je ne suis pas assez développeur pour tester ça …