FHEM Forum

FHEM => Frontends => Thema gestartet von: alec_osborne am 14 April 2016, 23:06:02

Titel: Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne 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)
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: N23 am 19 April 2016, 08:59:18
Sehr schick!
Wie hast du denn die Websockets in FHEM integriert? per fhem.js?
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne 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 (https://forum.fhem.de/index.php/topic,28634.0.html).

Gruß A.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Tedious am 19 April 2016, 13:10:48
Sehr schick! Würdest Du noch ein paar Infos oder ein kleines HowTo generieren?
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne 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.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Tedious am 20 April 2016, 09:26:45
Sowas meinte ich ;)
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne 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 (https://github.com/alecosborne/neohome)


Viel Spaß beim ausprobieren.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: chanky am 18 Mai 2016, 20:32:10
ligo

Sent from my SM-G903F using Tapatalk

Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 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.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 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!
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne 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.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 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
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne 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.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 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?
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 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...  ;)
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 07 Juni 2016, 23:01:00
Also im Frontend muss Initialized stehen sonst wird es nicht gehen.

Vielleicht findest du hier die Lösung. Hast du alle alle dort beschriebenen Schritte gemacht?
https://forum.fhem.de/index.php/topic,28634.0.html (https://forum.fhem.de/index.php/topic,28634.0.html)


Man kann alles einbinden und steuern was in FHEM auch geht. Nur habe ich keine SONOS und habe deswegen auch noch keine Directive gemacht.

Na eine Samlung gibt es nicht....Im Seedproject sind aber alle Directiven enthalten. Nur als Samples sind sie nicht implementiert.

Ich kann ja als nächstes mal ein Sample mit dem Wetter machen.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 08 Juni 2016, 08:04:28
Das Problem mit der Verbindung habe ich hinbekommen. Einfach auf einer anderen Maschine installiert und jetzt geht es.

Wäre cool wenn du diverse Samples implementieren kannst, wie bei deinen Screenshots.
Du könntest ja einfach deine ganzen Einträge veröffentlichen, den Rest bekommt man dann irgendwie hin.

Das mit der Sonos ist schade....Wenn man die Bausteine aus dem Tablet-UI dafür verwenden könnte wäre das ja auch schon cool.

Aktuell finde ich dein Frontend sehr gelungen!

Ich hoffe Du entwickelst es weiter.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 18 Juni 2016, 12:42:03
Danke schon mal für die Charts.

Was würdest Du denn benötigen um die Sonos mit dazu zu nehmen?

Hier wäre das Reading vom Websocket:



2016.06.18 13:10:30 5: websocket command list devs: sonos_Allgemein
2016.06.18 13:10:30 5: {
  'buffer' => '{"payload":{"readings":{"PlaylistsVersion":{"Time":"Sa 18 Jun 2016 10:27:48 CEST GMT","Value":"RINCON_B8E937E7B3C401400,40"},"currentStreamAudio":{"Value":"1","Time":"Sa 18 Jun 2016 10:53:22 CEST GMT"},"QueueVersion":{"Value":"","Time":"Sa 18 Jun 2016 10:29:40 CEST GMT"},"nextOriginalTrackNumber":{"Time":"Sa 18 Jun 2016 10:29:04 CEST GMT","Value":""},"Mute":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"roomNameAlias":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"Allgemein"},"SleepTimer":{"Value":"off","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"ZoneGroupID":{"Value":"RINCON_B8E937E7B3C401400:__","Time":"Sa 18 Jun 2016 09:55:11 CEST GMT"},"OutputFixed":{"Time":"Sa 18 Jun 2016 09:55:11 CEST GMT","Value":"0"},"fieldType":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":""},"MasterPlayer":{"Value":"sonos_Allgemein","Time":"Sa 18 Jun 2016 09:55:11 CEST GMT"},"currentTrackPosition":{"Time":"Sa 18 Jun 2016 11:02:21 CEST GMT","Value":"0:00:00"},"AlarmList":{"Value":"{}","Time":"Sa 18 Jun 2016 10:55:25 CEST GMT"},"currentTrackURI":{"Time":"Sa 18 Jun 2016 10:53:22 CEST GMT","Value":"aac://mp3channels.webradio.antenne.de/antenne.aac"},"presence":{"Time":"Sa 18 Jun 2016 10:55:20 CEST GMT","Value":"appeared"},"nextAlbumArtURL":{"Value":"/fhem/sonos/cover/empty.jpg","Time":"Sa 18 Jun 2016 10:29:04 CEST GMT"},"Bass":{"Time":"Sa 18 Jun 2016 09:55:11 CEST GMT","Value":"2"},"currentAlbumArtist":{"Value":"","Time":"Sa 18 Jun 2016 10:29:04 CEST GMT"},"Treble":{"Value":"1","Time":"Sa 18 Jun 2016 09:55:11 CEST GMT"},"currentAlbum":{"Time":"Sa 18 Jun 2016 10:29:04 CEST GMT","Value":""},"currentSenderCurrent":{"Value":"","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"GroupMute":{"Time":"Sa 18 Jun 2016 09:55:11 CEST GMT","Value":"0"},"currentAlbumArtURL":{"Value":"http://192.168.190.41:1400/getaa?s=1&u=x-sonosapi-stream%3as15034%3fsid%3d254%26flags%3d8224%26sn%3d0","Time":"Sa 18 Jun 2016 10:53:22 CEST GMT"},"Balance":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"IsMaster":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"1"},"currentAlbumArtURI":{"Time":"Sa 18 Jun 2016 10:47:04 CEST GMT","Value":"./www/images/default/SONOSPLAYER/sonos_Allgemein_AlbumArt.gif"},"transportState":{"Value":"PLAYING","Time":"Sa 18 Jun 2016 10:53:22 CEST GMT"},"serialNum":{"Value":"B8-E9-37-E7-B3-C4:F","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"Loudness":{"Time":"Sa 18 Jun 2016 09:55:11 CEST GMT","Value":"0"},"SubEnable":{"Value":"1","Time":"Sa 18 Jun 2016 09:55:11 CEST GMT"},"LastActionResult":{"Time":"Sa 18 Jun 2016 10:55:24 CEST GMT","Value":"Play: Success!"},"Repeat":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"0"},"DailyIndexRefreshTime":{"Value":"","Time":"Sa 18 Jun 2016 09:55:11 CEST GMT"},"nextTrackDuration":{"Value":"","Time":"Sa 18 Jun 2016 10:29:04 CEST GMT"},"location":{"Value":"http://192.168.190.41:1400/xml/device_description.xml","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"infoSummarize2":{"Time":"Sa 18 Jun 2016 11:09:14 CEST GMT","Value":"PLAYING => ANTENNE BAYERN: Shawn Mendes - Stitches"},"CrossfadeMode":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"currentOriginalTrackNumber":{"Time":"Sa 18 Jun 2016 10:29:04 CEST GMT","Value":""},"nextTrackProvider":{"Value":"","Time":"Sa 18 Jun 2016 10:29:04 CEST GMT"},"SubPolarity":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:11 CEST GMT"},"infoSummarize4":{"Value":"","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"currentSender":{"Time":"Sa 18 Jun 2016 10:30:04 CEST GMT","Value":"ANTENNE BAYERN"},"GroupVolume":{"Value":"18","Time":"Sa 18 Jun 2016 10:47:05 CEST GMT"},"SlavePlayer":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"[]"},"softwareRevision":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"6.2"},"roomName":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"Allgemein"},"QueueHash":{"Time":"Sa 18 Jun 2016 10:29:40 CEST GMT","Value":"f584076b7df9e67d33332041cbc3fff6"},"saveRoomName":{"Value":"Allgemein","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"currentTrackDuration":{"Time":"Sa 18 Jun 2016 10:53:22 CEST GMT","Value":"0:00:00"},"SleepTimerVersion":{"Value":"","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"playerType":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"S1"},"infoSummarize3":{"Value":"Lautstärke: 18 ~ Ton An ~ Balance: Mitte ~ Kein Kopfhörer","Time":"Sa 18 Jun 2016 10:47:04 CEST GMT"},"AlarmListIDs":{"Value":"","Time":"Sa 18 Jun 2016 10:55:25 CEST GMT"},"Shuffle":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"AlarmRunningID":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":""},"currentTrackProvider":{"Value":"Radio","Time":"Sa 18 Jun 2016 10:47:03 CEST GMT"},"nextTrackURI":{"Time":"Sa 18 Jun 2016 10:29:04 CEST GMT","Value":""},"Volume":{"Time":"Sa 18 Jun 2016 10:47:03 CEST GMT","Value":"18"},"AlarmListVersion":{"Value":"RINCON_B8E937E7B3C401400:0","Time":"Sa 18 Jun 2016 10:55:25 CEST GMT"},"RepeatOne":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"numberOfTracks":{"Value":"2","Time":"Sa 18 Jun 2016 10:53:22 CEST GMT"},"TruePlay":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:11 CEST GMT"},"AlarmRunning":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"0"},"SubGain":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:11 CEST GMT"},"state":{"Value":"appeared","Time":"Sa 18 Jun 2016 10:55:25 CEST GMT"},"currentTitle":{"Value":"","Time":"Sa 18 Jun 2016 10:29:04 CEST GMT"},"nextTitle":{"Value":"","Time":"Sa 18 Jun 2016 10:29:04 CEST GMT"},"nextArtist":{"Time":"Sa 18 Jun 2016 10:29:04 CEST GMT","Value":""},"currentTrack":{"Value":"1","Time":"Sa 18 Jun 2016 10:53:22 CEST GMT"},"roomIcon":{"Time":"Sa 18 Jun 2016 09:55:11 CEST GMT","Value":"living"},"currentArtist":{"Time":"Sa 18 Jun 2016 10:29:04 CEST GMT","Value":""},"RadiosVersion":{"Time":"Sa 18 Jun 2016 10:29:40 CEST GMT","Value":"RINCON_B8E937E7B3C401400,28"},"currentNormalAudio":{"Time":"Sa 18 Jun 2016 11:05:04 CEST GMT","Value":"0"},"nextAlbum":{"Time":"Sa 18 Jun 2016 10:29:04 CEST GMT","Value":""},"HeadphoneConnected":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"0"},"nextAlbumArtist":{"Time":"Sa 18 Jun 2016 10:29:04 CEST GMT","Value":""},"nextAlbumArtURI":{"Value":"./www/images/default/SONOSPLAYER/sonos_Allgemein_NextAlbumArt.png","Time":"Sa 18 Jun 2016 10:29:04 CEST GMT"},"currentSenderInfo":{"Value":"Shawn Mendes - Stitches","Time":"Sa 18 Jun 2016 11:09:14 CEST GMT"},"FavouritesVersion":{"Time":"Sa 18 Jun 2016 10:29:40 CEST GMT","Value":"RINCON_B8E937E7B3C401400,28"},"infoSummarize1":{"Time":"Sa 18 Jun 2016 11:09:14 CEST GMT","Value":"ANTENNE BAYERN: Shawn Mendes - Stitches"}},"arg":"sonos_Allgemein","index":0,"name":"sonos_Allgemein","num":1},"type":"listentry"}',
  'type' => 'text'
}

Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 19 Juni 2016, 10:26:23
Hi na das war schon sehr hilfreich. Ich würde es noch schön finden wenn du mir die Liste mit fhem Befehlen schickst.

