Positioning a container of text relative to the image behind it

Ask us anything How do I?
1

Hello WeWeb community!

I’ve been struggling to figure out how to position a container relative to an image behind it.

I’m trying to build a sales demo and customer training tool that allows a user to upload screenshots of their application and overlay informative steps to allow a prospect/customer to visualize how their app works without having to log on to the actual application.

-An admin can upload ‘screens’ of their app
-Admin selects a screen and can add ‘Steps’ to that screen
-Admin chooses where each step displays on the screen and the step is positioned relative to the image behind it. The step will adjust it’s position based on the screen size it’s being viewed on.

What is the best approach to save the position of each step relative to the image behind it?

Here’s a very basic mock up of what I’m imagining: MOCK UP - Google Slides

Thank you!

2

You will have to map the image size to coordinates by dividing the image size by a constant number, let’s say 100

This way you can keep the popup coordinates in a variable and then place using absolute position and reversing the coordinate calculation

You can give it a try and if you arent successful I can take a deeper look

3

Thank you @luka. I’ll give this a go and will follow up soon. Thank you for your help!

4

Hi Luka,
When you have time, your help would be greatly appreciated! Here’s a link to my project: Editor | WeWeb

5

I will take a look this week, hopefully tomorrow

We’re cooking a lot of new things so it’s busy :smiley:

6

You have an Array variable containing all the steps, and also percentage of their position relative to the image like this:

image
image728×826 21.5 KB

This is the layout of the screen + step

image

The step div should be set to position: absolute and the Top and Bottom properties should be binded to the x and y keys of the step

image
image612×520 36.7 KB

image
image914×624 31.9 KB

image
image896×598 29.6 KB

7

Thank you for this explanation, which is very helpful. I am creating something very similar. However the usecase is slightly different.

  1. Admin uploads File
  2. User clicks on image
  3. User enters comment and clicks save
  4. The coordinates are saved together with the comment in XANO
  5. A note is displayed at the exact position of the click.

I am struggling with step 2 - How do I get the coordinates within that image? If I save the onClick coordinates in a Variable it is not relative to the image container.

Thank you in advance for your help!

Best Regards from Munich!