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 votre Plan / Design

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Avatar de l’utilisateur
Me_
Actif
Messages : 766
Inscription : 22 juin 2015, 22:28
Localisation : Guyane

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

Message par Me_ » 25 avr. 2018, 16:29

Me_ a écrit :
25 avr. 2018, 13:56
Micramaniac a écrit :
Me_ a écrit :
20 avr. 2018, 09:28


Salut @Micramaniac

Je n'avais pas jeté un coup d'oeil à mon design depuis un petit moment et je viens de voir que mon horloge (celle affichée sur le design) a également une heure de retard, alors que Jeedom est à l'heure.

Donc non, tu n'es pas tout seul ;)

Du coup, as-tu trouvé une solution?

Pour rappel, j'utilise le code donné dans ce fil:

Code : Tout sélectionner

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <meta name="robots" content="noindex,follow" />
    <link rel="canonical" href="http://www.zeitverschiebung.net/fr/" />
    
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400' rel='stylesheet' type='text/css' />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
    <style type="text/css">
        html {
            font-family: 'Ubuntu', Arial, sans-serif;
            font-weight: normal;
        }
        
        div.clock {
            width: 100%;
            text-align: center;

        }

            div.clock  {
                color: white;
          
                font-size: 18px;
                font-weight: normal;
                text-decoration: none;
            }

                div.clock a:hover {
                    text-decoration: underline;
                }

            div.clock div.date {
                color: white;
                font-size: 1.5em;
                margin: 8px 0;
            }

            div.clock div.time {
                font-size: 3em;
                font-weight: 200;
            }

                div.clock div.time span {
                    border-radius: 5px;
                    padding: 1px 4px 3px 4px;
                    color: #fff;

                    /* fallback */
                    background: #000;
                    /* Safari 4-5, Chrome 1-9 */
                    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#000));
                    /* Safari 5.1, Chrome 10+ */
                    background: -webkit-linear-gradient(top, #555, #000);
                    /* Firefox 3.6+ */
                    background: -moz-linear-gradient(top, #555, #000);
                    /* IE 10 */
                    background: -ms-linear-gradient(top, #555, #000);
                    /* Opera 11.10+ */
                    background: -o-linear-gradient(top, #555, #000);
                }

                div.clock div.time strong {
                    font-weight: 100;
                    font-size: 1em;
                    margin-left: 5px;
                    color: #666;
                }
    </style>
    
    <script type="text/javascript">
        var _gaq = _gaq || [];
        
        _gaq.push(['_setAccount', 'UA-378139-21']);         _gaq.push(['_gat._anonymizeIp']);
        _gaq.push(['_trackPageview']);
        
        (function() {
        var ga = document.createElement('script');ga.type = 'text/javascript';ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga, s);
        })();
    </script>
</head>
<body>    

    <div class="clock" id="clock">
        <div class="date"></div>
        <div class="time"></div>
    </div>
    
    <script type="text/javascript"><!--

        $(document).ready(function() {
            $("div#clock").simpleClock(1);
        });
        
        //***** SIMPLECLOCK PLUGIN http://ticktoo.com/blog/35-simpleClock+-+jQuery+Plugin *****/
        (function ($) {

          $.fn.simpleClock = function ( utc_offset ) {

            // Aktuelle Sprache ermitteln
            var language = "fr";

            // Tage & Monate in jeweiliger Landessprache
            switch (language) {
                case "de":
                    var weekdays = ["So.", "Mo.", "Di.", "Mi.", "Do.", "Fr.", "Sa."];
                    var months = ["Jan.", "Feb.", "Mär.", "Apr.", "Mai", "Juni", "Juli", "Aug.", "Sep.", "Okt.", "Nov.", "Dez."];
                    break;
                case "es":
                    var weekdays = ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"];
                    var months = ["Ene", "Feb", "Mar", "Abr", "Mayo", "Jun", "Jul", "Ago", "Sept", "Oct", "Nov", "Dic"];
                    break;
                case "fr":
                    var weekdays = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"];
                    var months = ["Jan", "Fév", "Mars", "Avr", "Mai", "Juin", "Juil", "Août", "Sept", "Oct", "Nov", "Déc"];
                    break;
                default:    // "en" -> Standard: Englisch
                    var weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
                    var months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
                    break;
            }

            var clock = this;

            // getTime - Where the magic happens ...
            function getTime() {
              var date = new Date();

              var nowUTC = date.getTime() + date.getTimezoneOffset()*60*1000;

              // alert( nowUTC +' vs. '+ date.getTime() );

              // Zeitverschiebung addieren/subtrahieren: X STD * 60 Min. * 60 Sek. * 1000 Millisek.
              date.setTime( nowUTC + (utc_offset*60*60*1000) );

              var hour = date.getHours();

                ///// AM, PM für Language "en"
                if ( language == "en" ) {
                    //it is pm if hours from 12 onwards
                    suffix = (hour >= 12)? 'p.m.' : 'a.m.';

                    //only -12 from hours if it is greater than 12 (if not back at mid night)
                    hour = (hour > 12)? hour -12 : hour;

                    //if 00 then it is 12 am
                    hour = (hour == '00')? 12 : hour;
                }

              return {
                day: weekdays[date.getDay()],
                date: date.getDate(),
                month: months[date.getMonth()],
                year: date.getFullYear(),
                hour: appendZero(hour),
                minute: appendZero(date.getMinutes()),
                second: appendZero(date.getSeconds())
              };
            }

            // appendZero - If the number is less than 10, add a leading zero. 
            function appendZero(num) {
              if (num < 10) {
                return "0" + num;
              }
              return num;
            }

            // refreshTime - Build the clock.
            function refreshTime(clock_id) {
                var now = getTime();
                clock = $.find('#'+clock_id);
                $(clock).find('.date').html(now.day + ', ' + now.date + '. ' + now.month + ' ' + now.year);
                $(clock).find('.time').html("<span class='hour'>" + now.hour + "</span>:<span class='minute'>" + now.minute + "</span>:<span class='second'>" + now.second + "</span>");

                if ( typeof(suffix) != "undefined") { // am oder pm ?
                    $(clock).find('.time').append('<strong>'+ suffix +'</strong>');
                }
            }

            // Get individual clock_id
            var clock_id = $(this).attr('id');

            // Tick tock - Run the clock.
            refreshTime(clock_id);
            setInterval( function() { refreshTime(clock_id) }, 1000);    

          };
        })(jQuery);
    //--></script>
    
</body>
</html>
Oui grâce à l'aide de Tonnerre33.
Voici sa réponse, cela fonctionne chez moi
tonnerre33 a écrit :
01 avr. 2018, 11:57
Salut essaye de commenter cette ligne en ajoutant deux // avant le code, comme ca :

Code : Tout sélectionner

//date.setTime( nowUTC + (utc_offset*60*60*1000) );
Nickel, je regarde ça.
Merci!
Edit: Ça fonctionne! Merci à toi et @Tonnerre33 dont je n'avais pas vu la réponse!!!
Présentation
Mon matériel: ici

benj
Timide
Messages : 150
Inscription : 08 janv. 2016, 22:47
Contact :

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

Message par benj » 28 avr. 2018, 18:00

benj29 a écrit :
25 avr. 2018, 13:41
Merci, pour la plupart, je les ai faites en utilisant ce site comme apport :
https://www.flaticon.com/
Merci pour ta réponse, un site bien rempli !
Autre petite question : quelle police utilise tu dans le titre des cadres? Je la trouve sympa et facile à lire sans pour autant mettre en gras.


Boboss
Timide
Messages : 218
Inscription : 31 déc. 2014, 11:33

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

Message par Boboss » 29 avr. 2018, 17:00

Bonsoir
Sur le design, j'essaye désespérément de déplacer un objet avec la souris comme sur la video de winhex.
Je déplace l'objet avec les coordonnées mais avec la souris c'est plus facile.
Est ce qu'il y a un paramètre quelque part ? une touche ? Sur la video, winhex prend l'objet et le déplace sans soucis.
Image
Pièces jointes
design.JPG
design.JPG (42.82 Kio) Consulté 1786 fois
Boboss

esso1
Actif
Messages : 858
Inscription : 03 oct. 2017, 12:26

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

Message par esso1 » 29 avr. 2018, 17:06

essai avec chrome

Boboss
Timide
Messages : 218
Inscription : 31 déc. 2014, 11:33

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

Message par Boboss » 29 avr. 2018, 17:33

Ah oui c'est mieux avec chrome. J'étais avec firefox.

Merci pour le tuyau.
Boboss

Avatar de l’utilisateur
Nibb31
Actif
Messages : 2155
Inscription : 17 févr. 2015, 15:29

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

Message par Nibb31 » 29 avr. 2018, 19:14

Et mets à jour ton Jeedom. Ce bug est corrigé dans en 3.2.
Jeedom: VM ProxMox sur serveur i7-2760QM, RAM 8Go
Zwave + RFXCom433E + Hue

benj29
Actif
Messages : 3982
Inscription : 26 mars 2017, 09:57
Contact :

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

Message par benj29 » 29 avr. 2018, 19:16

Nibb31 j'ai cherché à voir si tu avais partagé tes designs tu l'avais fait ?

Envoyé de mon Moto G (5S) Plus en utilisant Tapatalk


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

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

Message par winhex » 30 avr. 2018, 10:57

@sartog
merci pour le partage

j'ai joint sur un design 2 petit widget (vent et UV "couleur indice")
Pièces jointes
20180430_105335.png
20180430_105335.png (127.48 Kio) Consulté 1716 fois

Sartog
Actif
Messages : 502
Inscription : 27 août 2015, 14:54

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

Message par Sartog » 30 avr. 2018, 14:43

winhex a écrit :
30 avr. 2018, 10:57
@sartog
merci pour le partage

j'ai joint sur un design 2 petit widget (vent et UV "couleur indice")
C'est pas bête du tout ton idée !!!
Ça me donne idée; tester de modifier le widget pour y intégrer l'affichage du vent, pluie et Graminées (j'y suis allergique) (donc ajouter ces valeurs au virtuel également) !!
Box : smart, mini+, pi 2 et 3, ipbx800 v4
Protocole : Z-Wave (Fibaro & Qubino), Ikea, Bluetooth
Méteo : Netatmo
Audio : Sonos (Play 1 et 5)

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

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

Message par winhex » 30 avr. 2018, 15:26

créé un sujet
se sera plus simple pour le suivi, idée ,...

encore merci, belle trouvaille visuel et technique

Yves19
Timide
Messages : 86
Inscription : 24 févr. 2018, 21:25
Localisation : Versailles

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

Message par Yves19 » 01 mai 2018, 22:57

Bonsoir à tous (et toutes).

J'essaie avec désespoir de changer le style de présentation du résumé domotique sur mes plans (design).
A chaque résumé que j'intègre ce dernier est désespérément en couleur de police noire. Donc pas top sur des fonds foncés.
Quelles sont les solutions que vous avez mises en place pour customiser ces résumés de votre coté ?

Je parle bine des résumés que l'on insère avec la commande "Ajouter un résumé" dans les "Design".

Bine cordialement.

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2713
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

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

Message par Theduck38 » 02 mai 2018, 16:29

Hello,

Tu devrais plutôt créer un virtuel basé sur ton résumé (il y a la fonction dans le résumé). Puis tu customises ton virtuel avec un tableau et une police comme tu veux.
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

fcna
Actif
Messages : 825
Inscription : 15 mars 2015, 16:14
Localisation : Toulouse

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

Message par fcna » 04 mai 2018, 15:54

Pour info, un petit widget pour la piscine

piscine.PNG
piscine.PNG (253.65 Kio) Consulté 1466 fois
c'est ici:
viewtopic.php?f=29&t=37196
Mini +
Fibaro FGMS-001
Qubino Fil Pilote 6 / Module Vlts roulants
Aeon Labs mono G2 60A
Fibaro Wall Plug / Smoke Sensor

ImperiHome Standard System /Pushing Box/Energie/ Philips Hue / Agenda / Clock / Géolocalisation / Themes / ...

np50
Timide
Messages : 28
Inscription : 20 mars 2017, 06:03

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

Message par np50 » 06 mai 2018, 06:58

Bonjour

même soucis que Yves 19
La personnalisation des résumés pour le mode design est impossible
Surtout j'ai plus possibilité d'harmoniser les couleurs sauf à tout refaire vu que mon fond de design est noir et que maintenant la police est noire aussi

c'est un peu casse pied d'avoir des soucis de se genre des qu'il y a une mise à jour

moi la le personnalisation d'un widget regroupant les infos ne me convient pas mais si j'ai pas le choix

cordialement

Sartog
Actif
Messages : 502
Inscription : 27 août 2015, 14:54

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

Message par Sartog » 06 mai 2018, 08:54

np50 a écrit :
06 mai 2018, 06:58
Bonjour

même soucis que Yves 19
La personnalisation des résumés pour le mode design est impossible
Surtout j'ai plus possibilité d'harmoniser les couleurs sauf à tout refaire vu que mon fond de design est noir et que maintenant la police est noire aussi

c'est un peu casse pied d'avoir des soucis de se genre des qu'il y a une mise à jour

moi la le personnalisation d'un widget regroupant les infos ne me convient pas mais si j'ai pas le choix

cordialement
Si tu utilise une couleur particulière pour l'ensemble de ton design, tu l'ajoute dans la balise body de ton css afin qu'elle s'applique partout (il te faudra peut être ajouter !impotant à la fin).

Code : Tout sélectionner

body {
  color: rgba(255,255,255,1);
}
Si tu utilise plusieurs couleurs / tu souhaite une couleur spécifique à ton résumé, il te faut ajouter cela à ton css :

Code : Tout sélectionner

.objectSummaryglobal{
  color: rgba(255,255,255,1);
}
Ou

Code : Tout sélectionner

.objectSummaryParent{
   color: rgba(255,255,255,1);
}
(Je ne sais plus lequel des 2 fonctionne).
Box : smart, mini+, pi 2 et 3, ipbx800 v4
Protocole : Z-Wave (Fibaro & Qubino), Ikea, Bluetooth
Méteo : Netatmo
Audio : Sonos (Play 1 et 5)

Yves19
Timide
Messages : 86
Inscription : 24 févr. 2018, 21:25
Localisation : Versailles

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

Message par Yves19 » 06 mai 2018, 15:58

Merci pour cette suggestion Sartog.
Malheureusement cela ne marche pas.
Le code css qui est placé dans la configuration globale ne concerne si ma mémoire est bonne que le dashboard (ou le mobile selon le cas) mais pas les designs.
Quant à passer par les virtuels c'est un peu la galère à chaque fois que j'ajoute un élément de résumé (ma domotique est en pleine expansion en ce moment) dans un design.
Je ne me souviens plus comment j'avais fait mais par le passé j'ai réussi à changer la couleur des icônes et du texte en modifiant un css. Mais lequel that is the question.

Sartog
Actif
Messages : 502
Inscription : 27 août 2015, 14:54

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

Message par Sartog » 06 mai 2018, 17:32

Yves19 a écrit :
06 mai 2018, 15:58
Merci pour cette suggestion Sartog.
Malheureusement cela ne marche pas.
Le code css qui est placé dans la configuration globale ne concerne si ma mémoire est bonne que le dashboard (ou le mobile selon le cas) mais pas les designs.
Quant à passer par les virtuels c'est un peu la galère à chaque fois que j'ajoute un élément de résumé (ma domotique est en pleine expansion en ce moment) dans un design.
Je ne me souviens plus comment j'avais fait mais par le passé j'ai réussi à changer la couleur des icônes et du texte en modifiant un css. Mais lequel that is the question.
Tu peux appliquer ce css uniquement à ton design en utilisant la configuration globale mais dans ce cas tu dois utiliser le bloc javascript et non css.
Sous réserve de vérification / test, et d'après ce fils viewtopic.php?f=50&t=15104,

Code : Tout sélectionner

if(window.location.href.indexOf("p=plan") > -1) {
       ===VOTRE CODE ICI===
}
Box : smart, mini+, pi 2 et 3, ipbx800 v4
Protocole : Z-Wave (Fibaro & Qubino), Ikea, Bluetooth
Méteo : Netatmo
Audio : Sonos (Play 1 et 5)

Yves19
Timide
Messages : 86
Inscription : 24 févr. 2018, 21:25
Localisation : Versailles

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

Message par Yves19 » 06 mai 2018, 17:37

Sartog a écrit :
06 mai 2018, 08:54
np50 a écrit :
06 mai 2018, 06:58
Bonjour

même soucis que Yves 19
La personnalisation des résumés pour le mode design est impossible
Surtout j'ai plus possibilité d'harmoniser les couleurs sauf à tout refaire vu que mon fond de design est noir et que maintenant la police est noire aussi

c'est un peu casse pied d'avoir des soucis de se genre des qu'il y a une mise à jour

moi la le personnalisation d'un widget regroupant les infos ne me convient pas mais si j'ai pas le choix

cordialement
Si tu utilise une couleur particulière pour l'ensemble de ton design, tu l'ajoute dans la balise body de ton css afin qu'elle s'applique partout (il te faudra peut être ajouter !impotant à la fin).

Code : Tout sélectionner

body {
  color: rgba(255,255,255,1);
}
Si tu utilise plusieurs couleurs / tu souhaite une couleur spécifique à ton résumé, il te faut ajouter cela à ton css :

Code : Tout sélectionner

.objectSummaryglobal{
  color: rgba(255,255,255,1);
}
Ou

Code : Tout sélectionner

.objectSummaryParent{
   color: rgba(255,255,255,1);
}
(Je ne sais plus lequel des 2 fonctionne).
Ca y est j'ai la mémoire qui est revenue.
En fait il faut sur chaque design où l'on veut insérer un ou des résumés avec une présentation spécifique ajouter une zone de texte HTML et insérer dans celle ci le code css avec la modification de la classe .objectSummaryglobal comme décrit par Sartog.

flomoneco
Timide
Messages : 17
Inscription : 11 juin 2017, 18:27

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

Message par flomoneco » 12 mai 2018, 09:42

Salut à tous ;)

Je suis depuis un moment le forum mais je me lance seulement dans le design de mon jeedom ;)
Je viens vers vous car je rencontre assez rapidement un problème ... je me retrouve avec un "margin imaginaire et non déclaré dans mes fichiers " que je voudrais supprimer.

