Compare commits
2
Commits
v0.1.0-beta.1
...
develop
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c5f924bd19 | ||
|
|
82860c0eb9 |
@@ -14,6 +14,8 @@ Alle wesentlichen Aenderungen an Enelix Utils werden in dieser Datei dokumentier
|
||||
|
||||
### Beta-Aenderungen
|
||||
|
||||
- Energiediagramm uebernimmt Kachel- und Textfarbe der Visualisierung; Zeitraum-
|
||||
und Datumsauswahl bleiben in hellen und dunklen Themen lesbar.
|
||||
- Dezimale IP-Symcon-Farbwerte werden im Energiediagramm korrekt verarbeitet.
|
||||
- Kachelabstand fuer den Symcon-Kopf und versionsabhaengiger Vollbildmodus.
|
||||
- Vollstaendige PHP-, Struktur- und Symcon-Modultests fuer alle Module.
|
||||
|
||||
@@ -31,9 +31,13 @@ dezimalen Farbwerte.
|
||||
## Darstellung
|
||||
|
||||
Der Inhalt beginnt unterhalb des von Symcon eingeblendeten Kachelkopfs, damit
|
||||
Zeitraum und Datum vollstaendig bedienbar bleiben. Beim Oeffnen und beim erneuten
|
||||
Sichtbarwerden wird die Darstellung aktualisiert. Das Diagrammraster wechselt
|
||||
bei geringer Breite automatisch von zwei Spalten auf eine Spalte.
|
||||
Zeitraum und Datum vollstaendig bedienbar bleiben. Hintergrund, Text und
|
||||
Bedienelemente verwenden die von IP-Symcon bereitgestellten Kachel- und
|
||||
Textfarben. Auch geoeffnete Auswahlfelder sowie native Datumselemente passen sich
|
||||
automatisch an ein helles oder dunkles Visualisierungsthema an. Beim Oeffnen und
|
||||
beim erneuten Sichtbarwerden wird die Darstellung aktualisiert. Das
|
||||
Diagrammraster wechselt bei geringer Breite automatisch von zwei Spalten auf
|
||||
eine Spalte.
|
||||
|
||||
IP-Symcon 8.x unterstuetzt HTML-SDK-Darstellungen nur in der normalen Kachel.
|
||||
Der vom Client angebotene Vergroesserungsdialog kann deshalb leer bleiben.
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
min-width: 0;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
color: var(--content-color, inherit);
|
||||
background-color: var(--card-color, transparent);
|
||||
}
|
||||
|
||||
#energy-app {
|
||||
@@ -74,8 +76,8 @@
|
||||
padding: 58px 14px 14px;
|
||||
overflow: auto;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
color: var(--content-color, inherit);
|
||||
background-color: var(--card-color, transparent);
|
||||
}
|
||||
|
||||
.toolbar,
|
||||
@@ -104,11 +106,16 @@
|
||||
border: 1px solid rgba(127, 127, 127, 0.45);
|
||||
border-radius: 6px;
|
||||
padding: 7px 10px;
|
||||
color: inherit;
|
||||
background: rgba(127, 127, 127, 0.08);
|
||||
color: var(--content-color, inherit);
|
||||
background-color: var(--card-color, transparent);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
select option {
|
||||
color: var(--content-color, CanvasText);
|
||||
background-color: var(--card-color, Canvas);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-weight: 650;
|
||||
@@ -277,6 +284,23 @@
|
||||
const selfConsumptionChart = document.getElementById('self-consumption-chart');
|
||||
const autarkyChart = document.getElementById('autarky-chart');
|
||||
|
||||
function syncColorScheme() {
|
||||
const cardColor = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue('--card-color')
|
||||
.trim();
|
||||
const match = cardColor.match(/^#?([0-9a-f]{6})$/i);
|
||||
if (!match) {
|
||||
return;
|
||||
}
|
||||
|
||||
const value = Number.parseInt(match[1], 16);
|
||||
const red = (value >> 16) & 255;
|
||||
const green = (value >> 8) & 255;
|
||||
const blue = value & 255;
|
||||
const luminance = ((0.2126 * red) + (0.7152 * green) + (0.0722 * blue)) / 255;
|
||||
document.documentElement.style.colorScheme = luminance < 0.5 ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
function send(action, value) {
|
||||
if (typeof requestAction !== 'function') {
|
||||
return;
|
||||
@@ -372,6 +396,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
syncColorScheme();
|
||||
range.value = data.range || 'day';
|
||||
date.value = data.date || '';
|
||||
customStart.value = data.customStart || '';
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"id": "{05DE4157-F0E8-4CA9-8B5E-D6AB9310775F}",
|
||||
"name": "Enelix Utils",
|
||||
"author": "Belevo AG",
|
||||
"author": "Enelix",
|
||||
"url": "https://git.belevo.ch/ENELIX/Enelix-Utils",
|
||||
"compatibility": {
|
||||
"version": "8.0"
|
||||
|
||||
@@ -51,6 +51,9 @@ final class EnergiediagrammModulstrukturTest extends TestCase
|
||||
self::assertStringContainsString('grid-template-columns: minmax(0, 1fr)', $html);
|
||||
self::assertStringContainsString('padding: 58px 14px 14px', $html);
|
||||
self::assertStringContainsString('padding: 58px 10px 10px', $html);
|
||||
self::assertStringContainsString('background-color: var(--card-color, transparent)', $html);
|
||||
self::assertStringContainsString('color: var(--content-color, CanvasText)', $html);
|
||||
self::assertStringContainsString('function syncColorScheme()', $html);
|
||||
self::assertStringContainsString('SetCustomRange', $html);
|
||||
self::assertStringNotContainsString("addEventListener('load'", $html);
|
||||
}
|
||||
|
||||
@@ -15,6 +15,7 @@ final class LibraryMetadataTest extends TestCase
|
||||
|
||||
$daten = json_decode($inhalt, true, 512, JSON_THROW_ON_ERROR);
|
||||
self::assertSame('Enelix Utils', $daten['name']);
|
||||
self::assertSame('Enelix', $daten['author']);
|
||||
self::assertSame('8.0', $daten['compatibility']['version']);
|
||||
self::assertSame('0.1', $daten['version']);
|
||||
self::assertSame(1, $daten['build']);
|
||||
|
||||
Reference in New Issue
Block a user