search and fetch

Over the years I’ve been very keen on Creative Commons and using CC material in blog posts by pupils.
Pupils (and adults too) find attribution difficult.

Back in around 2008-2009 I made A flickr CC search toy aimed at pupils, to help them attribute. Later I added a feature that stamped the image with the attribution, which hopefully was easier than embed code. Later again, in 2010 I made FlickrStampr the same sort of search but squarely aimed at users of iPod Touches. At the time I believed that iPod Touches would be big in schools (Lot of ipodtouch posts here).

Both of these webpages were knocked up fairly quickly and had various modifications over the years. A couple of years back I made the iPod size one a bit more responsive so that it displayed a little better on an iPad or computer. I’ve now taken this and worked on it a bit more with the intention of replacing both of the above pages.

Earlier this year Jo Badge pointed me towards Photos For Class which is a very similar beast, except that it is built by professionals. I wonder if I inspired them?

So over the last couple of weeks I’ve been updating a new version: FlickrCC Stampr combining and improving (I hope) the two pages.

This new one will search flickr for cc images and then give you a stamped version or embed code. If this new page works out I’ll redirect the old pages to is soon.

I got boost to my interest in this playing with Alan’s flickr attribution helper: Now Three Flavors of Flickr CC Attribution Helper. I found out how to and added the code that gets all available sizes from flickr and lets you embed or stamp any particular size.

fcc

 

If you have an interest in this sort of thing, please give  FlickrCC Stampr a try. I’d be interested in any feedback.

A few years back I used pummelvision to make a video of all of my flickr photos. Pummelvision was an online service where you pointed it to your flickr stream and it built a video for you and posted to vimeo. It could also take input from tumblr and facebook.

I though it might be interesting to make a similar video for my photos this year. However going to look for pummelvision drew a blank, the company had closed. I then though It might be interesting to try to create a similar video. From my memory and looking at my old video, pummelvision made a video with no transitions and very fast. As far as I remember it just used one tune. I downloaded my old video from vimeo and extracted the audio file using QuickTime pro. I took a guess that the frame rate was about 6 photos per second.

Grabbing the images

I guess there a few ways to grab all your photos from flickr, but this is how I did it. If I was doing it frequently I’d look into automating it, but this was a once off, or once a year if I do it again.

Flickr’s api would allow you to do this, but it seemed a bit excessive to try and write a pile of code. The Flickr API has a section to test all of the command so I headed to: Flickr Api Explorer – flickr.photos.search. There I put my own user ID in, set the min_date_taken and max_date_taken, increased the per_page to 500 and added the large photo url to the extras field.

This produced an xml file will all the information:

Flickr xml

I then extracted the 397 urls from the text. There will be many ways to do this, but I am experimenting with the Sublime Text application at the moment, it found & selected all of the https: occurrences and the with cmd-shift-right arrow expanded the selection to the quotes. One copy got all of the files!

Once I had a list of urls I edit those so that each line was:

curl "https://farm4.staticflickr.com/3897/14598292323_ae6462fa07_b.jpg" > image_183.jpg

With the numbers out the image sequential and padded to 3 characters, eg image_001.jpg, image 002.jpg etc. I also numbered then in reverse so the oldest photo would be first.

I saved this text as a file, dl.sh and moved into the terminal:

cd path/to/thefolder
chmod +x dl.sh
./dl.sh

This code set the dl.sh file to executable and then ran it, the terminal filled with text and the folder with images. Curl is the command-line tool for downloading files.

Sizing images

Downloading the large size gave a folder full of images but some where landscape and some portrait, ie 1024 × 768 or 768 x1024 I need the images to all be the same size. So i used the sips utility to first resize them, sips --resampleHeight 768 *.jpg, then to pad the portrait ones: sips --padToHeightWidth 786 1024 *.jpg

Which gives me pictures like this for the portrait ones:

Img 076 toad

Making the movie

