Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

[tuto] Design - menu slide - corps scroll

Cette partie est réservée à l'utilisation de l'interface web pour smartphone et tablettes
GGR72700
Timide
Messages : 57
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 21 oct. 2019, 17:22

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 :?

GGR72700
Timide
Messages : 57
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 21 oct. 2019, 18:55

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

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 21 oct. 2019, 19:06

la couleur doit changé
0 gris
< 1 couleur
le state = nombre aussi
mais pas encore l'icône

c'est prévu

mib68
Timide
Messages : 57
Inscription : 01 févr. 2018, 17:36

Re: [tuto] Design - menu slide - corps scroll

Message par mib68 » 21 oct. 2019, 19:53

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

mib68
Timide
Messages : 57
Inscription : 01 févr. 2018, 17:36

Re: [tuto] Design - menu slide - corps scroll

Message par mib68 » 21 oct. 2019, 19:59

Bon pour les icones j'ai compris c'est les nom des icones de base dans jeedom

GGR72700
Timide
Messages : 57
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 21 oct. 2019, 20:04

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

GGR72700
Timide
Messages : 57
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 21 oct. 2019, 20:50

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

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 21 oct. 2019, 22:51

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

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>

GGR72700
Timide
Messages : 57
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 22 oct. 2019, 10:02

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

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 22 oct. 2019, 16:40

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

mib68
Timide
Messages : 57
Inscription : 01 févr. 2018, 17:36

Re: [tuto] Design - menu slide - corps scroll

Message par mib68 » 22 oct. 2019, 17:25

mib68 a écrit :
21 oct. 2019, 19:53
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
Image design flottant.jpg
Image design flottant.jpg (228.95 Kio) Consulté 274 fois
Bonjour winhex,

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

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 22 oct. 2019, 18:07

je t'avais pas vu désolé
comment mettre le menu vertical ?
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é
la Taille du menu flottant ainssi que son emplacement

poxition X : 0
position Y : 0
largeur px : 7200
Hauteur px : 45
je ne comprend pas à quoi sert et vers quoi doit pointer name_design
les icones du 2eme screen
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
....

mib68
Timide
Messages : 57
Inscription : 01 févr. 2018, 17:36

Re: [tuto] Design - menu slide - corps scroll

Message par mib68 » 22 oct. 2019, 18:15

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

GGR72700
Timide
Messages : 57
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 22 oct. 2019, 18:16

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

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 22 oct. 2019, 19:13

mib68 a écrit :
22 oct. 2019, 18:15
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
tu es en v3 ?
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;
}
oui aussi justement c'est de cette maniére que je pensais procedé

mib68
Timide
Messages : 57
Inscription : 01 févr. 2018, 17:36

Re: [tuto] Design - menu slide - corps scroll

Message par mib68 » 22 oct. 2019, 20:10

winhex a écrit :
22 oct. 2019, 19:13
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
tu es en v3 ?
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 " \ "

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 22 oct. 2019, 20:31

ca doit etre la v4 alors !
oui c'est normal les \

mib68
Timide
Messages : 57
Inscription : 01 févr. 2018, 17:36

Re: [tuto] Design - menu slide - corps scroll

Message par mib68 » 22 oct. 2019, 20:41

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

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 22 oct. 2019, 21:27

en esperant que d'ici la
se ne soit plus necessaire :D

pour l'instant j'zi trop de truc fonctionnel a 100%, chauffage, volet, presence, teleinfo, eau,...
Screenshot_2019-10-22-21-20-27-381-1.png
Screenshot_2019-10-22-21-20-27-381-1.png (154.1 Kio) Consulté 208 fois
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 :D
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

GGR72700
Timide
Messages : 57
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 23 oct. 2019, 09:11

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

Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invités