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

I tried that and this is what I got. The first pic is my laptop and second is fire hd 8


Thanks for sharing the screenshots. I should have mentioned that if the Chrome Device Emulator doesn’t already have your device listed, you would need to manually add it using the effective device resolution.

One thing to keep in mind is that the effective device resolution is different than the physical resolution typically reported in device technical specs as most devices use some sort of scaling. The easiest way to figure this out is to go to https://whatismyresolution.com from your target device and it should show the effective resolution. In the case of the Fire HD 8 it’s 962x601. :smiley:

https://imgur.com/hm2VsTl

Or you can do it the hard way...

If you prefer doing things the hard way, you can usually look up the resolution and calculate the effective resolution. For example, there’s a table in the Screen Layout and Resolution | Fire Tablets article by Amazon where they report that the Fire HD 8 has a screen resolution of 1280x800 and a scale factor of 1.33.

So to get the effective screen resolution, you would divide the physical resolution by the scale factor. Eg. 1280 / 1.33 = 962 and 800 / 1.33 = 601… giving you an effective screen resolution of 962x601.

So in your custom device profile in Chrome Device Emulator, you would enter something like the following:

Add a Custom Profile
image

Filled in with Fire HD 8 details
image

How do I get rid of the blue header

You can add ?kiosk=true in the end of url or click on ... of the desired dashboard in the dashboard list, and select "View (Kiosk Mode).
image

1 Like

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