[tuto] Design - menu slide - corps scroll
Re: [tuto] Design - menu slide - corps scroll
Oui ok c'est effectivement plus simple. Je vais me faire un virtuel "resumé" qui regroupera tout ce qui m'interrese et sera lié au design. au final, c'est sans doute beaucoup plus simple que de se servir du résumé de jeedom. J'aurai du refléchir un peu avant de poser cette question
Re: [tuto] Design - menu slide - corps scroll
Je viens de te relire et comprendre que dans une version de jeedom à jour le changement d icône sur le menu flottant comme dans tes screenshot ne fonctionne pas ? C est bien ça ?
Car j ai bien fait mon virtuel, appliqué ton widget et ça fonctionne impeccable sur le Dashboard par contre rien ne change dans la partie design alors que j ai bien mis le bon nom dans le widget (VR en design name).
Envoyé de mon iPhone en utilisant Tapatalk
Car j ai bien fait mon virtuel, appliqué ton widget et ça fonctionne impeccable sur le Dashboard par contre rien ne change dans la partie design alors que j ai bien mis le bon nom dans le widget (VR en design name).
Envoyé de mon iPhone en utilisant Tapatalk
Re: [tuto] Design - menu slide - corps scroll
la couleur doit changé
0 gris
< 1 couleur
le state = nombre aussi
mais pas encore l'icône
c'est prévu
0 gris
< 1 couleur
le state = nombre aussi
mais pas encore l'icône
c'est prévu
Re: [tuto] Design - menu slide - corps scroll
Bonsoir je prend la conversation en cours mais je n'arrive pas à mettre le menu vertical que tu as dans tes Screenshot,
Il permet de naviguer entre les sections c'est bien cela ?
Et dans les paramètres optionnel fa mouvement est à remplacer par quoi pour avoir les icone lumières volets, ect ???
Je kiff ton design mais je n'y comprend pas grand chose
Il permet de naviguer entre les sections c'est bien cela ?
Et dans les paramètres optionnel fa mouvement est à remplacer par quoi pour avoir les icone lumières volets, ect ???
Je kiff ton design mais je n'y comprend pas grand chose
Re: [tuto] Design - menu slide - corps scroll
Bon pour les icones j'ai compris c'est les nom des icones de base dans jeedom
Re: [tuto] Design - menu slide - corps scroll
Bon alors moi ça ne fonctionne pas pour les icônes résumé. Pour mes volets j ai fait un virtuel qui me donne pour valeur 9 (9 volets ouverts) mais je me retrouve quand même avec du gris... et je n ai pas le state non plus...
Par contre l affichage de ce virtuel donne bien le bon rendu sur le Dashboard.
On est bien d accord que pour que cela fonctionne il suffit de mettre le design name égal à ce qu il y a dans le code du menu flottant:
StateVR donne VR en paramètre additionnel dans le widget de mon virtuel ?
Merci
Envoyé de mon iPhone en utilisant Tapatalk
Par contre l affichage de ce virtuel donne bien le bon rendu sur le Dashboard.
On est bien d accord que pour que cela fonctionne il suffit de mettre le design name égal à ce qu il y a dans le code du menu flottant:
StateVR donne VR en paramètre additionnel dans le widget de mon virtuel ?
Merci
Envoyé de mon iPhone en utilisant Tapatalk
Re: [tuto] Design - menu slide - corps scroll
Bon je vais reprendre ce que j ai fait pour avoir un résumé fonctionnel et si jamais tu vois ou j ai merde je suis preneur:
1- j ai fait le design avec un html “menu flottant”
2-j ai créé le virtuel type numérique qui compte l état de mes volets ouverts
3-j ai créé un widget type info numeric avec le code html que tu as donné
4-j ai appliqué ce widget à l info numérique de mon virtuel en ajoutant les 3 arguments spécifiques (binaire off, binaire on et design name). Design name: VR dans mon cas vu que dans le code html du menu j ai trouvé “stateVR”.
Et la ca reste gris alors que la valeur de mon widget est à 7... une idée? Qu est ce que j ai raté ???
A plus
Guillaume
Envoyé de mon iPhone en utilisant Tapatalk
1- j ai fait le design avec un html “menu flottant”
2-j ai créé le virtuel type numérique qui compte l état de mes volets ouverts
3-j ai créé un widget type info numeric avec le code html que tu as donné
4-j ai appliqué ce widget à l info numérique de mon virtuel en ajoutant les 3 arguments spécifiques (binaire off, binaire on et design name). Design name: VR dans mon cas vu que dans le code html du menu j ai trouvé “stateVR”.
Et la ca reste gris alors que la valeur de mon widget est à 7... une idée? Qu est ce que j ai raté ???
A plus
Guillaume
Envoyé de mon iPhone en utilisant Tapatalk
Re: [tuto] Design - menu slide - corps scroll
le cache widget ?
sinon tu as tous compris
(tu ne parles pas des couleurs apres l'icone)
sinon revoir l'image sur github a la fin
binaire_on = icon,couleur
https://github.com/ajja17/Design/tree/master/Portable
sinon mon widget VR actuel que pour volet en attendant et plus facile a comprendre
sinon tu as tous compris
(tu ne parles pas des couleurs apres l'icone)
sinon revoir l'image sur github a la fin
binaire_on = icon,couleur
https://github.com/ajja17/Design/tree/master/Portable
sinon mon widget VR actuel que pour volet en attendant et plus facile a comprendre
Code : Tout sélectionner
<div class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<center>
<a onclick="#OnClick#" style="text-decoration : none;">
<span class="iconCmd#id#" style="font-size: 25px;margin-left: 3px;"></span>
<span class="state#id#" style="font-family: 'Roboto-Regular';font-size: 15px;vertical-align: top;margin-left: 5px"></span> #unite#
<span style="text-align: left;font-weight: bold;font-size : 10px;#hideCmdName#">#name_display#</span></a>
</center>
<script>
jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .state#id#,.stateVR').empty().append(_options.display_value);
if (_options.display_value == 0 ) {
$(".state#id#").css('color', '#e6e6e6');
$(".stateVR").css('color', '');
$(".iconCmd#id#").empty().append('<i class="jeedom-volet-ferme" style="color:#e6e6e6;"</i>');
$(".iconCmdVR i").removeClass('jeedom-volet-ouvert').addClass('jeedom-volet-ferme').css('color','');
}else if (_options.display_value >= 1 ) {
$(".state#id#,.stateVR").css('color', '#CDDC39');
$(".iconCmd#id#").empty().append('<i class="jeedom-volet-ouvert" style="color:#CDDC39;"</i>');
$(".iconCmdVR i").removeClass('jeedom-volet-ferme').addClass('jeedom-volet-ouvert').css('color','#CDDC39');
}
//
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Re: [tuto] Design - menu slide - corps scroll
c'est bon !!! j'ai enfin trouvé et ça fonctionne nikel.
la subtilité pour que celà fonctionne c'est qu'il faut avoir quelque part dans le design ce virtuel d'affiché. du coup, quand je l'ai mis sur la section tableau de bord, ça a résolu le probleme et l'affichage s'est fait correctement dans le menu flottant.
Petite question ou plutot demande d'amélioration si c'est possible:
plutot que d'avoir un fond blanc partout, serait'il possible d'avoir un fond different (idéalement personnailable) par section ? celà permettrait de mettre en forme plus rapidement le design car pour le moment a part placer les objet en calculant leur position exacte c'est un peu galère...
mais bon, j'en demande peut etre un peu trop.
j'ai essayé de changer la hauteur du menu pour faire toute la hauteur du design mais après c'est galère pour entrer en mode edition.
a plus
Guillaume
la subtilité pour que celà fonctionne c'est qu'il faut avoir quelque part dans le design ce virtuel d'affiché. du coup, quand je l'ai mis sur la section tableau de bord, ça a résolu le probleme et l'affichage s'est fait correctement dans le menu flottant.
Petite question ou plutot demande d'amélioration si c'est possible:
plutot que d'avoir un fond blanc partout, serait'il possible d'avoir un fond different (idéalement personnailable) par section ? celà permettrait de mettre en forme plus rapidement le design car pour le moment a part placer les objet en calculant leur position exacte c'est un peu galère...
mais bon, j'en demande peut etre un peu trop.
j'ai essayé de changer la hauteur du menu pour faire toute la hauteur du design mais après c'est galère pour entrer en mode edition.
a plus
Guillaume
Re: [tuto] Design - menu slide - corps scroll
ah pas pensé à ça . une évidence qui finalement n'en est pas une.
perso j'ajoute un html pour fond
profondeur 0
position X à proximative pour commencer
mais se sera 5 10,15,..
largeur 360
hauteur de ton choix au max
avec couleur du html ou via code
Provisoire
<div style="height:100%;background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);">
ya un projet normalement dans les 15 jours
que le background intégré au code menu
https://undsgn.com/uncode/homepages/creative-landing/
sans le côté mouvement parralax
perso j'ajoute un html pour fond
profondeur 0
position X à proximative pour commencer
mais se sera 5 10,15,..
largeur 360
hauteur de ton choix au max
avec couleur du html ou via code
Provisoire
<div style="height:100%;background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);">
ya un projet normalement dans les 15 jours
que le background intégré au code menu
https://undsgn.com/uncode/homepages/creative-landing/
sans le côté mouvement parralax
Re: [tuto] Design - menu slide - corps scroll
Bonjour winhex,mib68 a écrit : ↑21 oct. 2019, 19:53Bonsoir je prend la conversation en cours mais je n'arrive pas à mettre le menu vertical que tu as dans tes Screenshot,
Il permet de naviguer entre les sections c'est bien cela ?
Et dans les paramètres optionnel fa mouvement est à remplacer par quoi pour avoir les icone lumières volets, ect ???
Je kiff ton design mais je n'y comprend pas grand chose
Je suis désolé mais je comprend pas comment mettre le menu vertical ? (il sert à naviguer entre les différentes sections ?)
Et dans les paramètres facultatif du widget je ne comprend pas à quoi sert et vers quoi doit pointer "name_design (pour report menu flottant) avec pour préfix state et iconCmd" j'ai mis en valeurs le nom de mon design
Merci d'avance
Re: [tuto] Design - menu slide - corps scroll
je t'avais pas vu désolé
la Taille du menu flottant ainssi que son emplacement
poxition X : 0
position Y : 0
largeur px : 7200
Hauteur px : 45
on pour widget (numérique) icon résumé
lorsque tu mets Mouv avec pour parametre avancé name_design
cela va faire un report de la valeur et de la couleur au menu flottant
regarde ligne 203,204 du menu flottant iconCmdMouv et stateMouv
https://github.com/ajja17/Design/blob/m ... ttant.html
donc le reste en name_design
Prez = pour presence
Porte = pour porte
....
c'est un html (code à coller) qui intégre chaque section (bandeau de 360px de large avec différente couleur) + le menu flottant que tu as entourécomment mettre le menu vertical ?
la Taille du menu flottant ainssi que son emplacement
poxition X : 0
position Y : 0
largeur px : 7200
Hauteur px : 45
les icones du 2eme screenje ne comprend pas à quoi sert et vers quoi doit pointer name_design
on pour widget (numérique) icon résumé
lorsque tu mets Mouv avec pour parametre avancé name_design
cela va faire un report de la valeur et de la couleur au menu flottant
regarde ligne 203,204 du menu flottant iconCmdMouv et stateMouv
https://github.com/ajja17/Design/blob/m ... ttant.html
donc le reste en name_design
Prez = pour presence
Porte = pour porte
....
Re: [tuto] Design - menu slide - corps scroll
J'ai mis le code html https://github.com/ajja17/Design/blob/m ... ttant.html mais je n'ai que le menu du haut qui s'affiche pas le vertical
Re: [tuto] Design - menu slide - corps scroll
Merci Winhex,
Entre temps j'ai trouvé une petite astuce dans le design de pascal pour mettre une image de 360px de large et la recopier dans toutes les sections.
tu te fais une image à la taille d'une section et tu mets:
.div_displayObject {
background: url("plugins/widget/core/images/BackgroundV2.jpg") repeat-x;
}
ça fonctionne aussi pas trop mal et c'est facile à remplacer
Entre temps j'ai trouvé une petite astuce dans le design de pascal pour mettre une image de 360px de large et la recopier dans toutes les sections.
tu te fais une image à la taille d'une section et tu mets:
.div_displayObject {
background: url("plugins/widget/core/images/BackgroundV2.jpg") repeat-x;
}
ça fonctionne aussi pas trop mal et c'est facile à remplacer
Re: [tuto] Design - menu slide - corps scroll
tu es en v3 ?mib68 a écrit : ↑22 oct. 2019, 18:15J'ai mis le code html https://github.com/ajja17/Design/blob/m ... ttant.html mais je n'ai que le menu du haut qui s'affiche pas le vertical
sinon je viens d'essayer rapidement sur un autre jeedom v3 ça marche une fois la page actualisé
Code : Tout sélectionner
.div_displayObject {
background: url("plugins/widget/core/images/BackgroundV2.jpg") repeat-x;
}
Re: [tuto] Design - menu slide - corps scroll
tu es en v3 ?winhex a écrit : ↑22 oct. 2019, 19:13J'ai mis le code html https://github.com/ajja17/Design/blob/m ... ttant.html mais je n'ai que le menu du haut qui s'affiche pas le vertical
sinon je viens d'essayer rapidement sur un autre jeedom v3 ça marche une fois la page actualisé
Non je suis pas en V3 je suis en v4.0.24 es ce que c'est normal qu'entre la ligne 200 et 256 il y es partout des " \ "
Re: [tuto] Design - menu slide - corps scroll
ca doit etre la v4 alors !
oui c'est normal les \
oui c'est normal les \
Re: [tuto] Design - menu slide - corps scroll
Ok ca marche c'est vrai que depuis que je suis passer en V4, j'ai complètement oublié qu'elle n'es pas encore réellement sortie en stable.
Tien moi au courant si jamais tu fait une mise à jour pour la V4
Tien moi au courant si jamais tu fait une mise à jour pour la V4
Re: [tuto] Design - menu slide - corps scroll
en esperant que d'ici la
se ne soit plus necessaire
pour l'instant j'zi trop de truc fonctionnel a 100%, chauffage, volet, presence, teleinfo, eau,... 2 rasp avec peu de ressource (sur powerbank avec sd de plus de deux ans) l'un gpio & teleinfo,... et l'autre genre zwave equipements n'hexistant plus
donc tous reprendre a la main dans le moindre detail c'est au minimum au printemps
j'ai plus de temps pour jouer avec design et la v4 sera plus evoluè ou la v5 sortie en beta
je l'ai deja testé cette v4 et je préfère attendre et y aller en douceur
ps : j'avais fait pareil avec la v3
se ne soit plus necessaire
pour l'instant j'zi trop de truc fonctionnel a 100%, chauffage, volet, presence, teleinfo, eau,... 2 rasp avec peu de ressource (sur powerbank avec sd de plus de deux ans) l'un gpio & teleinfo,... et l'autre genre zwave equipements n'hexistant plus
donc tous reprendre a la main dans le moindre detail c'est au minimum au printemps
j'ai plus de temps pour jouer avec design et la v4 sera plus evoluè ou la v5 sortie en beta
je l'ai deja testé cette v4 et je préfère attendre et y aller en douceur
ps : j'avais fait pareil avec la v3
Re: [tuto] Design - menu slide - corps scroll
Salut Winhex,
Bon ça commence à avoir de la gueule ce petit design.
Je me pose une question, je ne sais pas si c'est compliqué à faire mais en tout cas je n'y arrive pas seul de mon coté:
est il possible de cacher la barre d'icone après xxx secondes si on ne clique pas dessus ?
et si oui, serait il possible de la faire apparaitre disparaitre avec un petit effet "translateX" ?
après ça c'est promis j'arrete de demander la lune .
Pour info, j'ai rajouter mes petites fonctions smooth scroll pour passer d'une section à l'autre et franchement ça le fait grave !!! je kiff
bonne journée
Guillaume
Bon ça commence à avoir de la gueule ce petit design.
Je me pose une question, je ne sais pas si c'est compliqué à faire mais en tout cas je n'y arrive pas seul de mon coté:
est il possible de cacher la barre d'icone après xxx secondes si on ne clique pas dessus ?
et si oui, serait il possible de la faire apparaitre disparaitre avec un petit effet "translateX" ?
après ça c'est promis j'arrete de demander la lune .
Pour info, j'ai rajouter mes petites fonctions smooth scroll pour passer d'une section à l'autre et franchement ça le fait grave !!! je kiff
bonne journée
Guillaume
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité