Autor Thema: Angular Frontend mit WebSocket Kommunikation  (Gelesen 8651 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: 1111
  • 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: 1111
  • 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...  ;)

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #15 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


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.

Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #16 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.

Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #17 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'
}

« Letzte Änderung: 18 Juni 2016, 13:12:41 von Grimm80 »

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #18 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


Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #19 am: 19 Juni 2016, 11:10:00 »
diese ist doch in der Commandref hinterlegt?

Sonos:
Sonos

Sonosplayer:
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.


Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #20 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:

« Letzte Änderung: 19 Juni 2016, 11:16:37 von Grimm80 »

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #21 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.


Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #22 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.


Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #23 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.





Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #24 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?


Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #25 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.

Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #26 am: 24 Juni 2016, 21:28:56 »
Hier mal die Einzelheiten so wie es in FHEM aussieht als Pic.

Hoffe das Hilft



Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #27 am: 24 Juni 2016, 21:32:24 »
Und hier noch die SET-Liste

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #28 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

Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #29 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"


Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #30 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


Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #31 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.

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #32 am: 27 Juni 2016, 16:35:39 »
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.
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


Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #33 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



Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #34 am: 04 Juli 2016, 09:54:51 »
Hier noch die Screens nach dem einbinden der Sonos:


Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #35 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.

Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #36 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.

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #37 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.

Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #38 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.

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #39 am: 05 Juli 2016, 22:02:18 »
Erster Test.

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #40 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.

Offline Grimm80

  • Full Member
  • ***
  • Beiträge: 110
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #41 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.

Offline hermann258

  • New Member
  • *
  • Beiträge: 39
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #42 am: 24 Januar 2018, 10:58:52 »
Wirklich sehr schick und freut jede Frau :D
Gruß Hermann

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 308
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #43 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
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #44 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 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.

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 308
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #45 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
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

Offline mrbreil

  • Full Member
  • ***
  • Beiträge: 233
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #46 am: 01 Juli 2018, 13:42:13 »
Gibt es schon fortschritte?

Offline alec_osborne

  • Jr. Member
  • **
  • Beiträge: 54
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #47 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ß

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 308
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #48 am: 24 September 2018, 19:08:53 »
Gibt es das Repository schon?
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

Offline Syrex-o

  • Full Member
  • ***
  • Beiträge: 187
Antw:Angular Frontend mit WebSocket Kommunikation
« Antwort #49 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
...

 

decade-submarginal