Recent

Author Topic: What kind of controls are available for clickable interactive graphics?  (Read 1903 times)

vfclists

  • Hero Member
  • *****
  • Posts: 1013
    • HowTos Considered Harmful?
What I have in mind are controls which can help this question - Get Element ID from Click which is about getting the SVG Element ID from clicks in a TBCSVGViewer

The only thing I can think of is to embed a CEF4Delphi control in the page to get the full benefit of SVG images respond to the events, but the thought of including 100s of megabytes in an app to provide WebBrowser control makes me cringe.

Are there more compact web image controls offering SVG capability available for Lazarus, or some wrappers for those that come with the operating system?

« Last Edit: January 15, 2024, 04:16:33 pm by vfclists »
Lazarus 3.0/FPC 3.2.2

KodeZwerg

  • Hero Member
  • *****
  • Posts: 2006
  • Fifty shades of code.
    • Delphi & FreePascal
Re: What kind of controls are available for clickable interactive graphics?
« Reply #1 on: January 10, 2024, 02:17:16 am »
I have not looked at the link you posted but to answer your topics question:
TPanel and its TCanvas
TPanel and a TImage on it
« Last Edit: Tomorrow at 31:76:97 xm by KodeZwerg »

vfclists

  • Hero Member
  • *****
  • Posts: 1013
    • HowTos Considered Harmful?
Re: What kind of controls are available for clickable interactive graphics?
« Reply #2 on: January 10, 2024, 01:18:42 pm »
I have not looked at the link you posted but to answer your topics question:
TPanel and its TCanvas
TPanel and a TImage on it

I think you should. I probably didn't use the right terminology, but I am talking about image formats which embed information in the coordinates so that a click in at some point results in some embed object responding in a particular manner.
Lazarus 3.0/FPC 3.2.2

KodeZwerg

  • Hero Member
  • *****
  • Posts: 2006
  • Fifty shades of code.
    • Delphi & FreePascal
Re: What kind of controls are available for clickable interactive graphics?
« Reply #3 on: January 10, 2024, 02:30:54 pm »
I think you should.
If I would want to jump out of topic, yes, but I not want, if other topic is where you extend a question, maybe you should post there?

I probably didn't use the right terminology, but I am talking about image formats which embed information in the coordinates so that a click in at some point results in some embed object responding in a particular manner.
Never heard of, give an example about images that automagical respond to a click.
From my point of view, an image is 2D and static but you can of course have lots of layers on, however, when its rendered it is again just 2D and always static.
Non-Static is in my humble opinion only code that react to something, like a mouse that click inside a specific x/y coordinate.
What I have done in past is to create a base image and alphablended layers (seperate transparent images), when clicked inside a specific coordinate, a layer was added or removed.
(In my case it was a basic landmap with different regions, clicking one would add a visual border around or remove it (alphablended layer on/off)) but all that happen by code and not by image,
but in your case, the way how you describe it, how should an image know anything about a mouse and magicaly react to a click... riddles after riddles.

My suggestion would be to do same as I did, create a base image where you can blend other images in and out.
« Last Edit: Tomorrow at 31:76:97 xm by KodeZwerg »

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: What kind of controls are available for clickable interactive graphics?
« Reply #4 on: January 14, 2024, 03:42:29 am »
Lazpaint has layer support but click able with a window of layers not directly in the main drawing AFAIK.

Leledumbo

  • Hero Member
  • *****
  • Posts: 8744
  • Programming + Glam Metal + Tae Kwon Do = Me
Re: What kind of controls are available for clickable interactive graphics?
« Reply #5 on: January 15, 2024, 09:15:28 am »
image formats which embed information in the coordinates so that a click in at some point results in some embed object responding in a particular manner.
I don't think there is any image format with such a feature, and this is still a vague explanation. Are you asking about something similar to OpenGL's object picking where it reads clicked mouse coordinate then compare it with every object in the scene checking which one collides with the click coordinate (as a 2D plane)?

TRon

  • Hero Member
  • *****
  • Posts: 2401
Re: What kind of controls are available for clickable interactive graphics?
« Reply #6 on: January 15, 2024, 10:04:28 am »
Never heard of, give an example about images that automagical respond to a click.

I don't think there is any image format with such a feature, and this is still a vague explanation.

There used to be 'something' on the web (eons ago) that allowed to use some sort of overlay on images so that different parts of the (single) image could be selected. It depended on the coordinates of your pointer in/over the image. For the life of me, I can't remember its name (*).

In theory SVG can do this automagically since it allows for HTML to be embedded. CSS can do something similar. To my knowledge there are no components in existence that have this functionality but the technique is practical for example when using photographs/pictures which automatically blend f.e. hovering the mouse different objects or faces so that the a particular part of the image get highlighted (with a description that pops up or get shown below the image like we use hints)

But yes, TS seem a bit vague in the description probably missing some use of correct terminology. so @vfclist: if you don't know the correct use of terminology then try to describe what actions need (or you want) to happen for your (specific) use case. I myself lack a lot of English vocabulary but a (detailed) description always seem to do the trick.

edit:
(*) The modern(ized) version seem to be named HTML image map.
« Last Edit: January 15, 2024, 10:23:50 am by TRon »

cdbc

  • Hero Member
  • *****
  • Posts: 995
    • http://www.cdbc.dk
Re: What kind of controls are available for clickable interactive graphics?
« Reply #7 on: January 15, 2024, 10:15:08 am »
Hi
Hmmm... Maybe Michaëls new "Fresnel" framework can do this?!?
It's on github/lab somewhere...
Regards Benny
If it ain't broke, don't fix it ;)
PCLinuxOS(rolling release) 64bit -> KDE5 -> FPC 3.2.2 -> Lazarus 2.2.6 up until Jan 2024 from then on it's: KDE5/QT5 -> FPC 3.3.1 -> Lazarus 3.0

