How to get values from frontend script

[SergeyPriem]

I want to get the screen size from the Javascript function and use it in Python functions.

The function state.call_frontend_function returns None.

How to get values from the frontend module?

[ramedina86]

Hi Sergey, the architecture, due to security concerns, only allows communication from client to server via events.

You can generate an event and catch it on the other side.

I tested this and it works as expected. Then the event myinfo can be caught from the Root component by setting the appropriate handler.

export function sendCustomEvent() {
	alert("Sending");
	const ev = new CustomEvent("myinfo", {
		detail: {
			payload: window.screen.height,
			callback: () => {
				alert("Custom event sent successfully.");
			},
		},
	});
	globalThis.core.forwardEvent(ev, [{componentId: "root", instanceNumber: 0}], true);
}

What's the use case by the way? We may look into implementing a more straightforward way of doing this.

[SergeyPriem]

Hello Ramiro,

Thank you for your response. The goal is to obtain the screen size and adjust the user interface accordingly for different devices such as tablets, phones, and desktops. This may include altering the menu/sidebar or positioning the footer at the bottom (or adjust the size of modal window). Additionally, we may explore other ideas that leverage this capability in the future.

[SergeyPriem]

Hi, Ramiro!

I don't understand which handler to use to catch the event from JS. If you have time to explain more precisely, it would be great.
For now, I found a simple solution for UI adjustment (through CSS: @media (min-width: 1200px) {...}). And now I understand your surprise when I ask about such functionality.

I'm still learning))

[pandadezzz]

@ramedina86
i also would like this feature. i am trying to get geolocation from user.
something like this:

export function getLocationAndShowCoordinates() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      console.log("Latitude: " + position.coords.latitude);
      console.log("Longitude: " + position.coords.longitude);

      document.getElementById('coordinates').innerHTML = 
        "Latitude: " + position.coords.latitude + "<br>" +
        "Longitude: " + position.coords.longitude;
    });
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

I now don't know how and where to catch the event. when you say root component is that src/ui/src/components/core/root
/CoreRoot.vue ? novice here.

Thanks!

[FabienArcellier]

Here is the process

[pandadezzz]

thanks so much! it's a lot simpler than i thought haha. really opens up to a lot more flexibility