[RELEASE] SmartGrid - Create grids of controls that you can access from anywhere

I have an update version of SmartGrid to release when a particular bug gets fixed.
See here.

The main feature is the ability to create iFrame rows so that you can embed another URL of interest within a SmartGrid. In the example below I've embedded a Tile Builder Grid endpoint within my main Overview SmartGrid.

I can collapse this section just as I do any others using Custom Sort order.

If it takes up more than the space allowed you will get scroll bars.

This change lets me simplify my main dashboard by condensing a few items together.

This will be made available when the above mentioned bug is fixed.

4 Likes

The bug I referenced here appears to be fixed in version 2.4.3.137, possibly earlier.

I'm getting a surgery tomorrow so I don't want to post code and potentially break something when I'm in no position to fix it. So I will post some updated code next week.

Here are a few examples of how I'm using it.

1 Like

I hope all goes really well in surgery. And thanks for the great app.

2 Likes

I have release SmartGrid 4.5.3. It has the following changes.

All references to Pinned Rows have been removed. This has been replaced with the manual sort order feature.

Add iFrame Row feature.
This lets you add rows that will be used to host iFrames to other endpoints.


Allows you to embed other endpoints within a SmartGrid.
Example 1

In this example the TV Remote scales to the size of the row automatically because that is how it is designed.

Example 2
Collapse them when you don't need to see them.


Open up the ones you are interested in.

In these the height of the rows are a fixed size set by the designer. If a table changes and no longer fits scroll bars will appear.

Sorry I've been somewhat inactive lately. That bug really halted my progress as this was an important feature to me and I could no release it until now. Hopefully I'll be a bit more active.

The next item is to get thermostats working directly within SmartGrid. I'm not yet sure what approach I will take, but leveraging the iFrame control is probably the best approach and not jam too much UI code into SmartGrid.

No updates to the documentation yet but they will come next week.

2 Likes

I looked thru this topic, but did not see this issue. I have 3 combination Smoke/CO2 sensors. When I add them to the grid, both smoke & CO2 from the same sensor get the same Custom Sort index. Hence, every time I change the sort order and save, they revert to the pairing the smoke and CO2 in adjacent rows based on the shared sort index. I am trying to separate the Smoke and CO2 into two groups labeled with custom rows. Is there an existing feature or work around for this?

You are correct in your summation that the problem has to do with duplicate indices. The last version that I rolled out added a second unique index. Now I need to do an update that will use that alternate index. With Christmas coming up I'm not sure I can get it done before then, but certainly shortly after Christmas I will get it done.

But there is a feature that I would probably recommend when you are just trying to pull a couple of numbers from a sensor, that feature is Variables

You define your Variables like this.


Note the variables names %var11% and %var12% are the ones assigned

Then you can use a Device Row or Separator Row like this


and place the variables in any of the fields.

That row now looks like this.

You can also put a variable in the Device Name like this:


and you get something like this.

You can also use an embedded iFrame like this (a Tile Builder Endpoint) if you want a large group of numbers.

Just some ideas, but I will fix the bug. However I find the one row per data point a little wasteful and I tend to avoid it using one of these techniques.

Thanks. No rush. Have a very Merry Christmas!
I thought the variables might be a way to work around, but figured I'd post the issue anyway.

Stumbled on a formatting issue with variables. Fan timer is a Number ( State Text = %var23%) and Time is a date time (Name Text = [b]Time (%var22%)[/b]).
image
Both are custom separator rows, and time format in general is as follows:


Not sure if they would apply to the formats I'm seeing, but Fan Timer being a number is odd.
Work around or feature I'm missing?

Also, is Smart Grid supposed to be available in Tiler Builder (License enabled), or just Remote Builder?
Thanks!

I added that to my list of improvements. I think it checks attributes but not variables at the moment.

Sorry, a couple more things:

  1. How hard would it be to add fixed column widths to Tile & Remote builders. Maybe a width number and "auto" for current behavior.
  2. In Tile builder my thermostat returns a null if the Hold attribute has no current value, normally a status string. The tile then just displays the variable name (%Var2%) in that case. Tried Keywords and Char replacement to change the %Var2% to "Null", but neither seem to work. Again, am I missing something?
    Thanks again for all of your help, and great Apps.

Oops, I think #2 is in the wrong thread.

In Tile Builder modules you can use an override to changed the default behavior of the columns.
Default
image

Force width with Override

In this case column 2 will adjust to take up the remainder.

Which module of Tile Builder are you referring to in #2.

@garyjmilne It looks like smart buttons aren't an available option to select in the controls - correct? Granted they wouldn't show much from an on/off standpoint, but having battery level and last activity on a SmartGrid would be useful. A nice to have feature rather than must have. Thanks for all your continued support on this!

Thanks for the column width info. Is there something similar for Remote Builder/Smart Grid?
As for #2, its in a Grid in Freeform mode, Variables/Rules set to All Keywords or Replace Chars.
Then the associated text replacements down below in the Design Table.

That is correct. The button is a momentary device so the state would always visually appear as off. You can incorporate a button remote using an iFrame row. In this case it is a TV remote but it could just as easily be one of the button remotes from Remote Builder.

You could use a variable to capture the battery state as shown in the example below.

You could use the same method if the driver supports it for the last button press and time. If not you could populate a hub variable using rule machine and pick it up with SmartGrid.

You can set the total table width and the explicit width for columns 5 and 6 which are for the controls. Column 3, the device name, will take up all the slack after everything else automatically sizes. But no, SmartGrid does not have the same CSS overrides that you have in Tile Builder.

As far is the null goes there is a setting in Grid which is the invalidAttribute String.


The intent of that is to handle situations where the attribute does not exist or is null, but it sounds as though it is not working.

If you have a look at the device can you tell what the actual value is? Is it just a null string like ""?

I did not have the Invalid Attribute String set, changed it to n/a, but that did nothing.
I can't tell for sure exactly the data coming back from the Ecobee thermostat, via the Ecobee Suite Package. In the device details it just lists it a "null" (screen shot below), typical when idle. Other times it returns strings like "fan auto" or "circulating". which display fine. In the driver the attribute ThermostatHold is typed as a string.

Screenshot 2026-01-05 101341