Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

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

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Avatar de l’utilisateur
Sshafi
Actif
Messages : 3882
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

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

Message par Sshafi » 01 févr. 2016, 11:59

Afin de personnalisé l'apparence de votre jeedom, en plus des widgets/vues/plans/thèmes il existe la personnalisation avancée qui permet de modifier l'apparence de jeedom via du javascript ou du css.
Ces options de personnalisation avancée ne sont disponible qu'en mode expert dans le menu "rouages" en haut à droite de jeedom.

Je vous propose dans ce sujet de partager vos customizations afin d'en faire profiter la communauté....

! Attention une mauvaise customization peut vous faire perdre la main sur l'interface web de votre jeedom !

Afin que celà soit plus clair pour tout le monde, je vous propose les règles suivantes :
  • Essayer de séparer vos customizations en différentes parties afin que chacun puisse piocher juste ce qui l'intéresse.
  • Mettre le code dans une balise code. (Ca parait évident mais bon, ..... ;) )
  • Dire dans qu'elle partie (Javascript/css) le code est à mettre.
  • Mettre un screenshot de la partie concernée par chaque custo.
Autres sources d'inspirations :
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

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

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

Message par Sshafi » 01 févr. 2016, 12:00

Remarques pour les customisations javascript :
  • Afin que la custo s'exécute bien une fois la page chargée, le code doit être entouré de ça :

    Code : Tout sélectionner

    $(document).ready (function(){
           ===VOTRE CODE ICI===
    });
  • Dès fois certaines custo se trouvent écrasées par le code du core, il faut donc retarder l'exécution de votre code custo afin qu'il s'exécute tout à la fin (La valeur 500 est à adapter en fonction de la rapidité du navigateur), voici le code :

    Code : Tout sélectionner

    setTimeout(function(){
           ===VOTRE CODE ICI===
    }, 500);
    
  • Afin de n'exécuter votre customisation que sur certaines parties de votre jeedom (Dashboard/Vues/Plans) il est possbile via javascript de n'exécuter le code que sur ces pages en faisant le test suivant (Enlever les parties qui ne vous intéressent pas) Ici au niveau du design on ne l'applique que sur celui qui a l'id 4 :

    Code : Tout sélectionner

    if((window.location.href.indexOf("p=dashboard") > -1) || (window.location.href.indexOf("p=view") > -1) || (window.location.href.indexOf("p=plan&plan_id=4") > -1)) {
           ===VOTRE CODE ICI===
    }
    
  • Pour appliquer du CSS avec Javascript (Afin de ne l'appliquer que sur le dashboard par exemple) celà fonctionne comme ça :

    Code : Tout sélectionner

    /* Dans cet exemple on modifie toutes les balises de type H1 (grâce à un sélecteur jquery) en alignant au centre, couleur rouge et bordure bleue. */
    $('h1').css({
          'text-align':'center',
          'color':'red',
          'borderColor':'blue'
    });
    
Rmq: Pour une liste des sélecteurs jquery, voir ici : http://creersonsiteweb.net/page-jquery-selecteurs

En appliquant les quatres remarques dans le même code, celà nous donne :

Code : Tout sélectionner

$(document).ready (function(){
     setTimeout(function(){
          if((window.location.href.indexOf("p=dashboard") > -1) || (window.location.href.indexOf("p=plan") > -1)) {
               $('h1').css({
                    'text-align':'center',
                    'color':'red',
                    'borderColor':'blue'
               });
          }
     }, 500);
});
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

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

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

Message par Sshafi » 01 févr. 2016, 12:00

Donc je commence :
  • Mettre une image de fond sur toutes les pages de Jeedom (J'ai mis l'image dans /usr/share/nginx/www/jeedom/desktop/custom/).
    CSS :

    Code : Tout sélectionner

    body {
        background-image: url("parquet01.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: rgb(51, 153, 243);
    }
    
    Image
  • Modification des tuiles afin d'avoir les bords arrondis, une ombre derrière et un fond translucide.
    CSS :

    Code : Tout sélectionner

    .eqLogic-widget { 
        border-radius: 15px !important; 
        box-shadow: 0px 3px 10px #0d0d0d !important;
        background-color: rgba(0,0,0,0.25) !important;
    }
    
    custo_tuile.png
    custo_tuile.png (62.78 Kio) Consulté 19519 fois
  • Modification pour les problèmes de checkbox superposées (Catégories des équipements) lors de l'utilisation de thèmes autres que le défaut.
    CSS :

    Code : Tout sélectionner

    [type="checkbox"] {
    	position: relative !important; 
      	top: 0px !important;
    }
    
    custo_cat.png
    custo_cat.png (33.15 Kio) Consulté 19519 fois
  • Des flocons de neiges tombent sur le dashboard (Dans la dernière ligne on peu paramétrer la taille, la fréquence et la couleur)
    JS :

    Code : Tout sélectionner

    (function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('❄'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);
    $(document).ready( function(){
            $.fn.snow({ minSize: 5, maxSize: 30, newOn: 100, flakeColor: '#FFFFFF' });
    });
    
    custo_neige.png
    custo_neige.png (74.27 Kio) Consulté 19405 fois
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

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

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

Message par Sshafi » 01 févr. 2016, 12:01

  • Modification (Centrage/Soulignage/Couleur fond et texte) des noms d'objets dans le dashboard et des titres dans le reste de l'interface.
    Je fais le centrage en JS pour que ça ne le fasse que sur le dashboard car dans le reste de l'interface je trouve pas ça clair.
    JS :

    Code : Tout sélectionner

    $('legend').css({'text-align':'center'});
    
    CSS :

    Code : Tout sélectionner

    legend {
        background-color: rgba(0, 0, 0, 0.17);
        border-bottom: 2px solid #3399F3;
        color: rgb(51, 153, 243);
    }
    
    custo_titres.png
    custo_titres.png (640.8 Kio) Consulté 19378 fois
  • Modification des cartes d'équipements (plugins), widgets, scénarios pour avoir l'arrondi, l'ombre et le fond translucide.
    CSS :

    Code : Tout sélectionner

    .eqLogicDisplayCard, .widgetDisplayCard, .scenarioDisplayCard { 
        border-radius: 15px !important; 
        box-shadow: 0px 3px 10px #0d0d0d !important;
        background-color: rgba(255,255,255,0.60) !important;
    }
    
    custo_cartes.png
    custo_cartes.png (137.57 Kio) Consulté 19378 fois
  • Modification des boutons de fonctions des scénarios/zwave/rfxcom pour avoir un fond transparent.
    CSS :

    Code : Tout sélectionner

    .eqLogicAction, .changeIncludeState, #bt_addScenario2, #bt_changeAllScenarioState2, #bt_displayScenarioVariable2, #bt_syncEqLogic, #bt_zwaveNetwork, #bt_zwaveHealth {
      	background-color: rgba(255,255,255,0) !important;
    }
    
    JS :

    Code : Tout sélectionner

    $('#bt_zwaveNetwork i,#bt_zwaveNetwork span,#bt_syncEqLogic i,#bt_syncEqLogic span,#bt_zwaveHealth i,#bt_zwaveHealth span').css({'color':'#3399F3'});
    
    custo_funct.png
    custo_funct.png (107.13 Kio) Consulté 19371 fois
===========================================================================================================
Autres contributions du topic :
  • Agrandissement du fond des cartes des scénarios : ICI
  • Modification du fond de la liste des widgets dans le plugin : ICI
  • Enlever le fond des cartes des scénarios : ICI
  • Modification du fond des cartes des plugins : ICI
  • Agrandissement du fond des cartes des scénarios et modification du bouton market : ICI
  • Des boutons et des menus arrondis : ICI
  • Refonte complète de l'interface jeedom : ICI
  • Augmenter l'espace entre les tuiles & Mettre un fond sur les tuiles (que sur tablette) : ICI
  • Personnaliser les scrollbars : ICI
  • Une customisation complète du thème slate : ICI
  • Un thème de design, avec fond changeant suivant météo et heure : ICI
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
Syll
Actif
Messages : 1577
Inscription : 14 janv. 2015, 18:46
Contact :

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

Message par Syll » 01 févr. 2016, 12:03

Cool de reprendre le topic qu'on avait inité mais qui s'est perdu au fil du temps dans les abysses du forum lol

ça va permettre un peu plus de personnalisation pour les bidouilleurs xD
Jeedom - ESXi 6.7U2 - VM Debian 9.9 | 60 Modules Zwave | 12 Modules RFXCom | 15 modules Xiaomi | GSM/JPI | Kodi | SqueezeBox | GH |

Avatar de l’utilisateur
marmoul
Actif
Messages : 891
Inscription : 01 sept. 2015, 15:50
Localisation : Haute-Saône (70)

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

Message par marmoul » 01 févr. 2016, 12:11

Ah oui cool sa merci

toregreb
Actif
Messages : 2510
Inscription : 20 août 2014, 22:19

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

Message par toregreb » 01 févr. 2016, 12:25

Ah oui, merci @Sshafi, bonne initiative. :)
Jeedom v2.2.6 sur RPi2+razberry (Zwave)+RFXCom, Enocean et MySensors.
[TUTO]Index HP/HC avec pinces Ampèremétriques
Trucs&Astuces

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

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

Message par Sshafi » 01 févr. 2016, 12:26

@Syll : je ne me souvient plus que l'on en avait commencé un, si tu le retrouve je mettrais un lien vers celui là dans les premiers posts ;)
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
Claude69
Actif
Messages : 2089
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

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

Message par Claude69 » 01 févr. 2016, 12:53

Sshafi a écrit :@Syll : je ne me souvient plus que l'on en avait commencé un, si tu le retrouve je mettrais un lien vers celui là dans les premiers posts ;)
@Sshafi
Super idée.
Les premiers prémices se trouvent dans le post "Trucs et astuces" viewtopic.php?f=59&t=10025#p192867
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.33 ULTIMATE

Mon matériel ici

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

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

Message par Sshafi » 01 févr. 2016, 13:57

Merci ;)
@Claude69 : oui j'ai mis des trucs là au fur et à mesure, mais comme le dit sylle (c'est rien que pour t'embêter le e :lol:) il me semble qu'il y a eu un topic déjà sur les custom... Je sais plus...

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

