[Pro][Test] Mobile Advance Flow Editor (MAFE)

[Kyle_Michiels]

MAFE - Mobile Advanced Flow Editor

Hi everyone,

I’ve been working for a while on a small Homey app called MAFE, short for Mobile Advanced Flow Editor. My goal was simple: make Homey Advanced Flows easier to inspect and edit from a mobile device.

Advanced Flows are great on desktop, but on a phone or tablet they can be hard to navigate. MAFE tries to solve that by hosting a local web editor directly from your Homey Pro, so you can open it in your browser on the same network and work with your flows in a more mobile-friendly way.

Setup
Very important

Step 1 Generate a new key
In any browser go to my.homey.app login, go to settings and go to API-Keys and create a new one with all permissions.

Step 2
Copy the key to the app settings.

This allows the app to actually save.

Roughly how it works:

The Homey app runs a small local web server on your Homey Pro. You open MAFE from your browser, usually via http://mafe.local:8080/, and the interface talks back to Homey locally. This avoids cloud login/OAuth issues and keeps editing local to your Homey.

MAFE has two main views:

• A desktop-style canvas view for larger screens
• A mobile branch/tree view for phones and tablets

Desktop/Tablet

Mobile

Current features include:

• View Homey Advanced Flows
• Mobile-friendly branch/tree flow view
• Desktop canvas flow view
• Edit card arguments
• Replace cards
• Add new cards
• Delete cards
• Move cards in chains
• Save changes back to Homey
• Run an Advanced Flow
• Color picker support for color arguments
• Color swatches shown on cards
• English and Dutch interface support
• Local Homey-hosted editing through the app

How to open MAFE

After installing the app, open the app settings in Homey. The settings page shows the local addresses where MAFE is available.

In most cases you can use:

http://mafe.local:8080/

If mafe.local does not work on your network, the settings page also shows detected IP-based links, for example:

http://192.168.x.x:8080/

Just open one of those links from a phone, tablet, or desktop browser on the same local network as your Homey Pro.

There is also an Advanced network settings section. Most users can ignore this. It is only there as a fallback if automatic detection does not work on your network.

Advanced options include:

• LAN IP override for mafe.local
• Port override for the local MAFE web server

If you change the port override, restart the app before using the new port.

A few notes:

This is meant as a local editor for Homey Pro. It uses Homey’s manager API permission because it needs to read your flows, devices, zones, apps, logic variables, card definitions, and save changes when you press Save.

Changes are not saved automatically. You can inspect and make edits locally, and they are only written back to Homey when you explicitly press Save.

I’d love feedback, especially around mobile usability, flow navigation, and which editing actions feel most important to improve next.

Link:

MAFE | Homey

[SunBeech]

Hi @Kyle_Michiels, what a promising initiative!

Just some initial observations after installing and opening the web page on my tablet:

• There seems to be some text overflowing the boxes that hold the flow names:

  

• Would it be possible to include the folder/tree view and group the flows in their respective folder? Instead of showing an alphabetically sorted flat list of flows?

[SunBeech]

I noticed that sometimes the app shows a technical ID/reference instead of the name of the Tag. See the following example. I included the original part of the flow below:

[Kyle_Michiels]

Thank you for sharing these findings!
Ill definitely check if I can do the folder view so you can navigate the flows better.
And I’ll look into resolving the technical ID still being shown for some actions instead of the proper name.

[Kyle_Michiels]

Alright, folder support is in!
And hopefully the technical IDs are gone as well.

[SingKT]

The „edit“ popup „page“ is a bit small. Can you make it full screen size?

[SunBeech]

Hi Kyle, thanks for the update!

I noted that, when I open the web page on my iPad in landscape mode, the list on the lefthand side, that used to contain all the flows, only contains divider lines. As such I cannot select any flow:

When I switch to portrait mode it remains the same, but I do get the additional flow selection controls/pull down menus at the top of the screen, like on my phone.

[Kyle_Michiels]

@SunBeech

As such I cannot select any

Oof how many folders do you have? It think its too many to handle properly

[SunBeech]

Approx. 60.

Another observation: where can I find the button/control to add a new flow card? I must be overlooking something .

Landscape view:

Portrait view (top part):

[Kyle_Michiels]

Either just double tap on an empty space in the canvas (For tablet view) or click on an existing card to continue the chain (For both mobile and tablet) Or for mobile there is an Add new root card to start a new chain.

[SunBeech]

Ah yes thanks!

Another question, when I try to save a change I get the following error message:

I have already restarted the MAFE app and restarted/reloaded by browser. Not sure where I should log in.

[SingKT]

On an iPad with a browser pretending to be Safari my displays are as following

How to get a display like sunbeech?

[Kyle_Michiels]

You should just open it in a actual webbrowser and use the link mafe.local:8080 for the best experience.

[Kyle_Michiels]

Thats no good. Ill investiage this asap and put out a fix today.
I was hoping it can work without creating a token but I don’t think there is a way around it.

[SingKT]

Am using a webbrowser. With mafe.local same display

[Kyle_Michiels]

Updated.

A little set up is required see the main post.
Or restart the app it will tell you what to do.
It’ll allow you to save the flows.

[Kyle_Michiels]

Both screenshots show a pop up instead of the view in an actual browser.

[SunBeech]

Yes, that works!

I see you also fixed the left hand navigation pane - in tablet view - with the list of flows. That now also works .

[SingKT]

I am using the homey app on iPad.
When using the homey app with Android 16 I get a similar display but full screen.

Guess I got it wrong. I do have to open the mafe.local… URL as direct link in a browser.

Sorry

[SingKT]

In my browser the display is a bit too dense. Portrait mode or not display is similar

How to avoid the overlay of the cards?