Pb CSS HygroThermographe en 4.4

Utilisation du core de Jeedom Widgets
1

Bonjour,
depuis la maj en 4.4 de jeedom mes virtuels qui utilise le widget HygroThermographe sont complétement décalés.
Les commandes temperature et humdité sont bien mis en place. Il s’agit d’un problème de rendu que je ne comprend pas.
image
image
image
image

Si quelqu’un aurait une petite idée je suis preneur :slight_smile:

2

Bonjour,
Peux tu mettre le code que tu utilises pour ce widget pour comprendre la position de tes valeurs dans l’image ?

3

Bonjour,
Je ne sais pas si ca sera suffisant mais voici le code html afficher par la page sur le widget

merci pour l’aide

<div class="eqLogic eqLogic-widget text-center allowResize allowReorderCmd allowLayout eqLogic_layout_default jeedomAlreadyPosition" data-eqtype="virtual" data-eqlogic_id="126" data-eqlogic_uid="eqLogic126__1816565176__" data-version="dashboard" data-translate-category="" data-category="" data-tags="" style="width: 331.59px; height: 185px; margin: 0px 1px 1px 0px; position: absolute; left: 789.89px; top: 0px;" data-conf-width="332" data-step-height="5">
  <div class="widget-name">
    <span style="color:#background-color#" data-title="" class="tippied">
      <i class=""></i>
    </span>
    <span class="cmd refresh pull-right cursor" data-cmd_id="1360">
      <i class="fas fa-sync"></i>
    </span>
    
    <span class="reportModeVisible">TestHygrographe <span class="object_name">Exterieur</span></span>
    <a href="index.php?v=d&amp;p=virtual&amp;m=virtual&amp;id=126" class="reportModeHidden">TestHygrographe <span class="object_name">Exterieur</span></a>
  </div>
  <div class="cmds ">
    
<div class="cmd cmd-widget widget-hygrothermographe" data-type="info" data-subtype="numeric" data-template="HygroThermographe" data-cmd_id="1361" data-cmd_uid="cmd1361__1488747492__" data-eqlogic_id="126" data-hidden_uid="cmd1362__1206383817__" style="background-image: url(&quot;core/template/dashboard/cmd.info.numeric.HygroThermographe/No.ext_100_Light.png&quot;);">
  <link rel="stylesheet" href="core/template/dashboard/cmd.info.numeric.HygroThermographe/hygrothermographe.css">
  <div class="temperature tippied" data-cmd_id="1361" data-title="Date de valeur: 2024-09-25 20:20:48<br>Date de collecte: 2024-09-25 20:28:33">
    <span class="intNumTemp value">19.</span>
    <span class="decNumTemp value">7</span>
    <span class="uniteTemp">°C</span>
    <div class="cmdStats hidden">
      <span class="tooltips tippied" data-title="Minimum">#minHistoryValue#</span>|<span class="tooltips tippied" data-title="Moyenne">#averageHistoryValue#</span>|<span class="tooltips tippied" data-title="Maximum">#maxHistoryValue#</span> <i class=""></i>
    </div>
  </div>
  <div class="humidity tippied" data-cmd_id="1362" data-title="Date de valeur: 2024-09-25 20:11:15<br>Date de collecte: 2024-09-25 20:28:27">
    <span class="intNumHumidity value">88.</span>
    <span class="decNumHumidity value">0</span>
    <span class="uniteHumidity">%</span>
    <div class="cmdStats hidden"></div>
  </div>
  
  <script type="text/javascript" injext="1">
    if ('TEMPERATURE' == 'TEMPERATURE') {
      let visible = document.querySelector('.cmd[data-cmd_uid="cmd1361__1488747492__"]')
      changeTheme(visible)
      visible.querySelector('.temperature').setAttribute('data-cmd_id', '1361')
      visible.querySelector('.temperature').classList += ' '
      document.body.addEventListener('changeThemeEvent', function() {
        changeTheme(visible)
      })
    } if ('TEMPERATURE' == 'HUMIDITY') {
      let hidden = document.querySelector('.cmd[data-cmd_uid="cmd1361__1488747492__"]')
      if (is_object(visible = hidden.parentNode.querySelector('.widget-hygrothermographe:not([data-cmd_uid="cmd1361__1488747492__"])'))) {
        visible.setAttribute('data-hidden_uid', hidden.getAttribute('data-cmd_uid'))
        visible.querySelector('.humidity').setAttribute('data-cmd_id', hidden.getAttribute('data-cmd_id'))
        visible.querySelector('.humidity').classList += ' '
        let html = hidden.querySelector('.cmdStats').innerHTML
        if (!html.includes('#')) {
          visible.querySelector('.humidity .cmdStats').innerHTML = html
        } else {
          visible.querySelector('.humidity .cmdStats').addClass('hidden')
        }
        hidden.remove()
      }
    }

    jeedom.cmd.addUpdateFunction('1361', function(_options) {
      let n = parseFloat(_options.display_value).toFixed(1), _int = n.split('.')[0], _dec = n.split('.')[1]
      if ('TEMPERATURE' == 'TEMPERATURE') {
        if (is_object(widget = document.querySelector('.cmd[data-cmd_uid="cmd1361__1488747492__"]'))) {
          widget.querySelector('.temperature').setAttribute('title', 'Date de valeur: ' + _options.valueDate + '<br>Date de collecte: ' + _options.collectDate)
          widget.querySelector('.intNumTemp').innerText = _int + '.'
          widget.querySelector('.decNumTemp').innerText = _dec
        }
      } else if ('TEMPERATURE' == 'HUMIDITY') {
        if (is_object(widget = document.querySelector('.cmd[data-hidden_uid="cmd1361__1488747492__"]'))) {
          widget.querySelector('.humidity').setAttribute('title', 'Date de valeur: ' + _options.valueDate + '<br>Date de collecte: ' + _options.collectDate)
          widget.querySelector('.intNumHumidity').innerText = _int + '.'
          widget.querySelector('.decNumHumidity').innerText = _dec
        }
      }
    })

    jeedom.cmd.refreshValue([{ cmd_id: '1361', value: '19.7', display_value: '19.7', valueDate: '2024-09-25 20:20:48', collectDate: '2024-09-25 20:28:33', alertLevel: 'none', unit: '' }])

    if (domUtils.issetWidgetOptParam('#scale#', 'scale')) {
      let widget = (is_object(document.querySelector('.cmd[data-hidden_uid="cmd1361__1488747492__"]'))) ? document.querySelector('.cmd[data-hidden_uid="cmd1361__1488747492__"]') : document.querySelector('.cmd[data-cmd_uid="cmd1361__1488747492__"]')
      let scale = parseFloat('#scale#')
      widget.style.width = 200 * scale + 'px'
      widget.querySelector('.temperature').style.height = 110 * scale + 'px'
      widget.querySelector('.temperature').style.fontSize = 20 * scale + 'px'
      widget.querySelector('.humidity').style.height = 90 * scale + 'px'
      widget.querySelector('.humidity').style.fontSize = 20 * scale + 'px'
    }

    function changeTheme(_widget) {
      let theme = document.body.getAttribute('data-theme').split('_')[1]
      if (theme == 'Legacy') {
        theme = 'Light'
      }
      _widget.style.backgroundImage = "url('core/template/dashboard/cmd.info.numeric.HygroThermographe/No.ext_100_" + theme + ".png')"
    }
  </script>
</div>

  </div>
  
  <script type="text/javascript" injext="1">
    if ('' == '') {
      document.querySelector('.eqLogic[data-eqLogic_uid="eqLogic126__1816565176__"] .panelLink')?.remove()
    }
    if ('1360' != '') {
      document.querySelector('.eqLogic[data-eqLogic_uid="eqLogic126__1816565176__"] .refresh')?.addEventListener('click', function() {
        jeedom.cmd.execute({ id: '1360' })
      })
    } else {
      document.querySelector('.eqLogic[data-eqLogic_uid="eqLogic126__1816565176__"] .refresh')?.remove()
    }
  </script>
</div>
4

Bonjour,

Peux tu tester ceci ?

<div class="cmd cmd-widget widget-hygrothermographe" data-type="info" data-subtype="numeric" data-template="HygroThermographe" data-cmd_id="#id#" data-cmd_uid="#uid#" data-eqLogic_id="#eqLogic_id#">
  <link rel="stylesheet" href="core/template/dashboard/cmd.info.numeric.HygroThermographe/hygrothermographe.css">
  <div class="temperature">
    <span class="intNumTemp value"></span>
    <span class="decNumTemp value"></span>
    <span class="uniteTemp">°C</span>
    <div class="cmdStats #hide_history#">
      <span title="{{Minimum}}" class="tooltips">#minHistoryValue#</span>|<span title="{{Moyenne}}" class="tooltips">#averageHistoryValue#</span>|<span title="{{Maximum}}" class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i>
    </div>
  </div>
  <div class="humidity">
    <span class="intNumHumidity value"></span>
    <span class="decNumHumidity value"></span>
    <span class="uniteHumidity">%</span>
    <div class="cmdStats"></div>
  </div>
  <template>
    <div>scale : 0.75 ({{Echelle du widget}}).</div>
  </template>
  <script>
    if ('#generic_type#' == 'TEMPERATURE') {
      let visible = document.querySelector('.cmd[data-cmd_uid="#uid#"]')
      changeTheme(visible)
      visible.querySelector('.temperature').setAttribute('data-cmd_id', '#id#')
      visible.querySelector('.temperature').classList += ' #history#'
      document.body.addEventListener('changeThemeEvent', function() {
        changeTheme(visible)
      })
    } if ('#generic_type#' == 'HUMIDITY') {
      let hidden = document.querySelector('.cmd[data-cmd_uid="#uid#"]')
      if (is_object(visible = hidden.parentNode.querySelector('.widget-hygrothermographe:not([data-cmd_uid="#uid#"])'))) {
        visible.setAttribute('data-hidden_uid', hidden.getAttribute('data-cmd_uid'))
        visible.querySelector('.humidity').setAttribute('data-cmd_id', hidden.getAttribute('data-cmd_id'))
        visible.querySelector('.humidity').classList += ' #history#'
        let html = hidden.querySelector('.cmdStats').innerHTML
        if (!html.includes('#')) {
          visible.querySelector('.humidity .cmdStats').innerHTML = html
        } else {
          visible.querySelector('.humidity .cmdStats').addClass('hidden')
        }
        hidden.remove()
      }
    }

    jeedom.cmd.addUpdateFunction('#id#', function(_options) {
      let n = parseFloat(_options.display_value).toFixed(1), _int = n.split('.')[0], _dec = n.split('.')[1]
      if ('#generic_type#' == 'TEMPERATURE') {
        if (is_object(widget = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
          widget.querySelector('.temperature').setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate)
          widget.querySelector('.intNumTemp').innerText = _int + '.'
          widget.querySelector('.decNumTemp').innerText = _dec
        }
      } else if ('#generic_type#' == 'HUMIDITY') {
        if (is_object(widget = document.querySelector('.cmd[data-hidden_uid="#uid#"]'))) {
          widget.querySelector('.humidity').setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate)
          widget.querySelector('.intNumHumidity').innerText = _int + '.'
          widget.querySelector('.decNumHumidity').innerText = _dec
        }
      }
    })

    jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])

    if (domUtils.issetWidgetOptParam('#scale#', 'scale')) {
      let widget = (is_object(document.querySelector('.cmd[data-hidden_uid="#uid#"]'))) ? document.querySelector('.cmd[data-hidden_uid="#uid#"]') : document.querySelector('.cmd[data-cmd_uid="#uid#"]')
      let scale = parseFloat('#scale#')
      widget.style.width = 200 * scale + 'px'
      widget.querySelector('.temperature').style.height = 110 * scale + 'px'
      widget.querySelector('.temperature').style.fontSize = 20 * scale + 'px'
      widget.querySelector('.humidity').style.height = 90 * scale + 'px'
      widget.querySelector('.humidity').style.fontSize = 20 * scale + 'px'
    }

    function changeTheme(_widget) {
      let theme = document.body.getAttribute('data-theme').split('_')[1]
      if (theme == 'Legacy') {
        theme = 'Light'
      }
      _widget.style.backgroundImage = "url('core/template/dashboard/cmd.info.numeric.HygroThermographe/No.ext_100_" + theme + ".png')"
    }
  </script>
</div>