Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Toute la communauté vous remercie

[S'inspirer] Postez votre Plan / Design

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Avatar de l’utilisateur
Theduck38
Actif
Messages : 1681
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Theduck38 » 27 févr. 2018, 19:06

Juste la présentation 'tableau' du virtuel.
Tu vas dans ton virtuel, "Configuration avancée" (en haut à droite), puis onglet 'disposition', sélectionner "tableau".
Ensuite tu choisis le nombre de lignes et de colonnes, tu sauves, tu sors de la configuration avancée, tu y reviens et tu auras un tableau paramétrable avec le nombre lignes / colonnes que tu as configuré.
-- TD38 --
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom - Rfxcom Rfxtrx433 - Clef Sigma UZB 'Z-wave plus'
Mon matériel en détails

jeewawa
Timide
Messages : 244
Inscription : 24 oct. 2014, 23:41

Re: [S'inspirer] Postez votre Plan / Design

Message par jeewawa » 27 févr. 2018, 22:41

Ok, merci de ton aide.
J'ai bien réussi à créer le tableau mais je n'arrive pas à faire correspondre les colonnes.
C'est sûrement parce que je fais ça sur tablette, il doit me manquer quelque chose par rapport à une version PC car je ne vois pas comment positionner les informations dans le tableau.
Je vais devoir attendre de voir ce que ça donne sur PC.
Smart Zwave avec RFXCom, RfPlayer et Teleinfo GCE ELECTRONICS

Avatar de l’utilisateur
Theduck38
Actif
Messages : 1681
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Theduck38 » 28 févr. 2018, 00:30

Dans la case en haut à gauche du tableau, tu as des petits rectangles qui correspondent à tes commandes. Il faut les déplacer dans les cases où tu veux les voir. Probable que le drag and drop soit plus compliqué sur tablette !
-- TD38 --
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom - Rfxcom Rfxtrx433 - Clef Sigma UZB 'Z-wave plus'
Mon matériel en détails

jeewawa
Timide
Messages : 244
Inscription : 24 oct. 2014, 23:41

Re: [S'inspirer] Postez votre Plan / Design

Message par jeewawa » 28 févr. 2018, 13:07

Oui c'est ce que j'ai essayé, mais même avec une tablette qui dispose d'un clavier, ça ne fonctionne pas.
En tout cas ça a l'air plutôt user friendly.
Le plus difficile sera pour les CSS ...
Smart Zwave avec RFXCom, RfPlayer et Teleinfo GCE ELECTRONICS

Florian33
Timide
Messages : 46
Inscription : 21 janv. 2018, 14:17

Re: [S'inspirer] Postez votre Plan / Design

Message par Florian33 » 04 mars 2018, 12:28

Bonjour à tous !

Petites questions car je vois pas par où commencer pour avoir de tels rendus ne comprenant pas la logique...

Quelle différence exactement entre dashboard, vue et design ?
Les barres de menus etc que je peux voir sur certains design, c'est fait par les zones ?
J'ai pu voir un plugin thèmes dans des tuto mais... introuvable :/

Concernant les widgets, si j'ai bien compris c'est en gros la base de données des visuels.
Concernant les virtuels, on peut créer un équipement virtuel, cela ok. Par contre si par exemple je veux un visuel sur le dashboard reprenant toutes les possibilités d'un wallplug (etat avec action on/off, puissance et conso) et un design avec juste un bouton d'état avec action on/off... je dois m'y prendre comment? par les virtuels?

Merci par avance !

Avatar de l’utilisateur
Theduck38
Actif
Messages : 1681
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Theduck38 » 04 mars 2018, 19:02

Bonjour,

Quelques réponses...
- Dashboard : vue en "tuiles' ou tout s'empile verticalement, selon la définition 'parent / enfant' de tes objets
- Vue : on peut y mettre les éléments que l'on souhaite (en s'affranchissant de la notion d'objet), mais la présentation reste relativement simple et peu customisable
- Design : là le but est de jouer sur des codes html / css pour obtenir vraiment l'aspect visuel que l'on veut.
- Widget : c'est une mise en forme en html / css (/ javascript) qui permet de présenter d'une certaine façon une commande. C'est applicable à la fois dans les vues, dashboard, design. Tu as des widgets déjà faits par certains, ou Jeedom peut t'aider à en créer un.

Dans tous les cas, quand tu commences à toucher au design et aux widgets, il faut avoir des notions de programmation et surtout de html / css. Ou apprendre au fur et à mesure !

Les boutons en haut des designs sont faits à partir de code html / css... vas voir la présentation de F$B33 pour des super tutoriels détaillés.
-- TD38 --
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom - Rfxcom Rfxtrx433 - Clef Sigma UZB 'Z-wave plus'
Mon matériel en détails

Avatar de l’utilisateur
Zitoune
Actif
Messages : 691
Inscription : 30 déc. 2014, 12:02

Re: [S'inspirer] Postez votre Plan / Design

Message par Zitoune » 05 mars 2018, 07:50

Florian33 a écrit :
04 mars 2018, 12:28

J'ai pu voir un plugin thèmes dans des tuto mais... introuvable :/
Ce plugin n'existe plus (obsolète), le mode design fait 80% de ce plugin de manière native.
En effet il manque la notion de menu dans un cadre. Mais franchement tu arrives a t'en sortir sans.

Bonne journée
Dernière édition par Zitoune le 05 mars 2018, 09:44, édité 1 fois.
Béta-Testeur, avec une VM de production Debian 9, sous Proxmox qui tourne sur un fanless I5. Et d'autre VM pour les tests.
Les protocoles >> OpenZWave, RfxCom, Orvibo (Pour l'IR), Xioami

Florian33
Timide
Messages : 46
Inscription : 21 janv. 2018, 14:17

Re: [S'inspirer] Postez votre Plan / Design

Message par Florian33 » 05 mars 2018, 08:22

Ok ca marche! merci à vous 2!

Pour le coté html/css pas de souci, je vois parfaitement comment faire la chose, je fais donc cela avec des zones. Par contre, placer des boutons de lancement de scénario, lancer une action à partir d'une présentation personnalisée de l'icone ? C'est en créant un widget et en le liant à l'action (config commande > affichage) ? Ou peut-on avoir plusieurs affichages pour une meme commande ? car je vois dashboard, design et vue toujours liés obligatoirement à une commande :/

benj29
Actif
Messages : 1510
Inscription : 26 mars 2017, 09:57

Re: [S'inspirer] Postez votre Plan / Design

Message par benj29 » 05 mars 2018, 08:24

Oui ça se passe dans les options. Tu peux personnaliser en avancée avec un if adapté. Perso j'ai préféré doubler avec des virtuels reprenant les commandes informations d'origine et en créant une catégorie d'objet en fonction de mes UI.

Envoyé de mon Moto G (5S) Plus en utilisant Tapatalk


Avatar de l’utilisateur
tot0f
Timide
Messages : 345
Inscription : 23 févr. 2015, 08:36

Re: [S'inspirer] Postez votre Plan / Design

Message par tot0f » 07 mars 2018, 14:59

Petit update de mon côté... Même si j'ai conservé mes design en mode plan (en mode designs secondaires), je commence à avoir trop de modules et ça devient un peu bordélique sur un iPad (et long à ouvrir)... Voici mes nouveaux designs plus simples et plus WAF :
Capture d’écran 2018-03-07 à 14.52.36.jpg
Capture d’écran 2018-03-07 à 14.52.36.jpg (447.98 Kio) Consulté 477 fois
Capture d’écran 2018-03-07 à 14.52.48.jpg
Capture d’écran 2018-03-07 à 14.52.48.jpg (428.56 Kio) Consulté 477 fois
Capture d’écran 2018-03-07 à 14.52.56.jpg
Capture d’écran 2018-03-07 à 14.52.56.jpg (409.11 Kio) Consulté 477 fois
Dernière édition par tot0f le 07 mars 2018, 15:01, édité 2 fois.
Jeedom sur PC dédié sous Debian (GSM + RFXcom433e + Zwave Aeotec Gen5) - Synology DS214Play (Surveillance Station)
40 modules Zwave / 25 modules RFXcom / Volets Somfy RTS / Logitech Harmony / Thermostat et Station Météo Netatmo

Avatar de l’utilisateur
tot0f
Timide
Messages : 345
Inscription : 23 févr. 2015, 08:36

Re: [S'inspirer] Postez votre Plan / Design

Message par tot0f » 07 mars 2018, 14:59

La suite :
Capture d’écran 2018-03-07 à 14.53.03.jpg
Capture d’écran 2018-03-07 à 14.53.03.jpg (413.66 Kio) Consulté 477 fois
Capture d’écran 2018-03-07 à 14.53.13.jpg
Capture d’écran 2018-03-07 à 14.53.13.jpg (425.27 Kio) Consulté 477 fois
Capture d’écran 2018-03-07 à 14.53.23.jpg
Capture d’écran 2018-03-07 à 14.53.23.jpg (432.98 Kio) Consulté 477 fois
Et voilà :)
Jeedom sur PC dédié sous Debian (GSM + RFXcom433e + Zwave Aeotec Gen5) - Synology DS214Play (Surveillance Station)
40 modules Zwave / 25 modules RFXcom / Volets Somfy RTS / Logitech Harmony / Thermostat et Station Météo Netatmo

Avatar de l’utilisateur
Theduck38
Actif
Messages : 1681
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Theduck38 » 07 mars 2018, 15:40

Sympa, c'est original !
-- TD38 --
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom - Rfxcom Rfxtrx433 - Clef Sigma UZB 'Z-wave plus'
Mon matériel en détails

benj29
Actif
Messages : 1510
Inscription : 26 mars 2017, 09:57

Re: [S'inspirer] Postez votre Plan / Design

Message par benj29 » 08 mars 2018, 00:24

Hello,

J'en profite pour mettre mon premier design des tablettes domotiques (Acer Iconia Tab10, deux sont montées au mur).

Ce n'est que l'écran résumé pour l'instant, mais maintenant que j'ai bien pris le temps de faire mes css, widgets et "designés" ce que je veux, ça va aller plus vite...

Autant sur un tél, le fond noir et écriture blanche est je trouve beaucoup plus lisible, autant sur les tablettes... c'est le contraire. Donc il m'a fallu tout reprendre !

Seul point manquant, transformer les 2 icônes garage/portail en forme de bouton (ce sont des infos sur l'état), j'ai mis une zone pour faire l'action mais j'aimerai un visuel bouton comme les autres. J'aimerai aussi mieux affiner mes boutons d'apk de la tablette (j'aimerai les rendre plus "smooth")

Image

Quand l'alarme est activée, les tablettes montrent ce design :

Image

Arnault
Timide
Messages : 212
Inscription : 16 sept. 2015, 14:58

Re: [S'inspirer] Postez votre Plan / Design

Message par Arnault » 08 mars 2018, 04:41

J’adore tes nouveaux designs benj29. C’est exactement le style que j’aimerais pour chez moi :) Félicitations !!!


Envoyé de mon iPhone en utilisant Tapatalk
JEEDOM en version stable via VMware ESXi
NUC Core i5, SSD 500 Go, 32 Go Ram
Z-Stick Z-wave Plus (Gen5) et RFPlayer
En pleine découverte de Jeedom :)

Avatar de l’utilisateur
dcjona
Actif
Messages : 916
Inscription : 16 juil. 2017, 11:06

Re: [S'inspirer] Postez votre Plan / Design

Message par dcjona » 08 mars 2018, 07:14

Super beau benj! Pour les points verts de résumés ce sont des Ping vers les appareils ?


Envoyé de mon iPhone en utilisant Tapatalk

benj29
Actif
Messages : 1510
Inscription : 26 mars 2017, 09:57

Re: [S'inspirer] Postez votre Plan / Design

Message par benj29 » 08 mars 2018, 08:01

Hello, merci.

Non pas que des pings.
Certains sont des OU de ping.
Pour les batteries c'est un widget 5 niveaux dont je fais le min pour avoir la batterie la plus faible.
Pour Jeedom c'est un OU de l'état des démons.
Pour capteurs, c'est un script qui vérifie la remontée dans les dernières minutes de mes capteurs.

Donc j'ai une caméra hors wifi, un nodemcu hors wifi et surtout un répéteur hs...

Envoyé de mon Moto G (5S) Plus en utilisant Tapatalk


Avatar de l’utilisateur
dcjona
Actif
Messages : 916
Inscription : 16 juil. 2017, 11:06

Re: [S'inspirer] Postez votre Plan / Design

Message par dcjona » 11 mars 2018, 10:07

Ma page d'accueil a un peu évolué aussi donc je vous la repost par plaisir :)
Pièces jointes
Capture.JPG
Capture.JPG (182.08 Kio) Consulté 278 fois

Avatar de l’utilisateur
dcjona
Actif
Messages : 916
Inscription : 16 juil. 2017, 11:06

Re: [S'inspirer] Postez votre Plan / Design

Message par dcjona » 11 mars 2018, 10:10

Ainsi que l'onglet sécurité.. toujours en cours de modif
Pièces jointes
Capture.JPG
Capture.JPG (162.17 Kio) Consulté 273 fois

Trallius
Timide
Messages : 5
Inscription : 22 févr. 2018, 11:52

Re: [S'inspirer] Postez votre Plan / Design

Message par Trallius » 11 mars 2018, 10:43

benj29 a écrit :
26 févr. 2018, 14:23
Trallius a écrit :
23 févr. 2018, 15:39
Bonjour benj29,

Débutant sous Jeedom depuis quelques semaines, mais ayant mis en place déjà pas mal de choses, je m'attaque maintenant au design iPhone et je vous avouerai que je trouve le votre excellent !!! Et j'ai du coup quelques questions :)

- Tous les cadres sont bien dans l'image de fond ou ce sont des contours de virtuel ?
- Tous les petits icônes (résumé, présence) sont fait comment ? (X virtuel pour X icônes ? ou 1 avec gestion de colonnes et lignes ?)
- Concernant les icônes justement, pouvez-vous me dire où vous les avez trouvé ? ils sont simple et je serais intéressé pour les utiliser :)
- Et la barre de menu du haut est gérée comment ? inclus dans le fond avec des liens ? ...

Merci d'avance pour votre réponse !
Salut, alors dans l'ordre.

Non les cadres viennent de l'excellent travail de FB33$. Chacun est redimensionnable. Je les ai juste modifié en fonction de mon utilisation : fond blanc, fond noir, avec titre, sans titre etc.

exemple : fond noir (téléphone) avec titre (ajoute un texte et mets ce code) :
Tu peux modifier l'épaisseur de l'ombre (3/3) ou sa couleur (255x3)
Pareil pour le titre (opacité à 0.8, 30 de haut)
Et pareil pour le corps du cadre (0x3 .5 d'opacité)

Code : Tout sélectionner

<div style=" width:100%; box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.5);">
                <div style=" height:30px; width:30px; position:absolute; margin-top:6px; margin-left:5px; opacity:0.8; max-width:100%; height:auto;">
                <i class="fa fa-lock" style="font-size:15px;color:white;"></i>
                </div>
                <div align=center style="color:rgba(255,255,255,0.8); font-size:16px; height:30px; background-color: rgba(0,0,0,0.6); padding-top:5px; font-family:Trebuchet MS; font-variant: small-caps; font-weight:normal;">
                <strong>Alarme</strong>
                </div>
                <div style="height:189px;  background-color: rgba(0,0,0,0.5);">
                
                </div>
</div>
qui donne le cadre alarme de la copie d'écran plus haut.

Par exemple un autre cadre que j'utilise pour mes tablettes domotiques en fond blanc (je t'ai mis des commentaires) :

Code : Tout sélectionner

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

<!-- cadre global --> 
<div style=" width:100%; box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.3);">

      <!-- icone à gauche --> 
      <div style=" height:30px; width:30px; position:absolute; margin-top:6px; margin-left:5px; opacity:0.8; max-width:100%; height:auto;">
	  <i class="icon meteo-nuage-soleil-pluie" style="font-size:20px;color:black;"></i>
      </div>
      
      <!-- barre de titre  --> 
      <div align=center style="color:rgba(0,0,0,1); font-size:20px; height:30px; background-color: rgba(0,0,0,0.2); padding-top:0px; font-family:Montserrat, Arial; font-variant: small-caps; font-weight:normal;">
      <strong>Météo & Today</strong>
      </div>
      
      <!-- carré de sélection pour le déplacer  --> 
      <div style="height:170px;  background-color: rgba(255,255,255,0.3);">
      </div>
  
</div>
qui donne ça :

Image

Pour travailler les couleurs rdv ici :
https://htmlcolorcodes.com/fr/tableau-de-couleur/

les petites icones ça dépend : soit je les avais dans mes virtuels, soit je les ai ajoutées.

J'ai trois sources :
- jeedom
dans ce cas tu mets ce code et tu choisis ton icone (son nom) :

Code : Tout sélectionner

<i class="icon techno-heating3" style="font-size:20px;color:white;"></i>
- awesome plus complet et google
tu fais le link adéquat puis tu peux utiliser :

Code : Tout sélectionner

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
et tu les appelles :

Code : Tout sélectionner

<i class="material-icons" style="font-size:20px;color:white;">ondemand_video</i>
<i class="	fa fa-video-camera-o" style="font-size:20px;color:red;"></i>
Plus d'info là :
https://www.w3schools.com/icons/icons_reference.asp

Même principe pour les polices :
https://fonts.google.com/?selection.fam ... i,900,900i

Et enfin pour le menu, du html qui appelle des icones... comme dit plus haut !

Code : Tout sélectionner

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="index.php?v=d&p=plan&plan_id=10"><i class="fa fa-home fa-lg" aria-hidden="true"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="index.php?v=d&p=plan&plan_id=12"><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="index.php?v=d&p=plan&plan_id=13"><i class="fa fa-video-camera fa-lg" aria-hidden="true"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="index.php?v=d&p=plan&plan_id=14"><i class="fa fa-thermometer-three-quarters fa-lg" aria-hidden="true"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="index.php?v=d&p=plan&plan_id=16"><i class="fa fa-bolt fa-lg" aria-hidden="true"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="index.php?v=d&p=plan&plan_id=17"><i class="fa fa-lightbulb-o fa-lg" aria-hidden="true"></i></a>
  </li>
    <li class="nav-item">
    <a class="nav-link" href="index.php?v=d&p=plan&plan_id=18"><i class="fa fa-cogs fa-lg" aria-hidden="true"></i></a>
  </li>
</ul>
Autre exemple, j'ai fait mes icones en partie pour mes tablettes et ça donne ça :

Image

Je débute aussi sur les designs... j'ai appris peu à peu et en lisant les posts des autres !
Bonjour Benj29,

Merci beaucoup d'avoir pris le temps d'expliquer toutes les briques du design .... je viens de me remettre dedans car j'étais en déplacement, et grace à vos explications j'y vois carrément plus clair, et je me plonge dans la fabrication de mon design en essayant de m'inspirer du votre !!

J'ai une dernière petite question ... comment sont gérées les données à l'intérieur de chaque cadre ?
Un équipement (virtuel je suppose) créé spécifiquement pour le design ?
Pour la gestion de tous les petits icônes etc, ainsi que toutes les lignes de l'alarme ou icône sous presence par exemple ?

Merci d'avance :)

PS : superbe le design tablette ;)
Raspberry Pi 3 Model B
Gateway Xiaomi - plusieurs capteurs portes / mouvements / températures / boutons
RFXtrx433E pour les volets Somfy RTS et ma sonde extérieur Oregon
Clé USB Bluetooth - Bracelet Xiaomi MiBand 2

Avatar de l’utilisateur
Theduck38
Actif
Messages : 1681
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Theduck38 » 11 mars 2018, 12:43

Hello,

En général, il faut créer plusieurs virtuels spécifiques en fonction des besoins... l'inconvénient c'est que les commandes d'état ne sont plus cliquables pour afficher les graphes d'historique, à moins de faire une double historisation...
-- TD38 --
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom - Rfxcom Rfxtrx433 - Clef Sigma UZB 'Z-wave plus'
Mon matériel en détails

Répondre

Revenir vers « Présentation et Vitrine d'installations »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité