2012.1.22
Japanese page
I got iBooks Author yesterday and try to use half of the day. I am the DashCode (Chemistry area) programer and made a lot of HTML5 programs so I try to write interactive textbook with iBooks author. I already wrote DrawMol HTML5 program that draw molecule on Canvas. (Please refer this page that I made with HTML5 program) I try to put this program on textbook. At first, I thought I can put HTML5 program into textbook directly, but it is not so easy. The Javascript program that can put into textbook is only Dashboard program. When I run DashCode programing IDE, I need to select type of project showing below. (The screen shot is Japanese DashCode. Sorry for this, but I can do nothing for this)
All of the program I wrote were safari project because I put them on Pirika site and visitor browse them with browser. This time I need to select Dashbord project for textbook. To convert Safari project to DashBoard project is very easy. Just copy GUI parts and paste them into new project. And copy source code and paste it to new project. It take 5 min.
Program is working like below. But there remain big problem. The molecule does not rotate. When drag the mouse, the widget window move.
The chooser is working.
In program, inside the canvas, I set,
event.preventDefault();
to kill defult moving, even though it is not working. It take 1hr to find the reason. I need to set CSS.
#canvas {
position: absolute;
-apple-dashboard-region: dashboard-region(control rectangle);
width: 364px;
height: 243px;
right: 27px;
margin-left: auto;
left: 27px;
margin-right: auto;
top: 31px;
margin-bottom: auto;
bottom: 53px;
margin-top: auto;
}
I input red line, I can rotate molecule. If I drag edge of window, I can move window. Then I save this project with "Save as runnable", DashCode save program test.wdgt at DashBoard folder.
Then I run iBooks Author, and drop this test.wdgt on certain position.
If I click Widget part "Edit HTML" button appear.
If I click this button, DashBoard program appear with full size.
I check the movement and find it OK, so I preview this texrbook with iPad. (You can not preview if you do not have iPad.)
You can see the DashBoard program like avove page. It is just large icon. If you click this icon, DashBoard program expand to full screen.
But Still I encouter problem. Chooser is working. But molecule does not rotate again. I expect this. iPad does not create mouse event. So I need put Touch event instead mouse event. But onClick event is create by iPad so chooser is working.
With DashCode, I can easily make event handler for Canvas.
But I do not know why but there is no Touch event. I put them manually.
Then the molecule progam is working on textbook. It take half of the day. Then save the textbook. There are two choice. One is "public" (I do not know exact term of English DashCode) this make iTunes Store package. I can drop this file into iTunes and can install textbook into iPad.
The other is "iBook format" that can sale at iBookStore. This fle can not install on iPad. Just for sale at iBookStore.
If we have interactive contents like JavaScript program, iBooks Author is very impressive killer application. Otherwise, PDF or e-Pub made by Pages is enough, I think.
I put my HTML5 programs on
Properties Estimation
Polymer Science
Chemical Engineering
Molecular Orbital
Other Chemistry
Pages.
And easily make textbook with them.
