2017년 7월 7일 금요일

Using an alternate emulator with App Inventor 2 - YES YOU CAN


I want to share this invaluable way I found to use an alternate emulator for App Inventor 2. 
As you know the App Inventor 2 emulator, works, but takes way too long to load and screen switching is very slow.  It also crashes often, and has limited screen size.

Here is how you can use an alternate Emulator

1. Create your choice of Emulator using Andriod Studio's AVD tool
2. Start the Emulator from Android Studio
3. Install the MIT App Inventor 2 Companion App on the emulator by doing an "adb install .....".  Make sure you dont have any empty spaces in the file name.  You should be able to download the apk for the MIT App Inventor 2 from the MIT website.
4. Start aiStarter 
5. Connect to App Inventor interface (your project)
6. Click on Emulator for the connection
7. You project will open in your emulator!  
It is much faster with the local server and you can see the effects of your changes seamlessly  . 
Please contact me if you have any questions.  It saved me a ton of time and frustration.

You can also install your app apk onto the Andriod Studio's emulator using the "adb install....". You will of course need to build the apk and download to your computer first.
I have also done this with AIUltimate (the local server option).  It is much faster with the local server and you can see the effects of your changes seamlessly  .   

--
Thx for sharing :)

--
A lot of people (e.g., Enis) prefer using Genymotion with App Inventor.

Here is some documentation that we are about to add to the App Inventor site: Using the Genymotion emulator with App Inventor

--
I am unable to load my one project on emulator as i get error to force stop.

Other two project are tunning fine on emulator.

Can you please help.

--
@ Gagan....   an answer for you to consider is here  label   since other projects work.
It is very probable you have coding issues or issues with too large sound files or images or many screens.

You do not need to double post.  The forum members "hear" you.

--

Sorry activity update (in application google services framework) is not respond.


The app inventor 2 will not connect with the emulator? or the contrary. 
When I connect to emulator it start up, but after some minutes I get the message, 

"Sorry activity update (in application google services framework) is not responding"

I use win10 64.

--
The version update process in the emulator is coordinated with popup dialogs on the AI2 web site.

Sometimes one side is waiting on a response from you to the other side,
but the window is hidden on your PC.

Alt Tab around to make sure none of your Windows tasks is waiting for a response from you.

-- 
Thank you very much for your answer. It helped but new problems came up? 

When I start the emulator I get the message, 

"Activity MIT AI2 Companion (in application MIT AI2 Companion) is not responding" 

It doesn't matter if I press "force close" or "wait" I get a new message, 

"The application MIT AI2 Companion (process edu.mit. appinventor.aicompanion3) has stopped unexpectedly. Please try again"

When I press "force close" I get the final message, 

"Running using the emulator or USB. Waiting to get blocks. Version: 2.41"

Then nothing happen? I have trying this several times and I get the same result. 

-- 
Look through the Companion and emulator section of this FAQ for ideas ...    FAQ for Companion and Emulator

-- 
Thank you Abraham for the link, but I could not find any solutions for my problems. 

-- 
The Companion and Emulator are just debugging tools.

If you can't get them running, you can still use the Build pulldown
to prepare .apk files, download them onto your device,
and run your app on your device to test it.

-- 

Drag a Canvas larger than the device screen


This is part of a work in progress for a user on the MIT App Inventor forum.
But it is develped enough to demonstrate that a Canvas can be dragged.
Also shown is how the Canvas can be both wider than and taller than the device screen.

The nesting of the Canvas inside a set of screen arrangements as follows allows the Canvas to be positioned exactly:

A vertical screen arrangement is a container for...
    A vertical screen arrangment that acts as a spacer to move the Horizontal Arrangement below it up and down by adjusting the arrangment's Height
    A horizontal screen arrangment that contains:
        A horizontal Arrangement spacer that pushes the Canvas to it's right left and right by adjusting the arrangement's Width
        A Canvas

When the user drags a finger on the Canvas, the Canvas Dragged event block uses the prevX, prevY and currentX, currentY values to adjust the screen arrangement width and height spacers and move the Canvas.



To test the dragging feature, touch the (+)--  magnifying glass on the main screen to zoom in, then drag the canvas.
Responsive sizing is used in this project as well.

Responsive Design in App Inventor


