Sliding graphic

User Interface and Graphics
1

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

2

See the first 2 articles at

3

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.

3 Likes
4

Makes total sense... daft question though... How do I get the image into the browser?

5

Fold it on each side so it fits within the screen edges :grin:

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>
6

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>
7

Cheers Tim. I will give it a whirl and see what happens.

C

8

so, 8 text blocks all joined up? Assigned to which control...?

9

Like this:

blocks (20)
blocks (20)1378×580 68.3 KB

then use the file component to save to a file in the ASD

@ChrisWard is working up a full solution for you

1 Like
10

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.

  1. Concerning the large image to be viewed, is there just the one image to be viewed each time (and same file name)?
  2. Technically, where does the image arrive from? The phone (camera) or an external source (internet cloud storage, usb/bluetooth/wifi from other device?
11

Anke has put together this guide for file read-write:

1 Like
12

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.

13

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 :slight_smile:

2 Likes
14

There is also the html canvas

1 Like