Interactive Javascript with the HTML5 Canvas and processing.js

Scott Ferguson

unread,

Jul 5, 2014, 9:54:07 PM7/5/14

to

Update: 20140708 - Thanks to Taifun Baer's help, I was able to get this to work with the packaged app.

Look for that further down in this thread.

What you are reading here is how I did it during development which is a bit different...

This project allows you to edit the DragBall.js Javascript script uploaded to the Media list from inside App Inventor, save the changes to the AppInventor/assets folder, then open the main.html document in the WebViewer to display the changes.

The script DragBall.js contains standard Javascript statements as well as function calls to the processing.js library.

The processing.js library is the basis for Khan Academy's interactive Javascript tutorials to display drawings on a Canvas (they have a customized version for their site).

In this project, the animation is displayed in the WebViewer and when the HTML5 Canvas is touched, the ball moves to the area that was touched.

This project was tested with a connected tablet during development.

Touch Edit then change some values and touch Save then View.

Three files are used:

main.html which calls the processing.js library and DragBall.js

DragBall.js which says what to draw using Javascript and processing.js commands

processing.js which does the grunt work for doing things with the Canvas so all you have to do is use the built-in commands

DragBall.js is a minor modification of Peter Collingridge's code.js demo.

Anyone see a way to use this in a packaged app? (see Taifun's answer below and my packagable project following that)

---

END

ProcessingJSDragBall.aia

Taifun

unread,

Jul 6, 2014, 10:36:02 AM7/6/14

to app-inventor-de...@googlegroups.com

Anyone see a way to use this in a packaged app?

you can't store a file in the assets directory during runtime, see also here https://groups.google.com/d/msg/mitappinventortest/HZ09P-vxaV4/awlitSZP0XcJ

but you could read the DragBall.js file you like to modify during runtime from the assets first and store it in a temp. directory on the SD card of the device. Of course you have to update the html file accordingly to use the js file from the SD card...

Then just use the correct link to call the html file, which is different after building the app, see also https://puravidaapps.com/tutorials.php#html

Yes, you also can upload html files as assets into App Inventor! There is only one special thing to consider: During development, you have to use the development path to the embedded html document:
file:///mnt/sdcard/AppInventor/assets/<NAME OF YOUR HTML FILE>.html
Before packaging the app, use the production path.
file:///android_asset/<NAME OF YOUR HTML FILE>.html

Taifun; PS: see also the documentation of the File component http://ai2.appinventor.mit.edu/reference/components/storage.html#File how to read a file from the assets, I highlighted the relevant part for you below
ReadFrom(text fileName): Reads text from a file in storage. Prefix the filename with / to read from a specific file on the SD card. for instance /myFile.txt will read the file /sdcard/myFile.txt. To read assets packaged with an application (also works for the Companion) start the filename with // (two slashes). If a filename does not start with a slash, it will be read from the applications private storage (for packaged apps) and from /sdcard/AppInventor/data for the Companion.

Scott Ferguson

unread,

Jul 8, 2014, 9:38:36 AM7/8/14

to

Thanks for the help and links, Taifun -

It now works with a packaged app :)

I got an error when trying to save /temp/DragBall.js (cannot create subfolders that don't exist on the fly?), but /DragBall.js worked so the file is located at /sdcard/DragBall.js

In the main.html, I specified the path as /sdcard/DragBall.js

The user can edit the script, save the changes, and the next session the changed script will be used to display the HTML5 Canvas and can be edited again, if needed.

I did not try to get this to work also during development with these changes.

main.html:

<!DOCTYPE HTML>

<html>

<head>

<head>

<body>

</body>

</html>

---

END

ProcessingJSDragBallPkgd.aia

Taifun

unread,

Jul 8, 2014, 10:13:53 AM7/8/14

to app-inventor-de...@googlegroups.com

very nice example! works great!

yes, it seems to be, the File.SaveFile method can't create folders...

Taifun

Scott Ferguson

unread,

Jul 8, 2014, 5:45:44 PM7/8/14

to app-inventor-de...@googlegroups.com

Thanks :)

I thought of a workaround kludge-

Do a Canvas SaveAs with the path to create the path with a small png or jpg file first then the app can access that path.

---

Scott

Abraham Getzler

unread,

Jul 8, 2014, 9:51:11 PM7/8/14

to app-inventor-de...@googlegroups.com

Java script canvas in App Inventor?
https://www.youtube.com/watch?v=PZGmeg23ICQ

Just when I thought I was out, they pull me back in!

Don ABG

--
(you have received this message from the App Inventor Developers Library)
---
You received this message because you are subscribed to the Google Groups "App Inventor Developers Library" group.
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-develope...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Scott Ferguson

unread,

Jul 9, 2014, 7:36:01 AM7/9/14

to app-inventor-de...@googlegroups.com

LOL :)

---

Scott Ferguson

To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-developers-library+unsubscribe@googlegroups.com.

Reply all

Reply to author

Forward