Hey folks.
How could one, if one could, be able to have a large image in a small screen, and be able to scroll the picture around, and zoom in and out?
example.
A 300 x 300 window, with a zoomable image 800 x 800 plus image.
I figured a way using a scrolling horizontal arrangement embedded in a scrolling vertical arrangement, but one can scroll only in one direction at a time, up/ down OR left/right. Very clunky.
Thanks in advance
See the first 2 articles at
It can be easier, and you get better image reproduction, if you use a webviewer to display your image. The webviewer will allow you to pinch/zoom and move the image around.
Makes total sense... daft question though... How do I get the image into the browser?
Fold it on each side so it fits within the screen edges 
Alternatively, you would normally be able to use a simple data uri, but currently there is a bug (a patch is being worked on by MIT).
It is possible to define an HTML page (just a simple header, the image, a footer), save it to the App's App Specific Directory and then load it into the Web Viewer - sounds like a lot of work but it isn't that much and the image will be displayed quickly.
So the HTML would be like this, as joined text Blocks in App Inventor:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=10.0, user-scalable=yes">
</head>
<body>
<img src="ImageName.png" alt="alternative text">
</body>
</html>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 512; /*Set to whatever*/
height: 360;/*Set to whatever*/
}
::-webkit-scrollbar {
width: 0px;
height:0px;
}
#picture {
width:512px;
height:360px;
position:absolute;
overflow:auto;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
img {
width:512px;
height:360px;
position:relative;
}
</style>
</head>
<body id = "main">
<div id="picture">
<img id = "myimage" src="image.png" />
</div>
</body>
</html>
Cheers Tim. I will give it a whirl and see what happens.
C
so, 8 text blocks all joined up? Assigned to which control...?
Like this:
then use the file component to save to a file in the ASD
@ChrisWard is working up a full solution for you
Hello Charley
I have been away - how far have you got with your App? While I was away, Anke, Taifun and Tim sorted out read-write issues on my behalf, but we actually do not know enough about what your App does.
Anke has put together this guide for file read-write:
Hey. I have been away too.
The image s a part of the app, it is an image of a body outline to zoom in and around and pinpoint pain locations. The app records pains, locations and intensity for physio requirements.
Hope that helps.
Hi Charley
So the Blocks to make an HTML file that we showed you should be good to go. I will make you a basic example project - do you have an image I can use?
Edit: I think it's essential that I use something representative of your image because of the method we need to use in the HTML file, known as image mapping (clickable hotspots on an image). Will the potential pain locations be visible, perhaps as filled circles?
By the way, in this case it's not necessary to build the HTML file in the App, it can be pre-built (with a PC) and stored in the App's Assets, which makes life easier 
