[S'inspirer] Postez votre Plan / Design

Jeeviens · 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 · 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 · 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 ?

La base de mon nouveau design :

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 · 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 (621.26 Kio) Consulté 3769 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 (597.36 Kio) Consulté 3769 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 (213.45 Kio) Consulté 3769 fois

Jeeviens · 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 · 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 · 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 · 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 · 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 · 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.

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 · Message par **Jeeviens** » 23 févr. 2018, 15:23

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

Trallius · 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.

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

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 !

benj29 · 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 · 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 !

benj29 · 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 · 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 :

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 :

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

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

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

@-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.

-seb- · 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

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

Ah d'accord, merci.

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é.

[S'inspirer] Postez votre Plan / Design

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Qui est en ligne ?