Tuesday, September 16, 2014

Building a mobile agenda for JSConf

[Update: Sorry for the missing pics... Deleted by accident. Thank you google...]

A couple of OutSystems' engineering guys were going to a JSConf Europe conference this weekend. While looking for the schedule, they found this:

We just couldn't let this opportunity go by, so João Neves used Platform 9 (which is about to be released) to build an agenda for the event. You can find the application here. It gets the Agenda from google docs using the new REST capabilities, and it is a completely mobile ready!

And, since on the week before I was playing with the source code of OutSystems Now, I built an application for Android that would allow attendees to view the schedule of the conference on their devices, even if offline (source code here).

The results were pretty cool! At the time of writing, 125 people had installed the Android App and we a bit over 7.500 pageviews! And we had some good reviews! :)


Saturday, April 26, 2014

Star Wars stop motion

Some fun with the kids, using discount animation software (the movie is in Portuguese...):

If you're curious, we used iStopMotion to record the video using an iPad camera, ToonBoom to add the lasers, QuickTime to record the sound, and iMovie to assemble everything. Extra videos and sounds downloaded from the internet.

Sunday, February 23, 2014

Displaying discrete data in R

Suppose you have a restaurant, and you do a survey where your customers can grade from 1 to 5 several aspects of that restaurant. The 1st 5 lines on your data will look something like:

Food Drinks Location Service
1 4 2 5 5
2 4 3 5 4
3 5 4 5 4
4 3 3 5 4
5 4 2 5 3

To analise this data, what I would usually do is check the mean, standard deviation, maybe do some histograms, and maybe do a boxplot of the data.

But when you have small amounts of data, these approaches tend to hide the story. An alternative option is to use a beeswarm chart:

This type of chart shows the entire dataset, allowing you to see everything at a glance!

If you're using R, you can create these charts using the beeswarm package. You can find the code that built this chart here (it also uses the reshape package).

Tuesday, December 31, 2013

Circular Menu with D3.js

WheelMenu is a circular menu aimed at mobile that allows you to quickly select from a small set of options quickly and with your thumb. You can see an example of the WheelMenu running in jsFiddle.
Right now the menu only works for 6 slices, but let me know if you need other number of slices.

Check the github page for more details on how to use the WheelMenu and for access to the source code. If you're using the OutSystems Platform, head over to the community and download the component.

Credits to the WheelMenu original design go to Tiago Simões and Daniel Nobre.

Sunday, October 6, 2013

D3 drag and drop tree

I needed a heavily customizable drag and drop tree and I couldn't find one that really fit my needs, so I built one. It was also a great excuse to learn about D3, although most of the work was messing with the quirks of drag and drop.

Anyway, although the code is far from decent and the tree is still work under progress, I decided to make it available to whomever wants to use. I hope it's useful for you, and be sure to let me know if you have any problems.

More info and download at github!

Saturday, August 17, 2013

Automatically building a cache manifest file

HTML5 has the capability to work offline and it allows you to cache files of your application on the browser by using a cache manifest. The question is, which files to cache?

Simple applications, with an HTML file, a couple of JS and CSS files are not a problem. But as soon as you move to more complex applications, the number of files explodes - think imported CSS files, background images, images within your page, etc. So here's a little help to build your cache file!

1. Start by getting the offlineHelpers.js file and put it on your website. It's easier if you put it on the folder of the page you want to cache, but you can put it anywhere. If you don't have a site yet, download the whole project and play with the provided test.html file.

2. Be sure the page you want to cache includes jQuery. This is only needed to run the offlineHelpers script, you can remove it afterwards. You don't even need to download it, just src the script from here: http://code.jquery.com/jquery-1.10.1.min.js

3. Launch chrome (yes, for now it only works on chrome). Load the offllineHelpers script by opening the console (cmd+alt+j on the Mac) and typing $.getScript('offlineHelpers.js'). Next, call offlineHelpers.getCacheFile() on the console.

4. Calling getCacheFile should result on a bunch of debug lines (in gray) followed by your cache manifest file. Something like:

Getting stylesheets
Found an import: jumbotron-responsive.css
Getting JS files
Getting Image files

# CSS Files

# Javascript Files

# Image Files

Next, tweak the result and copy to your cache.manifest file.

Let me know how this worked for you! If the script missed a file, let me know on the comments and I'll try to fix it!

Thursday, July 19, 2012

Command line script to batch convert images

Ever had a folder full of images that you needed to convert? Well, today I had a couple hundred 20Mb RAW images that I wanted to convert to JPG, and I really didn't want to open them on an image editor.

So I went hunting for a way to convert the images using the command line on the Mac. Here's what I found:

1. Converting an image via command line: There's a tool called "sips" that does this (and much more) on the mac! To convert a file from RAW to JPG, you just need to call something like:

sips -s format jpeg IMAGE.NEF --out IMAGE.jpg

2. Getting the right name: Iterating a list of files via command line is easy, getting just the filename in order to change the extension requires google! Here's how to do it:

for i in *.NEF; do echo "${i%.*}.jpg"; done

(curious on how it works? Check this doc)

3. All together now: To convert all the files in the current directory, do this:

for i in *.NEF; do sips -s format jpeg $i --out "${i%.*}.jpg"; done

Let me know how the script worked out for you!