version 1.0: August 15, 2015
One tricky issue in designing apps is making apps that look good on devices with screens of differing sizes.  For example, apps designed for a given phone should also look good on tablets or phones with a different screen size.  Making apps that have this property is called responsive design.  
A common approach to responsive design is to build apps that include multiple layouts and multiple images to accommodate different screen sizes and resolutions.  This gives good results, but it makes more work for developers.  App Inventor uses a simpler approach, but that approach is more limited in terms of the kinds of apps it can handle.  

1. Specifying sizes as percentages

There’s one important rule when using App Inventor to create apps with responsive design:

Specify widths and heights of components as percentages of the screen width and height, rather than as fixed numbers of pixels.
For example, to make a button whose width is half the screen width, set the button’s width to be 50 percent rather than setting it to a specific number of pixels.
“Percentage” here means percentage of the screen width or height, not percentage of a containing component.   For a button inside a horizontal arrangement, a width of 50 percent means half the screen width, not half the width of the arrangement.
You can also specify widths and heights using “fill parent” and “automatic” just as always in App Inventor.

2. Fixed vs. responsive sizing

Many developers will not want to change the way they are building apps, merely to provide responsive design.   To accommodate this choice, App Inventor includes a screen property called Screen.Sizing.  Screen.Sizing can be set to either fixed or responsive.   When sizing is fixed, App Inventor creates apps for a screen of size 320 pixels wide and 460 pixels high, but it scales the app’s appearance to match the actual size of the screen that the app is running on. This display is essentially equivalent to how App Inventor apps were rendered on Tablets prior to App Inventor version 145.
There are no Blocks to set Responsive / Fixed. To change the Screen.Sizing property, on the Designer screen   with Screen1 selected in Components, go to Properties on the right-hand side of the App Inventor. You will find a box below “Sizing” that usually defaults to Fixed, located about 2/3 down. This property is set project-wide.

When sizing is set to responsive, App Inventor apps use the actual number of pixels for the device the app is running on.  This number might be different for different devices.
Here is how we recommend working with App Inventor:

⦁ If you are currently working on an app that uses fixed sizing, or you have an old app that you don’t want to change, or you care only about a single screen size, then set sizing to fixed.  The display users will see will be very similar to the display in pre release 145 apps.

If you are making a new app, set sizing to responsive and specify widths and heights as percentages rather than numbers of pixels.   For example to set the width of a button to 50 percent of the screen width, you can set the width in the designer by specifying it as a percent:

You can also set percentage sizes in the block editor using the WidthPercent and HeightPercent properties:
⦁ You can also use automatic and fill parent.  

One major exception to these rules is when working with a Canvas and creating drawings and animations, as explained below.

3. Detailed example

Here’s a detailed example illustrating the difference between fixed and responsive sizing:
Suppose you have an app that includes a button and you’d like the button width to be half the screen width.  You build your app on a phone whose resolution is 320×460.  You set the button width to 160 (half the screen), and you set sizing to fixed.  If you ask App Inventor what the button width is, the result will be 160 and screen width will be 320.
Suppose you build  the same app on a tablet whose resolution is 600×860, still with sizing set to fixed.   If you ask App Inventor what the widths are, the button width will still be 160 and the screen width will still be 320, and the image on the tablet will be expanded to fill the entire screen.  App Inventor will treat the larger tablet screen as if the width were only 320.   As result, you can’t take advantage of the higher resolution to make the app look better.   For example, fonts will still be the lower resolution fonts, even though tablet display could look nicer.  The fonts might also look too large, because they are sized for a 320×460 screen and then scaled up to the actual screen size of the device.
In contrast, suppose you build the same app with the button width set to 50% and sizing set to
responsive.  On the phone, things will be the same as before; screen width will be 320 and button width will be 160.   But things will be different on the tablet.  App Inventor will report the screen width as 600 and the button width as 300.    As a result, you have the extra resolution to work with in your app design for the tablet.
It’s also possible to take mixed approaches.  These can be more confusing and less useful, and we recommend that you use them only in special circumstances.   Here’s how they behave:
Using percentages with fixed sizing:  Suppose you set sizing  to fixed, and set the button width to be 50%.   On the phone,  App Inventor will report the button width as 160 and the screen width as 320.  Similarly, on the tablet, the button width will still be 160 and the screen width 320.
Using pixels with responsive sizing:  Suppose you set sizing to responsive and set the button width to 160.  On the phone, things will be the same as before: screen width 320 and button width 160.   But on the tablet, with screen  width  600 the button width will still be 160, which is much less than half the screen width.   As a result the layout on the tablet will look different from the layout on the phone, which is probably not what you want.
In general, we recommend as above that you use percentages and responsive sizing for new apps, and use pixels and fixed sizing  for working on existing apps that you don’t want to change, or new apps where you don’t care about them running on devices with different resolution screens.

4. Special circumstances

There are situations where you might want to specify sizes in pixels even though you are using responsive sizing.
One situation is where you have a low-resolution image that looks good at a width of 300 pixels, but not at 500 pixels or more.   In that case, you might want to set the width of the image component to be 300, even with sizing set to responsive.   As a consequence, your app will look different on the phone and the tablet because the image will the same size, although the screen sizes will be different.   This is the situation where developers using more advanced tools can provide multiple copies of the image for use with different screen sizes.  MIT has not built anything in App Inventor to support such multiple images, but we might do that if there is enough demand.

5. Limitation: Drawing and animation

App Inventor’s features to support responsive design are limited and incomplete.   One place where this limitation shows up is in drawing on the canvas and using sprites for animation.   Many apps use coordinate values for making drawings and controlling interaction, and this can become complicated to arrange in dealing with multiple screen sizes.   For now, we recommend  three approaches:

1. Use fixed sizing for these apps, i.e., don’t use responsive design here.

2. Use responsive sizing, but set the size of the canvas to be a fixed number of pixels.  In other words, while the rest of your app can be responsive, the canvas (and the drawings within it) will have fixed size.   You’ll have to choose the fixed size, though, and that size might not look good on all devices.

3. Use responsive sizing and set the canvas size to be an appropriate fraction of the screen size.  Then, within the canvas, do arithmetic to compute coordinates to make things relative to the actual canvas size.   This will give the best results, but it can be complicated if there is a lot of drawing and animation.

For example, suppose you have a canvas whose width is the width of the screen and you want to put a ball in the middle of the canvas.   With fixed sizing you could know the width of the canvas when you built the app, and could set the ball’s X coordinate to that number in the designer.   But for responsive sizing you would need to use compute the X coordinate when the app runs, like this:

 That’s not as straightforward as setting the coordinate to a fixed number in the designer.  But it’s what you’d need to do if you want your app to look the same on screens of different resolutions.

You might wish to create procedures to size and position Balls and ImageSprites on the Canvas as shown below. The Percent arguments would be relative to the Canvas Width and Height, rather than the Screen Width and Height of the other components.

         


None of these approaches is totally satisfactory.  We may later add features to App Inventor to improve things based on User’s  App Inventor experience with responsive design.

Note: At the moment, you cannot scroll through a Canvas component with AI2. When you use the Canvas on a scrollable screen, leave a margin on the right or left or both sides of the screen that can be used to scroll beyond the Canvas (assuming there are more visual components “beneath” the Canvas).  Simply, if you want to “scroll through” a Canvas, never set the Canvas.Width to the Screen.Width.
<suggestion/>I recommend rewording this to include what I have experienced with a recent map project. The map is larger than the device screen in both width and height. The Canvas itself can be dragged by sizing containing Screen arrangements using the Canvas Dragged arguments. See: Drag a Canvas larger than the device screen
(Scott Ferguson)</suggestion>

6. Responsive design and Google Play

Google Play is Google’s market for Android Apps.  App Inventor users can upload their apps to Google Play.  (See Publishing Apps to Google Play.)  Google Play takes account of the device on which an app is to be installed, and tries to present only those apps that are compatible with the device, including whether the device is a phone or a tablet.

Apps created with App Inventor are considered to be compatible both with phones and with tablets and can be installed on both kinds of devices.   If you are downloading from Play to a tablet, however, you might see the comment  “designed for phones”.   This won’t prevent your app from running, but it’s an indication that Google has certain design guidelines that they would like tablet apps to follow, such as providing multiple copies of images and different component layouts for screen of different resolutions.   These  guidelines are generally not possible to follow with App Inventor.

Questionnaire with 5 buttons in a row, each button with 10-12 letters


I want to develop an questtionaire with exactly 5 buttons in a row in portrait orientation. Each botton with a particular word. Unfortunately, each of the words has many letters (10-12 each), and the words have to be in a row. App inventor shifts out the fifth word to the right, so that it cannot be read.

Is there a solution to reduce the distance before and after the word in the button, without the need for a new line?

--
Think about changing design, because even if that's feasible, it may not look correct on a device with smaller screen size

-- 
Hi Markus, other ideas: 


