[RELEASE] Remote Builder – A New Way to Control Devices - 7 Remotes Available

⚙️ Custom Apps and Drivers Custom Apps
84

I found I had 2 different versions of the smartgid app installed.
I deleted existing remote and existing remote app v1.1.3

Re-created remote under 3.0.0 Worked.

  • Not finding a way to turn off control C. I have hide info 1, 2 & 3 as hide.
  • sorted by state, when device changes no longer sorted by state just by name
  • wish i could shrink control a/b and give more room to device name and/or remove multiple check boxes to save space
  • when device changes, green bar moves as if scanning, but also grid goes blank momentarily. Maybe too many devices to display smoothly?

I do like the fan controls But if I show them, I lose alot of screen space on phone.

I'll keep testing .. may have to restore back and use the other one

85

Tried to turn off polling thinking it may prevent whole grid refresh and got this error when attempting no selection

Error: Cannot invoke method toInteger() on null object

Now unable to enter smartgrid wihout getting the error. I delete and start over.

86

found where to turn off columns in headers/ columns

1 Like
87

i must have too many devices in grid to prevent whole grid refresh. Fewer devices are ok.

88

Looks like you found this one.

I'll look into it.

That has been niggling me too. I'm going to allow the fan buttons to be smaller. so this column does not have to be so wide.

How many devices are you talking about?

89

Does it give a line number?

90

Final thoughts

Cannot hide column C, though I cannot turn on column a/b with hide c on. I think the two are intermixed somehow.

I like the fan controls, but it doesn't appear I can only display those without displaying dimmer bar. Unfortunately, my wife will constantly change the dimmer by accident. So unable to display A/B.

If I did display column A/B, it cuts the device name in 1/2 or more. There does not appear a way to adjust column width individually. I would gladly sacrifice space in column A/B to read device names. Full name appears with A/B is off.

When sort is first set to state then name, a device change reverts it to sort by name.

If I wasn't trying to use smartgrid as simple dashboard on a phone, these column size issues would not be a problem on windows screen.

Thanks for all the hard work.

91

I did not see one. All I did was select no selection on polling option. Thought it said none. Error came up immediately and could not recover.

92

Let's take this conversation to DM.

93

Wow, love this! The Roku remote in particular scratches an itch I've had for a while.

Ran into one issue, I can't seem to get the remotes to scale on a dashboard. Here's on my test dashboard (tile size 100x100):

SCR-20241230-mnzg
SCR-20241230-mnzg1794×980 117 KB

No custom CSS here. How can I get the remote inside the tile to scale?

Edit: This is in Firefox on MacOS. In Chrome or Safari, the remote scales fine. I'll poke around a bit...

... and having poked around, it looks like the constraining element is the <div> that contains the iframe, but I can't tell why -- it has a height and width of 100%, but its calculated height is 150px even though the containing <div style="tile-primary"> has a calculated height of 414px. In Chrome, both of those have a calculated height of 414px.

94

Reproduced the issue here.

I think it's because the immediately-enclosing div doesn't have an explicit height. Looks like you can fill up the available container by adding

position: absolute; left: 0px; top: 0px; bottom: 0px;

to the iframe style -- works in Firefox for me without breaking Chrome or Safari.

95

I'm glad you like it. Just to clarify. The link stored in the Remote Builder Storage Device attribute will look something like this:

[div style='height:100%; width:100%; scrolling:no; overflow:hidden;'][iframe src=http://192.168.0.200/apps/api/4161/tb?access_token=c8fced91-06da-46a6-a294-57d6b63aa464 style='height: 100%; width:100%; border: none; scrolling:no; overflow: hidden;'][/iframe][div]

and I think what you are saying is that if it looked like this:
[div style='height:100%; width:100%; scrolling:no; overflow:hidden;'][iframe src=http://192.168.0.200/apps/api/4161/tb?access_token=c8fced91-06da-46a6-a294-57d6b63aa464 style='height: 100%; width:100%; border: none; scrolling:no; overflow: hidden;position: absolute; left: 0px; top: 0px; bottom: 0px;'][/iframe][div]

Now I notice that my closing [div] isn't closing as it's missing the /. Perhaps that is something to do with it. Would you mind trying that first? If you go into the storage device you can just copy the link from the state variables, close the [div] and then paste the modified link directly in there using createTile and then placing the attribute on your Dash.
image

If that does not correct it I have no issue with adding those parameters as they seem to have no negative impact on Chrome.

96

Well I'm glad you pointed out that storage device page, because what I was suggesting was absolutely-positioning the remote over the whole page, whoops! So that approach alone isn't gonna work.

This turned out to be trickier than I expected, but I think I've got it working.

The thing I missed was that in the context of a dashboard, the parent div is using display: table-cell. So for the dashboard, this will work:

[div style="height: calc(100%); width: calc(100%); display: table; position: relative;"][iframe src="..." style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"][/iframe][/div]

(The calc(100%) converts 100% to a pixel measurement, which I noticed that the tile-primary class is also using and turns out to be a handy way to provide a dynamic, but not percentage-based, size for the iframe to fill. So far so good for the dashboard.)

Unfortunately, on the storage device page's "Current States" section, the resulting remote is tiny tiny, since now we're not falling back to a 150px-default iframe height. I would fix that by adding a fixed height to the unstyled div that contains the remote, or by adding a minimum height for a remote:

[div style="min-height: 150px; height: calc(100%); width: calc(100%); display: table; position: relative;"][iframe src="..." style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"][/iframe][/div]

This definitely stretches my CSS knowledge so please don't take my word on any of that and test it out :slight_smile: I did make sure it looked correct on the dashboard in Firefox, Chrome and Safari on my Mac.

97

How can I get rid of scroll bars when using a SmartGrid on a Dashboard? I have increased the tile sizes and for the scrollbars to be gone the tile is way to large. Using Edge/Chrome

Here is my example. 1st Tile size is 2 x 3 and the 2nd Tile is 3 x 3

image
image889×1101 272 KB

If I change the 1st tile size to 6 x 4 for the 1st Tile the scroll bars finally go away.

image
image841×1246 45.2 KB

I also have to increase the 2nd tile size to 6 x 4 for the the scroll bars to finally go away.

image
image869×1268 48.6 KB

My settings in Remote Builder - I have tried different sizes but still see the scroll bars.

image
image777×329 23 KB

98

Edit: Try adding the height:auto to this line. Just an interim measure until the next release.

@media (max-width: 768px) {  .container {max-width:100%; margin-bottom:20px;} 
html, body {justify-content: flex-start; align-items: stretch; background:#F5F5DC; height:auto;} }
99

Sorry, working on a few other things. I'll try this out in a day ot two.

100

height:auto worked for the height and trying to add width:auto did not help the width.

I experimented and this is working for now. I await your expertise on any better solution.

@media (max-width: 768px) {
.container { width:auto; margin-bottom:20px;}
html, body {justify-content: flex-start; align-items: stretch; background:#F5F5DC; height:auto;}
}

Thanks.

Updated
Do NOT need to change max-width:100%; to width:auto; -- only need to add the height:auto;

101

I really like SmartGrid. I have 5 of them now on my main dashboard.

A found a couple of issues and looking at the code I was able to resolve them. First was the beige background that I could not get rid of in the UI. It was in the code for some reason and I just removed it. On the same @media line on 1720.

@media (max-width: 768) {
.container { max-width:100%; margin-bottom:20px;}
html, body {justify-content: flex-start; align-items: stretch; height:auto;} //background:#F5F5DC;
}

The other issue was the scroll bars. Unless I oversized the dashboard tile they would show unless I reduced the smartgrid padding and text sizes to smaller than I wanted it. Finally I saw in the code a /* Eliminates scrollbars that was commented out that I uncommented on Line 1726. Now it's perfect!

1 Like
102

Please post a pic, it would be interesting to see? Are you using polling or the standard dashboard refresh method?

103

I'm not clear on the width issue? Your two latter images show a clear height issue which you now have a solution for but whatever the width issue it's not clear from the images.