Can I assign the size of graphical elements (e.g. lines) via page code with inputs?

Ask the community
,
1

I’m trying to make a very basic interactive diagram where I want some line elements to change length (and also, if possible, position) on the page, based on some values generated from slider inputs.

For a simple example, I want to do this:

export function LSlider_change(event) {
 //Add your code for this event here:
    let L = $w('#LSlider').value;
    $w('#line1').width = L;
}

…but $w(‘#line1’) doesn’t have a parameter/property called ‘width’.
How do I achieve this?

IF this ISN’T possible, my follow up question is: How do I pass data that I’ve determined from the these page code functions into an embedded javascript / HTML element where I’ll create the diagram instead of on the page?

Thanks for your help.

2

Hi.

Getting Editor element size via code is not support. You can only get window size information .

To pass data from a Wix site to an HTML component using Corvid, refer to this guide: Working with the HTML Element

Good luck!

3

Thank you Sam. Could I ask a follow up question, as the help guide isn’t very clear to me:

How do I pass several variable values from my page code to the HTML element?

I have this in my page code:

export function LSlider_change(event) {
     //Add your code for this event here:
     //%Nozzle Throat Diameter:
     let L = $w('#LSlider').value;
     $w("#htmlThing").postMessage(L);
 }

And this in my HTML code

<script>
function init () {
    window.onmessage = (event) => {
    if (event.data) {
          let L = event.data;
    }else{
          let L = 0.002;
    }
  }
}
//rest of code happens after this, with a canvas element
//using the value of 'L' and other variables to define
//certain sizes.
</script>

Two questions:

  1. What am I doing wrong here? the code runs but I can’t seem to get anything that uses L to work.
  2. How do I pass more variables than just L into the HTML element?

Thanks for your help.