Widget - Tableau - CSS Jeedom v3.1.x

[winhex]

demandé une documentation (officiel) aie aie
il y a un manque de doc donc sur du secondaire.

dommage un sujet qui me plaît! et au vu du nombre de personne l'ayant lu tu n'es pas seul !
tu as essayé !important en fin

tu sais il y a 2 ans la customisation été réclamé et à l'époque nada . pas envisagée, secondaire le rendu visuel.
à l'époque c'était une grande déception pour moi
tout comme toi
mais avec le recul c'est peut être plus complexe que de faire un système code,plug,.. coerant.
alors pourquoi avoir donner la possibilité?
(tu vois l'évolution d'une negation on passe à une possibilité )
je m'avance pour eux
si tu entres dans la customisation tu t'engages dans un sentier non balisé avec son lot de pourquoi et entre la personnalisation script/css affichage, widget et thème va t'en falloir des pourquoi, comment faire! donc ils ne veulent pas d'innombrables question/ticket par manque de temps. (puisque documentation = officiel)

perso cette fonction tableau que j'ai testé sans custom sans lire le sujet sur le forum qui aide maintenant)
je le trouve intuitif. +1 (mais je ne représente pas vraiment se qui se fait de plus représentatif)
le temps oeuvre pour toi et en attendant "priorise" construit ta domotique. il y a tellement de sujet pour commencer mais soit sur ça viendra (comme beaucoup de négation,impossible) mais pas de manières officiel (pour l'instant).

passe une bonne journée

[racouet]

Super motivant cette réponse. Merci, très instructif ( et là je suis sympathique, bienveillant et accueillant). Donc, comme le post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée....

Merci pour votre aide et votre soutien, surtout pour vos explications constructives.

[i-magin]

Le CSS ?
Je n'en connaissais que le nom et je me suis dit qu'il fallait que je regarde de plus près pour améliorer mon dashboard

Houlà ! Des sites Internet sur ce sujet sont nombreux et très complets !
Mais du coup, trop "complets" et je dirais : un peu trop "impressionnants"
Ces sites sont souvent destinés à ceux qui veulent créer un site Web en utilisant HTML et CSS

La première réaction peut être le rejet et nous conduire à abandonner devant trop de complexité... mais il ne faut pas baisser les bras, car dans les faits c'est bien plus simple que l'on ne croit

En fait, pour ce qui nous concerne, il ne faut retenir que les "propriétés" de ce type (*) :
text-align:center (centrer le texte)
color:white (couleur "blanc" des caractères)
background-color:green (couleur "vert" de fond)
height : 38px (pour fixer la hauteur)
width : 70px (pour fixer la largeur)
etc
(ce ne sont que des exemples, car il existe bien d'autres propriétés)

Comme on le voit, c'est simple : une "propriété" + deux points + une valeur
Si l'on veut cumuler les "propriétés", on les sépare par un point virgule
Exemple : text-align:center;color:lime;border:1px solid green;height : 38px

Et où mettre ses propriétés ?
Tout ceux qui auront tenté de créer un tableau l'auront trouvé : dans configuration avancée d'un équipement/disposition, on trouve des zones qui accueillent le code CSS (pour le style général et pour le style de chaque case)

En conclusion, c'est assez simple... avec quelques informations sur la méthode

(*) Du coup, mes clés de recherche sur Internet sont de ce style : "largeur en CSS"
et j’obtiens plus directement la propriété à utiliser

[racouet]

Merci pour cet encouragement, je me suis aussi acharné, et j'ai (re-re-re-re)fait un petit tableau de surveillance de mon chauffage électrique. J'ai compris que la case Style du tableau (CSS) va concerner le style général du tableau, comme ça : font-weight: bold ; font:15px; border:2px; border-style:solid; border-color:#FFFFFF; height:100px;; text-align: center ce qui va se traduire au niveau du tableau avec des polices en gras, de taille de 15 pixels avec des bordures solides (trait plein) de 2 pixels de large et de couleur blanche.
La case spécifique des cases va concerner le style particulier dans les cellules, comme par exemple le centrage vertical du texte ou horizontal (text-align:middle ou vertica-align: center.

reste les cases CSS sous chaque case, elle permet de changer le style de la cellule. par exemple arrondir le coin supérieur gauche de la bordure de la cellule : border-left-top-radius:10px ou alors de changer sa couleur, ...

facile, Google is your friend but google is a pain in the a..

C'est juste ce que je demandais aux admins. rien de plus, des trucs, juste pour faire un petit tableau qui convient. Par contre en cas de crash, prévoir du temps pour le refaire, sauf si on a une bonne sauvegarde.

Capture.PNG (23.77 Kio) Consulté 6071 fois

Donc je suis ravi d'avoir fait ce tableau, et merci encre aux admins pour leur aide constructive.

[i-magin]

A partir du moment où l'on a quelques explications de base sur l'utilisation du CSS dans les tableaux Jeedom, on peut se lancer et découvrir par soi-même .... et partager son expérience sur le forum

Ainsi, j'ai constaté que modifier la hauteur de la 1ère case d'une ligne modifiera la hauteur de toutes les cases... ce qui est très logique

Je profite de ce post pour signaler une petite difficulté : l'insertion d'une ligne ou d'une colonne dans un tableau
Si le glisser-déposer est disponible au niveau des commandes d'un équipement (ou en passant par le résumé domotique), ce n'est pas le cas pour les lignes et colonnes dans l'onglet disposition (bien sûr les commandes peuvent être positionnées au niveau de la cellule que l'on veut)

En mode modification du dashboard, l'ajout de colonne ou de ligne ne permet pas l'insertion
Il faut donc ajouter une ligne ou colonne, puis déplacer une à une les commandes. Le drag & drop n'est pas possible pour les "titres" (exemple de ce que j'appelle "titre" : "Température" sur le post précédent)

En restant sur l'exemple du tableau du post précédent, insérer une colonne après "température", prendra du temps pour décaler toutes les valeurs des 6 colonnes suivantes

Peut-être n'y a t'il pas de solution, il faut alors bien "penser" son tableau avant de le constituer

[i-magin]

Encore une petite question

Voici le tableau que j'ai constitué :

tableau de bord 2.PNG (96.96 Kio) Consulté 6053 fois

Concernant le chauffage, j'utilise un module Qubino Fil Pilote ZMNHJA2 sur chaque radiateur des bureau, chambre, SDB
Pour le salon, cuisine, entrée les radiateurs sont pilotés par un seul Qubino Rail Din ZMNHUD1
C'est pourquoi, j'ai mentionné l'état de ce module uniquement dans la cellule "Chauffage/salon"

Pour reporter l'état du module dans les deux cellules Chauffage de l'entrée et de la cuisine, je devrais dupliquer la commande dans le panneau équipement
Ne serait-il pas possible de dupliquer une commande au niveau du panneau "disposition" ?

Mais je conçois que ma suggestion ne soit guère utilisée et qu'elle génère trop de développement

[racouet]

Désolé, je suis incompétent, mais en tout cas il est chouette ton tableau. Les icones sont pas mal.

[i-magin]

Merci !

Concernant les icônes, parmi les nombreux sites Internet qui en proposent, j'ai trouvé Flaticon
On y trouve bon nombre d'icônes gratuits, avec la possibilité de choisir :
- le format (PNG, SVG, etc) dont PSD (pour modification avec Photoshop)
- la taille en pixels (32 pour mon tableau)
- parfois différentes couleurs de composition

En s'inscrivant, il est possible de modifier en ligne la couleur des différents éléments de l'icône

[drs]

Bonjour

Je suis d'accord qu'une doc CSS n'est pas appropriée, car effectivement cela existe (et en plein d'exemplaires partout sur le net). Mais une petite doc sur les tableaux serait pourtant bien, ne serait-ce que pour expliquer comment ça fonctionne. Par exemple, j'ai mis 1h à comprendre comment mettre les valeurs dans le tableau. C'est effectivement simple, mais il fallait comprendre.
Pour la personnalisation en CSS, pourquoi ne pas imaginer prendre un exemple de tableau simple, la syntaxe pour mettre un texte en gras, en couleur, et un autre pour le positionner à gauche, à droite, et enfin un dernier pour la taille des cellules.
En gros, juste une petite doc d'explication de fonctionnement général, avec un ou deux exemples de css, reste à l'utilisateur à peufiner tout ça au besoin (un peu comme la doc des widgets)

