Page 9 sur 13

Widget 'feu tricolore'

Publié : 16 nov. 2016, 11:59
par FunkyFab
Bonjour,

Ma Jeedom gère un délestage des radiateurs en cas de surintensité.
Pour afficher l'état du délestage, j'ai créé un widget 'feu tricolore' qui est vert quand la valeur est 0 (pas de délestage), rouge quand la valeur est 2 (délestage en cours), orange quand la valeur est 1 (les radiateurs sont en cours de rallumage, un à un).
Voici une capture d'écran, et le code

Code : Tout sélectionner

<div style="width:115px;height:100%;float: left;" class="cmd #history# tooltips" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<center>#name#<br/>
		<span style="font-size: 1.1em;" class="iconCmd#uid#"></span>
	</center>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"0","image1":"traffic-light-green.png","image2":"traffic-light-red.png","image3":"traffic-light-amber.png"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
		$(".iconCmd#uid#").empty();
		if ("#state#" == "2") {
			$(".iconCmd#uid#").append("<img src='plugins/widget/core/images/traffic-light-red.png'>");
		} else if ("#state#" == "1") {
			$(".iconCmd#uid#").append("<img src='plugins/widget/core/images/traffic-light-amber.png'>");
		} else {
          $(".iconCmd#uid#").append("<img src='plugins/widget/core/images/traffic-light-green.png'>");
        }
	</script>
</div>

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 16 nov. 2016, 12:30
par Sshafi
@funkyfab : tu devrais plutôt partager ça dans la section widgets du forum ;)
Et pourquoi pas envoyer ton widget sur le market...

From Tapatruc...

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 16 nov. 2016, 14:26
par FunkyFab
Je devrais effectivement mieux lire les titres des forums ...

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 16 nov. 2016, 18:57
par BizZ62
Sympa le widget ;)

Ca pourrait être bien aussi de poster la façon dont tu gères ton délestage, voir le scénario utilisé

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 22 nov. 2016, 20:03
par dj_janker
Bonjour, je basculé mon jeedom sur RPI dans une version sur un pc avec Debian 8.6. Le problème est que maintenant je dois «droits» d'envoyer un fichier à partir de filezilla au fond de mon Jeedom.
Aucun idée, s'il vous plaît?

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 22 nov. 2016, 20:21
par BizZ62
Euhhh... Difficile à comprendre ta question mais si c'est question de droits alors ça se passe du côté des CHMods via Filezilla pour accorder les bons droits aux dossiers / fichiers concernés (clic droit dessus puis "Droits d'accès au fichier").

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 22 nov. 2016, 21:51
par dj_janker
BizZ62 a écrit :Euhhh... Difficile à comprendre ta question mais si c'est question de droits alors ça se passe du côté des CHMods via Filezilla pour accorder les bons droits aux dossiers / fichiers concernés (clic droit dessus puis "Droits d'accès au fichier").

