Nooklet guide
From nookDevs
This wiki page was created only because no one has heard from kbs for quite a long time, so it seems he has abandoned nooklet project, not sure though. This wiki page contains the latest tutorials on how to write nooklets. The original base text has been copied from these two links: Both of them were written by kbs himself, I am merely editing his tutorial and implementing some thoughts of my own. His original tutorial contains several errors, which took me quite a long time to figure out, so I am saving your time here and there.
Contents |
Tutorial: How to write Nooklets
What's a Nooklet?
A nooklet is an application for the Nook written in HTML and javascript. Nooklets are stored on the Nook, and run locally on the device. It runs within a nooklet container, and the container provides some hooks for the application to interact with the device through javascript.
Getting Started
Make sure you've installed the nooklet container application and added it to your app launcher. Please also download the sample nooklets and unzip it to the root of your internal SD card from your PC. You should see a folder called nooklets/ appear at the root of your internal SD card when you're done unzipping. Please note: Thanks to Hari, you can download the latest nooklets via nookMarket.
Your first nooklet
Create a new folder called Easy on your PC. Within this folder, create a new file called nooklet.xml that looks like this
1
All this does is to create a blank nooklet that's visible from the nooklet container. To test it out, mount your nook.
The nooklet container currently expects to find a folder called nooklets/ at the root of your internal SD card. If you've unzipped the sample nooklets, this folder should already be present. If not, just create a folder called nooklets/ at the root of your internal SD card, and copy the Easy/ folder underneath it. When you are done, you should have a folder structure like this:
nooklets/ Easy/ nooklet.xml
That's it!
Unmount the nook, and run the nooklet application. You should see a new item called Easy appear in it. Click on it -- you should see a blank screen.
A nooklet is structured as a folder containing an xml file named nooklet.xml. If the folder contains an html file called touch.html, it will appear on the touchscreen area. If it contains an html file called eink.html, it will appear on the eink display, and that's all there is to it.
To summarize this information: You will always need 3 files for your nooklet, those are - eink.html; touch.html; nooklet.xml. Please note: Do NOT change those file names ever. Also, never edit the nooklet.xml file after having written the above code. It must stay as written above, just copy-paste the code for xml file and save it.
Let's go on -
Create a file called touch.html under the Easy folder which looks like this.
touch
and create a file called eink.html under the Easy folder which contains
eink
and copy these two files under the Easy folder on the Nook.
Restart the Easy nooklet, and you should now see a button on the touchscreen, after you press the button, e-ink screen will display a message.
Note: there's a bug in the webkit implementation on the nook -- it does not correctly handle mousedown events. Which means, when you press a button, you won't see any animation on button down state. I'm sorry this is the situation; but that's the way it is. (Update as of 24th August, 2010: Mousedown event has been fixed by Hari and it works perfectly, but he cannot release it yet, because kbs should do it, since he has the signing codes for nooklet.apk file. If kbs doesn't reply to e-mails, I hope Hari will release the new version. He has also fixed the keyboard, which automatically appears in the new version, when you click on an input field)
The nooklet container will provide hooks for you to interact with the device via a javascript object named nook. Update your eink.html file to provide a way to change the message.
eink
and update your touch.html file to call the method in the eink.html file. The nook object provides access to the WebView control, and you can use the loadUrl method to call javascript functions within that WebView.
touch
Update these files on the Nook, and restart the Easy application.
Going forward Please take a look at the current nooklets. For example, the one I created - currency converter, is a very simple nooklet. It should help you understand the basic. Then go on to hangman, noodoku and check the bonsai too.
Below is nooklet specifications guide written by kbs and edited by me
Nooklets
Nooklets are simply a folder containing (usually) a pair of html files -- one displayed on the touchscreen, and the second on the eink.
A file called nooklet.xml must be present in the folder for it to be recognized as a nooklet. This file (for version 1) just contains a version number, as follows.
1
Files in a nooklet folder are accessed via a naming convention. If a file called touch.html is present, it will be rendered as an HTML file on the touchscreen. If a file called eink.html is present, it will be rendered as an HTML file on the eink display. Any referenced files (css, js, images etc) must be loaded from the same folder, using relative URLs.
Container The container must place an object called nook into the javascript environment of any html file it renders. The nook object is the bridge from the container to javascript, and this object must contain the following functions:
nook.getContainerVersion() -- returns a decimal number with the version number of the container.
nook.getEink() -- returns an android.widget.WebView object that points to any rendered eink html page. (Basically, this method tells which function must be executed by eink.html.
nook.getTouch() -- returns an android.widget.WebView object that points to any rendered touch html page. (This tells which function to execute in touch.html)
You can use the WebView instances to call javascript functions across the html pages by calling the loadUrl("javascript:someFunction()") method on them.
nook.writeData("name", value) -- is a way to save Strings across nooklet invocations. For example, if you want to save some information to access later, then you can use this method. It will create a file called: nooklet.data.name.txt and write the specified value there.
nook.readData(name) -- returns a string that was stored via nook.writeData(name, ...). If no data is available, a zero-length string is returned. Note: Strings returned from java cannot be directly used, so ensure that you use ""+nook.readData(...) so it converts into a javascript String. This method allows you to access what ever you wrote before in the same txt file using nook.writeData method. For example, if you wrote number 108 in the txt file, which would look like this:
function write() { nook.writeData("numbs", 108) }
then you can access the string using this:
function write() { nook.readData("numbs") }
However, if you want to add/substract to that number, then you have to convert it from string to an integer using parseInt method. For example,
function read(){ var read = nook.readData("numbs"); var turned = parseInt(read) + 1 nook.writeData("numbs", parsed); }
The above function first reads what is inside numbs txt file and then turns the number to an integer and adds 1 to it. Then saves the new value to the same txt file.
nook.log(String tag, String msg) -- drop something into the android log file.
Container events If an html page contains a javascript object named nooklet with a function called nooklet.save, that function will be called whenever the nooklet is terminated. One use for this is to save any data using nook.writeData(...) when the nooklet terminates.
If there's a function in the nooklet object called nooklet.onKey(keycode), it will be called whenever any of the left/right buttons are clicked on the Nook. The raw keycodes are passed to the function, and for reference, they are
name | keycode |
---|---|
RIGHT_UP | 98 |
RIGHT_DOWN | 97 |
LEFT_UP | 96 |
LEFT_DOWN | 95 |