Highlights include a new Sensor API, the ability to have plug-ins use both processor cores, and improvements to audio and video playback, plus various updates to Enyo we think you’ll like. We’ve also incorporated a homebrew patch to the Bluetooth SPP service to support binary data, so we expect to see some hardware hacks soon. (Hmm—new App Hack theme?)

Enjoy!

Without further ado, we are pleased to announce that this week’s winner of the contest and an HP TouchPad is…

Fun with Street View by Carl McGraw

Pick a starting point in Google Street View, put your virtual car in gear, and start driving. Want to look around on your drive? No problem, just tilt the TouchPad side-to-side. You even get a field-of-view indicator to show you where you are looking in relation to the map. The progression rate is controlled by the selected “gear”. Overall, a fantastic revamp of the standard interface. Great job, Carl! We’ll be in touch about your new TouchPad!

Honorable Mentions

Paper Maché Beta by Ryan Watkins

You know all about Paper Maché (okay, you may have been living in a cave, but then you wouldn’t be reading this), and for the App Hack, Ryan has added accelerometer based scrolling. You can scroll up and down an article, or shortcut to the top or bottom. There’s an option to scroll by page, or flip pages by flipping the device. Nice!

Aceleracion by Karlos Liberal

More of a visual experience than anything, Aceleracion gives us a dynamic field of particles moves around in response to the tilting of the TouchPad. Touching the screen changes the color of the particles. We love interactive art. More!

Stay tuned for the winners of the Desktop Accessories App Hack, and keep those entries coming!

If you’ve been wondering how to start using other libraries with Enyo, webOS Developer Relations Engineer Jeremy Thomas has a new tutorial on the Developer Portal just for you. Check it out here.

Consistent user interaction is one of the keys to happy users. So, check out Tomomi’s tutorial and get coding!

The apps are in and judging has begun. We will have the winners of the Text to Speech challenge up in a few days. Thanks to everybody who submitted apps!

This week’s challenge is to do something with Exhibition Mode, one of the most under-appreciated features of webOS.

Exhibition mode is a way to turn your TouchPad into an ambient display. When the user puts their TouchPad onto the TouchStone dock, the device will go into a special mode where a single app is shown and the screen will never turn off.  Exhibition mode apps are used for things the user wants to see in the background rather than something they will focus their attention on.

So what is a good use for an ambient display? Lots of things! The classic examples are a clock or a photo slideshow but there is so much more you could do with the concept. What information would be useful if you could glance at it rather than directly interacting with it? How about a realtime weather map? A list of tweets posted to a hashtag during a party?  A music visualizer? A webcam display? How about showing the status of the last 4 builds on your continuous build server? If the build breaks it flashes red and plays an alarm. The possibilities really are endless.

Since we are getting to the holiday season I chose to make a clock that displays the number of days to Christmas, in decimal. And just to make it a bit more fun I added falling snowflakes.  The code was actually quite simple. I used my open source drawing program, Leonardo Sketch, to  draw the entire interface, then exported it to a webpage using Amino to draw everything with Canvas. Finally I added the snow and text effects with hand coding. Once I knew it worked in Chrome I just added an appinfo.json file and packaged it up. Nothing special is required; not even Enyo initialization (Amino will do the PalmStage stuff for you).

Turning Christmas Countdown into an exhibition mode app was really easy.  I just added the line  "dockMode": true to my appinfo.json file. webOS detects this and lets the user choose my app from the Exhibition Mode preferences.  That’s all there is to it.  This page has more on how to use Exhibition mode, including how to tell which way your app is launched.

You can find the source for my at our new App Hack Github repository here. It’s also available in the catalog here.

You’ve got one week to make an interesting app that uses Exhibition mode. We can’t wait to see what you come up with!

The Rules

1) Submit your app based on the sample above to the App Catalog by October 18th at 11:59pm Pacific Daylight Time. We will be accepting both new apps as well as incorporation of the theme into existing apps as an improvement. A submission to the Beta catalog is acceptable.

2) Notify us that you want to participate in the App Hack by sending us an email containing your app redirect link (it’s generated automatically and placed on the app’s detail page in “My Apps”) and any extra information you want to share with us at apphack@palm.com. This is also due by October 18th at 11:59pm Pacific Daylight Time.  If you do not send us this note, your app will not be considered for the App Hack.

3) By the end of the day on Friday, October 21st, the Developer Relations team will announce the winning app (along with honorable mentions and other entrants). The winner will get a blog post dedicated to him/her and his/her fantastic app.

Additional terms and conditions

