[S'inspirer] Postez votre Plan / Design

[Djal94]

@Djal94 : Tu veux les images c'est ca ? C'est fait : )

Super merci

[karayoo]

Les amis, j'ai beau essayer plein de trucs j'y arrive pas ...
Comment fait on pour changer la police d'un widget svp, par ex le "tile" pour les temp ?
merci

[Theduck38]

Je pense qu'il faut avoir de bonnes notions de html/css... et aussi fréquemment vider le cache du navigateur.
Je suis en plein dedans et je galère bien !
Dans le cas d'une police différente, il faut "l'installer" et la déclarer.

Tu l'ajoute dans un dossier de Jeedom, comme par exemple /var/www/html/fonts
Ensuite tu déclares la police dans ton widget :

Code : Tout sélectionner

<style>
  @font-face {
	font-family: "Comic";
	src: url('fonts/ComicSansMSRegular.ttf');
}
</style>

Puis pour l'utiliser, dans une balise p.ex. :

Code : Tout sélectionner

font-family:Comic;

[Sartog]

Les amis, j'ai beau essayer plein de trucs j'y arrive pas ...
Comment fait on pour changer la police d'un widget svp, par ex le "tile" pour les temp ?
merci

J'aurais tendance à dire en dupliquant le widget et en le modifiant à ta guise puis l'appliquer sur les commandes souhaitées.

[Xistof]

bonjour,

je me permets de relancer une question : dans le dashboard lorsque j'affiche une commande (température par exemple), j'ai accès à l'historique, même en modifiant l'apparence du widget. En mode design ce n'est plus le cas : si je modifie l'apparence du widget, je n'ai plus d'historique lorsque je clic sur la commande (j'ai bien le pointeur qui se transforme, qui m'affiche la date des infos collectées, mais aucune interaction).
Pour avoir l'historique je suis obligé de laisser l'affichage par défaut ce qui ne me convient pas, je dois louper un truc tout bête mais je ne trouve pas, merci de votre aide

[Jeeviens]

Coucou !

J'ai un peu avancé sur mon second design, celui qui m'est plus particulièrement destiné. En fait c'est un peu ma console de debuging lorsque je fait mes tests, mes scenarios, tout ça... (L'image est à 80%)

screenshot.jpg (175.95 Kio) Consulté 2202 fois

Quelques explications ? Allez...

Bon, le plan, au milieu n'a pas trop change. Il indique les lampes/prises allumées en jaune. Et les portes ouvertes en rouge. En bleu, TV, Routeur (second réseau) et point d'accès wifi. Au dessus du plan, 2 boutons pour passer du mode auto en manuel. A coté, un voyant qui indique que toutes les ouvertures sont fermées. C'est redondant, mais ça me plait graphiquement : )

Le coté debug, c'est à droite du plan et en dessous - du même plan - qu'on le trouve. J'ai des prises Fibaro zwave qui me créent des soucis (*) ; parfois, lorsqu'elles sont allumées ou éteintes, le retour d’état ne se fait pas. En revanche, la puissance consommée est bien renvoyée. Donc les petites leds sur le plans se basent sur l’état renvoyé, mais les voyants sur la droite du plan se basent eux sur la puissance. Ça me permet de voir quand ça cloche. Pour les trois voyants en dessous du plan, ils sont gérés par un scenario qui détecte si justement il y a une différence entre l’état renvoyé et la puissance mesurée par prise : s'il y a une différence entre ce qui est mesuré et ce qui est affiché, ils s'allument en rouge.

Le switch 'correction' tout à droite active (ou non) un scenario qui lui corrige automatiquement l'affichage des leds sur le plan si jamais une erreur est détectée. En parallèle, enfin en même temps, il essaie de d’éteindre/rallumer les prises posant problème. Si le problème de difference persiste, ET si le switch du dessous est positionné sur 'alertes', le scenario m'envoie un mail.

Pour finir, les quatre hublots ronds du bas indiquent la luminosité dans les pièces nommées. La led rouge du dessous des hublots s'allume si un mouvement est détecté.

(*) Le problème survient surtout quand je suis obligé de débrancher/rebrancher la smart : elle a tendance a planter/freezer depuis quelques jours, et au redémarrage, les états ne sont pas forcement corrects... J'ai ouvert un ticket pour obtenir de l'aide quand à ces plantages mystérieux : wait and see (ca me chagrine parcequ'evidemment, mon alarme est en partie gérée par la smart...)

Voila voila... je m'amuse : )

[Anonyme]

Contenu supprimé à la demande de son auteur

[Jeeviens]

@magicgg91 : Merci beaucoup ... : )