Avatar de l’utilisateur
Syll
Actif
Messages : 1577
Inscription : 14 janv. 2015, 18:46
Contact :

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

Message par Syll » 01 févr. 2016, 14:09

Sshafi a écrit :@Syll : je ne me souvient plus que l'on en avait commencé un, si tu le retrouve je mettrais un lien vers celui là dans les premiers posts ;)
Y'avait 2 topcis :
- Le 1er c'était dans la personnalisation de votre Dashboard qui était en Post-It
- Le 2ème je le retrouve pas. je sais que Winhex était pas mal dessus. Mais j'ai trouvé d'autres topics qui avait quelques briques comme le Mode Design viewtopic.php?f=24&t=922&start=880

EDIT :
Je l'aiiiiiiiiiiiiiiiiiiiiiiiii... lol me suis farci tous les topics
viewtopic.php?f=23&t=9266
Jeedom - ESXi 6.7U2 - VM Debian 9.9 | 60 Modules Zwave | 12 Modules RFXCom | 15 modules Xiaomi | GSM/JPI | Kodi | SqueezeBox | GH |

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

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

Message par Sshafi » 01 févr. 2016, 14:44

Syll a écrit : EDIT :
Je l'aiiiiiiiiiiiiiiiiiiiiiiiii... lol me suis farci tous les topics
viewtopic.php?f=23&t=9266
Bravo et merci Syll pour cette archéologie du forum :lol:
J'ai édité le premier post ;)
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

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

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

