2017년 1월 11일 수요일

AppInventor2 to HTML5 (Automatic conversion to PhoneGap!)


Anybody interested in getting AppInventor2 projects running...

⦁ Faster?
⦁ on an iPhone?
⦁ on a WindowsPhone?
⦁ on a tablet / webOS / firefoxOS / practically-anything-OS?
⦁ in the browser instead of a slow emulator?

If you said yes to any of the above, you might want to check this out:

http://felipemanga.github.io/AppInventor2Html5ai3d.aia

I'm making a new thread as the other one was meant to be about the 3D demo. This one is just for the translator.

It's still an Alpha version, not even a Beta, so it's not feature-complete, but it's a start. 
So far I haven't had much feedback on this, but it's good enough for my own purposes, so I'm going to pause work on it.
I'll be focusing development on another project for now, so I decided to set this code free under the MIT license for others to test and improve.

Download the Demo AIA (warning: contains plenty of trigonometry!), drag it into the desired box and then maybe do the same to your own AIAs and see how far they get. 
If it runs in the browser, you might actually get it to run on a phone using the free PhoneGap Build service. Sign up, upload the translated ZIP and download the APK / IPA / XAP.
Everything is done in JavaScript, no uploads happen when you submit an AIA to the translator. Your code stays with you always.

Here's a list of what's supported so far:
Alpha 1.6: (Tested in browser)
Misc bug fixes.
Implemented Touched event inside canvas. Other events (drag, flung, etc) are still missing though. Thanks to Ghica for the bug report!
Added a sidescroller mini-game made in AI2 to the github page. Click on it! It's awesome!

Alpha 1.5: (Tested in browser)
Clock didn't have TimerEnabled. Added, tested.
Added the floor opcode (both of them! o_O). Added the second logic OR. Fixed a bug with empty IFs. Added other missing opcodes.
Properly fixed a bug related to component method calls generating invalid JavaScript.
Can now set Picture to an HTTP[S] address in both Image and ImageSprites. Needs testing. Thanks to Labo for the bug report.

Alpha 1.4: (Tested in browser)
Notification: 80%. Notifications are shown as dialogs and there's no ShowTextDialog yet.
Tweaked mouse input some more.

Alpha 1.3: (Tested in browser)
Started implementing PhoneGap plugin support.
Sound: 90%. No vibration and no MinimumInterval for now. Needs Chrome. Firefox does not support MP3 and there's nothing I can do about it.

Alpha 1.2: (Tested in browser)
Fixed the mouse input I broke when I added touch input. Thanks to Markus Vinsa for reporting this.
mousemove event no longer spams the console log.
Better size calculation for components.
Arrangements: 100%. Implemented alignment support.
TinyDB: 100%. Direct mapping to localStorage. Need to see if satisfactory on mobiles.
Support for BackgroundImage in Canvas
added ImageSprite.MoveTo
Set default TextBox width to 150px instead of 0.
Stopgap fix for component method calls that have return values.

Alpha 1.1: (Tested on Mobile)
Improved touch input support. Got rid of 300ms delay.
Actually calls the PhoneGap/Cordova js files.

Alpha 1:
Clock: 100%
File: 50%. Supports reading, but not writing.
Button: 100%
Form: 100%
Arrangements: 70%.
TextBox: 100%
Label: 100%
ListView: 90%. No FilterBar.
Image: 90%. No Animation.
ImageSprite: 90%. No Animation.
PasswordTextBox: 100%
Canvas: 70%. Missing some functions.
Web: Support for HTTP GET (using YQL to bypass CORS on desktop, direct connection works in PhoneGap).
WebViewer: (loads a page in an iFrame, none of the functions were implemented yet though, not sure if possible at all)

--
that's a great project, congratulations!

--
I realy like your project and I hope you will continue it and keep making it public.
You are the one with the right spirit, people like you were my hope when AI went open source. Unfortunaly most other smart guys abuse the open source idea, by taking the source and keeping the work for themselves or start charging people. Imo that's the reason why AI is developing so slow.

--
I'm glad you like it and I hope it can be of use.

@Toni: I'd written a long reply about the open source thing, but it's a tricky subject and the MIT license is actually OK with charging people. 
Suffice to say that this project is free (freedom / beer) and will stay that way.

--
I am going to test this out real soon! (because I like my iPhone ;-)
Any chance of supporting sensors, like GPS, text-to-speech etc.?
Actually, maybe you will get more interaction with developer types if you transfer this thread to the "App Inventor Open Source Development" Google group.
Cheers, Ghica.

--
I'm not sure about all the sensors, but a quick look around suggests that GPS (http://docs.phonegap.com/en/edge/cordova_geolocation_geolocation.md.html) and TTS (http://thejackalofjavascript.com/phonegap-smart-mouth-app/) are possible. 
I think I'll look into TTS soon, it may be handy for the project I'm currently working on.
And I'll look into the other group, I didn't know about it. Thanks!

--
Any idea how to add writing?

