Déplacement curseur en fonction de la journée

dsigmoun · Novembre 11, 2023, 9:16

En fait, j’ai peur que si le chargement de la page est à 22h50, que la prochaine actualisation se fasse à 23h50, soit 50 minutes après le changement d’heure, non ?

anon53349806 · Novembre 11, 2023, 9:19

Bonne question, je pensais qu’au chargement ca positionnerai le curseur correctement.

Mais dans jeedom tu utilises ca comment ?
Dans un design ? Ou sur le dashboard ?

dsigmoun · Novembre 11, 2023, 9:22

C’est intégré dans un design.

anon53349806 · Novembre 12, 2023, 6:48

Quand tu restes sur la page de design, tu n’as pas le curseur qui se ballade un peu ?

J’ai testé et il revient en arrière pour ensuite se remettre en avant ?

dsigmoun · Novembre 12, 2023, 7:25

non je n’ai pas se comportement. As-tu un zoom sur ta page ?

Sinon, voici une mise à jour. Changement de curseur. Il doit changer de couleur avec chaque changement de tarif.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic SVG</title>
</head>
<body>

<svg id="dynamicSVG" width="550" height="83" xmlns="http://www.w3.org/2000/svg">
  <!-- Marques pour chaque heure -->
  <text x="10" y="35" font-size="12" fill="#e3e3e3" text-anchor="middle">0h</text>
  <text x="50" y="35" font-size="12" fill="#e3e3e3" text-anchor="middle">2h</text>
  <text x="130" y="35" font-size="12" fill="#e3e3e3" text-anchor="middle">6h</text>
  <text x="150" y="35" font-size="12" fill="#e3e3e3" text-anchor="middle">7h</text>
  <text x="465" y="35" font-size="12" fill="#e3e3e3" text-anchor="middle">23h</text>
  <text x="490" y="35" font-size="12" fill="#e3e3e3" text-anchor="middle">24h</text>

  <!-- Rectangles représentant les périodes tarifaires -->
  <!-- Tarif HC (de 0h à 2h)  -->
  <rect x="10" y="40" width="40" height="20" rx="10" ry="10" style="fill: #00bef7; stroke: #016280; stroke-width: 2;" />
  <text x="30" y="75" font-size="12" fill="#e3e3e3" text-anchor="middle">HC</text>

  <!-- Tarif HSC (de 2h à 6h) -->
  <rect x="50" y="40" width="80" height="20" rx="10" ry="10" style="fill: #ABFF00; stroke: #177d02; stroke-width: 2;" />
  <text x="90" y="75" font-size="12" fill="#e3e3e3" text-anchor="middle">HSC</text>

  <!-- Tarif HC (de 6h à 7h)  -->
  <rect x="130" y="40" width="20" height="20" rx="10" ry="10" style="fill: #00bef7; stroke: #016280; stroke-width: 2;" />
  <text x="140" y="75" font-size="12" fill="#e3e3e3" text-anchor="middle">HC</text> 
  
  <!-- Tarif HP (de 7h à 23h) -->
  <rect x="150" y="40" width="320" height="20" rx="10" ry="10" style="fill: #fac105; stroke: #ab8402; stroke-width: 2;" />
  <text x="310" y="75" font-size="12" fill="#e3e3e3" text-anchor="middle">HP</text>

  <!-- Tarif HC (de 23h à 24h) -->
  <rect x="470" y="40" width="20" height="20" rx="10" ry="10" style="fill: #00bef7; stroke: #016280; stroke-width: 2;" />
  <text x="480" y="75" font-size="12" fill="#e3e3e3" text-anchor="middle">HC</text>
  
  <!-- Chemin représentant la période actuelle -->
  <path id="movingPath" style="stroke-width: 1;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 8.960938 0 C 8.960938 0 2.8125 0.0703125 2.8125 6.714844 C 2.8125 10.089844 8.960938 18 8.960938 18 C 8.960938 18 15.1875 10.160156 15.1875 6.679688 C 15.1875 0.0703125 8.960938 0 8.960938 0 Z M 8.976562 14.625 C 8.976562 14.625 5.070312 9.191406 5.058594 6.871094 C 5.046875 2.304688 8.972656 2.25 8.976562 2.25 C 8.984375 2.25 12.960938 2.300781 12.925781 6.84375 C 12.90625 9.238281 8.976562 14.625 8.976562 14.625 Z M 9 4.5 C 8.070312 4.5 7.3125 5.257812 7.3125 6.1875 C 7.3125 7.117188 8.070312 7.875 9 7.875 C 9.933594 7.875 10.6875 7.117188 10.6875 6.1875 C 10.6875 5.257812 9.933594 4.5 9 4.5 Z M 9 4.5 "/>

