AI2 Inventor Forum News: 01/07/17

2017년 1월 7일 토요일

what computer programming language is the app builder?

There are lots of programming languages involved in App Inventor. MIT App Inventor 2 blocks code is a new programming language that doesn't have a name, but you could think of it as the "App Inventor Language". We're developing a textual version of this language called TAIL = Textual App Inventor Language. The blocks editor is top of the Blockly blocks language framework so that it runs in a web browser. (In the first version of App Inventor, the blocks editor was implemented in Java on top of the OpenBlocks blocks framework.) The Designer window is implemented in Java using the Google Web Toolkit (GWT), which is translated to JavaScript so that it, too, runs in the browser. When you execute App Inventor blocks code in live development mode on an Android device, the blocks code is translated into Young Android Intermediate Language (YAIL), a Scheme-like language with parenthesized syntax. YAIL code is interpreted on the device by a YAIL interpreter in the MIT AI2 Companion. The YAIL interpreter is written in Kawa, a version of Scheme implemented in Java. The interpreter loads Android libraries so that it has access to all the device features. When you package an App Inventor app to make a .apk file, the YAIL-interpreter-with-YAIL-program is compiled to Java bytecodes and then to Dalvik executable code (DEX).

I'm not sure if you got the question correctly.
I wasn't asking which programming language is use to build the MIT app.

in the app builder. If I click on block, and I drag and drop those blocks to form block codes.
What programming language is the output?
What programming language structure is it following?
C ? or Java?

Also, is it possible for me to view my source code?
the source code of my program will be in Javascript? or C?

This is hard for many users to understand, but the blocks code you seen on your screen *is* the source code of your language. It describes the syntax tree of your App Inventor program in the same way that traditional text programs describe the syntax trees of their languages.

When you save a .aia file (which is really just a .zip file), the blocks are saved in an XML textual format that describes exactly the same nested tree structure you see on your screen with the blocks. So if you're more comfortable with thinking of text as source code, this XML format is the source code of App Inventor programs.

When your blocks program is executed on your phone, it is *not* translated to a traditional language like Java/C/JavaScript etc. It is translated to Scheme-like YAIL code and executed in an interpreter on the phone. Ultimately all Android apps are running a version of Java, but App Inventor code is never converted to Java in live development mode. Rather, it's YAIL code that runs in an interpreter implemented on top of Java. So there's no way to "see" the Java code associated with your app.

Dave Wolber at USF has a Java Bridge that translates App Inventor programs to Android SKD projects in Java: https://code.google.com/p/appinventor-java-translation. However, this is not how App Inventor works; it's just a way for you to first prototype Android projects in App Inventor.

Java Bridge and Transition to Textual Coding

The App Inventor Java Bridge is a high level library for coding Android apps. There is a class

corresponding to each component in App Inventor, and methods corresponding to the blocks.

The common terminology allows for an easier transition from visual blocks to textual code, and

students get to continue to build apps!

I have some samples and tutorials for the Java Bridge at appinventor.org/jBridgeIntro. There are

also some videos of students talking about their experience in an experimental CS 1 class I taught

last semester which used App Inventor and the Java Bridge (and Python).

The App Inventor to Java Bridge sequence has great potential in education, one place being in high schools

where the new Computer Science Principles (CSP) AP course can be taught with App Inventor, and the

Java AP course with the Java Bridge (with students getting to build mobile apps throughout!)

If you are interested in working on this project, please let me know. The Java Bridge is an untapped

gem!

Dave

P.S. Note: The Java Bridge is the same code used internally within App Inventor. Thanks go to Hossein Amerkashi for readying the library

for stand-alone use.

> If you are interested in working on this project, please let me know.
>The Java Bridge is an untapped
> gem!

God David I BEG to work with you on this, one of the big remaining
gaps left in what has been a reasonably long and glorious career
teaching undergraduate computer science.

I'd prefer to talk on the phone, if possible. I'm hoping if you like
what I say, we could bring Hal into the conversation.

I think AI could play an enormous and very successful role in
post-secondary education, and I want to try to help make that happen.

I also happen to be retiring from my longtime teaching job at the end
of next semester.

--

Hi Brian. Great, can you meet on Wednesday? I'm pretty open so if you can just suggest a time.

I presume you still need the IDE (i.e. Eclipse) as well as the SDK in order to make this transition from A.i.?

Can we use any other IDE (such as Netbeans) or do we have to use Eclipse?

GREAT GREAT work guys! I started developing in A.i. 3 years ago. Stopped because Java Bridge was not fully blown yet but now, I am making my return!! Yesss! I have taken some Java courses. I was a Network Analyst IV for HP til Carly laid me off (aint voten for her Noooo way) left HP, got into Android development (self taught) starting with A.i. and that lead to bigger and better things. Thanks for this wonderful SDK (as in A.i.)

