2017년 7월 31일 월요일

Angry Flappy Birdy



Launch the angry flappy birdy at the enemy cat.



--

Trying to code projectile motion


I am trying to code an app to show projectile motion.  I want a ball to travel in a parabola across the screen. What I want the use to be able to do is enter the velocity and angle into a text box and the app to use the clock time.  
Equations are.


--
You have at least three errors in your blocks (image attached, please do so in the future to save us the trouble) ...

You are using Timer.Interval as the accumulated time theta.  
Read the tool tip for that block, and you will see that it is the (constant) interval between one clock fire and the next, initially 1000 milliseconds.
You are also failing to scale it with a speed factor.

You are using the x and y trigonometric outputs directly in the canvas coordinate system.
They do not at all match.
Canvas coordinates x,y run from 1 to Canvas1.Width and 1 to Canvas1.Height, with the origin at the upper left.
Math coordinates typically run from (0,0) at the center of a diagram, with y increasing upwards, opposite to the Canvas.

Sin and Cos outputs are <= 1 in absolute value, giving you a much too little dot on a canvas.
So you have to apply scale factors and offsets in your formula.

Let us know if you need more help.


--
I just noticed another error.

You asked for a parabola, Angry Birds style I imagine, but you posted formulas involving trig functions sin and cos.

There are two different ways of animating a thrown ball in AI2:
Relying on a clock routine to continually adjust the x,y coordinates of the ball on the canvas, or
Giving the ball an initial Speed and DIrection, and continually adjusting the Speed and Direction, letting AI2 move the ball.

I am starting to suspect you wanted to use the second method?
But your equations don't quite fit your parabola model.

Can you show us where you got them?

--
The formulas come out of my math classroom.  :) I am a teacher and just started using app inventor 2 in my master classes and I thought it would be great to have my Precalculus students use it in the classroom but i have to know how to use it first.  I really don't know how to make it travel in a parabola path.  
I don't know that I need a clock to make the ball move.  Here are the changes I have made and the travel is must more what I would want but now it is diagonal. 


--
I reworked your app to get it closer to what your formulas require.

It is at the point where the ball will move and fall downwards, but I can't translate drags and swipes into a healthy velocity.
You may need to apply fudge factors.

I used functions liberally to show the passage of time better and to separate the GUI from the math.

This sounds like the kind of example Scott Ferguson would have in his App Inventors Developers Library, if you're up to a Google Search.








--
My Angry Flappy Birdy project plots a parabola.

--
Thanks, @Scott.  It's good to have working code for an example.

Before I point out to the original poster how Angry Flappy Birds gets its parabola,
let me mention a side billiards project that might be useful for trigonometry and conservation of
momentum studies:

If you haven't seen the Angry Birds app yet, the idea is to have a slingshot
(in this case, a large capital Y) that can launch a bird into the air to hit a target.

(See the two screen shots).
(The slingshot doesn't line up with the launch points due to an inconsistency between
my emulator's resolution and Scott's device's resolution, and due to AI2's lack of
a facility to specify font height as a proportion of screen height.  No matter.)

An initially inactive clock is used to update the bird sprite's position each clock tick.
(Some extra code to spin the target cat after it is hit can be ignored.)

The launch happens in the When Birdy Touch Up block.
The calculation of the X and Y velocity components is hidden in
the drag event block, where two globals are updated:
global ForwardSpeed and global UpwardSpeed.

The repeating timer SlingBirdyTimer calls UpdateBirdyPosition each tick
to add the two speeds to the birdy's X and Y positions respectively.
Because of gravity, that routine also slows the upward speed by adjusting
it by the gravity constant.  (Because Canvas Y values increase downwards, not upwards.)

A separate routine draws red lines between successive positions
of the center of the bird, to show its trajectory.

You may notice that there is no (t squared ) calculation in this model,
only a ( delta V / delta t ) continual speed adjustment, so you would need slightly different
equations to model this.
I don't know if those would fit into your pre-calculus math.

I'll check my FAQ on this board to see if there is a good graph package I can
integrate into my own attempt.








--
I found a decent blocks-only line graph package in this board,
(Thank you, Ryan Cheung), and am reworking my attempt.

Trying to use a clock for real-time capture of the parabola is self-defeating, because you can't predict what scale factor you will need for the graph until a good set of (x,y) points has been collected.  Most launch attempts either bang against the edge of the canvas or flop to the ground, if the scale and velocity and gravity aren't in sync.

So the trick is to start from t=0, x=0, y=0 and keep incrementing t, collecting x(t) and y(t) until y < 0. then graph it all.

--
I got a full parabola using the technique I described in my prior post.
See attached.
The X axis numbers run together a bit.
I shrank their font size, but it wasn't enough.
I also rounded the X labels, to no avail.

I leave the tweaking to you.








--
Thank you very much for your help.  Here is what I was able to do for the application and I plan to add come creative elements.  You were very helpful.  


--
I looked in your .aia, and notice a typo in the V_sin_theta routine
left over from when I first coded it.

I'll leave it for you or your students to discover.

Learning to read what you code is an important part of coding.

--

Tag in Database


Hi there I need your help to finish a project of mine. I have just created a messenger app in AppInventor and wanted to test it. I have used the Firebase and i dont know how to create (or however it´s called) a Tag. I have just made these blocks right there (pic). I didnt know  that when i want to test it i cant even register a user without having a Tag in the Firsebase (as i think)

Could you help me there? What do I have to do? 





--
Have you done any of the tutorials related to Firebase?  See below.  Do a tutorial and get a working app that shows how Firebase works.  Doing that might help you a lot.

Build your app on a single screen (there are issues when you attempt using multiple screens with FB just as with a TinyDB)  Learn a bit about databases before you start your own code to see how Firebase works with AI2s Firebase object.   Create a Tag by placing a Text block into the FirebaseDB1.StoreValue   Tag puzzle piece that contains text.  The following article describes AI databases (not FB but FB is similar) ; Tags there work the same way in FB.    If a tag name is blank, no tag is created...for example, if you define a tag by using a TextBox, the TextBox must have some typed characters in it to save data.

Documentation:




Tutorials:

 Brief introduction to cloud data and the FirebaseDB component





The Firebase object in AI2 is EXPERIMENTAL ... to get it to work, you are going to have to try out different things and experiment.

You said " i cant even register a user without having a Tag in the Firsebase (as i think)" ... this is not true.  Anyone who has the compiled apk can see and share the data ...see the MIT documentation.    If your app requires a user to 'register' you will have to provide the code to register and limit participation in your database or chat or whatever.

or you might try the code here:  Create Blog / Forum in the app



as provided by Jeff.

--

Messenger doesnt work correct


Hi there I just completed my Messenger App. Normally it should work but there are 2 things which are not as i wanted to be.
1. When person A writes one message it sends it to person B... but it does continuing sending the message the whole time.
2. When person A sends a message to person B it will be shown at person B´s device but not on person A himself´s device.

Actually 3: why are there "clinches" this right here -> () before and after the text? (picture)

Might you maybe have a look through it? I would be thankful for it
sry for my bad english.

The AppInventor 2 data and 1 pic is here.




--
The examples here Tag in Database   do work.  

--
Really, thanks for your help Steve. But I do not understand what uve sent me before. Still i dont want to change my project because it is for my school and i want to leave it as good as i can like it is. But the screenshot helped me with one problem (the first one). I do still have problems with point 2 and 3 if u have time and the pleasure to help me with the other one´s it would be great but u ve already helped me so thanks for that.

--
Your aia file appears completely unrelated to your app or your problem. Please upload an image of the relevant blocks. This is the best way to get help.

--
Firebase does not update like a TinyDB,.  Your Clock1.Timer block is superfluous.  The continual firing of the Clock causes a repeating display of information unnecessarily and is the reason for #3.  With this code you make a List ...then you display the list and get the parentheses ( ) .  What blocks you have in the Clock would ordinarily go in the Firebase.GotValue   or  Firebase.DataChanged blocks if this were coded properly for a Firebase app in AI2..   

Why are you using both TinyDB and Firebase in the same Project?   You attempt to pass information between these two databases and your code is durcheinander gebracht. You can use the FirebaseDB for
all your information and data. When you combine the different databases in a single event handler you are exposing yourself probably to a timing issue.

You insist on using multiple screens. You do not have to use multiple screens. It creates complications. You could do the entire app with three or fewer vertical layouts that you turn Visible to true to show and false to hide.

Regarding #2 you might be able to do that but I don't see where you wrote the code. The idea behind most chat apps is that everyone see the entire chat. You will need some code in the DataChanged and or GotValue blocks with a conditional block to prevent your app from 'printing' a specific user's remarks... this could require quite complex logic.

You put a lot of hard work into this not realizing the issues involved in mixing databases. It is a shame. Sorry, I will not attempt to debug this mess Hakan. Since this is a chat app, you should keep FB and should not use TinyDB. Think about how you can use the Firebase to save the user log in information. You could save each user as a Tag in Firebase. Clean it up and post again and I will be glad to provide specific advice.

