[S'inspirer] Postez votre Plan / Design

cedricdirr · Message par **cedricdirr** » 20 avr. 2018, 00:18

Merci bcp de ton retour!
C'est pourtant ce que j'avais essaye, mais en copiant ton code pour remplacer l'existant, et je clique sur "appliquer sur des commandes",
je ne trouve pas mes commandes de mon virtuel (info binaire 0 ou 1 selon les statuts online ou pas)..
j'ai du oublier une etape...

benj29 · Message par **benj29** » 20 avr. 2018, 06:51

Duplique le widget d'origine.

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

cktocc · Message par **cktocc** » 20 avr. 2018, 07:13

Vins222 a écrit :
Sartog a écrit :C'est noté, merci à toi.
Mais tu as trop bien travaillé sur ta présentation, je n'arrive pas à trouver de question pour l'instant

Pour le widget météo, voici ce que j'ai réussi à faire :
Capture.JPG
Ça n'ira pas dans ton design, mais si ça peux te donner des idées.
Si besoin, je partage le code et la technique pour récupérer les info du plugin weather.
Bonjour et bravo pour ce magnifique plugin !
Intéressé par le partage de ce plugin météo si possible!
Merci et bonne soirée à tous

Envoyé de mon iPhone en utilisant Tapatalk

Intéressé également par le partage de ce widget météo

Merci!

Envoyé de mon MI MAX 2 en utilisant Tapatalk

Me_ · Message par **Me_** » 20 avr. 2018, 09:28

Micramaniac a écrit : ↑
30 mars 2018, 14:25
Merci pour ton code mais je voulais garder l'esprit de la mienne.
J'ai toujours un décalage. je suis le seul?

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>

Sartog · Message par **Sartog** » 20 avr. 2018, 09:31

Alors pour ce widget météo voici ce que j'ai fais (informations récupérées du plugin Weather)
Je ne le mets pas dans le market car son alimentation est particulière.

Création du virtuel :

: Capture.JPG (59.53 Kio) Consulté 3029 fois

Il faut créer une commande info (type "autre") que nous alimenterons avec toutes les commandes nécessaire au widget. Il est impératif que les commandes soient toute sur la même ligne (sans saut de ligne).
Pour plus de clarté voici les commandes à intégrer :

Code : Tout sélectionner

#[Courbeovie][(Météo) Courbevoie][Condition]#
#[Courbeovie][(Météo) Courbevoie][Température]#
#[Courbeovie][(Météo) Courbevoie][Numéro condition]#
#[Courbeovie][(Météo) Courbevoie][Numéro condition +1]#
#[Courbeovie][(Météo) Courbevoie][Numéro condition +2]#
#[Courbeovie][(Météo) Courbevoie][Numéro condition +3]#
#[Courbeovie][(Météo) Courbevoie][Température Min]#
#[Courbeovie][(Météo) Courbevoie][Température Min +1]#
#[Courbeovie][(Météo) Courbevoie][Température Min +2]#
#[Courbeovie][(Météo) Courbevoie][Température Min +3]#
#[Courbeovie][(Météo) Courbevoie][Température Max]#
#[Courbeovie][(Météo) Courbevoie][Température Max +1]#
#[Courbeovie][(Météo) Courbevoie][Température Max +2]#
#[Courbeovie][(Météo) Courbevoie][Température Max +3]#
Courbevoie,Fr

Création du widget :

: Capture1.JPG (19.83 Kio) Consulté 3029 fois

Il faut créer un nouveau widget avec les paramètres ci-dessous.

Création du fichier css :
Il faut créer un fichier css avec le code ci-après que vous importerez dans votre widget (bouton Fichier).
Mon fichier s'appel meteo.css. Si vous mettez un autre nom, pensez à corriger le code du widget plus bas.

Code : Tout sélectionner

@import url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css');

*,
*::before,
*::after {
  box-sizing: border-box;
}

.ww-wrapper {
  width: 220px;
  height: 100%;
  margin: 0 auto;

  background-color: rgba(0,0,0,0.25);
}

.ww-row {
  display: flex;
  justify-content: space-around;
}

.weatherCard {
  flex: 0 1 220px;

  height: 290px;

  box-shadow: 0px 2px 11px 1px rgba(0,0,0,0.15);
  line-height: 1.5;
}

.cityContainer {
  width: 100%;
  height: 150px;
  padding: 12px 15px;
}

.cityName {
  position: relative;

  font-size: 18px;
  text-align: right;
}

.iconTempWrapper {
    display: block;

    margin-bottom: 4px;

    text-align: right;
    justify-content: space-between;
}

.weatherIcon {
    position: absolute;

    top: 30px;
    padding: 0;

    font-size: 60px;
}

.weatherTemp {
    position: relative;

    opacity: 1;

    font-weight: normal;
    font-size: 45px;

    transition: 0.2s ease-out;
}

.weatherTempMinMax{
    margin-top:-10px !important;
    margin-bottom: 5px !important;

    font-size:15px;
    font-weight: normal;
}

.tempAndCity {
  text-align: right;
}

.tempAndCity p {
  padding: 0;
  margin: 0;
}

.weatherDesc {
  padding-top: 3px;

  font-size: 14px;
  text-transform: capitalize;
  text-align: right;
}

.weatherForecast {
  height: 140px;
  width: 100%;

  background-color: rgba(255,255,255,1);

  text-align: center;
}

.weatherForecast .forecastCard {
    position: relative;
    display: inline-block;

    width: 52px;
    margin: 2px;
    padding: 5px 8px;

    color: #444;
}

.forecastCard p {
    margin: 0;
    padding: 0;

    font-size: 18px;
    line-height: 1.5;
}
.forecastCard .forecastIcons {
  font-size: 25px;
}

.forecastCard .forecastMin {
    color: #b3b3b3;
}

.sunny-class {
  background: rgba(255,232,161,1);
  background: radial-gradient(ellipse at center, rgba(255,232,161,1) 0%, rgba(245,202,101,1) 100%);
  color: #997300;
}

.night-class {
  background: rgba(250,250,250,1);
  background: radial-gradient(ellipse at center, rgba(150,150,150,1) 0%, rgba(100,100,100,1) 100%);
  color: #dddddd;
}

.cloudy-class {
  background: rgba(250,250,250,1);
  background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(185, 192, 193, 1) 100%);
  color: #6d7f87;
}

