Overview: PointAbout’s job is…

PointAbout’s mission is 2 fold.

First, we make it very easy for anyone with HTML and Java Script experience to build and publish a mobile application.   Without PointAbout a developer would need to learn Objective-C and own a Mac.

Second, we make the application you build “cross – platform” for the iPhone, iPod Touch & Android phone platforms (more soon).

Basic Architecture

PointAbout has 2 components–The “Springboard” and the “AppMakr”.

The “Springboard” exposes the native features of the phone (GPS, Camera and Accelerometers) via JavaScript.   You can then utilize these APIs in your HTML files.

The “AppMakr” then takes the hosted URL that utilizes the PointAbout JavaScript APIs plus some splash-screen and icon artwork and builds a native application.

The PointAbout Process

• You build and host a URL that makes PointAbout Java Script calls to get Location/Camera/Accelerometers
• You send the URL and supporting media to PointAbout and we use AppMakr to build the native application
  • We will send you a Zip file containing the application that you can load on your phones
  • We will submit the Zip file to the App Store

PointAbout JavaScript API’s

Initialize PointAbout Springboard

• Device.init() – This function starts up the PointAbout springboard

Get the Location (longitude and latitude)

• Device.Location.init() – This function starts up the phones GPS

**See the example in the developer blog for more details

Using the Camera

• Device.Image.getFromPhotoLibrary()
• Device.Image.getFromSavedPhotosAlbum()-To specifically call the photoalbum feature on the phone from javascript

**See the example in the developer blog for more details

Using the Accelerometers

• accelX, accelY, accelZ

PopOut

• Device.openWebView(url)- To open a web view containing back, forward, refresh and close option

A Simple Example (using PointAbout to get location)–Step 1: HTML & JavaScript

**This example references Python ,  DJango, Google AppEngine and the Sunlight Foundation APIs –these are not required to use PointAbout.

[sourcecode language="jscript"]

[/sourcecode]

There are 5 basic steps:

• First, as you see on line 1, we add a pointer to the springboards Java Script APIs.
• Second, on line 5, we create an initialization function to open up a connection to the Springboard
• Third, on line 16, we create an atag href for a page to Pass the latitude and longitude

[sourcecode language="html"]