You might get lucky and someone else will attempt to unravel this..I expect it would take hours.

--

search results for repeating Clock timer event


one shot non repeating disabled Clock to Sajal's solution,. set to whatever number of ... Add a Clock.Timer event to catch the time out and respond.
How about a fast repeating Clock timer event with. set btnAdd.enabled to is a number(textbox1.Text) ? ABG.
Timer block is superfluous. The continual firing of the Clock causes a repeating display of information unnecessarily and is the reason for #3. With this code you make ... When you combine the different databases in a single event handler you are exposing yourself probably to a timing issue. You insist on ...
Then change all their text colors to 'None', and then change the background colors to a repeating pattern (at least 3 colors is needed to give the user the ... Then, each time the clock timer (which you can start/stop by an event of your choice) triggers, it will change each of the labels in the bar of color 1 ...
... table top, and. the orientation doesn't change, the display may not update. If that's a problem, switch to a clock.timer event for your repeating action.
You are doing in a button click event what should be done in a repeating Clock Timer event while the user types into that Text Box. You also need to ...
If so, put it in a button Click event for a Stop. button. Here's a ... Pull in a repeating 1 second Clock component. and set the Sound ... Timer do: check if VibrateSecondsRemaining > 0 then. set VibrateSecondsRemaining to VibrateSecondsRemaining - 1. start vibrating for 1 second. else. do nothing.
That would call for a Watchdog Timer design, where you keep a TinyDB tag msLastRainDrop with the last. time (in milliseconds from 1970) that the rain sensor event triggered, and a repeating clock. that checks Clock1.Now() in ...
Why do you use a while block in your clock timer event? Wouldn't an IF/THEN block be enough? The clock is doing the repeating for you. ABG.
components into a global list, for use by your random event selector and. the Any Clock blocks. You would need to code Clock.Timer events for the different Clocks . If it's just ... and set your clock to fire at that interval, not repeating.
the drag event block, where two globals are updated: global ForwardSpeed and global UpwardSpeed. The repeating timer SlingBirdyTimer calls ...


Get Notified if the Textbox is Empty


I would like to have your help regarding in Textbox 
like in the screenshot below, I want the user to have to enter Number of Quantity in one of the textbox to process the Add Button, how can I use if else to compare the one textbox is having a number and proceeds to Add item, Example, the Quantity the user puts 1 in CS so its now good to add item, but if the Quantity is empty the add item is disable to click or there is a notification. 

--
use a notifier???

--
i thing something like this. 

--
If Textbox.Text = 0 OR is empty (Textbox.Text)

--
How about a fast repeating Clock timer event with set btnAdd.enabled to is a number(textbox1.Text)  ?

--

Google Charts with data from AppInventors WebViewString


An easy way to use Google Charts in AppInventor 2.
Several users have already done some work here but I did not find any code that was easy to use or worked just out of the box.
So here is a new way of showing a PieChart using googles updated services.
The App just set the name and width/height of the chart when rotating the device.






--
thank you for your contribution

however my pie example works as it is https://puravidaapps.com/pie.php  pie.aia
and I guess the same for Juan Antonio's example here App Inventor and Google Chart. ...

--
The blocks and the html are certainly simple, on close examination.

But the data for the chart is hard-wired into the JavaScript in the html,
and not passed from AI2.

This would be more useful if it included AI2 data available at run time,
perhaps passed as JSON strings.

--

showing webpage problem. WebViewString not transfered to html?


Hi, I am trying to transfer data from App Inventor 2 to the included GoogleChart.Html file. 
When I test GoogleChart.Html with an external browser like Chrome all works fine ie using the string: 

GoogleChart.html?title=test&width=200&height=310

But when I show the same HTML file in AppInventor using WebViewString = ?title=test&width=200&height=310 I get no result?

My goal is to show the pie chart using data from AppInventor. 


--
1. There doesn't appear to be anything in your html that "gets" the webviewstring?

but don't think that would fix it.

What happens if you simply add your string onto the end of the url to the html file? That is how it works in Chrome, so no reason why the same should not apply ?

--
If you are asking for help, I recommend you to make it as easy for others to be able to help you ...
You probably will get more feedback then...

which means in your case post a screenshot of your relevant blocks...


To download the aia file, upload it to  App Inventor, open it, do some bug hunting for you, etc... this takes time, and most people will not do that...

--
here an example of pie-chart, may be help to you...

--
super thanks! :o) looks useful.
I will try to use "var datos = window.AppInventor.getWebViewString(); " in my own script
 and if it's working then posting an example.

--
In this post with Google Chart...

--

--

App Inventor and Google Chart.