.rainy-class {
  background: rgba(213,240,250,1);
  background: radial-gradient(ellipse at center, rgba(213,240,250,1) 0%, rgba(150,209,230,1) 100%);
  color: #006b99;
}

.stormy-class {
  background: #ABB6BB;
  background: radial-gradient(ellipse at center, rgb(199, 222, 230) 0%, rgb(155, 170, 175) 100%);
  color: #37474F;
}

.snow-class {
  background: rgba(153, 181, 191, 1);
  background: radial-gradient(ellipse at center, rgb(199, 212, 230) 0%, rgb(139, 164, 173) 100%);
  color: #395c6b;
}

Code du widget :
Le code se compose de l'appel au fichier css, le bloc html et du bloc JS qui se charge de récupérer les info du virtuel et les mettre en forme.

Code : Tout sélectionner

<!-- basé sur le travail de Josh Reynolds
https://codepen.io/jreynolds90/pen/VmmdyR -->

<link rel="stylesheet" type="text/css" href="plugins/widget/core/template/dashboard/cmd.info.string.(Design) Meteo Weather/meteo.css">

<div style="" class="cmd cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <div class="ww-wrapper">
    <div class="ww-row">

      <div class="weatherCard">
        <div class="cityContainer cityCard">
          <div class="weatherDesc"></div>
          <div class="iconTempWrapper">
            <div class="weatherIcon"></div>
            <div class="tempAndCity">
              <p class="weatherTemp"></p>
              <p class="weatherTempMinMax"></p>
              <p class="cityName"></p>
            </div>
          </div>
        </div>

        <div class="weatherForecast">
          <div class="forecastCard forecastJ1">
            <p class="forcastDay"></p>
            <p class="forecastIcons"></p>
            <p class="forecastMax"></p>
            <p class="forecastMin"></p>
          </div>
          <div class="forecastCard forecastJ2">
            <p class="forcastDay"></p>
            <p class="forecastIcons"></p>
            <p class="forecastMax"></p>
            <p class="forecastMin"></p>
          </div>
          <div class="forecastCard forecastJ3">
            <p class="forcastDay"></p>
            <p class="forecastIcons"></p>
            <p class="forecastMax"></p>
            <p class="forecastMin"></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>

    function getWeatherIcon_20180323(conditionCode) {

      let category = Number(String(conditionCode).charAt(0));
      const conditionDescriptions = {2: ['wi-storm-showers', '#5C6D75'],
                                     3: ['wi-rain-mix', '#51d2fc'],
                                     5: ['wi-rain', '#2cc4f5'],
                                     6: ['wi-snow', '#B2EBF2'],
                                     7: ['wi-fog', '#90A4AE'],
                                     800: ['wi-day-sunny', '#ffc000'],
                                     8: ['wi-day-cloudy', '#a3bcc7'],
                                     9: ['wi-cloudy-gusts', '#A2B4BA']};

      //add inline styles for icon elements to ensure the correct icon colour is placed through loops
      if (conditionCode === 520 || conditionCode === 521 ||conditionCode === 522 ){
        let iconHTML = `<i class="wi wi-showers" style="color: '${conditionDescriptions[category][1]}"></i>`;
        return iconHTML;
      } else if (conditionCode === 800) {
        let iconString = conditionDescriptions[800][0];
        let iconHTML = `<i class="wi ${iconString}" style="color: ${conditionDescriptions[800][1]}"></i>`;
        return iconHTML;
      } else {
        let iconString = conditionDescriptions[category][0];
        let iconHTML = `<i class="wi ${iconString}" style="color: ${conditionDescriptions[category][1]}"></i>`;
        return iconHTML;
      }
    }

    // Set Background colours with classes varying on the condition.
    function changeCardBg_20180323(conditionCode) {

      let category = Number(String(conditionCode).charAt(0));

      if (conditionCode === 800) {
        $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('sunny-class');
      } else if (category === 2) {
        $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('stormy-class');
      } else if (category === 3 || category === 5) {
        $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('rainy-class');
      } else if (category === 6) {
        $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('snow-class');
      } else if (category === 7 || category === 8 || category === 9) {
        $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('cloudy-class');
      }
    }

    function returnNextDays_20180323(n) {

      const dayNames = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"];
      const today = (new Date()).getDay();
      let nextDays = [];

      for (let i = 0; i < n; i++) {
        nextDays.push(dayNames[(today + 1 + i) % dayNames.length]);
      }

      return nextDays;
    }

  	jeedom.cmd.update['#id#'] = function(_options){
      var state = _options.display_value;
      var stateListe = state.split(",");
      var cityName = stateListe[14];
	  var country = stateListe[15];
      var conditionJ0 = stateListe[0].replace("\"","");
      var tempJ0 = parseFloat(stateListe[1]);
      var numCondition = [parseFloat(stateListe[2]), parseFloat(stateListe[3]), parseFloat(stateListe[4]), parseFloat(stateListe[5])];
      var tempMini = [parseFloat(stateListe[6]), parseFloat(stateListe[7]), parseFloat(stateListe[8]), parseFloat(stateListe[9])];
      var tempMaxi =[parseFloat(stateListe[10]), parseFloat(stateListe[11]), parseFloat(stateListe[12]), parseFloat(stateListe[13])];

      // Build HTML elements and insert data
      $('.cmd[data-cmd_uid=#uid#] .weatherDesc').empty().append(conditionJ0);
      $('.cmd[data-cmd_uid=#uid#] .weatherIcon').empty().append(getWeatherIcon_20180323(numCondition[0]));
      $('.cmd[data-cmd_uid=#uid#] .weatherTemp').empty().append(tempJ0.toFixed(0) + '°C');
      $('.cmd[data-cmd_uid=#uid#] .weatherTempMinMax').empty().append(tempMini[0].toFixed(0) + '° / ' + tempMaxi[0].toFixed(0) + '°');
      $('.cmd[data-cmd_uid=#uid#] .cityName').empty().append(cityName + ', ' + country);

      // Call method to change the WeatherCard background by passing it's condition code
      changeCardBg_20180323(numCondition[0]);

      // Grab the next 3 days and loop through each with the days top temperature.
      // generate forecast sections and loop through the data for each day
      let nextDays = returnNextDays_20180323(3);
      $('.cmd[data-cmd_uid=#uid#] .forecastJ1 .forcastDay').empty().append(nextDays[0]);
      $('.cmd[data-cmd_uid=#uid#] .forecastJ1 .forecastIcons').empty().append(getWeatherIcon_20180323(numCondition[1]));
      $('.cmd[data-cmd_uid=#uid#] .forecastJ1 .forecastMax').empty().append(tempMaxi[1].toFixed(0) + '°');
      $('.cmd[data-cmd_uid=#uid#] .forecastJ1 .forecastMin').empty().append(tempMini[1].toFixed(0) + '°');

      $('.cmd[data-cmd_uid=#uid#] .forecastJ2 .forcastDay').empty().append(nextDays[1]);
      $('.cmd[data-cmd_uid=#uid#] .forecastJ2 .forecastIcons').empty().append(getWeatherIcon_20180323(numCondition[2]));
      $('.cmd[data-cmd_uid=#uid#] .forecastJ2 .forecastMax').empty().append(tempMaxi[2].toFixed(0) + '°');
      $('.cmd[data-cmd_uid=#uid#] .forecastJ2 .forecastMin').empty().append(tempMini[2].toFixed(0) + '°');

      $('.cmd[data-cmd_uid=#uid#] .forecastJ3 .forcastDay').empty().append(nextDays[2]);
      $('.cmd[data-cmd_uid=#uid#] .forecastJ3 .forecastIcons').empty().append(getWeatherIcon_20180323(numCondition[3]));
      $('.cmd[data-cmd_uid=#uid#] .forecastJ3 .forecastMax').empty().append(tempMaxi[3].toFixed(0) + '°');
      $('.cmd[data-cmd_uid=#uid#] .forecastJ3 .forecastMin').empty().append(tempMini[3].toFixed(0) + '°');
    }

    jeedom.cmd.update['#id#']({display_value:'#state#'});

  </script>
