Creation d'un bouton en CSS, ON/OFF

Utilisation du core de Jeedom Design
1

Bonjour,

J’ai ajouté un bouton on/off avec un effet de transition à un luminaire. Tout fonctionne correctement, mais j’ai dû utiliser la clé API de Jeedom ainsi que le lien vers le serveur Jeedom via HTTPS avec l’ID de la commande. En résumé, j’utilise l’URL directe, mais cela passe par Internet… Ne serait-il pas possible d’ajuster mon code CSS pour rester en local sur Jeedom et simplement utiliser l’ID ? J’ai donc un ID pour le mode off et un autre pour le mode on.
Pour faire mon bouton, dans le design de Jeedom, j’ai ajouter tout d’abord texte/html et ensuite dans paramètres d’affichage, dans la zone texte j’ai collé mon code :

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    
    .toggleSwitch {
      position: relative;
      width: 90px;
      height: 30px;
      background-color: rgb(206, 206, 206);
      border-radius: 40px;
      cursor: pointer;
      overflow: hidden;
    }

    .toggleSwitch:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background: conic-gradient(rgba(26, 26, 26, 0.555), white, rgba(26, 26, 26, 0.555), white, rgba(26, 26, 26, 0.555));
      border-radius: 40px;
      transition-duration: .3s;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.281);
    }

    .toggle-widget {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
      opacity: 0;
    }

    .toggle-widget:checked + .toggleSwitch:before {
      transform: translateX(100%);
    }

    .toggle-widget:checked + .toggleSwitch {
      background-color: rgb(124, 173, 206);
    }
  </style>
</head>
<body>
    <input type="checkbox" class="toggle-widget" id="toggleButton" onclick="toggleState()">
  <label for="toggleButton" class="toggleSwitch"></label>

  <script>
    function toggleState() {
      var apiKey = "xxx";
      var commandIdOn = "1889";
      var commandIdOff = "1888";

           var isChecked = document.getElementById('toggleButton').checked;

       var apiUrl = "https://xxx/core/api/jeeApi.php?apikey=" + apiKey + "&type=cmd&id=" + (isChecked ? commandIdOn : commandIdOff) + "&value=" + (isChecked ? 1 : 0);

      
      fetch(apiUrl, {
        method: 'GET'
      })
      .then(response => response.json())
      .then(data => {
        
        console.log(data);
      })
      .catch(error => {
        
        console.error('Erreur lors de l\'appel de l\'API Jeedom:', error);
      });
    }
  </script>
</body>
</html>

J’ai enlevé la clé et le serveur.

Merci
Capture d'écran 2024-02-18 192417
Capture d'écran 2024-02-18 192352

2

Bonjour,

Si, un appel ajax sans spécifier le host suffira puisque l’utilisateur est déjà connecté

Vraiment une très très mauvaise idée de mettre sa clé api dans un widget qui arrivera côté frontend.
Considérez quelle est compromise et renouvellez la.

3

Ok, je pense utiliser cette commande alors. Ça peut fonctionner ?

$.ajax({
        url: "/core/api/jeeApi.php?type=cmd&id=" + commandId + "&value=" + (isChecked ? 1 : 0),
        type: "GET",
        success: function(data) {

Merci

4

Regardes le code du widget par défaut jeedom core switch pour t’inspirer de l’appel à faire

5

Je dois aller ou exactement ? Je ne trouve pas :face_in_clouds:

6

image
image724×517 15.4 KB

7

Merci, je reprend seulement à partir d’aujourd’hui…

Alors j’avais créé un design « test » avec une commande Ajax pour le bouton seulement ca me bloque le menu qui apparait normalement lorsque l’on fait un clique droit afin d’éditer la page… Je ne peux donc plus supprimer ce design « test »… sauriez vous comment le supprimer à partir de la base de donnée peut être ?

Le lien du design : /index.php?v=d&p=plan&plan_id=6

Je peux exécuter ces deux commandes ? Si oui il y a un ordre ?
delete from planHeader where id=6et delete from plan where planHeader_id=6

Capture d'écran 2024-03-13 171837
Capture d'écran 2024-03-13 171837939×100 3.65 KB

Capture d'écran 2024-03-13 171758
Capture d'écran 2024-03-13 171758928×99 3.58 KB

8 
DELETE FROM `planHeader` WHERE `id` = 6
1 « J'aime »
9

Merci ca a très bien fonctionné, je peux continuer avec le bouton de nouveau.

10

Voila j’ai modifié le code ainsi :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
   
    #checkboxInput {
      display: none;
    }

    .toggleSwitch {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 90px;
      height: 30px;
      background-color: rgb(206, 206, 206);
      border-radius: 40px;
      cursor: pointer;
      transition-duration: .3s;
    }

    .toggleSwitch::after {
      content: "";
      position: absolute;
      height: 30px;
      width: 50%; 
      left: 0px;
      background: conic-gradient(rgba(26, 26, 26, 0.555), white, rgba(26, 26, 26, 0.555), white, rgba(26, 26, 26, 0.555));
      border-radius: 40px;
      transition-duration: .3s;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.281);
    }

    #checkboxInput:checked + .toggleSwitch::after {
      transform: translateX(100%); 
      transition-duration: .3s;
    }

    
    #checkboxInput:checked + .toggleSwitch {
      background-color: rgb(124, 173, 206);
      transition-duration: .3s;
    }
  </style>
</head>
<body>
  
  <input type="checkbox" id="checkboxInput">
  <label for="checkboxInput" class="toggleSwitch" onclick="toggleLight()"></label>

  
  <script>
    function toggleLight() {
      var isChecked = document.getElementById('checkboxInput').checked;
      if (isChecked) {
        console.log('Éteindre la lumière');
        // Exécuter la commande OFF
        jeedom.cmd.execute({ id: '1888' });
      } else {
        console.log('Allumer la lumière');
        // Exécuter la commande ON
        jeedom.cmd.execute({ id: '1889' });
      }
    }
  </script>
</body>
</html>

Ca fonctionne bien. Seulement je me demandais si le luminaire s’actionne par un scenario, mon bouton reste en OFF… est il possible qu’il s’actualise tout seul ?

Enregistrement 2024-03-14 155445

12

Bonjour,

il faut ajouter l’update dans le script :

jeedom.cmd.addUpdateFunction('#id#', function(_options) {
  if (_options.display_value >= 1 || _options.display_value == 'on') document.getElementById('checkboxInput').checked = true
  else document.getElementById('checkboxInput').checked = false
})
jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}])
2 « J'aime »
13

Un grand merci à tout le monde. Ca fonctionne :hugs:
Maintenant est il possible de l’intégrer en dehors d’un design ?
Dans une sorte de bibliothèque afin de l’intégrer autre part ?

14

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.