Category Archives: Code

Automatically Upload Photos to Flickr

Here’s how this will work: you’ll plug in your card reader or digital camera and all your photos & videos are automatically copied to the folders of your choice in about 3 to 5 seconds. Once the photos are copied to the PC, they are automatically removed from the card (this is optional, but recommended). After they have been deleted from the card, they are automatically uploaded to your Flickr account (as private, public, tagged, not tagged, whatever). All in the background without you having to do a thing.

I set this up because my photography workflow had turned into something horrid: I have two digital cameras that we use. One of the two has video, but I don’t use Flickr for my videos, I use Motionbox. So to get photos or videos off the cameras involved the following:

  1. Plug in each card
  2. Copy the pics from the card to the PC, name the folders, etc
  3. Copy the videos to the My Videos folder
  4. Delete the photos & videos from the card
  5. Use the Flickr Uploadr and hope it successfully uploads all the pics
  6. Upload videos to Motionbox.
  7. Come back later and delete the photos & videos off the PC after they got uploaded

I decided to put a little thought into it and get a better setup. I now do the following:

  1. Insert flash card into card reader right after taking pictures – pictures & videos download automatically in less than 10 seconds – card automatically formats (optional, but recommended)
  2. (photos are now uploading to Flickr in the background – so I leave :) )

I’ve completely eliminated my involvement with the computer. I simply plug in the card reader (or camera) and the computer takes care of the entire process of copying the photos over to the computer, then deleting them from the card. It then automatically uploads the photos to Flickr as private. All in the background without any of my involvement.

You can modify the batch file to upload all photos and videos to Flickr.

There are several steps you’ll need to take in order for the process to be completely automatic. Here is an outline of what all is involved. Start to finish the process takes about 15 minutes.

  1. Give Digital Cameras persistent drive letters (E:, F:, G:)
  2. Download Python
  3. Download the “Uploadr” python scripts
  4. Download the batch file for your camera
  5. Install TweakUI and add Batch file to the AutoPlay menus
  6. Configure AutoPlay for your digital camera
  7. Test it out

First Step

Give Memory Cards and Digital Cameras persistent drive letters (E:, F:, G:)

In order for you to be able to reliably copy images from a particular card or device, you should set it up so that every time you plug in the device it uses the same drive letter. With your memory card or device plugged in, right click My Computer and select Manage:

my_computer_manage

Select Storage ⇒ Disk Management (see picture)

In the right panel, your devices will be listed, probably with letters like E, F or G. Do not change the drive letter of the C: drive, and you probably shouldn’t change a D: drive if you have one either. Right click on the flash drive that you need to change and select Change Drive Letter and Paths: (see picture)

The next box shows you the letter that is already assigned. Just click Change:
change_drive_letter_box

This box will ask you what letter you want to assign to it. I start from the bottom, in this case, Z: (see picture)

It will ask you to confirm this. Click Yes. (see picture)

Repeat this for each card or camera that you would like to setup for this.

Now if you go to My Computer, your drive letters should be updated to the new letters.

Next Step

Download Python

Replace Text on Click Using JavaScript



This tutorial will show you how to replace text with text by using JavaScript. The text that you click will be replaced with new text. Specifically, we will use JavaScript to hide one div and show another in it’s place. Here is a demo:


JavaScript does the magic behind the scenes. The way you accomplish this is by putting your two text fields into divs. I’ll set the first one to be visible, then when you click on it, I will hide the first and show the second in its place. I use the style.display feature of JavaScript to change whether or not it is visible or shown. Let’s take a look at the JavaScript:

<script type="text/javascript">
 
function toggle_text(shown, hidden) {
       var e = document.getElementById(shown);
       var f = document.getElementById(hidden);
    if(e.style.display == 'inline') {
			e.style.display = 'none';
			f.style.display = 'inline';
	}
	else {
			e.style.display = 'inline';
			f.style.display = 'none';
	}
}
</script>

I’m simply passing in the two divs to the JavaScript function, then JavaScript checks whether or not the first div (the shown div) is visible or not. If it is visible, it hides it and shows the hidden one. The opposite happens if it isn’t visible. Note that using inline will display your text on the same line. If we wanted it to be on its own line, we could just use block instead.

