Skip to content
webcam.io

Text overlays

Adding static text

With static text overlays, you can add your brand name, website url or short description to the corner of the webcam image.

And there is the overlay timestamp showing the image capture time in your timezone.

Text overlay settings can be found in the webcam settings (webcams list -> edit..) ‘text overlays’ section (outdated screenshots):

overlay setting

The new images will have the text overlays. Lazy turtle result:

overlay example

Dynamic Text Overlays

With dynamic text overlays you can change texts for every image to i.e. add displaying temperature to your webcam images.

Updating the data is possible by calling our API (push mode) or by setting up a website with text data (pull mode).

To set up dynamic texts go to your webcam settings page and open the “Text overlays” section. Dynamic text are inserted by using variables in the text field. This will insert the current time:

dynamic overlay settings

Custom texts can be set using one (or both) of these ways:

a) Sending data to the API

You have two variables that can be modified using the API:

{dynamic1}
{dynamic2}

Insert them into the text fields and use something like the curl command for an API call:

curl -H 'Content-Type: application/json' \
     -H 'X-Auth-Email: YOUR@EMAIL' \
     -H 'X-Auth-Key: SECRET_KEY' \ 
     -X PUT -d '{"dynamic_text1":"","dynamic_text2":""}' \
     "https://webcam.io/api/webcams/WEBCAM-ID"

This is an example call:

curl -H 'Content-Type: application/json' -H 'X-Auth-Email: contact@webcam.io' -H 'X-Auth-Key: 22l7kIX0AwdMcdpo7vlL'  -X PUT -d '{"dynamic_text1":"temp: 10°C hyg: 50%","dynamic_text2":"wind: NE"}' "https://webcam.io/api/webcams/m7g61z"

You get your Secret API key from Profile settings. If no key is shown click on ‘create’. The webcam-IDs are listed on your webcams page.

The API call sets the variables to be used for the next image.

b) Fetching data

Another way is inserting the text data from a website. In example an updating weather data page data.txt with the content:

temp: 10°C

The variable in webcam.io for this example:

{url:http://your-domain.com/data.txt}

Hints:

  • The website should contain text only. HTML tags are removed and this leads to strange results.

  • The fetch is triggered during the image processing, so it is synchronized with your snapshot/upload interval. To keep up with the 15 second image fetch interval there is a timeout of 6 seconds and data is limited to 240 chars.

  • If there are errors, nothing gets inserted. If you have strange text results please check the URL in source code mode in your browser and check if the website is fast enough.

Summary

For now there are these dynamic text variables:

{timestamp} 
{url:<URL>} 
{dynamic1}
{dynamic2}

You can always use the ‘Image Preview’ button to see if text content and positioning/size looks ok.

And do not forget to save the settings when everything is ok.