[Anonyme]

Contenu supprimé à la demande de son auteur

[drs]

Bonjour,

Oui, déjà dit ..... ça va être fait.

Cool, je la lirais avec attention alors

Merci de ta réponse

[racouet]

Bonjour à tous,

Une petite question. J'ai voulu m'inspirer du tableau présenté dans le blog concernant les tableaux. J'ai créé un slider On-Off avec le plugin Widget et on soucis est que le slider une fois sur la commande On/Off, apparait bien mais est entouré d'une trame de couleur bleue pastel, comme ceci :

Capture.PNG (17.99 Kio) Consulté 5938 fois

.

J'utilise des dessins créés sou Corel Draw et exportés en pNG avec des fonds transparents et il ne devrait pas y avoir ce type de trame. J'ai la même chose avec les badges. Si quelqu'un connait la cause de cette trame?
Merci

[Theduck38]

Encore une petite question

tableau de bord 2.PNG

Magnifique...
Je suppose que pour customiser l'icône en fonction de la valeur il faut mettre du code php dans la case 'style de la case css' ?
Je suis arrivé à faire des contenus comme je voulais, mais là c'est encore plus puissant... tu pourrais mettre un exemple de code STP ?

Et au passage, merci à ceux qui ont posté des exemples... ça permet de démarrer !