P.S. now I have to try and reconnect with some of my old A.i. buddies who I believe are still at it.

> I presume you still need the IDE (i.e. Eclipse) as well as the SDK in order
> to make this transition from A.i.?
> Can we use any other IDE (such as Netbeans) or do we have to use Eclipse?

Google says to use Visual Studio. It makes our VMs groan, and feels
like you're trying to pick your nose with an industrial crane. But
Google says to use Visual Studio.

--

Any Java IDE can be used and you are not restricted to Eclipse.

This is terrific! And it would be great if Brian could work with you. I'd like to Kibbitz, but I could not do more than that this spring.
This is a lot what Mark and I were imagining years ago, with App Inventor as a programming intro to Java. I think Mark's original Java bridge
was inspired by that. If you and Brian could design a course together, that would be great.

I agree with, Hal. I was really hoping that the Java Bridge would become a useful pedagogical tool for bringing App Inventor users gently into the world of Java-based mobile development and beyond.

I am getting ready to teach app development for the first time in my Software Design & Development course this spring, and "explore Java bridge" has been on my to-do list for months! Thank you so much for your timely post on this topic! I would love to be of assistance, as you have helped me so much in the past.

Great, Cate. Brian Capouch, also on this thread, is also interested in working together on this. We may be meeting tomorrow afternoon/eve if you're interested. Otherwise we can chat another time.

Export AI code to Java

I am not sure if this issue was discussed in the past. In any case I think that there should be an option to export the AI project to a regular java project (better in Android Studio format).

Is it possible at all.

This option will open many possibilities for building real application based on AI prototypes. It will enable students to move from AI environment to real Java programming using their own familiar works, etc

see here Java Bridge and Transition to Textual Coding

Also see the Derek Banas Java Conversion YouTube Video

Hi all this is not what I am asking. The idea behind java bridge is great, but what I am looking for is the option in AI to save the project as Java files. I assume that it should be easy to accomplish since AI is using simple library anyway.

So again I am not talking for the option to rewrite the project in Java but about the option to get java code automatically.

What you want is impossible Zohar. Perhaps rewrite your Project using Android Studio 2. AI is not using a simple library and is written using several programming languages; not only Java. If you want to save a project as Java files, you need to program it in Java. Taifun and Abraham have provided two options; both are supposed to work and will result in the generation of some Java code. There is no simple AI2 to Java converter program.

App Inventor 2 is an entry level Android compiler intended for teaching how to program. Try Android Studio 2, it is a free professional compiler. Apparently AI2 cannot do what you want.

what I am looking for is the option in AI to save the project as Java files

which might explain, why this is not possible

App inventor Project convert to Eclipse project

Hi. can i convvert .aia project to e clipse or source code?

I found a site like this: https://appinventortojava.appspot.com/ but i can't start new project!

is this posible?

this is the MIT App Inventor forum, if you have questions about java.appinventor.org, you should contact someone from appinventor.org...

and if you take a look at the release notes https://appinventortojava.appspot.com/ReleaseNotes.html, you will find out, that the latest version is Nov 9, 2012!

see also https://groups.google.com/forum/#!msg/mitappinventortest/WWQVvqm7ONc/4wdAfDv0AgAJ for other possibilities

Accessing images and sounds

Applications built with App Inventor can access sound, image, and video sources from three different kinds of locations:

Application assets

The sources labeled Media shown in the designer — part of the application's assets — are packaged with the application. Anyone who installs your application will have them, as part of the application. You also specify them in the designer, which is convenient. You can also specify these in programs by their file name: just use the file name without any special prefix. For example, if you have an image asset named kitty.png , you can use it as an image: just set the Picture property of an image component to the text kitty.png . You can similarly use files names for sound (Sound or Player) or video (VideoPlayer).

Assets are the most convenient to use, but the space for them is limited to a few megabytes, because they must be packaged with the application. They are good for small images and short audio selections. Bit you would probably not use them for complete songs or videos.

The phone SD card

You can access files on your phone's SD (secure digital) card using file names that begin with /sdcard . You could play a song on your SDCard by setting the source of a Player component to

/sdcard/Music/Blondie/The Best of Blondie/Heart of Glass.mp3

and starting the Player (assuming of course, that the song file is on the SDCard). Make sure to specify the complete file name, including the "mp3".

The Android system also includes an alternative way to designe SDCard files as URLs. Here you prefix the file name with file:///sdcard and use "URL encoding" for special characters. For example, a space is "%20". So you could designate the same file by setting the player source to

file:///sdcard/Music/Blondie/The%20Best%20of%20Blondie/Heart%20of%20Glass.mp3

Note that you'll want to use a Player component for this, not Sound . A complete song like this is too large for Sound to handle.

Images and videos can be designated similarly.

