Hi all.
Here's something i've been working on recently and decided to share.
It's not a library or a code module but i thought it best posted in this forum anyway.
HtmlImageView is a little piece of javascript that will turn a basic HTML element such as a DIV into a pannable and zoomable image viewer.
The demo code shows off it's various features.
The demo starts with a 'simple example' - an image is loaded and zoomed to a level where it fits the device screen.
A double touch on the image will zoom in a level and a single touch will drag the image around the screen.
I've added some buttons to the HTML to enable you to zoom in, zoom out, zoom to 100% size and zoom to fit the image to the device screen.
Rotate your device though and the previous image position and zoom level are lost - the activity simply reloads as on FirstLoad.
Hit the menu key and choose the 'advanced example' to see a better demo...
The advanced example loads with a shot of Stonehenge (a Google Static maps image), all controls work as they did on the simple example.
Pan or zoom the image and rotate your device - the previous image position and zoom level are restored when the activity is re-created.
I've added a Spinner to the advanced example to enable you to choose from 6 available images.
I've documented the javascript up to a point but not fully so if you want any help customising it just post in this thread and i'll try to help.
Unfortunately there's no chance of pinch to zoom - the native WebView doesn't expose multi-touch events to the javscript engine.
Actually i think that's changed with Honeycomb but for earlier Android versions multi-touch is a no no.
Martin.
Here's something i've been working on recently and decided to share.
It's not a library or a code module but i thought it best posted in this forum anyway.
HtmlImageView is a little piece of javascript that will turn a basic HTML element such as a DIV into a pannable and zoomable image viewer.
The demo code shows off it's various features.
The demo starts with a 'simple example' - an image is loaded and zoomed to a level where it fits the device screen.
A double touch on the image will zoom in a level and a single touch will drag the image around the screen.
I've added some buttons to the HTML to enable you to zoom in, zoom out, zoom to 100% size and zoom to fit the image to the device screen.
Rotate your device though and the previous image position and zoom level are lost - the activity simply reloads as on FirstLoad.
Hit the menu key and choose the 'advanced example' to see a better demo...
The advanced example loads with a shot of Stonehenge (a Google Static maps image), all controls work as they did on the simple example.
Pan or zoom the image and rotate your device - the previous image position and zoom level are restored when the activity is re-created.
I've added a Spinner to the advanced example to enable you to choose from 6 available images.
I've documented the javascript up to a point but not fully so if you want any help customising it just post in this thread and i'll try to help.
Unfortunately there's no chance of pinch to zoom - the native WebView doesn't expose multi-touch events to the javscript engine.
Actually i think that's changed with Honeycomb but for earlier Android versions multi-touch is a no no.
Martin.
Attachments
Last edited:
