[Feature] Split Interfaces page into separate tab per interface

[tonhuisman]

Features:

• Interfaces page separated into a tab per interface (I2C, SPI, Modbus)
• Move PCF & MCP I2C Bus-selector (back) to Hardware page
• Fix Custom SPI GPIO pin selector for User-defined SPI3_HOST
• Fix compiler warning for i2cscanner command
• Fix small display issue for P095 and P116 for Backlight pin in devices list

For each available Interfaces type a configuration page is available, currently I2C, SPI and Modbus (though the last one is still empty/TODO):

And in dark mode:

• Default selected page is the first available enabled interface page, for most configurations that'll be I2C.
• This setup allows for multiple Interfaces to be added easily (expected: CAN bus, mBus, w-mBus)

Additional features:

• Collapsible sections on web pages

• The first interface is expanded by default
• Further interfaces are auto-expanded if they are configured, else they are collapsed by default
• For I2C, the Multiplexer settings are collapsed by default, unless configured, then they are auto-expanded

TODO:

• Testing
• Update documentation (move lots of stuff from Hardware to Interfaces and Network plugin pages)

Screenshots updated: 2026-03-10

[tonhuisman]

@chromoxdor Are you available for testing this PR, especially the collapsible sections, and the overall look and feel on non-Windows platform(s)?

[chromoxdor]

I have not so much time but I am willing to procrastinate for a good cause 🙂

[chromoxdor]

I am a bit unhappy about the structure and the CSS.
With very minimal CSS changes, we could achieve this:

The better html structure would be:

[chromoxdor]

If you want to test my css:

espeasy_default.css

[tonhuisman]

If you want to test my css:

espeasy_default.css

You probably changed something more than just the css, as I don't get the same submenu display you have in your screenshot 🤔

[chromoxdor]

The better html structure would be:

Sorry, I meant using the css with the HTML structure I recommended

[tonhuisman]

Well, yeah, but to reduce code I used the 2 suffix instead of sub and submenu classes... AFAICS it's only class names that differ, not (really) structure?

[chromoxdor]

Well, yeah, but to reduce code I used the 2 suffix instead of sub and submenu classes... AFAICS it's only class names that differ, not (really) structure?

Not quite. You change the whole body classname and put the sub menu in the header of the main menu.
My structure just adds a new header for the sub menu. Actually I wouldn't even need the extra class "sub".
In my opinion, this is the more flexible solution...

[chromoxdor]

It is much harder with the given html structure to style the menubars in a way that it looks halfway consistent

[chromoxdor]

I wa playing around and it seems there could be a way to style it with your structure...
Here a test css. but i am not 100% happy with it. :)

espeasy_default.css

[chromoxdor]

just updated the css file

[chromoxdor]

I got late yesterday, so I did not write anything anymore.
From a "programmers" point of view, I really like your approach with adding the number and the loop.
And we definitely can keep it that way since it can be styled "good enough". In the last CSS file I sent, I almost got it to a similar look as in the pictures I posted. Hope you like it.
I made some additional changes to accommodate the increased number of tabs. I added scrolling to the menubar since I couldn't reach the toolbar on my phone anymore, and cramming more symbols into the given space makes no sense in terms of usability anymore. I also changed white-space: nowrap for the unit name since longer unit names were bleeding into the menubar on smartphones.

[chromoxdor]

Some refinements:

espeasy_default.css
..updated..

[chromoxdor]

sorry ton... I made another small change 😬:
espeasy_default.css

[tonhuisman]

@chromoxdor You haven't made any comments (yet) about the collapsible sections, does that mean it is completely broken and not visible on your browser, or just working as expected?

[chromoxdor]

@chromoxdor You haven't made any comments (yet) about the collapsible sections, does that mean it is completely broken and not visible on your browser, or just working as expected?

Ahhh, true...
This worked so well that I completely forgot about it. :)

You might consider adding the following for completeness, but it's not absolutely necessary:

summary {
	cursor: pointer;
}

[chromoxdor]

...also not really necessary but nice when adding some padding.
You could add it to an existing entry:

input,
select,
textarea,
summary  {
	margin: 4px;
	padding: 4px 8px
}

But it all adds to the size, so I leave the decision to you. ;)