[i-magin]

Pour l'instant, je n'ai pas beaucoup de temps, mais promis je partage d'ici la semaine prochaine

[Theduck38]

Merci (d'avance) !

[Antoinekl1]

Bonjour

est il possible de fusionner plusieurs cellules ? avec colspan ou rowspan, je ne trouve pas la bonne syntaxe

[Theduck38]

Je n'obtiens pas les mêmes résultats entre Firefox et IE. Tableau nickel sous IE, et pas bon sous Firefox. Ça m'apprendra à dire et à redire du mal de Microsoft !
Il y a des différences connues entre les navigateurs à un simple niveau de tracé de bordures ?

[lanfeuste]

Bonjour,
Je ne suis pas un crack en informatique mais avec un peu de patience on arrive à quelque chose(le site du premier message donne suffisamment d'info). Et ça permet des choses plutôt sympa.
Quelques tuyaux issus de mes aventures(parfois simpliste ) :
- le créateur de tableau est dans configuration avancée (d'un équipement) onglet disposition (J'ai cherché la fonction un bon moment .... )
- Après avoir défini le nombre de ligne/colonnes : sauvegarder puis réouvrir la fenêtre pour mettre à jour l'affichage
- lorsque l'on définit des propriétés spécifiques dans une case il faut tous redéfinir. Par exemple pour changer que la couleur il ne faut pas que définir la couleur de fond sinon il n'y aura pas de bordures (voir les bugs sur mon tableau des températures )
- penser au couleur prédéfini qui corresponde à la couleur en anglais ça évite de chercher #00000 en mettant simplement white

Bon je vais rajouter mes bordures.
Bon journée

[Theduck38]

Je n'obtiens pas les mêmes résultats entre Firefox et IE. Tableau nickel sous IE, et pas bon sous Firefox. Ça m'apprendra à dire et à redire du mal de Microsoft !
Il y a des différences connues entre les navigateurs à un simple niveau de tracé de bordures ?

...et mes problèmes viennent du (dé)zoom sous Chrome qui gère mal les bordures ! Donc même résultat partout, c'est rassurant.

[nicocha]

Bonjour
Le tableau ne semble pas disponible en mode mobile. Quelqu'un à il reussi?
Merci