I’ve been asked on more than one occasion, can you access Bluetooth devices in PhoneGap applications. The answer is YES, you can. There is not a specific “Bluetooth API” in PhoneGap, however you can create native plugins to access any native library. Basically, with a native plugin, you create the native interface (written in the native language), and a JavaScript interface. The native and JavaScript interfaces can leverage the PhoneGap native to JavaScript bridge for bidirectional communication.

In this exploration, we researched whether or not you can use a pressure sensitive stylus with a PhoneGap application. Again, the answer is YES, you can. Check out the video below to see a sample application in-action. This example demonstrates the use of a TenOne Pogo Connect Stylus inside of a PhoneGap application.

Note: This is not connected to Project Mighty in any way – Kevin and I started exploring completely separately from the big announcements at MAX.

The Pogo Connect stylus leverages Bluetooth 4 Smart (low energy) connectivity to communicate with the device, and provides pressure sensitivity and a physical button for the user to interact with. The JavaScript interface doesn’t interact directly with with the Bluetooth connection. Instead, I leveraged TenOne’s Pogo Connect SDK and created a JavaScript bridge layer to delegate pen interaction from the SDK to the JavaScript layer.

There were definitely a few tricks to get this working. First, the SDK is designed to accept touch input at the native layer, and determine whether or not that touch is from the pen. When using the SDK (in Objective-c), you are supposed to implement the touchesBegan, touchesMoved, touchesEnded, and touchesCancelled functions for a view:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event;

In those functions, you check if any of the touches are pens, and if so, do something with that pen input.

- (void) touchesBegan: (NSSet *)touches withEvent:(UIEvent *)event {
	for (UITouch *touch in touches) {
		if ([pogoManager touchIsPen:touch]) {
			//do something with the pen
		}
	}
}

The first catch with implementing this inside of a PhoneGap application is that you can’t override the touch handlers of a web view on iOS. Luckily, there is another way! I leveraged a UIGestureRecognizer instance to intercept the touch input that is received by the web view, determine if the touches were from the PogoConnect Stylus, and if so, then delegate that input back to the JS layer.

UIGestureRecognizer is normally used as a base class for creating custom gestures in iOS applications. If has everything you need to handle touch input, and it gives you that information without having to subclass an actual view. This means you can attach it to any UIView instance. Since you don’t have to subclass a view to use this, this plugin can be implemented in a PhoneGap native plugin without having to modify *any* code inside the PhoneGap framework.

So, here’s how I did it… Once the PhoneGap plugin is initialized on load, I create a gesture recognizer instance and attach it to the PhoneGap application’s web view. Whenever touch input is received by the gesture recognizer, that input is passed back to the PhoneGap plugin instance, which executes JavaScript on the web view to pass that information to the JavaScript layer in real time as it is received.

On the JavaScript layer, stylus/pen input is dispatched to the application as custom events on the window.document object. To subscribe to pen input in JavaScript, you just add event listeners for the Pogo Connect events that I defined in the native plugin’s JavaScript file.

document.addEventListener( pogoConnect.PEN_TOUCH_BEGIN, app.penTouchBegin );
document.addEventListener( pogoConnect.PEN_TOUCH_MOVE, app.penTouchMove );
document.addEventListener( pogoConnect.PEN_TOUCH_END, app.penTouchEnd );

Information about the stylus will be contained in the event.detail attribute, and will be an instance of this object (containing accurrate values about the pen’s state, of course):

{
    identifier: 0,
    connected:false,
    x:NaN,
    y:NaN,
    pressure:0,
    buttonDown:false,
    tipDown:false,
    lowBattery:false
}

In JavaScript, you can do whatever you want within your application once you receive this information.

I created two sample applications to test this functionality. The first is a very basic app that simply outputs the pressure as text which follows the pen tip. The intent with this app was really just to prove the concept and determine if it was actually possible to receive and respond to information from the stylus.

Basic Pressure Sensitivity Detection in PhoneGap

Once I proved it could be done, the next logical step was to create an app that actually takes advantage of the pressure sensitivity information. So, I made a sketching app.

Pressure Sensitive Sketching in PhoneGap