</svg>

<script>
  // Fonction pour déplacer le chemin en fonction de l'heure et changer la couleur
  function movePath() {
    // Récupérer l'élément du chemin
    var path = document.getElementById('movingPath');

    // Récupérer l'heure actuelle
    var currentHour = new Date().getHours();

    // Calculer la nouvelle position en fonction de l'heure
    var newX = 10 + (currentHour * 20);

    // Définir la nouvelle position du chemin
    path.setAttribute('transform', 'translate(' + newX + ', 20)');

    // Changer la couleur du chemin en fonction de l'heure
    if (currentHour >= 0 && currentHour < 2) {
      path.style.fill = '#00bef7'; // Couleur pour la période HC (de 0h à 2h)
      path.style.stroke = '#016280';
    } else if (currentHour >= 2 && currentHour < 6) {
      path.style.fill = '#ABFF00'; // Couleur pour la période HSC (de 2h à 6h)
      path.style.stroke = '#177d02';
    } else if (currentHour >= 6 && currentHour < 7) {
      path.style.fill = '#00bef7'; // Couleur pour la période HC (de 6h à 7h)
      path.style.stroke = '#016280';
    } else if (currentHour >= 7 && currentHour < 23) {
      path.style.fill = '#fac105'; // Couleur pour la période HP (de 7h à 23h)
      path.style.stroke = '#ab8402';
    } else {
      path.style.fill = '#00bef7'; // Couleur pour la période HC (de 23h à 24h)
      path.style.stroke = '#016280';
    }
  }

  // Appeler la fonction initiale
  movePath();

  // Mettre à jour la position et la couleur toutes les minutes (60000 millisecondes)
  setInterval(movePath, 60000);
</script>

</body>
</html>

anon53349806 · Novembre 12, 2023, 7:31

Sympa cette version et je n’ai plus le souci.
Non je n’ai aucun zoom rien…

Je vais modifier ton truc pour le tarif tempo standard enfin si j’y arrive car je suis pas dev du tout

anon53349806 · Novembre 12, 2023, 7:36

Une autre amélioration serait d’avoir l’heure dans un tooltip quand on met le curseur sur le curseur justement ^^

Phpvarious · Novembre 12, 2023, 7:44

C’est jolie ca.
Bon j’aurai pu t’aider un peu plus, mais tu étais en bonne voie .

Voici un de mes widget un peu similaire :

https://phpvarious.github.io/documentation/widget/fr_FR/info/string/

dsigmoun · Novembre 12, 2023, 7:47

Bonne idée. Perso, vu que je l’affiche sur une tablette, je n’y ai pas pensé. A tester !

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Dynamic SVG</title>
</head>
<body>

