Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Le groupe des Helpers est present pour vous aidez, n'hésitez pas à poser des questions ;)

Toute la communauté vous remercie

/!\ L’ancien forum passera en lecture seule en janvier 2020 (Si community a bien pris le relais) puis nous le fermerons définitivement en janvier 2021./!\
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

[S'inspirer] Postez votre Plan / Design

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Avatar de l’utilisateur
cedricdirr
Timide
Messages : 90
Inscription : 22 juil. 2016, 11:13
Localisation : Dublin
Contact :

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

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...
Mon Blog ICI: http://domotation.blogspot.ie
Tuto: Connaitre la dispo de vos stations de velib preferees (ici DublinBikes)
viewtopic.php?f=59&t=5924&hilit=dublin& ... 40#p470672

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

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

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

Duplique le widget d'origine.

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


Avatar de l’utilisateur
cktocc
Timide
Messages : 23
Inscription : 26 sept. 2016, 07:50
Localisation : Loir-et-Cher

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

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


Avatar de l’utilisateur
Me_
Actif
Messages : 766
Inscription : 22 juin 2015, 22:28
Localisation : Guyane

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

Message par Me_ » 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>
Présentation
Mon matériel: ici

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

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

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.
  1. Création du virtuel :
    Capture.JPG
    Capture.JPG (59.53 Kio) Consulté 1610 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
  2. Création du widget :
    Capture1.JPG
    Capture1.JPG (19.83 Kio) Consulté 1610 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).
Box : smart, mini+, pi 2 et 3, ipbx800 v4
Protocole : Z-Wave (Fibaro & Qubino), Ikea, Bluetooth
Méteo : Netatmo
Audio : Sonos (Play 1 et 5)

Avatar de l’utilisateur
dcjona
Actif
Messages : 1525
Inscription : 16 juil. 2017, 11:06

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

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 :)
Pièces jointes
Capture1.JPG
Capture1.JPG (132.08 Kio) Consulté 1540 fois


Avatar de l’utilisateur
dcjona
Actif
Messages : 1525
Inscription : 16 juil. 2017, 11:06

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

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
Actif
Messages : 3936
Inscription : 26 mars 2017, 09:57
Contact :

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

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


Avatar de l’utilisateur
dcjona
Actif
Messages : 1525
Inscription : 16 juil. 2017, 11:06

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

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

Exactement !

thxmono
Timide
Messages : 71
Inscription : 11 août 2017, 16:09
Localisation : Niort

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

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

Image

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

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

Merci

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

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

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
Actif
Messages : 1231
Inscription : 17 mai 2016, 16:51

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

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
PROD: NAS1815+ VMM Strech 9.11 / Jeedom 3.33 / MariaDB 10.1.26 / PHP 7.0.33
DEV: DIY Odroid C2 16gb Strech 9.11 / Jeedom 4.x Alpha / MariaDB 10.1.41 / PHP 7.0.33

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

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

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

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

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

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" ?
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

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

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

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
Timide
Messages : 215
Inscription : 17 oct. 2017, 11:22

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

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
Timide
Messages : 148
Inscription : 08 janv. 2016, 22:47
Contact :

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

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..?)


Avatar de l’utilisateur
Me_
Actif
Messages : 766
Inscription : 22 juin 2015, 22:28
Localisation : Guyane

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

Message par Me_ » 25 avr. 2018, 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!
Présentation
Mon matériel: ici

Répondre

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

Qui est en ligne ?

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