Android Question click on image in webview

[hamed javadi]

hi
I display a photo on WebView
I want to display a specific message to the user when clicked on specific points in the image
Like the image below, show a message when the user clicks on the circles. How should I do this?

 

[Erel]

I display a photo on WebView

Don't. It will only make things more complicated.

You can put an ImageView inside a panel and handle its touch events. You can then find the distance to each of the points with Pythagoras formula.

 

[hamed javadi]

Don't. It will only make things more complicated.

You can put an ImageView inside a panel and handle its touch events. You can then find the distance to each of the points with Pythagoras formula.

I use Webview to display the photo because I need to put two photos on top of each other and the user can zoom in on them. I could not do this in Imageview. Is there no way I can recognize the user's click in Webview?

 

[drgottjr]

if you really, really, really have to do this, start with imagemap
a return to the early days of html. still works and works with webview. something to keep you busy for the next month

 

[hamed javadi]

if you really, really, really have to do this, start with imagemap
a return to the early days of html. still works and works with webview. something to keep you busy for the next month

Thanks, it looks good, just how do I know which one clicked ?

 

[drgottjr]

didn't you look at the link? and try the "try it" example? and look at the code? you determine where the #1 is in the image (x0,y0,x1,y1) and you put the location in the imagemap. you associate an action with that location. when the user clicks on the image, the browser checks the map to see if it should do something. if the user clicked somewhere within the #1, the browser performs the action you specify. in the case of the "try it" example, the action is to load another webpage. you can specify a different action, eg, to show a little popup with some text. load your image into an image editor (like, eg, gimp), figure out where points of interest are (x0,y0,x1,y1), add those points to an imagemap and create some action for each location created. the code in the "try it" example is very clear. all of your locations are circles, there is an example for circle in the code. and you can certainly google "html imagemap". determining the locations within the image has to be done by hand with an image editor. as you move a mouse around the image, you'll see where you are (x,y) on the image. once you figure out how to do #1, the others will be easy.

you know, you can also use javascript to achieve the same end. it's more modern approach, but you need to know javascript and css styling. if the end result is simple, imagemap will suffice, and the hardest part is determining where the actionable locations are on the image. with javascript, that part is handled by the javascript engine, but you have to know javascript and css to deal with what happens as the mouse is moved over the image. your call.

 

[hamed javadi]

didn't you look at the link? and try the "try it" example? and look at the code? you determine where the #1 is in the image (x0,y0,x1,y1) and you put the location in the imagemap. you associate an action with that location. when the user clicks on the image, the browser checks the map to see if it should do something. if the user clicked somewhere within the #1, the browser performs the action you specify. in the case of the "try it" example, the action is to load another webpage. you can specify a different action, eg, to show a little popup with some text. load your image into an image editor (like, eg, gimp), figure out where points of interest are (x0,y0,x1,y1), add those points to an imagemap and create some action for each location created. the code in the "try it" example is very clear. all of your locations are circles, there is an example for circle in the code. and you can certainly google "html imagemap". determining the locations within the image has to be done by hand with an image editor. as you move a mouse around the image, you'll see where you are (x,y) on the image. once you figure out how to do #1, the others will be easy.

you know, you can also use javascript to achieve the same end. it's more modern approach, but you need to know javascript and css styling. if the end result is simple, imagemap will suffice, and the hardest part is determining where the actionable locations are on the image. with javascript, that part is handled by the javascript engine, but you have to know javascript and css to deal with what happens as the mouse is moved over the image. your call.

thanks, i try this and its work,
but i have a one problem, i want to call a sub from b4a when user clicked on the circles, like showing a ToastMessage and say the number of circle to user
how i do this ?

 

[drgottjr]

you have 2 options:
1) show/say the message in the webview, just like with any normal webpage. (recommended)
2) call a sub in b4a using javascript injection. (not recommended)

it is much, much easier and natural to display (or speak) a message in the webview.
but if you really, really, really have to communicate between the webview and b4a, you could do it like this:

add webviewextras to the project

dim webview as webview
dim wvx as webviewextras
webview.Initialize("webview")
Activity.AddView(webview, 0%x,0%y,100%x,100%y)
wvx.addWebChromeClient(webview, "wvx")
wvx.addJavascriptInterface(webview,"B4A")
webview.Loadhtml( whatever )

add this to the various locations in the image map:

<map name="workmap">
 <!-- THIS IS AN EXAMPLE -->
  <area shape="circle" coords="50,50,50" alt="head" href="#" onclick='javascript:B4A.CallSub("showMsg",false,"you clicked #1");'>
</map>

add this sub to your b4a project:

Sub showMsg( msg As String )
    Log(msg)
    ToastMessageShow( msg, True )
End Sub

when the user clicks on a number, the appropriate message (eg, "you clicked #1") will appear as a toastmessage in your b4a app.

 

[hamed javadi]

you have 2 options:
1) show/say the message in the webview, just like with any normal webpage. (recommended)
2) call a sub in b4a using javascript injection. (not recommended)

it is much, much easier and natural to display (or speak) a message in the webview.
but if you really, really, really have to communicate between the webview and b4a, you could do it like this:

add webviewextras to the project

dim webview as webview
dim wvx as webviewextras
webview.Initialize("webview")
Activity.AddView(webview, 0%x,0%y,100%x,100%y)
wvx.addWebChromeClient(webview, "wvx")
wvx.addJavascriptInterface(webview,"B4A")
webview.Loadhtml( whatever )

add this to the various locations in the image map:

<map name="workmap">
 <!-- THIS IS AN EXAMPLE -->
  <area shape="circle" coords="50,50,50" alt="head" href="#" onclick='javascript:B4A.CallSub("showMsg",false,"you clicked #1");'>
</map>

add this sub to your b4a project:

Sub showMsg( msg As String )
    Log(msg)
    ToastMessageShow( msg, True )
End Sub

when the user clicks on a number, the appropriate message (eg, "you clicked #1") will appear as a toastmessage in your b4a app.

thanks, its worked and very helpful