Autor Thema: Angular Frontend mit WebSocket Kommunikation  (Gelesen 8596 mal)

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Angular Frontend mit WebSocket Kommunikation
« am: 14 April 2016, 23:06:02 »
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)

Offline N23

  • New Member
  • *
  • Beiträge: 11
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #1 am: 19 April 2016, 08:59:18 »
Sehr schick!
Wie hast du denn die Websockets in FHEM integriert? per fhem.js?

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #2 am: 19 April 2016, 11:42:29 »
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.

Offline Tedious

  • Hero Member
  • *****
  • Beiträge: 1102
  • Indocti discant et ament meminisse periti
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #3 am: 19 April 2016, 13:10:48 »
Sehr schick! Würdest Du noch ein paar Infos oder ein kleines HowTo generieren?
FHEM auf Brix N3150/4GB/500GB mit 4xMapleCUN (433,3x868) und Jeelink, HUE, MiLight, Max! und SonOff, Alexa mit HABridge, Kleinkram...

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #4 am: 19 April 2016, 22:08:49 »
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.

Offline Tedious

  • Hero Member
  • *****
  • Beiträge: 1102
  • Indocti discant et ament meminisse periti
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #5 am: 20 April 2016, 09:26:45 »
Sowas meinte ich ;)
FHEM auf Brix N3150/4GB/500GB mit 4xMapleCUN (433,3x868) und Jeelink, HUE, MiLight, Max! und SonOff, Alexa mit HABridge, Kleinkram...

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #6 am: 29 April 2016, 08:07:59 »
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.

Offline chanky

  • New Member
  • *
  • Beiträge: 10
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #7 am: 18 Mai 2016, 20:32:10 »
ligo

Sent from my SM-G903F using Tapatalk


Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #8 am: 03 Juni 2016, 13:53:13 »
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.
« Letzte Änderung: 03 Juni 2016, 15:52:03 von Grimm80 »

Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #9 am: 03 Juni 2016, 18:15:51 »
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!

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #10 am: 05 Juni 2016, 20:22:37 »
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.

Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #11 am: 06 Juni 2016, 20:05:40 »
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

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #12 am: 06 Juni 2016, 21:37:56 »
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.

Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #13 am: 07 Juni 2016, 08:02:12 »
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?
« Letzte Änderung: 07 Juni 2016, 08:03:54 von Grimm80 »

Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #14 am: 07 Juni 2016, 17:00:59 »
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...  ;)