Cartoonsmart video tutorials

barbarousmonthMobile - Wireless

Dec 10, 2013 (3 years and 6 months ago)

204 views

Cartoonsmart video tutorials
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

This is documentation/notes for the Phonegap Cartoonsmart course.

 
 
Big thanks to
Yohei Shimomae
for all the graphics

Getting started with Phonegap
 
Before we get to actually making a new Phonegap App it is important for you to have your development application 
open and ready before we begin. If you have Dreamweaver CS5.5 then you are pretty much there. You will need to 
install the Android SDK, it is very simple just open Dreamweaver and then click site > Mobile Applications > Configure 
Application Framework, after that a dialog box will open up and you can then click easy install. 
If you are to go with an open source alternative or want to develop an App that Dreamweaver doesn’t cater for then 
please go to www.phonegap.com and hover over developer then click on getting started. 
Configuring your application
Configuring your application is very easy and simple to do. To setup the app just click on site > Mobile Applications > 
Application Settings. Then change company to your company name and appname to the name of your application. 
You must also fill in all other required fields but the logo and the plash screen are optional. 
 
Building your first application
 
After configuring your application it is now time to develop the App itself. In this video tutorial I did not use the 
emulator because it is too slow and I also want to show the real time performance and features of these 
applications. 
So the first thing we need to do is wait until the DOM has loaded and then wait until Phonegap has loaded and then 
we can start to use the Phonegap API safely. So for example: 
function check() { 
  document.addEventListener("deviceready", phonegapLoaded, false);   

function phonegapLoaded() { 
  $(function() { 
    $("body").append("<p>Hello world</p>"); 
  }); 
   

Then make sure you have added the onLoad event in the DOM 
 
<body onLoad=”check()”> 
BlackBerry (OS 4.6) has a problem with this method because customer events are not supported so we have to 
manually query Phonegap.available until Phonegap has fully loaded. 
 
function check() { 
  var pgchecker = window.setInterval( 
    function() {   
      if(Phonegap.available) {  
        window.clearInterval(pgchecker); 
        start(); 
      } 
    } 
   , 500 
  ); 

function start() { 
  $(function() { 
    $("body").append("<p>Hello world</p>"); 
  }); 

   

Supported platforms are: 
 Android
 BlackBerry WebWorks (OS 5.0 and higher)
 iOS
 
 
 

 
Notification API
notification.alert 

function alert() { 
   
  navigator.notification.alert( 
   
   'You message here!', 
    okay, 
   'TITLE', 
   'OKAY' 
   
  ); 
   

 
function okay() { 
   
  $(function() { 
     
    $("body").append("<h2>USER CLICKED OKAY!</h2>"); 
     
  }); 
   
}Don’t forget to call back the alert function from the DOM… 
<a href=”#” onClick=”alert();  return false”>Alertme</a> 
 
 
 
 
notification.confirm 
function alert() { 
  navigator.notification.confirm ( 
   'My message to you', 
    onconfirm, 
   'Cartoonsmart', 
   'confirm,Cancel,maybe' 
  ); 

function onconfirm(button) { 
  if(button == 1) { 
    $(function() { 
      $("body").append('<p>Confirm complete</p>'); 
    }); 
  } 
  if(button == 2) { 
    $(function() { 
      $("body").append('<p>User canceled</p>'); 
    }); 
  } 
  if(button == 3) { 
    $(function() {   
      $("body").append('<p>User not sure</p>'); 
    }); 
  } 

Don’t forget to call back the alert function from the DOM… 
<a href=”#” onClick=”alert();  return false”>Confirm dialog box</a> 
 
 
notification.beep 
function beep() { 
  navigator.notification.beep(4); 

 
notification.vibrate 
function vibrate() { 
  navigator.notification.vibrate(4000); 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Device API
Code full 
 
function check() { 
    document.addEventListener("deviceready", start, false); 

function start() { 
      var element = document.getElementById("info"); 
      element.innerHTML = 'Device Name: ' + device.name + '<br />' + 
           'Phonegap version: ' + device.phonegap + '<br/>'+ 
           'Plaform (OS): ' + device.platform + '<br />' + 
           'Device UUID: ' + device.uuid + '<br />' + 
           'Device version: ' + device.version + '<br />'; 

device.name 
device.name returns the name of the device's model or product. This value is set by the device 
manufacturer and might vary across different versions of the same product. 
device.phonegap 
This allows us to find out what version of Phonegap our application is using. 
device.platform 
Get the device's operating system name. 
device.uuid 
Get the device's Universally Unique Identifier (UUID) 
device.version 
Get the version of the operating system 
function DOMLoaded() { 
  document.addEventListener("deviceready", phonegapLoaded, false); 

Connection API
function phonegapLoaded() { 
   
  networkConnection(); 

 
function networkConnection() { 
   
  var networkState = navigator.network.connection.type; 
   
  var states = {}; 
  states[Connection.UNKNOWN] = 'Unknown connection'; 
  states[Connection.ETHERNET] = 'Ethernet connection'; 
  states[Connection.WIFI] = 'WIFI connection'; 
  states[Connection.CELL_2G] = '2G connection'; 
  states[Connection.CELL_3G] = '3G connection'; 
  states[Connection.CELL_4G] = '4G connection'; 
  states[Connection.NONE] = 'No network connection'; 
   
  alert('Connection type: ' + states[networkState]); 
   

 
 
 
 
 
 
Accelerometer
 
accelerometer.getCurrentAcceleration 
 
 
function DOMLoaded() { 
  document.addEventListener("deviceready", phonegapLoaded, false); 

 
function phonegapLoaded() { 
  navigator.accelerometer.getCurrentAcceleration(onSuccess,onError); 

 
function onSuccess(acceleration) { 
  alert( 
     'Acceleration X: ' + acceleration.x + '\n' + 
     'Acceleration Y: ' + acceleration.y + '\n' + 
     'Acceleration Z: ' + acceleration.z + '\n' + 
     'Timestamp: ' + acceleration.timestamp + '\n'  
   
  ); 

function onError() { 
   
  alert('Error!'); 

 
 
 
accelerometer.watchAcceleration  +  accelerometer.clearWatch 
 
function DOMLoaded() { 
  document.addEventListener("deviceready", phonegapLoaded, false); 

function phonegapLoaded() { 
  startWatch(); 

function startWatch() { 
  var options = { frequency: 2000 }; 
  watchID = navigator.accelerometer.watchAcceleration(onSuccess,onError,options); 

function onSuccess(acceleration) { 
  var element = document.getElementById('accel'); 
  element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br/>' + 
           'Acceleration Y: ' + acceleration.y + '<br/>' + 
           'Acceleration Z: ' + acceleration.z + '<br/>' + 
           'Timestamp: ' + acceleration.timestamp + '<br/>'; 

 
function onError() { 
  alert("Cannot gain access to the Accelerometer"); 

 
function stopWatch() { 
  if(watchID) { 
    navigator.accelerometer.clearWatch(watchID); 
    watchID = null; 
  } 

Pick and mix
 
From here on in you can choose which video tutorial you would like and learn that particular API of Phonegap. But 
however here is the location of the documentation files for those particular tutorials: 
 
Events tutorial 
    Documentation: <Phonegap course folder>/Source files/Events API.pdf 
Camera API tutorial 
    Documentation: <Phonegap course folder>/Source files/ Camera API.pdf 
Source code HTML: 
<a href=”#” onClick=”takePicture()”><h1>Take a picture</h1></a> 
<img id="image" src="" /> 
(Remember that when you don’t define the image width and height it will go to the actual scale of the image) 
Source code CSS: 
#imagebase  { display:none;  } 
#imagefileURI  { display:none;  } 
 
Options: 
{ quality : 75,  
  destinationType : Camera.DestinationType.DATA_URL,  
  sourceType : Camera.PictureSourceType.CAMERA,  
  allowEdit : true, 
  encodingType: Camera.EncodingType.JPEG, 
  targetWidth: 100, 
  targetHeight: 100 } 
 
 
Return value format as a Base64‐encoded string: 
navigator.camera.getPicture(onSuccessData, onFail, { quality: 50 });  
function onSuccessData(imageData) { 
    var image = document.getElementById('imagebase'); 
    image.src = "data:image/jpeg;base64," + imageData; 
   image.style.display = 'block'; 

function onFail(message) { 
    alert('Failed because: ' + message); 

 
Return value format as a file_URI string: 
navigator.camera.getPicture(onSuccessURI, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI 
});  
function onSuccessURI(imageURI) { 
    var image = document.getElementById('imagefileURI'); 
    image.src = imageURI; 
  image.style.display = 'block'; 

function onFail(message) { 
    alert('Failed because: ' + message); 

 
Select from the photo library and retrieve the returning format as a BASE64 string: 
function PhotoLibrary() { 
      navigator.camera.getPicture(onSuccessData, onFail, { quality: 20, sourceType : 
Camera.PictureSourceType.PHOTOLIBRARY });  

 
 
Select from the photo library and retrieve the returning format as a File URI string: 
function PhotoLibrary() { 
      navigator.camera.getPicture(onSuccess, onFail, { quality: 70, sourceType : 
Camera.PictureSourceType.PHOTOLIBRARY, destinationType : Camera.DestinationType.FILE_URI   });  

 
Contacts API tutorial 
Documentation: <Phonegap course folder>/Source files/ Contacts API.pdf 
Find contacts with the string ‘Bob’ in their name: 
function DOMLoaded() { 
  document.addEventListener("deviceready", phonegapLoaded, false); 

function phonegapLoaded() { 
  var fields = ["displayName","name"]; 
  var options = new ContactFindOptions(); 
  options.filter = "Bob"; 
  options.multiple = true; 
  navigator.contacts.find(fields,onSuccess,onError,options); 

function onSuccess(contacts) { 
  for(var i=0; i<contacts.length; i++) { 
    alert("Display name = " + contacts[i].displayName); 
  }   

function onError(contactError) { 
  alert("Something went wrong!"); 

 
 
 
 
Use a loop to go through all contact objects that have been returned and use the ContactName object: 
for(var i=0; i<contacts.length; i++) { 
    alert( "Full name: " + contacts[i].name.formatted + "\n" + 
         "Prefix: " + contacts[i].name.honorificPrefix + "\n" + 
         "Given name: " + contacts[i].name.givenName + "\n" + 
         "Middle name: " + contacts[i].name.middleName + "\n" + 
         "Family name: " + contacts[i].name.familyName + "\n" + 
         "Suffix: " + contacts[i].name.honorificSuffix 
    ); 

 
Use a loop to go through all addresses of a contact object: 
for(var i=0; i<contacts.length; i++) { 
    for(var j=0; j<contacts[i].addresses.length; j++) { 
      alert("Preffered addres: " + contacts[i].addresses[j].pref + "\n" + 
          "Type: " + contacts[i].addresses[j].type + "\n" + 
          "Formatted: " + contacts[i].addresses[j].formatted + "\n" + 
          "Street Address: " + contacts[i].addresses[j].streetAddress + "\n" + 
          "Locality: " + contacts[i].addresses[j].locality + "\n" + 
          "Region: " + contacts[i].addresses[j].region + "\n" + 
          "Postal code: " + contacts[i].addresses[j].postalCode + "\n" + 
          "Country: " + contacts[i].addresses[j].country + "\n" 
      ); 
    } 
  } 
 
Use a loop to go through all organizations of a contact object: 
for(var i=0; i<contacts.length; i++) { 
    for(var j=0; j<contacts[i].organizations.length; j++) { 
      alert("Preffered organization: " + contacts[i].organizations[j].pref + "\n" + 
          "Type: " + contacts[i].organizations[j].type + "\n" + 
          "Name: " + contacts[i].organizations[j].name + "\n" + 
          "Department: " + contacts[i].organizations[j].deparment + "\n" + 
          "Title: " + contacts[i].organizations[j].title 
      ); 
    } 
  } 
 
Create a new contact object and populate fields: 
function DOMLoaded() { 
  document.addEventListener("deviceready", phonegapLoaded, false); 

function phonegapLoaded() { 
  var contactObject = navigator.contacts.create(); 
    contactObject.displayName = "Cartoonsmart"; 
    contactObject.nickname = "Cartoonsmart"; 
    contactObject.note = 'This is a Cartoonsmart trainer.'; 
     
    var nameObject = new ContactName(); 
      nameObject.honorificPrefix = "Mr"; 
      nameObject.givenName = "Lawrence"; 
      nameObject.middleName = "Anthony"; 
      nameObject.familyName = "Turton"; 
      nameObject.honorificSuffix = "PH. D"; 
      contactObject.name = nameObject; 
       
    var addresses = [2]; 
      addresses[0] = new ContactAddress(); 
      addresses[0].type = "home"; 
      addresses[0].streetAddress = "Yello street"; 
      addresses[0].locality = "My City"; 
      addresses[0].region = "Jamakinmehungry"; 
      addresses[0].postalCode = "NF 88348"; 
      addresses[0].country = "United Kingdom"; 
     
      addresses[1] = new ContactAddress(); 
      addresses[1].type = "work"; 
      addresses[1].streetAddress = "Green street"; 
      addresses[1].locality = "Big City"; 
      addresses[1].region = "Easy"; 
      addresses[1].postalCode = "22039"; 
      addresses[1].country = "USA"; 
      contactObject.addresses = addresses; 
    var organizations = [1]; 
      organizations[0] = new ContactOrganization; 
      organizations[0].type = "work"; 
      organizations[0].name = "Cartoonsmart"; 
      organizations[0].department = "Manager"; 
      organizations[0].title = "Tutor"; 
      contactObject.organizations = organizations; 
  var numbers = [3]; 
              numbers[0] = new ContactField('work', '311', false); 
              numbers[1] = new ContactField('mobile', '411', true); 
              numbers[2] = new ContactField('home', '511', false); 
      contactObject.phoneNumbers = numbers; 
    var emails = [2]; 
              emails[0] = new ContactField('home', 'lawrenceturton@home.com', true); 
              emails[1] = new ContactField('work', 'lawrenceturton@work.com', false); 
      contactObject.emails = emails; 
    var ims = [2]; 
              ims[0] = new ContactField('Skype', 'testuser', true); 
              ims[1] = new ContactField('AIM', 'lawrenceturton@yahooeee.com', false); 
      contactObject.ims = ims;   
    var Bday =  new Date(1970,02,05); 
      contactObject.birthday = Bday; 
       
    contactObject.save(onSuccess,onError); 

function onSuccess() { 
  alert("Contact saved!"); 

function onError(contactError) { 
  alert(contactError.code); 

Find a contact and clone it: 
function phonegapLoaded() { 
  var fields = ["displayName","name"]; 
  var options = new ContactFindOptions(); 
  options.filter = "Bob Goody"; 
  options.multiple = false; 
  navigator.contacts.find(fields,onSuccess,onError,options); 

function onSuccess(contacts) { 
  var clone = contacts[0].clone(); 
  alert(clone.name.givenName); 

function onError(contactError) { 
  alert("Something went wrong!"); 

Contacts API tutorial 
Documentation: <Phonegap course folder>/Source files/ Geolocation API.pdf 
 
Getting the current position: 
function phonegapLoaded() { 
        navigator.geolocation.getCurrentPosition(onSuccess, onError); 
    } 
    function onSuccess(position) { 
        var element = document.getElementById('geolocation'); 
        element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' + 
                            'Longitude: '          + position.coords.longitude             + '<br />' + 
                            'Altitude: '           + position.coords.altitude              + '<br />' + 
                            'Accuracy: '           + position.coords.accuracy              + '<br />' + 
                            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' + 
                            'Heading: '            + position.coords.heading               + '<br />' + 
                            'Speed: '              + position.coords.speed                 + '<br />' + 
                            'Timestamp: '          + new Date(position.timestamp)          + '<br />'; 
    } 
    function onError(error) { 
        alert('code: '    + error.code    + '\n' + 
              'message: ' + error.message + '\n'); 
    } 
 
 
 
 
 
 
 
 
Watching the position of the device by the watch position interval: 
var watcher = null; 
function onDeviceReady() { 
        var options = { frequency: 3000 }; 
        watcher = navigator.geolocation.watchPosition(onSuccess, onError, options); 
    } 
    function onSuccess(position) { 
        var element = document.getElementById('geolocation'); 
        element.innerHTML = 'Latitude: '  + position.coords.latitude      + '<br />' + 
                            'Longitude: ' + position.coords.longitude     + '<br />' + 
                            '<hr />'      + element.innerHTML; 
    } 
    function onError(error) { 
        alert('code: '    + error.code    + '\n' + 
              'message: ' + error.message + '\n'); 
    } 
 
Stop watching the position of the device by clearing the watch position interval: 
function clearWatch() { 
        if (watchID != null) { 
            navigator.geolocation.clearWatch(watchID); 
            watchID = null; 
        } 
    } 
 
 
 
 
 
 
Work around if the geolocation.positionWatch method doesn’t work: 
function phonegapLoaded() { 
        navigator.geolocation.getCurrentPosition(onSuccess, onError); 
    } 
    function onSuccess(position) { 
        var element = document.getElementById('geolocation'); 
        element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' + 
                            'Longitude: '          + position.coords.longitude             + '<br />' + 
                            'Altitude: '           + position.coords.altitude              + '<br />' + 
                            'Accuracy: '           + position.coords.accuracy              + '<br />' + 
                            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' + 
                            'Heading: '            + position.coords.heading               + '<br />' + 
                            'Speed: '              + position.coords.speed                 + '<br />' + 
                            'Timestamp: '          + new Date(position.timestamp)          + '<br />'; 
    } 
    function onError(error) { 
        alert('code: '    + error.code    + '\n' + 
              'message: ' + error.message + '\n'); 
    } 
Compass API tutorial 
Documentation: <Phonegap course folder>/Source files/Compass API.pdf 
Using the compass.getCurrentHeading method: 
function DOMLoaded() { 
  document.addEventListener("deviceready", phonegapLoaded, false); 

function phonegapLoaded() {         
navigator.compass.getCurrentHeading(onSuccess, onError); 
    } 
    function onSuccess(heading) { 
        alert('Heading: ' + heading.magneticHeading); 
    } 
    function onError(compassError) { 
        alert('Compass Error: ' + compassError.code); 
    } 
 
Using the compass.watchHeading & compass.clearWatch methods: 
function DOMLoaded() { 
  document.addEventListener("deviceready", phonegapLoaded, false); 

var watcher = null; 
function phonegapLoaded() { 
   watcher = navigator.compass.watchHeading(onSuccess,onError, { frequency: 100 }); 

function onSuccess(heading) { 
  var element = document.getElementById('compass'); 
  element.innerHTML = "Heading: " + heading.magneticHeading + "\n" + "Timestamp: " + new 
Date(heading.timestamp); 
   

function onError(error) { 
  alert("Error code: " + error.code); 

function stopWatch() { 
  if(watcher != null) { 
    navigator.compass.clearWatch(watcher); 
    watcher = null; 
  } 

 
Using the compass.watchHeadingFiler & compass.clearWatchFilter methods: 
function DOMLoaded() { 
  document.addEventListener("deviceready", phonegapLoaded, false); 

var watcher = null; 
function phonegapLoaded() { 
   watcher = navigator.compass.watchHeadingFiler(onSuccess,onError, { filter: 10 }); 

function onSuccess(heading) { 
  var element = document.getElementById('compass'); 
  element.innerHTML = "Heading: " + heading.magneticHeading + "\n" + "Timestamp: " + new 
Date(heading.timestamp);   

function onError(error) { 
  alert("Error code: " + error.code); 

function stopWatch() { 
  if(watcher != null) { 
    navigator.compass.clearWatchFilter(watcher); 
    watcher = null; 
  }