Proposition d'évolution widget Datacenter

Utilisation du core de Jeedom
1

Bonjour à tous,

Je finalise une page design permettant de vérifier d’un seul coup d’œil l’état de tous mes équipements domotiques IP (IPX800, Ecodevice, WES, cams,…) :

  • La surveillance de base est faite par le plugin Network
  • Je regroupe les objets Network dans un virtuel unique
  • J’affiche état + hostname+ IP avec le widget Datacenter.

Avant
image

Après
image

Il ne manque qu’un truc, l’information « latence », que je verrais bien sous l’IP.

@Phpvarious
Penses-tu pouvoir remonter cette info de la même manière que « ip_id » ?
Si c’est possible et que tu trouves un moment, ce serait top !

Merci d’avance
@+

PS : pour ceux qui ne connaissent pas, le widget est là :
https://phpvarious.github.io/documentation/widget/fr_FR/info/binary/datacenter/

2

Hello,
Je suis en vacance actuellement, je serai de retour a la maison ce week-end, hésite pas a me relancer semaine prochaine si pas de nouvelle.

Bonne journée.

3

On fait comme ça → Merci :+1:

Profites-bien de tes vacances !

A+

4

Hello @Phpvarious

Un petit up comme convenu.

@+

5

Hello,

tu peut tester ce code :

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <!-- ################ DATACENTER ################
    Widget name : cmd.info.binary.datacenter
    Author : Phpvarious
    Inspiration : https://codepen.io/mi2oon/pen/ZXWZdV
    Last Uptade : 2024/08/15 18h20 - Phpvarious - (ajout latence)
  -->
  <div class="content-sm">
    <div class="server-#uid# #history#" data-type="info">
      <div class="server-icon-#uid#">#name_display#</div>
      <ul class="server-details-#uid#">
        <li><span>{{Hostname}}:</span><span class="data-#uid#">#name#</span></li>
        <li><span>{{Status}}:</span><span class="data-#uid# signal-#uid#"></span></li>
        <li><span>{{Address}}:</span><span class="data-#uid# ip-#uid#">#ip#</span></li>
        <li><span>{{Latency}}:</span><span class="data-#uid# latency-#uid#">ffff</span></li>
        <li><span>{{Time}}:</span><span class="data-#uid# timeCmd" data-type="info"></span></li>
        
      </ul>
    </div>
  </div>
  <template>
    <div>time : duration|date ({{Affiche durée ou date de la valeur}})</div>
    <div>blink : mettre 0 pour désactivé l'effet de clignotement.</div>
    <div>width : Largeur du widget (mini 200 | défaut : 300)</div>
    <div>coloredIconOn : Colorer l'icone même si ONLINE.(Colorer : 1 | défaut : 0)</div>
    <div>id_latency : Id de la latence à afficher.</div>
    <div> --------------- IP ----------------</div>
    <div>[ ! ] 2 possibilités de récupérer l'adresse ip à afficher sur le widget.</div>
    <div>[ ! ] 'ip' est prioritaire sur 'id_ip'.</div>
    <div>&nbsp;</div>
    <div>id_ip : Id de l'adresse IP à afficher.</div>
    <div>ip : Adresse IP à afficher. (Ex: 192.168.152.147)</div>
    <div> --------------- TRADUCTIONS ----------------</div>
    <div>trad_hostname : Remplacement du texte "hostname"</div>
    <div>trad_status : Remplacement du texte "status"</div>
    <div>trad_address : Remplacement du texte "address"</div>
    <div>trad_latency : Remplacement du texte "latency"</div>
    <div>trad_offline : Remplacement du texte "OFFLINE"</div>
    <div>trad_online : Remplacement du texte "ONLINE"</div>
    <div>trad_time : Remplacement du texte "Time"</div>
  </template>
  <script>
    var offline_#uid# = 'OFFLINE'
    var online_#uid# = 'ONLINE'
    var ip_#uid# = '#ip#'
    var latency_#uid# = '#id_latency#'
    var latency_unit_#uid# = 'ms'
    
    if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
      if ('#blink#' == '0') cmd.setAttribute('data-blink', 0)
      else cmd.setAttribute('data-blink', 1)
      if ('#coloredIconOn#' == '1') cmd.setAttribute('data-colorediconon', 1)
      if(is_numeric('#id_latency#')){
        jeedom.cmd.execute({
          id : '#id_latency#',
          async: false,
          noCache: true,
          error: function(error) {
            console.log('| | ERREUR jeedom.cmd.execute(id_latency) !!!')
            latency_#uid# = '#' + 'id_latency#'
          },
          success: function (value_latency) {
            
            jeedom.cmd.byId({
              id : '#id_latency#',
              async: false,
              noCache: true,
              error: function(error) {
                console.log('| | ERREUR jeedom.cmd.byId(id_latency) !!!')
              },
              success: function (latency_unit) {
                latency_unit_#uid# = latency_unit.unite
                
              }
            })
            latency_#uid# = value_latency + latency_unit_#uid#
            jeedom.cmd.addUpdateFunction('#id_latency#', function(_options) {
              if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
                if (_options.value != undefined) 
                {
                  cmd.querySelector('.latency-#uid#').innerHTML = _options.value + latency_unit_#uid#
                }
              }
            })
          }
        })
      }
      cmd.querySelector('.latency-#uid#').innerHTML = latency_#uid#
      if(is_numeric('#id_ip#') && '#ip#' == '#'+'ip#'){
        jeedom.cmd.execute({
          id : '#id_ip#',
          async: false,
          noCache: true,
          error: function(error) {
            console.log('| | ERREUR jeedom.cmd.execute(id_ip) !!!')
            ip_#uid# = '#' + 'ip#'
          },
          success: function (cmdInfo) {
            ip_#uid# = cmdInfo
          }
        })
      }
      cmd.querySelector('.ip-#uid#').innerHTML = ip_#uid#
      if (ip_#uid# == '#' + 'ip#') cmd.querySelector('.server-details-#uid# li:nth-child(3)').style.display='none'
      if (latency_#uid# == '#' + 'id_latency#') cmd.querySelector('.server-details-#uid# li:nth-child(4)').style.display='none'
      
      
      if ('#time#' !== 'duration' && '#time#' !== 'date')  cmd.querySelector('.server-details-#uid# li:nth-child(5)').style.display='none'
      if ('#trad_hostname#' != '#' + 'trad_hostname#') cmd.querySelector('.server-details-#uid# li:first-child span:first-child').innerHTML = '#trad_hostname#' + ':'
      if ('#trad_status#' != '#' + 'trad_status#') cmd.querySelector('.server-details-#uid# li:nth-child(2) span:first-child').innerHTML = '#trad_status#' + ':'
      if ('#trad_address#' != '#' + 'trad_address#') cmd.querySelector('.server-details-#uid# li:nth-child(3) span:first-child').innerHTML = '#trad_address#' + ':'
      if ('#trad_latency#' != '#' + 'trad_latency#') cmd.querySelector('.server-details-#uid# li:nth-child(4) span:first-child').innerHTML = '#trad_latency#' + ':'
      if ('#trad_time#' != '#' + 'trad_time#') cmd.querySelector('.server-details-#uid# li:nth-child(5) span:first-child').innerHTML = '#trad_time#' + ':'
      if ('#trad_offline#' != '#' + 'trad_offline#') offline_#uid# = '#trad_offline#'
      if ('#trad_online#' != '#' + 'trad_online#') online_#uid# = '#trad_online#'
      if (is_numeric('#width#')) document.documentElement.style.setProperty('--width-#uid#', '#width#px')
    }
    jeedom.cmd.addUpdateFunction('#id#', function(_options) {
      if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
        cmd.querySelector('.content-sm').setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate)
        if ('#time#' == 'duration' || '#time#' == 'date') {
          try {
            jeedom.cmd.displayDuration(_options.valueDate, cmd.querySelector('.timeCmd'), '#time#')
          } catch {
            jeedom.cmd.displayDuration(_options.valueDate, $('.cmd[data-cmd_id=#id#]').find('.timeCmd'), '#time#')
            console.log('displayDuration -> jQuery')
          }
        }
        if (_options.display_value >= 1) {
          cmd.setAttribute('data-state', 1)
          cmd.querySelector('.signal-#uid#').innerHTML = online_#uid#
        } else {
          cmd.setAttribute('data-state', 0)
          cmd.querySelector('.signal-#uid#').innerHTML = offline_#uid#
        }
      }
    })
    jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
  </script>
  <style>
    :root{
      --width-#uid#: 300px;
      --defautColor-#uid#: #7e8794;
      --cRgbAlert-#uid#: 210, 44, 50;
    }
    .content-sm-#uid# {
      height: 70px !important;
      min-height: 70px !important;
      max-height: 93px !important;
      display: table-cell;
      vertical-align: middle !important;
      width: 100%;
    }
    .server-#uid# {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border: 1px solid var(--objectBkgd-color);
      border-radius: 4px;
      white-space: nowrap;
      min-width: 200px;
      width: var(--width-#uid#);
      margin: 10px;
    }
    .server-icon-#uid# {
      display: inline-block;
      font-size: 2.5rem;
      margin: 0 15px;
    }
    [data-coloredicons="1"] [data-colorediconon="1"][data-state="1"] .server-icon-#uid# {
      color: var(--al-success-color);
    }
    .server-details-#uid# {
      flex: 1;
      display: block;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .server-details-#uid# li {
      display: block;
      font-size: 1.2rem;
      line-height: 1.5;
      color: var(--defautColor-#uid#);
      text-align: left;
    }
    .server-details-#uid# .data-#uid# {
      display: block;
      margin: -1.7rem 0 0 0;
      padding: 0 1rem 0 0;
      font-weight: 600;
      text-align: right;
      color: var(--link-color);
    }
    [data-coloredicons="1"] [data-state="0"] .server-#uid# {
      border-color: #d22c32;
    }
    [data-coloredicons="1"] [data-state="0"][data-blink="1"] .server-#uid# {
      -webkit-animation: alertblink-#uid# 2s ease-in-out infinite;
      animation: alertblink-#uid# 2s ease-in-out infinite;
    }
    
    [data-coloredicons="1"] [data-state="0"] .server-#uid# .server-icon-#uid#, [data-coloredicons="1"] [data-state="0"] .server-#uid# .signal-#uid# {
      color: var(--al-danger-color);
    }
    
    [data-coloredicons="1"] .server-details-#uid# .signal-#uid# { color: var(--al-success-color); }
    .server-details-#uid# .signal-#uid#::before {
      content: "";
      display: inline-block;
      width: 0.6rem;
      height: 0.6rem;
      background-color: currentColor;
      border-radius: 50%;
      margin-right: 0.5rem;
      margin-top: -0.2rem;
      vertical-align: middle;
    }
    .server-details-#uid# li:nth-child(3) .data-#uid#, .server-details-#uid# li:nth-child(4) .data-#uid#, .server-details-#uid# li:nth-child(5) .data-#uid# {
      font-weight: normal;
      color: var(--defautColor-#uid#);
    }
    [data-theme="core2019_Dark"] .server-#uid# {
      background-color: rgba(69, 70, 72, 0.5);
    }
    [data-theme="core2019_Light"] .server-#uid# {
      background-color: rgba(100, 100, 100, 0.1);
    }
    
    @keyframes alertblink-#uid# {
      0% {
        background: rgba(100, 100, 100, 0.1);
      }
      50% {
        background: rgba(var(--cRgbAlert-#uid#), 0.2);
      }
      100% {
        background: rgba(100, 100, 100, 0.1);
      }
    }
  </style>
</div>
6

Testé et approuvé :+1:
Merci pour cette évolution !

J’ai maintenant une belle page design pour visualiser d’un coup d’œil l’état de tous mes périphériques IP !

@+

1 « J'aime »
7

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