Feature: Fritz!Box Widget

[evorg]

Fritz!Box Widget

A new widget showing status information about your Fritz!Box device:

Supported fields are:
["connectionStatus", "upTime", "maxDown", "maxUp", "down", "up", "received", "sent", "externalIPAddress"]
However, the display of the fields is limited to a maximum of 4 within the component.

The proxy is using the UPnP API of the device.

The service API output only includes the data for the frontend output:

// http://localhost:3000/api/services/proxy?type=fritzbox&group=...&service=...&endpoint=status
{
  "connectionStatus": "Connected",
  "uptime": "63906",
  "maxDown": "114102000",
  "maxUp": "39047000",
  "down": "565701",
  "up": "58411",
  "received": "14728728257",
  "sent": "1116874804",
  "externalIPAddress": "89.246.212.167"
}

Closes #371

Type of change

• New service widget
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Documentation only
• Other (please explain)

Checklist:

• If adding a service widget or a change that requires it, I have added corresponding documentation changes.
• If adding a new widget I have reviewed the guidelines.
• I have checked that all code style checks pass using pre-commit hooks and linting checks with pnpm lint (see development guidelines).
• If applicable, I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.

[shamoon]

That library is huge https://bundlephobia.com/package/fritzbox … for 1 service widget 😕

The largest one in our entire project, in fact...

[shamoon]

Please post an example API output

[evorg]

That library is huge https://bundlephobia.com/package/fritzbox … for 1 service widget 😕

I will try to get rid of it as I came across that you don't have to struggle with any authentication to retrieve the information via the UPNP services. Unfortunately the TR-064 / UPNP standard relies on SOAP and that's the only way to get information from the device.

Maybe upnp-client-ts can do the job too and bring a more general library for UPNP communication to the project. What do you think about it, @shamoon?
=> https://bundlephobia.com/package/upnp-client-ts@1.1.0

I think i'll give it a try. As for that i changed this PR to draft.

[t0rb3n]

I will try to get rid of it as I came across that you don't have to struggle with any authentication to retrieve the information via the UPNP services. Unfortunately the TR-064 / UPNP standard relies on SOAP and that's the only way to get information from the device.

I've got a more or less working branch for talking via TR-064 (see here, please keep in mind, this is very WIP) without any additional packages (except currently swapped out the xml2js but that shouldn't be a problem to revert).
Talking to TR-064 isn't too complicated but there needs to be an proxy that handles the XML/soap requests and responses.

[evorg]

I've got a more or less working branch for talking via TR-064 (see here, please keep in mind, this is very WIP) without any additional packages (except currently swapped out the xml2js but that shouldn't be a problem to revert). Talking to TR-064 isn't too complicated but there needs to be an proxy that handles the XML/soap requests and responses.

Thanks, I will have a look at your solution. Anyway, I am not very motivated to implement the XML generation / parsing myself. 😉

[shamoon]

Sounds good. Yes of course it’s sometimes reasonable to add a dependency but in this case that original one is just too big to accept, especially since this widget will be used by a tiny fraction of users.

Appreciate the flexibility. And again, please post an example of API output when you’re ready.

[evorg]

I have just published a solution without adding a new dependency to the project.
I have also updated the API example in the description of this PR.

Please have a look at the changes ...

[evorg]

squashed to 1 commit

[shamoon]

Great work, thanks.

No need to squash here, that happens on merge.

I fixed the code style (pre-commit hooks mentioned in the PR template) and some minor code style. The only other thing was the bytes / byterates to just use i18n.

Let me know any concerns, thanks again for reworking things

[shamoon]

PS. I have no way to verify that proxy but I’ll take your word on that, awesome work from > 800 KB down to 3 :)

[evorg]

Looks great! Since I only have the DSL version of the Fritz!Box, the functionality could possibly be tested by users with cable or fiber optics connection. Maybe @t0rb3n can give it a try.

[shamoon]

I think a majority of homepage users are not able to test this so we can merge it into main and other users can test there and we'll see if anything comes up.

[t0rb3n]

Looks great! Since I only have the DSL version of the Fritz!Box, the functionality could possibly be tested by users with cable or fiber optics connection. Maybe @t0rb3n can give it a try.

I can give it a try later.

[arminus]

This will be in v0.8.3 then?

[moritz-john]

Looks great! Since I only have the DSL version of the Fritz!Box, the functionality could possibly be tested by users with cable or fiber optics connection.

I have a Fritz!Box 6660 Cable and can confirm that the widget is working.
I conducted a swift test, utilizing all the accessible fields: ["connectionStatus", "upTime", "maxDown", "maxUp", "down", "up", "received", "sent", "externalIPAddress"].

Thank you for your work.

[FurkanVG]

Just to confirm from my side that it works for me too with my FRITZ!Box 7590.

Im just confused how to decide which field to use?

Allowed fields (limited to a max of 4): ["connectionStatus", "upTime", "maxDown", "maxUp", "down", "up", "received", "sent", "externalIPAddress"].

My yaml is like this:

- Services:
    - FRITZ!Box:
       widget:
        type: fritzbox
        url: http://192.168.178.1
       icon: https://X.myfritz.net:43934/assets/logos/logo_fritzDiamond.svg
       href: https://X.myfritz.net:43934/
       ping: https://X.myfritz.net:43934/

how can i decide which of the fields to use? and why is there a max limit of 4?

thanks again for this!!

PS: Is it possible to switch to Days after the 24h mark is hit?

[moritz-john]

how can i decide which of the fields to use?

Like so:

- Miscellaneous:
    - Fritz!Box:
        icon: avmfritzbox.png
        href: http://192.168.XX.XX
        description: FRITZ!Box 6660 Cable
        widget:
            type: fritzbox
            fields: ["connectionStatus", "maxDown", "maxUp", "externalIPAddress"]
            url: http://192.168.XX.XX

the fields: ["connectionStatus", "maxDown", "maxUp", "externalIPAddress"] part.
Available options are listed here: https://gethomepage.dev/v0.8.3/widgets/services/fritzbox/

---

and why is there a max limit of 4?

I assume it's due to space constraints.

[evorg]

Thank you for your feedback! Please note that there is a small typo in the current documentation, which is already fixed in main. The field is named uptime not upTime.

PS: Is it possible to switch to Days after the 24h mark is hit?

Good idea, I'll have a look at it. Since my connection is interrupted every day, I hadn't thought about it yet.

and why is there a max limit of 4?

The limitation of 4 fields is defined in the guidelines.

[Coggi]

Hello,

trying to add this but i'm getting an API error.

My yaml :

- Fritz Box:
    icon: avmfritzbox.png
    href: http://192.168.1.1
    description: Fritzbox 7590
    widget:
      type: fritzbox
      href: http://192.168.1.1
      fields: ["connectionStatus", "uptime", "maxDown", "maxUp"]

Already enabled the two features under Home Network as stated in the documentation

How can i troubleshoot?

Thank you

[evorg]

Thank you for your feedback, @Coggi!

trying to add this but i'm getting an API error.

Maybe there's already a fix for it in main. Can try to build and start from there? I guess there is a empty field in one of your responses that causes this error.

How can i troubleshoot?

Otherwise you could execute the requests by hand on your CLI using curl as mentioned here and here

[Coggi]

How can i troubleshoot?

Otherwise you could execute the requests by hand on your CLI using curl as mentioned here and here

CLI is working, i've tried the 4 examples u linked and all answers back and i don't see empty infos.
I'll wait for the fix you mentioned to be pushed on release and check back!

[FurkanVG]

@Coggi Out of curiosity. the default IP for Fritzbox is http://192.168.178.1/, but you used http://192.168.1.1.
Did you change ur network subnet or was it maybe a typo? Just trying to be sure :)

[Coggi]

@Coggi Out of curiosity. the default IP for Fritzbox is http://192.168.178.1/, but you used http://192.168.1.1. Did you change ur network subnet or was it maybe a typo? Just trying to be sure :)

Yes you're right, I changed the subnet :D

[FurkanVG]

@Coggi Out of curiosity. the default IP for Fritzbox is http://192.168.178.1/, but you used http://192.168.1.1. Did you change ur network subnet or was it maybe a typo? Just trying to be sure :)

Yes you're right, I changed the subnet :D

Haha nice. I wonder if Fritzbox does some special things if u change the subnet but wanna accquire the infos of this... hmm

[t0rb3n]

@Coggi Out of curiosity. the default IP for Fritzbox is http://192.168.178.1/, but you used http://192.168.1.1. Did you change ur network subnet or was it maybe a typo? Just trying to be sure :)

Yes you're right, I changed the subnet :D

Haha nice. I wonder if Fritzbox does some special things if u change the subnet but wanna accquire the infos of this... hmm

Doesn't really do much difference when changing the subnet. I have mine currently set to 10.0.0.0/16

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion or issue for related concerns.