App Inventor doesn't (yet) include any way to store files on the SD card. It also doesn't (yet) include a way to list the files on the SDCard. You'll have to use other applications or the Android phone file manager for that.

Using the SD Card provides a lot more space for media than trying to package things as assets. The drawback is that users won't automatically get them by installing your application.
URLs and the Web

You can access files on Web using URLs, starting with http:// , for example, setting the picture property of an image to

http://www.google.com/images/srpr/nav_logo14.png

and similarly for music and videos. Make sure you use the link that points to the actual file, not to players for the files, which is much more common on the Web, especially for music and videos.

Other content URLs

The Android system also uses URLs to access various places that media is stored on the phone. For example, the images in the photo gallery can be accessed with file names beginning content://media/external/images/media , as you can see by using the ImagePicker and examining the resulting image path.

applying an image to a canvas from a URL please help!!!

If anyone can help with this issue, I would be so grateful. I need to find a way to use the URL of an image to apply this image to a canvas. I can do this with a saved image but not through the URL. Do you know how to do this or even a pointer in the right direction? Any help would be appreciated.

Not sure if this will work, but you can try and let us know. Get the picture from the URL into an image component, and then assign the canvas image to the Image.Picture property... Just a guess but probably worth a try...

Something like this might work for you:

...then follow Enis's suggestion .....set Canvas1.BackgroundImage to Image1.Picture. You can probably just swap the Image1.Picture block in the blocks above for a Canvas.BackgroundImage.

Thank you for your help, i'll try it.

see the documentation Accessing Images and Sounds

example:

set Canvas.BackgroundImage to "https://puravidaapps.com/images/logo.png"

Error Setting Image Picture from URL

I'm using the blocks as described in this post

applying an image to a canvas from a URL please help!!!

As below

I'm getting the following error.

The url was pulled from Google Places and is

https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference= CoQBcwAAAGCqwdm2PUG6sXKe9siPRSHEEGFoyrgj7KS1cLPhE4bUsMdXNv5gp4Hmzflfg2bx0hQg4gkkoTfuzXZU0OEGhFmdMB21KRcI2NRNlbeFRy8XDqISHqWBdaH6vGtpWVlZJHwF1McZmIXl2Ha88r6GHcDzxvdSZBGcLLJIFoYUzHO5EhBzLDlIVhhKhMlR5SrNdcdDGhTQ8DV4y2DUZaMd5hy-UtU4oQ5clw&key=AIzaSyBLj_f0WuugdjKhRorkJ444ZJDgGQWv5ao

Any ideas as to my problem?

Interesting. When I copy and past the above photo link into my browser it redirects me to

https://lh4.googleusercontent.com/-c9A5N2YA05w/VwYsS2-QFaI/AAAAAAAAAZA/wtZ6P6yoc-g5afC_UbN9kjKkQ7f2gvtdg/s1600-w400/

When I put that into the web url as below the error doesn't appear. Just need to figure out how to get that link from the first one.

???

a correct link to the example image would have been https://puravidaapps.com/images/logo.png

I copied the image of those blocks from the previous post. For my app I've replaced the set Web1 URL to one from google places. It looks like that when you pull a link to an image from google places its not the actual file location and therefore can't be displayed as an image picture. I'm playing around with using a webviewer to view the url and then getting the current webviewer url to use to set the image picture. I'll post the blocks when I get home.

Fusiontable Question

I was just wondering if I could use an insert row function to update a fusion table row?

the INSERT statement is to insert a new row

the UPDATE statement is to update an existing row

Using Keystore Explorer to convert .p12 to keystore

I created an App using Adobe Air sometime back and now wish to start using the AI2 to continue with the development.
Since the app is already published I want to be able to provide updates based on the current App.

I am not sure how I can use the Keystore Explorer tool to convert my .p12 to a proper .keystore to use with the AI2.

Can someone please advise as I really need to update my App soon.

you might find a solution here https://www.google.com/search?q=convert+Adobe+Air+p12+to+keystore

Thanks! I managed to find some posts and after tinkering around with the keytool utility, I managed to change the .p12 to a keystore.
I uploaded the new keystore and when I generated the .apk, everything was successful. It ran to 100% and the pop-up said that
it will save the .apk to the Downloads folder. After that, it just hung there. I tried a few times and it just didnt work.
The option to generate the QR code and had the same response. no error message, and it said successful, but stopped short
of generating the QR code.

Do you know what the issue could be?

How to maintain same index across various lists with random selection?

I posted about similar issue two weeks back. I got some helpful advice that pointed me in the right direction. However, the advice just kind of explained what the problem was and assumed I was good enough of a programmer to figure it out. I am not. 45 hrs later, I am out of time. I will take any help I can get. I've read lots of tutorials. They all dance around the main issue but not the main problem I am having.

