[TUTO] Présentation d'un nouveau Design pour mobile menuMobileSubMenu avec paramétrage par fichier JSON

Tags: #<Tag:0x00007f3859544bb8>

Je vous présente un nouveau menu Design.
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.

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).

Une démonstration est visible ici :

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

9 J'aimes

Super sympa

Bonsoir,

J’ai fait l’installation en suivant tes indications.
Cela fonctionne à 2 détails près.
Voir mes copies d’écran :
Au chargement, le sous-menu est fermé mais le bandeau qui l’accueil n’est pas transparent.
Or dans ton exemple il semble l’être.
image
Autant j’ai pu changer la couleur du fond deu menu, autant cela ne fonctionne pas pour le sous-menu
image
Extrait du perso.css :

:root {
  --menu-width:360px;
  --button-head-color:#fff;
  --button-bottom-color:#fff;
  --button-head-bgcolor:#3750C8;
  --button-bottom-bgcolor:#3750C8;
  --button_head_hovercolor:#000;
  --button_bottom_hovercolor:#000;
}

PS :

  • Résolution du smartphone : 360x640
  • Tout importé avec winscp, correctifs fait avec jExplorer
  • Le menu est un htmlDisplay

Merci de ton aide.

Salut,

Pour la transparence, tu dois passer le fond du htmlDisplay en mode Transparent dans son paramétrage.

Sinon, je viens de pousser une mise à jour pour ajouter la prise en compte de modification du fond du sous-menu.

Une remarque, tu ne dois pas (dans le cas d’une utilisation « classique » du menu) toucher au fichier css pour les couleurs mais seulement au fichier perso.json de configuration dont c’est le rôle de personnalisation sans toucher au code.

Bien sûr, rien ne t’empêche de modifier par toi-même le fichier peso.css si tu souhaites pousser plus loin la personnalisation :wink:

sur ce, je file me rafraichir dans la piscine :slight_smile:

Merci Noodom,

La transparence fonctionne avec firefox android, chrome android mais malheureusement pour moi pas avec fully kiosk browser qui permet un affichage pleine page.
Pour la couleur c’est bon aussi.

Ah dommage pour le mode fully kiosk :confused:
Je ne sais pas si c’est possible de contourner, je n’utilise pas ce mode.

Bonjour,

Merci pour le partage.

Par contre, j’ai un petit problème, je n’arrive pas à afficher les images. C’estr indiqué " le lien vers son image ( icon ) au format font-awesome". Il faut télécharger l’image et le mettre dans le dossier img ? Mettre le lien http ? Autre ?

Merci

Salut,

En fait, comme indiqué en fin de doc, tu peux trouver la listes des icônes font-awesome disponibles par défaut :

Liste des icônes font-awesome pour l’affichage des boutons :

Par contre, si tu utilises le fichier de configuration par défaut du menu (perso.json), tu devrais voir s’afficher les icônes que je propose par défaut.

Par exemple : « icon »: « fa fa-home » pour l’icône Maison du bouton Accueil, à gauche du bouton Menu.

Merci pour la réponse mais même par défaut, ça ne marche pas mieux
image

Je suis sous jeedom v3, est-ce que le problème peut venir de là ?

Je viens de faire une installation sur la V3.3.53 et ça ne pose pas de soucis.
Tu as suivi strictement la doc d’install (sans adaptations persos) ?

Mais vue ta capture d’écran, ça semble être un problème de déclaration de taille (ton texte/html est suffisamment agrandi ?)

Quel est le contour exact de ton text/html ? Tu peux te mettre en mode Edition pour voir le contour exact sur une capture ?

Sinon, tu es en quelle version Jeedom exactement ?

Merci pour ta réponse.

J’avais testé plusieurs choses et la j’ai remis tout par défaut en modifiant juste la taille du menu dans le json

Que veux tu dire par contour ? C’est ça ?
image

Mon jeedom est en version 3.3.50

Pour le contour, je voulais dire qu’en mode éditer du design tu dois voir en surligné le tour de ton text/html.

Étonnant de voir que ton menu semble « écrasé », comme trop petit en hauteur.

Tu peux envoyer ton perso. Json ? Sinon tu n’as pas touché au perso.css ?

Quand tu fais F12 pour le debugger du navigateur, tu n’as pas d’erreur de remontées ?

J’ai refait l’installation du début et vider le cache du navigateur et maintenant ça fonctionne.

J’avais du faire une erreur quelque part :expressionless:

Merci encore pour ton aide :wink: Le menu est vraiement top

bonjour @noodom,
j’ai réalisé à la lettre ce que tu as écris mais je n’ai pas le menu qui s’affiche.
j’ai fais vérifié le Json, il est OK.
voici les Screenshots de ce que j’ai fait. a priori je suis conforme à l’arborescence de ta doc
image

j’ai creer le HTMLDysplay
et j’ai ça qui s’affiche.
image

une idée?

merci

Helloo,
Change le nom du répertoire mytheme par montheme :yum:

Merci, les retours font toujours plaisir ! :yum:
C’est motivant pour améliorer et proposer d’autres menus à venir.

Cool que ça fonctionne avec le cache🙂

o top ca marche.
par contre bizarre mytheme c’est d’origine.

super pour les mobiles

Est il possible d’avoir de façon a ne pas le créer sur tous les design.
si je dis pas de bêtises, genre iframe?

mytheme, c’est un répertoire que tu as dû créer pour un autre menu j’imagine.
montheme est utilisé par plusieurs autres menus et c’est ce je mets comme répertoire dans mon code.
Une autre solution peut être de modifier le code si tu préfères garder mytheme…

Sinon pour la gestion par frame, je dois m’en occuper rapidement (comme je l’ai fait pour d’autres menus déjà)

Nouvelle version disponible avec la gestion de la navigation par frame :