<svg id="dynamicSVG" width="550" height="83" xmlns="http://www.w3.org/2000/svg">
  <!-- Marques pour chaque heure -->
  <text x="10" y="35" font-size="12" fill="#e3e3e3" text-anchor="middle">0h</text>
  <text x="50" y="35" font-size="12" fill="#e3e3e3" text-anchor="middle">2h</text>
  <text x="130" y="35" font-size="12" fill="#e3e3e3" text-anchor="middle">6h</text>
  <text x="150" y="35" font-size="12" fill="#e3e3e3" text-anchor="middle">7h</text>
  <text x="465" y="35" font-size="12" fill="#e3e3e3" text-anchor="middle">23h</text>
  <text x="490" y="35" font-size="12" fill="#e3e3e3" text-anchor="middle">24h</text>

  <!-- Rectangles représentant les périodes tarifaires -->
  <!-- Tarif HC (de 0h à 2h)  -->
  <rect x="10" y="40" width="40" height="20" rx="10" ry="10" style="fill: #00bef7; stroke: #016280; stroke-width: 2;">
    <title>HC</title>
  </rect>
  <text x="30" y="75" font-size="12" fill="#e3e3e3" text-anchor="middle">HC</text>

  <!-- Tarif HSC (de 2h à 6h) -->
  <rect x="50" y="40" width="80" height="20" rx="10" ry="10" style="fill: #ABFF00; stroke: #177d02; stroke-width: 2;">
    <title>HSC</title>
  </rect>
  <text x="90" y="75" font-size="12" fill="#e3e3e3" text-anchor="middle">HSC</text>

  <!-- Tarif HC (de 6h à 7h)  -->
  <rect x="130" y="40" width="20" height="20" rx="10" ry="10" style="fill: #00bef7; stroke: #016280; stroke-width: 2;">
    <title>HC</title>
  </rect>
  <text x="140" y="75" font-size="12" fill="#e3e3e3" text-anchor="middle">HC</text> 
  
  <!-- Tarif HP (de 7h à 23h) -->
  <rect x="150" y="40" width="320" height="20" rx="10" ry="10" style="fill: #fac105; stroke: #ab8402; stroke-width: 2;">
    <title>HP</title>
  </rect>
  <text x="310" y="75" font-size="12" fill="#e3e3e3" text-anchor="middle">HP</text>

  <!-- Tarif HC (de 23h à 24h) -->
  <rect x="470" y="40" width="20" height="20" rx="10" ry="10" style="fill: #00bef7; stroke: #016280; stroke-width: 2;">
    <title>HC</title>
  </rect>
  <text x="480" y="75" font-size="12" fill="#e3e3e3" text-anchor="middle">HC</text>
  
  <!-- Chemin représentant la période actuelle -->
  <path id="movingPath" style="stroke-width: 1;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 8.960938 0 C 8.960938 0 2.8125 0.0703125 2.8125 6.714844 C 2.8125 10.089844 8.960938 18 8.960938 18 C 8.960938 18 15.1875 10.160156 15.1875 6.679688 C 15.1875 0.0703125 8.960938 0 8.960938 0 Z M 8.976562 14.625 C 8.976562 14.625 5.070312 9.191406 5.058594 6.871094 C 5.046875 2.304688 8.972656 2.25 8.976562 2.25 C 8.984375 2.25 12.960938 2.300781 12.925781 6.84375 C 12.90625 9.238281 8.976562 14.625 8.976562 14.625 Z M 9 4.5 C 8.070312 4.5 7.3125 5.257812 7.3125 6.1875 C 7.3125 7.117188 8.070312 7.875 9 7.875 C 9.933594 7.875 10.6875 7.117188 10.6875 6.1875 C 10.6875 5.257812 9.933594 4.5 9 4.5 Z M 9 4.5">
    <title>Tarif actuel : HC</title>
  </path>

</svg>

<script>
  // Fonction pour déplacer le chemin en fonction de l'heure et changer la couleur
  function movePath() {
    // Récupérer l'élément du chemin
    var path = document.getElementById('movingPath');

    // Récupérer l'heure actuelle
    var currentHour = new Date().getHours();

    // Calculer la nouvelle position en fonction de l'heure
    var newX = 10 + (currentHour * 20);

    // Définir la nouvelle position du chemin
    path.setAttribute('transform', 'translate(' + newX + ', 20)');

    // Changer la couleur du chemin en fonction de l'heure
    if (currentHour >= 0 && currentHour < 2) {
      path.style.fill = '#00bef7'; // Couleur pour la période HC (de 0h à 2h)
      path.style.stroke = '#016280';
      path.querySelector('title').textContent = 'Tarif actuel : HC';
    } else if (currentHour >= 2 && currentHour < 6) {
      path.style.fill = '#ABFF00'; // Couleur pour la période HSC (de 2h à 6h)
      path.style.stroke = '#177d02';
      path.querySelector('title').textContent = 'Tarif actuel : HSC';
    } else if (currentHour >= 6 && currentHour < 7) {
      path.style.fill = '#00bef7'; // Couleur pour la période HC (de 6h à 7h)
      path.style.stroke = '#016280';
      path.querySelector('title').textContent = 'Tarif actuel : HC';
    } else if (currentHour >= 7 && currentHour < 23) {
      path.style.fill = '#fac105'; // Couleur pour la période HP (de 7h à 23h)
      path.style.stroke = '#ab8402';
      path.querySelector('title').textContent = 'Tarif actuel : HP';
    } else {
      path.style.fill = '#00bef7'; // Couleur pour la période HC (de 23h à 24h)
      path.style.stroke = '#016280';
      path.querySelector('title').textContent = 'Tarif actuel : HC';
    }
  }

  // Appeler la fonction initiale
  movePath();

  // Mettre à jour la position et la couleur toutes les minutes (60000 millisecondes)
  setInterval(movePath, 60000);
</script>

</body>
</html>

dsigmoun · Novembre 12, 2023, 7:49

Pas de soucis. C’est comme cela que l’on apprend

Effectivement, ton widget est similaire !

anon53349806 · Novembre 12, 2023, 7:59

Dommage qu’il ne permette pas de définir les heures creuses pleines etc.

Il serait du coup plus générique et adaptable à toutes les config qui existent
Genre tempo

PaTiTan · Novembre 12, 2023, 9:58

Salut,

Vos 2 widget sont bien sympa mais je pense qu’ils ne seront pas applicable à mon cas.

Je suis en HP / HC classique mais par contre, le mercredi et weekend en HC toute la journée.
Je tourne sur un calandrier qui change la variable pour faire tourner le suivi conso.

Mais dans vos 2 widget, ils ont un visuel fixe qui ne pourra pas changer ces 3 jours là

rennais35000 · Novembre 12, 2023, 9:59

Bonjour,
J’ai fais mon curieux et je te signale un copié collé qui reste de l’autre widget.

Version dashboard

Déposer le fichier cmd.info.string.distribution_energy dans le dossier /html/data/customTemplates/dashboard/

au lieu de cmd.info.string.energie_tarification.html

Bon dimanche à tous

rennais35000 · Novembre 12, 2023, 10:05

Bah oui, moi aussi je pensais trouver ça en paramètre on prend des habitudes d’exigeants avec ces beaux widgets qu’il nous fait.

dsigmoun · Novembre 12, 2023, 10:36

Je vais laisser les pro faire. J’ai atteint mes limites

noodom · Novembre 12, 2023, 11:21

Salut,

Par parametrage ça doit être jouable mais ça veut dire une liste conséquente de paramètres en imaginant une liste de zones à définir pour la semaine…
A moins de trouver une astuce genre une liste de paramètres :

Default : 00:00|07:00|6:30|16:00
Saturday : 00:00|05:00|8:30|13:00|14:10
Sunday : 00:00|07:00|8:30|18:00|22:10

Les jours non présents dans la liste, on prend Default (obligatoire), sinon on prend les params du jour si présent .

Réflexion à chaud sans doute à optimiser .

Phpvarious · Novembre 12, 2023, 11:26

Cc,

C’est parti, tu as 1h

noodom · Novembre 12, 2023, 11:28

Sur mobile ?

noodom · Novembre 12, 2023, 11:47

Ah je viens de relire les posts, c’est pas seulement HP/HC, ça serait trop simple il faut donc définir le type pour chaque nouvelle période dans le parametrage et passer en paramètre la définition de chaque zone (nom, couleur,…)

Peut-être plutôt 2h alors

rennais35000 · Novembre 17, 2023, 7:32

Ou ils sèchent nos 2 experts ou ils nous préparent THE widget avec curseur animé qui dit si tu peux consommer en fonction de l’ensoleillement en faisant varier l’intensité des couleurs;

Oui je suis joyeux, le week-end arrive, apérooooo