Bilder eurer erstellten Remotes/Oberflächen

[Dani3000]

Hallo Zusammen,

hier mal meine eine Auswahl meiner derzeitigen Views. Das Tablet hängt im Flur.

Mit welchem Programm sind die Innenansichten umgesetzt?

[LMueller]

Bei mir schaut die Visu so aus:

[Yosh]

Sieht gut aus, auch wenn ich kein Fan von diesen "dunklen" Themen bin, aber das ist Geschmacksache.

Was mir aufgefallen ist, ist, dass Du neben Icons auch viel Text-Status verwendest. Ich persönlich habe da eher den Ansatz so wenig Text Status wie möglich zu verwenden und möglichst viel nur über die Icons, ggf. farbig, zu visualisieren. Ist einfach ein anderer Ansatz.

Evtl. könntest Du noch schauen, dass Du die untere Button Leiste konsitent hälst, wobei das bei den Unterseiten der Fall zu sein scheint.

Schöne Arbeit!

Gruß,
Yosh

[Challenger]

Hi,
ich habe mein Dashboard in den letzten Monaten grafisch überarbeitet und neue Geräte wie z.B. die PV-Anlage integriert. Aktuelle Screenshots habe ich im Projekt-Thread hochgeladen > LINK

HOME+PV Popup

VG
Challenger

[roe1974]

@Challenger: Sehr cooles Dashboard !!!!!!
Als Anregung: Ich habe mir Grafiken für das Raffstore gemacht in Photoshop, dann mehrer Status Regeln übereinander gelegt, damit sehe ich am Dashboard immer den wirklichen Status des Raffstores (Höhe und Position der Lamelle). Siehe Screenshots.
lg Richard

[frischi]

Anbei wiedereinmal ein Update....

[thobe]

@Challenger: Sehr cooles Dashboard !!!!!!
Als Anregung: Ich habe mir Grafiken für das Raffstore gemacht in Photoshop, dann mehrer Status Regeln übereinander gelegt, damit sehe ich am Dashboard immer den wirklichen Status des Raffstores (Höhe und Position der Lamelle). Siehe Screenshots.
lg Richard

Das sieht ja sehr gut aus! Wie genau hast du das mit dem Neigungswinkel der Lamellen denn über Statusregeln gelöst? Ich versuche mich schon seit Wochen daran, aber habe noch keinen sinnvollen Ansatz gefunden, der funktioniert...

[Matten Matten]

Anbei wiedereinmal ein Update...

Hey, wie hast du das umgesetzt das die Charts so super mit Zeitstrahl integriert sind?

Gruß
Matten Matten

[Fonzo]

Hey, wie hast du das umgesetzt das die Charts so super mit Zeitstrahl integriert sind?

Da brauchst Du ein Webseitenelement, über das solche Dinge von einem Drittsystem in NEO eingebunden werden, da die NEO Remote selber keine Graphen erzeugt. Ausnahme wäre höchstens Graphen, die nicht über lange Zeiträume erstellt werden, siehe Beispiel Gerätestatus als Diagramm visualisieren. Bei einer CCU3 kann z.B. CCU Historian eine Webseite für ein Webseitenelement in NEO zur Verfügung stellen. Ansonsten hängt das davon ab, von was für Gewerken bzw. Geräten Du einen Graph haben willst bzw. welche Systeme in der Lage sind diese Daten von dem benutzten Gerät zu erfassen. Gängige Systeme, die mit NEO kombiniert werden um so was anzuzeigen sind z.B. IP-Symcon, Grafana oder auch ioBroker usw.

Ich nutzte für Echtzeitgraphen in NEO inzwischen JSLive in Kombination mit IP-Symcon, das die Daten von meinen benutzten Geräten aufzeichnet.

[Matten Matten]

Ich habe mich schon mit dem Webseitenelement was du auch verlinkt hast auseinander gesetzt und ausgetobt, jedoch bleibt es bei der einfachen x Achse wo nur die Datenpunkte hochgezählt werden wie hier in meinem Bild...

Ich schreibe die Diagramm Werte in eine ccu Systemvariable via nodered so wie es auch der automtion Manager macht einzeln getrennt mit einem ";" nur hätte ich auch gerne eine Zeitachse und nich das einfache hochzählen der Datenpunkte.

EDIT:
Ich habe auch die Vorlage von mediola abgeändert und erweitert so das ich mehrere werte in einer variable ablege und anfüge. Bsp

Code: Alles auswählen

2,5;3;5,3/30;33;20/301;380;390;355

ich splitte im Webseitenelement den string auf mit

daten.split('/');

Der Scriptbereich sieht dann so aus:

Code: Alles auswählen

<script>

var daten = '%neo_state%';

if (daten[daten.length - 1] === ';') {
    daten = daten.substr(0, daten.length - 1);
}

var datenteil = daten.split('/');

var datenteil0 = "" + datenteil[0] + "";
var datenteil1 = "" + datenteil[1] + "";
var datenteil2 = "" + datenteil[2] + "";
var datenteil3 = "" + datenteil[3] + "";

//var col1 = daten.split(';');
var col1 = datenteil0.split(';');
col1.splice(0, 0, 'Leistung vom Dach in Watt');

var col2 = datenteil1.split(';');
col2.splice(0, 0, 'Leistung aus dem Netz in Watt');

var col3 = datenteil2.split(';');
col3.splice(0, 0, 'Batterie Leistung in Watt');

var col4 = datenteil3.split(';');
col4.splice(0, 0, 'Hausverbrauch in Watt');

var chart = c3.generate({
    bindto: '#chart',
    data: { 
            columns: [col3, col4, col1, col2],
            type: 'area-spline',
            axis: { x: { type: 'timeseries', tick: { 
             format: '%Y-%m-%d' } } }
           },
    legend: { position: 'down' },

});
</script>

das "axis: { x: { type: 'timeseries', tick: { format: '%Y-%m-%d' } } }" hat leider nicht den gewünschten Erfolg gebracht.

am ende hab ich alle datenpunkte als diagramm nur ohne zeitstrahl und das nervt mich noch...


Gruß
Matten Matten