Saving image hotspots to database

[Gary_Eden]

Hi

I'm able to add hotspots over an image, used to trigger the display of information about the area clicked on. I'm also able to change the image by selecting a different item from the gallery (pulled from the database).

However, the hotspots for each image are in different locations on the image. 

Is there a way to save the hotspot locations to the database alongside the image? The idea being that when you select a different image the correct hotspots appear with it (which in turn pull the correct information out of the database).

Thanks in advance.

[mate_toth · Accepted solution]

Hi @Gary_Eden ,

I was playing around with floorplans for few days. (Having bookable desks on a floorplan)

My thought process was to store the original XY coordinates of the waypoints (or rectangles) in the dataset, like so. (I used Paint to find the X, Y coordinates of each waypoint) 😄

Image	X	Y	HotspotName
Image1	12	24	Desk 1
Image1	22	50	Desk 2
Image2	10	50	Printer1
Image3	100	200	MeetingRoom1

Then plotted them with a gallery (multiple items) using TemplateSize 0 as per @ericonline trick from this thread. This link will take you how I managed to save the user's input. (same thread)

The image(s) had the CalculateOriginalDimensions set to true, it allowed me to have OriginalWidth (and Height) and DisplayedWidth (and Height), and I was able to make the calculations to plot them at the right X, Y coordinates:

X:
Img_Map.X+(Img_Map.Width-Img_Map.DisplayedWidth)/2+Img_Map.DisplayedWidth/Img_Map.OriginalWidth*ThisItem.Xcoord-Self.Width/2

Y:
Img_Map.Y+(Img_Map.Height-Img_Map.DisplayedHeight)/2+Img_Map.DisplayedHeight/Img_Map.OriginalHeight*ThisItem.Ycoord-Self.Height/2

I hope this is helpful! 🙂

[Gary_Eden]

Hi @mate_toth 
Thanks for the information, looks promising. 
I'll give it a try and share my findings in the next few days.

[Gary_Eden]

Hi @mate_toth 
Thanks for this, my apologies for the delayed reply got caught up with other projects.

Your notes gave me the starting point which I've adjusted slightly - I wanted the hotspots to be the same shape as the item (irregular shapes) so added these to the SharePoint list and then used an image (instead of an icon) within the hotspot gallery.

Properties for the gallery image (imgRoom): 

Image =  First(ThisItem.Attachments).Value (using value means that you don't need to be logged into SharePoint).

CalculateOriginalDimensions = true

Height = imgRoom.OriginalHeight

Width = imgRoom.OriginalWidth

X = ThisItem.Xcord

Y = ThisItem.Ycord

The floor plan image is saved in another SharePoint list and changes depending on the gallery selection using FloorPlans.Selected.GalleryPlan

The background (floorplan) and hotspot gallery are inside a container. This allows it to be positioned where needed and keeps the XY coordinates relative to the container not the page. I'll need to play around with the sizing to line everything up neatly.

Selecting a hotspot displays details of the item in a table.

One quirk I've noticed. 

If I pull the images (.png) from a SharePoint folder they are very fuzzy in the app. Whereas the same image pulled from a SharePoint list are sharp and seem to scale quite well.

Need to work on the user input bit next.

Thanks again.

[Gary_Eden]

Further to my previous post, although creating custom sized images to act as hotspots works. My colleague has pointed out that this is okay for a handful of floorplans but if needing to work with large numbers the effort involved makes it very labour intensive. Consequentially I've reverted to using icons positioned as per the original explanation. 

@mate_toth With regard to recording the users input I've had less success. There a few examples around that use a hidden slider to move items on the screen, these work in a single plane i.e. left/right or up/down. However, combining two sliders together as per your link above just locks them and you can't move in any direction.

However, using the slider principle I've come up with the following:

Moving the sliders moves the marker relative to the image (X marks the spot) using variables updated by the slider OnChange value. The two text boxes on the right display the X & Y coordinates of the marker (these will be included as part of the patch to save the location of the marker).

As before the floorplan is within a container with zero padding (so 0,0 is at the top left), the dotted line shows the container boundary. The size of the sliders and Max values are set by referencing the image e.g. Max = PlanImage.Width. This allows different sized floorplan images to be used without having to worry about making all images exactly the same size.

One oddity is that the vertical slider starts with zero at the bottom. Simply switching the Max & Min values doesn't flip the zero point as you would expect so I've had to deduct the position from the image height e.g. OnChange = UpdateContext({positionY: (PlanImage.Height - SliderY.Value)})

The above works consistently but it would be much better if the user could simply move the marker by dragging it (appearance of dragging it).  I'm guessing that I've missed something in the detail when combining the horizontal and vertical sliders. Note: the invisible sliders must be above the image otherwise the image stops the slider working.