Category Archives: Engineering

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.

Allowing digest auth with CORS on Chrome and LIGHTTPD

LigHTTPD is a very popular web server to use nowadays and it powers a lot of devices. I’ve mainly seen it in rasberry pi’s and other smaller servers but it’s powerful nonetheless.

Today I did some fiddling around with CORS to get data passed through another domain than the site was residing on. It all seemed fairly easy as it’s just a simple header to add to your server response, as described on enable cors

Turned out it wasn’t that easy. The server with the APIs are armed with Digest authentication for authorization and chrome has made it a must to send HTTP OPTIONS to check some parameters from the server.

Chrome needs in order to authenticate:

  • Access-Control-Allow-Origin: *
  • Access-Control-Expose-Headers: WWW-Authenticate
  • Access-Control-Allow-Headers: Authorization
  • Access-Control-Allow-Methods: POST, GET, OPTIONS

That’s easy enough with LigHTTPDs extra environment header in the server configuration:

setenv.add-response-header = (
"Access-Control-Allow-Origin" => "*",
"Access-Control-Expose-Headers" => "WWW-Authenticate",
"Access-Control-Allow-Headers" => "Authorization",
"Access-Control-Allow-Methods" => "POST, GET, OPTIONS"

)

But, that isn’t enough. If you have set up a rule in your server configuration that you require to authenticate, Chrome will fail when it gets 401 on it’s OPTION request and will not continue. In order to get that worked around I had to do some modifications in mod_auth to make sure it doesn’t authenticate on HTTP OPTIONS. It was an easy hack to implement once you figured out the functions and where to look.

All the needed code was:

//Hack to make OPTIONS pass through AUTH filter with just sending the headers needed by CORS on Chrome
const char *htm = get_http_method_name(con->request.http_method);
if(strcmp(htm,"OPTIONS") == 0){
con->http_status = 200;
con->mode = DIRECT;
return HANDLER_FINISHED;
}

I’ve attached the modified .c file for some convenience. I used the latest (to date) official release 1.4.39. Hope this helps anyone out there who needs to use digest over CORS with LigHTTPD.

mod_auth

/Marcus

Running Python on Axis devices

Axis’ platform for running applications on the camera itself is really great. For you who haven’t seen ACAP share I really suggest you click yourself over there to see what it’s all about.

As mentioned in other posts, Axis have created an embedded platform where you can install applications on the different devices to add features to the edge. This can be analytics that is looking for something unique like a people counter or advanced cross line-type detection. It can also be for simpler tasks like sending a message using a service platform similar to the pushbullet integration that I published here some time ago.

The only downside is that to develop these applications you have to know C which can be tough for the average script kiddie who just wants to perform something small. So, in order to solve some of the more simple scripting that you can be interested in doing. On ACAP Share there’s a PHP application that allows someone to write a PHP script that can be executed on a camera. This is a great application if you’re looking to use smaller APIs for your task.

PHP is extremely popular and allows you to do a number of great things. Python is another extremely popular language. Soo.. Enough said, below is the compiled ACAP and how to build it if you have the environment.

Build script:

buildpython

The python binary itself:

Python_2.7.1_1_0_mipsisa32r2el

Recommended FW: 5.80+. The reason is that the package is pretty big and will need some space. We’ve seen problems with 5.60 and 5.70 firmware that doesn’t allow the package to go through due to it’s size. After 5.80 it seems fine though. (Yes, python is a big library)

It’s build to run on the MIPS architecture, meaning it will work on ARTPEC-4 and ARTPEC-5 devices but that’s it. Python version is 2.7.1 with some limitation built to it (see buildpython.sh)

When you upload the binary there’s an attached python script in that folder. Edit that and make sure you run a continuous loop on it to perform whatever you want to achieve.

ACAP is actually so powerful that you can create your own applications that are essentially script that runs off another application. To start a python script from the command line, use:

LD_LIBRARY_PATH=/usr/local/packages/python_2_7_1/lib /usr/local/packages/python_2_7_1/bin/python /path/to/script.py

This can be called from system(); as well in your C application.

Hopefully this can save some time for people who’re interested in developing in python on Axis devices.

/Marcus

Pushbullet integration for Axis devices

Beta 0.1 available here: Push_trigger_0_1_mipsisa32r2el (Artpec-4 devices only)