Now you just need to insert the divs into the body of the page. Here is the code used from the sample above:

<div id="shown_first" style="display:inline">
	<a style="cursor:pointer" onclick="toggle_text('shown_first', 'hidden_first')">
	Click me
	</a>
</div>
<div id="hidden_first" style="display:none">
	<a style="cursor:pointer" onclick="toggle_text('shown_first', 'hidden_first')">
	I used to be hidden!
	</a>
</div>

Display the Contents of a File Using PHP

How to Display the Contents of a File Using PHP

PHP has a built in function to display the contents of a file. This is helpful if you want to update a webpage to reflect some data that is regularly updated or output to a file. It is also helpful if you have access to the web server and it is easier for you to update a text file than it is to edit html. Simply point your webpage to the text file and the contents of the webpage get updated automatically.

Here’s how it works:

<?php 
echo file_get_contents('http://brockangelo.com/uptime.txt'); 
?>

Easy enough. I used to have a message in the footer of this webpage that said “This server has been up for 14 days, 7 hours, 22 minutes.” All that was doing was reading the contents of the text file that got updated every hour.

How to Display Your “Uptime” using Bash

Bash is a powerful scripting tool and comes in handy on more than one occasion. Here is a fun one: Write your server uptime to a text file so that you can display it on a webpage.

#!/bin/sh

# get the uptime data
days=$(uptime | awk '{print $3}' | sed 's/,//g')
hours=$(uptime | awk '{print $5}' | sed 's/,//g')
label=$(uptime | awk '{print $4}')

if [ "$days" = 1 ]; then
day_label='day'
else
day_label='days'
fi

#format labels
if [ $hours = 1 ]; then
hour_label='hour'
else
hour_label='hours'
fi

#format output
if [ "$label" = 'mins,' ]; then
echo 'This server has been on for '$days minutes'' > /var/www/uptime.txt
elif [[ "$label" = 'day,' || "$label" = 'days,' ]]; then
echo 'This server has been on for '$days $day_label, $hours $hour_label'' > /var/www/uptime.txt
elif [ "$label" = '2' ]; then
echo 'This server has been on for '$days hours'' > /var/www/uptime.txt
fi

Show Forms When Radio Button is Clicked

I’ve been using my Javascript a bit more than usual as I’ve been writing the Google Chart Generator plugin for WordPress. Here is one that I think gives an awesome effect. You click a radio button or a checkbox and a form element shows up that wasn’t there before. This is helpful for Google Charts because datasets are only available for some types of charts. So it is easier for the user if they don’t show up unless they are needed. Here’s how it’s done:

Create a function inside your javascript tags in the head of your page. This checks to see which radio button was checked. If it is a pie chart, it shows the pie chart entry form and hides the line chart entry form. (and vice-versa) The “chart_type” gets passed in by the form (see below):

	function gcg_radio_check(chart_type) {
	
	if (chart_type == "p3") {
	document.getElementById("pie_chart_data").style.display = "block";
	document.getElementById("line_chart_data").style.display = "none";
	}
	if (chart_type == "lc") {
	document.getElementById("line_chart_data").style.display = "block";
	document.getElementById("pie_chart_data").style.display = "none";
	}
     }

Now we need to create our form element, and pass the chart_type value to javascript so it can decide what to do. We do this by passing “value” in the function parameter.

<form>
<input type="radio" name="gcg_charttype" onClick="gcg_radio_check(value);" value="bhs">Bar Chart<br />
<input type="radio" name="gcg_charttype" onClick="gcg_radio_check(value);" value="lc">Line Chart<br />
</form>

So if I clicked the radio button for “Bar Chart”, it passes this to javascript: gcg_radio_check(bhs)

Lastly, we need to create the form that will be displayed once we click the radio box. I set it to display:none so that it is hidden by default:

<div id="pie_chart_data" style="display:none">
	<h3>Data Points</h3>
	<table>
		<tr>
		<input type="text" size="4" name="gcg_chartdata" value=""> Data1 
		<input type="text" size="6" name="gcg_data_color" value=""> Color		
		<input type="text" size="10" name="gcg_labels" value=""> Label<br />
		</tr>
	</table>
</div>

Then repeat this for the line chart and any other forms you want to hide or show.