Wireshark network monitoring : 2 : Wifi, Magic Ports and Ethernet

 

In part one of this blog I refreshed my knowledge of wireshark by analysing traffic between a Windows PC browser session and a web-site.  In practice my principal requirement is to analyse traffic from iPad apps to determine how they control the Denon amplifier and Pure Jongo funxtions.

Plan A : Wifi monitoring

The obvious way to capture packets is to use a "promiscous" wifi connection.  By default ethernet adapters only pass relevant packets relevant to the attached computer.  However if the ethernet adapter is in "promiscous" mode it can pass all packets for all devices on the ethernet LAN segment to the host.  Unfortunately my ethernet card doesn't support promiscous (aka monitor) mode for wireshark packet capture.

Similarly it is sometimes possible to put a wifi adapter into monitor mode and capture packets relating to all devices using a network.   Wireshark documentation makes it clear this isn't easy.

Following the wireshark instructions I check my Windows PC wifi adapter but it wasn't suitable for monitor mode.  I then purchased a new wifi dongle which appeared to support monitor mode.  Despite trying it on Windows and Linux there was no way I could get it into monitor mode.  As I investigated a bit further the only instance I found of the card being used in monitor mode is with Kali Linux (used for network hacking and penetration testing), and it may have been necessary to have a special Kali configuration to achieve that.

On the basis that wifi monitoring is a specialised and difficult thing to do I decided not to investigate this avenue further.

Plan B : Proxy Server

Having given up on a wifi adapter the next idea was to direct traffic from the iPad via a proxy server on the PC to Denon / Pure devices.  This is the approach used previously whereby I pointed the iPad at a Proxy Server running within Fiddler Everywhere which then forwarded packets to Denon.

There are a wide variety of Proxy Server configurations / uses.  Often they are geared towards passing information from all local devices through to the internet.  I wasn't able to find a suitable Windows proxy software program which looked likely to do what I wanted.  If I want to progress this idea it would be better for me to use the solution which Fiddler Everywhere provides.  A couple of weeks after my investigation I came across mitmproxy a HTTPS proxy application for Linux/Windows which  may be a good solution.

Other approaches are available to route packets via the PC so that they can be captured.  For example, tt is possible that a wifi hotspot running on Windows will enable wifi packets to be captured.  Again it is something I have not yet investigated.

Plan C : Mirror Port

One of the main issues with monitoring ethernet devices is that usually wireshark (and other software) can only capture packets which are addressed to the host PC.  Network switches often have a feature called mirror ports which allow you to configure an ethernet port so that it receives a copy of traffic passing through another port on the same switch.  I was pleasantly surprised to find that this feature is available on a cheap home hub so I purchased a suitable device.

My Denon amplifier has an ethernet socket as well as wifi so I connected my PC and amplifier to the hub, then configured the amplifier port so that it mirrored to the PC port.

The result is very impressive, I can now easily see all the commands used to control the Denon amplifier as they are sent from the Denon / Heos iPad apps and the responses sent back to the iPad.

For example, looking at the traffic captured above I see that the IPad is sending / receiving HTTP/XML packets.  Looking at packet 2415 from the iPad I see that it contains an XML command requesting "current track position" info from Denon.  I can send similar commands from a python script do do the same thing and thereby add current track position information to my web page used to control Denon.

Plan D : iPad Ethernet cable

Plan C was a great step forward, we have an easy way of capturing packets from any ethernet device which is close to the switch / PC.

I still have a problem with Pure Jongos.  I use Jongos for multi-room audio.  They allow you to stream audio to a number of devices and synchronise the sound so that you can move from room to room listening to music.  As well as being a fraction of the cost of Sonos devices I can use Jongos to play music on my Denon amplifier and Yamaha soundbar in addition to Jongo smart speakers.
Although Jongos use the uPnp protocol I have not been able determine how to program them for multi-room audio.  I am reliant on an iPad app to choose the music and synchronising playing - this is very irritating.  As neither the iPad or Jongos have ethernet interfaces Plan C doesn't help me.

The solution turned out to be quite straighforward.  I purchased a cheap iPad ethernet cable and plugged it in to a mirror port.

It is easy to enable the ethernet port and disable wifi.  All packets to / from apps now pass through the ethernet mirrored port and can be captured by wireshark.

When I first tried to use the Pure, Denon and Heos apps they failed with error messages saying that wifi is required for using the app.  This was worrying but I found that if I enabled wifi the traffic actually uses the ethernet port (as it is faster, "lower path cost" in routing terms) and I could see the necessary commands.

The packet shown above is actually the key to solving the problem which has been irritating me for the last few years.  I knew that multi-room audio works with a bluetooth input.  The packet above shows that I have to add Jongo devices to a Bluetooth group  for multi-room to work.  I can easily add this into a python script and control this from a web page.

I have been trying to get multi-room audio to work for about four years using Jongos.  This is a quite a moment for me. 

Plan E : Windows wifi hotspot

It is often the case that when writing up a topic you get a new idea which changes the whole picture.  As I was writing this blog I thought that using the PC as a wifi hotspot seemed a bit similar to plan B, proxy server options so I decided to try it out.  Fifteen minutes later I found that it works 😀.  I can easily setup my PC wireless card as a hotspot.  When I do this, the PC has  starts a network TotalFree and has an extra IP address 192.168.137.1 which will forward any packets it receives.

I configure my iPad to attach to TotalFree and it gets an IP address 192.168.137.37.

Now I can start wireshark using LAN connection *12 and it captures all traffic on TotalFree.
As a quick test I setup a display filter for the Denon Amp (on its usual wifi address 192.168.0.89) and I could look at HTTP/XML control packets as shown below.

This is an amazing simple solution which doesn't require any hub or ethernet cables and can be setup in a couple of minutes.

The solution doesn't actually work, as is, for Jongos since they need to be on the same wifi network.  I would have to attach the Jongos to TotalFree.

 

Conclusion

These investigations have been a great help in allowing me to control my music devices from a python script / web page.  In the past I have tried to solve technical problems using trial and error, being able to see communication in action makes it so much easier to understand what is happening.  

The use of a mirror port and iPad ethernet cable remove much difficulty from monitoring a range of devices in wireshark.  It is still necessary to understand which IP addresses to capture and the protocol in use but we are able to monitor a much wider variety of traffic than previously.

 

Wireshark network analysis : 1 : Chrome website access

I have previously used Telerik Fiddler Everywhere to capture / analyse traffic between my iPad and Denon amplifier.  It does an excellent job but is quite expensive to use regularly and a bit difficult to configure for occasional use.  Wireshark is the best-known network analysis software and I wanted to familiarise myself further with its use.

Wireshark runs on Windows and can only analyse traffic through the ethernet or wifi interfaces, that is to say traffic to or from the PC.  As a first example I decided to look at traffic to/from a Chrome session.

First Attempt : BBC

I picked www.bbc.co.uk as a frequently used web-site without advertisements.
To identify BBC related packets in wireshark I need its ip address, which can be obtained using the nslookup command.   Unfortunately the BBC web-site has a complicated front-end which is to be expected with a heavily used, high volume site and there are a number of possible IP addresses.

If I type www.bbc.co.uk into Chrome I am redirected to a signon screen.

Looking at wireshark I can see that a number of IP addresses are involved in the hand-shaking/retrieval of this first page.

Packet 3507 shows a DNS request to 8.8.8.8 (the Google DNS server).
Packet 3512 shows a request to www.bbc.co.uk port 80 (http) at 212.58.236.1
Packets 3513-3515 seem to show requests to port 443 (https).
Packets starting at time 19.769s (3507) through 19.86s (3544) appear to be part of this initial dialog.
It is much to complex for us to understand the way that the bbc is setup so I abandoned it.

Second Attempt : example.com

I decided to use example.com, which is a simple  and useful training / testing site for web development.  It has a single IP address.

Typing in the URL https://example.com still gives us quite a lot of packets.  Unfortunately the Protocol is TLSv1.3, so the packets are encrypted and it is not possible to work out what they contain. 

+

If I use the URL http://example.com traffic is not encrypted and I can look at the contents of http protocol packets.  This gives me the details of information being exchanged between Chrome and example.com.

As all internet pages need to use https, this approach isn't going to be very useful to me, but it is instructive to see some live internet traffic.

Third Attempt : local web page

I setup a simple web page test.html on my local raspberry pi web server so that I can get a more detailed view of traffic.  I use wireshark to capture http packets from the web server

This gives me a dialog I can understand.  Starting at packet 1736 Freedom contacts PI40 on port 80 (http). After receiving an acknowledgement Chrome does a GET request for the web page (packet 1740).  The response in packet 1742 comprises HTTP headers and the page.
We can see the raw data on the right of the page and the formatted equivalent on the left.

Conclusion

It is very useful to familiarise myself with Wireshark using simple examples.  It has also demonstrated to me that it isn't going to be possible to use wireshark to look at "commercial" traffic owing to the complexity of network environments and the univeral use of encrypted HTTPS traffic.  Decryption of HTTPS traffic may be possible using Fiddler Everywhere or by gaining some in-depth understanding of decryption.  However, for my purposes I need to restrict myself to local traffic without encryption.

Samsung phone upgrade

 Traditionally my phones are "cast offs".  When Annette buys her new phone she passes the old one on ("down"?) to me.  My requirements and expectations from a phone are limited and any model from the past few years will suit me.  I don't actually move over to a new "cast off" as soon as it arrives, I wait until the old phone fails or irritates me.

I have been using a Samsung S7 Edge since September 2021 and after repeated droppings screen cracks are becoming larger.  However, the reason I needed to "upgrade" is because the phone is too old for an app I wanted to install.  The next available "cast off" is a Samsung S9+ which runs the software fine.  

Android software

Wikipedia provides release and support dates.

The S7 runs Android 8.0 which was released in August 2017 and last updated in January 2021.
The S9+ runs Android 10.0 which was released in September 2019 and last updated in February 2023.  

The diagram above shows that Android OS is only supported for 3.5 years and Android 10 is now out of support.  You cant upgrade the phone Android version unless you jailbreak the phone.

So both the S7 and S9+ phones have been running unsupported software for a while.  A significant proportion of people use older phones with unsupported software and it doesn't seem to be a major issue.
For example using mobile banking apps and mobile "wallets" is commonplace and they are not restricted to supported / patched devices so the risk must be small.  Advice appears to be that you should only install software from play store and take care with the sites you visit.

My approach will be to continue to use software whilst apps are available and the phone continues to work.

Upgrade Process

It can be quite a traumatic process moving to a new phone and it is pleasing to see that Samsung have made the process as easy as possible.

Step 1.  I backed up the old phone and transferred SIM and SD cards to the new phone.

Step 2.  Start the Smart Switch app on both devices which will transfer all data from one to the other.

Step 3.  Smart Switch told me I had to backup Whatsapp messages separately (as they are encrypted).

Step 4. I then completed the Smart Switch OS transfer, setup a PIN / fingerprint and signed on.

Step 5.  All the installed apps were copied across (it took about 20 minutes).

Step 6.  At this stage all the apps and icons appeared to be available and I could use the internet.

Step 7. I restored whatsapp separately.

Step 8. For security reasons you need to re-register lastpass, bank, credit card apps and re-add wallet.

Conclusion

I was impressed by how painless the upgrade process was.  Of course, it needs to work otherwise people would not upgrade their devices every couple of years.

I was now able to install the new app, which ironically is needed to communicate with our new car, an electric mini.  The app is needed so you can check whether the cars battery is charging, warm the car up before you get in and other indispensible present day necessities.

