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 vos Customisations (Javascipt / CSS)

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
FunkyFab
Timide
Messages : 25
Inscription : 02 févr. 2016, 12:41

Widget 'feu tricolore'

Message par FunkyFab » 16 nov. 2016, 11:59

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>
Pièces jointes
feu.png
Capture écran
feu.png (8.34 Kio) Consulté 3285 fois
RP2,clé Sigma Design,multiprise Greenwave,Zipato ZP3102+,ZWave-Me RC2,QBino ZMNHJD1,QBino ZMNHCD1,Vision ZM1601+,QBino ZMNHUD1,Zipato MiniKeypad,Fibaro FGBS-001,Aeotec ZW089,Everspring AN179,Fibaro FGMS-001

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

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

Message par Sshafi » 16 nov. 2016, 12:30

@funkyfab : tu devrais plutôt partager ça dans la section widgets du forum ;)
Et pourquoi pas envoyer ton widget sur le market...

From Tapatruc...
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

FunkyFab
Timide
Messages : 25
Inscription : 02 févr. 2016, 12:41

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

Message par FunkyFab » 16 nov. 2016, 14:26

Je devrais effectivement mieux lire les titres des forums ...
RP2,clé Sigma Design,multiprise Greenwave,Zipato ZP3102+,ZWave-Me RC2,QBino ZMNHJD1,QBino ZMNHCD1,Vision ZM1601+,QBino ZMNHUD1,Zipato MiniKeypad,Fibaro FGBS-001,Aeotec ZW089,Everspring AN179,Fibaro FGMS-001

Avatar de l’utilisateur
BizZ62
Actif
Messages : 1510
Inscription : 16 juil. 2014, 19:17

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

Message par BizZ62 » 16 nov. 2016, 18:57

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é
Jeedomien depuis 2014
Rpi3 - SSD 32Go + Stick Aeon Gen5 + RfxTrx + Gateway Xiaomi
+ Rpi3 - SSD 32Go + Stick Aeon Gen5 en Jeelink
+ 40 Modules Zwave + 25 modules 433 + 10 modules Xiaomi Home + 5 Caméras.

dj_janker
Timide
Messages : 461
Inscription : 03 févr. 2015, 09:27

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

Message par dj_janker » 22 nov. 2016, 20:03

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?

Avatar de l’utilisateur
BizZ62
Actif
Messages : 1510
Inscription : 16 juil. 2014, 19:17

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

Message par BizZ62 » 22 nov. 2016, 20:21

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").
Jeedomien depuis 2014
Rpi3 - SSD 32Go + Stick Aeon Gen5 + RfxTrx + Gateway Xiaomi
+ Rpi3 - SSD 32Go + Stick Aeon Gen5 en Jeelink
+ 40 Modules Zwave + 25 modules 433 + 10 modules Xiaomi Home + 5 Caméras.

dj_janker
Timide
Messages : 461
Inscription : 03 févr. 2015, 09:27

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

Message par dj_janker » 22 nov. 2016, 21:51

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

Avatar de l’utilisateur
BizZ62
Actif
Messages : 1510
Inscription : 16 juil. 2014, 19:17

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

Message par BizZ62 » 22 nov. 2016, 22:31

Pourrais tu STP être plus précis sur le problème ? Message d'erreur, etc... ?
Jeedomien depuis 2014
Rpi3 - SSD 32Go + Stick Aeon Gen5 + RfxTrx + Gateway Xiaomi
+ Rpi3 - SSD 32Go + Stick Aeon Gen5 en Jeelink
+ 40 Modules Zwave + 25 modules 433 + 10 modules Xiaomi Home + 5 Caméras.

Avatar de l’utilisateur
cyrilphoenix
Timide
Messages : 435
Inscription : 28 juil. 2015, 16:46
Localisation : 71

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

Message par cyrilphoenix » 25 mai 2017, 11:14

Merci pour toutes ces astuces :)
Jeedom fan / NextDom fan
Mon Matos : RPI 3, NAS Synology, Xiaomi Gateway, Aeotec Gen5, Broadlink RM3, Clé BLEA
Mes plugins : FlipClock

Avatar de l’utilisateur
m4x91
Timide
Messages : 410
Inscription : 22 mai 2015, 08:39

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

Message par m4x91 » 21 août 2017, 06:50

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

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

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

Message par Sshafi » 21 août 2017, 08:38

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

??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
m4x91
Timide
Messages : 410
Inscription : 22 mai 2015, 08:39

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

Message par m4x91 » 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;
}

:(

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

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

Message par Sshafi » 21 août 2017, 17:05

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'
});
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
m4x91
Timide
Messages : 410
Inscription : 22 mai 2015, 08:39

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

Message par m4x91 » 21 août 2017, 17:54

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

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

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

Message par Sshafi » 21 août 2017, 17:55

Avec plaisir ;-)

From Tapatruc

??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
m4x91
Timide
Messages : 410
Inscription : 22 mai 2015, 08:39

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

Message par m4x91 » 21 août 2017, 18:49

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);
});

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

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

Message par Sshafi » 22 août 2017, 09:26

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 ;-)
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
m4x91
Timide
Messages : 410
Inscription : 22 mai 2015, 08:39

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

Message par m4x91 » 22 août 2017, 14:31

C'est impeccable, merci beaucoup, j'avais complètement oublié que plan c'était l'ancien nom du monde design...

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 23 sept. 2017, 23:28

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é 1841 fois

Avatar de l’utilisateur
kerdale
Actif
Messages : 1639
Inscription : 25 sept. 2016, 11:38
Localisation : Penn-ar-Bed

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

Message par kerdale » 13 nov. 2017, 10:55

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
1 NUC & 1 RPI3/Msata V3.3.31, EnOcean, Z-wave,
Rflink, IPX800V3, carte 8 rl IP, IR_V3, Xiaomi gateway, JPI/APK/tel Android dédié, Somfy RTS, Rf433Mhz, Xiaomi, Bm280 , Broadlink,WifiLights

Répondre

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

Qui est en ligne ?

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