[Présentation] F$B33

nonobike · 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 (438.27 Kio) Consulté 2901 fois

merci de votre aide

vouvrat · 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 ^^

marmoul · 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

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.

marmoul · Message par **marmoul** » 15 mars 2016, 12:51

Un grand merci à toi sa fonctionne nickel!!!

marmoul · 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

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

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

J'utilise le plugin Agenda tout simplement.

vouvrat · 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

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

systemic · 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

raslittle · Message par **raslittle** » 16 mars 2016, 16:54

Merci Systemic, ça marche du tonnerre!!!

mamatdv · 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

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

AlainA · 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

tryskeljp · Message par **tryskeljp** » 27 mars 2016, 21:08

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

raslittle · 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

twiste 79 · 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)

[Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Re: [Présentation] F$B33

Qui est en ligne ?