Creating Labels or narrow buttons as tabs

Is there no way for us to add just text hyperlinks and style it the way we want? What I really want to do is create a left bar with links to different dashboards like Living Room, Upstairs etc… and when I click on a link that one is active. The styling options seem very restricted. Isn’t there a way for us to change the styling code of each tile?

Also, is there no way to disable scroll? because for example i’ve filled my screen with tiles but for some reason because it somehow has extra padding it detects that i can scroll and when i’m using the UI it’s a bit annoying that i can scroll down a little bit to see nothing

And also, i’ve added the presence sensors of everyone in the household. In SmartThings I have a photo for each presence sensor and the person. Is there no way to have a photo of the person as a icon with the status away or present instead of saying not present which is quit a long sentence to put.

Can you clarify what you want it to look like?

A common approach for building a navigation bar is to use the Dashboard Tiles and customize the color of the ‘current dashboard’ tile on each dashboard to indicate which ‘tab’ is active.

To get tiles that are more narrow, you can adjust the base size of tiles to a smaller size using the Dashboard Settings, and then adjust the dimensions of each of your normal tiles larger. For example, if the default dashboard tile is 160px, you might change it to 80px and then make each of your tiles double size (eg. 2x2)

Another approach is to use the Media Tiles to create a custom image for your tile. You can use whatever graphic, text, or fonts that you want in the custom image. Then you can change the Media Tile action to hyperlink and link to your desired dashboard (note that the next SharpTools release should include the option to choose the ‘target’ for the media tile hyperlink).

Can you provide a screenshot of what you’re seeing?

Not at the moment, but I like the idea. Are you thinking that it would basically be a static photo of the person and then the ‘Present’ / ‘Not Present’ (Away) layered on top?

Note that ‘Not Present’ is the value reported from SmartThings: Presence Sensor Definition

This sees to work ok. One problem is, i’ve jut made the tile size small and put a label but the defaut 4 square icon is displayed there. Is there no way to turn off an icon for the tile? I just want it to show my label.

Below are two screenshots, i’ve blanked few things out for privacy reasons. If you look at the two screenshots, you will see that the first one you can see all the labels at the top and there is still plenty of empty space at the bottom. However, the webpage seems to think there is extra space and hence a scrollable area at the bottom exists and if I scroll down i get what is shown on the second screenshot. Normally on a website I would disable the vertical scroll with css using the overflow-y parameter. I’m thinking maybe your main outer layer has lots of padding creating a hidden scrollable space.

Yes basically that is what i’m thinking, the word present works fine but not present is too long so if that can be replaced to away.

1 Like

Not at the moment, but it’s on the hit list. :slight_smile:

Thanks for the screenshots. Are you viewing the dashboard the dashboard in Kiosk Mode? I noticed that the space looks like it’s about the same size as the top-navigation. I think I have an idea how to remove the extra space - thanks for reporting! :smiley:

Yes this is running in Kiosk mode

1 Like

That’s a real shame because this is probably the best method currently to create sections. I don’t like the idea of create image based tabs. Any idea when the feature to remove icons on a tile will be available? it will also be good if we can make the tile background colour transparent so that it doesn’t look like a tile but instead looks like a text label. And also, can we not have the ability to add basic objects like hr tags that we can style and possible div boxes that we can style and place things into?

Also, i’ve just tried using an image but by default all the tiles have a border styling applied to them. Can we not on a individual tile basis choose what border styling we want?

It’s on the short-list to be able to remove the icon for Dashboard tiles as I think it should be a relatively straightforward technical implementation, but there are a few other items we have prioritized ahead of it, so I don’t have an immediate timeline.

I’m working on adding transparency to the tile color options in the current sprint. :slight_smile:

Along with the transparent tiles, one of the things we’ve been prototyping is the ability to remove the shadow/depth from a tile. Technically, there isn’t any ‘border’ on the tiles, but the tiles all have a ‘depth’ applied to them which applies a bit of a shadow (which somewhat acts as a border).

We’re trying to balance having a range of customization options along with keeping things simple enough for most users to use. The transparency can fit directly into the existing ‘color’ concept, so that one is a bit more straight forward. The hiding of the shadow/border would be a brand new options. And we’ve been hesitant to add too many options into the tiles as it can be overwhelming for new users.

Anyway, I’ll need a bit more time to work through the best way to provide an option to remove the shadow/depth on a per-tile basis. I’m thinking we might introduce an ‘advanced’ switch in the Tile Editor that hides away some of the more power-user type features.

Can you describe what you are functionally trying to achieve? It sounds like the goal is a visual box to ‘contain’ the other tiles, right?

1 Like

Yes it’s mainly to be able to visually align and put tiles inside styled areas.

I’m currently experimenting with having my own little UI with slide out menus etc but then having object element that loads the sharptools dashboard into a div using iframe. The concept works. But one concern would be some sites over time have disabled the sites being loaded in iframes. So although sharptools currently works being called into an iframe, is this something you will block at some point which will make me spending time making a UI pointless or will you not disable iframe loading ?

We don’t have any plans to block loading SharpTools.io in an iframe. I can’t say for certain that it will never happen, but we have no current plans to block it. :slight_smile:

Just an update that the spacing at the bottom of a dashboard while in Kiosk Mode has been removed in the latest release.

Dashboard tiles also now have an option to use the label as the main content - though I think you’ve probably already solved this with your custom iframe navigation approach. :slight_smile:

There’s tons of other feature updates included in this release which you can find in the following thread:

Fan Tiles, Battery Tiles, Label Tiles, and More!

2 Likes

That’s great, will try it out. Though my iFrame method is working really well at the moment :slight_smile:

2 Likes