Energy Distribution Card Colors

[EnochPrime]

Introduction

The Energy Distribution card currently consists of a maximum of 6 nodes each representing a different aspect of home energy. For the most part, each node has a primary color which is used for the ring which encircles the icon and values. This primary color is also used for lines connecting that node to another node (mainly toward the home node). Some nodes also have a secondary color used for lines. The home node has a unique aspect that the ring is split into multiple colors representing the proportions of the input energy. With the addition of the battery node to this card the methodology of how the primary and secondary colors are applied has become inconsistent.

Scope

The scope of this discussion is intended to be limited to the methodology for choosing what color(s) are used for the rings and lines in the Energy Distribution card. What the exact colors should or shouldn't be can be discussed, but is not the primary purpose.

Current Card

Analysis

Non-Fossil & Gas

These nodes only transmit energy to one other node. The primary color for these nodes matches the color of the connecting lines. No issues to note here.

Solar

Like the non-fossil and gas nodes, the solar node only transmits energy to other nodes. The primary color of this node is yellow and the line connecting the solar node to the home node shares this color. There are two additional nodes which the solar node connects to: grid and battery. The color of these lines match the input value color of these nodes. This does not appear to be a problem at this point, but causes issues when looking at other nodes.

Grid

This node maintains the first "rule" of the previously discussed nodes where the primary color is used for the ring and the line connecting to the home node. If one tries to apply a second rule that input lines should match the input color of purple that would mean the green line from non-fossil should be recolored which breaks the first rule.

Battery

This node does not follow any of the possible rules of the other discussed nodes. The ring uses the color of the input value and not the output value. Shares the same problem of input colors as the grid node.

Home

This is the only node that does not export energy. As such there is not a primary color and all connecting lines match the color of the output value of the connected node.

Proposal

• The input and output colors of the battery node should be swapped.
• All connecting lines should be colored such that they match the primary color of the node from which energy is leaving (e.g. all lines from the solar node should be yellow).
• Lines which are bi-directional (e.g. between grid and battery) should dynamically change to match the greater value.

[balloob]

CC @matthiasdebaat

[matthiasdebaat]

Thanks for your input @EnochPrime! With gas and battery added to the party, the whole thing has become a bit inconsistent.

In a later exploration, I made the lines black and the blobs may still be the color they came from. In my opinion, this works great by dimming the map and making it clearer. What do you think of making the lines black?

Don't mind the other changes I made in the card

[EnochPrime]

What do you think of making the lines black?

I do believe that helps with overall look and directs more focus to the nodes. Having colored circle verses the rings helps with this. Also since there are two lines between the grid and battery the need to switch colors of lines is also eliminated. In hindsight I realize that the individual colors associated with the lines do get used in the history bar chart. So making all the solar output yellow would make it hard to distinguish between what was used and what was returned to the grid or battery. That being said the mismatch of the battery color and the battery to home line still exists in this rendering.

Don't mind the other changes I made in the card

... I'm going to comment regardless and say that this is a visually superior layout in my opinion. I really like how the home is center and the focus instead of on the side. Perhaps having gas in cubic meters below kWh (similar to green energy from grid) would be better especially when there are large numbers from yearly usage.

[matthiasdebaat]

What do you think of making the lines black?

I do believe that helps with overall look and directs more focus to the nodes. Having colored circle verses the rings helps with this. Also since there are two lines between the grid and battery the need to switch colors of lines is also eliminated. In hindsight I realize that the individual colors associated with the lines do get used in the history bar chart. So making all the solar output yellow would make it hard to distinguish between what was used and what was returned to the grid or battery. That being said the mismatch of the battery color and the battery to home line still exists in this rendering.

Oke great! I think for now we should make the lines black.

About the mismatch of the battery color and the battery to home. What would you suggest? I don't quite understand what you mean by this.

Don't mind the other changes I made in the card

... I'm going to comment regardless and say that this is a visually superior layout in my opinion. I really like how the home is center and the focus instead of on the side. Perhaps having gas in cubic meters below kWh (similar to green energy from grid) would be better especially when there are large numbers from yearly usage.

Thanks! For now we've paused development on this and will use this design for an other day.

[wtadler]

I think this is a great new design. Love the home-centricity, and not trying to overdo it with line colors or pie charts.