Coordinates help

[A.]

URGENT!     URGENT!     URGENT!

Hello everyone, I'm in need of some urgent help right now. As you can see with the file attached is the map that i have to have on my app. Now building is to open another screen, however to do so I need some URGENT help with the coordianates aspect of things. From what I know you have to use a canvas to use them and what i am having difficulty in is coding it so that when the building is clicked, its relative screen opens. What i want is some sort of coding so that it accounts for a range of the x and y values and it goes like "if (user-pressed coordinate) is within the range of (x corner1, y corner1) and (x corner2, y corner2) and (x c3, y c3) and (x c4, y c4) then open Screen2".

Please can someone help me in doing this,

Help'll be much appreciated. (Building coordinates and map needed to be displayed attached)

P.S.  I don't mind a coded version or a walkthrough but it is really urgent!

[Abraham Getzler]

May I suggest a simpler approach?

Take each building's corners, and average them to get the (x,y) coordinates

of the center of that building.  Keep matching lists of the building centers and their names.

When the canvas is touched, take its position and calculate its distance from each

of the building centers in your list.  Use the building whose center is closest to the

touch point.

ABG

[SteveJG]

There are at least three ways to do this.

A way to do it with coordinates:  http://www.appinventor.org/Chapter18  .   Look for the section Programming Complex Conditions.  This tutorial describes a way to ring fence and to determine if a point is within a rectangle of latitude/longitude coordinates.   Never mind that, look at the logic and use rectangular objects / shapes for the buildings using the Canvas coordinates x,y How the Canvas screen is layed out is shown here:  http://www.appinventor.org/Chapter17  .  When you click within the ringed fence, the program 'knows.'

A way to do it in a similar fashion using a grid ... click within the specified area of the grid and  it will give you a grid number.   Use the number to another screen or whateve when the right number is found.  This is my 36 buttons on a Canvas example with Scotts snap    https://groups.google.com/forum/#!searchin/mitappinventortest/36$20buttons/mitappinventortest/c7xYUTKFG_Q/hlwOMxsNm6oJ    You might need a finer grid.

A third way is to use the map as a background to the canvas, then place sprites (they could be building shaped or otherwise).  When the user clicks on a sprite   sprite.TouchedDown or TouchedUp for example, you can have the event handler change screens etc.

Try some things.   If you have issues, return and ask again and post some blocks showing work so far and ask a specific question.    Have fun, this is not very difficult to code.  The easiest way is the third.  The first way might be better.  The second way can be very powerful but is more difficult to follow the logic.

Regards,

Steve

[Abraham Getzler]

On further reflection (okay, a night's sleep) it occurs to me that

you are working the map backwards.

People who use a map don't normally poke at it and ask

"What am I poking?".  They bring up the map to ask

questions like "Where is the Physics Building?".

To support that kind of question, you would supply a

ListView component to select a building and from there

flash a ball on the map inside that building.

For extra credit, you could add a Where Am I button to flash

your current location on the map.  That should require a separate post, though.

ABG

[A.]

Thanks for your help, so basically what I'm creating is that when the user clickes on the building, it displays how many computers are available inside that building, so there's no movement related (latitude/longitude option won't work here [?]), thing with the grid is I'm not dully sure how to do it and the sprites thing, I would do but I'd like to show a bit more advanced coding, thus the coordiantes. Now in relation to Abraham said about getting the center if the buildings and determining that, I quite liked that, just wanted to know how you heck if it is nearby (the touched input) like what control block do you use to see :

IF TouchInput is Closer (?) (x1,y1)

     OPEN Screen2

ELIF TouchInput is Closer (?) (x2,y2)

     OPEN Screen3

???

Appreciate the quick responses, another couple please and I'll (hopefully) by done!

[SteveJG]

Certainly do what you want, however,interchange  y for latitude and x for longitude  in the first example and you have most of what you need.

ABG's solution requires you use the Haversine or other formula to calculate distance.  Not difficult, but is it easier?    Try it both ways/

"Not sure how to do it?"   ... then experiment, perhaps.   You can not break anything :)     so try.

--Steve

[A.]

I'm a complete newb to this, what is the Haversine formula and how do you use it? And for the exchange of x and y as you suggest Steve, could you give me an example such as a code block for one building please :( , I'm really unsure about this. I've also attached an updated version with the center coordinates for the buildigns as Abraham suggested. 

 

I need this is in very soon, so a quick reply ( and example if possible - pretty please!) will be appreciated

[SteveJG]

Lets look at this a bit.  A building with x y coordinates:

NW corner   50, 30   y's are the same but x's different.  This is  NWcornerXa in the following example.

NE corner   200, 30

SW corner  50, 200

SE corner  200,200

So the building box looks like:

          50,30       200,30

 

          50,200      200,200

My blue building A is displayed on a 300 x 300 Canvas.

A developer does not need all four corners of the building rectangle to determine the building's position on the Canvas.

If you know any two opposite corners, you have all the x - y information required. If we use the NW corner and the SE corner of the building, we define the rectangle for building A as far as the ring fence algorithm is concerned. I show this building with the blue image in the example.

Let's get clever.  There also is a building B (it is not shown with a rectangle).   Using the corners for building B, you can locate a second building.   I did not draw it for the example.  This building occupies the space of the fourth row, second column of the rectangular grid shown in the background (more or less).   

You need a 300 x 300 pixel canvas on your screen in this example, your map image will be have different dimensions,. If your buildings are smaller than your finger, you will have problems so scale wisely. Duplicate the code blocks; they define the building coordinates and provide the ring fenced search for two buildings.  If you duplicate the code blocks when you run the demo app, you will have two ghost buildings since you do not have my building A image,  This is not a problem, you can search for the buildings by touching parts of the screen.  The 'buildings' are at the coordinates defined by NWcornerXa blocks (for building A)   and SEcornerXb blocks and others for building B. Click around the screen...you will soon find both building A and B.

The coordinates are hard coded here.  I used global values.   You could put the coordinates in a list, type them in the logic blocks instead of the variables or ....   this is your homework, I am only providing a big hint, a relatively simple way to determine if a 'building' on the map is touched.

remember, the Canvas screen is numbered like:

0 ....... 300 x

.

.

.

.

300 y

Do not get confused, most plots you are familiar with increase upwards, the Canvas y values increase downwards.

This code snippet is not all you are going to need.    Where this app tells you that you touched a building, it does not 

explain what to do with that touch.  You have a lot of work ahead of you.

Nothing in life is free, the cost of this code, if you find it useful, is to be especially polite to everyone you meet tomorrow.  By the way, it took 15 minutes to write this, but over an hour to document.  :)  And it is all based on the article here: http://www.appinventor.org/Chapter18  

Have fun.

Regards,

Steve

[A.]

Wow! This is quite in-depth, thanks, I'll have a look through and I'll be polite to everyone tomorrow, regardless of whether or not this helps, because of the help you've tried to give me. one thing I don't get is where is the you know and block in 

the green and blocks for the get y etc. stuff, wher eis this in AI2, cant find it, it's more like (see file attached)

Thanks

A

[Abraham Getzler]

Judging by the coordinate value ranges in your .docx building list,

I assume you are using canvas pixel coordinates for the corners

of your buildings.

In case you don't know how to calculate the center x and center y

of a building with 4 corners at (x1,y2), (x2,y2), (x3,y3), (x4,y4):

Center = ((x1+x2+x3+x4)/4, (y1+y2+y3+y4)/4)

Make 3 parallel arrays, named Building_Name, Center_x, Center_y,

and set Building_name(i) = the name of building i,

Center_x(i) = the center x value of that building (see above),

Center_y(i) = the center y value of that building (see above).

Put a small ball at the center of the canvas.

Respond to drags on the canvas by moving the ball in the same direction as the drag, an equal amount.

That lets you see the ball move without your finger blocking its view.

Set the ball to snap to the closest building center when the TouchUp canvas event happens.

To find the closest center point to the ball,

start global variables Closest_distance to 99999999,

Closest_Building_index to 0.

For each Building_Number from 1 to your number of buildings,

   If distance from Ball to Building_Number < Closest_distance then

      set Closest_distance = distance from Ball to Building_Number

       set Closest_Building_Index to Building_Number

    (no ELSE needed)

(end loop)

Move the Ball center to Center_X,y of Building_Number.

Distance formula you can use from Ball(x,y) to Center_x,Center_y:

(May need to add radius of Ball to x, subtract radius from its y value,

since Ball coordinates are at upper left.)

Distance = abs(Ball_X - Center_x) + abs(Ball_Y - Center_Y)

(This is known as Manhattan distance.  You could use Pythagorean formula if you like.)

ABG

[SteveJG]

Smile....

[A.]

teve as you suggested I tried to create a list, but how do you refer to it. I've check AI's help info on lists and creating them, yet I don't get how to refer to the list (it won't allow to add text to the Math block list thing) nor store a value under a key, like you can in Python.

[Abraham Getzler]

In your screen shot, you call a procedure to create and populate 

a list, but never assign it to any variable, so it immediately got garbage collected.

If you save your building corners list(s) in global variables,

you can refer to them using the SELECT ITEM i FROM LIST l block,

where i = building number, l = one of 8 corner coordinate lists

NWx, NWy, NEx, NEy, SEx, SEy, SWx, SWy.

Alternatively, you can nest lists to make 2-dimensional structures

for ease of maintenance of your building lists.

Selecting from a 2d list gives you a 1d list.

How to work with lists in App Inventor

ABG

[SteveJG]

You can use a List, but I do not recommend the way you are starting out.  Read ABG's advice on lists.  They can be very complicated (or simple).

Here may be a simpler way to do what you want to do (not knowing exactly what you want to do and not wanting to do your project for you).  Consider a ListPicker instead and please do get rid of the call to BuildingCorners within the Canvas.Touched block  handler...that is asking for trouble although it might work. Why you want to use the building corners here (to eliminate some if then statements? I do not understand.   What you are trying to do is use the canvas and a touch to name a building?    I also suggest you do NOT use that block but use the TouchedDown block although Touched could work.

You can use the following as a start:

What you get is the building name (on the list picker) and the associated coordinates      There is another way to use this and may be what you are attempting to do.   Instead of the building corners, place a sprite or ball on the center of the building by using the call ImageSprite.Move to   x  y    and usie the true false visibility to show and hide it.    This way, the ListPicker can be used to FIND the buildings on the map and this is perhaps what you really want to do?.

There are dozens of ways this stuff can be used.

-- Steve

[A.]

Well according to your advice using ony two corners, and their x and y values, i wanted to proceed, however I have 10 buildings to account for, with variables this'd lead to 40 variables, all of which i'd have to list or take into account in my projetc, which I really do not want to do as this'll be considered time consuming and taking up too much space on the application considering that I'll have all in all another 12 - 20 variables from the other screens. Thus I wanted to use a list, however I do not want to have anything visible on the screen, such as a ListPicker, other than the map itself, therefore... How do you store values in a list and then call that list, when I tried to call it, I was unable to in AI.

A

[A.]

Assign the list to a variable? I wanted to be able to call data from that list in my calculations (that make any sense to anyone else other than me???).

A

[SteveJG]

I am not sure how you will do this without using variables,  Why concerned about the number of variables?    Yes, the List gets assigned to a variable... Initialize global TheNewVariable to   create empty list    .      However, here is some information you may need.   Perhaps all you need to do is read and understand Sajal's article.

====

Lists

Sajal's example    http://www.imagnity.com/tutorials/app-inventor/list-blocks-on-app-inventor/

Hossein's example    https://amerkashi.wordpress.com/2014/05/12/lists/

List of Lists

Taifun's example     https://groups.google.com/forum/#!msg/mitappinventortest/rRuzOX63qiQ/v8S4lhplsTcJ

TinyDB

ABG's example    https://docs.google.com/document/d/12t4HLNRepCnbmcfycdF8wSHWht_D1P8hKJpTknVDChY/edit   demonstrates filtering

Stephen's example    https://sites.google.com/site/stevozip/home/AI2/tinydb

Richard's example    https://groups.google.com/forum/#!msg/mitappinventortest/Ww6mWkkXuAI/_To4k0A3wosJ

[Abraham Getzler]

My wife keeps buying cameras.

I tell her you can take more than one picture with a camera.

She doesn't listen.

;)

ABG

[A.]

So no way of avoiding variables? because this means I'd have to further add many variables to my variable listing but also I wanted to show a range of coding skills in order to get a greater marks (thus the use of lists). Well, I'll give it a go, one thing Steve why not simply intialize the variable's value when the screen initializes, why set it to 0 and then adjust figures, in terms of your example??? Didn't get that...

[SteveJG]

Setting the values you need for variables at initialization is OK.  Why do I set them to zero...because I have no values for them.   If you know the values beforehand, initializing at program start is fine.   People set values as they initialize the variables, sometimes they set the values in the Screen1.Initialize event handler, sometimes only as they need the values.  Sometimes the values are indeterminate when the program is written and it is necessary to supply a place holder.  All these methods are acceptable ways of using variables.   How one does it in any one app depends on what the developer will eventually do with them, whether the variables will be assigned new values within the program by entering data etc.

Can you avoid variables?   In many programming languages, no.   In AI2 sometimes people use TextBoxes and Labels  as a temporary substitute.  I think this is a bad way to program; however I know others who think this is fine in AI2.

Whatever you do, you are going to need variables.  If you use a List, within AI2, the List is a variable. :)

-- Steve

[A.]

Thnx, both of u, Steve & ABG,

Wish me luck!

[SteveJG]

Good luck A. ... but more than luck...use your imagination and the skills you learned to make a great app.   ...and have fun.

-- Steve

[A.]

Hello guys, I've made my app 

just wanted to say thanks A LOT for both of your contributions. 

Just for extra credit, are either you IT or any computer based professionals,

if you don't mind me asking, if you are could you just say I am so and so, if you are

then I get extra credit for contacting IT professionals in the marks, so...

Thanks again

A

[SteveJG]

Not IT but programmed for over 30 years in half a dozen languages, mostly for Windows.  I was an engineer/research scientist (to keep it simple).

IT...hilarious.

--Steve   :)

[A.]

So you're a programmer/engineer/research scientist in relation to computers (please say yes...)

[SteveJG]

I wrote software to accomplish my work for almost 30 years..