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
kevvv31
Timide
Messages : 21
Inscription : 07 juin 2016, 19:33
Localisation : Spain

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

Message par kevvv31 » 10 juil. 2018, 15:14

Djal94 a écrit :
kevvv31 a écrit :
08 juil. 2018, 15:54
Salut à tous,

Cela fait maintenant plusieurs années que Jeedom est entré dans ma maison.
Ci-dessous quelques uns des Designs que j'utilise régulièrement (en espagnol car je vis en Espagne ;) )
J'ai également créé d'autres designs similaires adapté à Tablette / Smartphone. Ceux-ci sont fait pour PC.


Jeedom PC Home2.JPG



Jeedom PC Energy.JPG



Jeedom PC LightsJPG.JPG


En espérant vous avoir inspiré :D

Ciao!

Kev
Hello, tu peux partager ton widget de puissance stp?
Salut,

Il est dans le Market sous le nom power_gauge2_winhex


Enviado desde mi iPhone utilizando Tapatalk

Djal94
Actif
Messages : 1224
Inscription : 09 août 2016, 09:21

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

Message par Djal94 » 10 juil. 2018, 15:19

Ok nice je l'avais pas trouvé merci
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

Djal94
Actif
Messages : 1224
Inscription : 09 août 2016, 09:21

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

Message par Djal94 » 10 juil. 2018, 15:48

Fonctionne pas chez moi, j'ai pas les couleurs ...
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

yoMalu
Timide
Messages : 24
Inscription : 10 juil. 2018, 02:29

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

Message par yoMalu » 10 juil. 2018, 17:03

Sartog a écrit :
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
    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
    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).

J'ai fait tout ce que tu as dis au dessus, mais sur le design ou l'importe sous quel forme ? :/

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

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

Message par Sartog » 10 juil. 2018, 22:18

yoMalu a écrit :
10 juil. 2018, 17:03
J'ai fait tout ce que tu as dis au dessus, mais sur le design ou l'importe sous quel forme ? :/
Bonsoir yoMalu,

Dans le design, pour ajouter ton virtuel il te faut faire clique droit -> ajouter un équipement.
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)

yoMalu
Timide
Messages : 24
Inscription : 10 juil. 2018, 02:29

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

Message par yoMalu » 10 juil. 2018, 23:42

Sartog a écrit :
10 juil. 2018, 22:18
yoMalu a écrit :
10 juil. 2018, 17:03
J'ai fait tout ce que tu as dis au dessus, mais sur le design ou l'importe sous quel forme ? :/
Bonsoir yoMalu,

Dans le design, pour ajouter ton virtuel il te faut faire clique droit -> ajouter un équipement.

