iobroker.absolutehumidity 0.1.0 → 0.1.2

package/README.md

@@ -1,12 +1,12 @@
 ![Logo](admin/absolutehumidity.svg)
 # ioBroker.absolutehumidity
 
-[![NPM version](https://img.shields.io/npm/v/ioBroker.absolutehumidity.svg)](https://www.npmjs.com/package/ioBroker.absolutehumidity)
-[![Downloads](https://img.shields.io/npm/dm/ioBroker.absolutehumidity.svg)](https://www.npmjs.com/package/ioBroker.absolutehumidity)
+[![NPM version](https://img.shields.io/npm/v/iobroker.absolutehumidity.svg)](https://www.npmjs.com/package/iobroker.absolutehumidity)
+[![Downloads](https://img.shields.io/npm/dm/iobroker.absolutehumidity.svg)](https://www.npmjs.com/package/iobroker.absolutehumidity)
 ![Number of Installations](https://ioBroker.live/badges/absolutehumidity-installed.svg)
 ![Current version in stable repository](https://ioBroker.live/badges/absolutehumidity-stable.svg)
 
-[![NPM](https://nodei.co/npm/ioBroker.absolutehumidity.png?downloads=true)](https://nodei.co/npm/ioBroker.absolutehumidity/)
+[![NPM](https://nodei.co/npm/iobroker.absolutehumidity.png?downloads=true)](https://nodei.co/npm/iobroker.absolutehumidity/)
 
 **Tests:** ![Test and Release](https://github.com/BenAhrdt/ioBroker.absolutehumidity/workflows/Test%20and%20Release/badge.svg)
 
@@ -35,6 +35,12 @@ use different Magnus, Tetens, Sonntag, Bolton or Buck coefficient sets.
 	Placeholder for the next version (at the beginning of the line):
 	### **WORK IN PROGRESS**
 -->
+### 0.1.2 (2026-09-20)
+* Keep the Device Manager in the adapter configuration instead of a separate Admin tab. Render the four live measurements through one shared HTML row template per card; Admin's read-only numeric state control otherwise adds a progress indicator for percent and bounded states.
+
+### 0.1.1 (2026-08-07)
+* (BenAhrdt) update dm-utils to 3.2.0
+
 ### 0.1.0 (2026-07-07)
 * (BenAhrdt) Ready for add to ioBroker latest repo
 
@@ -45,12 +51,6 @@ use different Magnus, Tetens, Sonntag, Bolton or Buck coefficient sets.
 * (BenAhrdt) Id will change in case of renameing device
 * (BenAhrdt) Add second manual calculation for compare
 
-### 0.0.4 (2026-07-05)
-* (BenAhrdt) Build Config in adapter own device object
-
-### 0.0.3 (2026-07-05)
-* (BenAhrdt) Add new features and icons to deviceManager
-
 [Older changes can be found there](CHANGELOG_OLD.md)
 
 ## License

package/admin/jsonConfig.json

@@ -2,49 +2,15 @@
 	"i18n": true,
 	"type": "panel",
 	"items": {
-		"_configurationInfo": {
-			"type": "staticText",
-			"text": "Configuration is done via the Device Manager tab on the left side.",
+		"_deviceManager": {
+			"type": "deviceManager",
+			"smallCards": false,
 			"newLine": true,
 			"xs": 12,
 			"sm": 12,
 			"md": 12,
 			"lg": 12,
-			"xl": 12,
-			"style": {
-				"fontSize": 16,
-				"lineHeight": 1.5
-			}
-		},
-		"_configurationLink": {
-			"type": "staticLink",
-			"label": "Open adapter tab",
-			"href": "#tab-absolutehumidity",
-			"target": "_self",
-			"button": true,
-			"variant": "contained",
-			"color": "primary",
-			"newLine": true,
-			"xs": 12,
-			"sm": 12,
-			"md": 8,
-			"lg": 6,
-			"xl": 6,
-			"controlStyle": {
-				"backgroundColor": "#0f4c81",
-				"color": "#ffffff"
-			}
-		},
-		"_previewCards": {
-			"type": "staticText",
-			"format": "html",
-			"text": "<div style='display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-top:24px;font-family:Roboto,Arial,sans-serif;'><div data-ah-card='outdoor' style='width:300px;min-height:404px;background:#d3d3d3;border-radius:4px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.25);color:#000;'><div style='height:60px;background:#21867a;color:#fff;display:flex;align-items:center;padding:0 18px;gap:18px;font-weight:700;font-size:15px;'><img src='adapter/absolutehumidity/absolutehumidity.svg' alt='' style='width:34px;height:34px;object-fit:contain;' onload='(async img=>{if(window.ahPreviewReady)return;window.ahPreviewReady=1;const raw=String(window.systemLang||window.adminLanguage||navigator.language||\"en\").toLowerCase();const lang=raw.startsWith(\"zh\")?\"zh-cn\":raw.slice(0,2);const load=async l=>{try{const r=await fetch(\"adapter/absolutehumidity/i18n/\"+l+\".json\");return r.ok?r.json():null;}catch(e){return null;}};const dict=(await load(lang))||(await load(\"en\"))||{};const text=(k,f)=>dict[k]||f||k;const fill=(s,v)=>Object.entries(v).reduce((r,e)=>r.replaceAll(\"{\"+e[0]+\"}\",e[1]),s);window.ahPreviewUpdate=()=>{document.querySelectorAll(\"[data-ah-card]\").forEach(c=>{const t=Number(c.querySelector(\"[data-ah-temp]\").value),h=Number(c.querySelector(\"[data-ah-rh]\").value),abs=c.querySelector(\"[data-ah-abs]\"),dew=c.querySelector(\"[data-ah-dew]\");if(Number.isFinite(t)&&Number.isFinite(h)&&h>=0&&h<=100){const es=6.112*Math.exp(17.67*t/(t+243.5)),e=h/100*es,a=(216.7*e)/(273.15+t);abs.textContent=a.toFixed(2);abs.dataset.value=String(a);}else{abs.textContent=\"\";abs.dataset.value=\"\";}if(Number.isFinite(t)&&Number.isFinite(h)&&h>0&&h<=100){const x=Math.log(h/100)+17.62*t/(243.12+t);dew.textContent=(243.12*x/(17.62-x)).toFixed(2);}else dew.textContent=\"\";});const out=document.querySelector(\"[data-ah-card=outdoor]\"),inn=document.querySelector(\"[data-ah-card=indoor]\");const outAbs=Number(out.querySelector(\"[data-ah-abs]\").dataset.value),inAbs=Number(inn.querySelector(\"[data-ah-abs]\").dataset.value);out.querySelector(\"[data-ah-summary]\").textContent=fill(text(\"Outdoor ventilation reference\"),{absoluteHumidity:Number.isFinite(outAbs)?outAbs.toFixed(2):\"\"});const diff=inAbs-outAbs;const key=diff>0?\"Ventilation recommended because indoor is higher\":\"Ventilation not recommended because indoor is not higher\";inn.querySelector(\"[data-ah-summary]\").textContent=fill(text(key),{absoluteHumidity:Number.isFinite(inAbs)?inAbs.toFixed(2):\"\",outdoorAbsoluteHumidity:Number.isFinite(outAbs)?outAbs.toFixed(2):\"\",difference:Number.isFinite(diff)?Math.abs(diff).toFixed(2):\"\"});};document.querySelectorAll(\"[data-ah-i18n]\").forEach(e=>{e.textContent=text(e.dataset.ahI18n,e.textContent);});window.ahPreviewUpdate();})(this)'><span data-ah-i18n='Outdoor'>Outdoor</span></div><div style='padding:18px 16px 20px;box-sizing:border-box;'><div style='height:24px;margin-bottom:22px;display:flex;align-items:center;'><i class='material-icons' aria-hidden='true' style='color:#00a51a;font-size:22px;line-height:22px;'>link</i></div><div style='display:grid;grid-template-columns:28px 1fr auto;gap:18px 8px;align-items:center;font-size:16px;'><svg viewBox='0 0 24 24' width='24' height='24' aria-hidden='true'><path fill='none' stroke='#1976d2' stroke-width='2'stroke-linecap='round' stroke-linejoin='round'd='M14 14.76V5a4 4 0 0 0-8 0v9.76a6 6 0 1 0 8 0Z'/><path fill='#1976d2'd='M10 17.5a2.5 2.5 0 1 1-2-2.45V8a2 2 0 0 1 4 0v7.05a2.5 2.5 0 0 1-2 2.45Z'/></svg><span><span data-ah-i18n='Temperature'>Temperature</span>:</span><span style='white-space:nowrap;'><input data-ah-temp type='number' value='16' step='0.1' style='width:72px;background:#fff;border:1px solid #ccc;border-radius:3px;padding:4px 6px;text-align:right;color:#000;font-size:14px;' oninput='event.stopPropagation();window.ahPreviewUpdate&&window.ahPreviewUpdate();'> <span style='font-size:14px;'>°C</span></span><svg viewBox='0 0 24 24' width='24' height='24' aria-hidden='true'><path fill='#03a9f4'd='M12 2.7 6.6 9.3A8.2 8.2 0 0 0 5 14a7 7 0 0 0 14 0 8.2 8.2 0 0 0-1.6-4.7L12 2.7Z'/><text x='12' y='16'text-anchor='middle'font-family='Arial, sans-serif'font-size='7'font-weight='700'fill='#fff'>%</text></svg><span><span data-ah-i18n='Relative humidity'>Relative humidity</span>:</span><span style='white-space:nowrap;'><input data-ah-rh type='number' value='60' min='0' max='100' step='1' style='width:72px;background:#fff;border:1px solid #ccc;border-radius:3px;padding:4px 6px;text-align:right;color:#000;font-size:14px;' oninput='event.stopPropagation();window.ahPreviewUpdate&&window.ahPreviewUpdate();'> <span style='font-size:14px;'>%</span></span><svg viewBox='0 0 24 24' width='24' height='24' aria-hidden='true'><path fill='#03a9f4'd='M12 2.7 6.6 9.3A8.2 8.2 0 0 0 5 14a7 7 0 0 0 14 0 8.2 8.2 0 0 0-1.6-4.7L12 2.7Z'/><path fill='rgba(255,255,255,.7)'d='M8.4 14.1c.3 2.1 1.6 3.3 3.4 3.7-2.8.3-5-1.2-5.4-3.6-.2-1.2.2-2.4 1.1-3.5-.1 1.2.2 2.4.9 3.4Z'/></svg><span><span data-ah-i18n='Absolute humidity'>Absolute humidity</span>:</span><span style='text-align:right;white-space:nowrap;'><span data-ah-abs>8.17</span> <span style='font-size:14px;'>g/m³</span></span><svg viewBox='0 0 24 24' width='24' height='24' aria-hidden='true'><path fill='none' stroke='#1976d2' stroke-width='2'stroke-linecap='round' stroke-linejoin='round'd='M10 13.9V5a3 3 0 0 0-6 0v8.9a5 5 0 1 0 6 0Z'/><path fill='#1976d2'd='M7 17.6a2.1 2.1 0 0 1-1-4V8a1 1 0 0 1 2 0v5.6a2.1 2.1 0 0 1-1 4Z'/><path fill='#03a9f4'd='M17 6.4 13.7 10a5 5 0 0 0-1.2 3.2 4.5 4.5 0 0 0 9 0 5 5 0 0 0-1.2-3.2L17 6.4Z'/></svg><span><span data-ah-i18n='Dew point temperature'>Dew point temperature</span>:</span><span style='text-align:right;white-space:nowrap;'><span data-ah-dew>8.23</span> <span style='font-size:14px;'>°C</span></span></div><p style='margin:18px 0 0;font-size:14px;line-height:1.35;'><span data-ah-summary>Outdoor reference: Absolute humidity is 8.17 g/m³. This value is used for indoor ventilation recommendations.</span></p></div></div><div data-ah-card='indoor' style='width:300px;min-height:404px;background:#d3d3d3;border-radius:4px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.25);color:#000;'><div style='height:60px;background:#0f4c81;color:#fff;display:flex;align-items:center;padding:0 18px;gap:18px;font-weight:700;font-size:15px;'><img src='adapter/absolutehumidity/absolutehumidity.svg' alt='' style='width:34px;height:34px;object-fit:contain;'><span data-ah-i18n='Indoor'>Indoor</span></div><div style='padding:18px 16px 20px;box-sizing:border-box;'><div style='height:24px;margin-bottom:22px;display:flex;align-items:center;'><i class='material-icons' aria-hidden='true' style='color:#00a51a;font-size:22px;line-height:22px;'>link</i></div><div style='display:grid;grid-template-columns:28px 1fr auto;gap:18px 8px;align-items:center;font-size:16px;'><svg viewBox='0 0 24 24' width='24' height='24'><path fill='none' stroke='#1976d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M14 14.76V5a4 4 0 0 0-8 0v9.76a6 6 0 1 0 8 0Z'/><path fill='#1976d2' d='M10 17.5a2.5 2.5 0 1 1-2-2.45V8a2 2 0 0 1 4 0v7.05a2.5 2.5 0 0 1-2 2.45Z'/></svg><span><span data-ah-i18n='Temperature'>Temperature</span>:</span><span style='white-space:nowrap;'><input data-ah-temp type='number' value='22' step='0.1' style='width:72px;background:#fff;border:1px solid #ccc;border-radius:3px;padding:4px 6px;text-align:right;color:#000;font-size:14px;' oninput='event.stopPropagation();window.ahPreviewUpdate&&window.ahPreviewUpdate();'> <span style='font-size:14px;'>°C</span></span><svg viewBox='0 0 24 24' width='24' height='24'><path fill='#03a9f4' d='M12 2.7 6.6 9.3A8.2 8.2 0 0 0 5 14a7 7 0 0 0 14 0 8.2 8.2 0 0 0-1.6-4.7L12 2.7Z'/><text x='12' y='16' text-anchor='middle' font-family='Arial,sans-serif' font-size='7' font-weight='700' fill='#fff'>%</text></svg><span><span data-ah-i18n='Relative humidity'>Relative humidity</span>:</span><span style='white-space:nowrap;'><input data-ah-rh type='number' value='50' min='0' max='100' step='1' style='width:72px;background:#fff;border:1px solid #ccc;border-radius:3px;padding:4px 6px;text-align:right;color:#000;font-size:14px;' oninput='event.stopPropagation();window.ahPreviewUpdate&&window.ahPreviewUpdate();'> <span style='font-size:14px;'>%</span></span><svg viewBox='0 0 24 24' width='24' height='24'><path fill='#03a9f4' d='M12 2.7 6.6 9.3A8.2 8.2 0 0 0 5 14a7 7 0 0 0 14 0 8.2 8.2 0 0 0-1.6-4.7L12 2.7Z'/><path fill='rgba(255,255,255,.7)' d='M8.4 14.1c.3 2.1 1.6 3.3 3.4 3.7-2.8.3-5-1.2-5.4-3.6-.2-1.2.2-2.4 1.1-3.5-.1 1.2.2 2.4.9 3.4Z'/></svg><span><span data-ah-i18n='Absolute humidity'>Absolute humidity</span>:</span><span style='text-align:right;white-space:nowrap;'><span data-ah-abs>9.70</span> <span style='font-size:14px;'>g/m³</span></span><svg viewBox='0 0 24 24' width='24' height='24'><path fill='none' stroke='#1976d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 13.9V5a3 3 0 0 0-6 0v8.9a5 5 0 1 0 6 0Z'/><path fill='#1976d2' d='M7 17.6a2.1 2.1 0 0 1-1-4V8a1 1 0 0 1 2 0v5.6a2.1 2.1 0 0 1-1 4Z'/><path fill='#03a9f4' d='M17 6.4 13.7 10a5 5 0 0 0-1.2 3.2 4.5 4.5 0 0 0 9 0 5 5 0 0 0-1.2-3.2L17 6.4Z'/></svg><span><span data-ah-i18n='Dew point temperature'>Dew point temperature</span>:</span><span style='text-align:right;white-space:nowrap;'><span data-ah-dew>11.09</span> <span style='font-size:14px;'>°C</span></span></div><p style='margin:18px 0 0;font-size:14px;line-height:1.35;'><span data-ah-summary>Ventilation could be useful: Indoor absolute humidity is 9.70 g/m³, outdoor is 8.17 g/m³. Indoor air is 1.53 g/m³ more humid.</span></p></div></div></div>",
-			"newLine": true,
-			"xs": 12,
-			"sm": 12,
-			"md": 8,
-			"lg": 6,
-			"xl": 6
+			"xl": 12
 		}
 	}
 }

package/io-package.json

@@ -1,8 +1,34 @@
 {
   "common": {
     "name": "absolutehumidity",
-    "version": "0.1.0",
+    "version": "0.1.2",
     "news": {
+      "0.1.2": {
+        "en": "Keep the Device Manager in the adapter configuration instead of a separate Admin tab. Render the four live measurements through one shared HTML row template per card; Admin's read-only numeric state control otherwise adds a progress indicator for percent and bounded states.",
+        "de": "Behalten Sie den Gerätemanager in der Adapterkonfiguration statt im Admin-Tab. Rendern Sie die vier Live-Messungen über eine gemeinsame HTML-Zeilenvorlage pro Karte; Admins schreibgeschützte numerische Statusanzeige fügt sonst Werte in Prozent und Grenzen hinzu.",
+        "ru": "Храните диспетчер устройств в конфигурации адаптера, а не на отдельной вкладке «Администратор». Выполните визуализацию четырех измерений в реальном времени с помощью одного шаблона строк HTML на каждой карточке; в остальном числовой элемент управления состоянием, доступный только для чтения, добавляет индикатор выполнения измерений в процентах и ограниченных состояниях.",
+        "pt": "Configure o Device Manager no adaptador em vez de uma guia Admin separada. Faça as quatro medições ao vivo usando um modelo de linha HTML compartilhado por cartão; caso contrário, o Admin adiciona um indicador de progresso para porcentagem e estados limitados.",
+        "nl": "Houd de apparaatbeheerder in de adapterconfiguratie in plaats van op een apart tabblad Admin. Geef de vier actuele metingen weer via één gedeeld HTML-rijsjabloon per kaart; de numerieke statuscontrole van de beheerder voegt anders een voortgangsindicator toe voor percentages en begrensde staten.",
+        "fr": "Conservez le Device Manager dans la configuration de l'adaptateur au lieu d'un onglet Admin séparé. Effectuez les quatre mesures en direct via un modèle de ligne HTML partagé par carte ; le contrôle numérique en lecture seule d'Admin ajoute un indicateur de progression pour le pourcentage et les états bornés.",
+        "it": "Mantieni Device Manager nell'adattatore anziché in una scheda Admin separata. Renderizza le quattro misure in tempo reale con un modello di riga HTML condiviso per scheda; il controllo numerico di sola lettura di Admin aggiunge la percentuale e gli stati limitati.",
+        "es": "Mantenga el Device Manager en la configuración del adaptador y no en otra pestaña Admin. Renderice las cuatro mediciones en vivo a través de una plantilla de filas HTML compartida por tarjeta; el control de estado numérico del administrador añade un indicador de progreso para los estados porcentuales y acotados.",
+        "pl": "Zachowaj Menedżera urządzeń w konfiguracji adaptera zamiast osobnej karty Administrator. Renderuj cztery pomiary na żywo za pomocą jednego współdzielonego szablonu wiersza HTML na kartę; Kontrola stanu numerycznego tylko do odczytu przez administratora dodaje wskaźnik postępu dla stanów procentowych i ograniczonych.",
+        "uk": "Зберігайте Диспетчер пристроїв в конфігурації адаптера замість окремої вкладки Admin. Відтворюйте чотири вимірювання в реальному часі за допомогою одного спільного шаблону рядка HTML на картку; в іншому випадку, числовий контроль стану адміністратора, призначений лише для читання, додає індикатор прогресу для відсотків та обмежених станів.",
+        "zh-cn": "将设备管理器保留在适配器配置中，而不是单独的 “管理” 选项卡。通过每张卡片的一个共享 HTML 行模板呈现四次实时测量结果；管理员的只读数字状态控件还会添加百分比和边界状态的进度指示器。"
+      },
+      "0.1.1": {
+        "en": "update dm-utils to 3.2.0",
+        "de": "update dm-utils auf 3.2.0",
+        "ru": "обновление dm-utils до 3.2.0",
+        "pt": "atualizar dm-utils para 3.2.0",
+        "nl": "update dm-utils naar 3.2.0",
+        "fr": "mettre à jour dm-utils à 3.2.0",
+        "it": "aggiornamento dm-utils a 3.2.0",
+        "es": "actualización dm-utils a 3.2.0",
+        "pl": "update dm- utils to 3.2.0",
+        "uk": "оновлення dm-utils до 3.2.0",
+        "zh-cn": "更新 dm- utils 到 3. 2. 0"
+      },
       "0.1.0": {
         "en": "Ready for add to ioBroker latest repo",
         "de": "Bereit zum Hinzufügen zum neuesten ioBroker-Repository",
@@ -67,32 +93,6 @@
         "pl": "Dodaj nowe funkcje i ikony do DeviceManager",
         "uk": "Додавання нових функцій та піктограм до DeviceManager",
         "zh-cn": "向设备管理器添加新功能和图标"
-      },
-      "0.0.2": {
-        "en": "initial release",
-        "de": "Erstveröffentlichung",
-        "ru": "первоначальный релиз",
-        "pt": "lançamento inicial",
-        "nl": "eerste release",
-        "fr": "version initiale",
-        "it": "rilascio iniziale",
-        "es": "lanzamiento inicial",
-        "pl": "wydanie początkowe",
-        "uk": "початковий випуск",
-        "zh-cn": "初始版本"
-      },
-      "0.0.1": {
-        "en": "initial release",
-        "de": "Erstveröffentlichung",
-        "ru": "Начальная версия",
-        "pt": "lançamento inicial",
-        "nl": "Eerste uitgave",
-        "fr": "Première version",
-        "it": "Versione iniziale",
-        "es": "Versión inicial",
-        "pl": "Pierwsze wydanie",
-        "uk": "Початкова версія",
-        "zh-cn": "首次出版"
       }
     },
     "titleLang": {
@@ -148,25 +148,7 @@
       "deviceManager": true
     },
     "adminUI": {
-      "config": "json",
-      "tab": "json"
-    },
-    "adminTab": {
-      "singleton": true,
-      "name": {
-        "en": "Absolute Humidity",
-        "de": "Absolute Luftfeuchtigkeit",
-        "ru": "Абсолютная влажность",
-        "pt": "Umidade Absoluta",
-        "nl": "Absolute vochtigheid",
-        "fr": "Humidité absolue",
-        "it": "Umidità assoluta",
-        "es": "Humedad absoluta",
-        "pl": "Wilgotność bezwzględna",
-        "uk": "Абсолютна вологість",
-        "zh-cn": "绝对湿度"
-      },
-      "link": "jsonTab.json5"
+      "config": "json"
     },
     "dependencies": [
       {

package/lib/modules/constants.js

@@ -5,6 +5,7 @@ const STATE_TEMPERATURE = 'temperature';
 const STATE_RELATIVE_HUMIDITY = 'relativeHumidity';
 const STATE_ABSOLUTE_HUMIDITY = 'absoluteHumidity';
 const STATE_DEW_POINT_TEMPERATURE = 'dewPointTemperature';
+const STATE_DEVICE_MANAGER_HTML = 'deviceManagerHtml';
 const CARD_HEADER_BACKGROUND = '#0f4c81';
 const OUTDOOR_CARD_HEADER_BACKGROUND = '#21867a';
 const ADAPTER_ICON = 'adapter/absolutehumidity/absolutehumidity.svg';
@@ -16,6 +17,7 @@ module.exports = {
 	OUTDOOR_CARD_HEADER_BACKGROUND,
 	STATE_ABSOLUTE_HUMIDITY,
 	STATE_DEW_POINT_TEMPERATURE,
+	STATE_DEVICE_MANAGER_HTML,
 	STATE_RELATIVE_HUMIDITY,
 	STATE_TEMPERATURE,
 };

package/lib/modules/deviceManager.js

@@ -7,11 +7,9 @@ const {
 	CARD_HEADER_BACKGROUND,
 	OUTDOOR_CARD_HEADER_BACKGROUND,
 	STATE_ABSOLUTE_HUMIDITY,
-	STATE_DEW_POINT_TEMPERATURE,
-	STATE_RELATIVE_HUMIDITY,
-	STATE_TEMPERATURE,
+	STATE_DEVICE_MANAGER_HTML,
 } = require('./constants');
-const { translate } = require('./i18n');
+const { translate, translateToLanguage } = require('./i18n');
 
 const STATE_ICONS = {
 	temperature: createSvgIcon(`
@@ -145,14 +143,14 @@ function createDeviceInfo(adapter, device, sourceValidation) {
 		name: device.name,
 		icon: ADAPTER_ICON,
 		backgroundColor: device.isOutdoor ? OUTDOOR_CARD_HEADER_BACKGROUND : CARD_HEADER_BACKGROUND,
-		status: sourceValidation.valid
-			? {
-					connection: 'connected',
-				}
+		...(sourceValidation.valid
+			? {}
 			: {
-					connection: 'disconnected',
-					warning: translate('Invalid source state'),
-				},
+					status: {
+						connection: 'disconnected',
+						warning: translate('Invalid source state'),
+					},
+				}),
 		actions: [
 			{
 				id: 'editDevice',
@@ -188,17 +186,16 @@ function createDeviceInfo(adapter, device, sourceValidation) {
 				},
 			},
 		],
-		customInfo: createDeviceCustomInfo(adapter, device, sourceValidation),
+		customInfo: createDeviceCustomInfo(adapter, device),
 	};
 }
 
 /**
  * @param {any} adapter
  * @param {Record<string, any>} device
- * @param {{ valid: boolean; temperatureStateValid: boolean; relativeHumidityStateValid: boolean }} sourceValidation
  * @returns {import('@iobroker/dm-utils').DeviceDetails<string>} Device manager custom information.
  */
-function createDeviceCustomInfo(adapter, device, sourceValidation) {
+function createDeviceCustomInfo(adapter, device) {
 	return {
 		id: device.id,
 		schema: {
@@ -208,51 +205,19 @@ function createDeviceCustomInfo(adapter, device, sourceValidation) {
 				paddingTop: 0,
 			},
 			items: {
-				temperature: createStateInfoItem(
-					translate('Temperature'),
-					device.createTemperatureState || !sourceValidation.temperatureStateValid
-						? `${adapter.getDeviceObjectId(device.id)}.${STATE_TEMPERATURE}`
-						: device.temperatureStateId,
-					'°C',
-					!device.createTemperatureState && sourceValidation.temperatureStateValid,
-					STATE_ICONS.temperature,
-				),
-				relativeHumidity: createStateInfoItem(
-					translate('Relative humidity'),
-					device.createRelativeHumidityState || !sourceValidation.relativeHumidityStateValid
-						? `${adapter.getDeviceObjectId(device.id)}.${STATE_RELATIVE_HUMIDITY}`
-						: device.relativeHumidityStateId,
-					'%',
-					!device.createRelativeHumidityState && sourceValidation.relativeHumidityStateValid,
-					STATE_ICONS.relativeHumidity,
-				),
-				absoluteHumidity: createStateInfoItem(
-					translate('Absolute humidity'),
-					`${adapter.getDeviceObjectId(device.id)}.${STATE_ABSOLUTE_HUMIDITY}`,
-					'g/m³',
-					false,
-					STATE_ICONS.absoluteHumidity,
-				),
-				dewPointTemperature: createStateInfoItem(
-					translate('Dew point temperature'),
-					`${adapter.getDeviceObjectId(device.id)}.${STATE_DEW_POINT_TEMPERATURE}`,
-					'°C',
-					false,
-					STATE_ICONS.dewPointTemperature,
-				),
-				spacer: {
-					type: 'staticText',
-					text: '',
-					newLine: true,
-					xs: 12,
-					sm: 12,
-					md: 12,
-					lg: 12,
-					xl: 12,
-				},
-				spacer2: {
-					type: 'staticText',
-					text: '',
+				measurements: {
+					type: 'state',
+					label: '',
+					oid: `${adapter.getDeviceObjectId(device.id)}.${STATE_DEVICE_MANAGER_HTML}`,
+					control: 'html',
+					readOnly: true,
+					size: 'normal',
+					narrow: false,
+					style: {
+						width: '100%',
+						minHeight: 200,
+						boxSizing: 'border-box',
+					},
 					newLine: true,
 					xs: 12,
 					sm: 12,
@@ -266,39 +231,74 @@ function createDeviceCustomInfo(adapter, device, sourceValidation) {
 }
 
 /**
- * @param {string} label
- * @param {string} oid
- * @param {string} unit
- * @param {boolean} foreign
- * @param {string} labelIcon
- * @returns {import('@iobroker/dm-utils').ConfigItemAny} State display item.
+ * @param {string} svg
  */
-function createStateInfoItem(label, oid, unit, foreign, labelIcon) {
-	return {
-		type: 'state',
-		label,
-		labelIcon,
-		oid,
-		foreign,
-		control: 'text',
-		readOnly: true,
-		unit,
-		narrow: false,
-		addColon: true,
-		newLine: true,
-		xs: 12,
-		sm: 12,
-		md: 12,
-		lg: 12,
-		xl: 12,
-	};
+function createSvgIcon(svg) {
+	return `data:image/svg+xml;base64,${Buffer.from(svg.replace(/\s+/g, ' ').trim()).toString('base64')}`;
 }
 
 /**
- * @param {string} svg
+ * @param {{ absoluteHumidity: number | null; relativeHumidity: number | null; temperature: number | null; dewPointTemperature: number | null }} values
+ * @param {string} language
+ * @returns {string} Safe HTML for the four live Device Manager measurements.
  */
-function createSvgIcon(svg) {
-	return `data:image/svg+xml;base64,${Buffer.from(svg.replace(/\s+/g, ' ').trim()).toString('base64')}`;
+function createMeasurementDisplayHtml(values, language) {
+	const escapeHtml = value =>
+		String(value).replace(/[&<>"']/g, character => {
+			switch (character) {
+				case '&':
+					return '&amp;';
+				case '<':
+					return '&lt;';
+				case '>':
+					return '&gt;';
+				case '"':
+					return '&quot;';
+				default:
+					return '&#39;';
+			}
+		});
+	const rows = [
+		{
+			label: translateToLanguage('Absolute humidity', language),
+			icon: STATE_ICONS.absoluteHumidity,
+			value: values.absoluteHumidity,
+			unit: 'g/m³',
+		},
+		{
+			label: translateToLanguage('Relative humidity', language),
+			icon: STATE_ICONS.relativeHumidity,
+			value: values.relativeHumidity,
+			unit: '%',
+		},
+		{
+			label: translateToLanguage('Temperature', language),
+			icon: STATE_ICONS.temperature,
+			value: values.temperature,
+			unit: '°C',
+		},
+		{
+			label: translateToLanguage('Dew point temperature', language),
+			icon: STATE_ICONS.dewPointTemperature,
+			value: values.dewPointTemperature,
+			unit: '°C',
+		},
+	];
+
+	const rowHtml = rows
+		.map(row => {
+			const value = Number.isFinite(row.value) ? row.value : '—';
+
+			return `<span style="display:grid;grid-template-columns:24px minmax(0,1fr) max-content 34px;column-gap:3px;align-items:center;height:44px;min-height:44px;box-sizing:border-box;">
+				<img src="${escapeHtml(row.icon)}" alt="" style="display:block;width:24px;height:24px;object-fit:contain;">
+				<span style="min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:400;line-height:1.2;">${escapeHtml(row.label)}:</span>
+				<span style="font-size:20px;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap;">${escapeHtml(value)}</span>
+				<span style="width:34px;min-width:34px;box-sizing:border-box;color:rgba(0,0,0,.7);font-size:14px;line-height:1.2;white-space:nowrap;text-align:right;">${escapeHtml(row.unit)}</span>
+			</span>`;
+		})
+		.join('');
+
+	return `<span style="display:flex;flex-direction:column;row-gap:8px;width:264px;max-width:100%;box-sizing:border-box;font-family:Roboto,Arial,sans-serif;">${rowHtml}</span>`;
 }
 
 /**
@@ -452,6 +452,7 @@ async function readAbsoluteHumidityValue(adapter, device) {
 
 module.exports = {
 	AbsoluteHumidityDeviceManagement,
+	createMeasurementDisplayHtml,
 	createDeviceInfo,
 	getDevicesSortedByAbsoluteHumidity,
 	getDeviceFormSchema,

package/lib/modules/i18n.js

@@ -36,7 +36,20 @@ function translate(text) {
 	return I18N[text] || text;
 }
 
+function translateToLanguage(text, language) {
+	const translation = translate(text);
+
+	if (typeof translation === 'string') {
+		return translation;
+	}
+
+	const languageCode = typeof language === 'string' ? language.toLowerCase() : 'en';
+
+	return translation[languageCode] || translation.en || text;
+}
+
 module.exports = {
 	I18N,
 	translate,
+	translateToLanguage,
 };

package/main.js

@@ -8,11 +8,12 @@ const { calculateAbsoluteHumidity, calculateDewPointTemperature } = require('./l
 const {
 	DEVICE_ROOT,
 	STATE_ABSOLUTE_HUMIDITY,
+	STATE_DEVICE_MANAGER_HTML,
 	STATE_DEW_POINT_TEMPERATURE,
 	STATE_RELATIVE_HUMIDITY,
 	STATE_TEMPERATURE,
 } = require('./lib/modules/constants');
-const { AbsoluteHumidityDeviceManagement } = require('./lib/modules/deviceManager');
+const { AbsoluteHumidityDeviceManagement, createMeasurementDisplayHtml } = require('./lib/modules/deviceManager');
 const {
 	createUniqueDeviceId,
 	createUniqueIdFromBase,
@@ -34,6 +35,7 @@ class Absolutehumidity extends utils.Adapter {
 
 		this.deviceManagement = null;
 		this.devices = [];
+		this.deviceManagerLanguage = 'en';
 		this.subscribedSourceIds = new Set();
 
 		this.on('ready', this.onReady.bind(this));
@@ -47,6 +49,8 @@ class Absolutehumidity extends utils.Adapter {
 	 * Is called when databases are connected and adapter received configuration.
 	 */
 	async onReady() {
+		const systemConfig = await this.getForeignObjectAsync('system.config');
+		this.deviceManagerLanguage = systemConfig?.common?.language || 'en';
 		this.deviceManagement = new AbsoluteHumidityDeviceManagement(this);
 		await this.ensureInfoStates();
 		await this.ensureDeviceRootObject();
@@ -456,9 +460,27 @@ class Absolutehumidity extends utils.Adapter {
 		} else {
 			await this.deleteObjectIfExists(`${this.getDeviceObjectId(device.id)}.${STATE_RELATIVE_HUMIDITY}`);
 		}
+		await this.ensureDeviceManagerHtmlState(device);
 		await this.deleteObjectIfExists(`${this.getDeviceObjectId(device.id)}.sources`, { recursive: true });
 	}
 
+	/**
+	 * @param {Record<string, any>} device
+	 */
+	async ensureDeviceManagerHtmlState(device) {
+		await this.setObjectNotExistsAsync(`${this.getDeviceObjectId(device.id)}.${STATE_DEVICE_MANAGER_HTML}`, {
+			type: 'state',
+			common: {
+				name: 'Device Manager display',
+				type: 'string',
+				role: 'text',
+				read: true,
+				write: false,
+			},
+			native: {},
+		});
+	}
+
 	/**
 	 * @param {Record<string, any>} device
 	 * @param {string} stateName
@@ -633,6 +655,12 @@ class Absolutehumidity extends utils.Adapter {
 	async updateDeviceValues(device) {
 		if (!(await this.hasValidDeviceSourceIds(device))) {
 			this.log.warn(`Skipping device "${device.name}" because it has unusable source state IDs`);
+			await this.updateDeviceManagerHtml(device, {
+				absoluteHumidity: null,
+				relativeHumidity: null,
+				temperature: null,
+				dewPointTemperature: null,
+			});
 			return;
 		}
 
@@ -664,6 +692,23 @@ class Absolutehumidity extends utils.Adapter {
 			val: dewPointTemperature,
 			ack: true,
 		});
+		await this.updateDeviceManagerHtml(device, {
+			absoluteHumidity,
+			relativeHumidity,
+			temperature,
+			dewPointTemperature,
+		});
+	}
+
+	/**
+	 * @param {Record<string, any>} device
+	 * @param {{ absoluteHumidity: number | null; relativeHumidity: number | null; temperature: number | null; dewPointTemperature: number | null }} values
+	 */
+	async updateDeviceManagerHtml(device, values) {
+		await this.setStateChangedAsync(`${this.getDeviceObjectId(device.id)}.${STATE_DEVICE_MANAGER_HTML}`, {
+			val: createMeasurementDisplayHtml(values, this.deviceManagerLanguage),
+			ack: true,
+		});
 	}
 
 	/**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.absolutehumidity",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "build absolute humidity from actual temperature and relative humidity",
   "author": {
     "name": "BenAhrdt",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@iobroker/adapter-core": "^3.4.1",
-    "@iobroker/dm-utils": "^3.1.1"
+    "@iobroker/dm-utils": "^3.2.0"
   },
   "devDependencies": {
     "@alcalzone/release-script": "^5.2.1",

package/admin/jsonTab.json5

@@ -1,16 +0,0 @@
-{
-	"i18n": true,
-	"type": "panel",
-	"items": {
-		"deviceManager": {
-			"type": "deviceManager",
-			"smallCards": false,
-			"newLine": true,
-			"xs": 12,
-			"sm": 12,
-			"md": 12,
-			"lg": 12,
-			"xl": 12
-		}
-	}
-}