</div>

J'espère que ce sera suffisamment clair pour vous permettre d’appréhender ce widget afin de le mettre en place facilement.
Il doit être transposable aux autres plugins météo moyennement une adaptation du code (il me semble que le plugin Darksky ne retourne pas de n° de condition mais du texte).

dcjona · Message par **dcjona** » 21 avr. 2018, 10:57

J'aimais bien l'idée du menu vertical aussi donc je me laisse allé

Reparti sur un truc plus simpliste qu'avant.. merci Benj29

comparaison avant / après avec le menu du haut, c'est plus friendly user je trouve

benj29 · Message par **benj29** » 21 avr. 2018, 20:45

Mais de rien ! En tout cas madame l'a adopté

dcjona · Message par **dcjona** » 22 avr. 2018, 08:54

Je dois faire encore pas mal de modif mais c'est vrai que c'est intuitif à gauche

benj29 · Message par **benj29** » 22 avr. 2018, 09:14

Surtout en paysage.
J'étais parti au début de mettre mes tablettes domotiques en portrait mais je regrette pas. Beaucoup plus pratique... En paysage et menu à gauche.

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

dcjona · Message par **dcjona** » 22 avr. 2018, 09:50

Exactement !

thxmono · Message par **thxmono** » 24 avr. 2018, 09:45