Ah donc dans le design, c'est bien le virtuel qu'on importe, faut pas chercher le plugin ! :)
Malheureusement, ça me pop ça :(
http://prntscr.com/k4xfdr

Voila le virtuel https://prnt.sc/k4xhjl
et le widget https://prnt.sc/k4xhwl

raphael_malin
Timide
Messages : 481
Inscription : 10 nov. 2014, 00:20
Localisation : Nouméa - Nouvelle-Calédonie

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

Message par raphael_malin » 18 juil. 2018, 12:56

Hello,
J'ai besoin d'aide concernant du codage CSS.
J'ai récupéré du code pour effectuer des cases pour le design mais lorsque je change la couleur toutes les cases changent.
Au début le code était directement dans le texte/html, j'ai donc créé un fichier CSS et maintenant via un lien, je récupère le fichier.
J'ai donc créé un second fichier CSS avec des couleurs différentes, mais lorsque je l'ai ajouté dans le design, toutes les cases ont à nouveau changé :(

Comment faire pour les dissocier?
et comment puis je sortir certaines lignes de façon à les mettre dans le code html pour ne modifier qu'elles ? (comme le texte par ex qui est déjà comme ca)

Merci
Voici le css:

Code : Tout sélectionner

<style>
.boxT {
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background: #EEE;
  background-color: rgba(0,0,50,0.6);
}
.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%); /*Couleur ruban*/
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
</style>
et le html:

Code : Tout sélectionner

<link href="PERSO/fenetre+ruban perso/fenetre+ruban.css" rel="stylesheet" type="text/css">

<div class="boxT">
   <div class="ribbon"><span>SAINTS</span></div>
</div>
Jeedom smart avec en général toutes les mises à jour faites (système et plugin)

Djal94
Actif
Messages : 1224
Inscription : 09 août 2016, 09:21

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

Message par Djal94 » 18 juil. 2018, 12:59

Ça se produit en fonction du navigateur quand tu appelles des propriétés ayant le même nom dans 2 fichiers .css distincts.
Changes le nom des propriétés dans le 2ème fichier et ça devrait aller
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

raphael_malin
Timide
Messages : 481
Inscription : 10 nov. 2014, 00:20
Localisation : Nouméa - Nouvelle-Calédonie

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

Message par raphael_malin » 18 juil. 2018, 13:53

qu'appelles tu propriétés? merci
Jeedom smart avec en général toutes les mises à jour faites (système et plugin)

Djal94
Actif
Messages : 1224
Inscription : 09 août 2016, 09:21

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

Message par Djal94 » 18 juil. 2018, 13:57

Ce que je veux dire , c'est que :

- Si dans une même page HTML (ton design Jeedom), tu as deux box HTML (qui font référence à 2 fichiers .css différents) mais que tu appelle une propriété de même nom, (ex : .boxT ou .ribbon) alors le navigateur se mélange les pinceaux.

Piur éviter ca, change le nom de tes propriétés dans le .css et modifie le html en conséquence (ex : .boxT2 et .ribbon2)
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

Djal94
Actif
Messages : 1224
Inscription : 09 août 2016, 09:21

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

Message par Djal94 » 18 juil. 2018, 13:59

Djal94 a écrit :
18 juil. 2018, 13:57
Ce que je veux dire , c'est que :

- Si dans une même page HTML (ton design Jeedom), tu as deux box HTML (qui font référence à 2 fichiers .css différents) mais que tu appelle une propriété de même nom, (ex : .boxT ou .ribbon) alors le navigateur se mélange les pinceaux.

Piur éviter ca, change le nom de tes propriétés dans le .css et modifie le html en conséquence (ex : .boxT2 et .ribbon2)
Ceci est du il me semble au fonctionnement du cache du navigateur (la mise en forme .css est stocké en cache).
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

amistad132
Timide
Messages : 33
Inscription : 25 nov. 2016, 21:10

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

Message par amistad132 » 18 juil. 2018, 16:15

Salut les amis,

Voici mon nouveau design, afficher sur écran 22 pouces en mode vertical.
J'ai encore quelques bricoles à ajouter/ajuster

Image
Jeedom 3.2.8 sur ---->>> Nuc Intel et RPI 3

Jeeviens
Timide
Messages : 152
Inscription : 15 août 2017, 01:04

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

Message par Jeeviens » 18 juil. 2018, 20:32

Nouveau design pour ma tablette et moi, à la demande de la chef des waf : )

La chef veut des boutons On/Off... alors bon...

Premier jet, écran principal : ) (Je peaufine les autres...)

Image à 80% comme d'hab : )

SShot_1.png
SShot_1.png (543.02 Kio) Consulté 1027 fois

A Partir de la, c'est juste en cours...

SShot_2.png
SShot_2.png (398.2 Kio) Consulté 1024 fois
SShot_3.png
SShot_3.png (468.26 Kio) Consulté 1024 fois

pinouche
Timide
Messages : 9
Inscription : 15 juin 2018, 17:46

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

Message par pinouche » 19 juil. 2018, 00:07

Boboss a écrit :
09 juil. 2018, 15:16
Hello
Bravo à tous pour vos désign
pinouche a écrit :
29 juin 2018, 17:54

Image




Juste une question : comment faites vous pour avoir des onglets comme sur la page.

J'ai cherché sur le net. Il faut mettre du code Css mais où faut-il le placer ?