NO PURCHASE NECESSARY AND PURCHASE WILL NOT INCREASE CHANCE OF WINNING. OPEN ONLY TO REGISTERED DEVELOPERS.  HP reserves the right to request additional information for consideration. False information disqualifies you and your app from consideration, making it subject to review under applicable laws. Violators may be prosecuted. This offer is void where prohibited or restricted by law. Taxes, if applicable, are winner’s responsibility.  HP employees are not eligible.  Winner may have to sign and return an eligibility and liability release, unless prohibited.  If eligible winner fails to sign and return required documents, prize may be forfeited.  HP is committed to protecting your privacy. Your personal information will not be passed on from HP without your explicit consent.  Visit our Online Privacy Statement to learn how we use automatic data collection tools and your personal information to tailor your communications. Neither party acquires any patent, copyright, mask work or trademark rights during this event. Participation imposes no obligation on either party to purchase, sell, license, transfer or otherwise dispose of any technology, services or products, and does not create any agency or partnership relationship. The terms herein may be added to or modified by HP at any time at its sole discretion. Additional terms and conditions may apply. Entry constitutes agreement to rules and HP’s decisions. Entrants release and hold harmless HP, its subsidiaries, affiliates, and their officers, directors, employees, agents from any claim arising out of entry or prize receipt or use.

You’ll find the article on the HP webOS Developer Center here.

You have to submit it to the app catalog by October 11th at 11:59pm Pacific Daylight Time to enter. (Submitting to the Beta catalog is fine.) You must then notify us of your entry by email us a link to the app at apphack@palm.com.

The developer of the best app will earn a glory and adulation and the right to call themselves an App Hack Ninja. And to kick off the series, this week’s winner will receive a 32GB TouchPad!

This Week’s Theme

This week’s theme is Text to Speech, and I have pleasure of presenting you with a sample snippet to get you started. This is the library we’ll be using: http://www.speech.cs.cmu.edu/flite/.

I have compiled the open source C based Flite library from CMU for ARM. Then I created a simple PDK hybrid plugin wrapper with a single method: playAudio().  It will play any text you give it using asynthesized robot voice.  All you have to do is include the plugin in your Enyo app and call the right method. Here’s a quick example:

enyo.kind({
	name: "TTSTest",
	kind: "VFlexBox",
	components: [
		{
		    kind: enyo.Hybrid,
		    name: "plugin",
		    width: 0,
		    height: 0,
		    executable: "sdltts",
		    takeKeyboardFocus: false,
		    onPluginReady: "handlePluginReady"
		},
		{
		    name: "input",
		    kind: enyo.Input,
		    value:"I'm sorry Dave. I'm afraid I can't do that."
		},
		{
		    kind: enyo.Button,
		    onclick: "handleClick",
		    caption: "Say something",
		}
	],
	pluginReady: false,

	create: function() {
		this.inherited(arguments);
		console.log("in create");
	},
	handleClick: function(inSender) {
	    console.log("clicked");
	    if(this.pluginReady) {
	        var text = this.$.input.getValue();
	        console.log("saying text: " + text);
	        var status = this.$.plugin.callPluginMethod("playAudio",text);
	        console.log("status = " + status);
		}
	},
	handlePluginReady: function(inSender) {
		console.log("plugin initialized");
		this.pluginReady = true;
	},

});

The code above creates a Hybrid object with a width and height of 0 so that it won’t show up on screen. It’s just audio, no visuals. Then it calls this.$.plugin.callPluginMethod(“playAudio”, some text);whenever you click the button. That’s all there is to it.

You can download the full app, including the hybrid plugin, here.

Of course, this app just speaks whatever the user types into a simple text box. I’m sure you can come up with something far more interesting.

See you next week!

- Josh

The Rules

1) Submit your app based on the sample above to the App Catalog by October 11th at 11:59pm Pacific Daylight Time. We will be accepting both new apps as well as incorporation of the theme into existing apps as an improvement. A submission to the Beta catalog is acceptable.

2) Notify us that you want to participate in the App Hack by sending us an email containing your app redirect link and any extra information you want to share with us at apphack@palm.com. This is also due by October 11th at 11:59pm Pacific Daylight Time.  If you do not send us this note, your app will not be considered for the App Hack.

4) By the end of the day on Friday, October 13th, the Developer Relations team will announce the winning app (along with honorable mentions and other entrants). The winner will get a blog post dedicated to him/her and his/her fantastic app.

5) For this first round, the winner (and only the winner) will also receive a 32GB TouchPad!

Additional terms and conditions
HP reserves the right to request additional information for consideration. False information disqualifies you and your app from consideration, making it subject to review under applicable laws. Violators may be prosecuted. This offer is void where prohibited, taxed or restricted by law. HP employees are not eligible.

HP is committed to protecting your privacy. Your personal information will not be passed on from HP without your explicit consent.

Neither party acquires any patent, copyright, mask work or trademark rights during this event. Participation imposes no obligation on either party to purchase, sell, license, transfer or otherwise dispose of any technology, services or products, and does not create any agency or partnership relationship. The terms herein may be added to or modified by HP at any time at its sole discretion. Additional terms and conditions may apply.

Interested? Here’s how it works:

1) We announce the theme of the Weekly App Hack on the Developer Relations blog and post a bit of relevant code to help you do something fun and interesting with webOS. This will usually be on a Wednesday.

2) Start coding! You will have one week from the day we post the App Hack theme to develop your app and submit it to the App Catalog. This will be due 11:59pm California time on the following Tuesday (if the hackathon started on Wednesday). We will be accepting both new apps as well as incorporation of the theme into your existing apps as an improvement.

3) Once you have submitted your app to the app catalog, send an email to apphack@palm.com with your app redirect link and any extra description you want to share with us. This will also be due 11:59pm California time on the following Tuesday (if the hackathon started on Wednesday). Don’t worry, we’ll post the due date and time along with the theme on the Developer Relations blog. Note that you must send us this email for your app to be considered for the hackathon.

4) By the end of the day on Friday, the Developer Relations team will announce the winning app (along with honorable mentions and other entrants). The winner will get a blog post dedicated to him/her and his/her fantastic app. And for this first round, the winner will also receive a 32GB TouchPad!

We have started the webOS Weekly App Hack to encourage our fantastic developer community to think out of the box and develop in some fun and exciting new directions, and to give you a head start by presenting you with new code to work with. We look forward to seeing what comes out of the webOS Weekly App Hack!

Additional terms and conditions
HP reserves the right to request additional information for consideration. False information disqualifies you and your app from consideration, making it subject to review under applicable laws. Violators may be prosecuted. This offer is void where prohibited, taxed or restricted by law. HP employees are not eligible.

HP is committed to protecting your privacy. Your personal information will not be passed on from HP without your explicit consent.

Neither party acquires any patent, copyright, mask work or trademark rights during this event. Participation imposes no obligation on either party to purchase, sell, license, transfer or otherwise dispose of any technology, services or products, and does not create any agency or partnership relationship. The terms herein may be added to or modified by HP at any time at its sole discretion. Additional terms and conditions may apply.

Let’s start with the following example: Here is a kind that is simply a VFlexBox with a Header (for a header), a Scroller (for holding whatever gets added later), and a Toolbar (for a footer):

enyo.kind({
    name: "MyKind",
    kind: enyo.VFlexBox,
    components: [
        {name: "header", kind: enyo.Header, content: "Header"},
        {name: "scroller", kind: enyo.Scroller, flex: 1},
        {name: "footer", kind: enyo.Toolbar}
    ],
    create: function() {
        this.inherited(arguments);
    }
});

And here is an action shot of this kind:

Next, let’s use our new kind and add something to its components block:

enyo.kind({
    name: "Display",
    kind: enyo.Control,
    components: [
        {kind: "MyKind", className: "enyo-fit", components: [
            {name: "list", kind: enyo.VirtualRepeater, onSetupRow: "setupRow", components: [
                {kind: enyo.Item, components: [
                    {name: "itemName"}
                ]}
            ]}
        ]}
    ],
    create: function() {
        this.inherited(arguments);
    },
    setupRow: function(inSender, inIndex) {
        if (inIndex < 15) {
            this.$.itemName.setContent("webOS");
            return true;
        }
    }
});

Here’s what you get:

Okay, that doesn’t look right. First, the repeater is in the wrong place. It has been rendered below the footer of the kind we wanted to contain it. Second, it doesn’t scroll. Fixing the first issue will fix the second. The first issue is caused by the fact that any time a component is added to a kind, it is appended to the list of components that already exist.

One option to get around this would be to write some custom methods in MyKind that could be used to populate the Scroller, but it would be a lot easier if you could declare the components block and have it “just work.”  

Luckily, there is an easy way to specify where new components should be rendered for a particular kind. Add a component to your kind with the name client and any new components will be appended there. This should work for any component type, but it is probably a good idea to stick with something like a V/HFlexBox, Scroller, or any other kind designed to hold other components. In this example, we can just rename the Scroller in MyKind:
 

...
{name: "client", kind: enyo.Scroller, flex: 1},
...

 
Now when the Display kind creates its VirtualRepeater, here is what you will get:

Perfect!  Now anything added to MyKind will go into the Scroller.  Using this feature should enable application developers to gain more control over their custom kinds and how they interact when used in other projects.

Fortunately, webOS is built on a WebKit engine with strong HTML5 support. HTML5 development for webOS is thus supported by default. Furthermore, the Enyo framework allows developers to take advantage of these HTML5 features in their webOS applications. However, not all supported HTML5 elements are wrapped with convenient Enyo kinds “out of the box.” But it is relatively easy for developers to extend Enyo’s HTML5 support. In this article we explore how to extend Enyo to integrate HTML5 features that are not part of the Enyo framework.