Message par winhex » 01 févr. 2016, 16:37


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

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

Message par Sshafi » 02 févr. 2016, 01:45

Bon moi j'ai mis tout ce que j'avais dans mon jeedom, à vous maintenant de partager :D
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
yogui
Actif
Messages : 797
Inscription : 11 févr. 2015, 21:52
Localisation : Alsace

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

Message par yogui » 02 févr. 2016, 06:25

Petit hs sans l'être: j'ai modifié le pluging de skylab-ch pour faire clignoter la tuile en fonction dune valeur. Par defaut j'ai pris le blanc comme valeur du text y a il un moyen de récupérer la couleur par défaut du texte de la tuile ce qui me permettrait de faire clignoter la tuiles plus proprement de ceux qui on modifier leur couleur de police en css
Raspberry PI 2 , Razberry Zwave +
Fibaro FGRM-222
Qubino ZMNHCA2
Fibaro FGS-222
Qubino ZMNHBA2
Everspring AN180-6
Everspring Z-WAVE SP-103
Raspberry Pi 2 + touch 3.5" en Squeezebox
Modules Mysensors

Dev. Librairie Arduino pour Somfy RTS

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

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

Message par Sshafi » 02 févr. 2016, 08:17

Hs : C'est skyline et non skylab ;) c'est pas la même choseEt c'est pas un plugin mais un widget ;)

