Sartog - De retour (un peu) et un nouveau design en cours

Présentation et Vitrine d'installations
125

salut Sartog,
Après plusieurs tests sans succès , je me disais que c’était la meilleure solution .J’aurai presque envi de dire que ça m’arrange :slight_smile: , plus simple pour moi qui ne maitrise pas le CSS.
Au moins avec tes nombreux exemples , plus facile de faire 1 par 1 avec des CSS , et de les placer.
Ma mission si je l’accepte, c’est de faire un menu avec iframe :
Me suis inspiré de ça :

et d’utiliser ton design / manière de réaliser les choses , pour chaque eframe
bon allez au travail :slight_smile:
Merci encore et bonne journée

126

Bonjour à tous,

Merci @sartog pour ton travail partagé c’est vraiment top pour nos design.
Je souhaite partir sur ton thème mais en utilisant un thème dark.
En surfant sur le net je suis tombé la dessus mais je ne sais pas comment modifier tes lignes de CSS pour donner les bonnes couleurs.
Voici le lien :

Peux tu m’aider sur le sujet .

Merci

127

Bonsoir Yoan,

J’aime beaucoup le Neumorphism dark également, je le trouve moins agressif que le blanc même.

Voila ce que j’ai obtenu rapidement :

Capture2
Capture2713×451 6.17 KB

Pour cela, voici les couleurs utilisés (ce qui est entre /* */ sont les valeurs pour la version light) :

[data-page="plan"] .div_displayObject {
  /*background: #E7EEF7 !important;*/
  background: #232626 !important;
  font-family: system-ui !important;
}

[data-page="plan"] .mia-cadre{
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 32px; 
  /*box-shadow: 5px 5px 10px 5px rgba(136, 165, 191, 0.5),
    -5px -5px 10px 5px rgba(255,255,255, 0.8);*/
  box-shadow: 5px 5px 10px 5px #1e2020,
    -5px -5px 10px 5px #282c2c;
}

[data-page="plan"] .mia-cadre-inset{
  width: 100%;
  height: 100%;
  background: transparent; 
  border-radius: 32px;
  /*box-shadow: inset 5px 5px 10px 5px rgba(136, 165, 191, 0.5),
    inset -5px -5px 10px 5px rgba(255,255,255, 0.8);*/
  box-shadow: inset 5px 5px 10px 5px #1e2020,
    inset -5px -5px 10px 5px #282c2c;
}

En gros, pour cet je n’ai changé que 3 couleurs, celle du background et celle des « ombres » des cadres.

Dit moi si tu as besoin de plus d’info.

128

Parfait ! C’est exactement ce que je souhaitais.

Je suis d’accord avec toi c’est moins agressif.

J’ai modifié un peu les couleurs et la taille du blur c’est parfait !

Je te remercie :wink:

1 « J'aime »
129

Salut @sartog

Pour créer les boutons, il n’y a pas d’autres moyens que celui présenté ? Car si je comprend bien ta méthode il faut un widget par bouton créé ? Tu expliques que dans le widget on doit déclarer mia-button-ON + icone.

C’est bien ça ?
Je te remercie

130

Bonsoir Yoan,

En effet, avec ma méthode il me faut un widget par visuel :

Capture
Capture1863×440 48.5 KB

En passant par la création d’un widget « code », tu peux mutualiser tes boutons et afficher l’icône souhaitée via un paramètre optionnel du widget.
Je penses que tu trouvera pas mal d’info dans ce post de Salviaf https://community.jeedom.com/t/salvialf-widget-iconaction-action-defaut/9297

3 « J'aime »
131

Je dirais même plus : Pas besoin de widget « code » ça fonctionne directement avec l’outil Widgets du core en utilisant des tags.

Un exemple ici :
[SALVIALF] Widget MultiOuvrants Core_V4 (Info/Numérique)

132

Ha oui, bien vu !!
J’avais pas du tout pensé à cette possibilité.

Merci pour l’info :blush:

133

Vous m’avez perdu les gars :upside_down_face: :joy:

Je peux avoir un exemple sur l’utilisation du Widget Multiouvrants avec le CSS personnalisé de @sartog ?

Merci pour votre aide

134

Bonjour Yoan,

Désolé, j’ai oublié de regarder.

En fait, la solution proposé par Salvialf n’est valable que pour des widgets info.

Pour les actions, je penses que tu peux reproduire mais en code.

135

Bonsoir,
J’avance à taton , mais j’avance :slight_smile: , et encore bravo pour ce gros boulot de documentation

J’ai un équipement ( virtuel)

image
image368×597 14.6 KB

J’ai donc créé un css personnalisé avec l’id de mon equipement :

 [data-page="plan"]  [data-eqlogic_id="524"] .widget-name {
  display : none;}

ça ça marche :slight_smile: trop fort !!!
1ere question si je met color … pour mettre une couleur au texte à la place de "display none"il le prends pas c’est normal ?

je continue et je fais un bloc comme toi :

[data-page="plan"]  [data-eqlogic_id="524"] 
{
  width: 190px !important;
  height: 300px !important;
  margin: 0 !important;
  padding-top: 10px !important;
  top: 50px !important;
  left: 450px !important;
  background-color: #E7EEF7 !important;
  border-radius: 32px !important; 
  box-shadow: 5px 5px 10px 5px rgba(136, 165, 191, 0.5),
    -5px -5px 10px 5px rgba(255,255,255, 0.8);
}

il m’affiche ça sur mon design:
image

et là je comprends plus :slight_smile: !!!
une idee maitre du css ?
edit 21/02 : après moulte test et le discord de jeedom, j’y arrive petit à petit :slight_smile: voir ci dessous
Merci

136

Pour ce que ça intéresse, magnifique site pour trouver des couleurs de fond , genere la balise css en prime :slight_smile:
https://qconv.com/

testé dans un css sur un virtuel :

 [data-page="plan"] .eqLogic-widget[data-eqlogic_id="524"]
{
 background-image: linear-gradient(135deg, #ACA5AF 0%, #A7ACB1 100%) !important;
  border-radius: 32px !important;
  box-shadow: inset -12px -12px 30px 5px rgb(255 255 255 / 90%), inset 12px 12px 30px 5px rgb(50 58 73 / 20%) !important;
}

rendu :
image
en test, mais je trouve ça plutôt joli

3 « J'aime »
137

Hello, en complément pour tes « box-shadow » :wink: :

Bonne journée.

139

Merci,
en utilisant les 2 sites,
image
ça commence à m’aller :slight_smile:

140

Bonjour tertous,
Simplement admiratif,c’est très beau.

141

Bonjour, merci beaucoup pour ce design et ces entraides @sartog, @alexcrp, @Xav-74 .
J’ai eu du mal mais j’ai enfin réussi à faire en gros ce qu’il y a plus haut.
Je n’ai rien modifié car c’est juste pour apprendre pour le moment.

design
design1481×783 53.1 KB

J’ai un peu compris ce qu’il faut faire. J’ai juste un petit détail sur la météo.
N’ayant pas l’anémomètre, j’ai pris les valeurs de la météo.
J’ai remplacé la valeur vitesse rafale par vitesse du vent mais les valeurs sont en décimal. Est ce que c’est possible de mettre en entier. Je pense que c’est pour cela que l’on ne voit pas les valeurs de la pluie.
(Même si mon pluviomètre est à l’intérieur, j’aurais toujours 0 comme valeur de pluie 24h lol (plus d’extérieur pour le positionner).

J’ai bien galéré pour arrivé déjà à ce niveau. J’ai épluché chaque messages qui donnait des indices pour y arriver.

Je vais voir aussi pour modifier le css du cadre n°2 pour qu’a droite il ressemble au label 2.

Je m’attaquerais au design sur la présence après pour en apprendre davantage.

1 « J'aime »
142

Hello @cocolabombe0,

C’est ce que j’ai fait également mais avec le % d’humidité dans l’air (ta valeur pour la pluie est revenu à la ligne si tu regardes bien :wink: 11,556) :

image
image310×620 53.3 KB

Pour l’arrondi j’utilise la fonction Math.round() dans le fichier weather.js:

 // Vent et rafale.
    now_vent_icone.innerHTML = '<i class="mydesign-meteo-detail-icone-vent wi wi-wind from-' + valeur[7] + '-deg"></i>';
    now_vent.innerHTML = '&nbsp;'+ Math.round(valeur[8]) + '<sub> km/h</sub>';

EDIT : non d’ailleurs tu affiches 2 fois la vitesse du vent. Pour l’humidité :

// Pluie actuelle (humidité).
    now_pluie.innerHTML = '&nbsp; '+valeur[9] + '%';

En vérifiant bien que la valeur est bien la 9ème dans la liste dans ton virtuel :wink:

1 « J'aime »
143

Merci beaucoup. Ca m’a bien aidé pour modifier.
J’ai juste un soucis (a voir si cela vient de l’icone ou du code mais j’ai l’icone du Numéro condition 1 qui est en ?

J’ai mis en 9ème valeur l’humidité de mon netatmo extérieur mais le chiffre ne s’affichait pas. J’ai repris celui du plugin météo et le chiffre s’affiche. Bizarre. Je retesterais plus tard.

meteo
meteo356×672 27.6 KB

#[Aucun][Météo][Numéro condition]#,#[Aucun][Météo][Condition]#,#[Maison][Extérieur][Température]#,#[Aucun][Météo][Lever du soleil]#,#[Aucun][Météo][Coucher du soleil]#,#[Aucun][Météo][Température Min]#,#[Aucun][Météo][Température Max]#,#[Aucun][Météo][Direction du vent]#,#[Aucun][Météo][Vitesse du vent]#,#[Aucun][Météo][Humidité]#,
#[Aucun][Météo][Numéro condition +1]#,#[Aucun][Météo][Température Min +1]#,#[Aucun][Météo][Température Max +1]#,#[Aucun][Météo][Numéro condition +2]#,#[Aucun][Météo][Température Min +2]#,#[Aucun][Météo][Température Max +2]#,#[Aucun][Météo][Numéro condition +3]#,#[Aucun][Météo][Température Min +3]#,#[Aucun][Météo][Température Max +3]#

    // Vent et rafale.
    //now_vent_icone.innerHTML = '<i class="mia-meteo-detail-icone-vent wi wi wi-wind from-' + valeur[7] + '-deg"></i>';
    //now_vent.innerHTML = '&nbsp; <sup>' + valeur[8] + '</sup> / <sub>' + valeur[9];

	// Vent et rafale.
    now_vent_icone.innerHTML = '<i class="mia-meteo-detail-icone-vent wi wi wi-wind from-' + valeur[7] + '-deg"></i>';
    now_vent.innerHTML = '&nbsp;'+ Math.round(valeur[8]) + '<sub> km/h</sub>';

    // Pluie actuelle et comulée journée.
    //now_pluie.innerHTML = '&nbsp; <sup>' + valeur[10] + '</sup> / <sub>' + valeur[11];

	// Pluie actuelle (humidité).
    now_pluie.innerHTML = '&nbsp; '+valeur[9] + '%';

    // ******************** //
    // Cadre prévision      //
    // ******************** //

    // Prévisions + 1.
    ((jour_numero + 1) > 7) ? jour1_nom.innerHTML = jour[jour_numero + 1 - 7] : jour1_nom.innerHTML = jour[jour_numero + 1];
    jour1_icone.className = Prevision_Icone(valeur[10]);
    jour1_temperature.innerHTML = Math.round(valeur[11]) + '° &ensp; ' + Math.round(valeur[12]) + '°';

    // Prévision + 2.
    ((jour_numero + 2) > 7) ? jour2_nom.innerHTML = jour[jour_numero + 2 - 7] : jour2_nom.innerHTML = jour[jour_numero + 2];
    jour2_icone.className = Prevision_Icone(valeur[13]);
    jour2_temperature.innerHTML = Math.round(valeur[14]) + '° &ensp; ' + Math.round(valeur[15]) + '°';

    // Prévision +3.
    ((jour_numero + 3) > 7) ? jour3_nom.innerHTML = jour[jour_numero + 3 - 7] : jour3_nom.innerHTML = jour[jour_numero + 3];
    jour3_icone.className = Prevision_Icone(valeur[16]);
    jour3_temperature.innerHTML = Math.round(valeur[17]) + '° &ensp; ' + Math.round(valeur[18]) + '°';

J’ai changé les valeurs dans le js.

1 « J'aime »
144

Peux tu tester la commande de ton virtuel et me donner la valeur de valeur[10] ?

Et regarder à quelle condition cela correspond :

    const cond_pluie = ["312", "500", "501", "531", "615", "616"];
    const cond_averse = ["313", "314", "502", "503", "504", "520", "521", "522", "620"];
    const cond_crachin = ["300", "301", "302", "310", "311", "321"];
    const cond_neige = ["600", "601", "602", "621", "622"];
    const cond_neige_fondue = ["611", "612", "613"];
    const cond_pluie_vergla = "511";
    const cond_orage = ["200", "201", "202", "210", "211", "212", "221", "230", "231", "232"];
    const cond_brouillard = ["701", "721", "741"];
    const cond_partiel_soleil = "803";
    const cond_plutot_soleil = ["801", "802"];
    const cond_soleil = 800;
    const cond_nuageux = 804;
145

J’ai trouvé. J’avais un retour a la ligne dans le virtuel et donc cela générait un soucis.
C’est redevenu niquel.

1 « J'aime »