[Barto_95]

effectivement jolie design

[Bonson]

Superbe. Manque plus que les labels avec un effet "dymo" et on a le total Tchernobyl Style !

[fcna]

Bonjour à tous,

je cherche de l'aide HTML, Jquery car je sèche complètement ...

Mon besoin simple : sur un actionneur, avoir deux bouton (on/off) qui change de couleur en fonction du status. Soit si c'est on, le bouton on est rouge, et le off gris, et inversement ...

La solution qui bloque

pour cela, j'utilise du jquery pour remplacer la css.

Le code de mon widget

Code : Tout sélectionner

<span class="cmd reportModeHidden cmd-widget" style="display: inline !important;margin-right: 2px;" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">

  <a class="toto#uid# btn btn-sm  action "iconCmd#uid#" cmdName tooltips" title="#name#" >#name_display#</a>
  
  <script>
        $('.iconCmd#uid#').empty();
        if ('#state#' == '1') {
            $('.toto#uid#').css({"background-color": "red", "border-color": "transparent", "margin-top":"2px"});

        } else {
            $('.toto#uid#').css({"background-color": "blue", "border-color": "transparent", "margin-top":"2px"});

        }
        $('.cmd[data-cmd_uid=#uid#] .action').off();
        $('.cmd[data-cmd_uid=#uid#] .action').on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
    </script>
</span>

dans mon code, si state = 1, je mets du rouge sur la span toto#uid#.

mais ca ne marche pas car le deux changent de couleur !!! alors que #uid# devrait les différencier ...

le code généré de la page html:

Code : Tout sélectionner