What else I did with an old iPad : Hifi remote control

Rationale

I chose to setup my 2012 iPad mini 1st generation as a dedicated Hifi remote control.  The hifi comprises a main  Denon amplifier/tuner togther with some Pure Jongo and Sonos options.
Although Denon, Pure and Sonos all provide iPad apps, none of them are compatible with the iPad mini1.  This is not a serious problem as the apps don't make it quick or easy to select and play albums so I have developed my own web app which allows me to control Denon and the others pretty much exactly as I want.

I can, of course use a PC, Android or iPad with the web app; this was one reason to develop it in the first place.  However I found that other people are unlikely to bother going to a URL on their devices to choose music.  Everyone finds it much easier just to pick up the iPad mini which is always setup for music playing.

Ease-of-use

I bought an iPad mini cover which allows us to turn the iPad on/off by opening/closing the cover and bypasses the lock screen, making the remote control effectively always on - like a remote should be.

I can also set guided access so that the web app is always displayed and avoid the possibility of exiting the browser or changing the page. 

Old software considerations

As my browser is restricted to Safari v9, which comes with iOS9, there are a few html and javascript commands which cannot be used as they weren't implemented by Apple until later versions.
Typically, when developing the web app I found it worked on PC (Chrome) or iPad (Safari 16) but not the iPad mini so I had to find an alternative solution which wasn't a difficult task.

When choosing an artist / album to play I highlight the item by changing its class from "songlist" to "active".  JS now includes a replace() method to change a class associated with an element.  However on SafariV9 you must use remove() and add() methods instead.

My track list folders often include album art .jpg files which are displayed as tracks unless I omit them.  There is now a include() method to determine whether a substring exists within a string.  However, for Safari9 I need to use the indexOf() method instead which isn't so neat.

Conclusion

I do have a tendency to be more interested in the technicalities of a solution rather than usability.  The two old iPad projects are both simple, but tend to be used more than other, cleverer ideas.

What I did with an old iPad : dedicated photo album

Three months ago I wrote about possible uses for two old 2012 ipads.  In my opinion the iPad hardware is "as good as new"; they have high resolution screens, wifi/internet access, good battery life, and dont feel slow to use.  Unfortunately the last system software update was iOS9 and there are very few app store programs which can be installed on the OS. 

I have found real, practical tasks for them which will provide a few extra years of use.  The first of these is as a dedicated photo album, setup specifically for an elderly (late 80s) relative with memory issues.  The key requirement is to make both hardware and software aspects of "the album" simple and foolproof.  In addition, a dedicated device is always available and doesn't need to be started / configured / tweaked each time it is used.

I used a TechRadar article as a guide for this setup.  There is actually a slideshow app liveframe which is intended to work on old/obsolete iPads and can still be installed.  Also iOS9 contains the Apple photo app which continues to work well.  I found the Apple app slightly easier to use in a simple manner so I choose to use this for my album.

Using photo or liveframe, a set of photos can be collected into an album and played in a slideshow.  For my purposes, since wifi is available where the iPad is to be used, I set the album up in iCloud.  The user has dementia and finds a single set of family phots interesting and entertaining.  There is no need for him to watch different albums.  It is straightforward to add extra photos to the album using iCloud if required.

Initally the photo album stopped working due to buttons / controls being pressed accidently whilst holding the iPad.  For example touching the screen could cause a confusing screen message or pressing the home button would exit from the app.
I used the Apple Guided Access accessibility feature which disables iPad buttons and prevents the user accessing selected parts of the screen.  As you can see on the screen shot below, the areas of the screen allowing the user to exit, cast or change options (which they may press by mistake) are greyed out which means they are disabled.

One of the buttons which it is useful to disable in Guided Access is Power.  It is easy to accidentally touch the button and turn off the iPad.  You then have to click the button to turn it on, swipe to open the home screen and start the app once more.
An elegant solution is to disable power button use in Guided Access and to use a genuine Apple magnetic cover, setup so that opening / closing the cover turns the iPad on/off.  This prevents the lock screen showing and keeps the photo app active as soon as the screen is opened.
Guided Access is configured so that no buttons are accessible and only the area of the screen allowing swipe left or right is available.

With these arrangement in place the iPad photo album becomes a simple and enjoyable pastime for an older person.  It doesn't need ot be setup each time is is use and the user only needs to know how to open the cover and swipe to change the current photo.  I am very pleased with how much enjoyment it brings.

What to do with an old iPad?

How old?

I have an iPad and an iPad mini which were in occasional use recently by aging relatives:

• third generation iPad model MD328/A1416 (16GB, 9.7" screen)
• first generation iPad mini MD528/A1432 (16GB, 7.9" screen)

Both models were first marketed by Apple in 2012, so they are really old in computer terms.

Both appear to be working well with acceptable battery life, however their software cannot be updated from iOS 9.3.5, iOS 9 was released in September 2015.  It was superceded by iOS 10 a year later and the current version is iOS 17.

Owing to their old software they have no real value, even on eBay, and worthy causes are not interested in them as a donation.   I am reluctant to dispose of them and I have been thinking how they could be useful.

Which apps can be installed?

The short answer is that existing apps should continue to work but practically nothing on the Apps Store can be installed on iOS9.

  

The apps store normally only allows recent versions of apps to be installed  and they are all post 2015.  The one exception is that, for apps which have been previously purchased / installed, an old version can be downloaded.  This provides a loophole which can be exploited: purchase or install a new app on your newer iPad then go back to the old one and install an older version, if it exists.

A third option is to jailbreak the iPad so that you can install apps from (possibly dodgy) non-Apple sources but I that is a slightly different subject so I wont investigate at this point.

It seems unnecessarily restrictive for Apple to prevent downloading old versions, but to be fair, this is ten year old software and hardware so it is unlikely that you need apps that you havent needed in the last ten years.

Which apps work?

Even if an app is installed on the iPad, it may not work properly.

Apps which are included with iOS9 appear to work well (Safari, camera, iBooks, photos for example).  If an app is purely local and doesn't require internet functionality it should work.  I had a few old games (The Room, Sudoku, Labyrinth and Candy Crush) which are ok.  

Apps using local networking (Heos, webSsh, Unix-Reflection, Pure Connect) may work and some  which use the internet are available.

To get an idea of which apps I can potentially use I went through the list of purchased apps on the App Store and tried to install them all on the old iPad.  I started them up and ran some quick tests.  A number of apps, including Chrome, failed at this stage, as they carried out internal checks and decided they needed (unavailable) upgrades to use.

At the end of this exercise my ipad has extra apps shown to the left.  The main apps which use media are likely to be the most useful: vlc (video), photos and LiveFrame (slideshows), safari (for browsing and my local web pages), Heos, iPad Music and Pure (for music control).

There is no file manager function available on iOS9 but it does include iCloud so you should be able to play music, videos, photos etc. and store them locally within applications.

In summary, although the choice of software available is very limited, we do have most of the functionality we may need.  If an extra function is required, I can search the web for suitable iOS9 compatible apps.

Potential Users

I already have a decent, newer iPad 5th generation MPGC2B which is a great tablet, although it has just stopped receiving upgrades (it is still on iOS16), so an older heavier iPad isn't going to be an acceptable substitute for me.  If I do use an old iPad it is likely to be dedicated to a single function, watching movies, controlling the music player or home automation.

Alternatively, the iPad could be useful to someone who currently doesn't have their own.  My elderly father-in-law Roy may like to use it as a family photo album, to help with his memory.  Grandson, Harry Junior might like his iPad to watch youtube videos or play childrens games.  Again they are likely to use for a single app rather than a general purpose device.

The iPad and iPad mini have great quality screens and good sound so they are very suitable for any audiovisual media: music, videos, photos, books.

By switching the iPad to never auto-lock, it retains the last application screen when you start to use it.  This minor configuation change makes quite a large difference; say when resuming a video, you can just turn it on and continue to watch, without all the faffing around of starting the app and finding the right place.

Similarly, for an audio controller it is almost as easy as a remote control, just turn on and your control screen is in front of you.

Potential Uses

1    Photograph slide show

Either the Apple photo app or LiveFrame can provide an ongoing slide show.
The show can be made continuous and the photo collection can be as large as you like.
Suitable for an elderly relative.

2    YouTube web

As a dedicated YouTube player, the iPad is very easy to use without adult assistance.

Suitable for a young child

3    ebook reader

I typically read a single book at any given time and there is a plentiful supply of ebooks and pdf documents to read.  The app provided by my local library for online reading also works.

4    Video player

The excellent quality screen is perfect for playing videos with VLC.
As usual, dedicating the device to this function makes it much easier to pick up and put down current viewing.

5    Music Controller

The iPad mini makes a very good smart remote control.  I have web pages to control my different sorts of music and if I leave the iPad mini lying around it is actually more convenient than a remote.  The only downside is to periodically plug it in when not in use.  My web pages also work on peoples phones but it is easier to pick up a small device than starting your browser and choosing an appropriate link.

6    Game Player

I dont often play games, but if an old iPad feels like an entertainment centre I may reach for it to play a game (or watch a film, read a book etc).

7    Home Automation Controller

This is a very good new / developing area for me.  Although the iOS9 doesn't support Home Assistant it may be possible to set up as a central control device.

8     Linux terminal

When working on a variety of linux tasks, it would be useful to have a dedicated virtual keyboard/screen for "headless" systems.

9    6502 Console

This is likely to be a rare but sexy usage to provide a screen and keyboard for my 6502 system.

10   Jailbreak

An old redundant iPad would be ideal to see how easy / useful it is to jailbreak a device and whether it makes a big difference to what you are able to do with it.

The trouble with bright ideas is that they may never be used.  Rather than choose one of the above functions I may play with a variety and see if any of them are properly useful.

Conclusion

I started off thinking it is a shame that good working technology hardware needs to be thrown away to be recycled.  After this exercise I am hopeful to extend the life of the iPad-3 and iPad mini-1 for a couple more years.

I will be very happy if I do find a proper use for these little gems.  There may be a future blog post describing any successes.

Sonos : Web Page Control

Rationale

We have made excellent progress controlling Denon and Heos functions through python and web pages.  Playing albums using my web page only requires 3 clicks and is much easier than navigating through the NAS folder structure using Heos.  

I previously thought that Sonos was mainly limited to a closed eco-system of Amazon Music, Spotify etc but as I begin to look in detail I see that it can do a lot more, allowing you to play music from your own devices or a DLNA server.  The Sonos app, although it is slightly better than Heos, requires you to navigate through a menu structure to play albums.  Sonos actually provide an excellent in depth developers guide, if I want to develop from scratch.

My first objective was to see whether I could play RPI/mpd output on Sonos and I found that I could do so using TuneIn (Classic).  This was my fall back plan when my Sony amplifier was misbehaving, before I bought the Denon receiver.  It turned out I didn’t need to use Sonos for that purpose but the Sonos Beam is still available to me.  My temporary solution was somewhat limited as Sonos treats RPI/mpd input as a stream, whereas I really want to play an album using Sonos controls for viewing playlists, skipping tracks etc.

Investigation

Previously the usage of python for back-end programming and javascript / web sockets in the web page worked really well for the Denon  / Heos control page so I will use this approach again.
Sonos is more widely used than Heos and, searching on github,  SoCo is amongst the most popular Sonos projects.  It is a general purpose client written in python, currently maintained and includes excellent documentation so it seems perfectly suited for my needs.

 

Installation is trivial ("pip install soco").  Browsing the documentation I could see that the music_library submodule will be most useful to me. I was quickly able to check using just three statements in interactive python that I can use SoCo in conjunction with my Sonos Beam:

Music Storage

I have recently installed a rather excellent TP-link ax5400 router which has a USB port.  It has the capability to share music / video / data held on a USB flash drive.  I actually attach an unpowered 4-port USB hub which allows me to utilise multiple drives.  This gives me a free NAS capability and easily allows me to keep all music in one place.

Sonos likes good quality mp3 tags to scan so that it can scan music in an orderly manner.  In particular, my charts downloads often have the artists name both in the "album" tag and the "album artist" tag, which causes Sonos to think I have hundreds of albums each with one track.  In addition Sonos plays tracks in filename order if there are no track numbers.  I fixed these problems using the wonderful windows mp3tag utility by setting "album artists" to "various artists" for chart downloads and by adding a track number.  Sonos is now pretty good if I navigate through the music library by artist or album and play all tracks in an album.

Unfortunately Heos displays the "album artist" field to display tracks so lots of my tracks now appear as "Various Artists".  The only solution I can think of is to have separate charts folders for Heos and Sonos.  Ah well, it is not a perfect world.

 Soco python programs

SoCo is an excellent python module, which is enhanced by the comprehensive Sonos API and quality documentation.  It proved to be straightforward to set up my own functions to choose and play albums.

Although it is easy to choose an album by artist I prefer to use the folder structure to define my album playlists.  This allows me to navigate to an album and play it even if the mp3 tags for album, artist are imperfect.  

The following interactive python example shows how to navigate the router music flash drive folders to choose an album to play.  The  "root" level is a shared folder "//RouterShare/H" which is obtained using a command "get_music_library_information('share'). The music at each successive level in the folder structure is achieved by selecting an array element from root, level1, level2, level3 by browsing the folder object retrieved at the next level up.

Having chosen a level3 item, which is an album, it can be added to the Sonos music queue and played as shown below.

These commands can be integrated into our command line python program which can return a list of groups, artists or albums.  The list is typically passed to the web page which returns with a choice indicating the next level. Once the group/artist/album selection has been made their values are passed to the play option and python makes a Denon request to add the tracks to the queue and play the album.

Web page

Our web page simply has to display available groups, artists and albums and allow the user to choose what they want.

Initially the "Show Groups" button is used to make a python request to Sonos which returns the list of groups that are inserted into the page.  In due course this will be done automatically on loading the page.  In the HTML you see that the web socket command is still denon, as we are using the framework setup for Denon and Heos.  The "-l groups" parameter causes python to return a list of the groups.  For convenience all the commands include "-g" (group chosen) and "-a" (artist chosen) parameters as well.  

This web socket command  causes the python command "sonos.py -l groups -g 0 -a 0" to be executed and the list of groups "A-B", "C-F", ... is displayed.

Clicking on a group causes a Sonos request which fetches and displays an artist list.  Click again and a list of albums from that artist is displayed.  A third click puts the album on the Sonos play queue and starts the music.

The Chrome console log is very helpful when testing the web page.  In the example to the right you can see information returned to the web page after clicking the "show groups" button, then clicking "C-F" then "Coldplay".  At each stage the next level of information is returned and displayed on the web page.  The information from Sonos is returned in JSON format so that it can be easily interpreted in javascript.

My python script adds some extra fields at the end of JSON returned by Sonos.  In the example on the right the second JSON response has
 "Sonos" : "albums", "group":"1", "artist":"4"
added to show that the information is a list of albums relating to group1 (C-F) and artist4 (coldplay).

When a Sonos response is received by the web page web socket ws.onmessage function the javascript code looks at the "Sonos":"albums" field and can see that the list of albums should be placed in field #sonos7 which is below the group / artist fields.

makeSonosList formats the json as html fields and buttons so that it looks correct and reacts correctly.

If the level is groups or artists the html button causes a request for the next level of information.

If the level is album, the button submits a request to play the appropriate album.