Web-UI, Colorize state icons when using multiple inverters

[StafrGotar]

Is your feature request related to a problem? Please describe.

When you add a second inverter to the OpenDTU configuration, a new column appears on the left side of the Web UI where the current state of each individual inverter is indicated with changing icon images. These icons are currently always colorized in blue/white, whatever the current state of the inverters.

Just above the 3 rightmost columns, there is a state bar indicating the current state for the currently selected inverter. This bar also changes color according to the current state of the selected inverter. As far as I'm aware, the states are (at least) : Producing (blue), Online (yellow), Offline (red) and Off-hours (gray).

This is very helpful as long as one uses only one inverter, but less useful when using multiple inverters.

Describe the solution you'd like

My suggestion is that the leftmost column (visible when using multiple inverters) which currently changes icons according to state, should also change the colors for each inverter state icon, thereby making it clearly visible even on distance what is the current state of each individual inverter.

During normal production hours, "everything should be blue". Anomalies would be easily visible on the Web UI, even from a considerable physical distance.

Describe alternatives you've considered

No response

Additional context

No response

[stefan123t]

@StafrGotar a picture may say more than a thousand words:

You would like to have the Broken (x) be colored in red and the Checkmark (v) be colored blue (not green ;) ) ?

• (v) Producing (blue)
• Online (yellow)
• (x) Offline (red)
• Off-hours (gray)

The code for this pills-tab is in webapp/src/views/HomeView.vue so you most likely only need to extend / annotate the four CSS style classes with your custom styles / colors.

[StafrGotar]

Thanks for your request that I should clarify my thoughts.

In your example image above, I would like the 'V' and the 'X' plus the colors around 'Ahoy-600' and 'Ahoy-601' to change when the actual status of the corresponding inverter(s) change. I'd like to clearly see, from distance, that your 'Ahoy-601' is off-line, using the red color.

My own use-case:

• I have three inverters connected to one DTU.
• At any moment in time, only one of the inverters is shown in detail to the right, but the overall status is shown to the left for all three inverters.
• The colorized heading over the selected inverter, to the right, makes it very easy to see the status of the selected inverter (blue, yellow, red or grey). But only of the selected inverter.
• To the left, the icons change, but not the colors. <=== This is what I would like improved.
• I watch the computer screen from about 6 meters. The icon change is good, but it would be much better if the colors changed as well.

Going back to your example image above, since your 'Ahoy-601' is currently off-line, but not currently selected by the user, I would expect the 'X' to be white on a red background, the text 'Ahoy-601' to be red on white background and the border around the two to be painted in red. If your inverter 'Ahoy-601' had been currently selected, then I would expect the 'X' to be red on white background, the text 'Ahoy-601' to be white on red background and the border would be red (since the background is red).

I would see this from 6 meters of distance.

I think the choice of colors should follow the exact color schemes as the ones use to the right, for the currently selected inverter. Personally I don't care that much for what color is chosen, as long as it's coherent with the colors chosen to the right.

I believe the 'green' on top is like saying the DTU is running OK, which I'm happy with. If the individual inverter is indicated with green or blue when it's on-line and producing is less important to me, as long as it's coherent between the left and the right columns.

I also believe the choice of colors for 'OK', be it green of blue could be discussed, but that the actual choice of colors is a different discussion, somewhat related. What I'm looking for at this moment is visibility on distance and coherence between the left and right columns.

I don't have the competence to amend the CSS and to provide a patch. Had I had the required knowledge, I would probably have done so already.

Thanks for your interest