I started off by expanding on the drawing logic from my Lil’ Doodle PhoneGap application. This uses a requestAnimationFrame interval to render content in an HTML Canvas element using a “brush image” technique. Next, I added logic to vary the opacity and stroke size based on the pressure information received from the pen plugin, and a few other options to change the pen tip/brush shape and color.

The pressure sensitive stylus gives a few interesting interactions that you wouldn’t get without the hardware:

• First, the obvious, you know the pressure being applied to the pen tip, and the app can respond accordingly.
• Next, you have an extra input method. The button on the pen allows you to interact with the device without having to actually touch the device. I used the button in two ways: first, if the button is pressed and held, the pen erases instead of draws. Second, if you double-tap the pen button, it brings up the drawing options. These options are where I placed controls to modify the pen color and stroke.
• Third, the plugin provides bidirectional communication with the Stylus. When you change the pen color, the LED on the pen will display the selected color for a few seconds.

I used a modified version of DevGeeks’ Canvas2Image plugin to save the content of the HTML Canvas to the device’s photo library. I also had to leverage a variation of this technique for getting the data from the Canvas element without transparency.

All button and slider styling leverages Topcoat, Adobe’s brand new open source CSS framework designed to help developers build HTML-based apps with an emphasis on performance.

Full source code for this application is available on GitHub at https://github.com/triceam/PGPogoConnect

Note: This is iOS only – The third-party PogoConnect SDK is for iOS devices only. This example will also ONLY work if you have the PogoConnect Stylus. It does not support other stylus devices or finger-only drawing.

You can access my presentation slides at the links below.  Just use the “space” key to advance each slide.

• http://www.tricedesigns.com/presentations/dc_data_viz/

You can also view all the associated resources from the presentation at:

• http://www.tricedesigns.com/presentations/dc_data_viz/interact/

Here are just a few images from the event, and you can find more presentation details below:

Key Takeaways

Here are links to the Adobe HTML resources I mentioned at the beginning of the presentation.

• html.adobe.com
• PhoneGap
• PhoneGap Build
• Adobe Web Platform Team

Here is a direct link to the simple interactive data experience that was created using Adobe Edge Animate (also available for download in the Edge Animate Showcase):

Edge Animate Data Sample

Visualization Techniques

<img>

You can embed images using the html <img> element that have server-rendered data visualizations. This is nothing new… They are very basic, but will certainly work.

• Not interactive
• Requires online & round-trip to server
• No “WOW” factor – let’s face it, they are boring
• Example: Google Image Charts

HTML5 <canvas>

You can use the HTML5 <canvas> element to programmatically render content based upon data in-memory using JavaScript. The HTML5 Canvas provides you with an API for rendering graphical content via moveTo or lineTo instructions, or by setting individual pixel values manually.  Learn more about the HTML5 canvas from the MDN tutorials.

• Can be interactive
• Dynamic – client side rendering with JavaScript
• Hardware accelerated on some platforms
• Can work offline
• Works in newer browsers: http://caniuse.com/#search=canvas

Gun Violence Visualization – Please, let’s not discuss the politics.

HTML5 Canvas Scatterplot with Histogram (50K data points)

HTML5 Canvas Chart – Asteroids Analysis

HTML5 Canvas – Three.js 3D Chart

Scalable Vector Graphics (SVG)

SVG is a declarative XML-based markup language that is used to create vector graphics content, and can be used to create visual content inside of web experiences.

• Client or Server-side rendering
• Can be static or dynamic
• Can be scripted with JS
• Can be manipulated via HTML DOM
• Works in newer browsers (but not on Android 2.x and earlier): http://caniuse.com/#search=SVG

SVG – James Bond Visualization

SVG – Sankey Diagrams

SVG – Connected Scatterplots

SVG – Bullet Charts

HTML DOM Elements

Visualizations such as interactive maps, or simple charts can be created purely with HTML structures and creative use of CSS styles to control position, visual presentation, etc… You can use CSS positioning to control x/y placement, and percentage-based width/height to display relative values based upon a range of data. For example, the following bar chart/table is created purely using HTML DIV containers with CSS styles.

WebGL

