Hi,
I am trying to create a draggable map image but seem unable to set fixed sizes to the canvas. On the App inventor all looks fine but on the Phone it just crashes.
What i have is a 3000x6000px work area with various horizontal and vertical blocks then a canvas set to 2000x4000px.
Any ideas why this situation would crash. The online example using a map of india works but that’s not using fixed pixel sizes.
Thanks
would have helped if you provided a link to this......
You can only make your canvas "so big" before memory issues creep in.
The usual approach to draggable map images on a canvas is:
Alternatively, if the map is of a real place (you say India) then why not use the map component ?
or zooming/dragging of an image is much easier in a webviewer
Hi,
this was the link i was using as the basis http://appinventor.mit.edu.ezproxy.canberra.edu.au/explore/blogs/karen/2018/03.html
And this is what i was needing or trying to do
The idea is its the plan of the inside of a building and has to be done so that i can but sprites at fixed pixel positions regardless of what device its viewed on . If i do what i think you have said which is rather than use the background as the plan us a sprite i wont be able to lock other sprites to fixed locations on the plan sprite. (think Zelda and assets to collect)
Thanks Tony
You could but their positions would all have to be managed in relation to the position of the map (not much fun…)
I will have a look at your method, to see what issues it raises.
I am guessing Zelda is some kind of game ?
Hi, Yes Zelda is a game but the issue is more that for an entire building floor to be visible on a phone with clickable items it has to be larger than the screen and draggable.
Tony
I had not seen this bit of Scott Ferguson’s work, he is the King!!
(His example though, crashed on me too)
I built up an example aia project using the blocks from the MIT page, using a rather fuzzy image of Europe from Google maps. This works fine in the companion and as a compiled app.
DraggableMap.aia (177.7 KB)
For your purposes you will need to do some thinking and calculations for the working area size and canvas size, to suit your building plan, simply fitting to the screen is not ideal.
Note Companion: Android 9, Compiled Android 7
I went back and read your original post, looks like I need to see what can be done with different sizings too.
I have just the plan for it!
Wow great, i will have a look at what you sent later this evening. I was thinking on your original plan and actually with a procedure to do the position calcs and placement its not to bad.
Tony
Got it working with a diagram, making heavy use of the displayAreaWidth and displayAreaHeight variables to replace screen1 width and height. Also had to adjust the conditions for when zoomed as I guess the calculations are not return exact values.
WiringDiagram.aia (497.8 KB)
There is a gotcha, in that there is a bug in the canvas background image display - it may go fuzzy(your image). MIT are aware and are looking at fix.
For more on this see here (there is a sort of solution):
Thanks will take a look later this evening
Tony
As previously suggested, you might also want to consider using html/javascript canvas for this:
https://www.w3schools.com/graphics/canvas_intro.asp
It is fairly similar to the AI2 canvas but no blocks, more code! But you can then easily update your plan outside of the app…
Hi,
so it looks like the limits on canvas size are about 1000x2000px which I can work with by scaling a sprite to only 500x1000 so I have got that all working now but I did not realise how annoying the drag feature is. For a big sprite you ideally want to drag it from where you start touching within the sprite but the default isto drag from top left
Tony
The limits will be highly dependent on the device and the version of Android it is running. A 1000x2000 px image is going to need 8 MB minimum of RAM to store. Some older versions of Android, and Android running on resource limited devices, might only allocate 16 MB RAM total to your app, which means you’ll very quickly run into out of memory issues. Newer devices with more RAM and newer versions of Android tend to up this to 64 MB per process unless the large heap size flag for the app is turned on (e.g., games).
That’s interesting , not sure how the 8mb correlates to a image that’s only 240kb on disk though
tony
Hi, What is the reason you put a timer delay at the beginning before initializing everything?
Tony
Force of habit!
It may not be necessary on all devices, but on some older/slower ones when the screen initialises it doesn't have enough time to capture the height and width before do the setting of things. It wasn't necessary on my Genymotion Emulator on my computer, but real devices might struggle.
One of my suggestions was to try the html Canvas. This works in a similar fashion to the AI2 canvas, you just have to hand code everything and learn a different syntax! I have worked up a demo, which shows a few of the features:
I had to use Luke Gackle’s webviewer tools extension to get the scaling to work
In testing, scrolling and zooming response was very smooth. Use a high resolution image for the background, so that it doesn’t distort with the scaling. This runs locally on the device, but you could call a remote url.
htmlCanvas.aia (343.2 KB)
If you copy the assets out to your computer to the same folder, this will also work on your computer browser (Firefox better for refreshing page if making changes)
Most of the image files used nowadays are compressed formats (jpg, png, etc). That means an image file is comparable to a zip or rar file. If you want to see what's inside, you need to decompress it. Where is an image decompressed to see it? In memory.
So the size of the image file doesn't really has anything to do with the amount of memory needed to display that image.
@Italo already answered this (compression), but more specifically, each pixel will usually be represented using 8 bits for the red, green, blue, and alpha channels. Therefore, per pixel you need 3 or 4 bytes. If you have an image that is 1000x2000px, then it is 2,000,000 pixels, and at 4 bytes per pixel that is 8 MB of RAM to store the uncompressed image to draw it on the screen.
Hi All, I managed to go from the back door as @TIMAI2 mentioned through HTML Canvas. I will create a extension for that when I have time. Now I just fixed my problem for my application. Only problem with that is when you have the bigger size picture you cannot zoom out enough to scale the picture into App inventor webviewer size. After I share the extension may be some of the developer might solve that issue. I will keep you update you soon.