IMG_0283[1]
Device image sent through PushBullet
Hi everyone,

Some time ago (last month according to picture) I needed to have images pushed out to my phone from an Axis device. There are multiple ways of doing this already like using a VMS mobile software.

However, I didn’t need a full featured solution that can view recordings or anything like that. I just wanted to see what was going on by the representation of One image. I did some investigation on what can be done on iPhones and Androids, and there’s some various choices available.

Pushover.net is easy. Free on the web and the app is a couple of bucks. Their API support HTTP as well which makes it easy to integrate in an ACAP environment. The only downside of pushover is that it can’t send images. Only text and HTTP links. The only one I found who can push images is pushbullet.com – hence the integration.

Feel free to use it, I haven’t tested it too much but it seems to work good 🙂

Installation steps:

  1. Download push bullet on your phone and set up an account at pushbullet.com
  2. Take note of your Access Token (once registered) here https://www.pushbullet.com/account
  3. Install the ACAP app on a ARTPEC-4 with firmware version 5.60+ on it
  4. Enter the Access Token into the User token field in the App settings
  5. Star the application
  6. Create an event (Motion detection or any trigger you’re interested in) that sends an internal HTTP message to: 127.0.0.1/axis-cgi/io/virtualinput.cgi?action=6:/\
  7. Test the trigger. Do you receive a picture in your pushbullet app?

 

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 🙂

Server Report Grabber

Axis Communications offer a great SDK for all their application development partners that allows anyone to create applications that runs on the cameras.

The SDK itself comes with a set of libraries and compilers for the different chipsets in the Axis devices that let you:

  • Capture frames from the devices
  • Control device parameters
  • Create web pages/CGIs
  • Create event triggers
  • License key management (if you considered commercial use)

Axis also created the RAPP (Rasterizing Processing Primitives library) that allow the developer to do low level processing image operations. It’s licensed under GPL v3.

All Axis devices runs Linux as the operating system, so it’s really up to you what you want to do in the operating system and there’s really no limit what you can do. The main language to develop the applications in is C but C++ is supported as well.

I had a task where i had to monitor changes that was being made on the camera over time and Axis already have a great feature to get information about the whole system that can be grabbed from their APIs, this is called the “Server report”. So what I came up with is an application that grabs a Server report of the camera and saves it to the preferred location. The default is the SD card slot in the camera but any directory or even mounted network devices can be used. It’s not a fancy app that does all this kinds of analytics. But it’s working as expected.

Download

Axis Parameter Class for Python

A couple of days ago I was in need of making some scripts that removed duplicate parameter groups on a couple of Axis devices. For those of you who don’t know, Axis creates Digital Surveillance Cameras with IP technology, which in practice means that It’s surveillance cameras running Linux.

All Axis devices offers an open API for developers who want to develop  that uses Axis devices. The most frequent API used is the Parameter API, that allows to change basic settings, create motion detection windows, events with triggers and so on. And this is the API that I had to implement a class for.

The class is written in Python and is pretty much an object oriented interface. Example

param1 = AxisParameter("Motion.M0.Left","1120")
#param1.name = Motion.M0.Left, param1.value = "1120"
param2 = AxisParameter("Properties.Resolution")
#param2.name = Properties.Resolution, param2.value = None

Here we have two parameters that can be accessed from the class. param1 contains a parameter with an assigned value to it, this can be used to modify an already existing parameter. param2 contains a parameter name, but have no idea of the value of it, better used to receive the parameters

To use the class, you must first import the data from it.

from AxisParameterClass import * #import both the working class and the information class

paramclass = AxisParameterClass("some.ip","username","password","vapixversion")

All arguments are optional and can be set later with the following functions

  • setIP
  • setCredentials
  • setVapixVersion

Axis currently have two API’s for handling vapix parameters. The only big difference is the URL, but still. The class will automatically try to determine the vapix version if not set before.

Receive parameters

To get parameters from a device, simply create a parameter that you’re interesting, both groups and subgroups are fine to use:

paramclass.getParameters([AxisParameter('Motion'), AxisParameter('Properties'), AxisParameter('NonExistent')])

The class will return a list of all parameters that matches the search. Is a parameter not found, the Parameter will be returned with the value None. All parameters that are found have their value as a string.

Remove parameters

Just as add. Create your list, and send to

paramclass.removeParameters([AxisParameter('Motion')])

Parameters returned have a status parameter that refers if the parameter was removed or not:

AxisParameter.status = "OK" #removed
AxisParameter.status = "Error" #not removed.

Update Parameters (Implementation still needs some work)

To update, pass the list into

paramclass.updateParameters([AxisParameter('Motion.M0.Left','1123')] )

If all works, the parameters returned will contain the same result as what you passed in.

 

Download

It can all be downloaded from github, licensed under MIT, so feel free to do whatever you like with it 🙂
https://github.com/marcusfollrud/AxisParameterPython 

Annoyed with WordPress

Yesterday I was faced with a problem from a friend who has a wordpress blog hosted at wordpress.com. The problem was that the 3GB space on the blog was filled up with the images to his blog posts. The reason that it was already used was due to the fact of that the images were uploaded with their original size, which are of course with todays cameras kind of big.

Got me thinking. WordPress already offers the functionality of scaling images in the Media Library, but doing that one by one is very time consumin, and to be frank, it’s extremely boring :-) , this took me onto google to see if there’s any xmlrpc api function (since WordPress supports this) that would let me do so. No, but I can upload images using wp.uploadFile, and it seems to support overwriting. Great!

Or was it? No. Firstly, the overwrite functionality doesn’t overwrite the particular image you’re interest in overwriting. It creates a new one, and removes the old one not even the name in the database is the same, all of a sudden it includes some sort of reference name to the old file, that you’re obviously interested in.

Piece of code:

if ( !empty($data['overwrite']) && ($data['overwrite'] == true) ) {
			// Get postmeta info on the object.
			$old_file = $wpdb->get_row("
				SELECT ID
				FROM {$wpdb->posts}
				WHERE post_title = '{$name}'
					AND post_type = 'attachment'
			");

			// Delete previous file.
			wp_delete_attachment($old_file->ID);

			// Make sure the new name is different by pre-pending the
			// previous post id.
			$filename = preg_replace('/^wpid\d+-/', '', $name);
			$name = "wpid{$old_file->ID}-{$filename}";
		}

As can be seen here when overwriting, we look up the old image (based on the parameter $name) and deletes the file from the upload directory, but take a look at the next couple of lines. WordPress choses to create a new table row in `posts` with the old filename based on the old id and then adds a new filename.

For me, and everybody else who just wanted to replace/edit their image without  a huge hassle all of a sudden got a lot more work to do. Instead of having the same url to the image there’s a new one, if folder were used for adding images to posts (etc: /wp-content/uploads/2011/09) which results in that we have to edit all the posts who directly link to the image and not just a media library entry.

Why didn’t WP just replace that particular file in the system, as we actually were interested in overwriting it. Ah well, editing the posts shouldn’t be too much of a big mess right? Nah, editing a post isn’t hard at all. Download all the posts with getPages and just replace the old url with the new one for the images (even if a post from 2010 will have image links to 2012, not very stylish)

Oh, and another thing i noticed. When using wp.uploadFile the $name parameter must add a file type prefix, such as ”.jpg”, or it won’t be uploaded. This is not a big problem, unless you wanted to overwrite an image that was uploaded from the web GUI where your description ended up being ”Hello donkey kong” without an file type prefix. That file won’t be able to be overwritten (replaced) by another image.

So basically, I can’t achieve what I want, and it really annoys me.

Of course, the best way of achieving this is to just use  an FTP server, download the images from their folders, scale them with imagemagick or any good piece of software out there and just upload them again. But wordpress.com doens’t support FTP:ing, which I’m totally fine with, and totally understand.

Ok. WordPress is the greatest blog platform out there, so far I’ve never had any hassle myself as I have complete access to the system, but if don’t have that, It lacks some features that I’d like to have :(

I could just write a plugin that does this, but as I cannot upload plugins to wp.com that approach also fails. I’m locked out of doing my scaling on the images, unless I want to be a script kiddie and use the AJAX interface with Wireshark traces and somewhat reverse engineering but this isn’t the right way of doing things.

I think I’ll just sit down, add a feature to scale images on class-wp-xmlrpc-server.php and if I’m lucky, it’ll end up on the official release for wordpress.org, and it might work on wordpress.com as well one day, at least that’s what I’m hoping for, so that all the rest of you guys can get your used space down a little bit!

/marcus