Adobe Edge Inspect CC is an awesome tool for synchronized browsing experiences across both desktop and mobile devices. It is incredibly powerful, and streamlines the developer & testing workflows by reducing iterations when testing HTML/JS experiences on multiple devices.
Adobe Edge Code CC is an awesome code editor for creating HTML/JS experiences. It has a live connection to the browser, so you can see your edits in the browser in real time as you are editing your code… all without having to leave the code editor.
Wouldn’t it be cool if Adobe Edge Code CC could push updates to mobile devices leveraging Adobe Edge Inspect CC? Oh wait, what? It already can? YES, it can! This is one of the coolest new features in this week’s Creative Cloud release. You can edit your code in Edge Code CC, and preview your changes live, and in real time in both the desktop browser and on mobile devices. Take a look at the video below to see it in action:
OK, so how do you get it? Become a member of Creative Cloud… Membership does have it’s perks! This is available in all of the plans, even the free option. This plugin for Edge Code CC/Brackets is also open source. Know what else is cool about Adobe Edge Inspect CC? It has an open source JavaScript API that you can leverage to integrate your own apps into an Edge Inspect workflow or continuous integration environment. It’s definitely worth checking out.
Recently I’ve undertaken some explorations with fellow evangelist Kevin Hoyt, trying to determine how far we can push PhoneGap applications with devices and physical computing. Turns out, you can push things really far and now I’m delighted to share one of the experiments that we’ve been pursuing.
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:
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.
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):
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.
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.
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.
Last night I had the opportunity to give a presentation on Data Visualization With Web Standards to the DataVizDC meetup group. First of all, I’d like to thank the meetup group for hosting the event, and thank you to everyone who attended – It was a great event thanks to the excitement and energy brought by each of you. I promised to post a video recording, but unfortunately the video feed didn’t turn out (due to an error on my part). Luckily, I was able to save the audio feed, which you can listen to here:
You can access my presentation slides at the links below. Just use the “space” key to advance each slide.
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.
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.
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.
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.
Yesterday at GoogleIO, Google announced Android Studio, a new development environment for authoring Android applications. This is a great looking new IDE for Android, based off of IntelliJ IDEA, with some new Android-specific tools and features. You can read more about Android Studio on the Google Android Developers blog.
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).
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:
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.
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.
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/