What works:

The quiz runs in sequence without problems.

The quiz works when questions are selected randomly but they are not removed from the list.

What doesn't work:

Once randomized and items are removed from the list (to avoid repeating) the answers become wrong.

I have posted the main part of the code which occurs after Next button is pressed. If I could have figured the correct answer, I swear I wouldn't post on it again. My students head home to prepare for exams on Friday and there are tons of other features and information I need to add. If you have time I would really appreciated help in understanding how to make sure my AnswerList keep track of my other Lists (Question,Audio,Hint).

Screen Shot 2016-04-20 at 7.16.37 PM.png 표시 중

well. Scott and ABG already gave you some great tips here How do I keep same index # for randomized quiz and answers?

so only can repeat that

Also, since you never remove answers from AnswerList, your indexes get out of sync between your shrinking QuestionList and unshrinking AnswerList.
But if you remove the Answer from the AnswerList at the same time you remove the Question from QuestionList, how will you check it when the Submit button is clicked?
You have to save the current Answer in a separate global variable before removing it, and check the Answer global against the user input when Submit is clicked.

1. so where is that global variable, which holds the correct answer?

2. your before picking event does not make sense, because that item from the list already has been deleted in the button.Next event...

How to collect students projects effectively?

I'm a ICT teacher from HK. I teach ~100 students using AI2 to design their first APP.

Is there any effective method so that I can collect, run, assess students' works?

Possibly you could create a shared folder on Google Drive and then ask students to post their .aia or .apk onto the shared drive.

Getting at raw camera data for processing

I was wondering if anyone could give me advice about how to get access to individual camera pixel data.

How do I take a picture then transfer the picture data into an RGB data array where each individual pixel's intensity can be accessed and processed with a custom algorithm?

probably my Image Metadata Extension can help?

https://puravidaapps.com/metadata.php
com.puravidaapps.TaifunMetadata.aix
metadata.aia

The App Inventor Extensions are currently in testing. See the announcement for more information about how to use an App Inventor Extension.

I can see the usefulness of this extension. This will allow me to take, store and retrieve images, but how does it allow me to get at individual pixels within an image or for example export the raw pixel image to an Excel array of RGB pixel data, index(X), index(Y)?

This will allow me to take, store and retrieve images

no, this will allow you to extract metadata of an image

how does it allow me to get at individual pixels within an image

well, I don't know, I only made the extension ;-)

you might want to take a look at the documentation, if there is something in there you can use for your purposes https://github.com/drewnoakes/metadata-extractor

plotting a graph from recieved values

hi guys I'm new to MIT App inventor 2 , so i was made a circuit which sends out the magnitude of the input signal (in volts) received by the circuit via hc -05 bluetooth module. i am getting the values easily but how do i plot a graph with the received values ? also maybe recognize the type of signal recieved (basic classification of square, dc, triangluar and sinusoidal)?

see the answers of this similar question Create a real time chart in MIT app inventor with data from bluetooth

Instance problem

I believe your problem may be related to the release we just put out this afternoon. I have backed the release out until I can do more debugging. I apologize for the inconvenience.

Thanks for the quick action and quick reply. Both our classes were able to launch the emulator now in our Mac OSX lab.

Can Not Connect Today

I have been using App Inventor 2 for a few months now. For some reason today, my apps are giving a connection error (I tried more than one app) when I try to test them on my phone. WiFi seems to be fine, so I was wondering if something was an issue today with App Inventor (maybe an update, servers down, etc...)?

This is known and MIT Dev team is checking into it.

Please see Jeff's post HERE.

updating the companion app on the emulator, School bradband=no, mobile wifi=yes

I hope someone can help me identify the firewall ports that need to be opened for App inventor to work correctly, the issue i'm having is once the emulator is up and running you get a message that the companion app needs updating but it always fails, no matter the rights of the user logged on.

Take the schools broadband out of the equation and use a mobile device for internet access everything works as it should, the App updates and the emulator works as expected so it's not an installation or rights∖permissions issue...

Does anyone know what ports and urls that need to be accessible to get it to work so i can pass the details to the broadband provider for opening up..

thanks for the help :)

Does your school network use a firewall program called Deep Freeze? There are solutions.

The ports of interest are probably 8001 and 8004. Have you read the documentation here:

SCHOOL IT/NETWORK ADMINS: Information specific to school networks (also helpful for conferences and hotel situations)

and the related articles

Help with problems connecting to the emulator, phone or tablet; Help with aiStarter
Updating your App Inventor Setup software (Check here if you're not sure you have an up-to-date installation to support USB and emulator connections.)

AND, most important read this thread in its entirety..it is about a school that had similar issues and how they were solved:

https://groups.google.com/forum/#!searchin/mitappinventortest/nicole$20companion$202.24/mitappinventortest/aBzLpofOR_Y/FRyRjYM5SpsJ

It also explains how to install Companion manually.

Please review this stuff, try things, tell us what you tried and what happened and you will get specifc advice.

--

The school don't use deep freeze and have a local smoothwall which we can see the config of, which then goes to the IPS's ISA farm which we can't see the config of.

i've just had a look at the documentation and will try the ports and URL's next time i'm on site...

Would like to deploy to 50+ PC's for Lab but need a .msi not .exe is this availa

We would like to be able to deploy this MIT App Inverter on to 24+ Dell Desktop PC's for our Lab at our School K-12 Non for profit Christian School. is this possiable. all we saw was the .exe

This thread leads to a few deployment documents ...

updating the companion app on the emulator, School bradband=no, mobile wifi=yes

Be aware that development happens over the Web to MIT's site,

and the Companion and emulator are for testing.

More Companion and Emulator options can be found in this FAQ ...

I've just finished deploying Appinventor in UCC Computer Science department. We have an outreach group which provides programming tuition for school children at weekends. As most of these kids would not have their own devices, and we don't have enough spares to provide one each, we wanted to use the emulator.

I have a lot of experience of installing software, we use a wide range of stuff in the department, some of it experimental, but it still took a few days of digging for information and experimenting with different setups, to get this working without admin privileges.

I'll set out how I got it working, it might be helpful to you and others. I haven't found or fixed all the bugs (and wouldn't have time to do so), but I've put in place a set of workarounds that make it usable in a classroom situation.

First thing to realise is that this is beta software, it's not really ready for general distribution, so you have to expect that it doesn't meet the standards we expect of a finished product.

Btw, I installed on Windows 7 Enterprise, but there's a good chance this will work with other versions.

It might seem obvious that Chrome is the browser to use, but Firefox works much better with Appinventor, possibly because it's less secure. I haven't bothered to work out exactly why, Chrome could probably be fixed, but I had a tight deadline, so what I went with what works.

You can create your own .msi, but I just went with the .exe, I only had 31 PCs to setup, so it was as easy to click a few buttons on each one.

I have my admin account setup to run a batch file (as administrator) automatically on login, and I put the following lines into that batch file to streamline/partly automate the setup:

REM *************AppInventor April 2016 Lab 113***************

z:∖113∖MIT_App_Inventor_Tools_2.3.0_win_setup.exe /s

icacls "C:∖Program Files (x86)∖AppInventor" /t /c /grant cs-domain∖AppInventor:(OI)(CI)(X,RD,RA,REA,WD,AD,WEA,WA,D,RC,DC)
mkdir c:∖.appinventor
xcopy /s /y z:\113∖.appinventor c:∖.appinventor
icacls C:∖.appinventor /t /c /grant cs-domain∖AppInventor:(OI)(CI)(X,RD,RA,REA,WD,AD,WEA,WA,D,RC,DC)

cd "C:\Program Files (x86)\Mozilla Firefox\"

start firefox http://ai2.appinventor.mit.edu

pause
shutdown /s /y /t 10

So that runs the App_Inventor_Tools from my network home drive. the "/s" didn't seem to work, but no matter, it's just a few mouse clicks to runt he installer. I'd fix the silent install or make an msi if I had to run it out to a larger lab.

The software installs in "Program Files", which is fine, but a bit of poor programming means that the users have to write to that directory. Ideally the users would write everything to their home directory, by default.

I'm running an Active Directory domain called cs-domain, and I've created a group for the kids and instructors, called Appinventor. If more people need to be added, this can be done easily at the server, without going round the lab again. I use the icacls command to give pretty loose permissions to the Appinventor folder. You can look up the icacls command, but essentially I'm giving write permissions to the AD Appinventor group, and make it inheritable, so I don't have to spend time figuring out exactly which files/folders they need to write to.

When you run the emulator first time, as administrator, it creates a HIDDEN folder c:\.appinventor, and again, the users have to be able to write to that. In a finished software product, all user writes would go to their home directory by default, and you certainly wouldn't scatter user-writeable folders around the root of C: etc.. but anyway, This is where the emulator files are hidden. Even though you have downloaded the latest installer, the first time you run the emulator it will want to update these files. When you've done that once, you can copy that folder, c:\.appinventor up to a server share (in my case, my Z: drive) and use the batch file to copy it back for each subsequent installation. So the "mkdir" "xcopy" and the second "icacls" lines create that hidden folder, copy the files back from the server, and setup permissions for ordinary users.

Then I run Firefox (optional), so I can do a quick check on each machine that everything works ok, just to be sure, to be sure. that saves me having to come in at the weekend.

If all is ok (31 of 31 machines were fine) you can hit any key to close the batch file command window and shutdown the PC.

It's not neat or pretty, but it gets the beta software working the way I want it, with minimal messing around. If you adapt this, you should have your lab setup in an hour or two.

We're giving the kids write access to a couple of sets of folders. They could potentially do a bit of damage, but it's nowhere near as bad as giving them local admin privileges. I can live with that level of risk.

When the classes are finished, I'll take the kids out of the AD Appinventor group, thereby rescinding the extra permissions.

Hope that helps,

Martin.

Project lagging due to large image sizes

We are currently having some issues with our app. As soon as we put in our custom graphics, the app started to lag. However, when we set the pictures to none, it works just fine.

We know that it is due to the large image size, but we already resized them several times and would like to keep the quality of the image as it is. Is there any way of using those pictures but still being able to play the game without any lag?

Have you compressed the images?

I can often get 50-70% reduction in size with no noticeable loss in quality.

There are many utilities and services to accomplish this such as tinypng.com

GPS - Grid References

My original post has disappeared so here goes...

Does anyone know how to convert the lat/long returned by the location sensor into OSGB British National Grid format (10 figure grid with two letter prefix). I imagine that there's a complex set of maths blocks beyond my skill.

you asked the same question 2 days ago here Location Sensor - Grid references rather than Lat Long

did Scott's answer not help?

A very good way to learn App Inventor is to read the free Inventor's Manual here in the AI2 free online eBook http://www.appinventor.org/book2 ... the links are at the bottom of the Web page. The book 'teaches' users how to program with AI2 blocks.

There is a free programming course here http://www.appinventor.org/content/CourseInABox/Intro and the aia files for the projects in the book are here: http://www.appinventor.org/bookFiles

How to do a lot of basic things with App Inventor are described here: http://www.appinventor.org/content/howDoYou/eventHandling .

Also do the tutorials http://appinventor.mit.edu/explore/ai2/tutorials.html to learn the basics of AppInventor, then try something and follow the

Top 5 Tips: How to learn App Inventor

You will not find a tutorial, which does exactly what you are looking for. But doing the tutorials (not only reading a little bit) help you to understand, how things are working. This is important and this is the first step to do.

Thanks for the reply and the links. Yes, posted 2 days ago. It didn't appear on my list on the forum assumed it had been deleted as i accidentally replied to Scott's personal email rather than the forum.

No, Scott's post didn't help, although it was interesting. The code was in a different programming language, C if I recall, a little beyond my comprehension.

I have the book you mention here in front of me. Am half way through, just completed Xylophone so am familiar with the basics. What i cannot get my head around is my question of conversion from lat/long to OSGB. I though someone far more proficient than me may be able to save me days of heartache trying to work it out for myself. If needs be I will work it out but, if someone has already considered it...

The code was in a different programming language, C if I recall, a little beyond my comprehension.

it seems to be, you have to do the work and translate that into App Inventor

It would be useful for mapping purposes in the UK. I have thought about coding up lat long to ngr conversion. I presume it would be best to do it as an AI extension.

--

This seems to be the best algorithm and instruction I could find. There's the price of a case of beer to the one who solves it!

How to convert latitude and longitude to a British National Grid Reference.

Although there is a lot of involved maths, this is not a difficult task. There are some problems, however, firstly due to the different ways latitude and longitude can be defined. All mapping systems have to use a model of the shape of planet Earth, which is not a perfect sphere. The distance between the poles is less that the distance across the equator, making a shape called an ellipsoid. But the ellipsoid is not a perfect fit either.
Most accurate maps show only part of the surface of the Earth, usually a single country or part of a country. So the usual way of getting round the problem is to define an ellipsoid whose surface has a good alignment with reality over the area the maps is to cover. The Ordnance Survey maps of the United Kingdom use three such reference ellipsoids, one for the Island of Great Britain (England, Scotland and Wales), another for the Island of Ireland, and finally a third ellipsoid to deal with the Channel Islands. This article primarily describes Great Britain, but the same maths can be applied to most of the other two areas.
The traditional ellipsoid adopted for Great Britain is called the Airy Spheroid. This was defined in 1830 by Britain's Astronomer Royal, Sir George Airy. This has a semi-major axis of 6377563.396 metres, and a semi-minor axis of 6356256.910 metres. In the equations that follow we use a constant called the eccentricity, this is simply the diffence between the squares of the axes, divided by the square of the major axis.


  function ecc(major, minor)
  {
 return (major*major - minor*minor) / (major*major);
  }

Using the formula above with the Airy axes we get an eccentricity of 0.006670539761597337
Let us assume that that our measurements of latitude and longitude are based on the Airy spheroid. This may not be true, but I'll cover that later on. Firstly we need to convert our measurements from degrees to radians. There is accomplished by multiplying our latitude or longitude by PI / 180. I shall call this conversion factor deg2rad. A few other constants are also defined:


  function LLtoNE(lat, lon)
  {
    var deg2rad = Math.PI / 180;
    var rad2deg = 180.0 / Math.PI;
    var phi = lat * deg2rad;      // convert latitude to radians
    var lam = lon * deg2rad;   // convert longitude to radians
    a = 6377563.396;       // OSGB semi-major axis
    b = 6356256.91;        // OSGB semi-minor axis
    e0 = 400000;           // OSGB easting of false origin
    n0 = -100000;          // OSGB northing of false origin
    f0 = 0.9996012717;     // OSGB scale factor on central meridian
    e2 = 0.0066705397616;  // OSGB eccentricity squared
    lam0 = -0.034906585039886591;  // OSGB false east
    phi0 = 0.85521133347722145;    // OSGB false north
    var af0 = a * f0;
    var bf0 = b * f0;
    // easting
    var slat2 = Math.sin(phi) * Math.sin(phi);
    var nu = af0 / (Math.sqrt(1 - (e2 * (slat2))));
    var rho = (nu * (1 - e2)) / (1 - (e2 * slat2));
    var eta2 = (nu / rho) - 1;
    var p = lam - lam0;
    var IV = nu * Math.cos(phi);
    var clat3 = Math.pow(Math.cos(phi),3);
    var tlat2 = Math.tan(phi) * Math.tan(phi);
    var V = (nu / 6) * clat3 * ((nu / rho) - tlat2);
    var clat5 = Math.pow(Math.cos(phi), 5);
    var tlat4 = Math.pow(Math.tan(phi), 4);
    var VI = (nu / 120) * clat5 * ((5 - (18 * tlat2)) + tlat4 + (14 * eta2) - (58 * tlat2 * eta2));
    east = e0 + (p * IV) + (Math.pow(p, 3) * V) + (Math.pow(p, 5) * VI);
    // northing
    var n = (af0 - bf0) / (af0 + bf0);
    var M = Marc(bf0, n, phi0, phi);
    var I = M + (n0);
    var II = (nu / 2) * Math.sin(phi) * Math.cos(phi);
    var III = ((nu / 24) * Math.sin(phi) * Math.pow(Math.cos(phi), 3)) * (5 - Math.pow(Math.tan(phi), 2) + (9 * eta2));
    var IIIA = ((nu / 720) * Math.sin(phi) * clat5) * (61 - (58 * tlat2) + tlat4);
    north = I + ((p * p) * II) + (Math.pow(p, 4) * III) + (Math.pow(p, 6) * IIIA);
    east = Math.round(east);       // round to whole number
    north = Math.round(north);     // round to whole number
    nstr = String(north);      // convert to string
    estr = String(east);       // ditto
  }

  function Marc(bf0, n, phi0, phi)
  {
    var Marc = bf0 * (((1 + n + ((5 / 4) * (n * n)) + ((5 / 4) * (n * n * n))) * (phi - phi0))
     - (((3 * n) + (3 * (n * n)) + ((21 / 8) * (n * n * n))) * (Math.sin(phi - phi0)) * (Math.cos(phi + phi0)))
     + ((((15 / 8) * (n * n)) + ((15 / 8) * (n * n * n))) * (Math.sin(2 * (phi - phi0))) * (Math.cos(2 * (phi + phi0))))
     - (((35 / 24) * (n * n * n)) * (Math.sin(3 * (phi - phi0))) * (Math.cos(3 * (phi + phi0)))));
    return(Marc);
  }

This is quite involved maths, and I am not going to try to explain it! This is the same as that used in the Ordnance Survey document A Guide to Coordinate Systems in Great Britain and converts latitude and longitude to a Transverse Mercator projection. These projections are often used for paper (flat) maps. You can find some explanation in the OS document.

The Javascript maths functions are fairly obvious, I hope! You will have to scroll far to the right to see some of the code. Some of the expressions are quite long-winded, so I have split them up a little to avoid too many confusing brackets and Math functions.

We can now try this with some test figures, latitude 52° 39’ 27.2531" north, 1° 43’ 4.5177" east. These figures are taken from a worked example in the Ordnance Survey document.


    lat = 52.65757;  // decimal version of latitude
    lon = 1.71791;   // decimal version of longitude
    LLtoNE(lat, lon);
    document.write("And the results are:");
    document.write("Northings: ",nstr, " metres.");
    document.write("Eastings: ", estr, " metres.");

And the results are:

Northings: 313177 metres.
Eastings: 651409 metres.
The NGR northings and eastings are shown along the axes of any Ordnance Survey map. Normally the NGR is shown as letters and numbers. The letters replace the 100km digit(s) of the eastings and northings. This could easily be determined from a simple look-up table, which would need to handle the ninety one 100km 'squares'. So here is a weird formula, source unknown, which does the job in less space:


  function NE2NGR(east, north)
  {
    var eX = east / 500000;
    var nX = north / 500000;
    var tmp = Math.floor(eX)-5.0 * Math.floor(nX)+17.0;
    nX = 5 * (nX - Math.floor(nX));
    eX = 20 - 5.0 * Math.floor(nX) + Math.floor(5.0 * (eX - Math.floor(eX)));
    if (eX > 7.5)
      eX = eX + 1;
    if (tmp > 7.5)
      tmp = tmp + 1;
    var eing = String(east);
    var ning = String(north);
    var lnth = eing.length;
    eing = eing.substring(lnth - 5, lnth);
    lnth = ning.length;
    ning = ning.substring(lnth - 5, lnth);
    ngr = String.fromCharCode(tmp + 65) + String.fromCharCode(eX + 65) + " " + eing + " " + ning;
    return ngr;
  }

So for a worked example using the same latitude and longitude, we run the code:


    lat = 52.65757;
    lon = 1.71791;
    LLtoNE(lat, lon);
    document.write("And the results are:");
    document.write("Northings: ",nstr, " metres.");
    document.write("Eastings: ", estr, " metres.");
    ngr = NE2NGR(east, north);
    document.write("NGR:", ngr);

And the results are:

Northings: 313177 metres.
Eastings: 651409 metres.
NGR: TG 51409 13177

This is a one metre grid reference, it can be reduced to the standard 100m reference by omitting the last two figures of each five figure group: TG 514 131.

That is basically how it is done. There are a few short cuts, for example I have not taken into account the fact that the NGR grid has a scale factor that varies as you move laterally across the map. You can find appropriate code to deal with this issue in the OS document linked to earlier. I haven't bothered here, in any case the error involved is quite small.

This seems to be the best algorithm and instruction I could find

just for completeness: algorithm copied from here http://www.dorcus.co.uk/carabus/ll_ngr.html

I will try to recode this in MITAI Math blocks for the price of a case of Ensure. :-)

Awesome. Will check this out later and get back, thanks.

--

I did a test and something didn't quite work out. test data is Lat: 51.30220, Lon: 2.54200 - this should equate to: ST 93505 78582 but the app returns TS 16533 65755

How about taking in the data provided by the location sensor and converting that? I'll then be asking for your PayPal email for the case of beer value :)

This version adds a button for getting the lat,lon from the location sensor.

The test lat,lon from the original javascript tutorial was used in this project for testing and returns the same result as the author's.

So the calculations are working the same here.

If his javascript has a bug somewhere, then it will show up here as well.

LatLontoNGR2.aia

Sorry Scott, been away for a few days. Will look at this and get back to you over the weekend. Cheers.

Sorry for the delay - this seems to work really well. Scott, what's your PayPal address and what's the cost of your tipple?

I now need to work out how to get this into an existing app i'm working on. Can't quite get my head around where the conversion code is retrieved from the htm file. Can you tell me where it's stored and, if i was to transfer your blocks and design across to another app would it still work?

Thanks for the offer but I don't accept payment for MITAI support -- it's one of my hobbies :)