Sample Application

 
This article demonstrates these concepts by means of a simple Enyo sample application. The full source can be downloaded from this link:

EnyoCanvas Sample Application Source Code

The application looks like this when run on the HP TouchPad:

EnyoCanvas Sample Application Screen Shot

HTML5 Specific Enyo Kinds

 
The easiest form of Enyo HTML5 support is those cases where Enyo provides built-in kinds for specific HTML5 features. Two examples of this are the Enyo.Video and the Enyo.Sound kinds, which implement HTML5 video and audio, respectively. For example, adding HTML5 video to an Enyo application is as simple as adding an Enyo.Video component to your application:
 

   {kind: "Enyo.Video",
    name: "video",
    style:"width:1024px; height:640px;",
    src:'http://.../somevideo.mp4'}

 
In the resulting application, the Enyo.Video instance is rendered as an HTML5 element with the specified properties.
 

What if There Isn’t a Kind for That?

 
This is all great, but what if you want to integrate an HTML5 feature that doesn’t have a corresponding kind as part of the Enyo framework? Fortunately, creating your own custom Enyo kinds to supplement Enyo’s HTML5 support is easy. Thanks to the Enyo.DomNode kind, you can create custom kinds that render any HTML5 tag you like. You can also specify a collection of custom tag properties through the domAttributes property. Let’s take a look at how to build a custom Enyo kind to implement an HTML5 feature that is not specifically part of the Enyo framework. In the following example, we’ll create a simple HTML5 canvas Enyo kind.
 

Implementing an HTML5 Canvas Kind

 
We will define a new Enyo kind called Enyo.CanvasControl, derived from Enyo.Control. Since Enyo.Control has Enyo.DomNode as a parent in its inheritance hierarchy, Enyo.CanvasControl has nodeTag and domAttributes properties that we can customize.
 

enyo.kind({
   name: "MyApps.CanvasControl",
   kind: "enyo.Control",
   nodeTag: "canvas",
   canvas: "",
   context: "",
   domAttributes: {
      width: window.innerWidth,
      height:"200px"
   }
   ...
};

 
Our kind specifies “canvas” as the nodeTag, and sets “domAttributes” to a width and height value. When rendered on my TouchPad, Enyo produces markup with the tag and those width and height attribute values as follows:

<canvas width="768" height="200" id="mainView_canvasControl">

 
At this point, we now have an HTML5 canvas embedded in an Enyo application. We can do whatever canvas 2D drawing we like now in the context of this application. A key part of making this happen is overriding the rendered method which is called by the Enyo framework once the underlying DOM element has been created and rendered.
 

rendered: function() {
   this.hasNode();	 //Sets the node property of the rendered DOM node
   this.canvas = this.node;
   this.context = this.canvas.getContext('2d');
   this.drawCanvas();
}

 
This code sets and stores the canvas and 2D context values in our associated CanvasControl properties, canvas and content, for use in other parts of the code. We then call drawCanvas to perform some 2D graphics. Specifically, we fill a rectangle with a gradient based on the color selected in the application’s Enyo based color picker:
 

drawCanvas: function() {
    var gradient = this.context.createLinearGradient(0, 0, this.canvas.width, this.canvas.height);
    gradient.addColorStop(0, "white");
    gradient.addColorStop(1, this.color);
    this.context.fillStyle = gradient;
    this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
}

 
Nothing fancy, but it gives you the idea of how to bake custom HTML5 features into an Enyo application.
 

Enyo And HTML5 – Better Together!

 
Not only does this mean that we can now do all kinds of cool HTML5 canvas drawing in the application, but we can integrate Enyo user interface elements into the same application. Developers can thus build TouchPad style user interfaces into canvas or other HTML5 applications without having to build UI components themselves.

To see how this is done, let’s take a look at how I embedded an instance of our CanvasControl kind into my application. This is done in MainView.js:
 

enyo.kind({
   name: "MyApps.MainView",
   kind: "enyo.VFlexBox",
   components:[
      {kind: "PageHeader", components: [
           {content: "Simple HTML5 Canvas + Enyo Demo", flex: 4},
           {kind: "ListSelector", name: "colorPicker", ...}
      ],
      {kind: "MyApps.CanvasControl", name: "canvasControl"},
      {kind: "Button", name: "clearCanvasButton", caption: "Clear Canvas", ...}
   ]
   ...
});

 
From this code snippet, you can see that our custom Canvas kind is integrated with standard Enyo framework UI elements in the same application.
 

Next Steps

 
If you haven’t already, it’s time to get started with webOS 3.0 and Enyo development by downloading the webOS 3.0 SDK!