Difference between revisions of "IBookAuthor: Javascript Calculator"
(→The Javascript Calculator) |
(→File Hierarchy) |
||
| Line 18: | Line 18: | ||
<code><pre> | <code><pre> | ||
| − | ./calc.html | + | calculator.wdgt |
| − | ./Default.png | + | calculator.wdgt/calc.html |
| − | ./Default@2x.png | + | calculator.wdgt/Default.png |
| − | ./images | + | calculator.wdgt/Default@2x.png |
| − | ./images/display.jpg | + | calculator.wdgt/images |
| − | ./images/display_left.jpg | + | calculator.wdgt/images/display.jpg |
| − | ./images/display_right.jpg | + | calculator.wdgt/images/display_left.jpg |
| − | ./images/index.html | + | calculator.wdgt/images/display_right.jpg |
| − | ./images/keys.jpg | + | calculator.wdgt/images/index.html |
| − | ./images/lcd0.jpg | + | calculator.wdgt/images/keys.jpg |
| − | ./images/lcd0dot.jpg | + | calculator.wdgt/images/lcd0.jpg |
| − | ./images/lcd1.jpg | + | calculator.wdgt/images/lcd0dot.jpg |
| − | ./images/lcd1dot.jpg | + | calculator.wdgt/images/lcd1.jpg |
| − | ./images/lcd2.jpg | + | calculator.wdgt/images/lcd1dot.jpg |
| − | ./images/lcd2dot.jpg | + | calculator.wdgt/images/lcd2.jpg |
| − | ./images/lcd3.jpg | + | calculator.wdgt/images/lcd2dot.jpg |
| − | ./images/lcd3dot.jpg | + | calculator.wdgt/images/lcd3.jpg |
| − | ./images/lcd4.jpg | + | calculator.wdgt/images/lcd3dot.jpg |
| − | ./images/lcd4dot.jpg | + | calculator.wdgt/images/lcd4.jpg |
| − | ./images/lcd5.jpg | + | calculator.wdgt/images/lcd4dot.jpg |
| − | ./images/lcd5dot.jpg | + | calculator.wdgt/images/lcd5.jpg |
| − | ./images/lcd6.jpg | + | calculator.wdgt/images/lcd5dot.jpg |
| − | ./images/lcd6dot.jpg | + | calculator.wdgt/images/lcd6.jpg |
| − | ./images/lcd7.jpg | + | calculator.wdgt/images/lcd6dot.jpg |
| − | ./images/lcd7dot.jpg | + | calculator.wdgt/images/lcd7.jpg |
| − | ./images/lcd8.jpg | + | calculator.wdgt/images/lcd7dot.jpg |
| − | ./images/lcd8dot.jpg | + | calculator.wdgt/images/lcd8.jpg |
| − | ./images/lcd9.jpg | + | calculator.wdgt/images/lcd8dot.jpg |
| − | ./images/lcd9dot.jpg | + | calculator.wdgt/images/lcd9.jpg |
| − | ./images/lcde.jpg | + | calculator.wdgt/images/lcd9dot.jpg |
| − | ./images/lcdminus.jpg | + | calculator.wdgt/images/lcde.jpg |
| − | ./images/lcdoff.jpg | + | calculator.wdgt/images/lcdminus.jpg |
| − | ./images/top.jpg | + | calculator.wdgt/images/lcdoff.jpg |
| − | ./Info.plist | + | calculator.wdgt/images/top.jpg |
| + | calculator.wdgt/Info.plist | ||
| + | |||
</pre></code> | </pre></code> | ||
Revision as of 18:35, 27 January 2013
--D. Thiebaut 17:44, 27 January 2013 (EST)
The Javascript Calculator
You should first read the article by Simon Southwell[1].
Southwell's article is a step by step description of the features of this simulator, showing how to "cut" the photo of a calculator into several areas corresponding to the keys and to the digits, and how to simulate the behavior of a real calculator when the user presses the keys on the screen. On a computer without a touch-screen display the user must use the mouse to click the keys. On an iPad or tablet, the user simply presses the keys on the screen. It's very cool when you install it and it first works!
The javascript code provided by Southwell is available here.
Creating the Widget
Creating the widget simply requires copying the skeleton widget presented in this collection of tutorials, adding a new directory in it called images to hold all the pngs files representing the various parts of the calculator (keys, display digits), and updating the Info.plist file with the name of the package (although not really necessary).
File Hierarchy
calculator.wdgt
calculator.wdgt/calc.html
calculator.wdgt/Default.png
calculator.wdgt/Default@2x.png
calculator.wdgt/images
calculator.wdgt/images/display.jpg
calculator.wdgt/images/display_left.jpg
calculator.wdgt/images/display_right.jpg
calculator.wdgt/images/index.html
calculator.wdgt/images/keys.jpg
calculator.wdgt/images/lcd0.jpg
calculator.wdgt/images/lcd0dot.jpg
calculator.wdgt/images/lcd1.jpg
calculator.wdgt/images/lcd1dot.jpg
calculator.wdgt/images/lcd2.jpg
calculator.wdgt/images/lcd2dot.jpg
calculator.wdgt/images/lcd3.jpg
calculator.wdgt/images/lcd3dot.jpg
calculator.wdgt/images/lcd4.jpg
calculator.wdgt/images/lcd4dot.jpg
calculator.wdgt/images/lcd5.jpg
calculator.wdgt/images/lcd5dot.jpg
calculator.wdgt/images/lcd6.jpg
calculator.wdgt/images/lcd6dot.jpg
calculator.wdgt/images/lcd7.jpg
calculator.wdgt/images/lcd7dot.jpg
calculator.wdgt/images/lcd8.jpg
calculator.wdgt/images/lcd8dot.jpg
calculator.wdgt/images/lcd9.jpg
calculator.wdgt/images/lcd9dot.jpg
calculator.wdgt/images/lcde.jpg
calculator.wdgt/images/lcdminus.jpg
calculator.wdgt/images/lcdoff.jpg
calculator.wdgt/images/top.jpg
calculator.wdgt/Info.plist
References
- ↑ How to Write a Calculator Simulator, Simon Southwell, http://www.anita-simulators.org.uk/calc/calc_example/article2_front.htm, published March 2004, captured Jan. 2013.
