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

[S'inspirer] Postez votre Plan / Design

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Jeeviens
Timide
Messages : 153
Inscription : 15 août 2017, 01:04

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

Message par Jeeviens » 20 févr. 2018, 22:10

@ tomtom43 : Très joli, doux, pastel et agréable à regarder. Ça a l'air hyper complet ce qui ne gâte rien. Bravo : )

benj29
Actif
Messages : 3975
Inscription : 26 mars 2017, 09:57
Contact :

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

Message par benj29 » 20 févr. 2018, 22:11

Hurmf, je vois mieux ce que tu veux dire.

En fait, j'aimerai sur certains boutons changer le status.

Exemple : un bouton avec une porte de garage (pour expliquer le principe), fermé. Si j'appuie dessus, l'icone du bouton passe ouverte. Il faut que j'appuie de nouveau pour que ça passe fermé. Mais l'idée c'est d'avoir sur ce bouton, action qui lance une action sur une commande d'un élément (par exemple commande sur un élément RFXcom) mais que l'image soit lié à l'état du capteur de la porte (ouvert ou fermé).

Je ne sais pas si je suis plus clair. :).

benj29
Actif
Messages : 3975
Inscription : 26 mars 2017, 09:57
Contact :

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

Message par benj29 » 20 févr. 2018, 22:23

loc173 a écrit :
01 févr. 2018, 17:16
Créer un widget "GenONBtn" de type "action" sous-type "defaut" et y coller :

Code : Tout sélectionner

<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<div id="Power#id#" style="width:60px; min-height:30px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#">
  <center>
		<span style="font-size: 3em; font-weight: bold; margin-top:-90px;" class="action" id="iconPowerCmd#id#"></span>
	</center>
	<a style="font-family:Montserrat;font-weight:medium;" class="bouton1">ON</a>        
    <script>                                                                                                                                                                                                 
        $.include(['plugins/widget/core/template/dashboard/cmd.action.other.GenONBtn/bouton1.css'], function() {                                                                                                                                                                                                
        $('#Power#id#').on('click',function(){                                                                                                                    
            jeedom.cmd.execute({id: '#id#'});                                                                                                                                                                
        }); 
        });                                                                                                                                                                                                  
                                                                                                                                                                                                      
    </script>                                                                                                                                                                                                   
</div>
Puis dans le répertoire de ton widget, créer un fichier bouton1.css avec :

Code : Tout sélectionner

a.bouton1{
display: inline-block;
font-family:Montserrat, Arial;
font-weight: medium;
font-size: 0.8em;                                
width: 60px;                                    
height: 26px;                                    
padding-top: 5px; /*permet le centrage vertical*/
text-align: center;                              
color: #F5F5F5;                                     
background-color: #008080;  
border:1px solid #008080;
border-radius: 13px;
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
}
En fin, dupliquer ton widget "on" en "GenOFFBtn" et modifier ON en OFF dans la balise <a> du widget.
Salut Loc173,

Pourrais-tu partager comment fais-tu un widget du même style mais info ?
Merci !

EDIT : en fait, j'aimerai pouvoir d'un coup :
- remplacer la police de base par la Montserrat sans me taper une balise dans tous les éléments :

Code : Tout sélectionner

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
- j'aimerai passer le texte de couleur noire sur les widget de type info (ou même changer la couleur).
Ta proposition pour les actions plus haut impose de modifier chaque CSS si je comprends ?
Comment imposer un CSS de base pour mettre toutes les polices par exemple si cette copie d'écran en Montserrat et en blanc ?

Image

La base de mon nouveau design :

Image

Je me rends compte que le blanc est beaucoup plus lisible sur les tablettes 10 pouces surtout en pleine luminosité.

J'étais parti du côté de la personnalisation d'un virtuel temperature en choix tile et vue design mais je ne vois pas où "travailler" le champ lié à la valeur, sa couleur, sa police (je vois l'unité par exemple mais pas la valeur).

Code : Tout sélectionner

<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" 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>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-weight: bold;" class="pull-right">#unite#</span>
		<span style="font-size: 2em;font-weight: bold;" class="pull-right state"></span><br/>
		<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block">
			<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
	</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').empty().append(_options.display_value);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>


Jeeviens
Timide
Messages : 153
Inscription : 15 août 2017, 01:04

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

Message par Jeeviens » 21 févr. 2018, 01:00

Bon et bien moi je continue à poster mes designs... : )

Images à 80%.

Le design principal , un peu remanié, avec quelques nouveaux widgets, en attendant de pouvoir faire mieux ! (1)

Screen1.png
Screen1.png (621.26 Kio) Consulté 2370 fois

Ensuite J'ai commencé un design dédié à la caméra pointée sur portail. La je me suis fait plaisir, ça ne sert pas à grand chose, surtout sur un écran 7 pouces, d'autant qu'on peut afficher les caméras extérieures/intérieures sur la TV. Et qu'elles sont à dispo dans le bureau sur plusieurs écrans. Mais en attendant de pouvoir réaliser des widgets numériques (1) - bug sur ma config, le support est sur le coup ! - je voulais me faire un petit panel qui reproduit à mon gout les commandes d'une des caméras.

Screen2.png
Screen2.png (597.36 Kio) Consulté 2370 fois

Dans ce second écran - provisoire - j'ai zoomé artificiellement sur l'image de la caméra. En étirant et en créant un masque par dessus. Les switchs commandent les fonctions IR, Wide Dynamic Range et Defog de cette caméra Zavio (Merci Fiddler) . Je vais m'attaquer à l'api Synology pour commander les fonctions Analytics - si elles existent toujours, ça fait quelques updates que je n'ai pas regardé... : )

J'ai appliqué un effet 'bleuté' vintage/bigbrother sur les moniteurs, je trouve que ça va bien avec le thème. Il est désactivable via le switch 'Filtre'. Cf screen ci-dessous.

Screen3.png
Screen3.png (213.45 Kio) Consulté 2370 fois
Dernière édition par Jeeviens le 21 févr. 2018, 01:22, édité 1 fois.

Jeeviens
Timide
Messages : 153
Inscription : 15 août 2017, 01:04

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

Message par Jeeviens » 21 févr. 2018, 01:10

Ha et....heu...je voulais signaler que lorsque l'on désactive un équipement Camera - du plugin du même nom - via un scenario, l'image continue de s'afficher jusqu'a un refresh de la page : je ne sais pas si c'est normal, ou une limitation technique mais je signale, au cas zou ; )

Bonne nuit les gens : )

tomtom43
Timide
Messages : 94
Inscription : 27 juil. 2015, 13:53

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

Message par tomtom43 » 21 févr. 2018, 07:45

Super Jeeviens ! Dis une question idiote mais comment fais tu pour réduire ton design à un portable ? Je souhaiterai basculer ce que j'ai fais sur un Smartphone ... Tu as utilisé des tableaux ?

Jeeviens
Timide
Messages : 153
Inscription : 15 août 2017, 01:04

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

Message par Jeeviens » 23 févr. 2018, 00:02

@tomtom43

Méthode à l'ancienne : j'ai crée des desgin spécifiques pour mon Blackberry Passport et pour l'iphone de ma copine (qui passe par l'appli mobile).

Pas glorieux, mais ca fait des 'œuvres' uniques ; ) : D

Jeeviens
Timide
Messages : 153
Inscription : 15 août 2017, 01:04

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

Message par Jeeviens » 23 févr. 2018, 02:02

@benj29

Pardon !!!! je crois que j'ai oublié de te répondre....le festival, toute cette pression...

Si j'ai compris ta démarche, je créerai un virtuel associé à l’état de ton équipement. J'y associerai un widget de mon choix pour le visuel. Et sur le design, par dessus je créerai une zone qui commanderai l’équipement. Disons virtuel niveau 0 et zone niveau 1.

Ainsi, ton visuel (virtuel/widget) reflète l’état de l’équipement, MAIS, ta 'commande zone' opère ce que tu veux : une ou plusieurs action, comme dans un scenario : ) Tu peux de ce fait même palier aux éventuels problèmes d’équipements qui envoient leur retour d’état trop tôt (lampes RVB par exemple, info du support Jeedom). Une commande On/Off - une pause - re-une commande On-Off.

J'ai bien compris ?

benj29
Actif
Messages : 3975
Inscription : 26 mars 2017, 09:57
Contact :

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

Message par benj29 » 23 févr. 2018, 08:00

Oui Monsieur !
J'ai bien avancé de mon côté pour la partie CSS texte et couleur. Il ne me reste plus que ce point. Faire des boutons avec le visuel qui change en fonction de l'état.

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


