Media Tile Generator (MTG jggdev): Weather, Calendar, News


Adding To ActionTiles:

Once you have determined the exact formatting that you wish to use, copy the URL including parameters and then: Go to https://app.actiontiles.com/media (you must have an account and be logged in to view this page) Click on the Plus symbol in the bottom-right-hand corner of the screen to add new media. Select ‘This Media is a still image or GIF’ Enter the URL in the URL field.


1. Weather Image for ActionTiles

Introduction

ActionTiles is a great interface for managing and controlling SmartThings. Having previously created Below are details for a Weather image. The dynamic image can be found at https://mtg.actiontiles.com/weather.php

Although it has a php extension the page returns a PNG image.


Parameters / Customising the look

Users can pass formatting options as URL parameters to override the default format.  For example:

https://mtg.actiontiles.com/weather.php?backgroundColor=FFFFFF&bodyColor=00FF00&titleColor=000000

Colors are entered as hex values (without the # symbol – using a # symbol will cause formatting requests to be ignored). The above sets the background color to white, the body color (the weather details) to green and the title (location name) color to black.  The full list of parameters is shown below.

  • layout – The size/proportion of the tile. Matches ActionTiles values. Valid values are 1×1, 1×2, 1×3, 2×1, 2×2, 2×3, 3×1, 3×2, 3×3  (3×2 is default).
  • backgroundColor – the background color of the image.
  • titleColor – the color of the title containing the location name.
  • bodyColor – the color of the text and icons showing the weather forecast.
  • loc – the location for which you want the weather.  Accepts zip/postal codes and city/town names. It is recommended that you use a country code (see below) if outside of USA.
  • country – the country of the location. This is given as a two letter ISO code. See http://www.nationsonline.org/oneworld/country_code_list.htm.
  • units – whether to show temperature in metric or imperial units.  Acceptable values are metric and imperial. Imperial is default.
  • static – (valid values – true or false) by default the image will ‘page’ through an extended forecast.  If you wish to have the image fix on the first ‘page’ of the forecast use static=true. False is default.


For non-USA Cities, pre-test / verify that the "loc" value works on  https://openweathermap.org then used that location in the URL for example https://openweathermap.org/city/2641589 and therefore https://mtg.actiontiles.com/weather.php?loc=Newquay,GB  etc



2. Calendar Image for ActionTiles

Introduction

ActionTiles is a great interface for managing and controlling SmartThings.  In a Facebook discussion someone had mentioned that they’d love to have a calendar appear in a tile with the current date highlighted.  As ActionTiles only allows linking to images and videos on external sites I thought I’d have a quick go at creating a calendar image with some customisable features. The result can be found at https://mtg.actiontiles.com/calendar.php

Although it has a php extension the page returns a PNG image.

Parameters / Customising the look

Users can pass formatting options as URL parameters to override the default format.  For example:

https://mtg.actiontiles.com/calendar.php?backgroundColor=FFFFFF&bodyColor=00FF00&titleColor=000000

Colors are entered as hex values (without the # symbol – using a # symbol will cause formatting requests to be ignored). The above sets the background color to white, the body color (the numbers representing days of the month) to green and the title color to black.  The full list of parameters is shown below.

  • layout – The size/proportion of the tile. Matches ActionTiles values. Valid values are 2×1, 3×2, 3×1, 1×1, 2×2, 3×3  (3×2 is default).
  • backgroundColor – the background color of the image.
  • titleColor – the color of the Month and Year title.
  • headerColor – the color of the S, M, T, W, T, F, S headers representing day of the week.
  • bodyColor – the color of the numbers representing the days of the month.
  • todayTextColor – the color of the number that represents today’s date.
  • todayHighlightColor – the color used to highlight today’s date.
  • month – If you wish a different month to be shown you may pass it in as a number (ie 1 for January, 2 for February etc).
  • year – If you wish a different year to be shown you may pass it in as a 4 digit number (ie 2016, 2015, etc).
  • tz – the timezone to use when determining current date.  Acceptable values are any of the standard PHP timezones listed here.



3. News Feed Image for ActionTiles

Introduction

ActionTiles is a great interface for managing and controlling SmartThings. Having previously created a webpage that delivered a calendar image for use in ActionTiles I thought I’d have a go at creating some more ‘dynamic’ images. 

Below are details for a News Feed image.  The dynamic image can be found at https://mtg.actiontiles.com/news.php

Although it has a php extension the page returns a PNG image.


Parameters / Customising the look

Users can pass formatting options as URL parameters to override the default format.  For example:

https://mtg.actiontiles.com/news.php?titleColor=00FF00&bodyColor=ffffff&backgroundColor=000000&src=bbcsoccer

Colors are entered as hex values (without the # symbol – using a # symbol will cause formatting requests to be ignored). The above sets the background color to black, the body color (the headlines) to white and the title (feed name) color to green.  The full list of parameters is shown below.

  • backgroundColor – the background color of the image.
  • titleColor – the color of the title containing the feed name.
  • bodyColor – the color of the news feed headlines.
  • static – (valid values – true or false) by default the image will ‘page’ through an extended forecast.  If you wish to have the image fix on the first ‘page’ of the forecast use static=true. False is default.
  • speed – the number of seconds to display each page.  Will only work if static is not set to true.
  • src – the news source to display.  Current valid values are:
    • CNN
    • AP - Associated Press
    • NPR - National Public Radio USA
    • FOX - Fox News
    • NYT - New York Times
    • NYTWORLD - New York Times World (default)
    • NYTBUSINESS - New York Times Business
    • USATODAY (USA Today)
    • BBCNEWS (BBC News)
    • ESPN (ESPN Top News)
    • ESPNNFL (ESPN NFL News)
    • ESPNNBA (ESPN NBA News)
    • ESPNMLB (ESPN MLB News)
    • ESPNNHL (ESPN NHL News)
    • BBCSPORT (BBC Sports News)
    • BBCSOCCER (BBC UK Soccer News)
    • LIFEHACKER
    • Your custom source using the steps below

Using a Custom Feeds Source

This feature is still in development and is slightly clunky but should work for most RSS feeds. Get the URL for the feed you want to use and visit https://www.base64encode.org/  Then enter the RSS Feed URL in the top box and hit Encode.  You’ll get a string of characters in the bottom box that you can copy and use as the src variable in your call to this news page.  For example:

               Image 1902   

Used in the call to the news image creator you would have a URL like:

https://mtg.actiontiles.com/news.php?titleColor=00FF00&bodyColor=ffffff&backgroundColor=000000&src=aHR0cHM6Ly9mZWVkcy5mZWVkYnVybmVyLmNvbS9UZWNoQ3J1bmNoLw==


Further information will be added to this Article or to linked Forum Topics from time to time.

These widget image generators and instructions were originally produced and published by John Griffiths at: http://jggdev.com/category/atiles/


This article was helpful for 204 people. Is this article helpful for you?