SlideShare a Scribd company logo
Graphics on the Go
Gil Irizarry
Conoa
About Me
• Launched VC News Daily app on iOS and Android. Over
1200 downloads so far.
• Owner and lead engineer at Conoa, a graphics and
mobile software firm
• gil@conoa.com
• http://www.slideshare.net/conoagil/
About Me
• All examples and sample code in this presentation can
be found at:
– http://conoa.com/hidden/example.zip
Why?
• There are nearly 2 million mobile apps available today.
(http://www.pureoxygenmobile.com/how-many-apps-in-each-app-store/ )
• 1.5 years ago, there were 15K new mobile apps released
each week. (http://www.nytimes.com/2011/12/12/technology/one-million-apps-and-counting.html )
• For many, interacting with software means interacting
with mobile devices (or at least devices that run mobile
software).
What we will do
• We will learn how to build lightweight mobile apps
quickly, using open source tools.
• The apps will be cross-platform.
• However, we must actually pick a platform on which to
build and test the apps.
• For this presentation, we will work in Android since the
tools are free and easily available. We will do this on
Windows.
What we will do
• (Mostly) everything presented today in the Android
environment will apply to iOS, or has an equivalent in that
environment.
• So, let‟s get started…
Assumptions
• Setting up a development environment is covered in the
Making Mobile Apps Quickly workshop.
• For this workshop, we assume that a development
environment is in place.
PhoneGap
• PhoneGap allows HTML pages to be built as mobile apps.
• HTML pages can include JavaScript and JavaScript
libraries, such as jQuery.
• HTML pages can also include HTML5 elements.
Canvas
• HTML5 includes a new <canvas> element.
• Canvas allows the rendering of 2D graphics via some low-
level primitives.
• It does not include a scene graph API, so you must store
rendering information yourself for redrawing a scene.
Canvas
• Canvas supports:
– Basic shapes
– Images
– Transparency
– Compositing
– Transforms
– Basic animation
Graphics Example 1 – Simple Canvas
• Select the Graphics Example 1 project in the Package
Explorer in Eclipse.
• Select Run from the top menu bar
• Once the emulator starts and is finished installing the app,
you should see something like this:
Graphics Example 1 - Create a Canvas
Graphics Example 1 – Simple Canvas
• This example creates a canvas, gets its drawing context,
and draws into it.
• It follows a pattern that will soon be familiar: most of the
action is happening in JavaScript.
• One problem with this example is that the canvas is a
fixed size. Let‟s fix that with Example 2.
Graphics Example 2 - Better Canvas
Graphics Example 2 – Better Canvas
• Example 2 queries the size of the window, then adds a
canvas to fit the window. In this way, we can make a
canvas that would fit any device.
• Notice that the position of the text is based on the size of
the canvas, which is now based on the size of the device
window. The text will be centered on any device the app
is run, courtesy of a small amount of JavaScript.
• Let‟s see what else we can draw.
Graphics Example 3 - More Drawing
Graphics Example 3 – More Drawing
• This example gives a sense of what can be drawn.
• Canvas uses a drawing system similar to Adobe
PostScript or Mac OS QuickDraw. This is not surprising
considering that Apple developed the initial
implementation of canvas before it became a (nascent)
standard.
• Obtain the graphics context of the canvas for issuing
drawing commands
Canvas Drawing
• beginPath() … fill() or stroke () paradigm
• moveTo() / lineTo() for paths
• arc() for full or partial circles
• bezierTo() for complex curves
• fillText() / strokeText() for text
Canvas Drawing
• drawImage()
• colors, either by name or hex values
• gradients, linear or radial, and patterns
• stroke styles, including stipple patterns and line end caps
• push and pop transformations and state
Canvas Coordinate System
• (0, 0) is in the upper left corner of the canvas.
• Increasing y is “down” from the screen‟s perspective.
Increasing x is to the right.
(0, 0)
(0, height)
(width, 0)
Let’s make a pattern
• Find an image from the internet and save it to
GraphicsExample3/assets/www
• Change this code:
– context.fillStyle=gradient;
– context.beginPath();
– context.arc(55,155,40,0,2*Math.PI);
– context.fill();
• To this code:
Let’s make a pattern
– var img = new Image();
– img.src = 'clouds.jpg'; // use your image name here
– img.onload = function (e) {
• var pattern = context.createPattern(img, 'repeat');
• context.fillStyle=pattern;
• context.beginPath();
• context.arc(55,155,40,0,2*Math.PI);
• context.fill();
– };
• Shapes that you fill will become masks for the underlying
pattern.
Graphics Example 4 – Touch
• Everything so far has been static.
• JavaScript has an event system. We saw one in the
previous example: onload
• Let‟s use other events to add some interactivity.
Graphics Example 4 - Touch
Touch Events
• HTML5 canvas adds new events for devices:
– ontouchstart
– ontouchmove
– ontouchend
• Note that events come back as arrays. Why?
• Because HTML5 supports multi-touch. We can have
multiple simultaneous move events.
Touch Events
• Important to remember that event coordinates triggered by
the canvas are relative to the full window.
• Events need to be converted to the canvas coordinate
system in order to be relevant to the canvas.
• Look at function windowToCanvas (canvas, x, y) in
Graphics Example 4 source code (found in assets/www
folder).
Previewing
• Examples 1 through 3 work equally well as a PhoneGap-
powered mobile app and as a web page. If you haven‟t
already done so, trying running assets/www/index.html in
a browser.
• However, by incorporating touch events, we must run
Example 4 and other examples incorporating touch in the
mobile emulator.
Graphics Example 5 - Touch
Images
• In addition to stroked shapes, we can draw images.
• Images can be sourced locally or over the network.
• Note how images are loaded:
– image.src = filename;
– image.onload = function(e) {
– };
• If you reference an image before it is loaded, you run the
risk that you are trying to use an image before it is
available.
Images
• Images can be scaled and transformed.
• Canvas supports compositing and alpha.
• Canvas also support shadows.
• The example uses an RGBA color value to render semi-
transparent text and have it composited over the image.
The text is given a drop shadow.
Images over the network
• To access images over the network (or any data at all),
remember that network access must be enabled. On
Android, network access is not the default. It must be
enabled in the AndroidManifest.xml file:
• <uses-permission
android:name="android.permission.INTERNET" />
Saving and restoring state
• save() pushes the current context onto a stack.
• In addition to the current transformation, attributes are
also pushed.
• In the current example, because the text was given a
shadow, the shadow applies to the paint object. If we
want only the text to have a shadow, we could put the text
rendering code inside a save() / restore() block.
Graphics Example 6 – Paint and Menus
• Since we can render images into the canvas, we can use
a set of images and canvases to create menus.
• We could also draw into the canvases to render the menu
options dynamically.
Graphics Example 6 – Paint and Menus
Graphics Example 6 – Paint and Menus
• Example 6 allows the color and size of the paint brush.
• Separate canvases are used for the icon images, and
touch event handlers are attached to the canvases. How
else could we accomplish this?
• The image selector and scale checkbox are standard
HTML controls that trigger JavaScript events. We could
make <div> elements with <img> elements containing the
icons, and put event handlers on the images.
Animation
• Although we‟ve added some interactivity, the examples so
far have been a little static.
• Let‟s add some animation.
Graphics Example 7 – Simple Animation
Animation
• self.setInterval () is used to have the page be called again.
• Note that the screen is not cleared and that we are adding
to the canvas on each call.
• Instead, let‟s clear the canvas each frame. We can
transform the previous example into a simple clock app.
Graphics Example 8 – Simple Clock
Animation
• This example queries the time from the JavaScript Date()
object and draws the hands accordingly.
• The canvas is cleared each frame and redrawn.
• If you haven‟t already, try running the Graphics Example 8
in a browser (by running assets/www/index.html)
• There is something consistently missing in both the
emulator and the browser. What is it?
Animation
• The answer is flicker. The same canvas is cleared and
redrawn each frame, yet there is no flicker.
• This is because the canvas is inherently double-buffered.
• You could implement your own double buffering scheme
because HTML5 allows drawing to off-screen drawables.
You could draw off-screen, then swap the off-screen
memory to the on-screen canvas. However, HTML5
canvas does this more efficiently.
Save and Restore
• Remember save() and restore()?
• Let‟s use them to change the clock face so the text is
oriented around the face, much like text on a path in some
applications.
• Do this by using translate and rotate to change the
coordinate system of the fillText() call.
• If you can‟t figure out how to do this, look at the
commented out code.
Graphics Example 8 – Simple Clock
Let’s Do Things the Right Way
• We have been cutting some corners, so let‟s do things the
right way.
• PhoneGap should load the JavaScript when it is
ready, otherwise you potentially have the problem similar
to when you reference an image before it is loaded.
• Set a device ready event:
– document.addEventListener("deviceready", fnName, false);
– fnName is the name of the event handler
Let’s Do Things the Right Way
• Setting the device ready event requires that the device get
set in the config.xml file. This file is not in a default
Eclipse project, so it needs to be added manually. It goes
in the /res/xml folder.
• <feature name="Device">
• <param name="android-package"
value="org.apache.cordova.Device" />
• </feature>
Let’s Do Things the Right Way
• Look at the clock app. Also, try running it in a browser and
look at it there.
• If you look closely enough, you‟ll see a stutter on the
second hand. This is because setInterval() is a general
suggestion to the canvas on when to redraw and not a
hard commitment.
• There is a better way: requestAnimationFrame()
Let’s Do Things the Right Way
• requestAnimationFrame() is designed to deliver 60 FPS
and is made for games or animation.
• However, there is a problem. Many browsers don‟t
implement it!
• Remember that HTML5 is still not a standard!
Let’s Do Things the Right Way
• webkitRequestAnimationFrame() for Chrome,
mozRequestAnimationFrame() for Firefox.
• Search for „robust polyfill code‟ to find ways to deal with
this.
• http://my.opera.com/emoller/blog/2011/12/20/requestanim
ationframe-for-smart-er-animating
Let’s Do Things the Right Way
• Unfortunately, Android and iOS do not support
requestAnimationFrame(), at least at the versions we‟ve
been supporting in these examples.
• In this case, the polyfill code reverts back to setInterval()
or setTimeout().
• Another solution is to support only later versions of the
OS.
Let’s Do Things the Right Way
• http://caniuse.com/requestanimationframe
Let’s Do Things the Right Way
• Let‟s stop the main Android activity from showing up
before the HTML loads.
• <application android:theme="@android:style/Theme.NoTitleBar" >
Graphics Example 9 – Bouncing Balls
Playing Sound
• In the latest example, a sound is played when a ball
bounces.
• To enable this, remember to set the correct permissions in
both AndroidManifest.xml and config.xml.
• Create a PhoneGap media object. This requires the use
of cordova.js in addition to cordova.jar.
Playing Sound
• If you listen closely, you hear that the sounds are not
exactly in sync with the bounces.
• This is an inherent problem with PhoneGap‟s Media class.
• To alleviate, use an uncompressed sound file.
• Also, there is the Low Latency Audio Plugin for
PhoneGap.
Sprites
• HTML5 does not support sprites natively but, now that we
know how to do animation and draw images, we can
simulate them.
• drawImage() allows a subset of an image to be drawn.
• Every so many frames, we can draw a different part of a
larger image. The larger image can be made up of
different sprite images.
Graphics Example 10 – Bouncing Balls
What about 3D?
• An emerging standard for 3D graphics in a web page.
• However, it is not supported by iOS or Android browser
and has no support within PhoneGap.
Thank You!

More Related Content

Similar to Graphics on the Go

Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
Vera Kovaleva
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
GaziAhsan
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Yandex
 
Layar Tutorial - 3D Content Creation Tips & Tricks
Layar Tutorial - 3D Content Creation Tips & TricksLayar Tutorial - 3D Content Creation Tips & Tricks
Layar Tutorial - 3D Content Creation Tips & Tricks
Ronald van der Lingen
 
Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...
Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
Anna Migas
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Better DITA Graphics for a Multi-Screen World
Better DITA Graphics for a Multi-Screen WorldBetter DITA Graphics for a Multi-Screen World
Better DITA Graphics for a Multi-Screen World
Joe Pairman
 
Introduction To Design Patterns Class 4 Composition vs Inheritance
 Introduction To Design Patterns Class 4 Composition vs Inheritance Introduction To Design Patterns Class 4 Composition vs Inheritance
Introduction To Design Patterns Class 4 Composition vs Inheritance
Blue Elephant Consulting
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
Jamshid Hashimi
 
Online File Formats.pptx
Online File Formats.pptxOnline File Formats.pptx
Online File Formats.pptx
CliffordBorromeo
 
Framing the canvas - DroidCon Paris 2014
Framing the canvas - DroidCon Paris 2014Framing the canvas - DroidCon Paris 2014
Framing the canvas - DroidCon Paris 2014
Paris Android User Group
 
Html5
Html5Html5
FITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive ImagesFITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive Images
Rami Sayar
 
Google tools for webmasters
Google tools for webmastersGoogle tools for webmasters
Google tools for webmasters
Rujata Patil
 
Peterc_Dušan_full_AUTEX16
Peterc_Dušan_full_AUTEX16Peterc_Dušan_full_AUTEX16
Peterc_Dušan_full_AUTEX16
dpeterc
 
Android webinar class_4
Android webinar class_4Android webinar class_4
Android webinar class_4
Edureka!
 
Motion design in FIori
Motion design in FIoriMotion design in FIori
Motion design in FIori
Roman Rommel
 
Programming and the web for beginners
Programming and the web for beginnersProgramming and the web for beginners
Programming and the web for beginners
Son Nguyen
 
Fii Practic Frontend - BeeNear - laborator 4
Fii Practic Frontend - BeeNear - laborator 4Fii Practic Frontend - BeeNear - laborator 4
Fii Practic Frontend - BeeNear - laborator 4
BeeNear
 
Web development basics (Part-2)
Web development basics (Part-2)Web development basics (Part-2)
Web development basics (Part-2)
Rajat Pratap Singh
 

Similar to Graphics on the Go (20)

Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
Layar Tutorial - 3D Content Creation Tips & Tricks
Layar Tutorial - 3D Content Creation Tips & TricksLayar Tutorial - 3D Content Creation Tips & Tricks
Layar Tutorial - 3D Content Creation Tips & Tricks
 
Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...
Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Better DITA Graphics for a Multi-Screen World
Better DITA Graphics for a Multi-Screen WorldBetter DITA Graphics for a Multi-Screen World
Better DITA Graphics for a Multi-Screen World
 
Introduction To Design Patterns Class 4 Composition vs Inheritance
 Introduction To Design Patterns Class 4 Composition vs Inheritance Introduction To Design Patterns Class 4 Composition vs Inheritance
Introduction To Design Patterns Class 4 Composition vs Inheritance
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
 
Online File Formats.pptx
Online File Formats.pptxOnline File Formats.pptx
Online File Formats.pptx
 
Framing the canvas - DroidCon Paris 2014
Framing the canvas - DroidCon Paris 2014Framing the canvas - DroidCon Paris 2014
Framing the canvas - DroidCon Paris 2014
 
Html5
Html5Html5
Html5
 
FITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive ImagesFITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive Images
 
Google tools for webmasters
Google tools for webmastersGoogle tools for webmasters
Google tools for webmasters
 
Peterc_Dušan_full_AUTEX16
Peterc_Dušan_full_AUTEX16Peterc_Dušan_full_AUTEX16
Peterc_Dušan_full_AUTEX16
 
Android webinar class_4
Android webinar class_4Android webinar class_4
Android webinar class_4
 
Motion design in FIori
Motion design in FIoriMotion design in FIori
Motion design in FIori
 
Programming and the web for beginners
Programming and the web for beginnersProgramming and the web for beginners
Programming and the web for beginners
 
Fii Practic Frontend - BeeNear - laborator 4
Fii Practic Frontend - BeeNear - laborator 4Fii Practic Frontend - BeeNear - laborator 4
Fii Practic Frontend - BeeNear - laborator 4
 
Web development basics (Part-2)
Web development basics (Part-2)Web development basics (Part-2)
Web development basics (Part-2)
 

More from Gil Irizarry

A Rose By Any Other Name.pdf
A Rose By Any Other Name.pdfA Rose By Any Other Name.pdf
A Rose By Any Other Name.pdf
Gil Irizarry
 
[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...
[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...
[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...
Gil Irizarry
 
[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...
[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...
[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...
Gil Irizarry
 
Ai for Good: Bad Guys, Messy Data, & NLP
Ai for Good: Bad Guys, Messy Data, & NLPAi for Good: Bad Guys, Messy Data, & NLP
Ai for Good: Bad Guys, Messy Data, & NLP
Gil Irizarry
 
DevSecOps Orchestration of Text Analytics with Containers
DevSecOps Orchestration of Text Analytics with ContainersDevSecOps Orchestration of Text Analytics with Containers
DevSecOps Orchestration of Text Analytics with Containers
Gil Irizarry
 
Towards Identity Resolution: The Challenge of Name Matching
Towards Identity Resolution: The Challenge of Name MatchingTowards Identity Resolution: The Challenge of Name Matching
Towards Identity Resolution: The Challenge of Name Matching
Gil Irizarry
 
RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...
RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...
RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...
Gil Irizarry
 
Beginning Native Android Apps
Beginning Native Android AppsBeginning Native Android Apps
Beginning Native Android Apps
Gil Irizarry
 
From Silos to DevOps: Our Story
From Silos to DevOps:  Our StoryFrom Silos to DevOps:  Our Story
From Silos to DevOps: Our Story
Gil Irizarry
 
Building The Agile Enterprise - LSSC '12
Building The Agile Enterprise - LSSC '12Building The Agile Enterprise - LSSC '12
Building The Agile Enterprise - LSSC '12
Gil Irizarry
 
Agile The Kanban Way - Central MA PMI 2011
Agile The Kanban Way - Central MA PMI 2011Agile The Kanban Way - Central MA PMI 2011
Agile The Kanban Way - Central MA PMI 2011
Gil Irizarry
 
Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011
Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011
Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011
Gil Irizarry
 
Transitioning to Kanban - Aug 11
Transitioning to Kanban - Aug 11Transitioning to Kanban - Aug 11
Transitioning to Kanban - Aug 11
Gil Irizarry
 
Transitioning to Kanban
Transitioning to KanbanTransitioning to Kanban
Transitioning to Kanban
Gil Irizarry
 
Beyond Scrum of Scrums
Beyond Scrum of ScrumsBeyond Scrum of Scrums
Beyond Scrum of Scrums
Gil Irizarry
 

More from Gil Irizarry (15)

A Rose By Any Other Name.pdf
A Rose By Any Other Name.pdfA Rose By Any Other Name.pdf
A Rose By Any Other Name.pdf
 
[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...
[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...
[Apple-organization] and [oranges-fruit] - How to evaluate NLP tools - Basis ...
 
[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...
[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...
[Apple|organization] and [oranges|fruit]: How to evaluate NLP tools for entit...
 
Ai for Good: Bad Guys, Messy Data, & NLP
Ai for Good: Bad Guys, Messy Data, & NLPAi for Good: Bad Guys, Messy Data, & NLP
Ai for Good: Bad Guys, Messy Data, & NLP
 
DevSecOps Orchestration of Text Analytics with Containers
DevSecOps Orchestration of Text Analytics with ContainersDevSecOps Orchestration of Text Analytics with Containers
DevSecOps Orchestration of Text Analytics with Containers
 
Towards Identity Resolution: The Challenge of Name Matching
Towards Identity Resolution: The Challenge of Name MatchingTowards Identity Resolution: The Challenge of Name Matching
Towards Identity Resolution: The Challenge of Name Matching
 
RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...
RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...
RapidMiner - Don’t Forget to Pack Text Analytics on Your Data Exploration Jou...
 
Beginning Native Android Apps
Beginning Native Android AppsBeginning Native Android Apps
Beginning Native Android Apps
 
From Silos to DevOps: Our Story
From Silos to DevOps:  Our StoryFrom Silos to DevOps:  Our Story
From Silos to DevOps: Our Story
 
Building The Agile Enterprise - LSSC '12
Building The Agile Enterprise - LSSC '12Building The Agile Enterprise - LSSC '12
Building The Agile Enterprise - LSSC '12
 
Agile The Kanban Way - Central MA PMI 2011
Agile The Kanban Way - Central MA PMI 2011Agile The Kanban Way - Central MA PMI 2011
Agile The Kanban Way - Central MA PMI 2011
 
Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011
Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011
Transitioning to Kanban: Theory and Practice - Project Summit Boston 2011
 
Transitioning to Kanban - Aug 11
Transitioning to Kanban - Aug 11Transitioning to Kanban - Aug 11
Transitioning to Kanban - Aug 11
 
Transitioning to Kanban
Transitioning to KanbanTransitioning to Kanban
Transitioning to Kanban
 
Beyond Scrum of Scrums
Beyond Scrum of ScrumsBeyond Scrum of Scrums
Beyond Scrum of Scrums
 

Recently uploaded

Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 

Recently uploaded (20)

Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 

Graphics on the Go

  • 1. Graphics on the Go Gil Irizarry Conoa
  • 2. About Me • Launched VC News Daily app on iOS and Android. Over 1200 downloads so far. • Owner and lead engineer at Conoa, a graphics and mobile software firm • gil@conoa.com • http://www.slideshare.net/conoagil/
  • 3. About Me • All examples and sample code in this presentation can be found at: – http://conoa.com/hidden/example.zip
  • 4. Why? • There are nearly 2 million mobile apps available today. (http://www.pureoxygenmobile.com/how-many-apps-in-each-app-store/ ) • 1.5 years ago, there were 15K new mobile apps released each week. (http://www.nytimes.com/2011/12/12/technology/one-million-apps-and-counting.html ) • For many, interacting with software means interacting with mobile devices (or at least devices that run mobile software).
  • 5. What we will do • We will learn how to build lightweight mobile apps quickly, using open source tools. • The apps will be cross-platform. • However, we must actually pick a platform on which to build and test the apps. • For this presentation, we will work in Android since the tools are free and easily available. We will do this on Windows.
  • 6. What we will do • (Mostly) everything presented today in the Android environment will apply to iOS, or has an equivalent in that environment. • So, let‟s get started…
  • 7. Assumptions • Setting up a development environment is covered in the Making Mobile Apps Quickly workshop. • For this workshop, we assume that a development environment is in place.
  • 8. PhoneGap • PhoneGap allows HTML pages to be built as mobile apps. • HTML pages can include JavaScript and JavaScript libraries, such as jQuery. • HTML pages can also include HTML5 elements.
  • 9. Canvas • HTML5 includes a new <canvas> element. • Canvas allows the rendering of 2D graphics via some low- level primitives. • It does not include a scene graph API, so you must store rendering information yourself for redrawing a scene.
  • 10. Canvas • Canvas supports: – Basic shapes – Images – Transparency – Compositing – Transforms – Basic animation
  • 11. Graphics Example 1 – Simple Canvas • Select the Graphics Example 1 project in the Package Explorer in Eclipse. • Select Run from the top menu bar • Once the emulator starts and is finished installing the app, you should see something like this:
  • 12. Graphics Example 1 - Create a Canvas
  • 13. Graphics Example 1 – Simple Canvas • This example creates a canvas, gets its drawing context, and draws into it. • It follows a pattern that will soon be familiar: most of the action is happening in JavaScript. • One problem with this example is that the canvas is a fixed size. Let‟s fix that with Example 2.
  • 14. Graphics Example 2 - Better Canvas
  • 15. Graphics Example 2 – Better Canvas • Example 2 queries the size of the window, then adds a canvas to fit the window. In this way, we can make a canvas that would fit any device. • Notice that the position of the text is based on the size of the canvas, which is now based on the size of the device window. The text will be centered on any device the app is run, courtesy of a small amount of JavaScript. • Let‟s see what else we can draw.
  • 16. Graphics Example 3 - More Drawing
  • 17. Graphics Example 3 – More Drawing • This example gives a sense of what can be drawn. • Canvas uses a drawing system similar to Adobe PostScript or Mac OS QuickDraw. This is not surprising considering that Apple developed the initial implementation of canvas before it became a (nascent) standard. • Obtain the graphics context of the canvas for issuing drawing commands
  • 18. Canvas Drawing • beginPath() … fill() or stroke () paradigm • moveTo() / lineTo() for paths • arc() for full or partial circles • bezierTo() for complex curves • fillText() / strokeText() for text
  • 19. Canvas Drawing • drawImage() • colors, either by name or hex values • gradients, linear or radial, and patterns • stroke styles, including stipple patterns and line end caps • push and pop transformations and state
  • 20. Canvas Coordinate System • (0, 0) is in the upper left corner of the canvas. • Increasing y is “down” from the screen‟s perspective. Increasing x is to the right. (0, 0) (0, height) (width, 0)
  • 21. Let’s make a pattern • Find an image from the internet and save it to GraphicsExample3/assets/www • Change this code: – context.fillStyle=gradient; – context.beginPath(); – context.arc(55,155,40,0,2*Math.PI); – context.fill(); • To this code:
  • 22. Let’s make a pattern – var img = new Image(); – img.src = 'clouds.jpg'; // use your image name here – img.onload = function (e) { • var pattern = context.createPattern(img, 'repeat'); • context.fillStyle=pattern; • context.beginPath(); • context.arc(55,155,40,0,2*Math.PI); • context.fill(); – }; • Shapes that you fill will become masks for the underlying pattern.
  • 23. Graphics Example 4 – Touch • Everything so far has been static. • JavaScript has an event system. We saw one in the previous example: onload • Let‟s use other events to add some interactivity.
  • 25. Touch Events • HTML5 canvas adds new events for devices: – ontouchstart – ontouchmove – ontouchend • Note that events come back as arrays. Why? • Because HTML5 supports multi-touch. We can have multiple simultaneous move events.
  • 26. Touch Events • Important to remember that event coordinates triggered by the canvas are relative to the full window. • Events need to be converted to the canvas coordinate system in order to be relevant to the canvas. • Look at function windowToCanvas (canvas, x, y) in Graphics Example 4 source code (found in assets/www folder).
  • 27. Previewing • Examples 1 through 3 work equally well as a PhoneGap- powered mobile app and as a web page. If you haven‟t already done so, trying running assets/www/index.html in a browser. • However, by incorporating touch events, we must run Example 4 and other examples incorporating touch in the mobile emulator.
  • 29. Images • In addition to stroked shapes, we can draw images. • Images can be sourced locally or over the network. • Note how images are loaded: – image.src = filename; – image.onload = function(e) { – }; • If you reference an image before it is loaded, you run the risk that you are trying to use an image before it is available.
  • 30. Images • Images can be scaled and transformed. • Canvas supports compositing and alpha. • Canvas also support shadows. • The example uses an RGBA color value to render semi- transparent text and have it composited over the image. The text is given a drop shadow.
  • 31. Images over the network • To access images over the network (or any data at all), remember that network access must be enabled. On Android, network access is not the default. It must be enabled in the AndroidManifest.xml file: • <uses-permission android:name="android.permission.INTERNET" />
  • 32. Saving and restoring state • save() pushes the current context onto a stack. • In addition to the current transformation, attributes are also pushed. • In the current example, because the text was given a shadow, the shadow applies to the paint object. If we want only the text to have a shadow, we could put the text rendering code inside a save() / restore() block.
  • 33. Graphics Example 6 – Paint and Menus • Since we can render images into the canvas, we can use a set of images and canvases to create menus. • We could also draw into the canvases to render the menu options dynamically.
  • 34. Graphics Example 6 – Paint and Menus
  • 35. Graphics Example 6 – Paint and Menus • Example 6 allows the color and size of the paint brush. • Separate canvases are used for the icon images, and touch event handlers are attached to the canvases. How else could we accomplish this? • The image selector and scale checkbox are standard HTML controls that trigger JavaScript events. We could make <div> elements with <img> elements containing the icons, and put event handlers on the images.
  • 36. Animation • Although we‟ve added some interactivity, the examples so far have been a little static. • Let‟s add some animation.
  • 37. Graphics Example 7 – Simple Animation
  • 38. Animation • self.setInterval () is used to have the page be called again. • Note that the screen is not cleared and that we are adding to the canvas on each call. • Instead, let‟s clear the canvas each frame. We can transform the previous example into a simple clock app.
  • 39. Graphics Example 8 – Simple Clock
  • 40. Animation • This example queries the time from the JavaScript Date() object and draws the hands accordingly. • The canvas is cleared each frame and redrawn. • If you haven‟t already, try running the Graphics Example 8 in a browser (by running assets/www/index.html) • There is something consistently missing in both the emulator and the browser. What is it?
  • 41. Animation • The answer is flicker. The same canvas is cleared and redrawn each frame, yet there is no flicker. • This is because the canvas is inherently double-buffered. • You could implement your own double buffering scheme because HTML5 allows drawing to off-screen drawables. You could draw off-screen, then swap the off-screen memory to the on-screen canvas. However, HTML5 canvas does this more efficiently.
  • 42. Save and Restore • Remember save() and restore()? • Let‟s use them to change the clock face so the text is oriented around the face, much like text on a path in some applications. • Do this by using translate and rotate to change the coordinate system of the fillText() call. • If you can‟t figure out how to do this, look at the commented out code.
  • 43. Graphics Example 8 – Simple Clock
  • 44. Let’s Do Things the Right Way • We have been cutting some corners, so let‟s do things the right way. • PhoneGap should load the JavaScript when it is ready, otherwise you potentially have the problem similar to when you reference an image before it is loaded. • Set a device ready event: – document.addEventListener("deviceready", fnName, false); – fnName is the name of the event handler
  • 45. Let’s Do Things the Right Way • Setting the device ready event requires that the device get set in the config.xml file. This file is not in a default Eclipse project, so it needs to be added manually. It goes in the /res/xml folder. • <feature name="Device"> • <param name="android-package" value="org.apache.cordova.Device" /> • </feature>
  • 46. Let’s Do Things the Right Way • Look at the clock app. Also, try running it in a browser and look at it there. • If you look closely enough, you‟ll see a stutter on the second hand. This is because setInterval() is a general suggestion to the canvas on when to redraw and not a hard commitment. • There is a better way: requestAnimationFrame()
  • 47. Let’s Do Things the Right Way • requestAnimationFrame() is designed to deliver 60 FPS and is made for games or animation. • However, there is a problem. Many browsers don‟t implement it! • Remember that HTML5 is still not a standard!
  • 48. Let’s Do Things the Right Way • webkitRequestAnimationFrame() for Chrome, mozRequestAnimationFrame() for Firefox. • Search for „robust polyfill code‟ to find ways to deal with this. • http://my.opera.com/emoller/blog/2011/12/20/requestanim ationframe-for-smart-er-animating
  • 49. Let’s Do Things the Right Way • Unfortunately, Android and iOS do not support requestAnimationFrame(), at least at the versions we‟ve been supporting in these examples. • In this case, the polyfill code reverts back to setInterval() or setTimeout(). • Another solution is to support only later versions of the OS.
  • 50. Let’s Do Things the Right Way • http://caniuse.com/requestanimationframe
  • 51. Let’s Do Things the Right Way • Let‟s stop the main Android activity from showing up before the HTML loads. • <application android:theme="@android:style/Theme.NoTitleBar" >
  • 52. Graphics Example 9 – Bouncing Balls
  • 53. Playing Sound • In the latest example, a sound is played when a ball bounces. • To enable this, remember to set the correct permissions in both AndroidManifest.xml and config.xml. • Create a PhoneGap media object. This requires the use of cordova.js in addition to cordova.jar.
  • 54. Playing Sound • If you listen closely, you hear that the sounds are not exactly in sync with the bounces. • This is an inherent problem with PhoneGap‟s Media class. • To alleviate, use an uncompressed sound file. • Also, there is the Low Latency Audio Plugin for PhoneGap.
  • 55. Sprites • HTML5 does not support sprites natively but, now that we know how to do animation and draw images, we can simulate them. • drawImage() allows a subset of an image to be drawn. • Every so many frames, we can draw a different part of a larger image. The larger image can be made up of different sprite images.
  • 56. Graphics Example 10 – Bouncing Balls
  • 57. What about 3D? • An emerging standard for 3D graphics in a web page. • However, it is not supported by iOS or Android browser and has no support within PhoneGap.