Skip to content

Script Examples

Communication between the Show UI and the Template UI

Show UI:
Download ezUI File

Template UI:
Download ezUI File

In this example, we demonstrate the communication process between the Show UI and the Template UI to dynamically update the graphical user interface based on user input.

By storing the user's selection in session storage and listening for changes, the Template UI can promptly reflect the user's choices, providing a responsive and interactive user experience.

ShowUI-TemplateUI-Communication

Show ezUI:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
let drag = false;
const realSize = 200;
function onPointerDown(e) {
  drag = true;
  area.setPointerCapture(e.pointerId);
}

// Event listener for the highlight button click event
btnHighlight.onClick = () => {
  // Store the selected value from the dropdown in session storage under the key 'highlight'
  sessionStorage.setItem('highlight', dropdown.value);
};


// Initial Read
function readData() {
  updatePosition('x', vtxPosition.value.x);
  updatePosition('y', vtxPosition.value.y);
}

readData();

Template ezUI:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
let drag = false;
const realSize = 200;
function onPointerDown(e) {
  drag = true;
  area.setPointerCapture(e.pointerId);
}


// Function to set the highlight based on the provided value
function onSetHighlight(value: string) {
  let highlight = -1;  // Initialize highlight variable to -1

  // Determine the highlight value based on the input
  switch (value) {
    case 'Option 1':
      highlight = 1;
      break;

    case 'Option 2':
      highlight = 2;
      break;

    case 'Option 3':
      highlight = 3;
      break;
  }

  /* Loop through the options and update the border 
  color of the corresponding buttons*/
  for (let i = 1; i <= 3; i++) {
    const btn = findElement(`btnOption${i}`);  // Find the button element
    if (btn)
      btn.style.borderColor = (i === highlight ? 'red' : undefined);  /* Set 
      border color to red if highlighted, otherwise undefined */
  }
}

// Event listener for changes in session storage 'highlight' key
sessionStorage.on('highlight', e => onSetHighlight(e.value));


// Initial Read
function readData() {
  updatePosition('x', vtxPosition.value.x);
  updatePosition('y', vtxPosition.value.y);
}

readData();