Tag Archives: ipad

Bulk upload to WordPress

Hi everyone,

Got some exciting news! I just got my very first application uploaded and approved on the Apple App store! I’ve been wanting to do something for quite some time but just haven’t been able to figure what I actually want to do.

But, for some time I have been using WordPress to keep track of my daily tasks, projects and general goals as well as using it to post whatever I do in terms of IT and Development. I keep track of a lot of photos on my phone that goes up to WordPress and I always thought the interface from the Phone was clunky. Logging in, Go to Media Library, Adding photos with the extra JS that took place on the phone just didn’t work for me. On top of that all the images were uploaded with a weird rotation.

I figured that this would be nice to have, a small app does nothing but that. I knew WordPress had XMLRPC for managing library (see Annoyed with WordPress) so it shouldn’t be too hard. That being said. I now have my own application uploaded to the app store that does just that.

I used Xamarin as a development platform. I’ve been a fan of Xamarin since it was still monotouch (let’s be honest. Obj-C is no fun).

 

Full page features:

Bulk Upload for WordPress

Some roadmap things

I know there’s more work to be done but the application does what it’s supposed to. Anyways, some things that’ll happen soon:

  • Improve the upload status with images and success/failure messages
  • Multi-site support
  • Use camera to upload (is this even useful?)
  • A nicer looking icon (current one is garbage)
  • More modern iOS design?
  • Share photos into the app from photo library.

Axis PTZ and Swiping

I got a funny request today on how to control Axis PTZ on a webpage that was running on a tablet. And by controlling the PTZ i mean by the gestures that are supported in many different tablets and smartphones. The Swipe!

It’s fairly easy to control the Axis PTZ devices since they all have a unified API. From Axis website: http://www.axis.com/files/manuals/vapix_ptz_52933_en_1307.pdf

 

I’m also a big fan of jQuery have used that a lot while I’m doing anything related to web development. It’s so easy to use and has a ton of plugins. A quick search on google today gave me TouchSwipe, a jQuery plugin for tablets. Awesome, this shouldn’t be any issue to hack together.

Requirements

  1. The webpage / webapp does not run directly on the camera so both MJPEG streaming and PTZ controlling must be done from within the app.
  2. It cannot run on any plugins but what Javascript and HTML5 allows.

Alright, lets start looking into the streaming part. Streaming MJPEG is super easy with the Axis devices on a web page all that is needed is:

<img src="http://username:password@axis-device/axis-cgi/mjpeg/video.cgi?resolution=640x480" alt="" />

Note: This will not work on IE, but who cares? We want this on tablets.

The next part is a little trickier. Nothing else but HTML and Javascript. Since the app is not running on the same webpage Cross domain scripting is not allowed. So how do we translate our swipe movement into a HTTP command that can be sent to the Axis device? The answer is an ugly but lovely hack called the <iframe>. Iframes can load whatever content you like from whatever source  you like. Without even asking why.  Why is this so good? Because the PTZ api is all HTTP GET. Boom! Easy enough.

Ok, we have all our pieces for our solution. MJPEG will work with our browser, SwipeTouch will trigger when a user Swipes and the PTZ can be controlled from an iframe.

SwipeTouch is super easy to implement, just take a look at this piece

 $("html").swipe( {
 //Generic swipe handler for all directions
 swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
 
 alert('Swiped '+direction)
 },
 //Default is 75px, set to 0 for demo so any distance triggers swipe
 threshold:75
 });
 });

So, here we are listening on swipe events on all of the webpage, we could do it on the image tag as well if we wanted but lets keep it on the HTML for now. When the swipe event is triggered we get the direction, distance, finger count and finger data. The direction is particulary interesting, it comes in up,down,left,right. It’s super convenient since the PTZ API also allows commands like ?move=[left,right,up,down].

This means that we can translate this super easy, have a look:

$('#swipeFrame').attr('src', 'http://root:pass@[ip]/axis-cgi/com/ptz.cgi?move='+direction);

Put that between in the swipe event and create an iframe what has the id swipeFrame and you’ll have Axis PTZ control that moves 25% of its field of view on each swipe. It’s not enterprice vms integration but certainly good enough for some basic checks from your Tablet!

This blog post requires some basic HTML knowledge to understand what’s going on as I didnt tell how to include the JS files or how to set up the actual html frame. If I was too messy in my write up, have a look at the source code 🙂