Merci de votre aide.

bonjour,
désolé pour la réponse tardive. En fait j'ai simplement créer des bloc textes/html que j'ai placé sur le design et j'ai placé les mêmes bloc sur les autres pages. j'ai vraiment fait au plus simple et sans code.

amistad132
Timide
Messages : 33
Inscription : 25 nov. 2016, 21:10

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

Message par amistad132 » 19 juil. 2018, 07:22

Jeeviens a écrit :
18 juil. 2018, 20:32
Nouveau design pour ma tablette et moi, à la demande de la chef des waf : )

La chef veut des boutons On/Off... alors bon...

Premier jet, écran principal : ) (Je peaufine les autres...)

Image à 80% comme d'hab : )
Ou as tu eu les "voyants" retours d’états rouge et vert ? j'arrive pas a mettre la main sur ce style de widgets
Jeedom 3.2.8 sur ---->>> Nuc Intel et RPI 3

Jeeviens
Timide
Messages : 152
Inscription : 15 août 2017, 01:04

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

Message par Jeeviens » 19 juil. 2018, 07:42

@amistad132 : salut ! Ce sont tous des créations perso

amistad132
Timide
Messages : 33
Inscription : 25 nov. 2016, 21:10

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

Message par amistad132 » 19 juil. 2018, 08:55

Jeeviens a écrit :
19 juil. 2018, 07:42
@amistad132 : salut ! Ce sont tous des créations perso
Eh bien bravo !! Ca a de la gueule, tu as fais avec quel logiciel ?
Jeedom 3.2.8 sur ---->>> Nuc Intel et RPI 3

Jeeviens
Timide
Messages : 152
Inscription : 15 août 2017, 01:04

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

Message par Jeeviens » 19 juil. 2018, 09:32

Google Images et un vieux Photoshop 7 :D

raphael_malin
Timide
Messages : 481
Inscription : 10 nov. 2014, 00:20
Localisation : Nouméa - Nouvelle-Calédonie

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

Message par raphael_malin » 19 juil. 2018, 13:47

Djal94 a écrit :
18 juil. 2018, 13:57
Ce que je veux dire , c'est que :

- Si dans une même page HTML (ton design Jeedom), tu as deux box HTML (qui font référence à 2 fichiers .css différents) mais que tu appelle une propriété de même nom, (ex : .boxT ou .ribbon) alors le navigateur se mélange les pinceaux.

Piur éviter ca, change le nom de tes propriétés dans le .css et modifie le html en conséquence (ex : .boxT2 et .ribbon2)
Super merci pour ton explication,
J'ai galéré sur le début, car il semble qu'il faut mettre un petit quelques chose au début pour que le 1er boxT fonctionne.
Du coup j'ai mis rien. sinon le boxT0 n'est pas pris en compte.

Code : Tout sélectionner

<style>
.rien {}
.boxT_0 { /*bleu foncé*/
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background-color: rgba(0,0,50,0.6);
}
.boxT_1 {
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background-color: rgba(0,0,150,0.6);
}
.boxT_2 {
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background-color: rgba(0,100,250,0.6);
}
.ribbon_0 {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon_0 span { /*bleu*/
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon_0 span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon_0 span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon_1 { /*Violet*/
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon_1 span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#ED01FE 0%, #B501C1 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon_1 span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #B501C1;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #B501C1;
}
.ribbon_1 span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #B501C1;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #B501C1;
}
.ribbon_2 {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon_2 span { /*Rouge*/
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#B9121B 0%, #C1010D 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon_2 span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #C1010D;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #C1010D;
}
.ribbon_2 span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #C1010D;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #C1010D;
}
</style>
Jeedom smart avec en général toutes les mises à jour faites (système et plugin)

Djal94
Actif
Messages : 1224
Inscription : 09 août 2016, 09:21

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

Message par Djal94 » 19 juil. 2018, 13:49

Je n'ai pas eu besoin de faire ca , mais pourquoi pas. Et du coup ca fonctionne?
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

Répondre

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

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité