HOTSPOT controls

[WZSun]

Hi All,
Is there a 'hotspot' function or control that we can use to execute actions? The hotspot can be a rectangle (better still, any polygon shape or irregular ones).. and this will come useful when there are multiple objects within an area.

Instead of having actions script in each objects, a simply hotspot overlaying on top would suffice.

If not, perhaps Erel can consider having that in next or future versions...

Rgds
WZSun

 

[Erel]

Can you give some more details about your idea?

 

[Cableguy]

If I understood him correctly....
It's something done very easily with html, so the html dll would be a workaround....
Basically you take an image containing several objects, like a ball, a car, whatever...
and define a set of coordinates within wich the curos changes and actions upon cliking can be fired....

In html, it called "image map" if i'm not mistaken...

 

[WZSun]

Hi Erel,
In Palm, there's what we call gadgets where it's actually a transparent rectangle control/object, where you can have actions. Here's a scenario.

Let me see.. ok imagine a 'spot the difference' game where you have a 2 panels, with each panel having an 'almost identical' image. There are 5 areas in the pictures where it's different. HotSpot-A is overlay on top of the whole panel. The smaller HotSpot-1... HotSpot-5 (that surrounds only the region of the different parts' of the image) are placed at the top, above HotSpot-A.

When user click on anywhere other than HotSpot-1 to HotSpot-5, they are assumed to have clicked on HotSpot-A instead. An action will be executed.. say, a 'wrong sound effect. If they click correctly on the HotSpot-1 to HotSpot-5, a graphic overlay (circle) will be displayed on top of the picture.

With just a single hotspot control, we can reduce unnecessary code in checking for mouse action and x/y coordinates. Hope this to clear the air.

For non-games, imagine a 'base panel' with scrollbar. On this panel are say, 10 vertical panels with multiple objects (inage and text) on it.. like a table. Right now, if we click on the vertical panel, nothing will happen. Even if the panel accepts action, it will not work on areas where the image/texts are placed. Then again, this means the images/text must have actions as well. So, instead of the vertical panels, images and text all having similar actions, placing a hotspot on top of the whole vertical panel will execute the action. So, even if user scrolls the 'base panel', the hotspot are still in relative position.

Hope that gives you some examples.. of what hotspot can do to enhance Basic4PPC into a better development tool.. and possibly, games development as well. Of course, to further expand on the hotspot, you can even have hotspot with irregular polygon (hmm... for jigsaw puzzle, trigram games) with actions.

For other software tools.. the hotspot controls are usually dispayed with dotted 'rubberband' lines.

Rgds
Ronnie

 

[WZSun]

Hi Cableguy,
something like imagemap but not exactly as imagemap would be similar to image button. It's more than just HTML which has its own limitation as well.

Let's say... imagine you have an form where you define your own message dialog (to simulate a modal message form). Currently the background 'images' or buttons outside the 'message dialog' are still clickable. Imagine you have a hotspot control surrounding the whole form, but beneath the 'message dialog'. When you display the message, you enable the hotspot... so no matter how user taps on the screen.. only the button in the message dialog is clickable.

of course, any request for 'modal form' of any size is another wishlist.. but that is besides the 'hotspot' request...

Hope that helps..

 

[Cableguy]

The sample you gave, the matching/ discovering diferences in images...
Can be acomplished in the device, although I agree its a very tricky, and code taking job... but its doable with the mouse event's...
Then you would have to compare the clicked coordinates with the "stored" or "listed in a file" ones...

An hotspot, as you call it, would endeed be a plus, but is something that, as I sayed, can be workrd around, for your "image game"....

 

[WZSun]

Hi Cableguy,
My project is not a game.. the example provided is just for explanation only - one that comes to mind. Many authoring tools provide hotspot controls as standard.. which reduces the need to have identical actions (even using SUBs) on multiple images. Imagine 10 panels with each panel having 5 objects. To enable the objects and panels to be clickable, it means 6 duplicated actions (assuming panel is clickable in the 1st place). Multiply that with 10 panels, you have a total of 60 actions. With hotspot conrols.. you need only 10 controls with 10 actions.


A typical hotspot can be a rectangle button with transparency, where it's clickable. An irregular hotspot is just a irregular polygon with transparency. Having transparency means anything beneath the region covered by the hotspot is still visible.

I'm fully aware of using codes.. as a matter of fact, I'm using codes currently for a non-game project... no plan to do any game yet as there real applications that would be great with hotspot... although w/o it is still doable..

The wishlist for hotspot is to eliminate unnecessary coding on images/texts etc... leaving the clickable actions on just one single hotspot control..

 

[Erel]

BTW, you can use one sub event for many controls.
It is done with AddEvent and Sender keywords.
You could see more information here: http://www.b4x.com/forum/showthread.php?t=907

 

[agraham]

A simple Hotspot control using an Image control and the Door library takes very little code as long as you are happy with square hotspots. You would have to set up the co-ordinates of the hotspots anyway so the actual code is pretty minimal.

 

[WZSun]

Hi agraham,
Thanks for the sample demo. That is a great one... for rectangle hotspot.

Does it work for scrollable panels? Is the coordinates relative to the control, say panel control? Let's say we have a panel, larger than the width. So, there is a horizontal scrollbar. if I specified the coordinates to be x=5, y=5, will it remain the same if the panel is scrolled to the right or left?

For example, there are 10 columns, but only 3 are shown at one time on the screen:
[1] [2] [3] - normal screen - original position.
[2] [3] [4] - scroll to the right

when we specify coordinates for column 2, and when user scroll to the right, column2 becomes the first column. If we specify the coordinates for columns (as in original position), when user tap on column3, will it be column2 coordimates, or column3?

Rgds
WZSun

 

[agraham]

That is a great one... for rectangle hotspot.

Rectangle is the easiest. Attached demo tests also for circular and triangular hotspots. You can code more complicated shapes if needed but I am not sure how valuable that would be for a real application.

Does it work for scrollable panels?

I'd be interested to know how you intended to get a scrollable panel as I didn't think you could do it in B4PPC. That is until now, see this new demo.

@Erel - Could we do with a repository (thread?) somewhere for these easy but useful tricks with the Door library, like this scrollable panel and the HScrollBar on a TextBox?. People who do not have the knowledge of the underlying .NET control properties could browse there for ideas.

 

[agraham]

Finally an example of hit-testing an arbitrary shape using a Bitmap from the ImageLib library that holds a small bitmap of the tested shape.

 

[Erel]

@Erel - Could we do with a repository (thread?) somewhere for these easy but useful tricks with the Door library, like this scrollable panel and the HScrollBar on a TextBox?. People who do not have the knowledge of the underlying .NET control properties could browse there for ideas.

The best place for these useful tricks is the Code Samples & Tips sub forum.
It doesn't matter too much if the code is using or not using the Door library as long as it is helpful for other users.

 

[WZSun]

Rectangle is the easiest. Attached demo tests also for circular and triangular hotspots. You can code more complicated shapes if needed but I am not sure how valuable that would be for a real application.

Thanks.. will check on it.

I'd be interested to know how you intended to get a scrollable panel as I didn't think you could do it in B4PPC. That is until now, see this new demo.

Why not? I used Scrollbar.dll to attach a panel and make it scrollable.

sb.New1("Form1",0,251,240,18,false)
sb.Maximum = 180
sb.SmallChange = 20
sb.LargeChange = 20
.
.
Sub sb_ValueChanged
Panel10.Left = -sb.Value
End Sub

@Erel - Could we do with a repository (thread?) somewhere for these easy but useful tricks with the Door library, like this scrollable panel and the HScrollBar on a TextBox?. People who do not have the knowledge of the underlying .NET control properties could browse there for ideas.

Yes, I agreed tricks and tips should be stored in a common location so that we can search for it asap, instead of 'finding the needle in a haysack' by browsing through all mails in this forum.

 

[WZSun]

Agraham's sample demos are great.. but from a beginner's pointof view - it's too complex... if there are multiple objects on multiple forms.. Perhaps it's due to my limited skillsets..

I searched and found this - http://www.codeproject.com/KB/buttons/hotspot.aspx

maybe someone can expand on this to make it Basic4PPC compatible...

 

[agraham]

Why not? I used Scrollbar.dll to attach a panel and make it scrollable.

That's not quite the same thing. That moves the panel itself which I assume has to be wider and/or higher than the Form, rather than scrolling a large object within the panel.

I searched and found this - http://www.codeproject.com/KB/buttons/hotspot.aspx

You think my demos are too complex compared to this?

 

[WZSun]

Hi agraham,
You're the expert.. so for me.. I just need a simple control.. will definitely check on yours in more details.. as currently I don't need the hotspots in my current project, although I may need to use them for my next forthcoming project.

I agreed your demos may provide a good workaround.. but not sure I want to go into that direction as coordinates checking are critical. On a serious note, your demos would come handy for more precise checking.. and I like the irregular hotspot you did in demos 2 and 3.. it may come handy for some future games projects...

Right now... for me, a simple 'transparent button' control (acting like a hotspot) is adequate as I can place them visibly on the form... and not worrying about coordinates.

Thought perhaps if Erel can add a 'transparent' option in the Properties of the current Image or Button controls, that will become a hotspot control instantly...

 

[alfcen]

Hi Andrew,

Thanks to your hotspot sample I got a much clearer view of the Door library.
The AutoScroll property for the panel simplifies code tremendously. So inspired
I also checked your ControlInfo source with which help I found that properties
for the desktop are not necessarily available for the device, such as AutoSize
for the PictureBox (Image control). Sad, but fact.

Your ControlInfo is a great reference, indeed! It saves hours of figuring out
why Door reliant code may not work on devices.

I have slightly redesigned the GUI basically replacing the TextBox with a
ComboBox for Control selection and also rem'd the Message boxes to favour
a Label displaying the parameters. No disrespect intended

You are doing really great in this forum!

Cheers
Robert

 

[klaus]

Hi Andrew and Robert

Thanks Andrew for the different examples of the use of the Door library which makes it more and more understandable to me.

I am also looking in the ControlInfo source to get information, but were missing a few controls.

I added the controls from the ControlEx library and ListView to list.

Sometimes it is still interesting to have the whole MSDN info.
So I added a direct link to the MSDN web site.

For me also, of course, no disrespect intended.

Update with more controls 2008.05.01

Best regards

 

[alfcen]

Hi Klaus,
I was hoping that someone would add further controls
You did great on developing this project further.
Tausend Dank and cheers
Robert