Add Refresh timer to Custom Tiles and ,
Add similar additional options as in Media tiles also to custom tiles.
Now Custom tiles looks like that:
I’m suggesting to look like that , and I know custom tiles are treat in different way:
I’m using weather tile based on https://weatherwidget.io/ which support my language (Hebrew), have animations, have each city in my country, and looks great. But no way to update, only by refresh the page…
Thanks for the feedback! In general, these features would be up to the Custom Tile developer to implement.
–
Thanks for sharing the example use case with WeatherWidget.io – in that case, I assume you’re using the URL option for Custom Tiles directly. You may be interested in using the Refreshable URL Embed custom tile. The Refreshable URL Embed custom tile is like the normal URL custom tile option, but adds a setting for periodically refreshing the URL.
Sorry Josh,
this isn’t good enough i’m using a geberated code and not a URL .
My generated code looks that:
Unfortunately it’s not quite as simple as just adding a refresh in that case.
I took a quick look at the code generated by WeatherWidget.io and it looks like you could add something like the following to tell it to periodically refresh (or reinitialize) the weather data:
const REFRESH_MINUTES = 60 * 24; //every day (60 minutes * 24 hours = total minutes in a day)
const REFRESH_INTERVAL = REFRESH_MINUTES * 1000; //convert to milliseconds for scheduling
//schedule the period refresh / reinit
setInterval(function(){
if(__weatherwidget_init != null) __weatherwidget_init()
}, REFRESH_INTERVAL)
This snippet is setting some variables to determine how often we refresh (every 24 hours in this example). Then scheduling up a function that calls the Weather Widget initialization method __weatherwidget_init() which gets added with your example widget.
So your final custom tile would look something like:
<style>
html, body { margin: 0 }
</style>
<a class="weatherwidget-io" href="https://forecast7.com/he/31d8934d81/rehovot/" data-label_1="רחובות" data-label_2="מזג האוויר" data-mode="Forecast" data-days="5" data-theme="pure" >רחובות מזג האוויר</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
//INSERT THE SPECIAL REFRESH FUNCTION HERE
const REFRESH_MINUTES = 60 * 24; //every day (60 minutes * 24 hours = total minutes in a day)
const REFRESH_INTERVAL = REFRESH_MINUTES * 1000; //convert to milliseconds for scheduling
//schedule the period refresh / reinit
setInterval(function(){
if(__weatherwidget_init != null) __weatherwidget_init()
}, REFRESH_INTERVAL)
</script>
Works Great !! I’m getting refresh every 15 minutes. (changed 60 to 15).
Thanks a lot really helpful. I don’t have knowledge in JSON (I think that’s the code script… sorry if I’m wrong), I couldn’t done this without you…
BUT what about the addition to custom tiles to have Media Scaling and Media Position. I’m missing this two wonderful setting in Custom Tiles…
Can you share more details about what you are trying to accomplish?
–
As the name of those setting imply, they’re specifically for ‘media’ (eg. images) as browsers have some features for scaling images.
There’s not really a standard equivalent for HTML since HTML can by highly dynamic and responsive by nature. With an image, you get a fixed shape that you can scale up or down. Most modern HTML is responsive in nature and might rearrange or reorganize things as it gets scaled up or down. Your weather source is actually a perfect example of this:
As you can see from the demo above, the weather source actually changes the way the content is laid out based on the dimensions. So using a ‘traditional’ method of scaling things up might have unintended consequences. All that being said, I’m interested in better understanding what you want to accomplish as there might be a solution that works with your specific use case.
Keep in mind that the value is in minutes, but it’s multiplied by 24 in the example I provided.
60 minutes × 24 hours = 1 day (in minutes)
const REFRESH_MINUTES = 60 * 24; //every day (60 minutes * 24 hours = total minutes in a day)
// ↑ ↑
// minutes hours
So changing the 60 to 15 is ¼ of the original time = ¼ of a day = every 6 hours
Got you… I changed this number simply to 15.
And I was unable to do scaling in the custom tile preview. I never got the arrows that you showed in the movie.
It was just a demo showing that your weather source responsively adapts to the size of the tile. It’s roughly the same thing as just using different tile sizes (I just wanted to show it briefly in one video so I did it with a fancy trick)
The questions still stands though - what are you trying to accomplish with something similar to media scaling and media positioning for this particular weather source? Especially considering the content adjusts and adapts based on the size of the container holding it.
I want to fill the whole tile. look at the picture below, I put arrows where I want the tile to end , which is the border of the tile (it can be seen a thin black frame in the border)
That’s a result of the weather site that’s being used. For whatever reason, it seems like they have certain ‘breakpoints’ at which they change the layout… but for whatever reason they don’t try to fill the full size of the window (or tile in this case).
While I think there’s probably something that could be done, I think you’re fighting an uphill battle at this point.
Have you tried the weather widgets in this thread:
It looks like OpenWeatherMap (the underlying weather data source for the custom tile) has weather data for your area https://openweathermap.org/city/293725
I tried it… But I like https://weatherwidget.io/ better.
Better Hebrew support, better icon and color customization, Animations.
If no scaling and filling exist, I will trail and error until I find the best size for me…
Hopefully you’ll add this features in future for custom tiles as well…
The Weather Widgets developer updated the custom tiles with additional language support at one point. You might consider posting in his thread if you have any suggestions or requests around language, icons, or other improvements. 
–
With custom tiles, it’s really up to the tile developer to implement it. As noted above, there’s no standard way to add generic scaling/position for HTML custom tiles – instead it should be done by the developer unique to their content. You could reach out to the weatherwidget.io team with the suggestion.
Just raising this up…
Hopefully someone else will also like this feature. Adding Refresh, Scaling, and Content Position for Custom Tiles will be great addition
As noted in the discussion above, scaling and positioning would fall within the responsibility of the developer of the Custom Tile – there’s no standard way to manage it at the platform level and it’s much better suited to be implemented by the developer of the custom tile.
If it’s for the weather example, I would suggest trying a purpose-built integration like the Open Weather Custom Tile:
