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 !

[Présentation] F$B33

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
nonobike
Timide
Messages : 2
Inscription : 10 août 2015, 16:54

Re: [Présentation] F$B33

Message par nonobike » 14 mars 2016, 15:46

Bonjour a tous

tout d'abord BRAVO pour ton travail et ton partage

j'ai cependant deux petites questions

comment tu a fait affiché l'heure ( sachant que sur le market aucune application heure est compatible avec la version 2.0 de jeedom )
rond rouge

comment tu a tu rendu transparent le plugin météo sachant que c'est pas proposé dans le menu ( comme les noeuds )
rond vert
Sans titre.png
Sans titre.png (438.27 Kio) Consulté 2244 fois


merci de votre aide

vouvrat
Timide
Messages : 64
Inscription : 01 févr. 2016, 11:59
Localisation : 91 - Essonne

Re: [Présentation] F$B33

Message par vouvrat » 14 mars 2016, 17:07

Salut, la réponse est donnée en page 5 ;)

viewtopic.php?f=50&t=14863&start=80#wrap à partir du second message de la page d'autre information sont donnée plus bas pour le problème du cadre blanc ^^
Hystou: Jeedom / Dev / Blea / LMS / Apache
1 Rpi2 antenne BLEA
Xiaomi: 1 Présence + 1 Porte + 3 Temp.Hum + 3 Yeelight RGB
Gateway USB by LAREGIE pour MySensor
Arduino Uno +5 Arduino Pro mini MySensors.

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

Re: [Présentation] F$B33

Message par marmoul » 14 mars 2016, 20:45

F$B33 a écrit :
fred59190 a écrit :bonjour merci c'est tip top :)
j ai suivi les 3 VIDÉOS,
mais je ne capte pas pour le fond d ecran?
le script je l ai crée mais comment je l'integre a mon designe pour qu il change d image?
Bonjour. Tu dois avoir une image de fond existante. Le script la remplacera suivant la meteo, le jour et la nuit. Normalement la vidéo doit t'apporter la solution.

Penses à modifier le fichier wallchange.php en indiquant bien le nom de ton fond initial ( dans plan\lenomdetonfichier.jpg)
Bebel27 a écrit :Comment faite vous pour mettre l'heure ?
J'utilise ce code html :

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>

À insérer à l'aide d'un iframe.
Antrax a écrit :C'est magnifique!!

une fois le cadre réalisé, quand on met un widget devant, il faut jouer avec les niveau pour que le widget soit au dessus du cadre?
Oui, tu peux mettre le cadre en position -1

marmoul a écrit :J'adore bravo a toi!!
A l'occasion tu pourrais explique comment tu a fait pour Xcode car je suis dans le meme cas que toi pour mon iPad j'ai cette horrible statubar..
Merci

Edit: Dans ton tuto je n'arrive pas a ajouter le tout premier dossier directement dans la racine de Jeedom... surement un PB d'accès .. quelqu'un a une idée?
J'ai un cadenas dessus..

Ok pour Xcode, je ferai une vidéo ;)

Concernant les droits, essaie de faire un chmod 750 en ssh


.
vouvrat a écrit :Salut à tous, franchement ce theme est TOP merci à toi F$B33 pour le partage de tes sources. Ma femme était pas trop partante pour de la domotique mais la elle adopte juste à partir de ton design des possibilités donc je lui est parler.

Merci encore.
Content que ça plaise à ta femme :)
Je me permets de te relancer pour le tuto pour Xcode je suis vraiment curieux de voir le fonctionnement..
Merci :D

F$B33
Timide
Messages : 52
Inscription : 24 janv. 2016, 20:01

Re: [Présentation] F$B33

Message par F$B33 » 14 mars 2016, 22:24

Désolé j'avais complètement oublié ! Voici le lien YouTube dont je le suis inspiré :

http://youtu.be/Rva9ylPHi2w

Je te prépare un auto.
nonobike a écrit :Bonjour a tous

tout d'abord BRAVO pour ton travail et ton partage

j'ai cependant deux petites questions

comment tu a fait affiché l'heure ( sachant que sur le market aucune application heure est compatible avec la version 2.0 de jeedom )
rond rouge

comment tu a tu rendu transparent le plugin météo sachant que c'est pas proposé dans le menu ( comme les noeuds )
rond vert
Sans titre.png


merci de votre aide

Vouvrat a donné la réponse a ta première question (Merci à toi).

Avant la mise a jour en 2.0, le plugin météo pouvait être transparent. Après la mise a jour il a gardé la transparence mais en effet, je ne retrouve pas l'option.

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

Re: [Présentation] F$B33

Message par marmoul » 15 mars 2016, 12:51

Un grand merci à toi sa fonctionne nickel!!!

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

Re: [Présentation] F$B33

Message par marmoul » 15 mars 2016, 16:28

Encore un question à propos de l'agenda tu te sers de quel pluging/widget pour pouvoir avoir l'affichage par petit cadre des info de ta journée?
Encore merci :D

nonobike
Timide
Messages : 2
Inscription : 10 août 2015, 16:54

Re: [Présentation] F$B33

Message par nonobike » 16 mars 2016, 08:10

Bonjour

Merci de vos reponse mais la code

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>
ne marche pas avec la version 2.0 de jeedom

une fois le code insérer jeedom reste bloqué sur la roue denté et après ma page n'est plus disponible en mode édition .....

abarrau
Actif
Messages : 977
Inscription : 22 déc. 2014, 13:12

Re: [Présentation] F$B33

Message par abarrau » 16 mars 2016, 09:14

très impressionnant ... au moment où je me met aux design .. je m'en inspire ;)
Merci pour le partage de ce travail !

vouvrat
Timide
Messages : 64
Inscription : 01 févr. 2016, 11:59
Localisation : 91 - Essonne

Re: [Présentation] F$B33

Message par vouvrat » 16 mars 2016, 09:46

nonobike a écrit :Bonjour

Merci de vos reponse mais la code

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>
ne marche pas avec la version 2.0 de jeedom

une fois le code insérer jeedom reste bloqué sur la roue denté et après ma page n'est plus disponible en mode édition .....
@nonobike

Bonjour,

Pour que cela fonctionne il faut bien suivre la procédure c'est-à-dire:

1° Création d'un fichier (comme donner par F$B33 clock.html) HTML avec le code fourni précédemment.
2° envoyer le fichier HTML dans le répertoire 'montheme' si tu a repris le thème de F$B33
3° dans ta page vue tu fais modification ajout Texte/HTML et tu colles ce code-ci: <iframe src="montheme/clock.html" frameborder=0> </iframe>

Attention n'ajoute pas le 'frameborder=0' de suite, car perso une fois mis le cadre blanc disparaîtra et pas moyen de bouger l'horloge. Rajoute-le une fois que ton horloge serra en place.

Qu'on me corrige si j'ai loupé une étape.
Hystou: Jeedom / Dev / Blea / LMS / Apache
1 Rpi2 antenne BLEA
Xiaomi: 1 Présence + 1 Porte + 3 Temp.Hum + 3 Yeelight RGB
Gateway USB by LAREGIE pour MySensor
Arduino Uno +5 Arduino Pro mini MySensors.

F$B33
Timide
Messages : 52
Inscription : 24 janv. 2016, 20:01

Re: [Présentation] F$B33

Message par F$B33 » 16 mars 2016, 10:00

vouvrat a écrit :
nonobike a écrit :Bonjour

Merci de vos reponse mais la code

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>
ne marche pas avec la version 2.0 de jeedom

une fois le code insérer jeedom reste bloqué sur la roue denté et après ma page n'est plus disponible en mode édition .....
@nonobike

Bonjour,

Pour que cela fonctionne il faut bien suivre la procédure c'est-à-dire:

1° Création d'un fichier (comme donner par F$B33 clock.html) HTML avec le code fourni précédemment.
2° envoyer le fichier HTML dans le répertoire 'montheme' si tu a repris le thème de F$B33
3° dans ta page vue tu fais modification ajout Texte/HTML et tu colles ce code-ci: <iframe src="montheme/clock.html" frameborder=0> </iframe>

Attention n'ajoute pas le 'frameborder=0' de suite, car perso une fois mis le cadre blanc disparaîtra et pas moyen de bouger l'horloge. Rajoute-le une fois que ton horloge serra en place.

Qu'on me corrige si j'ai loupé une étape.
Je n'aurai pas dit mieux :) Merci a toi

En effet si on applique le code directement dans le mode design le mode édition plante. Le principe est de mettre le code HTML de l'horloge dans un fichier (par exemple clock.html) et de l'appeler dans un iframe.

Bon courage.

abarrau a écrit :très impressionnant ... au moment où je me met aux design .. je m'en inspire ;)
Merci pour le partage de ce travail !

Merci ;)

marmoul a écrit :Encore un question à propos de l'agenda tu te sers de quel pluging/widget pour pouvoir avoir l'affichage par petit cadre des info de ta journée?
Encore merci :D

J'utilise le plugin Agenda tout simplement.

vouvrat
Timide
Messages : 64
Inscription : 01 févr. 2016, 11:59
Localisation : 91 - Essonne

Re: [Présentation] F$B33

Message par vouvrat » 16 mars 2016, 10:45

F$B33 a écrit :
Je n'aurai pas dit mieux :) Merci a toi
De rien du moment que je peux aider je le fais ;)
Hystou: Jeedom / Dev / Blea / LMS / Apache
1 Rpi2 antenne BLEA
Xiaomi: 1 Présence + 1 Porte + 3 Temp.Hum + 3 Yeelight RGB
Gateway USB by LAREGIE pour MySensor
Arduino Uno +5 Arduino Pro mini MySensors.

Avatar de l’utilisateur
raslittle
Timide
Messages : 112
Inscription : 02 févr. 2015, 12:01
Localisation : IDF

Re: [Présentation] F$B33

Message par raslittle » 16 mars 2016, 11:08

Merci pour tous ses précieux conseils. Reste juste à trouver comment faire redevenir le plugin météo transparent ...
JEEDOM sur ODROID C2 + RfxTrx433E + Z-Stick AEON S2 + IPX800 V3&V4
PSX200-1205
Synology 213+

systemic
Timide
Messages : 98
Inscription : 12 nov. 2015, 14:19
Localisation : Suisse

Re: [Présentation] F$B33

Message par systemic » 16 mars 2016, 16:02

Hello

Une astuce (niveau avancé) pour ceux qui veulent de la transparence pour les widgets (quand le bouton n'est plus disponible comme sur la météo) :

A vos risques et périls :

Vous pouvez trouver dans la partie base de donnée, dans la table "plan" les différents objets de vos plans.

Si vous cherchez le plan (grace à son ID qui est visible dans l'url du design) alors vous pouvez ajouter de la transparence en éditant le code.

Exemple :

Dans le partie "display" d'un objet, on peut changer de :

{"height":206,"width":350}

à

{"height":206,"width":350,"background-transparent":"1"}


Je reste un peu flou pour éviter que tout le monde ailles casser sa base de données :-)

Systemic

Avatar de l’utilisateur
raslittle
Timide
Messages : 112
Inscription : 02 févr. 2015, 12:01
Localisation : IDF

Re: [Présentation] F$B33

Message par raslittle » 16 mars 2016, 16:54

Merci Systemic, ça marche du tonnerre!!!
:)
JEEDOM sur ODROID C2 + RfxTrx433E + Z-Stick AEON S2 + IPX800 V3&V4
PSX200-1205
Synology 213+