--
in the browser there's no virtual keyboard, so you write with the physical one.
Does that answer your question?

--
i have tried this but there is no text put into the textbox, and when i push a button that is supposed to send me to a new screen, nothing happens.
But love this idea, keep the good work up :)

--
That's odd... can you send me the AIA you used (or a simple one that demonstrates the issue)?
You might have found a bug, that part of the code is supposed to be working well.

--
i think there is a higher chance that i have got the information wrong. I´ve tried this when i drooped my file in "run AIA", is that the right place to do it, or how can i test i my app is webb compatible?

--
No, you didn't do anything wrong. I did... somehow I broke input in my last mobile-oriented commit. I'll check as soon as I get home, and I'll make a note to properly test stuff before uploading!

--
OK, I just made an update and fixed that silly bug. Complete change log is in the first post.

--
tried it out and still dosen´t get anywhere when pressing a button that is supposed to send me to another screen

--
I tested with an app that takes on button click a number out of a textbox, does a simple calculation and then prints the result to a label.
Button click does nothing here as well.
This is running correctly as apk on my phone and es aia in the emulator.

Another app of mine reads a .txt file on the web in screen.initialize. when web.gottext it compares the result and does then other things. But it seems that it does not connect to the .txt at all.
This app also works in the emulator and as apk.

I hope this informations help you to develop your code further :)

--
How odd... what OS and browser are you two using? Is the browser up-to-date?
I've been testing in Chrome and Firefox, everything works smoothly here.
If I could have a look at one of the AIAs that don't work it'd be easier to find out exactly what's causing it to break.

Anyway, thanks for the patience!

--
I just took some minutes and made a very simple aia to share with you: It has some labels, arrangements, a textbox and a button. When the button is clicked, the number in the textbox gets multiplied by 10 and the result is printed to a label. This is working!
The app i mentioned above doesn't do much more. It has more variables and the calculations are "a bit" harder, but no complex math. Basicly only +-*/ in combination with some (). Additionly it changes the backround colors of labels, has other buttons which pop up notifiers or reset the textbox and labels to zero. Unfortunaly this app contains formulas of my company i am probably not allowed to share. I will be away for the weekend, but on sunday or monday i will reproduce the app with different formulas and then you can have a look at it.

--
Ah, that actually explains a lot! I haven't implemented the Notifier yet, so it's probably choking in translation.
I'm not yet sure how I'll implement that... it requires a PhoneGap plugin to work on a phone, but how would that work in the browser on a PC?
So far, I was concentrating on features that don't require plugins.

--
Awesome job!!!
There shouldn't be any problems using a Mac should there since its browser based? I only get a white screen when using the top choice

--
I haven't tested on a Mac... are you using Safari? It should work, I guess, but I can't say for sure.
Does the demo AIA work for you?
If it does, then that means your AIA uses some block I haven't implemented yet. 
In the first post you'll find a list of what's ready and what's not. 
If the blocks you use are there and it still won't run, I'll have to debug the AIA to find out what's wrong.

--
I found the problem, forget to remove some admob blocks. But it seems that 'set image to" and then a url to a image doesn't work

--
Thanks for the bug report. I think I fixed it, but I haven't had the time to make a test case. Could you try your AIA again?

Detailed changelog in the OP.

--
I tried to test one of my first app, a tic-tac-toe game. This stripped down version has just a canvas and some imagesprites. No dragging or moving, just clicking on the fields and the naughts and crosses should appear. They do not. Why?

And, I have another question. I downloaded the zip file from github and I just wanted to look at index.html, but it gives me a blank screen and the editor says it is protected. Is that true?
Cheers, Ghica.


--
Your tic-tac-toe game uses the touch event on ImageSprites, which I hadn't implemented yet. 
It should work now.

The zip file the translator generates has an index.html that is meant for phonegap, so it might not run in a Browser. 
Browsers have extra security restrictions on HTML files when they're in the filesystem instead of on a server, so it might be breaking because of that.
I didn't protect anything.

[EDIT] I updated the changelog in the first post.

--
When i tried to open the zip file the phonegap asked for xml file

--
Yes,
Very nice. The touch event works, but somehow the board, which is in a separate imageSprite has disappeared.

B.t.w. I think you should consider to move this discussion to a blog or forum of you own. Just like other parallel AI2 developments or initiatives. You could still post here when there are new developments, or refer to your blog when someone asks a relevant question. In this way you will have maybe even more exposure and for this forum the discussion is becoming off-topic. 

--
Nati Shapira: 
Are you using the phonegap build service, or did you install phonegap on your PC? 
I've been testing with the build service, and the xml file seems to be optional. 
For now, if you really need one, it has to be made and added to the zip manually since a lot of it is very project-specific.

--
Ghica: Oops, I had set the canvas to not render things that weren't Enabled. Fixed it.
I created a thread in the other group, as you'd previously suggested. I didn't intend to go off-topic with this.

--

댓글 없음:

댓글 쓰기