2017년 6월 22일 목요일

get a image sprite colour

my app have a image sprite1 in a canvas. The sprite changes 80 pictures witch show the earth rotation.

Each country of the images have his own colour.

Now i want via colour to go in the selected country, but i dont know how can i realize this?

Is there someone who have a idea, how i can do this.

If this not possible to do this with colours, how can i realize this in a other way ?

I think its very difficult to realize it with coordinates, because of the 80 pictures. On each picture the country is on a different coordinate...

In a matter of about 5 minutes I found some ready-made solutions that may work for you.

Search Google Images for 'world globe', 'spinning globe', etc.

And under Search Tools, Type you can select 'Animated' to filter the results further to include mostly animated gif files.

A gif file can be separated into it's different picture frames (ie. via GIMP image editor) then animated in MITAI with my general animation snippet.

http://www.lenticularpromo.com/v/vspfiles/assets/images/animated_gifs/cos35-412.gif

http://www.kidtopia.info/images/flags_globe3.gif

http://s524.photobucket.com/user/razhbi/media/globe400.gif.html

thanks for your answer.

My problem is not to create a globus. I have made them with gimp by myself (with colours for each country).

My problem is how to get the toucht colour so i can then go in these chosen country???

Use the call Canvas.getPixelColor block. That gives you the color of the thing you touched on at that point.

There is also GetBackGroundPixelColr, which gives you the color at that point of the canvas.

As Ghica said those are your options.

The difference between the two is GetBackgroundPixelColor ignores sprites so if your globe Pictures are in an ImageSprite, use GetPixelColor instead which 'sees' the ImageSprite colors.

If your were animating the Canvas BackgroundImage then you could use GetBackgroundPixelColor.

Thanks o lot. Now i can solve my problem.

IMAGE SPRITE PIXEL- ROTATE

The property sprite image rotate pixels me the whole picture , this happens since you upgrade they did, how do I fix this? I need this property is on, but it looks very bad image.

Sorry, impossible to provide advice without some screenshots documenting the issue Matias. Show a screen capture of showing a before and after sprite rotation and a capture of you blocks images please.

You do not mention what Android you are using or whether you are using the emulator. If you are using a high end phone or tablet, the issue might be a problem because of screen resolution and the size of the image you want to rotate. If you are rotating a large image, that could be causing issues since the height and width of a pixel are not equal so rotation may be exaggerating the image in some way. Without an image, we can only guess.

You're right , here are some pictures:

Rotates: OFF

Rotates: ON

You might not see much comparison between images but for my small details make the difference.

The problem was from the latest version of AppInventor . Because as you see the application and had published in google play and worked properly.

https://play.google.com/store/apps/details?id=appinventor.ai_MCamusso891.redoblao

Thank you very much for responding.

Thanks for the pictures, but please send an AIA file with instructions for how exactly to produce this behavior. Sprites drawn with roation on, use a different computation that those drawn with rotation off, so we'd need to be able to reproduce what you are seeing, in order to investigate.

--

(Attaching the aia file.)

By the way, I don't see what the problem is just looking at the pictures Matias included above.

Matias, could you give a better description of what problem we should be looking at? And describe exactly how to cause the error? For example, do you see the resolution on the image change when
you turn rotation on and off?

--

you are currently using an image size of 926x926 pixel and are reducing the size in App Inventor to 320x320 pixel.

You should resize your image to 320x320 pixel without reducing its size in AppInventor and try again, see the difference in the attached example project (just replace the image)

rula_en.png is 926x926 pixel

rula.png is 320x320 pixel

PS: I removed your example aia file again from this thread, most probably you do not like to see this published in a public forum...

matias.aia

@Hal, It is difficult to see, but indeed, on screen2, the wheel has a better resolution when Rotates is off than when Rotates is on.

When you start with off, then the spin button will set rotates to true, because the wheel should rotate ;-) which is unfortunate if the previous version was better.

Thanks for responding, but I tried changing the sizes above and even using 2 images asking if the screen width was <= 320px image using the smallest but used the other (926 x 926 px).

The problem was followed and found that after the latest version of AppInventor.

Previously looked nice all images.

Download your project and saw that it looks a little better the image when activated rotation but what I really need is to see with high quality, as seen when the rotation is disabled.

I can confirm that too. Before the update, the images looked the same with Rotates set to true or false. In this example I'm attaching, the images were reduced in Photoshop, so there's no resizing inside AI2.

This is how it looks with Rotates off:

And this with Rotates on

Thanks for responding and find the same problem. There will be some solution ?

Just a thought, but can't you just turn ImageSprite Rotates off to get good resolution whenever the wheel is not turning?

Scott, if you set the Rotates property to false, the sprite returns to its original heading.

Ouch!

I didn't know that :(

I suspect that the issue is due to a change in the drawing algorithm we made for drawing rotated sprites. But I can't create a good example that illustrates this.

It possibly has to do with, as Taifun suggests, scaling of the image inside AI2, but Matias says he isn't doing that.

So I'm going to let this one sit until someone can provide a clear example that illustrates the defect, in a way we can reproduce it.

I think the example is clear enough. Maybe Matias can make a little example with just the wheel and a button to to switch rotate on and off. That should be convincing to MIT I hope.

I actually did provide an example in this thread. Out of curiosity, why was the algorithm to rotate sprites changed? to make it faster?

why was the algorithm to rotate sprites changed?

because of this bug https://groups.google.com/d/msg/mitappinventortest/EDMn85XAlg0/1HOIF-zV9Y4J

I actually did provide an example in this thread.

please prepare a project (aia file) as small as possible, which demonstrates this issue and describe exactly, what needs to be done to get the problem

also it would probably help to describe, how you test (which device and resolution)

as already said earlier, according to my tests on Nexus 5 running Android 5.1, see again here https://groups.google.com/d/msg/mitappinventortest/1m-qIrXIkSQ/-mCmWomKEtoJ

if you resize the sprite to 320x320, as far as I was able to see (without using glasses ;-)) you do not get the problem (can you confirm that?)

you also can test your example project in the API4 test server here http://responsive.appinventor.mit.edu

it seems to be the large sprite 926x926 does not have the problem anymore on the API4 test server?

I know you provided an example. But we need an example that we can duplicate. As Taifun says, it should be the smallest example you can make that illustrates the problem. I spent a hour or two trying to create the bad effect your picture showed, but I was unable to do that.

--

I now prepared an example for MIT, tested on Nexus 5 running Android 5.1

see the difference in the screenshot: left you can see the aliasing, right everything is fine

left image sprite: rotates is set to true, right image sprite: rotates is set to false

rotates.aia

the bad effect probably is a little bit better if you use a png image in size 240x240 (instead of 926x926) for rotates=true but it's even worse for rotates=false

Taifun sent a good example. We'll work on it.

This turns out to have been a bug that's been in App Inventor for years: If you create an image sprite using a high-res picture, rotation is done at the resolution determined by the sprite size, rather than the
picture size.

This is now fixed and will be in the next release. Thanks for finding this.

search results for Rotation of Image Sprite

Re: IMAGE SPRITE PIXEL- ROTATE.

This turns out to have been a bug that's been in App Inventor for years: If you create an image sprite using a high-res picture, rotation is done at the ...

get a image sprite colour.

Hello Everyone,. my app have a image sprite1 in a canvas. The sprite changes 80 pictures witch show the earth rotation. Each country of the images ...

Re: Moving an Image Sprite.

If a sprite has a speed(s) and interval(t) set, it will move at (s) pixels per (t) milliseconds in the direction of the heading. It'll do this all on it's own without ...

Rotation of Image Sprite.

I am trying to rotate image sprite in the canvas. I want it rotate in clockwise and counterclockwise based on how user drags it. What will be best ...

Re: Image resolution issue - ai1 to ai2.

This turns out to have been a bug that's been in App Inventor for years: If you create an image sprite using a high-res picture, rotation is done at the ...

Spinning dial face, timer performance.

I'm trying to build a rotating dial face ( compass) using the heading/rotate feature of an image sprite. I'm For an experiment I built a simple compass GIF ...

Re: Slider thumbposition convert to integer.

yes, you could use an image sprite and the wheel as image, then depending on the rotation of the sprite you could extract the corresponding value.

Re: Make a sprite spin AND move in a direction.

This cycloid demo rotates an ImageSprite 'wheel' as it moves across a Canvas. The movement in the X direction is synchronized with the wheel ...

Re: How can I make my wheel spin?

First you should consider downsizing your decision wheel. It is currently 2400 x2400 pixels; perhaps 200x200 would fit on your Android screen better.

Image sprite rotation leaves does not fill enclosing rectangle on Android 5.1.1.

If you rotate an image sprite, the enclosing rectangle appears in black, as demonstrated in the attached aia. This problem appears in system 5.1.1 (and ...

Re: How to expand a sprite from it centerpoint?

I've tried it with the AIA you posted. It stays 'centred' only if the X and Y are reduced by exactly half of the increase in width and height respectively.

Re: Bouncing and Colliding doesn't work always and sometimes it looks weird.

Maybe there is some slack in the definition of sprite contact. A sprite has a height and width set in the Designer. It also has an image, which has a ...

Re: I need help using multiple clock and some sprite.

You can achieve the appearance of rotation in a sprite. by continually swapping its image from a list of. pre-rotated sprite images. That frees up its ...

Re: Making bullets in "my game" go the right direction [problem]

If you can't get Greg's solution, start by leaving speed = 0 for the sprite, and doing in the X and Y updates in the clock. A lot of this confusion is caused ...

Automating conversion of App Inventor apk to Android Market

AppToMarket V2.1

barcodeGeneration

saveConfig

keystoreGeneration

Converted And Published To Android Market

Android Title / Action Bars

Interested in Remote SMS Tracker (tracking texting activity of another phone)? See HERE or HERE

AI / AppToMarket FORUM: CLICK HERE. You can post questions / discussions in this new form.

YouTube screencast, CLICK HERE

AppToMarket download: HERE

AppToMarket is fully automated to convert your AI app to Andorid Market Compatible app. Some features are:

⦁ Unzip and run – ZERO installation required
⦁ One-Click Feature to convert your AI .apk to Android Market Compatible .apk
⦁ Please use One-Click Feature after you get comfortable with AppToMarket
⦁ Save / load multiple configuration files – use File menu to Save or Reload previous versions
⦁ Can be installed in directory path with spaces
⦁ Generate Bar code Biz Card to adertise your app – Use Marketing menu
⦁ Lock your app for portrait or landscape mode
⦁ Assign Version number / code to your app
⦁ Assign a natural application name to your app – for one-click feature, just prefill APP NAME entry field
⦁ Allow storage to phone or SD card
⦁ Generate keytool
⦁ View certificate info – Use Tools menu
⦁ Decompile, update manifest, and repackage new apk file
⦁ Auto sign your app using your certificate
⦁ Generate Zip Align file for ultimate performance

Can't compare text in a textbox with a label requested by web component

Can't compare text in a textbox with a label requested by web component, however the text seems to be the same. The text requested is saved in .csv format onto a server and requested by the app when screen initialized. It is set 'showing', so you can check it running the app. Does anyone know why it doesn't exept it? It works with numbers, but doesn't work with letters.

remove these 4 blocks and try again

Hello, thanks for your swift answer, I already tried, doesn't work.. :( Do you think there is sg with the format in the saved .csv? maybe it doesn't recognize it as text?I have no idea, help me pls!!

Hello, thanks for your swift answer, I already tried, doesn't work.. :(
Do you think there is sg with the format in the saved .csv? maybe it doesn't recognize it as text?I have no idea, help me pls!!

to find out, what is going on, use "Do it": right click onto the blocks in your Button1.Click event and select "Do it"

in case this does not help, post a screenshot including the Do it result

PS: Please keep the discussion in the forum. Thank you!

If you mean this, the result:

pic.attached

do it result: false

do you have any idea?Still wrong.

I would click DO IT onto these 2 blocks...

--

Sorry, missunderstood. Here it is. Seems to be the same

there might be an invisible new line character \n at the end of label1.text

try to remove it with the replace all block: replace \n by empty string (a text with nothing in it)

replace all label1.text

<empty string>

replace all

Returns a new text string obtained by replacing all occurrences of the substring with the replacement.

--
what should I put into segment and replacement than. I am not sure I understand..

If u were so kind to paste the blocks how they look like, i'd appreciate! How can it happen to have empty line? how can I avoid it in excell (before saving the file.csv)

Okay, it seems to be good now but still doesn't work!

alternatively use the trim block instead

http://appinventor.mit.edu/explore/ai2/support/blocks/text.html#trim

Taifun

trim

Removes any spaces leading or trailing the input string and returns the result.

--
IT WORKS!!!!!

THANK YOU VERY MUCH!

You were very helpful, didn't give up :) I have another quick question if you don't mind, is it possible to have full screen in the app (to remove the blue upper line from the pages?If yes, how?

new queston = new thread...

use AppToMarket!

Automating conversion of App Inventor apk to Android Market

Nice!!

All right, thank You again!

Shuffle Lists & Unique Random Numbers

This tutorial will answer two questions:

1. How to shuffle a list
2. How to generate a set of random numbers that don’t repeat, meaning unique numbers

We are going to make an app that will have 4 image sprites in a canvas. The sprites will be moving across the screen. In every 5 seconds, the speed of the sprites will change. But there will never be two sprites that will have the same speed. We want them to always have different speeds in any given time. Our app is going to look like this-

If you want to take a look at the app and play with it, download UniqueSpeedyBirds project file..

So how do you generate random numbers from a given range that are always unique?

1. Have a list of predefined numbers you want to pick from
2. Shuffle the list
3. Get the first item in the list or get all

In our app, we have 4 image sprites. We assigned 4 different images to those sprites. We want them to have any of these four predefined speeds – 10, 15, 25, 30. We have a Clock component that fires after every 5 seconds. When it fires, we change the speeds of the sprites making sure that each of them is assigned a different speed.

As you can see in the blocks image above, we have defined a list variable with our predefined speeds values. We also have a temporary variable that we’ll need later.

Before we explain how we shuffle a list, let’s take a look at the implementation first-

To shuffle, we will use Fisher–Yates shuffle algorithm. You should definitely read that algorithm. We loop through each index starting with 1 until the size of the list that was passed into ShuffleList procedure. Current index is represented by variable i in for each loop. For each i, we select a random index between 0 to length of list minus i. We add the random index that we got, to i. The new index is represented by the local variable replace. We then swap the values in list to get a new value at index i. We do that for each index in list.

Swap procedure takes three arguments. The list where to swap, the index which we will swap at, and the replace index that we will use to swap with. We used a temporary variable named tempValue in Swap procedure to store the current value before we swap. If we don’t, we will lose current value. We use the replace list item block of list to do the swapping.

This is what we do when the timer goes off-

Firstly, we don’t want to change our original SPEEDS list. That is why we used a temporary variable named tempData. We added each item from SPEEDS list to that temporary variable using a for each loop. Remember we cannot just do tempData = SPEEDS. In that case, if you change anything in tempData, the changes will be also made to SPEEDS. If you are wondering why, you should better start here. After we add each item to our temporary variable, we call ShuffleList procedure and pass the temporary variable so that the shuffle only takes place to tempData, not to SPEEDS list.

After shuffling, we assign the first bird’s speed to the value at index 1 of tempData. For second bird, we use the second index and so on.

Our birds move from right to left because in design view we set their Heading property to 180. Whenever they reach an edge, they bounce off meaning the heading changes. If they bounce from left, their heading will change to 0 heading right and if they bounce from right, their heading will change to 180 moving leftward.

Also we change the pictures depending on the heading. If they are moving rightward, we want the picture where the bird is facing right.

Download the project source – UniqueSpeedyBirds

Shuffling / Ordering Lists

Lists are data structures that are used to create and/or manipulate different sets of values/elements.

In AppyBuilder / AI, Lists can be created by converting a CSV data into a List such as below:

Some apps, such as game apps (e.g. cards) require shuffling or randomizing a list. The shuffling would require coding (sometimes complicated) to make the shuffling happen. AppyBuilder has now developed an extension that can be used both in AppyBuilder OR MIT AI to perform shuffling using only one Shuffle block as shown below!