Hello à tous,
je trouve ce widget vraiment beau:
La source ici:
Source
Je tente de récupérer ce widget pour juste avoir les leds rouge et verte avec les 2 états mat ou brillant.
J’ai essayé avec ceci ici mais sans succès.
Si quelqu’un peux donner un coup de pouce/. Merci
Ben si tu as les images, rien de plus simple de faire un widget en v4…
Hello prfalken,
Le pb c’est que je n’ai pas l’image, j’ai l’impression que c’est uniquement du codage :-/
nobody 
L’installation est décrite dans l’article que tu as cité dans ton fil de discussion 
Yes, mais je souhaiterais que les leds et j’arrive pas à repérer le code nécessaire pour avoir en gros 2 widgets, 1 led rouge on/off et l’autre led verte on/off
Tout est défini en CSS lignes 231 à 346 du code pour la définition des LED.
Donc pas d’image c’est de la définition « vectorielle » grâce au CSS.
Merci Yves.
Du coup j’ai repris juste ce code mais cela m’affiche une erreur not found
body {
font-family: arial, verdana, sans-serif;
font-size: 8px;
background: #1E1E20;
text-align: center;
}
.switch-led {
position: absolute;
left: 2em;
border-radius: 1.4em;
}
.switch-led-border {
border: 0.2em solid black;
border-radius: 1.3em;
}
.switch-led-light {
border-radius: 1.1em;
-webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
-moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
}
.switch-led-glow {
width: 2em;
height: 2em;
position: relative;
border-radius: 1em;
}
.switch-led-glow:before {
content: '';
display: block;
width: 0.6em;
height: 0.6em;
position: absolute;
top: 0.3em;
left: 0.7em;
background: rgba(255,255,255,0.2);
border-radius: 0.3em;
-webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);
-moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);
box-shadow: 0 0 1em rgba(255,255,255,0.75);
}
.switch-led-glow:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
opacity: 0.2;
filter: alpha(opacity=20);
border: 1em solid #fff;
border-color: transparent #fff transparent #fff;
border-radius: 1em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.switch-led:after {
display: block;
width: 100%;
position: absolute;
left: 0;
color: #666;
font-family: arial, verdana, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 0 0.1em rgba(0,0,0,0.7);
}
.switch-led-green:after {
content: 'ON';
top: -1.8em;
}
.switch-led-red:after {
content: 'OFF';
bottom: -1.8em;
}
.switch-led-green {
top: -5em;
border-top: 0.1em solid rgba(0,161,75,0.5);
border-bottom: 0.1em solid rgba(255,255,255,0.25);
}
.switch-led-green .switch-led-light {
background: rgb(0,161,75);
border: 0.1em solid rgb(0,104,56);
}
.switch-led-red {
bottom: -5em;
border-top: 0.1em solid rgba(237,28,36,0.2);
border-bottom: 0.1em solid rgba(255,255,255,0.25);
-webkit-box-shadow: 0 0 3em rgb(237,28,36);
-moz-box-shadow: 0 0 3em rgb(237,28,36);
box-shadow: 0 0 3em rgb(237,28,36);
}
.switch-led-red .switch-led-light {
background: rgb(237,28,36);
border: 0.1em solid rgb(161,30,45);
}
.switch-led-red .switch-led-glow {
background: #fff;
background: rgba(255, 255, 255, 0.3);
filter: alpha(opacity=30);
}
Il faut aussi insérer et modifier le code html (balise div) qui permet de positionner l’objet créé par le CSS et le code java script qui permet à Jeedom d’'afficher et mettre à jour le widget sinon ça ne marche pas.
SI tu n’as ni compétence CSS ni HTML il va falloir passer par quelques étapes d’autoformation au préalable.
Merci Yves. Etant débutant j’ai fait un screen de la led verte et rouge pour les 2 états.
Par contre je n’arrive pas à obtenir la police souhaitée:
Dans mon virtuel à droite j’ai le nom Arrosage et je tente d’avoir la meme police (j’ai regardé le code CSS) et copier ce dernier dans mon tableau comme on peut le voir en surligné, mais on voit bien que le nom Caméra est différent.
Merci
Et en ajoutant !important dans le code CSS dans ton tableau sur l’attribut ?
Merci pour tes conseils. Cela ne change rien. J’ai testé comme ceci:
font-family: ‹ arial ›, ‹ verdana ›, sans-serif !important;
Je fais peut etre une erreur, je reprends ce qui est ci dessous pour la police:
<!--
Widget name : indus_style_switch_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/bouton-styel-indus-pour-votre-design-jeedom/
Origin : https://codepen.io/khaoula12/pen/BEfyz
Last Update : 20200510 - checked accentuation
-->
<style>
:root {
--color_backgound:none; /*recommended dark background*/
--size_btn:6px;
}
.switch-container {
font-family: arial, verdana, sans-serif;
background: var(--color_backgound);
text-align: center;
}
et ce bout de code extrait est l’interrupteur que l’on voit dans l’image précédente à droite.
Merci
Je reviens vers toi ce soir car la syntaxe n’est pas bonne