Veering off into territories where I am out of my depth a bit of fun in the last days of the holiday.

I’ve been playing with the new WordPress REST API using ideas from API Nirvana – Functional Details, then I remembered CogDog’s WordPress search javascript bookmarklet.

Multi WP Blog search allows you to search across a few blogs.

I doubt if this is actually a practical way to do things but it hints of ways of joining different blogs, small parts loosely joined?

A couple of years ago I made a video of all my flickr videos in the style of the now dead pummelvision service.

I dug out the script tidied it up a little, and made the above video with my 2016 photos.

I uploaded the script in the unlikely event that someone else would want to do something like this. It is not a thing of beauty, I am well out of my depth and just type and test. The script need ffmpeg on your computer (I’d guess mac only as it used sips to resize images) and a Flickr API key.

The script also leave you with up to 500 images in a folder. Before I deleted them I made a montage and averaged them using imageMagick

montage -mode concatenate -tile 25x *.jpg out.jpg which is the featured image on this post.

and

convert *.jpg -average aver.jpeg

aver

I guess all that the average proves is that most of my photos are landscapes, given the hit of a sky…

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

Chad Final

Week two of the teachtheweb mooc starts with a challange: Explore the awesome makes from last week, choose one, and remix it.. At lunch today I though I’d take a very quick stab at this using Chad’s Webmaker Profile, as Chad is a fellow ds106er and I though he would enjoy the play.

The First shot

Given I was on my lunch break, I though I’d just flip the profile: Chad’s Webmaker Profile. I went to Chad’s original profile and added edit after the url, this opened thimble for me to edit his profile. I know that you can flip, turn and rotate elements of a webpage via the css transform. A quick google and I came up with:
transform: rotateY(0.5turn);-webkit-transform:rotateY(180deg);
This rotates content 180 degrees around the y axis. I added it to the css section in thimble, changing this:

body { font-family:Open Sans, "Helvetica Neue", Helvetica, sans-serif;width:1000px;margin:0 auto; }

to this:

body { font-family:Open Sans, "Helvetica Neue", Helvetica, sans-serif;width:1000px;margin:0 auto; transform: rotateY(0.5turn);-webkit-transform:rotateY(180deg);}

I think you need to use both transform: rotateY(0.5turn) and -webkit-transform:rotateY(180deg) to get cross browser support, but I might be wrong.

Quite please with 3 minutes work I posted to the G+ Community.

Looking out

Between a comment and an image I made for ds106 a while back, I started thinking about the page being a view out of the computer, so it should be looking at Chad:Chad’s Webmaker Profile.

On this edit, I’ve added Chad’s photo, hotlinked from his g+ images as a background image. All this took was adding a wee bit nmore css to the body:

background-image:url('fullimageURL.jpg');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center; 

In the bloc above I’ve shortened the url, I used the full url to the image. The code first adds the iamge as a background to the page, ensures it does not repeat, fixes the position to the window and lastly centres it.

Itterating

What is probably irritating for my fellow MOOCers is that I am posting these and as I post geting more ideas, this means a lot of space is taken up on the G+ group.

As I post the last one, I irritate myself as the background picture does not fill the screen. Google again and I get this:

	webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

All 4 lines do the same thing for different browsers.

I also notice a new post with an audio mashup, this reminds me of Freesound where I find: Freesound.org – “computer-noise_desktop_quadcore_2009.wav” by matucha, I know Freesound supply low quality mp3 and ogg files so add an audio tag to my page, just after the body tag:

<audio autoplay>
	  <source src="http://www.freesound.org/data/previews/160/160465_739478-lq.ogg" type="audio/ogg">
	  <source src="http://www.freesound.org/data/previews/160/160465_739478-lq.mp3" type="audio/mpeg">
	  Your browser does not support the audio tag.
	</audio>

As I don’t have any controls in the tag, the player does not show, but autoplay gets it going when the page loads.

Finally I remember that Chad suggested a gif, so I download his image and make a gif of him rolling his eyes. Upload that to google and hotlink instead of the original jpg as a background. finally I have: Here’s iterating at you, Chad, I had to save twice as I needed to attribute the audio which is share under a Creative Commons — Attribution 3.0 Unported — CC BY 3.0 license.

So here is the Final version:

Here’s iterating at you, Chad.

Musing about Making

So like a lot of the things that I do for fun, this sort of bumbled along with one shot leading to the next. What was great about doing this inside the #teachtheweb community was there were lots of ideas to bounce off. This blog post was started after a comment on the final link I posted. Does that make this connected learning?

One of the lovely things about html is, if you know sometinhg is possible the method is just a quick google away. I wonder if that makes web editing a more accessable way of encouraging creativity?

Thimble thoughts

I’ve made between 6 and 10 experiments with Mozilla Thimble now, which makes me an expert;-)

I’ve found it a wee bit slow on older computers, so I’d think about that before using it in a class.

The split screen view is really good for seeing the changes made to the code take effect. I would however like the option of a tabbed screen so that I could see the whole of the preview without needing a huge screen. I’d also like the forthcoming ability to re-edit a page rather than having to save with a new url. The trail of urls is good for reviewing the process and blogging about it.

I would also like thimble to keep a track of my creations, I am pretty sure I’ve lost track of a few.

The most powerful features of thimble are, for me the templates which have great comments and the way you can easily edit someone else’s creation.

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.


One of the things I’ve really been enjoying about DS106 is riffing off the ideas of Alan Levine (CogDogBlog) like many edubloggers I’ve been following and being inspired by his blog for years. 50+ Web 2.0 Ways to Tell a Story is a standard teacher 2.0 text I’ve also, like many, used Feed2JS on several occasions. A while back I even tried to get a piratebox working after reading of the Storybox.

Anyway it is great to watch Alan teach his ds106 sub group and to follow his hyper activity on his blog. The other day, playing with the current #ds106 audio section he blogged: CogDogCodeAcademy: A Random Freesound Generator – CogDogBlog, this struck a cord as I recently posted #edtechcc Assignment 2 The Sight of Sound using the wonderful Freesound site. Revisiting it and looking at Alan’s code I notice that Freesound has an API. This looked interesting. I’ve now managed to create what I hope may be a ds106 Assignment flickrSounds.

flickrSounds

flickrSounds is a simple mashup that searches Freesounsd and flickr for the same word. It then display the sound and picture. You can reload either until you get an image and sound you like. This can be added to a list, and the exercise repeated. Once you have a set of picture/sounds you can grab an embed code to put hem on a blog. A set of pictures/sounds could create a story, illustrate a quote, saying or slogan.

Example

This is for searching for ds106 4 Life. I clicked through a few images and sounds for each word.

ds106

by electrovert
Attribution-NonCommercial License

intro.mp3
4

by California Cthulhu (Will Hart)
Attribution License

4-23-10 20 distort.wav
life

by dingatx
Attribution-NonCommercial License

lookoutbehind.wav

DS106 and Over Branding

Jim Groom Color

I’ve built in a Jim Groom busy widget into the webpage, the default search is dog, my example plays off the ds106 4life meme. Stephen Downes suggested in a comment that ds106 might be being over-branded I love ds106 but I think it’s being over-branded, this didn’t go down too well, but has inspired a lot of interesting stuff:, Martha Burtis’ The Cult of 4LIFE a graphic jokey one and I’m Still Chewing on that Over-Branding of DS106 Comment | mbransons and the comments on that post stand out for me.

It was an interesting idea, as someone just joining in I can see what Stephen Downes means. A lot of the DS106 rhetoric is fairly full on, there is a lot of self reference and pride/ego involved. I also could be put off by not sharing a culture with many of the other participants, being much older, having different frames of reference etc. Looking across the Atlantic it there is a very USA vibe. Lots of other folk with different backgrounds would have different reasons, I can see how DS106 could seem a bit hard to penetrate when looked in on. I thought a wee bit before joining in. but…

There are a couple of things that point the other way, DS106 is incredibly welcoming, the instructors are obviously giving a huge amount of time to the course and still have time to engage with the drive-by participants. They even made an effort to include my rather non standard blog RSS feed in the ds106 site. This seems to me to more than compensate for any exclusivity that ds106 might project.

The over-branding can be seen as glue, very important when you are trying to get participants to work together, and is more over more often than not obviously jokey, mocking the course and the organisers. #jimgroomart (eg: Blue Jump Suit #JimGroomArt #ds106:) is just an example, mock the teacher is one way to strengthen the connection, personalise the course, have fun and in weird way honour the amount of effort Jim makes to comment and make folk feel welcome in DS106.

I am also blown away 1 by the delight ds106 participants take in someone else grabbing what they have created and playing with it. The flickrSounds page is an example of this, without Alan’s positive reaction to my first tests I would not have carried on with this and had so much fun learnig a wee bit more JavaScript.

Code Thoughts

The root of this bit of fun was Alan’s post, in it he compares ds106 style learning with the new badges style learning:

Heck, I would rather do my own code challenges than someone else’s monkey see, monkey do. Thats the rub with this stuff, the motivation changes completely when it is something you need/want, versus someone else’s rote exercise for badges.

I commented to the effect that I found codeyear quite useful. I’ve been trying to keep up with the weekly JavaScript lessons there (just 3 weeks behind at the moment), as an afterthought I noted that Freesound have an API. This got me started on flickrSounds. In a way this proves Alan’s point, I’ve spent much much longer playing with this than I have in several weeks of codeyear. Partly because of the intrinsic interest of the task and partly due to Alan’s encouragement (blog comments and twitter).

But… I have messed about with javascript a few times now, but this is much neater code than usual (still horrible but relatively better). some of the improvements came from my experience of another CogDog/ds106 inspired piece Visualize That Quote but partly due to codeyear, where for the first time I’ve had the beginnings of an understanding of the basics of JavaScript.

There is a way to go with FlickrSounds, I need to add the ability to remove sound/pics from a ‘saved’ set and I need to test in IE, I’ve never manages to write any JavaScript that worked in IE first time.

Spirit of DS106

This has not been a ds106 assignment, I’ve not done any this week. I’ve only done one daily create, but I feel pretty much in the ds106 zone this weekend.

Footnotes:

1.
blown away is the nearest I can get to the DS106 comment style. This is much less reserved that my usual nice;-)

I’ve been reading Jim Groom’s bavatuesdays for a few years and though it following ds106:

Digital Storytelling (also affectionately known as ds106) is an open, online course that happens at various times throughout the year.

DS106 is pretty off the wall, but I’ve been inspired by it several times:

It has occasionally crossed my mind to join in with the course, but the time involved and the creative focus made me reluctant. However I do feel there is a lot to be learnt and some fun to be had by following the course so I started thinking about it. I popped a question in the comment box on Jim’s blog about using pivotx, this blogs software instead of the more usual wordpress. Jim got back very quickly and set me up with an account on ds106 which makes the decision about joining in over;-)

I am a wee bit nervous about jumping into something that requires visual creativity. While I am happy enough editing images, audio and video I am not good at visual thinking or design (many webpages attest to this) I do hope to have some fun around the edges. I am encouraged by Jim’s do what you like and leave the rest and welcoming attitude. I am looking froward to finding out a bit more about how the wordpress mechanics pull the course together and investigating this openest of online learning opportunities for the perspective of a learner and with an eye on my day job.

I’d be interested in knowing if any other Scottish educators are taking the course, perhaps we could offer a bit of local support to each other.

If you are interested in ds105 and want to know more Jim Groom – Wednesday Morning Keynote on YouTube is a great, if crackly, 40 minute intro (the animated gif above if from this).

Popcorn Hackasaurus

Yesterday I heard a few intriguing boos from Mozilla Festival by Doug Belshaw and Leon Cychwhich sent me on a day trip round the internet. I discovered:

Hackasaurus makes it easy to mash up and change any web page like magic. You can also create your own webpages to share with your friends, all within your browser. for which there is an educators guide and even a lesson plan.

and:

Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web. Popcorn.js is part of Mozilla’s Popcorn project.

among a host of other interesting things. Rather than blog about it I used these tools to create somethings:

A spoof 2015 BBC News – X-RAY GoGGLES improves pupils performance in exams

Playing with hackasaurus and popcorn

I think that hackasaurus in particular could be very useful in the classroom. Popcorn gives us a way to make complex media projects in particular HyperVidio and HyperAudio which act in the same way as HyperText. I’d love some feedeback on this stuff, if you think it could work in your classroom?

A while ago I proposed A PirateBox for TeachMeet?. Several kind folk donated a fiver and I ordered the Buffalo WZR-HP-G300NH wireless router from an amazon reseller.

First problem was that I did not notice that it was shipping from the USA, it arrive the day before TeachMeet SLF11. I didn’t arrive home until late in the evening, but rolled up by sleeves to sort it out. Problem 2 was a USA power supply. This I rectified at Lunchtime the next day and settled down in a corner of the SECC to sort out the box. Apart from the fact I had plugged the mac into the WAN port rather than the LAN port(or the other way round) I didn’t have a wired connection to the network. A major fail, I realised the port problem the next day after TeachMeet and though ti would now be plain sailing.

Yesterday evening I followed the instructions on PirateBox DIY OpenWrt – David Darts Wiki which went, I though pretty well. Unfortunately I didn’t really have a Buffalo WZR-HP-G300NH wireless router, I had a Buffalo WZR-HP-G300NH2 wireless router! The router was bricked.

I decided to unbrick the router using instructions I found: WZR-HP-G300NH Router: Firmware flash and brick recovery through TFTP After a few tries I noticed extra OS X help in a comment, but still failed. I decided to leave it until today.

This afternoon I had another go, musing again on the comment:

the Mac uses carrier detect to automatically bring network interfaces up and down, and your ethernet interface needs to be up and running at the moment you power the router on, or you’ll miss the little window when the tftp transfer can happen…

I decided to try using linux running on my macbook under virtualbox. The mac had at least given me an “Unsuport MODEL” error after using tftp to flash the firmware, but the virtualbox linux idea got me nowhere.

I’ve now google “Unsuport MODEL” error which has lead to a couple of interesting looking pages:
DD-WRT Forum :: View topic – wzr-hp-g300nh2 bricked and
DD-WRT Forum :: View topic – problems recoberying buffalo wzrhpg300nhv2 which I am leaving until tomorrow.

Based on hope rather than experience I would like t oget the box up and running at teachmeet strathclyde edition.