benj29 a écrit : ↑
08 mars 2018, 00:24
Hello,

J'en profite pour mettre mon premier design des tablettes domotiques (Acer Iconia Tab10, deux sont montées au mur).

Ce n'est que l'écran résumé pour l'instant, mais maintenant que j'ai bien pris le temps de faire mes css, widgets et "designés" ce que je veux, ça va aller plus vite...

Autant sur un tél, le fond noir et écriture blanche est je trouve beaucoup plus lisible, autant sur les tablettes... c'est le contraire. Donc il m'a fallu tout reprendre !

Seul point manquant, transformer les 2 icônes garage/portail en forme de bouton (ce sont des infos sur l'état), j'ai mis une zone pour faire l'action mais j'aimerai un visuel bouton comme les autres. J'aimerai aussi mieux affiner mes boutons d'apk de la tablette (j'aimerai les rendre plus "smooth")

Quand l'alarme est activée, les tablettes montrent ce design :

Salut ! Tes designs sont parfaits !!
C'est exactement ce que je suis en train d'essayer de faire.

Merci

benj29 · Message par **benj29** » 24 avr. 2018, 09:52

C'est dommage que je ne puisse pas faire un export brut pour les personnes intéressées.

Quand vous savez que j'ai commencé en novembre et qu'on est en avril.

A ce jour il m'en reste un à boucler, celui du multimédia et de la gestion de l'énergie.

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

mortyre · Message par **mortyre** » 24 avr. 2018, 10:38

J'avoue que ton désign associé a tes virtuels et Hudge !!!

Le seul moyen que je connais pour récupérer un désign et un backup

benj29 · Message par **benj29** » 24 avr. 2018, 11:45

Oui enfin tu en feras rien... mon design pointe sur mes ID d'équipements, infos, commandes.
Après je peux partager mes codes HTML, CSS etc. Mais vous aidera pas à aller plus vite, faut tout faire aux mimines...

Message par **Theduck38** » 24 avr. 2018, 17:54

Yo !
Tu arrives à verrouiller l'affichage de la tablette en mode 'Alarme' ? Ou c'est juste via l'écran du design qui ne permet pas d'en "sortir" ?

benj29 · Message par **benj29** » 24 avr. 2018, 22:02

Non je passe par un design dédié sans lien.
Mais je pourrais paramétrer le design via login mot de passe dispo dans le menu éditer du design.

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

Micramaniac · Message par **Micramaniac** » 25 avr. 2018, 13:09

Me_ a écrit : ↑

20 avr. 2018, 09:28

Micramaniac a écrit : ↑
30 mars 2018, 14:25
Merci pour ton code mais je voulais garder l'esprit de la mienne.
J'ai toujours un décalage. je suis le seul?

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) );

benj · Message par **benj** » 25 avr. 2018, 13:32

benj29 a écrit : ↑
24 avr. 2018, 09:52
C'est dommage que je ne puisse pas faire un export brut pour les personnes intéressées.

Quand vous savez que j'ai commencé en novembre et qu'on est en avril.

A ce jour il m'en reste un à boucler, celui du multimédia et de la gestion de l'énergie.

Superbe Design, je suis en quête d'inspiration et le tiens est tout particulièrement inspirant :p
Une petite question : ou vas-tu chercher toutes tes images? (du menu, temperatures..?)

benj29 · Message par **benj29** » 25 avr. 2018, 13:41

Merci, pour la plupart, je les ai faites en utilisant ce site comme apport :
https://www.flaticon.com/

Me_ · Message par **Me_** » 25 avr. 2018, 13:56

Micramaniac a écrit :

Me_ a écrit : ↑

20 avr. 2018, 09:28

Micramaniac a écrit : ↑
30 mars 2018, 14:25
Merci pour ton code mais je voulais garder l'esprit de la mienne.
J'ai toujours un décalage. je suis le seul?

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!

[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 ?