I discounted using iMove, moviemaker or the like as I wanted something quick (not necessary quick this time…) and that could be automated. I am also not sure in iMovie can show as fast as 6 per second. (Update, a quick look shows iMove can set speed to fractions of a second per frame.)

I though of a couple of ways to make the move, using Quicktime pro or ffmpeg. Quicktime pro proved the easiest option, opened the app and File -> Open Image sequence…, choose 6 frames per second, then all I had to do was save the movie.

Unfortunately Quicktime pro has been replace by Quicktime and it is a bit of a bother to get your old QT pro working if you had paid for a license. So I though I’d figure out ffmpeg too.

With great power comes great complexity

FFmpeg is A complete, cross-platform solution to record, convert and stream audio and video. It is a command line application and has a lot of variables. I can usually find out the right command with a bit of google. This one took quite a lot of google and failures. Most of these failures came from me trying to set a framerate, which lead to skipped frames. Eventually I dropped the idea of using the framerate options and got a very (too) fast video with this:

ffmpeg -f image2 -i IMG_%03d.jpg -c:v libx264 -pix_fmt yuv420p out.mp4

Note to self, in the -i, iput option IMG_%03d.jpg means all the images with 3 numerals, eg 001, 002… 375

I then slowed it down a little with this:

ffmpeg -i out.mp4 -filter:v "setpts=4.0*PTS" 2014-flickr-show.mp4

And added the audio:

ffmpeg -i 2014-flickr-show.mp4 -i pum.mp3 -map 0 -map 1 -codec copy -codec:a aac -strict experimental -b:a 192k -shortest 2014-flickr-show-audio.mp4

It took a fair bit of google to get the audio right too, the -codec:a option seems to sort things out.

Whys and Wherefores

As noted above, I could have done most of this with iMovie. But by using ffmpeg or QT pro, I’ve the opportunity to play, learn and possibly end up with an automated system. It would seem well within the realms of possibility to have a script that used the flickr api to download a bunch of images, perhaps for a year or with a tag and make a movie from them.

I’ve now figured out how to do most of this by piecing together the above fragments and finding out a bit about loops and renaming files, but I’ve no idea of how to create a bash script that will replace my hard coded tags, usernames ect with input, more to learn.

Once you have a lot of jpgs

You might as well do other things with them: Flickr 2014

I’ve made a updates to a couple of simple web pages/apps aimed at pupils and teachers using iOS and images.

Photoblitzer

photoblitzer is a really simple page that just gives a list of ideas for taking photos. I originally made it for a #ds106 project (20 Minute Photo Challenge: ds106 Photoblitz – CogDogBlog) and blogged about it on my 106 blog 106 drop in – Photoblitzin.

Since then I’ve used it as a starting activity on a couple of iPad training courses for staff and it worked well.

Originally I was thinking of this as being used on an iphone or ipod touch, but we have seen a lot of schools buying iPads and running a fair number of training twilights on useing these so I updated the app to look a bit better on an iPad:

Staying the same on an iphone or ipod touch:

The idea of the app is to generate a list of ideas for taking photos from a list of over 106 and let people mark them off as they take them. This seems to get people started in thinking about making interesting photos even in the rather limited places we run training courses in. This leads in turn to more interesting possibilities later when working with application to use the photos, say SonicPics, comic makers, iMovie and the like.

FlickrStampr

After I had played with photoblitzer I though I’d do the same sort of thing for FlickrStampr ( a new slightly catchier name for flickrcctouch). I made this way back when I first looked into using iPod Touches in class and neglected it after that.