Gesendet von meinem HUAWEI CRR-L09 mit Tapatalk

Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 19 Juni 2016, 11:10:00
diese ist doch in der Commandref hinterlegt?

Sonos:
Sonos (http://fhem.de/commandref_DE.html#SONOS)

Sonosplayer:
Sonosplayer (http://fhem.de/commandref_DE.html#SONOSPLAYER)

Ich hab damit auch schonmal angefangen ein Modul zu bauen :-)
Laut und Leise bekomm ich hin sowie das Aktuelle Logo, aber Bass, Trible, Playlist etc schaff ich leider net.
Da hab ich zu wenig durchblick in deinem Frontend.

Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 19 Juni 2016, 11:12:03
MAn kann das noch alles schöner machen, aber für die ersten Schritte in deinem Frontend, kam ich schon relativ weit denke ich.

Hier mal ein Screenshot meiner kleinen Übung:

Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 19 Juni 2016, 16:48:38
Hi,

na das sieht doch schon sehr gut aus. Welche Funktion soll ich mir mal ansehen Stop/Play/Pause +/- Channel ?

Möchtest du den Code einchecken? Oder wie wollen wir da verfahren?


Grus A.

Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 19 Juni 2016, 19:10:44
Wenn Du willst kannst den soweit einchecken...
Naja ich benötige noch Bass und Tribel sowie die Playlisten und Favoriten in einer DropDown wenn das irgendwie geht.

Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 23 Juni 2016, 08:48:14
Hi,

das heißt du brauchst noch eine Funktion für folgende Commandos?
set SONOS_PLAY Bass XX;
set SONOS_PLAY Treble XX;

Das wird bestimmt zu voll auf der Seite.

Kann man das nicht in ein Configmenü (Modaler Dialog) auslagern das über ein Zahnrad erreichbar ist. Das sind doch Funktionen die nicht unbedingt in die erste Ebene gehören oder?
Wo bekomme ich die FavoritenRadioliste her? Die kann ich nicht finden.


Gruß A.




Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 23 Juni 2016, 18:41:34
Ja natürlich kann man das so auslagern.  ;D

Bei meinem Test wollte ich das halt erstmal so einbauen, habe das aber leider nicht so hinbekommen.
Ich denke mit einem Slider (up / down) wäre das ganz gut so.

Wenn Du dann was grob fertig hast, würde ich mich freuen wenn Du mir das zu kommen lässt, vielleicht hab ich dann noch paar Idden.
Die Playlists bzw. Favoriten mit einer DropDown, oder was wäre deine Idee?

Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 23 Juni 2016, 22:09:19
Ja....mal sehen ich benötige das Commando für das "Get Favoritenliste" Und die Struktur die da geliefert wird. Ist das ein Reading in dem Sonos Device?
Ich baue nächste Woche mal einen Vorschlag den du dir dann ansehen kannst.


Gruß S.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 24 Juni 2016, 21:28:56
Hier mal die Einzelheiten so wie es in FHEM aussieht als Pic.

Hoffe das Hilft


Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 24 Juni 2016, 21:32:24
Und hier noch die SET-Liste
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 24 Juni 2016, 21:35:45
Hallo,

und sonos_allgemein ist das das Sonos Device oder das Sonos_Play Device? Was kommt da zurück wenn man get Favourites macht bestimmt kein JSON oder? Kannst das ja mal zum Spass in deiner Controler schreiben und absetzen und schauen was passiert.

Gruß A
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 25 Juni 2016, 16:44:59
Das "sonos_Allgemein" ist der Name meiner Sonos.
Wenn man "get Favoutites" macht kommt folgendes raus:



LastActionResult:            GetFavourites: "1LIVE","Antenne","DASDING","PN-Eins","Pure-FM","ROCK-ANTENNE","Radio-Gong","sunshine live","sunshine live - Die 90er","sunshine live - EDM","sunshine live - house"

Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 25 Juni 2016, 18:52:10
Hi und hast du mal versucht das in deinem controller aufzurufen. Schalte zudem in der nhconfig alle debug stufen ein. Dann solltest du sehen das das kommando gesendet wird und was die Antwort von fhem ist. Wäre schön wenn du das mal prüfen kannst.

Gruß S.

Gesendet von meinem HUAWEI CRR-L09 mit Tapatalk

Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 27 Juni 2016, 16:05:15
wo genau sehe ich dann den debug?
Mir wird auf der Webseite nichts angezeigt wenn ich die Modis in der nh_config aktiviere.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 27 Juni 2016, 16:35:39
Zitat von: Grimm80 am 27 Juni 2016, 16:05:15
wo genau sehe ich dann den debug?
Mir wird auf der Webseite nichts angezeigt wenn ich die Modis in der nh_config aktiviere.
F12 im Browser drücken und dann in der Console schauen.

Gruß S.
Zitat von: alec_osborne am 25 Juni 2016, 18:52:10
Hi und hast du mal versucht das in deinem controller aufzurufen. Schalte zudem in der nhconfig alle debug stufen ein. Dann solltest du sehen das das kommando gesendet wird und was die Antwort von fhem ist. Wäre schön wenn du das mal prüfen kannst.

Gruß S.

Gesendet von meinem HUAWEI CRR-L09 mit Tapatalk


Gesendet von meinem HUAWEI CRR-L09 mit Tapatalk

Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 28 Juni 2016, 11:48:52
Hi,

also hier mal der Part:



11:46:35.778 Fire from sonos_Allgemein:{"Name":"sonos_Allgemein","Internals":"","Readings":{"Treble":{"Time":"Sa 18 Jun 2016 09:55:11 CEST GMT","Value":"1"},"GroupVolume":{"Time":"Di 28 Jun 2016 07:40:20 CEST GMT","Value":"0"},"currentTrackURI":{"Time":"Di 28 Jun 2016 06:29:53 CEST GMT","Value":"aac://mp3channels.webradio.antenne.de/antenne.aac"},"nextOriginalTrackNumber":{"Time":"So 26 Jun 2016 00:14:01 CEST GMT","Value":""},"Shuffle":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"0"},"PlaylistsVersion":{"Value":"RINCON_XXXXXXXXXXXXXXXXX,40","Time":"Sa 18 Jun 2016 10:27:48 CEST GMT"},"Balance":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"QueueHash":{"Value":"9a1c7ee2c7ce38d4bbbaf29ab9f2ac1e","Time":"Di 28 Jun 2016 06:29:53 CEST GMT"},"presence":{"Time":"Di 28 Jun 2016 06:29:48 CEST GMT","Value":"appeared"},"softwareRevision":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"6.2"},"serialNum":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"B8-E9-37-E7-B3-C4:F"},"QueueVersion":{"Value":"","Time":"Di 28 Jun 2016 06:29:53 CEST GMT"},"SubGain":{"Time":"Sa 18 Jun 2016 09:55:11 CEST GMT","Value":"0"},"CrossfadeMode":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"nextAlbumArtist":{"Value":"","Time":"So 26 Jun 2016 00:14:01 CEST GMT"},"infoSummarize4":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":""},"currentTitle":{"Value":"","Time":"Di 28 Jun 2016 06:29:55 CEST GMT"},"currentTrack":{"Value":"1","Time":"Di 28 Jun 2016 06:29:53 CEST GMT"},"DailyIndexRefreshTime":{"Time":"Sa 18 Jun 2016 09:55:11 CEST GMT","Value":""},"nextArtist":{"Value":"","Time":"Di 28 Jun 2016 06:29:55 CEST GMT"},"currentOriginalTrackNumber":{"Time":"So 26 Jun 2016 00:19:45 CEST GMT","Value":""},"fieldType":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":""},"nextTrackDuration":{"Time":"Di 28 Jun 2016 06:29:55 CEST GMT","Value":""},"SubEnable":{"Value":"1","Time":"Sa 18 Jun 2016 09:55:11 CEST GMT"},"infoSummarize1":{"Value":"ANTENNE BAYERN: Echosmith - Cool Kids","Time":"Di 28 Jun 2016 09:43:39 CEST GMT"},"nextTrackURI":{"Value":"","Time":"Di 28 Jun 2016 06:29:52 CEST GMT"},"location":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"http://192.168.190.41:1400/xml/device_description.xml"},"RadiosVersion":{"Value":"RINCON_XXXXXXXXXXXXXXXXX,28","Time":"Sa 18 Jun 2016 10:29:40 CEST GMT"},"OutputFixed":{"Time":"Sa 18 Jun 2016 09:55:11 CEST GMT","Value":"0"},"infoSummarize2":{"Time":"Di 28 Jun 2016 09:43:39 CEST GMT","Value":"PLAYING => ANTENNE BAYERN: Echosmith - Cool Kids"},"nextAlbum":{"Value":"","Time":"Sa 25 Jun 2016 23:36:29 CEST GMT"},"SleepTimer":{"Value":"off","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"HeadphoneConnected":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"0"},"nextTrackProvider":{"Value":"","Time":"So 26 Jun 2016 00:14:01 CEST GMT"},"currentSender":{"Time":"Di 28 Jun 2016 06:29:54 CEST GMT","Value":"ANTENNE BAYERN"},"IsMaster":{"Value":"1","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"RepeatOne":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"currentAlbumArtURI":{"Time":"Di 28 Jun 2016 06:29:54 CEST GMT","Value":"./www/images/default/SONOSPLAYER/sonos_Allgemein_AlbumArt.gif"},"currentTrackProvider":{"Time":"Di 28 Jun 2016 06:29:53 CEST GMT","Value":"Radio"},"Mute":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"0"},"Bass":{"Value":"4","Time":"So 19 Jun 2016 12:47:47 CEST GMT"},"currentArtist":{"Time":"Di 28 Jun 2016 06:29:55 CEST GMT","Value":""},"currentNormalAudio":{"Value":"0","Time":"Di 28 Jun 2016 06:29:55 CEST GMT"},"AlarmRunningID":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":""},"currentTrackDuration":{"Time":"Di 28 Jun 2016 06:29:48 CEST GMT","Value":"0:00:00"},"SleepTimerVersion":{"Value":"","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"roomIcon":{"Value":"living","Time":"Sa 18 Jun 2016 09:55:11 CEST GMT"},"GroupMute":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:11 CEST GMT"},"roomNameAlias":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"Allgemein"},"currentAlbumArtURL":{"Time":"Di 28 Jun 2016 06:29:54 CEST GMT","Value":"http://192.168.190.41:1400/getaa?s=1&u=x-sonosapi-stream%3as15034%3fsid%3d254%26flags%3d8224%26sn%3d0"},"AlarmList":{"Time":"Di 28 Jun 2016 06:29:53 CEST GMT","Value":"{}"},"AlarmRunning":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"nextAlbumArtURI":{"Time":"Di 28 Jun 2016 06:29:52 CEST GMT","Value":"./www/images/default/SONOSPLAYER/sonos_Allgemein_NextAlbumArt.png"},"MasterPlayer":{"Time":"Sa 18 Jun 2016 09:55:11 CEST GMT","Value":"sonos_Allgemein"},"nextAlbumArtURL":{"Time":"Di 28 Jun 2016 06:29:52 CEST GMT","Value":"/fhem/sonos/cover/empty.jpg"},"currentSenderInfo":{"Time":"Di 28 Jun 2016 09:43:39 CEST GMT","Value":"Echosmith - Cool Kids"},"currentStreamAudio":{"Value":"1","Time":"Di 28 Jun 2016 06:29:53 CEST GMT"},"playerType":{"Value":"S1","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"ZoneGroupID":{"Time":"Sa 18 Jun 2016 09:55:11 CEST GMT","Value":"RINCON_XXXXXXXXXXXXXXXXX:__"},"Volume":{"Value":"0","Time":"Di 28 Jun 2016 07:40:20 CEST GMT"},"currentSenderCurrent":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":""},"Loudness":{"Value":"0","Time":"So 19 Jun 2016 12:47:46 CEST GMT"},"transportState":{"Value":"PLAYING","Time":"Di 28 Jun 2016 06:29:54 CEST GMT"},"state":{"Value":"appeared","Time":"Di 28 Jun 2016 06:29:52 CEST GMT"},"FavouritesVersion":{"Time":"Sa 18 Jun 2016 10:29:40 CEST GMT","Value":"RINCON_XXXXXXXXXXXXXXXXX,28"},"Repeat":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"0"},"nextTitle":{"Time":"Di 28 Jun 2016 06:29:55 CEST GMT","Value":""},"roomName":{"Value":"Allgemein","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"numberOfTracks":{"Value":"2","Time":"Di 28 Jun 2016 06:29:53 CEST GMT"},"currentAlbumArtist":{"Time":"Di 28 Jun 2016 06:29:52 CEST GMT","Value":""},"saveRoomName":{"Value":"Allgemein","Time":"Sa 18 Jun 2016 09:55:10 CEST GMT"},"AlarmListIDs":{"Value":"","Time":"Di 28 Jun 2016 06:29:53 CEST GMT"},"currentAlbum":{"Value":"","Time":"So 26 Jun 2016 00:19:45 CEST GMT"},"TruePlay":{"Value":"0","Time":"Sa 18 Jun 2016 09:55:11 CEST GMT"},"currentTrackPosition":{"Time":"So 26 Jun 2016 00:35:19 CEST GMT","Value":"0:00:00"},"AlarmListVersion":{"Time":"Di 28 Jun 2016 06:29:53 CEST GMT","Value":"RINCON_XXXXXXXXXXXXXXXXX:0"},"SlavePlayer":{"Time":"Sa 18 Jun 2016 09:55:10 CEST GMT","Value":"[]"},"SubPolarity":{"Time":"Sa 18 Jun 2016 09:55:11 CEST GMT","Value":"0"},"LastActionResult":{"Value":"GetFavourites: \"1LIVE\",\"Antenne\",\"DASDING\",\"PN-Eins\",\"Pure-FM\",\"ROCK-ANTENNE\",\"Radio-Gong\",\"sunshine live\",\"sunshine live - Die 90er\",\"sunshine live - EDM\",\"sunshine live - house\"","Time":"Di 28 Jun 2016 09:46:35 CEST GMT"},"infoSummarize3":{"Value":"Lautstärke: 0 ~ Ton An ~ Balance: Mitte ~ Kein Kopfhörer","Time":"Di 28 Jun 2016 07:43:25 CEST GMT"}},"Attributes":"","Sets":"","Gets":"","AttrList":"","Image":"images/controls/window_blind_25.png"}1 sonos_controllers.js:65:5


Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 04 Juli 2016, 09:54:51
Hier noch die Screens nach dem einbinden der Sonos:

Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 04 Juli 2016, 10:00:03
Hi,


so die Frage ist jetzt kannst du elegant die Lautstärke ändern (Du musst dazu auf die Zahl drücken... Das muss man natürlich noch schöner machen)? Oder sollten die Einstellungen in den Modalen Dialog?


Gruß A.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 04 Juli 2016, 11:01:27
Das mit dem Klick und dann Zahl ändern habe ich verstanden  :D
Bei der Sonos kommt es an aber das sieht dann so aus:



2016-07-04 11:00:30 SONOSPLAYER sonos_Allgemein LastActionResult: SetVolume: 2
2016-07-04 11:00:32 SONOSPLAYER sonos_Allgemein LastActionResult: SetVolume: 0



Das heißt, er setzt erst das Vol, wird danach aber gleich wieder überschrieben.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 04 Juli 2016, 11:13:28
Hi,


kannst du mal bitte schauen ob das doppelte Commando aus der Oberfläche kommt. Wenn der Debug Modus an ist sollte das Commando "set sonos_Allgemein Volume 2/0" dort zu sehen sein.


Vielen Dank.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 04 Juli 2016, 11:39:57
Im Log steht immer nur Value: 0

Mir ist aufgefallen, sobald man das Popup verläßt sieht man das er den Wert wieder auf 0 setzt bevor es dann verschwindet.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 05 Juli 2016, 22:02:18
Erster Test.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 08 Juli 2016, 21:11:09
Ich habe eine Wetterdemo hinzugefügt. Die Konfiguration erfolgt in der nhConfig.js. Die nhConfig ist für OpenWeathermap bis auf die APPID vorkonfiguriert. Aktuell ist noch kein gleichzeitiger Betrieb von mehreren Stationen möglich. Sollte das gewünscht sein, so muss der WeatherController manuell angepasst werden. Werden zwei Stationen aktiviert, so überschreibt Station B die Werte von Station A.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Grimm80 am 13 September 2016, 19:41:43
Nach dem ich jetzt ein bischen <br> rein hab, damit die Favouriten usw. nicht mehr im Logo sind
sieht es wie im Anhang aus.

Bass etc. hab ich noch mal weng probiert und funktioniert soweit auch.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: hermann258 am 24 Januar 2018, 10:58:52
Wirklich sehr schick und freut jede Frau :D
Gruß Hermann
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: ToKa am 11 März 2018, 10:50:54
Hallo zusammen,

klingt alles sehr interessant und sieht super cool aus.

Wird daran aber noch weiter entwickelt?
Welche websocket Lösung ist denn aktuell dafür notwendig
- die hier erwähnten Module?
- websocket aus FHEMWEB?
- fhem.js?

Beste Grüsse
Torsten
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 12 März 2018, 06:46:09
Hallo Torsten,

es wird das Modul so wie hier https://forum.fhem.de/index.php/topic,28634.45.html (https://forum.fhem.de/index.php/topic,28634.45.html) beschrieben verwendet.
Aktuell findet gerade eine Migration der Sourcen nach Angular 5 statt. Zur Zeit konnten aber noch nicht alle Elemente migriert werden. Es wird aber stetig weiterentwickelt.

Wenn die Grundkomponenten fertig sind kann ich auch wieder diese Version in einem Repository bereitstellen.


Gruß S.
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: ToKa am 12 März 2018, 20:38:32
Hallo S.,

danke für die schnelle Antwort. Die Migration klingt nach jede Menge Arbeit, da hat sich ja soweit ich das verstehe zu angularjs sehr viel geändert. Bin Mal auf die Ergebnisse gespannt und kann gerne beim testen helfen.

Gruß
Torsten
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: mrbreil am 01 Juli 2018, 13:42:13
Gibt es schon fortschritte?
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: alec_osborne am 01 Juli 2018, 16:47:07
Hallo,

werde in den nächsten Wochen mal ein Git Repository mit einem Seat bereit stellen. Wo man mal ein wenig rum konfigurieren kann.

Gruß
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: ToKa am 24 September 2018, 19:08:53
Gibt es das Repository schon?
Titel: Antw:Angular Frontend mit WebSocket Kommunikation
Beitrag von: Syrex-o am 03 Oktober 2018, 13:03:55
@alec_osborne

Jetzt wo du dein Projekt auf Angular 5 aufstockst, hätte ich eine Idee mich anzuschließen.
Warum machen wir daraus nicht gleich ein Ionic Projekt.
Das Fundament habe ich schon. Ich wechsel gerade meine WebScoket Schnittstelle von fhem.js auf die von @ntruchsess
Das sollte dem ganzen ja entgegen kommen.

Dann könnte jeder seine eigene App kompilieren und native Funktionen benutzen.

Im Anhang sind ein paar Bilder der App

Grüße