Page 56 sur 81

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

Publié : 27 févr. 2018, 22:41
par jeewawa
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.

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

Publié : 28 févr. 2018, 00:30
par Theduck38
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 !

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

Publié : 28 févr. 2018, 13:07
par jeewawa
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 ...

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

Publié : 04 mars 2018, 12:28
par Florian33
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 !

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

Publié : 04 mars 2018, 19:02
par Theduck38
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.

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

Publié : 05 mars 2018, 07:50
par Zitoune
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

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

Publié : 05 mars 2018, 08:22
par Florian33
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 :/

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

Publié : 05 mars 2018, 08:24
par benj29
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


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

Publié : 07 mars 2018, 14:59
par tot0f
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é 1849 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é 1849 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é 1849 fois

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

Publié : 07 mars 2018, 14:59
par tot0f
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é 1849 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é 1849 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é 1849 fois
Et voilà :)

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

Publié : 07 mars 2018, 15:40
par Theduck38
Sympa, c'est original !

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

Publié : 08 mars 2018, 00:24
par benj29
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

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

Publié : 08 mars 2018, 04:41
par Arnault
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

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

Publié : 08 mars 2018, 07:14
par dcjona
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

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

Publié : 08 mars 2018, 08:01
par benj29
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


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

Publié : 11 mars 2018, 10:07
par dcjona
Ma page d'accueil a un peu évolué aussi donc je vous la repost par plaisir :)

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

Publié : 11 mars 2018, 10:10
par dcjona
Ainsi que l'onglet sécurité.. toujours en cours de modif

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

Publié : 11 mars 2018, 10:43
par Trallius
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 ;)

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

Publié : 11 mars 2018, 12:43
par Theduck38
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...

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

Publié : 11 mars 2018, 12:47
par benj29
Tout à fait. Faut tout faire en double. Soit doubler les infos actions au niveau du widget soit doubler les widgets.
C'est fastidieux... Mais plus simple en cas de plusieurs designs de couleur différente.

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