The idea behind FlickrStampr is to give pupils an easy way to use creative commons images with the required attribution. The app lets the user search for flickr photos by tag. and provides a set of thumbnails. Clicking on a thumbnail creates (on the server, a copy of the image with a strip at the bottom with a simple attribution text. The means the user can download the image and use it on blog posts or presentations and the attribution is on the image, easier, I hope, for pupils than copying both the image and the attribution and then useing them together.

I started by cleaning up the iPhone interface a wee bit, before it did a fair amount of hiding and showing, now it just shows everything: flickrstamper iphone I messed about with the CSS a little and the page looks a bit different on an iPad screen; FlickrStampr iPad The main problem with the interface as it stands is that if you want to just see a bigger version of the image the image is processed on the server adding the text. This is, I suspect, a little inefficient but it makes for ease of use: you don’t need to preview them click a create button, then download the result. Just press the ‘preview’ and choose save. 

Not exactly responsive

The design improvements falls quite short of what is normarly thought of as responsive. In FlickrStampr the layout just squishes as the screen gets smaller, pushing one secion below the other. I photoblitzer I’ve used a media query in the css for the first time: @media screen and (max-width: 480px) there are a lot of possibilities for improvment. I am slowly learning hopefully more improvements to come.

Icons

I’ve now given both an icon to make it look a bit nicer when added as a bookmark on your homescreen, Ive also use a useful bit of javascript that alerts folk to the fact they can do this:Add to home screen, you can see it in action on some of the screenshots above. iOS web apps are a lot less powerful that native apps, especially ones developed by peole like myself with pretty limited knowledge, but they do offer the possibility of simply addressing niche uses. I hope that some folk will find these things of interest or even useful. I’ve had a ton of fun working/playing with this stuff and am open to suggestions for improvments.

The value of free

As an aside, testing the flickr API, and some recent play with the freesound API reniforce for me the value of sharing under a CC license with the proviSion of a powerful API, there are some amazing people sharing wonderful captures and creations freely, this need to be vslued, used and protected.


A decade ago, metadata was all the rage among the geeks. You could tag, geo-tag, or machine-tag Flickr photos. Flickr is from the old community. That’s why you can still do Creative Commons searches at Flickr. But you can’t on Instagram. They don’t care about metadata. From an end-user point of view, RSS is out of favor. The new companies are not investing in creating metadata to make their work discoverable and shareable.

from: Joho the Blog – [berkman] Anil Dash on “The Web We Lost”

Some great reading this morning starting at How the Web is being body-snatched ~ Stephen’s Web through Doc Searls Weblog – How the Web is being body-snatched to the post with the above quote.

This quote really jumped out at me, I’ve loved the flickr API for a long time and used it for lots of fun. I enjoy Instagram too, for its easy, quick hit, and lightweight community.

I really hope that we are not drifting away from such valuable resources with apis and rss feeds to the easy and locked in.

One of the things that makes the huge gap between sites like flickr and facebook is who has access to data and how they access it. When you share on flickr you are doing something quite different, and potentially much more valuable than sharing on facebook or google+.

I hope that open never gets old.

I’ve not posted much here recently, I have made a few posts over at my DS106 blog including in December:

Mostly playing around with gifs for the ds106 GIFfest which leads to messing about with JavaScript, flickr & freesound.org.

I had a way of generation a list of images and audio found with the same search word. I’ve now improved this to make a image/audio slide show like the one below. The new interface is rough as I’ve just added a button to get an iframe code that produces something like the one below.

Getting all the audio to play has been a bit messy, but it works for me in Safari, FF & Chrome on my mac and FF and IE9 on windows. Probably of little use to most folk as wordpress blogs, for one, usually do not allow iFrames.

Here are a couple more: drip and 404

I am pretty keen on posting photos to the Internet, not because I have great interest (or any skill) in photography but as an alternative, to blogging, way of recording events. I’ve been using flickr since 2004 and am currently enjoying instagram (mine via api) and posterous

Mostly I take photos with my phone (the best camera). Recently I’ve been testing the ways apple gives you to post photos from an iOS device.

Public Photo Stream

I’ve become a fan of photo stream,

When you take photos on an iOS device or import photos from your digital camera to your computer, Photo Stream will automatically upload it so it is available on all your devices.

You can also publish photos to a public photo stream.

Here is a guide to making a public photo stream. Click to see a bigger version:

How to Photo Stream 500

And here is the photo stream:
Ben Challum – Photo Stream. These are simple and quick to create and easy to share.

iPhoto Journals

For these you ned to buy iPhoto. There are a wee bit more complex and interesting as you can include a variety of different elements, including, map, weather, notes and the like.

Journal Elements

Again they are pretty straightforward to create and upload. Here are much the same photos as a journal: Ben Challum.

Here is the gallery, created on an iPad viewed in iPhoto on a iPhone

Journal iPhone

Photo Stream vs Journal

On thing I noticed with photo stream was that you could post a link, before the photos are uploaded. With iPhoto journals you have uploaded the whole journal before you can share the link. You can share a photo stream privately, although I don’t think I would. Both produce online sites with pretty horrible urls (eg: https://www.icloud.com/journal/#2;CAEQARoQpdbIWlofBmKRAh_cPbtctA;09537452-2A80-49C7-A86F-71E8734846CF!).

Photo stream is quicker, with less choice, with a journal you can edit the layout of photos easily (especially easy on an iPad). Journals have more features for telling a story by adding non photographic information. The photo stream seem to be designed to share photos as you go.

Educational Use

I could see the photo stream being used by a class or group to share photos and images with each other as they go allowing them to work on or use images created on classmates devices as they are created. It is simple to add images to a shared photo stream over a period.

Shared Photo Streams don’t count against your iCloud storage, and they work over Wi-Fi and cellular networks.

Apple – iCloud – photo stream. Realistically I doubt there are many cellular devices in our classrooms.

Journals are more suit to creating artefacts, perhaps using photos gather via photo stream. Journals allow the addition of text, editing of layout and look like an interesting way to tell a story, record some learning and share it, a fairly easy way to create a image heavy, attractive mini Web site.

Thus far and no further

Apart from the lengthy and un-rememberable urls the other thing I don’t like is the locked in aspect of the sharing. There is on api or RSS feed that could be used take the images and reposition them, but I suppose that is what flickr is for.

Flickr Export from iPhoto

This is pretty good, it is easy from iPhoto on iOS to send images to flickr, create sets and tagging photos as they go, here are the same pictures on Flickr: Ben Challum – a set on Flickr and flickr makes it easy to repurpose the images:

Although both photo stream and journals provide slideshow views there is no way, as far as I can see, to show these elsewhere.

Finally

I still like to play with putting photos on a map: A Mapped Walk and a have a reasonable workflow that let me put that together in about 20 minutes. I also like messing with panos so here is one from the same walk:
Ben Challum Pano.

Haiku Deck is

the simple new way to create stunning presentations – whether you are pitching an idea, teaching a lesson, telling a story, or igniting a movement, it’s fast, fun and simple for anyone to use.

Says Haiku Deck. It is an iPad application for making presentations. Very simple to use and the defaults look nice.

That took about three minutes to knock up. The main feature, based on three minutes use, seem to be a nice search to find images to match your words. Looks like it searches Flickr and some other sources. It does some sort of cc search. I don’t think it quite respects the license though. This image:

Winner

By David Muir is licensed under a Creative Commons — Attribution-NonCommercial-NoDerivs 2.0 Generic — CC BY-NC-ND 2.0 license. Unfortunately the app does not seem to do the attribution for you.

Haiku deck says:

Where do Haiku Deck images come from?
Haiku Deck finds images from across the Internet that photographers have licensed under the Creative Commons license. Some Creative Commons images carry a “not for commercial use” restriction. If you’re making a Haiku Deck for commercial use, please be sure to turn the “commercial use only” filter.

I am not sure that is in the spirit of the attribution part of the license?

It does however make a very presentable presentation pretty quickly, saving to the web, announcing by twitter and providing an embed code. It also exports to PDF via mail.

The price is right, free with some paid for themes, the app is extremely easy to use and if they added attribution to the images it would be even better.

Update, my bad: I had adjusted the embed code to fit the iframe into my blog the attribution appears on the Haiku Deck website: Radio #EDUtalk – A Haiku Deck from Giant Thinkwell and on the embed if you don’t mess about with the code to resize the iFrame. Apologies to Giant Thinkwell.

So here is the attribution copied from the Radio #EDUtalk – A Haiku Deck from Giant Thinkwell page:

Much to my embarrassment I asked about this on twitter: Twitter / kleneway: @johnjohnston @HaikuDeck you …

Update 2: I’e also noticed a nice feature, republish a slideshow with an extra slide updates the original and the embed.

Blogged with a hand knitted system

Flickr cc Picmonkey

Every so often something nice happens:

Which made me look again at the flickr CC search toy. A while back I posted about Picnik closing and then about PicMonkey which is a picnik replacement. The nice folk at PicMonkey let me know that the picmonky API is the same as the picnic one, so I thought I’d swap them out. As you can see from the screenshot, if the images found in the flickr CC search toy allow editing (ie NoDerivs is not in the License) there is a link to edit the picture in PicMonkey. I’ve changed the way this works so that PicMonkey will load the medium sized photo with the attribution stamped on it, rather than the original flickr image. Before I was expecting pupils to be able to add the attribution themselves if editing the picture.

I’ve also added a checkbox to the search form to only search for pictures you can edit.

The code behind this, php and javascript is a very messy affair. I intend to work thorough the whole thing sometime and make it more efficient etc.

If you have ideas of how this could be more useful to primary aged pupils please let me know.

Last week I was in a class doing another setup a blog/eportfolio session using Glow blogs. The process is a bit long winded due to the way glow blogs are set up. Usually there is little time to do much more than set them up and get the pupils to do a quick test post. I usually just get pupils to use a bit of clipart to show tem how to add an image. O this occasion there was a fair mix of machines and operation systems in the room and not all had clip art. I decided to use A flickr CC search toy to let the pupil download photos with attribution stamped on. This worked fine, but there was a little confusion about naming saved files, the file name suggested is stamp.php.jpg as the images, with attribution, are generated on the fly.

This weekend I had a quick google to see if I could find out how this can be improved. I am now using:

header('Content-Disposition: inline; filename='. $title .'.jpg' );

To give the files a title derived from the flickr image title. I also found I could cause the image to be downloaded by using Content-Disposition: attachment but decided against that at the moment. Now when pupils right click on an image they should see something like this:

Flickrcc File Dialog

Another alternative would be to show the image on a page with instructions on right clicking to get the save dialog. Again I’ve not implemented that either.

studying… by fazen
Attribution License

A couple of days ago I was reading Building the No English Words Translation Tool on Alan Levine's space for barking about and playing with technology he described how he was building a tool for ds106 Words With No English Translation with some JavaScript, as I popped on a comment I was reminded of http://iheartquotes.com/api an API for getting quotes. and had a wee play to produce Pics for Quotes (or a better title) a simple webpage that pulls in a random quote and then allows you to click on it to search flickr for the word clicked on. I wondered if this could be a ds106 assignment.

Alan comment back with some suggestions:

“Visualize That Quote”- rather than provide choices to pick from Flickr for each word; maybe random generate one image per word. The activity would be to illustrate/explain the quote in pictures with the least number of pictures required. The user could X out ones they did not need (and they would dissapear) and perhaps allow a click to generate a new random image to replace it. They would then do a screenshot to save their work? Perhaps generate a score where there is advantages to lower numbers of pictures and fewer image replacements?

I did a bit of work and got a basic implimentation of Alan's suggestions going. Alan then blogged about it again with some more suggestions:

  • See if it can skip unnecessary words like “a”, “the”, “of”
  • Be able to return a word if we accidentally click it closed
  • Tweak the css for thr “attribution” link at bottom (sometimes overlaps the license text)
  • Make it so when you hide the titlebars, it also hides the text of the words and the quote, to make it a true guessing game.

I've managed to make most of these changes and have a sort of working page: Visualize That Quote that has become a ds106 Assignment Visualize That Quote — MISSION: DS106

What Visualize That Quote Does

  1. Pulls in a random quote of less than 8 characters from the Quotes API and displays it.
  2. Searchs Flickr for a creative commons images to go with each word and shows one for each word.
  3. Allows you to swap out the images by clicking.
  4. You can reorder remove or hide images.

Here are a few examples I churned out without much though while testing this:

The DS106 Effect

It is great to get the quality of feedback and suggestion from a blogger I've read for years. The whole ds106 network is incredibly supportive even before the course has started. I started riffing off Alan's idea and was pushed and encouraged to improve something that started as a slightly pointless exercise to be come almost useful. This reinforces, for me, the power of blogging and commenting in learning. I've spend a few hours polishing something, learning as I went due to the community effect. I'd already had some of this in ds106 related posts. The current exchange has been particularly powerful becasue it was not just a well done, but a you could do this

Once I go back to work, tomorrow, I am not sure how much of ds106 I'll be able to keep up with as even before the spring course there is a fair flood of posts, but I'll give it a fair try.

I'll also be thinking a bit harder about how I comment on pupil blogs, too often it is easy to go for well doen and leave it at that.

How it Works

A mix of jquery, php & jQuery UI.

Part of the ds106 ethic seem to be to explain how something is done so that others can learn from it. My coding will not stand much of a critical eye, I am no programmer, but some folk might find this interesting or even useful.

The Quotes API will send json, but although that worked in desktop test I couldn't get it working on the web due to cross domin problems, I tried setting it to jsonp and that brought it in but I got errors trying to parse it with jQuery. Knowing very little about this stuff I side stepped it by pulling the json in with php so I could get that with jQuery's ajax stuff. Any jQuery/Javascript (and css) is all on the one page and you can have a look if you are interested by viewing the source of Visualize That Quote. It is not a pretty sight, as my method of coding is guess and check and google and guess and check. I have a tendency just to get things going and then push on.

This quote is put on the page, next javascript strips out all of the punctuation using:
str=str.replace( /[^a-zA-Z ]/g, '').replace( /ss+/g, ' ' );
Which I got from How can I strip all punctuation from a string in JavaScript using regex? – Stack Overflow. The script then pulls in html to show random flickr image via a php file which uses phpFlickr: randomFlickr you can see the code with some notes. I am recycling this from elsewhere (A flickr CC search toy). One the javascript has the code it puts it on the page.

More javascript swaps out the pictures for others when they are clicked.jQuery makes that pretty simple. jQuery UI handles all the dragging:

$("#flickr").sortable({
		handle: '.drag',
		revert: true
		    });

Which is pretty simple. I just copied that from the jQuery UI site.

Most of the other things are deal with my toggling their visibility with jQuery again: $('.attribution').toggle(); in this case this hides or shows the attribution for all the pictures, these are in a span with the css class .attribution.

How it could be better

  1. The flickr search could return json rather than html, this would give a better logic to building the set of images. I'd need to learn how to produce json with php and to process this with jQuery.
  2. Most of the work is done with simple functions, these are called from hard coded onclicks, the more common way to do this with jQuery seems to ad these with jQuery when the pages is loaded.
  3. Rather than expect users to take manual screenshots it should be possible to created composite images with the attribution and optionally the text stampled on. I've done a little of this sort of thing before (the stamp function of A flickr CC search toy) but this would streach me and google a bit.
  4. Alternativly an embed code that would embed a wee set of thumbnail pics and link to a full viewing of the creation. In both this and the last case I'd need to figure out what to do if a user reorders the images. In this case I might need a database.

Given the return to work tomorrow, all the fun I'll have on ds106 and Colin Maxwell's Ed Tech Creative Collective I am not sure if I'll get to this any time soon, but I've had a great time with this so far, if you are part of ds106 I hop you finf the assignment useful, I am very open to more ideas and suggestions.