[tonhuisman]

Looks much better, and also more (mobile) touch-friendly, those margins/paddings.
I'll set the cursor to default on the details element, instead of on summary. reverted that

[chromoxdor]

Hey Ton, I actually chose the colour for the borders on purpose and I am not happy with the recent changes. It doesn’t look good in dark mode:

Also, here it looks out of place. The dark mode actually doesn't need a border. That’s why I chose a colour that makes it look invisible.

[chromoxdor]

Also, which browser did you use for the screenshot?
The bottom border of "interfaces" shouldn't be visually distinguishable from the menubar2 border.

[tonhuisman]

I'll do some more fine-tuning 👍

[tonhuisman]

@chromoxdor I've restored the dark borders in dark mode, as by your adjustments, and slightly adjusted the height/top to achieve a more clean menu layout.
Screenshots in the initial comment are updated.

[chromoxdor]

Almost ;)
If this is displayed correct in your browser we need to find another approach.
I am testing with safari, chrome, firefox and edge....

[chromoxdor]

Also the headermenu2 is not aligned anymore in relation to the menubar2...

I could realign it all for you, but then we would be back at square one where I sent you my last CSS file.
Can you tell me what you want to archive/change.

[chromoxdor]

Here the version that works perfectly on my side:
espeasy_default.css

[tonhuisman]

I'm quite pleased with your corrections, so I'd say let's do this 😄

[tonhuisman]

If this is displayed correct in your browser

I'm not using a MacBook, so don't have a Retina display, just a mere Full-HD display, and aging eyes... Used Zoom-it magnifying tool, but it didn't reveal that misalignment. Guess we'll have to leave the high-res graphics stuff to you 🤣

[chromoxdor]

I'm not using a MacBook, so don't have a Retina display, just a mere Full-HD display,

Hey Ton, it's 2026! Retina displays are not exclusively an Apple thing anymore. Please go outside and treat yourself to a new computer...

and aging eyes...

...one with a big screen.
😜

[TD-er]

I'm not using a MacBook, so don't have a Retina display, just a mere Full-HD display,

Hey Ton, it's 2026! Retina displays are not exclusively an Apple thing anymore. Please go outside and treat yourself to a new computer...

and aging eyes...

...one with a big screen. 😜

Ehhmm... it is 2026... have you seen the prices of RAM and a videocard?
Just the (non-Apple) RAM alone would already be close to 1000 euro.

[chromoxdor]

Ehhmm... it is 2026... have you seen the prices of RAM and a videocard?
Just the (non-Apple) RAM alone would already be close to 1000 euro.

I did not. It has been a while since I bought myself a dedicated video card or RAM. Probably it's bad, and it gets worse.
But I would think the latest notebooks are not so much affected by it by now....

@tonhuisman

Can you add the following (best after line 476) for compatibility (browser before 2024)?

[class^="menubar"]::-webkit-scrollbar {
  display: none;
}

[tonhuisman]

I'm not using a MacBook, so don't have a Retina display, just a mere Full-HD display,

Hey Ton, it's 2026! Retina displays are not exclusively an Apple thing anymore. Please go outside and treat yourself to a new computer...

and aging eyes...

...one with a big screen. 😜

Most of the work I put into ESPEasy is done with a lap-top laptop 🤣, there's a set of 27" QHD screens in my home-office, but those aren't welcome in the living room, and working in the home-office during the evenings and weekends also isn't 'socially accepted'... 😨
I'm already looking out for a new laptop, considering even an MBP, but the finances department still has some objections...

[chromoxdor]

but those aren't welcome in the living room, and working in the home-office during the evenings and weekends also isn't 'socially accepted'... 😨

So you are allowed to work in the living room.... that's something 😁

I'm already looking out for a new laptop, considering even an MBP, but the finances department still has some objections...

I totally understand. These Apple products are eyewatering expensive, and if I hadn't had help, I wouldn't have bought a new one in 2023. It’s a 16" M2 MacBook Pro. But I am so happy with it and see no urge to upgrade anytime soon. It's still more than fast enough and the battery lasts almost the whole day. Most importantly, compiling ESPEasy is incredibly fast and the fan is even not turning on while doing it...