NoumeroDouo
Timide
Messages : 31
Inscription : 30 janv. 2018, 14:08

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

Message par NoumeroDouo » 23 févr. 2018, 11:37

Hello tous !
Apres avoir passé des heures a regarder toutes vos créations je me lance et je vous montre la mienne.

Image

Pas mal de trucs sont animés, du coup j'ai fait quelques vidéos pour montrer le rendu en live :
http://ipenpen.free.fr/jeedom/maisonStatus.webm
http://ipenpen.free.fr/jeedom/lampes.webm

Et mon projet d'animer tout ca en 3D :
http://ipenpen.free.fr/jeedom/3dAnimation.webm

J'ai créé un poste si y'a des gens intéressés par certains points. Sait-on jamais !
viewtopic.php?f=50&t=34578#p589932

Voilou, j'espere que ca vous donnera de l'inspiration !

PS : Si vous avez des idées dans le genre, je suis preneur de toute inspiration, du plus futile au plus extravagant !

Jeeviens
Timide
Messages : 153
Inscription : 15 août 2017, 01:04

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

Message par Jeeviens » 23 févr. 2018, 15:23

Ha ouaiiiis, quand meme ! Impressionant la vue 3D !

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

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

Message par Trallius » 23 févr. 2018, 15:39

benj29 a écrit :
19 févr. 2018, 11:55
Salut, merci ;).

Non design en taille réglée. Ca marche bien sur mes 2 5.5 pouces et sur le 5.2 pouces de madame (besoin de scroller pour le bas).

J'ai modifié la première page récemment.

Image

A noter que j'hallucine toujours autant sur la résolution ... quand on sait que les téls sont full HD...
325x560 ce design en configuration. Cela doit être propre à Chrome et le téléphone je pense. Je n'ai pas du tout ces résolutions là via le navigateur de JPI sur mes tablettes...

Je profite pour ajouter mon design du weekend qui s'active automatiquement quand l'alarme est armée (mode nuit ou autre) :

Image
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 !
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

benj29
Actif
Messages : 3975
Inscription : 26 mars 2017, 09:57
Contact :

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

Message par benj29 » 23 févr. 2018, 16:29

Je te reponds ce week-end,pas de soucis I!

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


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

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

Message par Trallius » 23 févr. 2018, 16:32

benj29 a écrit :
23 févr. 2018, 16:29
Je te reponds ce week-end,pas de soucis I!

Envoyé de mon Moto G (5S) Plus en utilisant Tapatalk
Super merci beaucoup ! :)
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

benj29
Actif
Messages : 3975
Inscription : 26 mars 2017, 09:57
Contact :

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

Message par benj29 » 23 févr. 2018, 16:32

Là y a match ! 6 nations.

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


benj29
Actif
Messages : 3975
Inscription : 26 mars 2017, 09:57
Contact :

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

Message par benj29 » 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 !

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

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

Message par jeewawa » 27 févr. 2018, 13:56

-seb- a écrit :
01 août 2017, 09:34

Image
@-seb-

Où puis-je trouver le widget poubelle en blanc ?
Elles sont sur le market mais en noir ...
Tu pourrais les mettre en PJ stp ?

Merci.
Smart Zwave avec RFXCom, RfPlayer et Teleinfo GCE ELECTRONICS

Avatar de l’utilisateur
-seb-
Timide
Messages : 121
Inscription : 22 déc. 2016, 13:11

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

Message par -seb- » 27 févr. 2018, 16:08

J'utilise bien les widget qui sont sur le market, ils sont blancs si ce n'est pas le jour de sortir les poubelles et ils passent noir (avec le couvercle de la couleur du type de poubelle) le jour (ou plutôt la veille) où il faut les sortir. Je te mets quand même en PJ l'image en blanc
Pièces jointes
poubelle-disable.png
poubelle-disable.png (1.04 Kio) Consulté 1866 fois
Jeedom sur RPI3
Z-Wave + Gateway Xiaomi + JPI
Présentation | Dashboard | Design | Matériel

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

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

Message par jeewawa » 27 févr. 2018, 17:06

Ah d'accord, merci.
Smart Zwave avec RFXCom, RfPlayer et Teleinfo GCE ELECTRONICS

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2702
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 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

Répondre

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

Qui est en ligne ?

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