External integration widgets: choose the layout of the boxes and give them an accent color

Feature requests
1

Title: External Integration Widgets: Choosing the Layout of Boxes and Giving Them an Accent Color

Hello,

I am developing the Prix Carburants external integration. A user made two comments about the “My Station” card that I cannot fix on the integration side, as they depend on the display of widgets in Gladys.

1. Box Layout

Currently, boxes (value / gauge) wrap to the next line when space is insufficient (flex-wrap, minimum width 96 px). With 3 boxes on a narrow card, we get 2 half-width boxes and 1 full-width box below. The user would find it clearer to have 3 boxes of the same width, one below the other.

Gladys does not send the screen width to the integration, so the integration cannot choose.

Proposal: an optional field in the widget content, for example tiles_layout:

  • auto: as today (default);
  • row: all boxes on a single line, same width;
  • stack: one box per line, full width.

An unknown value defaults to auto, so nothing changes for existing integrations.

2. Accent Color per Box

Allowed colors are “semantic” colors: neutral, primary, success, warning, danger, info. This is great for saying “ok / warning / error”, but we cannot use them to identify a box at a glance. For example, the user would like to see the colors of the fuel pumps. And orange (warning) is already used in my card to indicate a break: using the same colors for both would mix the two meanings.

Proposal: an optional accent field on the boxes, displayed as a small colored bar or dot, separate from color (which keeps its current role on the value). Two options possible:

  • a free color #RRGGBB, verified by Gladys;
  • or, to stay consistent with light and dark themes, a small list of named colors: green, yellow, blue, orange, red, purple, gray.

Finally

Both additions are optional and do not change existing widgets. I can propose a PR if the idea suits you.

Thank you!

2

This topic is timely, I had this issue today :+1:

3

Hi @prohand,

Thanks for this very well-documented feedback (and thanks @Lokkye for the confirmation)!

Both issues are real. But in both cases, I think the solution should come from Gladys rather than a new field on the integration side. That’s the basic principle of integration widgets: the integration describes what to display, Gladys decides how. This is what allows us to ensure that all widgets remain consistent in light theme, dark theme, with Horizon, and at all screen widths.

1. The layout of the boxes

You’re pointing out a real bug, and your own argument gives the key: the integration doesn’t know the width of the screen, so it’s the worst placed to choose the layout. The same widget is displayed on a phone and on a wall-mounted tablet. row with 6 boxes on a phone would give truncated values, and stack on a wide card would give a very tall card for nothing. A fixed choice will inevitably be wrong somewhere.

The problem comes from our rendering: when space is lacking, a box goes to the next line and stretches across the entire width. With 3 boxes in a narrow card, this gives exactly the « 2 + 1 » that you describe, and it affects all integrations, not just yours.

So we’re going to fix this directly in Gladys, without a new field: a balanced grid that chooses the number of columns based on the number of boxes and the actual width of the card, and that never stretches a single box again. Your widget will benefit from this without changing anything, just like all the others.

2. The accent color

Free hexadecimal color: no. This is a deliberate choice from the start: we could no longer guarantee the contrast in dark mode or with Horizon, and it would be open to brand colors.

A named palette, on the other hand, is a real question. You are right not to misuse warning: color expresses a state (ok / warning / problem), whereas you want to express an identity (which fuel). And the need goes beyond fuels: waste collection bins (yellow, green, blue…) are typically in the same case.

I still have two reservations:

  • For the user, a color remains a color: a red or orange bar will be read as an alert, regardless of the field name. The confusion you want to avoid (orange = outage) would return visually.
  • The « rainbow » risk: six boxes of six colors is exactly the clutter we are trying to avoid.

If we proceed, it would be under these conditions:

  • a closed list of colors that Gladys itself adapts to the light theme, dark theme, and Horizon (contrast included: a yellow on a white background is not readable as is);
  • displayed only as a small identity dot, never as the color of the value or the background (that remains the role of color);
  • available everywhere where a dot identifies something: the boxes, but also the status lines (a waste collection widget would rather use a list);
  • simply ignored by an older version of Gladys.

As this would be a second color system that concerns all widgets, I prefer to address this point separately and specify it before coding, rather than adding it at the same time as the layout fix. If others have use cases, don’t hesitate to share them here, it will help to decide :slightly_smiling_face:

In the meantime, for Prix Carburants, the label and icon of each box are sufficient to identify the fuel, and you are quite right to keep warning for outages.

Thanks again for the proposal and the offer of PR! For the accent, let’s wait until we’ve decided here before starting on the code.

4

Ticket :

5

Thanks for creating the prohand topic, it’s handled at lightning speed here! (Faster than at work at least haha).

Elegant solution the « balanced » grid @pierre-gilles thanks :slight_smile: