Images on media tiles are not loading on Google Chrome browser on PC, however they load on the phone browser. When I try to edit those "Media" tiles, it says "Enter valid URL". Please note that the URL is valid and that media tile is showing correctly on the Android phone browser (Google Chrome). It is happening with all media tiles on the PC browser. It used to work fine till last week on PC as well as on phone. Please help, thanks in advance.

I spent some time this week trying to figure out how to add stock data as a media tile and thought I'd share what I learned. There are a few steps involved and it's not as simple as I initially hoped, but it's also pretty flexible and could easily be expanded to other uses. Essentially, this can turn any Google Sheet into a media tile, so it can be used for much more than stock data.

Background

This started by wanting to display stock tickers as a media tile. I first came across a great post on being able to turning any json data into a badge, but this had the limitation of only being able to display one piece of data. I wanted to be able to display a few different tickers in one tile.

https://support.actiontiles.com/en/communities/12/topics/2707-live-traffic-travel-time-tile-image-from-query-text-using-shieldsio

(As an aside, Google provides instructions for getting JSON feeds from spreadsheet data: https://developers.google.com/gdata/samples/spreadsheet_sample)

I also came across this post explaining how to create a media tile from a stock chart, but that also wasn't quite what I wanted: https://support.actiontiles.com/en/communities/12/topics/3014-stock-ticker-tile

Part 1 - Create a public link to Google Sheets data

Example spreadsheet - https://docs.google.com/spreadsheets/d/1Id-49n-MnAG6MpzrI3WKAuXXaosg7WVR6PFBIhh8ryY/edit#gid=0

First create a spreadsheet that contains whatever information will be displayed in the tile and share it (File->Share) so it doesn't require a login to view. Then take the spreadsheet ID (the long string in that URL) and sheet ID (the part after gid=) from the link to that sheet and insert them into this link below. You can also specify a range of cells if you only want to use a portion of the sheet. (Reference)

https://docs.google.com/spreadsheets/d/SpreadsheedID/pubhtml?single=true&gid=SheetID&range=D15:E15&widget=false&chrome=false&headers=false

For this example, the link is:

https://docs.google.com/spreadsheets/d/1Id-49n-MnAG6MpzrI3WKAuXXaosg7WVR6PFBIhh8ryY/htmlembed?single=true&gid=0&range=A2:C5&widget=false&chrome=false&headers=false

This link can be used to create an iFrame tile under "My Shortcuts" in ActionTiles and you can stop here if that's all you need. The main shortcoming is that shortcut tiles don't auto update until you refresh the browser. You'll also need to adjust the width and height of the cells so that it fits well into the tile. 

If you want the tile to update without refreshing the browser and adjust its size automatically to fit the cell, then it needs to be turned into an image that can be used for a media tile which has a refresh rate.

Part 2a - create an image to be used as a media tiles

This part requires running a couple command line tools on a Linux server. I have a Raspberry Pi set up that I use for this.

The first tool is wkhtmltoimage which converts any webpage to an image. This supports creating svg, jpg, bmp, or png images. I found that svg is the best quality. The command is:

wkhtmltoimage --crop-w 224 --crop-h 112 --height 1024 "$imgURL" $outFile.svg

crop-w - the width of the spreadsheet range

crop-h - the height of the spreadsheet range

height - this just needs to be larger than crop-h. I found that the default value used was too small

imgURL - the public link to the spreadsheet URL

outFile - where the resulting image is stored

Here is the command I use for this example which outputs the image in a file called stock_example.svg

wkhtmltoimage --crop-w 224 --crop-h 112 --height 1024 "https://docs.google.com/spreadsheets/d/1Id-49n-MnAG6MpzrI3WKAuXXaosg7WVR6PFBIhh8ryY/htmlembed?single=true&gid=0&range=A2:C5&widget=false&chrome=false&headers=false" stock_example.svg

Part 2b - Create a link to the image

Now I use rclone to add the image to my Google Drive, but this also supports other services like Dropbox and Amazon Drive. (If you have your own web server, you could also just copy the file there and not worry about using rclone.) The command for rclone is:

rclone copy <outFile> <driveName>:<folder>

outFile - the path to the image that was created in the last step

driveName - this should be the name of the drive you set up when configuring rclone

folder - the name of the folder on my Google Drive where the image gets saved

For this example (with a drive gdrive and folder ActionTiles) the command is:

rclone copy stock_example.svg gdrive:ActionTiles

Part 2c - Automatic updates

Note: Here I explain how to share the image using Google Drive, but this could also be done with any service that rclone supports like Dropbox or Amazon Drive.

The last step is to automate all of this so that the data is updated periodically. To do that, I put the wkhtmltoimage and rclone commands into a script called updateStocks.sh and then set up a cron job to run at the desired interval. Here's my cron entry which runs every 10 minutes while the market is open (9-4 Mon-Fri)

*/10 9-16 * * 1-5 /home/pi/actiontiles/updateStocks.sh

Then in Google Drive, you need to share the image publicly and you'll get a link like this:

https://drive.google.com/file/d/15bxoWJeH4fbyzUz9G44I72Tly4nE0fkt/view?usp=sharing

The direct link to the image takes the below format, inserting the proper ID:

https://drive.google.com/uc?id=IMG_ID

So in this example the direct link to the image is:

https://drive.google.com/uc?id=15bxoWJeH4fbyzUz9G44I72Tly4nE0fkt

Then in ActionTiles, use that link for a media tile and set the refresh 600 seconds (or whatever refresh rate you prefer).

Some final notes

• One of the coolest parts of this is that any changes you make to the spreadsheet (values, colors, size, etc.) will automatically show up in ActionTiles. No extra steps are needed after the initial configuration.
• The width and height of the cells in your spreadsheet should be modified so that they fit nicely in a tile
• I also made the background color of my cells match the color used by the ActionTiles theme
• When generating the .svg image, thin cell borders are added. I haven't found a way to get rid of this
• wkhtmltoimage seems to cache the site. Sometimes it takes a few minutes after updating the spreadsheet before the image produced from this tool is updated

If you made it this far, thanks for reading. Please comment if you have any questions or come up with other ideas of how to use Google Sheets to create interesting tiles!

Media tile that can be configured with two or more URL’s such that the tile rotates among the multiple images every ‘n’ seconds. Would enable rotating among multiple video cameras on a single tile, or rotating between video camera and weather images, for example. 

For anyone else who is interested, I wanted a way to have photos load directly into a Media Tile, but I wanted it to change or randomize based on my own intervals.  I put together a script that I run every 10 minutes on my local Synology which looks at my photo folder, randomly selects a picture, saves it to a local folder with a set filename, and I can then point the Media Tile at. 

The Media Tile can be pointed at a static URL, and in the background the script does all the heavy lifting.  The tile just needs to know how often to reload which is dependent on how often you run the script to change the photo.

Explanation: https://www.sleepyweim.com/2019/06/08/actiontiles-picture-tiles-that-change/

Script: https://www.sleepyweim.com/2019/06/08/python-picture-tiles-that-change/

Let me know if you have any comments or questions.

- Thy

New to ActionTiles and I can't seem to figure out how to get my Bloomsky Weather Picture to show up? I have it setup as a device in SmartThings and I am getting the readings from the Bloomsky but I don't see where I can add the image. Is this possible?

First, if this type of post isn't permitted please remove it, thank you.

I’m working on a simple application (it's free) that works like a web server for photos for ActionTiles. Basically you copy this application into a directory and point an ActionTiles Media Tile to the applications IP address.  The Application will serve up either a specific requested photo, or if you specify random.jpg it will serve a random photo from the directory.

You can also (optionally) specify different directories for different tablets etc.  So you could have vacation photos served to the kitchen tablet, while your spouse gets photos of the kids and the garage tablet shows hunting and car photos all while the ActionTiles media tile points to a single local Web URL.

Photos can be: jpg, jpeg, gif and png.

Example directory layout:

The Application Interface:

If anyone has an interest in this local photo server and wants to help in beta testing this please let me know.

I’m working on this in my spare time so response from me could be slow at times as I work full time.

What this program doesn’t do:  

Slideshow the photos in sequence (they are randomly presented).

Access directories outside of its own directory.

Charge for it's use (It's beggar ware)

Have an Apple version.

Thank you,

Jay

Every once and awhile a camera goes offline and displays a broken image..

Would it be possible to add something along the lines of:

<img src="imagenotfound.gif" alt="Image not found" onerror="this.src='imagefound.gif';" />

Apologies if this kind of post isn't allowed; admin, please delete if so.

I have several tablets mounted to my walls, each displaying a slideshow using ActionTiles. If you are in a similar situation, you looked for a method to return a random image from a specified folder in response to an http request. ActionPixx (http://jayhobo.com/actionpixx) does a good job with this (and a lot of other stuff too!), but it repeats images. I was looking for a solution that guaranteed each image would be displayed at least once before any repeats.

ByteCave Image Server (BIS) is a FREE open-source mini webserver that sends a random image to your browser when a client sends any GET request. You provide a recursively processed folder containing the images to display. Those images are then shuffled and never repeated–on a per client connection basis–until all images have been displayed once. The process then repeats itself for subsequent image requests.

You can specify different folders for each IP address connected through easy UI controls. Thumbnails show you which images are being served. The program can auto-launch on login, minimize to tray, and will remember your settings and numbers of images displayed each time you start.

BIS is a small (~600K) standalone, multi-threaded executable: no installation is required and it doesn't depend on any other system files or DLLs. It supports Windows XP and later, and can also be compiled as-is to run on Linux too. You can view the source code, or just compile it yourself!

PureBasic source code and binaries for both version 1 and version 2 are on GitHub. You can find download and GitHub links on my webpage: http://www.bytecave.net/software.

<keywords: images slideshow image server slide show>

Scenario:

Kiosk Brower

Screensaver with Dakboard

Action Tiles with Media image (refresh every 5 seconds)

The Media image does not refresh anymore after leaving screen.

This was working...

If I try in Chrome works fine. Anyone with same issue?

I wanted to create a thread with the Shields.io interface for folks to share their thoughts and ideas. I really enjoy this method of creating image tiles as it is very dynamic and versatile.

First and foremost, we need to understand what shields.io is. https://www.shields.io/ is a website hosting a free and open source web app capable of making "badges" utilizing API integration for dynamic text display. I've so far only seen one awesome idea with shields.io using ActionTiles, but it turns out it works perfectly for our Media Tiles! The only downside is the amount of text being displayed. I would not recommend any more than four 4-letter words, as any more than that generates an image with text too small to read and with great length it looks horrible. 

• Traffic Time In A Tile

I will update this thread as new ideas are added. Please do not discuss in this thread those ideas, instead, please create a new thread, discuss the idea there, and I will add it's link here. Thanks!!

Hi

Got my Skybell connected (thanks). It now shows the camera icon and when I push it it says "capturing image". This is great but all I see is the default camera icon. It never showst the image from the camera. 

I thought actiontiles showed me the captured image on the dash? I don't have an image just an icon. I know skybell won't send actiion tiles a live feed video. 

I wrote a script for creating a countdown image.  I wanted to be able to supply a date (or dates), and then have a countdown that updates each day.  You do need somewhere to run the script and a PC that can be a web server (most can do this without to much issue). 

You can pick the date, adjust the font, the font size, and even add a background image to the tile if you want.  

https://www.sleepyweim.com/2019/06/01/actiontiles-countdown-image/

Does anyone have a link for a graphic that indicates the sunrise and sunset times, and perhaps the location of the sun on its arch through the sky?

Is it possible to add a stream of photos to a tile?

I have photos in Apple iCloud and would like to have a rotation of images in a tile next to some Smartthings controls to build a dashboard come photo frame.  

I have tried the urls for the shared iCloud albums, and also the urls for a DakBoard i also use, but i can't get ActionTiles/Smartthings on the same screen.  

Any ideas?

Thank you

I have an odd issue where one of my links to a media image won't work in Fully Kiosk. Works in Chrome (top image). Any ideas?

I've got a couple of media tiles (static image with 10s refresh time). I've noticed that when I first load up the panel the initial image is one from several days ago - it takes until the first refresh (i.e. 10 seconds) to load the correct image. Also, every so often on a refresh cycle it reverts back to the 'old' image for one cycle, before properly refreshing again.

I have a media tile for national radar and it doesn't seem to update on its own. If I refresh the browser it updates but not otherwise. The one on the left is SmartTiles and the right is ActionTiles, screenshot taken side by side. I have tried adjusting the refresh rate without any luck.