- use Canvas with text. 
- use Button.Image  with text image.

-- 
List the 5 words back to back in a html label, 
separated by commas.  Highlight the focused selection candidate
by surrounding it with <big> or <bold> markup, as appropriate.
Add a slider or buttons or a thin canvas to move the focus left or right,
per taste, and add a SELECT button to accept the focused choice.

(Or just use a ListView on the side).

-- 
since in the end there are 50 buttons, 50 images with only one word as content seems a lot of work.
can you help me getting an canvas with text?

-- 
Thank you, friends. But there should be something like a button for the user to tap on.. No slider. 
Is there a possibility to reduce the gap between text and margin of a button? 
On a tablet there should be enough space for up to 60 letters in portrait orientation, similar to a piece of paper.

-- 
An image from your Designer screen would help the forum provide suggestions.

1) I expect you  do not need 50 buttons.   You probably could do with 5 buttons in a row in a horizontal  arrangement.  You use a List to populate the buttons.As each responce in your question is made, use a button (Next Question) to add the answer to a List then ultimately in a TinyDB for persistence. 

2) The margins on a Button are set automatically.  You can reduce the font size to reduce the Button footprint.  The font size is currently size 14, try 10 and perhaps you will fit everything on a row, if that does not work, use a horizontal scrollable arrangement perhaps for your 'row' of five buttons.

3) This advice might help you design your screen


--
If you have not done so yet, check out the ListPicker and ListView components.

I like the List Picker for its efficient use of screen space.

-- 
Thanks Steve and Abraham. I could solve the problem with your help! With responsive design it works, i did not know this feature!
GREAT!

-- 

Adding WiFi Extension


My name is Suryaveer . I am a 2nd year undergrad student pursuing B.tech in Indian Institute Of Technology Indore,India. I am looking forward to participate in GSOC-2017.
I want to add WiFi extension in this project because many Iot project can't done without using WiFi. Use of BT over WiFi is quite slow and less bandwidth also. That's why i came across this idea to add WiFi extension in MIT-appinventor.
Thus, I want to be a part of the project. Kindly guide me on how to get started with the project.

--
thanks for your interest. The ideas page [1] lists a number of potential projects for the summer, and the instructions page [2] lists the challenges and information needed to do the application. Also, don't forget to apply through the GSoC site [3].

If you want to discuss a particular project, please open a thread here in this forum to do so.

All the best!


--

clueless :Attempt to get item number 2 of a list of length 1:


Attempt to get item number 2 of a list of length 1: (*empty-string*)<br/><i>Note:</i>&nbsp;

I am a beginner and it’s my first post. Coding on Arduino I discovered  App Inventor 3 weeks ago. I tried quite a few tutorials and made a couple of basic apps. Thanks to this forum.

However, right now I am mired for 5  whole long days with an app.
First I made an app for getting time from Arduino’s RTC so has to reset RTC’s time and date from Android. Very basic and it’s working seamlessly.
Then I made an app for getting GPS longitude, latitude and altitude from Android and send them to Arduino. Seamlessly working too.
And I decided to combine both apps in one (name: tabsMINIMA), using the brilliant TABS TABS app from Cyd Carp. And no way to have it work, even though it’s just merging to 2.

MY TROUBLE IS that whatever string I sent the app, it is declaring « empty string » ?
 « Select list item: Attempt to get item number 2 of a list of length 1: (*empty-string*)<br/><i>Note:</i>&nbsp;You will not see another error reported for 5 seconds. »

My Arduino string is to be cut into strings using ", "(comma)  delimiters.

For testing inventor reception I am using either;
hc06.println ("index1,index2,index3,index4,index5,");  or shorter as the app reads most of the time  3 strings ; hc06.println ("index1,index2,index3 ") ;

 My first label in the app displays the whole string sent by Arduino, and it seems ever OK.  Then, 3 other labels for respectively index 1, index 2 and index 3.  Almost never any display for index 1. Display for index 2 and 3 is very erratic.

Regards to Arduino receiving data from Android, most of the time, any string is missing the last third substring or this one is gibberish.

Notice that when the app is disconnected, it’s tough to connect it again.

Why on earth copy cat of 2 distinct apps are useless when merged? I should miss something but for 5 whole days (and part of nights) I tried every possible trick no way. No pieces of information found on the web. I am out of imagination and turning insomniac and mad. If You can have a look and be indulgent, thanks a lot. 




--
See attached

problems ....