--bla bla bla--

Je m'automodère car je n'avais pas bien compris la question ;)

Il faudrait sans doute lancer une fonction jquery pour connaître la couleur et la stocker avant que tu modifie la couleur....mais pas sûr, chui pas un pro,... @skyline-ch t'as une idée ?

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

Avatar de l’utilisateur
yogui
Actif
Messages : 797
Inscription : 11 févr. 2015, 21:52
Localisation : Alsace

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

Message par yogui » 02 févr. 2016, 10:05

Merci pour ta réponse et ds pr les petite erreur
Raspberry PI 2 , Razberry Zwave +
Fibaro FGRM-222
Qubino ZMNHCA2
Fibaro FGS-222
Qubino ZMNHBA2
Everspring AN180-6
Everspring Z-WAVE SP-103
Raspberry Pi 2 + touch 3.5" en Squeezebox
Modules Mysensors

Dev. Librairie Arduino pour Somfy RTS

Avatar de l’utilisateur
Darkeyes
Actif
Messages : 1287
Inscription : 02 avr. 2015, 08:37

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

Message par Darkeyes » 02 févr. 2016, 10:33

Sympas de partager, je vais pouvoir personnaliser mon jeedom plus facilement et éviter qu'elles heures de recherche ;)
Développement script:
- ssh_commande.php
- ip_public.sh
- BackupSamba.sh

Avatar de l’utilisateur
Claude69
Actif
Messages : 2089
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

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

Message par Claude69 » 02 févr. 2016, 14:08

Hello, Super ce post.
J'ai mis en oeuvre une des astuces :

Code : Tout sélectionner

    .eqLogicDisplayCard, .widgetDisplayCard, .scenarioDisplayCard {
        border-radius: 15px !important;
        box-shadow: 0px 3px 10px #0d0d0d !important;
        background-color: rgba(255,255,255,0.60) !important;
    }
Il me semble que cela devrait impacter les plugins, widgets et les des scénarios.
Sans titre2.jpg
Sans titre2.jpg (65.88 Kio) Consulté 19187 fois
Sans titre1.jpg
Sans titre1.jpg (115.85 Kio) Consulté 19187 fois
Comme vous pouvez le voir, les scénarios, ne s'allongent pas et le nom est à cheval sur la tuile. Peut on améliorer le visuel ?
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.33 ULTIMATE

Mon matériel ici

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

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

Message par Sshafi » 02 févr. 2016, 15:09

@Claude69 : Ce n'est pas la customisation que tu as faite qui modifie la taille des cartes, c'est le fait d'avoir mis un fond qui met en évidence ce problème sur les cartes des scénarios.
Ça me triturai aussi depuis un certain temps et hier soir j'ai réussi à faire quelque chose en javascript pour corriger tout ça :
JS:

Code : Tout sélectionner

 $('div.scenarioDisplayCard span').css({'position':''});
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Répondre

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

Qui est en ligne ?

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