WebGL is on the “bleeding edge” of interactive graphics & data visualization across the web. WebGL enables hardware-accelerated 3D graphics inside the browser experience. Technically, it is not a standard, and there is varied and/or incomplete support across different browsers (http://caniuse.com/#search=webgl).  There is also considerable debate whether it ever will be a standard; however there are some incredible samples out on the web worth mentioning:

WebGL – Globe w/ Arms Trading Data

WebGL – New Google Maps

WebGL – World Population

WebGL – Sample Visualization (could be used for molecule structure)

Interactive Coding

I also put together several interactive/editable samples for demonstrating basic visualization techniques.  You can preview all of these samples on my Data Visualization Collection on Codepen.io.

Interactive Coding in the Browser on CodePen.io

Enjoy!

The Sound Remover enables you to select specific sound frequencies and patterns, and remove them from a sound file/composition. Imagine that you have a great recording which was ruined by a cell phone ringing, birds chirping in the background, or someone slamming a door. Now it is possible to easily remove those specific frequencies and patterns without losing or damaging the entire audio file. Check out the video below for an example.

In a nutshell, the process is this:

• In the Spectral Frequency Display, use the paintbrush selection tool to select the frequencies and patterns you want to remove.
• Go to the Effects menu and select Noise Reduction/Restoration -> Learn Learn Sound Model.
• Select the clip/segments that you want to be affected.
• Go to the Effects menu and select Noise Reduction/Restoration -> Sound Remover (process).
• Next, change the settings as appropriate for your sounds/compositions, and hit “Apply”.

You can learn more about some of the other great features in Adobe Audition CC in the video below from Adobe TV:

Or, you can learn more about the exciting new features coming in June’s Creative Cloud update on adobe.com and see video previews of a lot of the new Audio/Video features.

This can have huge implications, everything from enhancing precious photos of your loved ones, to crime analysis and forensics. Speaking of which, did you know Adobe does some amazing work with law enforcement and image forensics?

Like any other curious individual, I wanted to test this out on my own, with my own photographs. So, I broke out my camera, set it to have a slow shutter speed (for intentionally blurry photos), and started walking around and taking pictures. I was completely blown away by the outcome.

Let’s take a look at the results…

In all of the following examples, the image on the left is the original. The image on the right is the enhanced/corrected image. The only changes that I have made are camera shake correction and minor color/contrast corrections. I have not used any other touchup/enhancement or alteration techniques. It’s amazing how much detail was able to be pulled out of the original blurred images.

First, let’s take a look at an office building. The enhanced image has much more detail, including brick textures, more readable/discernable content, and while it has some minor artifacts, it is a huge improvement.

Click to view full size image

Now, let’s look a little bit closer… If you’ve already glanced at the image below, you’ll see that I was able to extract the license plate from a car that just happened to be passing at the time I took the photo.

Seriously, this is real. All of those “image enhancement” sequences that you’ve seen in crime and sci-fi movies and TV shows (which you’ve probably rolled your eyes at) are now a reality. Still don’t believe me? Take a look at this video I put together for a closer look.

Note: I edited this down to the “short version”, in reality it took a lot more trial and error and permutations of the shake reduction tools to achieve the final result.

That’s not all, I was able to extract detail about other items in the photograph. For example, You can now see enough detail to identify the light bulb in the street lamp.

You can even make out the faint outline of the bicycle and arrow on the “bike lane” street sign behind the car.

Pretty cool, right? Now, let’s take a look at another example. Again, the blurry image on the left is the *original*.

Click to view full size image

You can see that the enhanced image is sharper and has more detail. Let’s look a bit closer…

In the original image, did you see that guy in the blue shirt standing walking towards the white van? Yeah, neither did I:

Or, could you tell what kind of cars were in the parking lot? I know I couldn’t in the original, but I can make a much better educated guess in the enhanced image:

OK, let’s take a look at one more. In the enhanced photo on the right, you can see much more detail… everything from the brick patterns, to street signs, to details on people and objects.

Click to view full size image

While you still can’t read the entire law office sign, you can certainly see more detail in both the sign and the surroundings.

.

You can also make out much more detail on people, doorways to buildings, flowers, and leaves on the trees.

Again, The only changes that I have made are camera shake correction and minor color/contrast corrections. There have been no other modifications made to these images.

All of my test images have fairly significant shake blurs. Due to the extreme amount of blur, there are some visual artifacts. Any images that have a less extreme blur will have fewer artifacts, with enhanced clarity.

You can reduce artifacts and improve the final output quality by experimenting with the Camera Shake Reduction options. You can create multiple regions for estimating blur, and adjust trace bounds, smoothing, and artifact suppression for each. You’ll likely need to experiment with the settings and try different permutations to achieve optimal results, but you’ll be amazed by the outcome.

Camera Shake Reduction Options

It’s important to understand that while it can “work miracles” on some images, the Shake Reduction feature will not correct all blur in all types of images. If the blurring is because your image is simply out of focus, this probably won’t help. Again, it is intended to correct blurs caused by a shaky camera situation.

If you’re wondering how to get this feature, just go over to creative.adobe.com and become a Creative Cloud member today! Photoshop CC will be available in June, and you’ll be notified.

One of my first tasks upon downloading Android Studio was to get a PhoneGap app up and running in it. Here’s how to get started. Note: I used PhoneGap 2.7 to create a new project with the latest stable release, however you could use the same steps (minus the CLI create) to import an already-existing PhoneGap application. Be sure to backup your existing project before doing so, just in case you have issues (Android Studio is still in beta/preview).

First, follow the PhoneGap “Getting Started” instructions all the way up to (and including) the command line invocation of the “create” script.

Once you have the Java environment configured just run the create script to create a based PhoneGap project. In this case, I used the following command to create a new PhoneGap project:

./create ~/Documents/dev/android_studio_phonegap com.tricedesigns.AndroidStudioPhoneGap AndroidStudioPhoneGap

Next launch Android Studio. When the welcome screen appears, select the “Import Project” option.

Next, you’ll have to select the directory to import. Choose the directory for the PhoneGap project you just created via the command line tools.

Once you click “OK”, you will proceed through several steps of the import wizard. On the next screen, make sure that “Create project from existing sources” is selected, and click the “Next” button.

You will next specify a project name and project location. Make sure that the project location is the same as the location you selected above (and used in the PhoneGap command line tools). I noticed that the default setting was to create a new directory, which you do not want. Once you’ve verified the name and location, click “Next”.

On the next step, leave the default settings (everything checked), and click “Next”.

Again, leave the default settings (everything checked), and click “Next”.

Yet again, leave the default settings (everything checked), and click “Next”.

For the last time, leave the default settings (everything checked), and click “Next”. This is the last one!

Next, review the frameworks detected. If it looks correct to you, click the “Finish” button.

Android Studio should now open the full IDE/editor. You can just double click on a file in the “Project” tree to open it.

To run the project, you can either go to the “Run” menu and select “Run {project name}”, or click on the “Run” green triangle icon.

This will launch the application in your configured environment (either emulator or on a device). You can see the new PhoneGap application running in the Android emulator in the screenshot below. If you’d like to change your “Run” configuration profile, go to the “Run” menu and select “Edit Configurations”, and you can create multiple launch configurations, or modify existing launch configurations.

Enjoy!

Adobe Edge Web Fonts

Check out the video below to see the new interface in action:

Also shown in the video is Adobe Edge Code for live editing/previewing HTML in the browser.

Enjoy!

Project Mighty is a pressure sensitive pen that enables expressive drawing. However, it’s not *just* a pressure sensitive stylus/pen. Project Mighty knows who you are, and is connected to Creative Cloud to enables quick access to your personalized Kuler themes, and a cloud-clipboard for copying assets across devices.

Project Napoleon is a tool designed to complement Project Mighty by bringing an analog experience back to the digital creation process. Project Napoleon is a drawing aid that enables the experience of a T-square or Triangle in the digital/tablet world.

You can check out both of these tools in action in this excerpt from the Adobe MAX day-one keynote:

I strongly suggest checking out the Adobe Featured Blog to learn more about both Project Mighty and Project Napoleon. You can also sign up to be notified and learn more about Adobe’s explorations into cloud enabled hardware at http://xdce.adobe.com/mighty/

Thanks to Ray for sharing on twitter!

The first-day keynote focuses on Adobe’s evolution of Creative Cloud and various product updates. The second day keynote focuses upon inspiration – do not miss this one.  I especially liked Erik Johansson and Rob Legatto’s segments.

Day 1 Keynote: A Creative Evolution

About This Episode: The process of where and how we create is dramatically changing thanks to major advancements in technology, and there has never been a more exciting time. Join Adobe CEO Shantanu Narayen, Adobe’s SVP and GM of Digital Media David Wadhwani, and a collection of Adobe visionaries across digital photography, web design, illustration, video and more as we unveil brand new creative workflows and capabilities. We’ll take a look at the present and set our sights on the endless possibilities in our creative future.

Day 2 Keynote: Community Inspires Creativity

About This Episode: Join David Wadhwani, Adobe’s SVP and GM of Digital Media, as he welcomes four incredibly creative minds to explore how they foster creativity and approach their work. You will hear from Rob Legato, an Oscar winning visual effects supervisor; Paula Scher, an iconic graphic designer and illustrator; Erik Johansson, an up and coming photographer and retouch artist; and Phil Hansen, a constraint-based artist that believes limitations drive creativity. We think you’ll leave with more than a few new ideas to incorporate in your next creative project.

You can view all Adobe MAX 2013 session recordings online at: http://tv.adobe.com/show/max-2013/ (Keep in mind, not all videos are up yet, but will be added soon).

Update: Videos of MAX Sneaks also available via the Adobe Creative Cloud Youtube Channel.

Major Update to Creative Cloud

Basically, just about everything in the keynote is related to the major updates for Creative Cloud. This includes the vision and direction of Creative Cloud, and all of the tools and services that you are able to take advantage of with your Creative Cloud membership.

First and foremost, Adobe is shifting emphasis from packaged software releases to focusing on the Creative Cloud. From the press release:

Adobe also announced that the company will focus creative software development efforts on its Creative Cloud offering moving forward.  While Adobe Creative Suite® 6 products will continue to be supported and available for purchase, the company has no plans for future releases of Creative Suite or other CS products. Focusing development on Creative Cloud will not only accelerate the rate at which Adobe can innovate but also broaden the type of innovation the company can offer the creative community.

The shift to Creative Cloud is great for more reasons than I could possibly list in one post. To start:

1. Creative Cloud membership gives you the latest and greatest updates from Adobe, without an upgrade cost, and without having to wait for a boxed release cycle. As soon as updates to the tools are ready, you receive them.
2. Creative Cloud gives you the ability to have your content everywhere. Not only do you get a shared file space in the cloud that automatically synchs across your computers (complete with private folders and versioning), but you can also have creative applications on multiple computers, you can access your files on Creative Cloud from any device (including your phones and/or tablets), and your application settings can be synched with the cloud.
3. Creative Cloud membership makes it easy to share your work. You can share your work with the public (either through Creative Cloud sharing, or through Behance integration).

I strongly suggest reading more about Creative Cloud update here, and learning about the vision for Creative Cloud. There is a lot of rumor and misinformation also floating around, so please, please, please read 5 Myths About Creative Cloud, and be sure to check the FAQ if you have any additional questions. Or, just watch the video below, where fellow Adobe evangelist Paul Trani debunks myths about Creative Cloud:

Contrary to FUD that is floating around the Internet, Creative Cloud is not about anti-piracy, it is not about price gouging, it is not about trying to control you. Creative Cloud is about providing you with the best tools and services to produce creative experiences, collaboration, and adding value to your workflow.

For an external (non-Adobe) viewpoint, check out what others have had to say:

• Forbes: Adobe’s Creative Cloud And The Expansive Future Of The Digital Workplace
  
• PC Mag: A Killer Event
• Scott Kelby’s take on Adobe’s Announcements

I’ll cover more product specific updates in Creative Cloud tools later in this post, but check out the “new features” details to get an idea of what is now available. Or check out fellow evangelist Terry White’s videos on “What’s New In Photoshop CC, Illustrator CC, InDesign CC and Muse CC“.

Improved Desktop Presence

In addition to product updates, the Creative Cloud update also features an improved desktop presence for managing your tools and files.

From the Creative Cloud team blog, this desktop update will allow you to:

• Manage your files and sync them to the Cloud
• Install and update your desktop software
• Install and manage your Typekit desktop fonts
• Keep track of everything in your creative work, from Behance notifications, to collaboration invitations, and even updates to your CC apps — all in a single activity stream.

Behance Integration

It’s now easier than ever to showcase your work and gather feedback. You can now publish to Behance directly from within Creative Cloud. You can learn more about Creative Cloud and Behance community integration on adobe.com, but here’s a sampling:

• Share a work in progress from your Creative Cloud files or within Adobe® Photoshop® and get immediate feedback from the creative community.
• As you perfect your work, upload new versions to Behance. The community can follow the evolution of your project and post comments along the way.
• Broadcast your work on Twitter, LinkedIn, and Facebook from within your Creative Cloud tools, all powered by Behance. All in just a few clicks.
• Creative Cloud keeps track of who’s following you, who appreciates your work, what’s happening with the creatives you’re following, and more — all in a single activity stream.

Creative Cloud membership also comes with the pro features of Behance, including ProSite:

ProSite — a fully customizable professional portfolio with your own unique URL. And with Creative Cloud integration, keeping your portfolio up to date simply becomes part of your usual workflow.

TypeKit Fonts on the Desktop

As part of your Creative Cloud membership, you get access to 175 TypeKit fonts, which can be easily installed through the Creative Cloud desktop application, and are available to your entire desktop. If you were to license each of these fonts individually, it would cost you roughly $25,000. With Creative Cloud membership, you get these with no additional cost. You can read more about TypeKit and desktop font synching on the typekit blog, and see a preview of it in action in the video below:

Product Updates

There are hundreds of new or updated features to Adobe’s desktop applications and services with the latest Creative Cloud update. Here are just a few highlights from the Creative Cloud Team Blog:

• Camera Shake Reduction in Photoshop CC “deblurs” an image by restoring sharpness to images blurred by camera shake
• ACR8 is now available as a filter in Photoshop CC; you can apply Adobe Camera Raw processing to any of the layers in your document
• Touch Type tool in Illustrator CC allows you to design with type in a powerful new way by manipulating characters like individual objects. You can also use multitouch devices as well as a mouse or stylus
• CSS Designer in Dreamweaver CC provides the most up-to-date CSS and properties available via an intuitive visual editing tool
• Editing Finesse in Premiere Pro CC focuses on sleek design and customization capabilities, combined with new editing features and keyboard-driven editing improvements
• Live 3D Pipeline with Cinema4D in After Effects CC lets you add 3D objects to scenes and eliminate intermediate rendering between applications
• Parallax Scrolling in Muse CC allows you to create stunning effects with just a few mouse clicks—images and elements move in different directions at different speeds when scrolling
• Motion Paths in Edge Animate allows you to animate elements along totally customizable paths
• A completely modernized architecture in InDesign and Flash Pro has been rebuilt from the ground up to be faster and more reliable, with a streamlined UI
• InDesign has a great new QR code creator
• Flash Pro has real-time drawing and live preview

Check out the links below to see all of the new features for each one of the Creative Cloud tools that will be available in June (there are too many for me to list individually on this post):

• Adobe Photoshop CC
• Adobe After Effects CC
• Adobe Premiere Pro CC
• Adobe InDesign CC
• Adobe Flash Professional CC
• Adobe Illustrator CC
• Adobe Muse CC
• Adobe Dreamweaver CC
• Adobe Audition CC
• Adobe SpeedGrade CC
• Adobe Prelude CC

In addition to Creative Cloud tools, there have also been updates to the Edge Tools and Services. Adobe Edge Web Fonts has an updated interface on online presence available now, and other Edge Tools have updates that will arrive in June. You can read more about these tools below:

• Adobe Edge Animate CC
• Adobe Edge Code CC
• Adobe Edge Reflow CC

And there have been updates to Adobe’s touch apps:

• Adobe Ideas
• Adobe Kuler (coming soon)

Creative Cloud

You can always stay on top of the latest updates to Creative Cloud on the Creative Cloud Team blog. If you’re not already a member of Creative Cloud, you really should check it out at creative.adobe.com