Je ne comprends pas beaucoup de droits, mais filezilla fais ce qui me Indica et a rejeté l'action. Je pense que le problème vient parce que je dois ajouter mon "user" au groupe www-data, mais je n'ose parce qu'ils ne savent pas très bien ce que je dois utiliser les commandes. Si je me trompe, je vais devoir tout réinstaller ...

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 22 nov. 2016, 22:31
par BizZ62
Pourrais tu STP être plus précis sur le problème ? Message d'erreur, etc... ?

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 25 mai 2017, 11:14
par cyrilphoenix
Merci pour toutes ces astuces :)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 21 août 2017, 06:50
par m4x91
Hello, je n'arrive pas a trouver ma réponse, savez-vous si il est possible d'appliquer du code css uniquement pour le dashbord ? ça fait super moche sur mes designs sinon :(

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 21 août 2017, 08:38
par Sshafi
m4x91 a écrit :Hello, je n'arrive pas a trouver ma réponse, savez-vous si il est possible d'appliquer du code css uniquement pour le dashbord ? ça fait super moche sur mes designs sinon :(
Regarde le 1er post de ce sujet ;-)

From Tapatruc


Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 21 août 2017, 16:58
par m4x91
Ah oui j'avais pas vu l'update, merci.

En revanche j'arrive pas a "traduire" mon css en js pour cette partie la

body
.eqLogic-widget {
border-radius: 15px !important;
background-color: rgba(0,0,0,0.20) !important;
box-shadow: 0px 3px 8px #0d0d0d !important;
margin-right: 1px !important;
margin-left: 1px !important;
}

:(

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 21 août 2017, 17:05
par Sshafi
m4x91 a écrit :
21 août 2017, 16:58
Ah oui j'avais pas vu l'update, merci.

En revanche j'arrive pas a "traduire" mon css en js pour cette partie la

body
.eqLogic-widget {
border-radius: 15px !important;
background-color: rgba(0,0,0,0.20) !important;
box-shadow: 0px 3px 8px #0d0d0d !important;
margin-right: 1px !important;
margin-left: 1px !important;
}

:(
Pas très compliqué :

Code : Tout sélectionner

$('.eqLogic-widget').css({
      'border-radius':'15px !important',
      'background-color':'rgba(0,0,0,0.20) !important',
      'box-shadow':'0px 3px 8px #0d0d0d !important',
      'margin-right':'1px !important',
      'margin-left':'1px !important'
});

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 21 août 2017, 17:54
par m4x91
J'étais pas loin ^^

$('eqLogic-widget').css({
'border-radius':'15px',
'box-shadow':'rgba(0,0,0,0.20)',
'background-color':'0px 3px 8px #0d0d0d',
'margin-right':'1px',
'margin-left':'1px'
});

Je sais pas pourquoi j'ai voulu virer les important ... merci Sshafi :)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 21 août 2017, 17:55
par Sshafi
Avec plaisir ;-)

From Tapatruc


Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 21 août 2017, 18:49
par m4x91
C'est re moi, ça fonctionne bien sur le dash (hormis l'arrondi mais j'ai bien le style comme ça, plus sobre) par contre ca fait pareil en mode design sur la tablette :(

Mon code

Code : Tout sélectionner

$(document).ready (function(){
     setTimeout(function(){
          if((window.location.href.indexOf("p=dashboard") > -1) || (window.location.href.indexOf("p=plan") > -1)) {
            $('.eqLogic-widget').css({
                  'border-radius':'25px !important',
                  'background-color':'rgba(0,0,0,0.20) !important',
                  'box-shadow':'0px 3px 8px #0d0d0d !important',
                  'margin-right':'1px !important',
                  'margin-left':'1px !important'
            });
          }
     }, 500);
});

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 22 août 2017, 09:26
par Sshafi
Pour l'arrondi, si la custom marche du côté css, c'est sûrement qu'il faut retarder un peu plus l'exécution du javascript. (augmenter le 500) mais si tu ne le veux pas finalement, tu peux virer la ligne "'border-radius':'25px !important',"
Pour le fait que ça le fait aussi en mode design, c'est normal vu ton code, enlève " || (window.location.href.indexOf("p=plan") > -1)" du if et ça devrait mieux aller ;-)

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 22 août 2017, 14:31
par m4x91
C'est impeccable, merci beaucoup, j'avais complètement oublié que plan c'était l'ancien nom du monde design...

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 23 sept. 2017, 23:28
par winhex
caché la roue tournante (loading)

Code : Tout sélectionner

#jqueryLoadingDiv {
 opacity: 0.0;  
 /** ou display: none !important;**/
       }
code source
jqueryLoadingDiv.png
jqueryLoadingDiv.png (3.15 Kio) Consulté 4571 fois

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Publié : 13 nov. 2017, 10:55
par kerdale
Bonjour,
je ne sais pas trop si c'est le bon fil pour poster ma question, (totalement nul en javascript et je ne voudrai pas faire de "miracle" )
Voila dans un scénario pour rendre invisible un équipement j'utilise le code :

Code : Tout sélectionner

$o=eqLogic::byId(1148);
$o->setIsVisible(0);
$p=$o->save();
existe-t-il un code pour faire la même chose mais avec juste une commande/info pour la rendre visible/invisible dans une tuile par scénario ?
Merci du coup de main