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.
Solved! Go to 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! 🙂
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! 🙂
Hi @mate_toth
Thanks for the information, looks promising.
I'll give it a try and share my findings in the next few days.
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.
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.
User | Count |
---|---|
257 | |
108 | |
93 | |
57 | |
40 |