1, The Do It results will be empty because the data is gone from the buffer after it has been received.  To deal with this,  receive the data into a global variable and apply the Do It to a get global variable block.

2. You are reusing the global inputslist as a text and as a list.  Make a new global inputstext for just the text, and split it into inputslist, which you should initialize as an empty list block.  Using two variables makes debugging easier, since it lets you trace back to where things went bad without destroying evidence.

3. Use only a single ReceiveText block in the Timer event, then work from the received  global value.

4. Set a Delimiter of 10 in the Designer BT component, to force reception only of full lines delimited by line feed (println).  To request only a full line from BT, ask for -1 as your byte count in the ReceiveText (but not in the AvailabletoReceive test)

5. After you split the text into a list and before you go selecting items from it,  test the list length, to make sure you don't take a long walk on a short pier.

See the Bluetooth/Arduino section of this FAQ, especially the Delimiter post ...


-- 
Thanks a lot for Your kindness and Your expertise.
I see that I was very far from finding a solution on my own. Especially because of the Arduino's mentality, global variables are bad.
I am going to implement Your recommendations ASAP though I am now back to work and with less free time. Count on me to keeping You in touch.
Once again I express my deep gratitude to You and the forumites.

-- 
The link you are providing is truly a gold mine of information, I wish I found it earlier That can curb down quite a few questions from beginners. Thanks a lot   Kind regards   
.
-- 
Fantastic,  thanks to You, the app is getting data from Arduino perfectly clear.  What puzzles me is that "call bluetooth1.client receive text" is still moaning, showing an "?", but not blocking.
Now I have to solve what suddenly is garbling the end of text sent by App to Arduino? Attached what is gotten by Arduino: Ideally D6,N7,Y17 for date, H14,M39 or M40,S(2 digits number) for time , 149.14184,27.08744 for latitude and longitude?????
More homework for me but it's fun.  Kind regards.  JB



-- 
I must be terse today, until I can get over today's eye surgery.

(The bandage pushes my glasses off my nose so I am one eyed and one handed)

You used the wrong length block on the list that came out of the comma split.
You should have used the corresponding length of list block,
from the lists section of the FAQ.

Read the lists post HOW TO WORK WITH LISTS.

Also post your .ino sketch here, so that  a fully powered reader can look at it.
Include a full dowloaded image too.ABG

-- 
thanks a lot, just absence-mindedness, now corrected. Please don't waste Your time with my beginner's questions as far as You detect that I am not completely on the wrong tracks. 
I wish You a fast recovery. My questions are about my past time, my job is medical diagnostics. I can bet, considering statistics of cases, that your vision will be considerably improved.

--
Thank you for your kind words.

I figured out how to McGyver the glasses.
I now have two hands online.




-- 
Focal length is a bitch. :)
Congs, You conceived a very astute solution. Perhaps the last time You are wearing glasses.I hope that You aren't suffering and that the patch will be removed tomorrow.  Fast recovery. Kind regards.  

-- 

making a quiz app with app inventor 2


i want to make a quiz app but also want to add a score up for correct answers and dow for wrong answers. how do i get score to carry over to next page? here is an image of what one of the question pages looks like. after answering i can get the "correct" to highlight green and the score to go up one or down one. but when i click to next page score is back to zero.

--
See aia attached.

-- 
wow. thats a lot to take in. i will look and try to break it down and decipher it. i am very very new to this. but thank you for helping. i hope to improve my understanding enough to complete my project the way i want it.

-- 
my quiz is for pages  (screens) do i do this on every page?

-- 
I looked at your project.

You had one screen per question, hard wired into the app.

The approach is totally wrong if you plan on going past 9 questions.

Find a quiz app that loads its questions and answers from a file,
and works in just one screen.

If this is a class assignment,
it should get a failing grade  in its present form.

-- 
i appreciate the criticism. do you have any suggestions on correcting and improving this? i am very new to all of this.

-- 
ok i have redone quiz to try and learn. now my problem is i cannot get images to change with next question. i dont see what i am doing wrong. 


-- 
Your image file names end in .png
but your list of image file names is missing the .png suffixes.

For faster answers, make it easier for your readers
by also posting downloaded images of your blocks,
like attached.



-- 
apologies on not making easier with pics as well will remember for next time. thank you..

i figured that out about the image .png and made appropriate changes. i am now researching how to keep a score and after last question end the quiz instead of if automatically going back to first question. any suggestions would be great. 

--