Network Flow Card (beta)

Thought I’d share this card I built based heavily on the Power Flow Plus card, to show network flows. It’s based on my own scenario which has the following integrations:

  1. Aussie Broadband:
  • Billing Remaining (two tone - outer ring of Internet)
  • Billing Length (two tone - outer ring of Internet)
  • Data Uploaded (can hide in ‘Advanced’)
  • Data Downloaded (can hide in ‘Advanced’)
  1. Speedtest
  • Upload (can hide in ‘Advanced’)
  • Download (can hide in ‘Advanced’)
  • Ping
  1. TP Link Deco
  • Connected Devices per AP
  1. TP Link Router
  • Connected devices per LAN (Helper which calculates the # of LAN devices connected by subtracting connected devices per AP from total connected devices and then removing the APs themselves if showing as online)

It’s slightly flexible, in that if you don’t have any APs you can just show the one router and LAN devices hanging off it, and you can add as many APs as you want. I have 3 in my case.

There is a lot that isn’t working but would love feedback on how I can make this more generally usable? It’s all AI coded as I’m no developer so was a lot of trial and error.

To install you will need to manually install for now by adding to your resources file. Source JS file can be found here: GitHub - benmac7/network-flow-card · GitHub.

Will add full install instructions when I get the chance and once it’s a bit more ready for prime time. Other things I want to add:

  1. Show APs if offline
  2. Show Internet if offline
  3. Add individual devices connected if desired eg. 3d printer)
  4. Make the download/upload details look nicer

3 Likes

Latest version now on Github. Still a WIP though with a few bugs, but its useable for now.

Hello, Cool :slight_smile:
Possible to add the backhall Type and Speed?
Br
PS: I try to install but i have an Error on HA 2026 08 2 :frowning:

What error do you get?

And by backhaul type and speed, is this between AP’s and the main router/AP? ie. wired vs. wireless? If you tell me which integration you use and which entities you would use I can try and build it in?

Have uploaded latest version (v2.10.10) to Github.

How to install:

  1. Create new folder in www → community called “network-flow-card”.
  2. Add downloaded file to this new folder
  3. Add following to resources.yaml:
- url: /local/community/network-flow-card/network-flow-card.js?v=2.10.10
  type: module

Ignore, I found these as disabled entities on my Deco’s. Let me see how I can add them. Do you know if there is an entity that clearly shows a device as being the primary AP? I think I may need to build a checkbox option in to the GUI for this, to identify which APs are primary and which are slaves

Just a “Side-note”, yes it’s a cool looking design
But it seems in your Top post

  • Billing Remaining
  • Billing Length
    So one could think/believe You have a subscription limited to a certain “amount” of usage

And Yet you have a Speed-Test Running pt.2( regularly ) ?, ( Can “Hide” )

Are You aware that a single Speed-Test can consume between 50MB>1GB ?

And regardless of Subscription-Type, a Speed Test, just load your Router and Connections( All other Apps/Services-Transactions suffers during a Speed-Test, Obviously )

Thanks for the note, I should clarify :slight_smile:

I have an unlimited usage plan, but I also have an integration for my ISP (Aussie Broadband) which tells me how many days I have left in the billing month (eg 7 days), as well as the length of the billing month (eg 30 days, 31 days). I figured I might as well use that data, so decided I’d use it to colour the ring around the Internet object.

So the two are entirely unrelated. The billing remaining just works out what % of the overall billing month length is remaining using those two entities, and colours that % of the ring a different colour.

My speed test also only runs every 15mins or so I think, and has never made a noticeable impact to my other internet traffic

Ok,yes a speed-test is relative short in terms of " time of each "
However 4 times an hour could be rather expensive for people with “Payed-by-consumed traffic”.

I only perform speed-tests, on “initial-base” and if i suspect “Issues” in that matter ( Speed will always variate during the Day/Night for various reasons ) and should not be a mandatory enabled feature ( Other-vice All Decent Router Brands, would have such enabled by default )

Lets say you have a free highspeed connection , and each test “costs” 1GB, that’s 4 in an hour … and " 96GB a Day " you bloat the public line with

Imagine if 1 , or 100 millions people do that, Your Speed will “Decrease” :wink:

This is just a card, no obligation for people to put the Speedtest entities in. They are optional :slight_smile:

1 Like

Maybe you could add a “speed-test” button, which run a speedtest( from within HA :slight_smile: , or as now optional provided speed-test-entity ), and show “latest measured value” ?
Anyways i haven’t looked at Your card-code, but the card looks nice and “clean”

1 Like

Hello From the BE25. The entity are unable by default

I have this error. I’m a newbie. I copy de the repository Github in HACS then Find it and Download

I haven’t set it up to work with HACS yet. You need to manually download the js and put it in your community folder, then add it to your resources.yaml manually too

Thank yoi for tour reply. Indeed it s mention in your read me :frowning: I m not a pro :slight_smile:
Thanks to your “To Do” with mention of Backhal Type/Speed. It will help me because one pf my be25 switch to wifi randomly when tehre is a loop in my network from block the port of the switch in which one is connect. I rry to find why because it could ok for one week then fall.
With this car o can check easily :slight_smile:

Working on it now, hopefully sorted in the next day or two :slight_smile:

1 Like

I’m going to have to wait for it to be installed via the HACS custom repository because I’m not very familiar with adding or editing files, etc. :frowning: Do you think it will be possible later on? I’m very interested in your map, especially since you’re going to go out of your way to fulfill my request for BackHall Type/Speed :frowning:

@wisehome Ok its finally up on HACS, try adding this as a custom repository and let me know how you go!

At the moment, the backhaul type is distinguished by dotted lines for wifi vs. solid lines for wired. If you want, I can add a wifi icon to the lines for when its wireless?

1 Like

Hello benm7,

Thanks for your feedback. I can’t wait to test this out and get back to you.
Today is a big day for me because I’m in the process of moving my Home Assistant from a microSD card to an SSD :slight_smile: The backup is currently in progress…
I’m keeping my fingers crossed.
After that, I’ll see if I can tweak a couple of things, then upgrade from Z2M 1 to 2 and flash my Sonoff… This looks like it’ll mean quite a few sleepless nights if my automations and Node-RED nodes stop working :frowning:

I can see on GitHub that you’re making progress on the beta versions of your integration :slight_smile: Thanks also for the fact that the installation can be done directly from HACS—I appreciate that. Especially for beginners like me :slight_smile: