Show text and cycle part in picture after scanning

how can add functionality in mit app inventory that whenever i scan a qr code and it's name will be seperated (till this I have done) and based on that name it shows the following text pointing towards the cycle part like for example i scanned saddle then it shows me saddle name as text and it pointing towards its location and rest of the pointer and text stays hidden like you can see in the image

I would use a canvas for this with just the image of the bicycle set to the background.

Then, for each part, you would need to list the coordinates for the writing of text and drawing of a line.

Then when your scan your qrcode and it returns a text of the part, you find that item in your list, write the text and draw the line on the canvas.

When you store the coordinates, do it as a percentage of Canvas.Height and Width, not pixels.

That factors out different phone resolutions and screen sizes.

Thanks you for your wonderful suggestions now if I want to highlight that part like sort of blinking if someone scan padel then it blink paddle how can we archive that?? @ABG @TIMAI2

Do you want an image of the pedal to blink, or the text?

@TIMAI2 image need to blink

You would need an imageSprite of the image, and to set its visibility on and off using a clock timer. You would need to do this for each part, but you could use one imageSprite and set the coordinates of the sprite when an item selected.

Alternatively, you could draw a rectangle and flash that.

How about a Ball with pulsing Radius for a highlight?

I found alternative solution i.e show directly a blinking gif now I am to fetch the gif from database and it's getting display as image not gif how can I fix that can you guys help??? I decoded base64 text into gif and it working on the internet i included base64 text too

New Text Document (5).txt (94.2 KB)

Animated gifs do not work natively for imagesprite in companion or in a compiled app.

Just use a png or jpg and use a clock timer to turn the imageSprite's visibility true and false.

Problem with image spirite is image dimensions gets messed when I run on different mobile it's showing me phone size 505,320 but in actual Android phones screen have different different sizes so there is no way to show gif??

Use percentages to set the size of your imageSprite in relation to the size of the canvas.

You would need to set the gif to an imageSprite in any case, however, it will not animate. Do as I suggest and blink your imageSprite using a clock timer.

1 Like

Okay I will do it your way but just one last query to see if that can work.. if I will fetch two base 64 image then can I display one after one in a loop? Will that work?

Here a simple example

BlinkSelect.aia (147.4 KB)

See my problem is here

When i install that app on different different phone then it's dimensions get messed and it only stay stable when i adjust image canvas image dimension to fill parent so now how can I adjust image sprite dimensions after adjusting image dimension to fill parent how can we tackle this challange?

Something like this:

BlinkSelect_Variable_Width.aia (149.1 KB)

The should work for whatever width you set the canvas. For this to work you need to know the original background image dimensions, and that your "door" image was "cropped" from the background image at that size.

I am sorry for this much trouble but still in your code you set pictures height weight to automatic not fill parent please check this code and tell me how can I overcome dimension issue in this code and how can I put flashing logic here
BlinkSelect_1_1.aia (1.2 MB)

Try this

BlinkSelect_1_1 (1).aia (1.2 MB)

I have assumed your part name will be in label2.

how can I add more image name and dimensions in global img values list? Secondly how can I increase flashing speed? @TIMAI2

See image and other text dimension is okay but image spirite dimension still getting messed up as you can see in the screen shot

In one screen it's perfect but in second screen it's getting messed