Skip to main content.

PHP Web Cam Image Text Overlay Tutorial by Mike Challis

This is a 6 step tutorial on how I put weather text overlay on my web cam image. It is probably too complicated for many average users. If you already have a personal weather station, Weather-Display Software, a web cam, and a weather web site, then this tutorial might look interesting to you.

What do I use?

  • Davis Vantage Pro 2 Weather Station (Model 6163)
  • Weather-Display Software
  • Broadband internet connection.
  • Web cam installed on a personal PC. (my cam is a Logitech QuickCam Pro for Notebooks) and I use WinXP
  • Web cam software capable of uploading to a web site. I use webcamcapture.exe that is included within Weather-Display Software
  • Web server hosting account with PHP support
  • Ability to schedule a cron job from your web server or a scheduler program on a PC that can request a URL every 5 minutes.
  • Some knowledge of how to configure and upload a PHP script

Why I use it?
I put a weather text overlay on the web cam image with some of my weather station's data from a PHP script before I upload it. That can be all done from a windows PC with Weather-Display Software, but I prefer the flexibility of using my PHP method.

How do I use it?
I do the text overlay with my free Multifunction Image Handler PHP Script. See the Script and Live Demo here Image Handler Script

Step 1) Install Weather Display Software Weather-Display Software

Step 2) Setup your web cam software to take a snapshot at like every 5 minutes and configure it to upload it as webcamimage-plain.jpg to your web server. I use webcamcapture.exe that is included within Weather-Display Software. My cam image is 640 x 480, around 100k. Make sure you can now view your web cam image online at www.yourwebsite.com/webcamimage-plain.jpg

Step 3) Install Ken True's PHP Weather-Display tags feature and configure Weather-Display to upload the testtags.php to your web server every 5 minutes. The testtags.php will have the weather variables you can use on your web cam overlay text. If you are already using the Weather Display/PHP/AJAX Website Template Set then you can skip this step.

Step 4) Install my Multifunction Image Handler PHP Script: Just download the file, name it image-webcam-overlay.php

Adjust a few settings at the top just like this:

$ImageURL = 'http://www.yourwebsite.com/webcamimage-plain.jpg';
$localimgName = 'webcamimage-temp.jpg';
$outputimgName = 'webcamimage.jpg';
$download_setting = 1; # by last-modified

Leave all other settings as default unless you need to resize the image (you can come back and play with the font settings later)

Replace this:

$text1 = '';

With this:

include './testtags.php';
$timezone = date('T');
$temperature = preg_replace('/°F/', ' F', $temperature);

$text1 = "$time $timezone $date
$temperature, Rain:$dayrn, Wind:$avgspd, Max Gust:$maxgst
$current_summary
Long Beach, WA
www.642weather.com";

And now upload it to your web server.

Go to this URL in your web browser:
http://www.yourwebsite.com/image-webcam-overlay.php

You should see your web cam image with text overlay, like this:
Sample web cam image.

Adjust one more setting at the top of image-webcam-overlay.php just like this:

Change this:

$no_output =0;

To this:

$no_output =1;

And now upload it again to your web server. The $no_output =1; setting suppresses the image output for scheduled operation, makes it just save the file only.

Step 5) Schedule automatic timed updates: There are a few ways to do this, I use method 2

Method 1: If you already have weather-display software click on Control Panel | FTP & Connections | HTTP Download tab Click on #1,#2 or #3 setup button | switch on the button for "downloads on | enter your image-webcam-overlay.php url in the box called "URL of file to be downloaded" | click "add to list" | check the tick that says "Tick if text file" | enter image-webcam-overlay.txt in the box that says "Local filename to be downloaded" | click "add to list" | click "download every 5 minutes" | click "save now" | click OK

Method 2: Schedule a server cron job to run this php file every 5 minutes.
(this example requires shell access, there are other ways using control panels, ask your web host how to use cron)
Example using crontab -e: (first change /path/to/ to your server path)
1,6,11,16,21,26,31,36,41,46,51,56 * * * * php /path/to/image-webcam-overlay.php 2>&1 > /dev/null
Simple guide to crontab usage at cron - Wikipedia

Method 3: Use Scheduled HTTP Request - Windows Task Scheduler to make a HTTP Request to the URL http://www.yourwebsite.com/image-webcam-overlay.php every 5 minutes

Step 6) You can now find your web cam overlay image at this URL: http://www.yourwebsite.com/webcamimage.jpg


Related Topic: How To Upload Your Web Cam Image to Weatherunderground
Related Topic: How To use my Web Cam History PHP script to make a web cam image history thumbnail page

Discuss this tutorial here | WunderCam Directory | More Weather PHP Scripts

Gratuity


If you find this site or the free PHP scripts useful to you, please consider making a small donation to help offset my time and the routine expenses of operation of this website. Thanks for your kind support! - Mike Challis

This php code provided "as is," and Long Beach Weather (Michael Challis) disclaims any and all warranties, whether express or implied, including (without limitation) any implied warranties of merchantability or fitness for a particular purpose. Use of this code signifies your acceptance.