Aligning Tiles within an iframe

[Neil_Vass]

I am currently a Smartthings/Webcore/Actiontiles/Grafana User.

Due to the announced changes to Smartthings I am actively looking at moving to Hubitat/Webcore/Sharptools/Grafana.

95% I am sure I can move across or rebuild in a satisfactory way. However, I have one issue which seems to be a show stopper unless I am missing something. Namely fixing tile locations in a dashboard.

I need to regenerate 8 different dashboards 5 on phones or tablets (which have different sized screens and family members use) one on my 3 Screen PC and 2 using Iframes embedded in Grafana for my main kitchen dashboard.

As far as I can see when I move a dashboard between my different orientation PC screens/Phones/Tablets/Grafana Iframes the dashboards re-arrange themselves by adding blank tiles. I have tried the browser resizer which helps in some instances but if I reopen the dashboard just once in a wrong/different sized window it can mess up the whole dashboard.

This is especially tricky in two of my instances:

1. Grafana Iframes. Editing the dashboard is next to impossible from within Grafana as the edit window differs in size to the final Grafana iframe but you need to open the edit tool when adjusting the iframe properties so it always messes up the content.

2. Putting my Samsung Phone into its DeX station as the screen resolution obviously changes.

I really like Sharptools and am happy to pay. However, Is there any way to ‘fix’ the tiles in place. If not, can I add my vote as an urgent request, please.

Cheers

[josh]

Welcome to the community and thanks for posting Neil!

@Neil_Vass

As far as I can see when I move a dashboard between my different orientation PC screens/Phones/Tablets/Grafana Iframes the dashboards re-arrange themselves

The tiles are always laid out left-to-right, top-to-bottom and will automatically reflow as your browser/device width changes (this should be similar to what you experienced in ActionTiles).

As such, the recommended approach is generally to design a dashboard for each device size. If the devices are similar in size (eg. two phones), you might be able to use a custom Tile Size that scales well between two devices that are very close in size (example here)

@josh

Use the Device Toolbar in Chrome Developer Tools to simulate a device size

1. In Chrome on a laptop/desktop, press F12 to open Chrome Developer Tools
2. Select the icon in the toolbar to enable the device toolbar
3. Select a relevant device from the device toolbar to simulate that device’s screen

For tablets that have a similar aspect ratio but different screen sizes, you may be able to use the scaling feature native to your browser. For example, in Fully Kiosk Browser (which is commonly used on Fire Tablets), you can use the ‘Initial Scale’ setting to scale things up and down to reuse a dashboard with the same ratio - there are trade-offs with this approach though.

[josh]

@Neil_Vass

Grafana Iframes. Editing the dashboard is next to impossible from within Grafana as the edit window differs in size to the final Grafana iframe but you need to open the edit tool when adjusting the iframe properties so it always messes up the content.

Would you mind sharing more details on this? The height of the dashboard while editing might be different, but the width should be the same, right?

@Neil_Vass

However, Is there any way to ‘fix’ the tiles in place. If not, can I add my vote as an urgent request, please.

I should have mentioned in my previous reply that we’ve noted the request for a ‘fixed’ layout rather than reflowing layout. Thanks for the feedback.

[Neil_Vass]

Josh,

Thanks for the reply. Bit busy right now but I will try and document a full exercise to replace one of my Actiontile iframes with a Sharptools panel in an iframe then post the experience here so you can see.

Give me a couple of days.

Neil

[Neil_Vass]

Today as an exercise I spent some time trying to replace one of my Action tiles panels in a Grafana Iframe with the Sharptools equivalent.

Firstly, I want to say I wasn’t expecting to replicate the look and feel of the panel exactly but at least get something I am happy with.

Unfortunately, after several hours of fiddling, I have come to the conclusion that there are simply too many variables to currently make this work.

These are the major issues I found:

Sharptools full frame doesn’t seem to work in an Iframe so the only way to get rid of the top bar and side scroll bar is to use the iframe attributes (height, width, margin, and padding).
From what I can work out, These settings need to be different for every single display and Iframe. It won’t even work if I make my browser window mimic the tablet size, the results are vastly different. Add to this the way in which Sharptools adds its own spaces and the number of variables makes it next to impossible.

The conclusions I have drawn and hence feature requests would be as follows:

1. Allow a fixed-size Panel possibly specifying the size in pixels.
2. Allow the option to lock individual tiles or lock the panel from the general settings.
3. When you are trying to design a portrait shaped panel using a fixed browser window size, the 3 dot edit button goes off the bottom of the screen which is a real pain could it be somewhere else!

Some other small things became apparent while going through this exercise:

4. It would be very helpful to be able to adjust the font size in the tile as I had to be imaginative about the tile description to make them fit.
5. It would be very helpful to allow custom tile colors rather than the fixed selection to enable people to exactly match a color theme being used.
6. Although there are plenty of icons. There are some omissions and almost all the icons don’t have alternatives for various states ((eg alarm on, alarm off, sun up, sundown, sleep, wet, dry, valve open, or closed, water slide).

Please accept this as a constructive comment. I do like Sharptools but right now it’s not quite where I need it to be.

Thanks

Neil

[josh]

Thanks for the details. Maybe we can try to solve some of the bigger items first and then circle back on the smaller ones.

@Neil_Vass

Sharptools full frame doesn’t seem to work in an Iframe so the only way to get rid of the top bar and side scroll bar is to use the iframe attributes (height, width, margin, and padding).

You can use two features to accomplish a fully filled iframe. The first is to make sure you are using kiosk mode for your display URL. Kiosk mode will hide the top navigation bar, the ... menu, and other features that are only needed during editing. You can do this by appending ?kiosk=true to the URL:

The second would be to use scrolling="no" in your iframe definition. This would look something like:

<iframe 
    src="https://sharptools.io/dashboard/view/XXXXX?kiosk=true"
    scrolling="no">
</iframe>

@Neil_Vass

Add to this the way in which Sharptools adds its own spaces

SharpTools should only add Spacer tiles if there is space left between two real tiles when you save. If you put one tile below another one and there is empty space remaining to the right on the first row, then spacer tiles will be added (since dashboard tiles flow left-to-right). If this isn’t what you are experiencing, a video might help us troubleshoot.

https://imgur.com/NcCulsz

@Neil_Vass

When you are trying to design a portrait shaped panel using a fixed browser window size, the 3 dot edit button goes off the bottom of the screen which is a real pain could it be somewhere else!

The only time I’ve seen the ... off the screen is when tiles that were larger than the screen-width were used, causing the canvas to extend beyond the width of the screen. Again, a video might help me better understand what you’re seeing here.

I would also note that you can edit your dashboard from another device or browser window and when you save changes, they will be pushed instantly to other devices/browsers that are viewing the dashboard.

---

The following example is a bit contrived just show how things work, but I’m using an iframe which fits 2 tiles wide by 2 high with the default tile sizing. Then in another browser window which is much wider, I’m laying out the tiles left-to-right and then saving to watch them get reflowed in the iframe.

(Alternatively, I could have adjusted my ‘editing’ window to approximate the size of the smaller iframe [or exactly match it using Chrome Developer Tools as noted above], but the intention was to demonstrate how the left-to-right reflow of tiles works)

https://imgur.com/MxNYehp

[Neil_Vass]

Thanks for taking the time to explain. I will give all your suggestions a try and reply as as soon as I have time.

Neil

[Neil_Vass]

At last I have found some time to try your suggestions.

Both work and enabled me to produce a basic stable sharptools iframe in Grafana - Thanks for that.

I am acutely aware that in asking for some more options to modify the tiles I am basically asking you to reproduce Actiontiles which is not my aim as sharptools has some other superior features. However, now the tiles fit, it becomes more obvious that not being able to alter the text size is going to cause me a problem as well. (See the snipped screen shots below)

Once my new C7 hub arrives and I swap over from Smartthings to Hubitat I now know I make this work and I will be taking out a subscription. So thanks again for your input.

Neil

[josh]

Thanks for the update and glad to hear that helped!

We’ve had a number of requests for more control over styling dashboards (including colors and font sizes). [1, 2, 3] As such, Themes / Styles is on our hit list for enhancements and it’s working its way toward the top of the list. I’ve noted your feedback in the context of the Themes / Styles request.

–

In meantime, I also wanted to note that there’s a few other tweaks that can be made in the Dashboard Settings. You can access these by tapping the ... in the bottom right corning of the dashboard and tapping Configuration, then flip the ‘Advanced’ toggle in the top-right corner on.

• Tile Size - the base size of the tiles
• Tile Spacer (Gutter) - the space between the tiles
• Truncate Tile Labels - when switched off, the labels will wrap to the next line

Edit: The Themes and Styles feature has now been released which provides much deeper control of various sizing and styling elements.