<div class="verticalAlign">
		<center>
			<span class="cmd reportModeHidden cmd-widget" style="margin: 0px 2px 0px 0px; display: inline !important; top: 0px; left: 0px; width: 37px; height: 19px; padding: 0px; position: relative; transform-origin: 0px 0px 0px; transform: none; z-index: auto;" data-type="action" data-subtype="other" data-cmd_id="3992" data-cmd_uid="cmd3992__1250916262__" data-version="dashboard"><a class="totocmd3992__1250916262__ btn btn-sm  action " iconcmdcmd3992__1250916262__"="" cmdname="" tooltips"="" title="On" style="background-color: rgb(255, 0, 0); border-color: transparent; margin-top: 2px;">On</a><script>
        $('.iconCmdcmd3992__1250916262__').empty();
        if ('1' == '1') {
            $('.totocmd3992__1250916262__').css({"background-color": "red", "border-color": "transparent", "margin-top":"2px"});

        } else {
            $('.totocmd3992__1250916262__').css({"background-color": "blue", "border-color": "transparent", "margin-top":"2px"});

        }
        $('.cmd[data-cmd_uid=cmd3992__1250916262__] .action').off();
        $('.cmd[data-cmd_uid=cmd3992__1250916262__] .action').on('click', function () {
            jeedom.cmd.execute({id: '3992'});
        });
    </script></span>
  
 <span class="cmd reportModeHidden cmd-widget" style="margin: 0px 2px 0px 0px; display: inline !important; top: 0px; left: 0px; width: 39px; height: 19px; padding: 0px; position: relative; transform-origin: 0px 0px 0px; transform: none; z-index: auto;" data-type="action" data-subtype="other" data-cmd_id="3993" data-cmd_uid="cmd3993__2065202294__" data-version="dashboard"><a class="totocmd3993__2065202294__ btn btn-sm  action " iconcmdcmd3993__2065202294__"="" cmdname="" tooltips"="" title="Off" style="background-color: rgb(255, 0, 0); border-color: transparent; margin-top: 2px;">Off</a><script>
        $('.iconCmdcmd3993__2065202294__').empty();
        if ('1' == '1') {
            $('.totocmd3993__2065202294__').css({"background-color": "red", "border-color": "transparent", "margin-top":"2px"});

        } else {
            $('.totocmd3993__2065202294__').css({"background-color": "blue", "border-color": "transparent", "margin-top":"2px"});

        }
        $('.cmd[data-cmd_uid=cmd3993__2065202294__] .action').off();
        $('.cmd[data-cmd_uid=cmd3993__2065202294__] .action').on('click', function () {
            jeedom.cmd.execute({id: '3993'});
        });
    </script></span>
  
 <div style="width:90px;min-height:62px;" class="cmd  tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="3994" data-cmd_uid="cmd3994__405028668__" data-version="dashboard" title="Valeur du 2018-02-15 15:04:26, collectée le 2018-02-15 15:04:28">
  <center>
    <div style="font-weight: bold;font-size : 12px;">VMC</div>
     <span style="font-size: 2.5em;font-weight: bold;position:relative;top:-6px" class="iconCmd"><i class="fa fa-check"></i></span>
  </center>
  <script>
    jeedom.cmd.update['3994'] =function(_options){
      $('.cmd[data-cmd_id=3994]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
      if (_options.display_value == '1') {
       $('.cmd[data-cmd_id=3994] .iconCmd').empty().append('<i class="fa fa-check"></i>');
     }else {
      $('.cmd[data-cmd_id=3994] .iconCmd').empty().append('<i class="fa fa-times"></i>');
    }
  }
  jeedom.cmd.update['3994']({display_value:'0',valueDate:'2018-02-15 14:59:44',collectDate:'2018-02-15 15:00:58',alertLevel:'none'});
</script>
</div>
		</center>
	</div>

[Sartog]

Peux-tu essayer de mettre le #id# plutôt que #uid# ?

+ virer les guillemets entourant iconCmd#uid# dans ta balise <a> parce qu'à la génération du html ton concmdcmd3992__1250916262__ se retrouve hors balise.

Code : Tout sélectionner

totocmd3992__1250916262__ btn btn-sm  action " iconcmdcmd3992__1250916262__"=""

[winhex]

le name si tu veux
si on et 1
couleur rouge
sinon bleu
si off et 0
couleur rouge
sinon bleu

regarde la vidéo drive
viewtopic.php?f=29&t=21295&start=100#p432379

[Lindo]

Bonjour,

Voici le mien grâce à F$B33 :

Capture.PNG (1021.52 Kio) Consulté 1965 fois

J'ai juste un soucis pour mettre la légende de mon graphie en blanc, là en gris on ne voit quasiment rien. Vous savez où je peux changer ça ? Idem pour un de mes gadgets Xiaomi qui à l'affiche à sa température/ humidité inversé par rapport aux autres.

Comment résoudre ces petits soucis ??

Merci

[maxredphenix]

Et pourquoi tu mets pas une zone dans cette partie avec plus de blanc ?

[Theduck38]

Pour virer les barres blanches, il faut mettre :

Code : Tout sélectionner

.highcharts-plot-band
{opacity:0.0;}

Dans la partie Desktop/CSS de la 'Personnalisation avancée' (les engrenages en haut à droite).

[Theduck38]

Tiens, j'en profiter pour poster quelques screens de mon design... F$B33 aussi ! Je les ai déjà mises sur le fil de F$B33, mais bon... c'est plus la place ici.

Accueil.JPG (197.94 Kio) Consulté 1931 fois

Temps.JPG (190.05 Kio) Consulté 1931 fois

Ambiance.JPG (187.11 Kio) Consulté 1931 fois

[Theduck38]

MultiRoom.JPG (140.83 Kio) Consulté 1930 fois

Monitoring.JPG (201.52 Kio) Consulté 1930 fois

Il y encore un peu d'amélioration mais je tiens le style qui me convient.
Les autres écrans sont toujours à faire !

[benj29]

Comment faites-vous pour faire les icônes ?

Il m'en manque, j'aurai voulu une icone pour faire le 1er étage (façon celle de Jeedom d'origine) et une pour le RDC, une pour la piscine aussi, l'éclair etc.

Merci ! (sobre et efficace en tout cas).

Que désigne ta TV avec le 0.57 en haut ?

[Theduck38]

La TV, c'est la charge serveur de Jeedom... j'ai pas trouvé mieux dans les icônes préexistantes.

Pour les icônes 'images', je prends une 'vierge' (un rond avec un fond semi-transparent) qui a été fournie sur le fil de F$B33 (par @Thyers, si je me rappelle bien), je télécharge sur https://www.flaticon.com/ l'image qui me convient en 256x256 / png, puis je la réduis et la colle dans le rond à l'aide de GIMP. Un export en .png et jop...

Voilà des packages tout faits si tu veux, dont le rond vierge (heuuu, juste en-dessous, même s'il ne se voit pas).

ROND.png (5.55 Kio) Consulté 2324 fois

Jeu1.7z

(763.12 Kio) Téléchargé 130 fois

Jeu2.7z

(782.63 Kio) Téléchargé 110 fois