Customization and Issue with Custom OW Tile

SharpTools.io (web)
1

Hello SharpTools Community,

I’ve been working on customizing the OpenWeather Tile for my dashboard. I tried changing the CSS code to set the background to transparent, particularly in the .default-background class. However, instead of becoming transparent, the background only changed to light blue. Additionally, I’ve seen suggestions about unchecking the ‘Use Included Background’ option for transparency, but I can’t seem to find this option. Could anyone guide me on where to find this setting or provide any insights into making the background truly transparent? Thank you for your help!

2

cssCopy code

#app.default-background { 
    background: linear-gradient(52deg, rgba(12,5,147,1) 0%, rgba(16,16,172,1) 30%, rgba(113,0,255,1) 100%); 
}

I changed to

cssCopy code

#app.default-background { 
    background: transparent; 
}
3

I solved the problem with the transparent color by proceeding as follows:
To change the overarching color settings on your SharpTools dashboard, follow these steps:

  1. Open your dashboard in SharpTools.
  2. Enter the dashboard’s edit mode.
  3. Look for the settings for the entire dashboard
  4. Find the option for “Override default colors”
  5. Disable this option to allow individual style settings for each tile.

However, I now have the following problem with the Full Kiosk Browser. Weather Tile “flashes” red at the top. It looks correct on the laptop. All other tiles are not affected.

1 Like
4

If you don’t see the ‘Use Included Background’ option, make sure you’ve updated to the latest version.

:page_facing_up: How to use the ‘Update from Source’ option

Note that when you uncheck that option, the background color you’ve applied in your tile styles effectively ‘shines through’ the tile. So you would either want to explicitly set a transparent color on the individual weather tile or adjust your theme accordingly.

If this is a very old dashboard, it might have had the old style ‘color’ settings rather than themes… as you alluded to, you can disable that legacy setting if it was an old dashboard that used the old color approach.

Can you share a screenshot or more details about the red flashing at the top? Maybe a screenshot or short video clip would help demonstrate the issue?

5

Hi Josh,

here is it

Also, the Full Kiosk browser crashes very often after installing Weather Tile and I have to restart it.

6

Oh wow. Yeah, that’s definitely not a “feature” of the custom tile nor the dashboards! :upside_down_face:

What type of device is this on? If it’s an older device, I would check to see if there are any updates available for it. Fire tablets, for example, bundle newer versions of the web browser engine with their OS updates, so oftentimes just updating to the latest OS can solve compatibility and rendering issues.

If you create a brand new dashboard with no customizations / Themes applied and add the Weather Tile to it – ideally in a slightly different position, so maybe add 1-2 random tiles before it – do you see the issue there?

–

If you’ve customized the Weather Tile code, you might also try reverting to the default code and using the settings that are available instead: :page_facing_up: Custom Tile: Update from Source

7

Full Kiosk Brauser runs on the tablet with Android 7.1.2. I have updated Weather Tile from source. I see ‘Use Included Background’ now. It works with transparency.
But unfortunately this “feature” has remained :frowning:

8

Dear Josh,

any idea how can I solve this problem?

Qte
the Full Kiosk browser crashes very often after installing Weather Tile and I have to restart it.
Unqte

9

What about the details requested above?

  • What type of device is this on?
  • Are there any updates available for the device?
    • Since you are using Fully Kiosk, this also means browsers and WebViews.
  • What’s the result of testing a new dashboard, no customizations, 1-2 tiles + weather tile?

Since you are using Fully Kiosk, you can get the device details as follows:

And if you have another modern device you can test on, does the issue occur there? For example, a modern phone, tablet, or PC. (Android 7.x is over 7 years old at this point and other software on the problem device could be outdated as well)

10

Fully Kiosk
Fully Kiosk1600×900 103 KB

11

I dont have any issues on my laptop. Just on this android tablet

12

Thanks for sharing the additional details!

I wonder if it could be related to the relatively unique configuration. Rockchip Android devices are not particularly common and while they usually do a decent job with software/driver support, it’s not quite the same level as common devices from Samsung, Amazon, etc.

It looks like you are on a new enough OS + Fully Kiosk version that you are able to use the Chrome Webview which means it’s an up-to-date rendering engine which is good… but it’s still possible that there’s some quirk with Chrome’s engine on that device (this is especially common with hardware accelerated rendering).

I have a few ideas that might help, but since this is a unique configuration with a community-released custom tile, I’m limited in the amount of time I can dedicate to this specific issue. Our focus is on enhancing our core software for the benefit of all our users. However, I encourage you to try some trial-and-error on your end. Here are some suggestions:

  • Try the separate simplified dashboard test mentioned in my earlier posts
  • Try other custom tiles (do they all do this?)
  • Try Chrome directly
  • Try a different browser (eg. Firefox?)
  • Search the web / rockchip forums for people with similar issues
  • Check advanced / hidden settings in chrome (eg. chrome://flags)

If you do find a solution, it would be great if you could share it with the community. It might help others with similar configurations. Thank you for your understanding, and best of luck with your troubleshooting!