VisualLab

  • Sr. Member
  • ****
  • Posts: 290
Re: What kind of controls are available for clickable interactive graphics?
« Reply #8 on: January 15, 2024, 11:19:18 am »
All the speakers mentioned all possible approaches. This can be roughly divided into:

  • raster graphics (BMP, PNG, JPG, etc.):

    • the program has already prepared information (metadata) about what objects are visible in the image (coordinates, etc.), in addition to the image, the program stores this information (objects) in some container, thanks to this metadata it can respond to clicks (actions, etc.),
    • the program constantly tries to "recognize" objects in the image and creates metadata live, associates them with image areas and places them as objects in some container, as above, thanks to this metadata it can respond to clicks (actions etc.),


  • vector graphics (SVG, etc.):

    • read-only, inside the program each image element is an object of some class, each class is a kind of graphic control, so there is no problem with handling clicks and similar activities, these graphic objects have a certain display order (z-order)
    • reading and writing (editors) as above, but you can modify their parameters (size, position, color, etc.) - full interaction.

Classic SVG displayers do not have interaction support because they are only image viewers (not to be confused with a web browser). Therefore, not all SVG libraries support interactivity.

Therefore, it all depends on the specific needs of the software developer. Most often, you have to create such a narrowly specialized library yourself. An alternative is to use existing (perhaps "very heavy") class libraries. Maybe provide more details on what you need. Then it will be easier to suggest something.

vfclists

  • Hero Member
  • *****
  • Posts: 1013
    • HowTos Considered Harmful?
Re: What kind of controls are available for clickable interactive graphics?
« Reply #9 on: January 15, 2024, 04:40:37 pm »
image formats which embed information in the coordinates so that a click in at some point results in some embed object responding in a particular manner.
I don't think there is any image format with such a feature, and this is still a vague explanation. Are you asking about something similar to OpenGL's object picking where it reads clicked mouse coordinate then compare it with every object in the scene checking which one collides with the click coordinate (as a 2D plane)?

This will be great if it is easy to create the necessary objects and scenes and integrate it into a Lazarus control.

There is a TOpenGLContext and a TBGLVirtualScreen on the palette. Are they capable of something like this with the right creation/editing tools?
Lazarus 3.0/FPC 3.2.2

vfclists

  • Hero Member
  • *****
  • Posts: 1013
    • HowTos Considered Harmful?
Re: What kind of controls are available for clickable interactive graphics?
« Reply #10 on: January 15, 2024, 05:10:06 pm »

There used to be 'something' on the web (eons ago) that allowed to use some sort of overlay on images so that different parts of the (single) image could be selected. It depended on the coordinates of your pointer in/over the image. For the life of me, I can't remember its name (*).

In theory SVG can do this automagically since it allows for HTML to be embedded. CSS can do something similar. To my knowledge there are no components in existence that have this functionality but the technique is practical for example when using photographs/pictures which automatically blend f.e. hovering the mouse different objects or faces so that the a particular part of the image get highlighted (with a description that pops up or get shown below the image like we use hints)

But yes, TS seem a bit vague in the description probably missing some use of correct terminology. so @vfclist: if you don't know the correct use of terminology then try to describe what actions need (or you want) to happen for your (specific) use case. I myself lack a lot of English vocabulary but a (detailed) description always seem to do the trick.

edit:
(*) The modern(ized) version seem to be named HTML image map.

I think the both the
Quote
HTML Image
map SVG image describe what I need, but I need it without the bloat of a full browser, unless

I have the feeling that  something like TMS Web Components might contain suitable controls.
Lazarus 3.0/FPC 3.2.2

Leledumbo

  • Hero Member
  • *****
  • Posts: 8744
  • Programming + Glam Metal + Tae Kwon Do = Me
Re: What kind of controls are available for clickable interactive graphics?
« Reply #11 on: January 16, 2024, 05:55:56 am »
This will be great if it is easy to create the necessary objects and scenes and integrate it into a Lazarus control.

There is a TOpenGLContext and a TBGLVirtualScreen on the palette. Are they capable of something like this with the right creation/editing tools?
I never use TBGLVirtualScreen so I don't know, but TOpenGLContext is just, well, an OpenGL context so that TForm can render OpenGL. Everything OpenGL can be done there, including object picking. You just need to find a tutorial like what this website has (search for "pick", there are multiple tutorials) and adapt accordingly. Might be overkill, though, as it's intended for 3D graphics instead of just 2D (but still possible).

TRon

  • Hero Member
  • *****
  • Posts: 2401
Re: What kind of controls are available for clickable interactive graphics?
« Reply #12 on: January 16, 2024, 06:44:05 am »
I have the feeling that  something like TMS Web Components might contain suitable controls.
Dunno but if it is then afaik you are depending on a browser again (an (up to date) htmlviewer component might do the trick as well).

I was at least able to verify it is possible, for example here at devexpress. Besides that, I stumbled upon this article which might perhaps be a good starting point (even though its whole point is to generate/create image maps with delphi). I was also able to locate this. Note that I have no experience with any of solutions mentioned in the links, they just happened to cross my path.

edit: Dumb html/javascript link on devexpress page, try this link instead.
« Last Edit: January 16, 2024, 07:09:29 am by TRon »

paweld

  • Hero Member
  • *****
  • Posts: 966
Re: What kind of controls are available for clickable interactive graphics?
« Reply #13 on: January 16, 2024, 07:25:15 am »
TMS has something called HotSpotImage: https://www.tmssoftware.com/site/blog.asp?post=765
Best regards / Pozdrawiam
paweld

 

TinyPortal © 2005-2018