The html file with javascript is attached but it is also stored in the aia project Media folder as well.

You can download it from there also.

Here is the entire html source for the conversion code with my few lines of code added to communicate with MITAI:

<html>

<head>

function NE2NGR(east, north)

{

var eX = east / 500000;

var nX = north / 500000;

var tmp = Math.floor(eX)-5.0 * Math.floor(nX)+17.0;

nX = 5 * (nX - Math.floor(nX));

eX = 20 - 5.0 * Math.floor(nX) + Math.floor(5.0 * (eX - Math.floor(eX)));

if (eX > 7.5)

eX = eX + 1;

if (tmp > 7.5)

tmp = tmp + 1;

var eing = String(east);

var ning = String(north);

var lnth = eing.length;

eing = eing.substring(lnth - 5, lnth);

lnth = ning.length;

ning = ning.substring(lnth - 5, lnth);

ngr = String.fromCharCode(tmp + 65) + String.fromCharCode(eX + 65) + " " + eing + " " + ning;

return ngr;

}

function LatLon2Ngr()

{

// pass the lat,lon as a space-separated string: "<lat value> <lon value>"

var latlon = window.AppInventor.getWebViewString().split(" ");

var lat = latlon[0];

var lon = latlon[1];

LLtoNE(lat, lon);

window.AppInventor.setWebViewString(NE2NGR(east, north));

}

</script>

</head>

</body>

</html>

The code to get the lat,lon from MITAI is in blue:

The code to send back the result is in magenta.

function LatLon2Ngr()

{

// pass the lat,lon as a space-separated string: "<lat value> <lon value>"

var latlon = window.AppInventor.getWebViewString().split(" ");

var lat = latlon[0];

var lon = latlon[1];