[HOW TO] View your Homey v2 flows in a browser

This post is not meant as a discussion but to explain how to view flows in a browser, I will ask a moderator to delete any post that starts a discussion about the missing web UI here.
You can obviously ask questions about the workings of Homey v2 flow viewer here.

The used browser in the steps below is Google Chrome.

To view flows in a browser several steps have to be taken, I will describe how to do this in this post. This information is not new but scattered around the forum, thanks to anybody who post about this earlier.

These steps have to be taken to make viewing flows in a browser possible:

  1. Download the pages making this possible
  2. Find your IP address
  3. Find your HomeyID
  4. Find your bearer code
  5. Insert information in the configuration file
  6. Start viewing your flows

Download the pages making this possible

Go to the Github page where these files can be found:

Click Clone or download and click on Download ZIP

Open the zip file and save the files to a location of your choice.

In order to make the pages work some information has to be added to the config.js file, next step will be to collect all needed information.

Find your IP address

Open your favorite text editor, for example Notepad, and copy paste the found information from the next steps into it.

Open Chrome and open the developer tools (ctrl-shift-j on Windows, cmd-option-j on Mac)
Select the Network tab, enable Hide data URLs and click All

next navigate to https://developer.athom.com, make sure you’re logged on, and see the info appear. Now search for a line that shows me and click on it.

Check if the end of the Request URL in the right pane shows sessions/session/me because there can be several lines with me.

Now there are 2 options:

  1. You are using a Local connection: you are in the same network as your Homey:


    The part after https:// till the . in the Request URL is the IP address we are looking for, in this case its 192-168-1-120 but since IP addresses use a dotted notation you have to write it down as 192.168.1.120

  2. You are using a remote connection: you are in another network, at a remote location for example:


    The part after https:// till the next / in the Request URL is the Athom Cloud uri we are looking for, its basically your homeyID with .connect.athom.com
    Copy that to your text editor.

The configuration for a Remote Connection can also be used for a Local Connection

Find your homeyID

If you got the Athom Cloud uri in the previous step you already have the homeyID, its the part in front of .connect.athom.com.
If you’re using a local connection you have to find the homeyID in another me line, most likely the line below the one from the previous screenshot. Select that line, check the Request URL again for sessions/session/me and if it’s there scroll down in the right hand pane and look for X-Homey-ID in the Response Headers

Copy the value after X-Homey-ID to your text editor.

Find your bearer code

The bearer can be found in the same me line as the homeyID. Scroll down in the right hand pane and look for autorization in the Request Headers part.

Copy the text after Bearer to your text editor, make sure you copy the whole string, it’s 114 characters long!

Now that you have all needed information it’s time to get the pages to work!

Insert information in the configuration file

Go to the folder where you unzipped the files from step 1 and open the file config.js in a text editor. Insert the information you collected in the previous steps and add them to the file between the ' characters.

When using a Local Connection:

setup = {
  ip: '192.168.1.120',            // Put your ip here or athom cloud uri,
  bearer_token: '52c9xxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx15ddb3ea5f',  // Put your v2  token here (114 characters long)
  protocol: 'http',      // Change to https if using athom cloud
  homeyId: '5axxxxxxxxxxxxxxxxxxxxa4'        // Homey ID
}

When using a Remote Connection:

setup = {
  ip: '5axxxxxxxxxxxxxxxxxxxxa4.connect.athom.com',            // Put your ip here or athom cloud uri,
  bearer_token: '52c9xxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx15ddb3ea5f',  // Put your v2  token here (114 characters long)
  protocol: 'https',      // Change to https if using athom cloud
  homeyId: '5axxxxxxxxxxxxxxxxxxxxa4'        // Homey ID
}

After adding the information, save the file.

Start viewing your flows

Now you’re ready to view your flows! Open the flowview.html file from the folder where you unzipped the files from step1

If the page does not look like like the screenshot above but like the one below there is an error in the information put into the config.js file. Please go trough the steps again.

Disclaimer:
I did not write the Homey 2 flow viewer all work has been done by @Erik van Dongen and all credits should go to him! Remember he is just another community developer, he doesn’t work for Athom and has developed this in his free time.

34 Likes

Q & A

Q: My Homey is still on 1.5.13, can I use Homey 2 flow viewer?
A: No, while development was started when Homey firmware was at 1.x it has now evolved so its compatible with V2 only.

Q: Do I have to be connected to the same network as my Homey to use Homey 2 flow viewer?
A: No, when you are away from home you can connect by using the Athom Cloud uri. How to find that is described in the first post.

Q: Can you add flows with Homey 2 flow viewer?
A: No that’s not supported, only some minor editing functionality is available.

Q: Can I enable or disable a flow with Homey 2 flow viewer?
A: Yes you can do this by clicking the checkbox in the flow name bar:

Q: Can I rename or move a flow with Homey 2 flow viewer?
A: Yes you can do this by clicking the pencil in the flow name bar:

Type the new name in the Name field and/or select a different Folder and click on Save

Alternatively you can move to a folder by click (and holding) the folder icon in the flow name bar and dragging the flow to the desired folder in the Folders bar on the left.

Q: Can I delete flows with Homey 2 flow viewer?
A: Yes you can do this by clicking the x in the flow name bar:
image

Q: Can I test a flow with Homey 2 flow viewer?
A: Yes you can do this by clicking the play icon in the flow name bar:
image

Alternatively you can click on the play icon in any available flowcard. This way you can either run the complete flow by clicking the play icon on the trigger card in the When column or you can selectively run an action by clicking the play icon on the action card you want to run in the Then column.
image

Q: Can I add Folders with Homey 2 flow viewer?
A: Yes you can do this by clicking the Add folder icon in the Folders sidebar. Next a dialog will open where you have to type the desired name and select where the folder should be created.

Q: Can I change the name or move a folder with Homey 2 flow viewer?
A: Yes you can do this by clicking the Edit folder icon in the Folders sidebar. Next a dialog will open where you can select the folder you want to change.

After clicking Next another dialog will open where you can change the name and/or move the folder to different location.

Q: Can I delete a folder with Homey 2 flow viewer?
A: No, not yet. That function will follow later.

4 Likes

Great write up @DaneedeKruyff. But I just can’t seem to find the HomeyID anywhere. Any pointers? (Tried Opera, Chrome and Firefox.)

[EDIT:]
I found it, it’s visible under the HOST: value under the GET request. Or under :authority: under the me request. And it usually something like this 5acxxxxxxxxxxxxxxx88.connect.athom.com.

2 Likes

There are indeed several places where the homeyID can be found I only mentioned one, close to where the other info can be found, to not overcomplicate the instructions.

Do we even need the Homey-ID? I changed mine and it still worked…

I spent a while trying to locate the IP address but it turns out mine browser trace was showing my cloud URI which also works.
Thanks for the explain though as it got me started.

@bvdbos, you are right the homeyID seems not to be needed to use Homey v2 flow viewer. Maybe @Erik can elaborate.

@DaneedeKruyff @bvdbos
Based on reversed engineering the flow test api the HomeyID is needed in setting up the test sockets. But indeed, when using the flowviewer on a local netwerk this HomeyID seems optional for now.

Confirmed working on a Linux machine using firefox/chromium.

Nice! :+1:

Great initiative BTW. The moment I can create new flows I might even consider moving to 2.0.

1 Like

This is a great tool.

Although it doesn’t seem to load all my flows.
At the bottom of the page it keeps displaying “flows: loading…”.

It may have something to do with a bug in Homey.
I accidentally deleted a folder which contained 2 other folders which in turn contained several flows.
The folders are gone, but the flows inside those folders are still there and fully functional.
The problem now is that said flows are invisible. Therefore I cannot move, disable or edit them anymore.

When I create a new flow and add a “start een flow” card to the “Then” section, I can still select the ghost-flows.

Is it possible to still show these ghost flows? That way I can delete them from your tool until Homey releases an update with this bug fixed.

Thx!

Terrific! :slight_smile:
Thank you for your great effort @Erik and @DaneedeKruyff for writing it all out!

This tool is very helpful for me. Looking forward to any extended features if any are planned!

Do you see the flows in https://developer.athom.com/tools/api-playground if you uncomment the Homey.flow.getFlows(); ?

Yes, all the flows are visible in the API-playground.

I managed to edit most of the flows through the “APPS” section in the homey-app.
You can see all the flows where a specific app is used.

The flows that don’t use any app are permanently “ghosted”.
For now that doesn’t matter. It’s only LED-ring animation when someone is awake or comes home.

I’ve already reported this to Athom. They said they are aware of the bug and they hope to solve it in the next update.

Little added functionality:

Number of flows in a folder are shown

image

Tokens are now shown in the same colors that represents the type, just as in the Homey app.
31

And when you hover your mouse over them you can see the type and an example of what the token contains.
26

2 Likes

afbeelding

Little added functionality:

You can now add folders by clicking on the Add folder icon. Editing can be done by clicking the Edit folder icon.

Please read the Q&A for more information.

image

1 Like

@Anton, there will be most likely an error in the console.

Open the Developer Tools in your browser (preferably Chrome) and select the console tab. Next copy the error and post it here please.

THIS LOOKS GREAT.!!!
although I’m already stuck in step2 (ipadres) (me is new at this)

this is what i get in the developer tools… I get the Homey-ID insteed of my Homey’s IP adres

Do i Need to be @home (on my wifi) for this to work?
btw: i can also find my homey IP by looking in my router… will that do?

thnaks for thegood work though… looking forward to getting it working