Archive for the ‘Titanium Mobile’ Category

Create Hotspots using the Fireworks JavaScript API

July 10, 2012

If you are a designer who happens to know JavaScript, you may be happy to know that Fireworks has a JavaScript API. This tip came from Justin Lee, from Herxun, who used it to create hotspots on an image of the Taipei Metro map and then used the vectors to embedded clickable regions within a mobile app. The result was impressive. You could touch areas of the map and view contextual info, like estimated wait times, etc.

I was impressed by how Justin approached the problem of data transformation, considering how painful it can be mobilize vectors of dynamic data. He used Adobe Fireworks, a graphics app. Fireworks has a JavaScript API the he used to perform data processing. When you clicked a region on the image map, contextual information could be displayed. It was an elegant approach that saved lots of time.

Here is how he did it (per his email to me):

Because Taipei Flora Expo closed a few days ago, the official taipei metro route map changes a lot. With the fireworks work flow, It only take me less than half hour to fix it.

Obtain the FIreworks Console: http://johndunning.com/fireworks/about/FWConsole

Then draw hotspots on the canvas and select all of them.

After that, open the Fireworks Console, paste below code to in it.


var hotspots = [];
for(var i=0;i {
var hotspot={};
hotspot.id = sel[i].altText;
hotspot.l = sel[i].pixelRect.left;
hotspot.t = sel[i].pixelRect.top;
hotspot.r = sel[i].pixelRect.right;
hotspot.b = sel[i].pixelRect.bottom;
hotspots.push(hotspot);
}

console.log("nhotspots = ");
console.log(hotspots);

Then click ‘Eval’ Button, you will get all coordinates of the hotspots in JSON format.
I hope this may help you sometime.

I haven’t tested this yet, but you I can foresee several use cases.  I may write an app that demonstrates this further.  In the mean time, you can download the map here and try it yourself. Pretty slick.

Advertisements

Flip & Zoom Skeuomorphic Effect w/ Titanium Mobile

July 7, 2012

This is a simple concept piece that attempts to recreate the effect of opening a box to view contents, in a realistic manner. It’s written in Titanium Mobile using 2D/3D animation, shadow views and skeuomorphic designs.

Flip & Zoom Skeuomorphic Effect w/ Titanium Mobile from Terry Martin on Vimeo.

Off Canvas UI/UX Example [VIDEO]

July 6, 2012

Here is an app I wrote as part of a mobile strategy for ShiftAlertz.com.  This began as an experiment with Titanium Mobile to create a unique user experience based on navigation. Although this app is a prototype, it is nearly complete and may become a key part of the company’s strategy going forward.

(more…)

iOS Resolution Table

September 5, 2011
 iOS Resolution Table
(more…)

Javascript Information Visualization (JIT) for Titanium Mobile

September 4, 2011

The JavaScript InfoVis Toolkit provides web standard based tools to create interactive data visualizations for the Web.  I’m porting this to a commonJS module for Titanium Mobile. Right now it’s a data explorer app for internal development at Semantic Press.

(more…)

jStat – Javascript statistical library

September 4, 2011

Performing statistical operations in javascript is now easier with jStat, a library that allows you to perform advanced operations without the need of a dedicated statistical language (ie., MATLAB or R).

You can use this library in your Titanium Mobile application for graphing statistical operations.

(more…)

Titanium Mobile: OpenGL ES Docs

September 1, 2011

OpenGL IOS Module (Docs)

Overview

Ti.OpenGL extends the Ti.View class with a Titanium view that responds to Open GL API commands and renders the resulting graphics. Ti.OpenGL views provide Javascript wrappers for almost all of the ES 1.1 and ES 2.0 API. In some cases, the Ti.OpenGL versions have been modified to accommodate the differences between Javascript and lower-level codes like Objective C and C++. (more…)

Titanium Mobile Docs App

February 26, 2011

Here’s a quick and dirty app launching the Titanium Mobile docs site as a self contained app. (more…)