How To: Designing Dashboards for a Tablet from a Laptop / PC

Josh and James. Thanks for your help. Everything worked fine.

2 Likes

Josh - since the update, I am having a difficult time emulating my tablets on the desktop. Before this update I could shrink the browser window to match the tablet layout and then do my editing on the desktop. Even going into emulation mode on chrome won’t match whats on the tablet.

@Greg_Cole thanks for the message and sorry to hear that things aren’t working as expected. Can you share some more details on what you’ve tried and what’s not working?

The latest update primary focused on things within a few tile types so it’s unlikely to have impacted things related to screen formatting. I just tried emulating a few different devices and everything seemed to match up on Chrome 79’s device emulator.

Also, if you’re using something like Fully Kiosk Browser on the tablets, keep in mind that if you’ve changed the default zoom level (Initial Scale) or have tweaked similar settings, then Fully Kiosk Browser might be rendering things slightly differently.

Josh - found my problem. I had zoomed in which screwed up the scale. Thanks for the quick reply

3 Likes

So, its been kind of a pain in the but setting up my tablet to look exactly the way i want it.

on Chrome on my PC, I had to make a window that mimicks the size of the tablet screen. (Rubberband the window to the size of the device screen)

But what I would like to know, is there a way to just lock Sharptools to alway be, say 60 boxes across, so you cant and any tiles further then 60.

The other problem I ran into is that I could not replicate the exact screen at one point, I had to move all the tiles over to the side, and then push them out one by one to get hem to go in the proper form.

I know this is super hard to explain, but really what I would like to see is a screen locked to a specific size so that I can build a screen one at a time.

when you change the windows size, all the tiles move around, and that is not conducive to setting anything up.

Hi @Eaton_Blumenstein. Thanks for the feedback! I hope you don’t mind that I’ve merged your post in with another similar thread.

You can find some details and tips-and-tricks on designing a dashboard for your tablet from a PC in the second post in this thread ↑.

Thanks for the feedback! We’ve been thinking about a concept of a fixed ‘canvas’ that would scale with your browser. Community feedback is a key part of how we prioritize what we work on, so I appreciate your feedback!

3 Likes

ahh… thanks… the F12 does work, but seems to be a step unneeded. But like you said, I am hopeing there is demand for it! thanks again!

1 Like

I agree with Eaton. This would be a good idea.

1 Like

I third the motion for a fixed canvas. Would be a nice option if from the device you were on (say a tablet) if you could go to settings and select “fix to this device”. Then all instances of ST would be opened unless you revert that setting back.

1 Like

I too want to add my thumbs up for the fixed canvas feature

3 Likes

I’ve gotten to love an extension for Chrome-based browsers (includes Brave) named Window Resizer, It comes pre-populated with several screen resolutions, but you can also add your own favorites. I’ve added the HD Fire 10’s 1920x1200 size. It’s just a click away now.

1 Like

Just throwing in another request for this feature. For some dashboards, the reactive behavior is fine. But for some dashboards, I would much more design to a grid and have that grid resize no matter which device I’m looking at.

Take your own sharptools.io website for example. When I maximize the browser on my desktop, screen elements don’t go flying all over the place. When its in windowed mode, it doesn’t reflow until there isn’t enough space to properly show the elements in a desktop view.

There should be an option to say “fixed grid” or “reactive” for dashboards.

Forcing people to design multiple dashboards just to fit various screen layouts is kind of a bummer when a single scaling dashboard would work perfectly fine for most tablets and desktops regardless of screen resolution.

I found a thread from two years ago asking for this - PLEASE add this to the roadmap or move it up the list. I don’t want to design the same dashboard over and over again just to fit on multiple similar devices with slightly different resolutions.

2 Likes

@josh - Can this be moved to Feature Requests for voting? Thanks!

i’ll third that! please, that;d be great!

Oh god. I’ve just set up a semi decent ui on my phone.

Very well organised, good flow etc.

Shared it to the wife’s phone, and my beautiful creation is a piece of crap, everything has moved everywhere.

Seems the only solution at the minute is to design multiple versions of my (12?!) dashboards. That’s going to be a PITA.

I’ll need one for

  • my phone
  • wife’s phone
  • desktop
  • one for each tablet., they’re all different.

Thats insane! Although I’m very happy with mine, I have to admit I probably wouldn’t have put in the effort to begin with had I known. = /

What’s the chances of a solution? begs

Edit

Even if the scalability isnt doable, would it be an easy fix to essentially have a ‘carriage return’ added at the end of a row…?at leaat that way we could use custom scaling on the browser to zoom in and out without the flow getting screwed up. It’s a bit like writing a list in notepad, with word wrap, but having everything on one line. Can’t keep the list as a list. Stick a few CRS in, and everything works great. If you get my point?

I’d be more in favor of a new feature request topic getting created. This topic starts with a lot of discussion and explanation of alternative approaches.

I’ve gone ahead and drafted two different feature requests based on some of the discussion from the topic above. Please be sure to cast your vote(s) to help us better understand the level of interest.

  • Ability to define how many tiles wide a dashboard is
    Instead of defining the approximate Tile Size and then letting things flow to the new row whenever the tile reaches the end of the row, this would have you define how many tiles ‘wide’ you wanted the dashboard to be and would resize things accordingly to fit.

    Feature Request: Scalable dashboards - fixed number of tiles wide

  • A fixed ‘canvas’ design
    More of a completely redesign of how dashboards are designed. Rather than laying out tiles left-to-right top to bottom and using spacers to achieve visual whitespace between tiles, this would be more like a canvas where you could place tiles where you want. This would be a significant effort, but does have some unique advantages.

    Feature Request: Fixed Canvas Layout for Dashboards

From an initial analysis, I think the scalability would be doable if we offered the ability to specify how many tiles wide a dashboard is as an alternative to specifying how big the tile is (in px) as is done today.

I just drafted the feature request here, so be sure to go cast your vote:

:link: Scalable dashboards - fixed number of tiles wide


In the meantime, what kind of devices are you viewing things on? For phones that are a similar size, you may be able to use a custom tile size that is roughly between the screen size of each phone which will get the tiles to scale at the same size on both phones.

On tablets, if you’re using something like Fully Kiosk Browser, you use the adjust the Web Zoom and Scaling to get the tablets to fit the same dashboard across different sized screens.

From within Fully Kiosk Browser…

  1. Swipe out the left navigation drawer and select Settings
  2. Choose Web Zoom and Scaling
  3. Uncheck ‘Use Wide Viewport’
  4. Change the Initial Scale to your desired value (eg. 125)
    Note : 150% should be close to the default so something like a value of 125 would fit more tiles onto the screen.
  5. Return to your dashboard and observe the results - adjust further as needed

I am still new to Sharptools. So far I love creating my own dashboards. I am currently using two different size tablets. One is Samsung Tab A7 (10.1) and the other is Samsung Tab A (8.0). Anyways, I am using both Microsoft Edge and also this trick with Chrome. I get my dashboard layout just the way I like it finally and when I click save…tiles move around and out of the order I had them in. I have added tons of spacers to see if that would help, but it doesn’t. I tried using both scalable and reflow and it still moves the tiles around after I set them the way I like and click save. This is super frustrating to say the least. I don’t like the lack luster of features on Hubitat Dashboard, but at least I have the ability to set my tile where I want and it stays right there.

So, I am also asking if we can get this feature added to Sharptools? The ability to lock tiles in place to a size tablet we are using or maybe I am doing something all wrong. So any help or feedback will be appreciated.

The Scalable Dashboards feature is now available and would be the best way to handle having a single dashboard that scales across different screen sizes.

Sorry to hear that - it sounds like something isn’t working as expected if tiles are getting moved out of order when you press save. Would you mind sending a note to support@sharptools.io with additional details of what’s happening? (If it’s not too much trouble, a short video would probably be the best way to demonstrate)

1 Like

Thank you Josh for the quick response. I will try and get that sent tonight. Is there any file size maximum limit when sending the video? I’ll keep it short, just checking