Pour les fichiers on ne peux faire plus basique, à savoir menu de FB33 retravaillé selon le style graphique choisi pour mon projet mais je remet l'ensemble du code ici (assez succin)


HTML :

Code : Tout sélectionner


<LINK href="montheme/perso_blackrose.css" rel="stylesheet" type="text/css">

<div class="menu_top">

<ul class="monmenu">


	<a onClick="planHeader_id=5; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/ico_home.png" height=32px width=32px></div></br></br></li></a>

	<a onClick="planHeader_id=ID DU PLAN; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/ico_lux.png" height=32px width=32px></div></br></li></a>

	<a onClick="planHeader_id=ID DU PLAN; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/ico_energy.png" height=32px width=32px></div></li></a>

	<a onClick="planHeader_id=ID DU PLAN; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/ico_chauffage.png" height=32px width=32px></div></a>

<a onClick="planHeader_id=ID DU PLAN; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/ico_stats.png" height=32px width=32px></div></a>

</ul>

</div>
CSS :

Code : Tout sélectionner

div.menu_top
{
    width:1025px;
    height:70px;
    font-size: 16px;
    min-height: 53px;
    margin-bottom: 30px;
    border: none;
    border-radius: 6px;
    padding: 0;

}

ul.monmenu ul.monmenu_sep
{

	list-style-type:none;
	color:rgba(255,255,255,0.8);
	font-family:Roboto;
	font-size: 16px;
	font-weight: normal;
}

li.monmenu
{

	display:inline-block;
	width: 180px;
	margin-left: -5px;
	text-align: center;
	height: 45px;
	padding-top: 10px;
    background-color: #4c4b4b;
}

div.imagette
{
	text-align: center;
	margin-bottom: 5px;
	opacity: 0.9;
}

li.monmenu:hover{
    background-color:#df1e76;
    transition: .25s;
}

li.selected{
	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	background-color: rgba(255,255,255,0.2);
}


Voici le résultat et voici la page d'acceuil en mode normal pour ceux que ça intéresse ^^:
Image Image

Je voudrais coller mon menu tout à gauche en tout cas ne pas retrouver cette marge énorme, une idée ?

Merci pour votre aide toujours aussi précieuse ;)

Répondre

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

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité