Angular Frontend mit WebSocket Kommunikation

Begonnen von alec_osborne, 14 April 2016, 23:06:02

Vorheriges Thema - Nächstes Thema

alec_osborne

Hallo,

wollte euch mal mein familienfreundliches UI vorstellen.

Eckdaten:
_Framework Angular 1.5.x
_WebSocket Kommunikation
_INSPINIA CSS Theme
_Web Frontend/IOS-/Android-/Windows Phone APP (Apache Cordova)

N23

Sehr schick!
Wie hast du denn die Websockets in FHEM integriert? per fhem.js?

alec_osborne

Hi,

danke. Ich habe die Umsetzung von ntruchsess genommen. Informationen und den Code (Module) findest du hier.

https://forum.fhem.de/index.php/topic,28634.0.html.

Gruß A.

Tedious

Sehr schick! Würdest Du noch ein paar Infos oder ein kleines HowTo generieren?
FHEM auf Proxmox-VM (Intel NUC) mit 4xMapleCUN (433,3x868) und Jeelink, HUE, MiLight, Max!, SonOff, Zigbee, Alexa, uvm...

alec_osborne

Hi,

wie meinst du das mit dem HowTo? Es gibt aktuell noch kein Basis Projekt welches man hernehmen einsetzen und erweitern könnte. Ich bin gerade dabei eine erste Dokumentation zu schreiben. Wenn diese den ersten sinnvollen Status hat stelle ich sie mit einem Seed-projekt bereit.

Gruß A.

Tedious

FHEM auf Proxmox-VM (Intel NUC) mit 4xMapleCUN (433,3x868) und Jeelink, HUE, MiLight, Max!, SonOff, Zigbee, Alexa, uvm...

alec_osborne

Hallo Zusammen,

habe hier ein SeedProjekt und eine erste kleine Dokumentation bereitgestellt. Die ich von Woche zu Woche erweitern werde.

https://github.com/alecosborne/neohome


Viel Spaß beim ausprobieren.

chanky

ligo

Sent from my SM-G903F using Tapatalk


Grimm80

#8
Hi,

das Projekt ist SUPER!
Aber ein kleines Manko habe ich entdeckt.
Wie ist es denn mit mehreren Funktionen auf einer Seite? Ich versuche gerade einen Schalter und ein Thermostat auf eine Seite zu bekommen, aber das Thermostat wird nicht angezeigt.

Und wie bekomme ich die namen: rooms.demo_room1 umbenannt? Wenn ich das mache dann geht die Seite nicht mehr.

Grimm80

Hier mal der Part der mich beschäftigt:



.state('rooms.demo_room1', {
            url: "/esszimmer",
            templateUrl: "views/esszimmer.html",
            data: { pageTitle: 'Esszimmer' },
            resolve: {
                loadPlugin: function ($ocLazyLoad) {
                    return $ocLazyLoad.load([
                        {
                           name: 'uiSwitch',
                           files: ['css/plugins/angular-ui-switch/angular-ui-switch.min.css','js/plugins/angular-ui-switch/angular-ui-switch.min.js'],
   name: 'ui.knob',
                           files: ['js/plugins/RadMie-ng-knob/dist/ng-knob.min.js','js/plugins/d3/d3.min.js']    
                       }
                    ]);
                }
            }
        })

.state('rooms.demo_room', {
            url: "/esszimmer",
            templateUrl: "views/esszimmer.html",
            data: { pageTitle: 'Esszimmer' },
            resolve: {
                loadPlugin: function ($ocLazyLoad) {
                    return $ocLazyLoad.load([
                        {
   name: 'ui.knob',
                           files: ['js/plugins/RadMie-ng-knob/dist/ng-knob.min.js','js/plugins/d3/d3.min.js']
                        }
                    ]);
                }
            }
        })



da wird immer nur der letzte File geladen und ich weiß nicht wie ich es kombinieren kann, damit Heizung bzw. Dimmer und normaler Schalter funktionieren?!   :o

Danke!

alec_osborne

Hi,

die Schreibweise wäre dann folgendermaßen.

.state('rooms.demo_room1', {
            url: "/esszimmer",
            templateUrl: "views/esszimmer.html",
            data: { pageTitle: 'Esszimmer' },
            resolve: {
                loadPlugin: function ($ocLazyLoad) {
                    return $ocLazyLoad.load([
                        {
                            name: 'ui.knob',
                            files: ['js/plugins/RadMie-ng-knob/dist/ng-knob.min.js','js/plugins/d3/d3.min.js']
                        },
                        {
                           name: 'uiSwitch',
                           files: ['css/plugins/angular-ui-switch/angular-ui-switch.min.css','js/plugins/angular-ui-switch/angular-ui-switch.min.js']
                        }
                    ]);
                }
            }
        })



Für textuelle Änderungen muss du dir mal die Dateien im Verzeichnis l10n\en_US.properties ansehen dort liegen dann die Textrepresentationen. Der Aufbau der Menüstruktur ist hingegen in der Datei \views\common\navigation.html hinterlegt dort findest du die Verknüpfung rooms.demo_room1. Änderst du beides (also in der nh_config und der navigation.html  solle es funktionieren.


Gruß A.

Grimm80

Danke das hat funktioniert!
Wird das Frontend auch weiter entwickelt?

Würde mich freuen wenn es da weiter geht.
Ach ja, immer wenn ich das Frontend aufrufe bekomme ich einen Websocket-Fehler und FHEM stirbt.
Ich muß dazu sagen, aktuell läuft das Frontend auf dem gleichen System mit apache, gibt es dafür eine Lösung?

Grüße

alec_osborne

Hallo,

aktuell wird das Frontend nur minimal weiterentwickelt. Allerdings wird das Seedprojekt und das Wiki Stück für Stück soweit erweitert das alles beschrieben ist was im Moment möglich ist. (siehe Bilder)

Ich habe einen Unterordner im Verzeichnis /opt/fhem/www angelegt, dort ist dann die Struktur abgelegt.


Was kommt den für ein WebSocket-Fehler und was sagt das FHEM Log beim höchsten Loglevel.


Gruß A.

Grimm80

#13
In FHEM-Log steht nur: SHUTTING DOWN
und die Meldung im Frontend: WebSocket: not inizialized

Laut den Bildern ist da ja schon recht viel möglich. Wie machst Du denn die Graphen?
Und ist es möglich die SONOS irgendiwe mit einzubinden, oder gibt es dafür schon ein Modul?

Grimm80

Hast Du auch irgendwo eine schnelle Sammlung wo und wie ich die Module aufrufe (Wetter, Google Kalender etc)

Quick and Dirty würde reichen oder Quellcode...  ;)