Avatar de l’utilisateur
mamatdv
Actif
Messages : 1495
Inscription : 10 juil. 2014, 10:03
Localisation : Dijon

Re: [Présentation] F$B33

Message par mamatdv » 18 mars 2016, 22:08

F$B33 a écrit :Merci :)

Petite évolution :

Je cherchais un moyen rapide et simple pour changer le fond d'écran de mes pages design sans devoir passer sur chacune pour y modifier le paramètre.

J'ai écrit un petit formulaire qui scanne un dossier Image contenant des fonds d'écrans divers et variés ainsi que le dossier où est stockée l'image de fond de mon thème.

Il suffit de sélectionner la nouvelle image pour remplacer l'ancienne et le tour est joué :

https://youtu.be/q6Qdww1QOtU

Prochaine étape, changement de l'image en fonction du moment de la journée (matin, soir, nuit...).

Je partage les fichiers si des personnes sont intéressées
FondEcran.zip
Je me mets enfin a créer un design sympa et ton tuto m'apporte une grande aide :)

Par contre, je n'arrive pas à mettre en place le formulaire de changement de fond d'écran.

J'ai copié les fichiers mais je ne sais pas comment créer l'image de la petit roue crantée
Beta-testeur
Mon matosici
Doc jeedom - Trucs et astuce

AlainA
Timide
Messages : 221
Inscription : 29 déc. 2014, 16:19
Localisation : Lyon

Re: [Présentation] F$B33

Message par AlainA » 21 mars 2016, 19:36

Bonjour,

Depuis le passage en Jeedom V2.1 plus rien ne s'affiche sur ce design (mis à part les cadres et code HTML)...
Alors que tout fonctionnait bien en V1.212. savez-vous pourquoi ?
Merci de votre aide.
Jeedom 3.3.31 - OpenZwave dernière version
NUC avec Dongle ZWave AEOTEC AEOEZW090 et RFXCom
20 modules RFXCom
50 modules ZWave

AlainA
Timide
Messages : 221
Inscription : 29 déc. 2014, 16:19
Localisation : Lyon

Re: [Présentation] F$B33

Message par AlainA » 23 mars 2016, 21:50

Personne n'a le même problème que moi ? :-(
Aucun équipement s'affiche :-( Ce n'est pas lié à ce design en particulier car j'ai crée un nouveau design et l'équipement ne s'affiche pas non plus sur mon tel :-(
Jeedom 3.3.31 - OpenZwave dernière version
NUC avec Dongle ZWave AEOTEC AEOEZW090 et RFXCom
20 modules RFXCom
50 modules ZWave

tryskeljp
Timide
Messages : 27
Inscription : 14 déc. 2015, 11:53

Re: [Présentation] F$B33

Message par tryskeljp » 27 mars 2016, 21:08

Petite Question, Comment on passe à l'heure d'été sur l'horloge du design F$B33

Avatar de l’utilisateur
raslittle
Timide
Messages : 112
Inscription : 02 févr. 2015, 12:01
Localisation : IDF

Re: [Présentation] F$B33

Message par raslittle » 29 mars 2016, 15:11

Très bonne question!
Il faut certainement ajuster une variable dans le code.
Il y a une ligne
" var nowUTC = date.getTime() + date.getTimezoneOffset()*60*1000;"
Qui pourrait correspondre.
Malheureusement mes compétences en langage s arrêtent là.
Si quelqu'un maîtrise, il est le bienvenu
JEEDOM sur ODROID C2 + RfxTrx433E + Z-Stick AEON S2 + IPX800 V3&V4
PSX200-1205
Synology 213+

twiste 79
Timide
Messages : 128
Inscription : 11 avr. 2015, 13:34

Re: [Présentation] F$B33

Message par twiste 79 » 29 mars 2016, 20:50

Bonsoir, question surement hors sujet mais je ne sait pas ou la poser donc je tente.
Comment faites-vous pour créer vos icônes???? (logiciel)

Répondre

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

Qui est en ligne ?

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