• Legislators: Current Location

  A Simple Example (using PointAbout to get location)–Step 2: Python

  Most developers won’t need these next 2 steps because they will be using another language but I added them in case you are using Python to build the mobile website.

  [sourcecode language="python"]
  def main():

  application = webapp.WSGIApplication([('/', MainPage),('/rep_sen_currentlocation', SunshineGetLegislatorCurrentlocation)], debug=True)
  wsgiref.handlers.CGIHandler().run(application)

  class SunshineGetLegislatorCurrentlocation(webapp.RequestHandler):
  def get(self):

  lat = self.request.get(‘lat’)

  lon = self.request.get(‘lon’)

  state_number=sunlight.districts.getDistrictFromLatLong(latitude=float(lat), longitude=float(lon))

  try: leginfo=sunlight.legislators.get(state=state_number.state, district=state_number.number)
  except: leginfo=None

  template_values = {
  ‘leg’: leginfo,
  ‘state_number’: state_number,
  }

  path = os.path.join(os.path.dirname(__file__),’rep_sen_currentlocation.html’)
  self.response.out.write(template.render(path, template_values))

  [/sourcecode]

  Here on line 4, you can see in the main request handler for Google AppEngine the Class associated with the  “/rep_sen_currentlocation” page

  On line 8, you see in the class function SunShineGetLegislatorCurentlocation we get the latitude (lat) & longitude (lon) variables that were passed

  On line 13, we convert the variables to floats so they can be used via the API that needs them such as the Sunlight API in this example.

  On line 25, we take the data that the API has returned for the location associated with the Lon/Lon and display it on the HTML page Associated with the class (rep_sen_currentlocation.html) by Passing it in an array called “template_values”

  

  A Simple Example (using PointAbout to get location)–Step 3: HTML Display Data

  [sourcecode language="html"]
  {% if leg %}

  
  • {{leg.title}}. {{leg.firstname}} {{leg.lastname}} ({{leg.party}})
  • District:
    {{leg.district}}
  • State: {{leg.state}}
  • Phone: {{leg.phone}}
  • Fax: {{leg.fax}}
  • Congress Office: {{leg.congress_office}}

  {% if leg.email %}

  • Email: {{leg.email}}

  {% endif %}
  {% if leg.twitter_id %}

  • Twitter ID:Link

  {% endif %}
  {% if leg.webform %}

  • Web Form: Link

  {% endif %}

  … removed for brevity…

  {% if leg.fec_id %}

  • Fec ID: {{leg.fec_id}}

  {% endif %}

  {% endif %}
  [/sourcecode]

  We now use Django to numerate each variable in the “leg” array passed from Python to display the data.

  

  Using PointAbout’s Camera Functionality

  Using the camera functionality is very simple using PointAbout’s Springboard.  Using a few lines of javascript you can initiate the camera functionality.

  [sourcecode language="javascript"]
  initPA = function() {
  Device.init();
  Device.Image.uploadUrl = “http://www.example.com/upload_photo?”;
  Device.Image.callback = imageDoneUploading;
  }

  imageDoneUploading = function(response) {
  document.getElementById(“message_box”).innerHTML = “Photo has been attached!”;

  }
  [/sourcecode]

  Let’s review the code:

  line 02:  Here we init the device and tells the Springboard to set device variables
  line 03:  Define an upload URL which will accept the POST of the image selected by the user
  line 04:  Tell PointAbout’s Springboard to send the callback message to the supplied function

  line 07:  define the callback function which we assigned to the<code> Device.Image.callback</code> earlier.
  line 08: once we get the callback tell the user the image has been uploaded.

  Now thats almost all of it, except now we need to tell the Image controller class to allow the user to take a picture.

  [sourcecode language="jscript"]

  Device.Image.getFromPhotoLibrary();

  [/sourcecode]

  That should bring up the Image picker from the photo library.  Thats it!

  [sourcecode language="html"]
  

  [/sourcecode]

  lastly we need to call our initialization function “initPA()” with the body’s onload.

  iPod Touch

  • If a user tries to access the camera while on the iPod Touch the photo album will be initiated instead.

  
  

  

  Using PointAbout’s Accelerometer Functionality

  The Accelerometer functionality is the easiest to aquire–it’s basically there via the variables accelX, accelY and accelZ once the Device.init(); has been called.   Here is a simple example of how it’s used:

  [sourcecode language="jscript"]function updateAccel() {
  $(‘#x’).val( accelX );
  $(‘#y’).val( accelY );
  $(‘#z’).val( accelZ );
  var t=setTimeout(updateAccel,50);
  }
  [/sourcecode]

  

  Mobile UI Basics – Stylesheets

  CSS

  We recommend using a CSS file that renders well on the mobile devices you are targeting.  iPhone.css as defined below is from http://iphone-universal.googlecode.com
  You can see it in action at http://minid.net/iphone/

  [sourcecode language="jscript"]
  
  
  

  
  [/sourcecode]

  Viewport

  From: http://www.iphonecompatible.net/design-tips-tools/define-a-viewport/

  Most websites and web pages will be compatible and work fine on iphone and Blackberry. However, it’s still possible to make the web sites more supportive, ready and friendly to Apple iPhone by giving more information to iPhone about how the webpage should be displayed on the iPhone browser. Beside, for web sites that try to emulate the functionality of the built-in iPhone applications such as webapps that use Canvas, AJAX functionality and limit the size of the page to 320×480px (or 480×320px), it’s best to ensure iPhone and Blackberry compatibility to ensure that the page is rendered and formatted correctly and avoid problem such as web page or application not scaling properly when rotate and Safari browser zooming out.

  One of the best way with just one line change on website coding to make website and web app support iPhone and Blackberry is by telling the PDA phone of the viewport size of the overall page. To do so, simply add the following line to the HTML HEAD section of the web page:
  [sourcecode language="jscript"]
  
  [/sourcecode]

  viewport is visual formatting model for visual media in CSS 2.1 specification, where it is a window or other viewing area on the screen through which users consult a document (mean part of the screen that you’re actually seeing). User agents may change the document’s layout when the viewport is resized. Other parameters applicable for viewport include initial-scale, user-scalable, minimum-scale and, maximum-scale where you can try to make your website fit into iPhone and BlackBerry view area. The example of usage:

  [sourcecode language="jscript"]
  
  
  [/sourcecode]

  You can mix the setting u want to use into a single META HTML code such as:

  [sourcecode language="jscript"]
  
  [/sourcecode]

  

  Mobile UI Basics – HTML Canvas versus Flash

  From our developer blog:

  The relatively new HTML <canvas> tag in HTML5 is a great way to create scriptable graphics and animation in lieu of Flash on the iPhone.  It is currently being supported in the newest versions of Opera, Safari, Firefox and of course iPhone’s version of Safari.  Apple originally created the <canvas> tag to create  Dashboard widgets for Mac OS X but it worked so well it found it’s way into the HTML5 specifications.

  The canvas tag allows a developer to do ray-casting using Javascript, animations and more complex image transformations such as rotations, translation and scaling than is originally allowed by javascript and HTML.  Since all this is part of iPhone’s Safari browsers its included in PointAbout’s springboard.

  You can find examples of <canvas> here:
  http://www.benjoffe.com/code/games/torus/

  http://iterationsix.com/particle_fountain/particle_fountain.html

  
  The tutorial from mozilla.org will help you get started:

  https://developer.mozilla.org/En/Canvas_tutorial

  Here is an excellent example from Opera’s site that goes through a detailed example:

  http://dev.opera.com/articles/view/blob-sallad-canvas-tag-and-javascrip/

  

  What you need to provide PointAbout to submit your application to an AppStore

  See http://www.pointaboutadmin.com/134/creating-media-assets-for-iphone/