[S'inspirer] Postez votre Plan / Design

Me_ · 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!!!

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

benj29 · Message par **benj29** » 28 avr. 2018, 18:29

Montserrat

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

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

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

essai avec chrome

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

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

Merci pour le tuyau.

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

Et mets à jour ton Jeedom. Ce bug est corrigé dans en 3.2.

benj29 · 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 · 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")

Sartog · 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) !!

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

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.

fcna · Message par **fcna** » 04 mai 2018, 15:54

Pour info, un petit widget pour la piscine

: piscine.PNG (253.65 Kio) Consulté 2775 fois

c'est ici:
viewtopic.php?f=29&t=37196

np50 · 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 · 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).

Yves19 · 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 · 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===
}

Yves19 · 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 · 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 ^^:

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

[S'inspirer] Postez votre Plan / Design

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Qui est en ligne ?