Add display orientation buttons to web ui #703

Author

Owner

@mdevaev commented on GitHub (Aug 10, 2023):

It didn't work out quickly, there were some problems with video scaling. A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry

@mdevaev commented on GitHub (Aug 10, 2023): It didn't work out quickly, there were some problems with video scaling. A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry

deekerman commented

Author

Owner

@BhupiMAD commented on GitHub (Aug 20, 2023):

Any fix for this? i tried your CSS rotate solution, but mouse coordinates does not rotate with screen,

@BhupiMAD commented on GitHub (Aug 20, 2023): Any fix for this? i tried your CSS rotate solution, but mouse coordinates does not rotate with screen,

deekerman commented

Author

Owner

@plia7 commented on GitHub (Aug 20, 2023):

Any fix for this? i tried your CSS rotate solution, but mouse coordinates does not rotate with screen,

I don't think @mdevaev solved it yet, it's still considered work in progress, I think he's busy with other priorities at the moment.

@plia7 commented on GitHub (Aug 20, 2023): > Any fix for this? i tried your CSS rotate solution, but mouse coordinates does not rotate with screen, I don't think @mdevaev solved it yet, it's still considered work in progress, I think he's busy with other priorities at the moment.

deekerman commented

Author

Owner

@plia7 commented on GitHub (Oct 1, 2023):

It didn't work out quickly, there were some problems with video scaling. A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry

Hi @mdevaev, just checking to see if there are any updates on this? Your last action was on Aug 10.
Thank you.

CC: @BhupiMAD

@plia7 commented on GitHub (Oct 1, 2023): > It didn't work out quickly, there were some problems with video scaling. A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry Hi @mdevaev, just checking to see if there are any updates on this? Your last action was on Aug 10. Thank you. CC: @BhupiMAD

deekerman commented

Author

Owner

@BhupiMAD commented on GitHub (Oct 1, 2023):

It didn't work out quickly, there were some problems with video scaling. A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry

Hi @mdevaev, just checking to see if there are any updates on this? Your last action was on Aug 10. Thank you.

CC: @BhupiMAD

This is what @mdevaev replied
You can invert the mouse range. Run kvmd -m and find options tree with mouse_x_range and mouse_y_range.

@BhupiMAD commented on GitHub (Oct 1, 2023): > > It didn't work out quickly, there were some problems with video scaling. A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry > > Hi @mdevaev, just checking to see if there are any updates on this? Your last action was on Aug 10. Thank you. > > CC: @BhupiMAD This is what @mdevaev replied You can invert the mouse range. Run kvmd -m and find options tree with mouse_x_range and mouse_y_range.

deekerman commented

Author

Owner

@plia7 commented on GitHub (Oct 1, 2023):

It didn't work out quickly, there were some problems with video scaling. A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry

Hi @mdevaev, just checking to see if there are any updates on this? Your last action was on Aug 10. Thank you.

CC: @BhupiMAD

This is what @mdevaev replied

You can invert the mouse range. Run kvmd -m and find options tree with mouse_x_range and mouse_y_range.

So you got it to work? It's not just the mouse movement it's also the screen that's not correctly oriented

@plia7 commented on GitHub (Oct 1, 2023): > > > It didn't work out quickly, there were some problems with video scaling. A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry > > > > > > Hi @mdevaev, just checking to see if there are any updates on this? Your last action was on Aug 10. Thank you. > > > > > > CC: @BhupiMAD > > > > This is what @mdevaev replied > > You can invert the mouse range. Run kvmd -m and find options tree with mouse_x_range and mouse_y_range. So you got it to work? It's not just the mouse movement it's also the screen that's not correctly oriented

deekerman commented

Author

Owner

@BhupiMAD commented on GitHub (Oct 1, 2023):

For me screen orientation was working, the problem was with the mouse not inverting as per screen. I haven’t tried the mouse solution yet.

@BhupiMAD commented on GitHub (Oct 1, 2023): For me screen orientation was working, the problem was with the mouse not inverting as per screen. I haven’t tried the mouse solution yet.

deekerman commented

Author

Owner

@plia7 commented on GitHub (Oct 1, 2023):

For me screen orientation was working, the problem was with the mouse not inverting as per screen. I haven’t tried the mouse solution yet.

Not sure what are you saying but there is an issue: Display rotates 90 degrees and not filling the entire black space. The mouse movement also doesn't seem to be right.
So I guess we'll have to wait for it to be resolved, it looks like the dev started to work on it but hasn't finished yet.

@plia7 commented on GitHub (Oct 1, 2023): > For me screen orientation was working, the problem was with the mouse not inverting as per screen. I haven’t tried the mouse solution yet. Not sure what are you saying but there is an issue: Display rotates 90 degrees and not filling the entire black space. The mouse movement also doesn't seem to be right. So I guess we'll have to wait for it to be resolved, it looks like the dev started to work on it but hasn't finished yet.

deekerman commented

Author

Owner

@mdevaev commented on GitHub (Oct 2, 2023):

No progress here, sorry.

@mdevaev commented on GitHub (Oct 2, 2023): No progress here, sorry.

deekerman commented

Author

Owner

@spcharc commented on GitHub (Oct 2, 2023):

I like this issue. Some webpages and e-books / pdfs are more suitable on a vertical display than horizontal.

A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry

This may fix the web version. Many people use VNC which may need some other adjustments

@spcharc commented on GitHub (Oct 2, 2023): I like this issue. Some webpages and e-books / pdfs are more suitable on a vertical display than horizontal. > A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry This may fix the web version. Many people use VNC which may need some other adjustments

deekerman commented

Author

Owner

@plia7 commented on GitHub (Oct 2, 2023):

I like this issue. Some webpages and e-books / pdfs are more suitable on a vertical display than horizontal.

A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry

This may fix the web version. Many people use VNC which may need some other adjustments

Thank you. I think the web version is more commonly used and functional including where you could place the ui button to activate this mode.

But I'm all for adding the support to VNC as well, it should probably go in a separate ticket with a link to this ticket.

@plia7 commented on GitHub (Oct 2, 2023): > I like this issue. Some webpages and e-books / pdfs are more suitable on a vertical display than horizontal. > > > > > A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry > > > > This may fix the web version. Many people use VNC which may need some other adjustments Thank you. I think the web version is more commonly used and functional including where you could place the ui button to activate this mode. But I'm all for adding the support to VNC as well, it should probably go in a separate ticket with a link to this ticket.

deekerman commented

Author

Owner

@mdevaev commented on GitHub (Oct 3, 2023):

I can't add it to VNC because there is now the protocol doesn't have any rotation feature and uStreamer can't perform it at all.

@mdevaev commented on GitHub (Oct 3, 2023): I can't add it to VNC because there is now the protocol doesn't have any rotation feature and uStreamer can't perform it at all.

deekerman commented

Author

Owner

@spcharc commented on GitHub (Oct 3, 2023):

I can't add it to VNC because there is now the protocol doesn't have any rotation feature and uStreamer can't perform it at all.

sad

I checked tigervnc client and it cannot rotate images. Guess there's no way to add this to vnc without some major software changes.

@spcharc commented on GitHub (Oct 3, 2023): > I can't add it to VNC because there is now the protocol doesn't have any rotation feature and uStreamer can't perform it at all. sad I checked tigervnc client and it cannot rotate images. Guess there's no way to add this to vnc without some major software changes.

deekerman commented

Author

Owner

@plia7 commented on GitHub (Nov 29, 2023):

I can't add it to VNC because there is now the protocol doesn't have any rotation feature and uStreamer can't perform it at all.

Hello @mdevaev, what about adding it to PiKVM UI, using css transform and swap x/y/width/height in getGeometry - Any progress on that or did you hit a plateau?
Thank you.

@plia7 commented on GitHub (Nov 29, 2023): > I can't add it to VNC because there is now the protocol doesn't have any rotation feature and uStreamer can't perform it at all. Hello @mdevaev, what about adding it to PiKVM UI, using css transform and swap x/y/width/height in getGeometry - Any progress on that or did you hit a plateau? Thank you.

deekerman commented

Author

Owner

@plia7 commented on GitHub (Mar 11, 2024):

It didn't work out quickly, there were some problems with video scaling. A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry

@mdevaev From ChatGPT: "To use CSS transform and swap the x, y, width, and height properties in getBoundingClientRect() or any similar method, you'll need to follow these steps:

Apply CSS Transform: Apply the necessary CSS transform to the element whose geometry you want to manipulate. This can be done using the transform property in CSS.
Get Transformed Geometry: After applying the transform, you need to get the transformed geometry of the element. You can do this by using the getBoundingClientRect() method in JavaScript.
Swap Properties: Once you have the transformed geometry, swap the x and y coordinates, as well as the width and height properties, to get the desired result.

Here's a basic example:

HTML:

<div id="element"></div>

CSS:

#element {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

JavaScript:

// Get the element
const element = document.getElementById('element');

// Get the transformed geometry
const rect = element.getBoundingClientRect();

// Swap x and y coordinates
const swappedX = rect.y;
const swappedY = rect.x;

// Swap width and height properties
const swappedWidth = rect.height;
const swappedHeight = rect.width;

// Output the swapped geometry
console.log("Swapped X:", swappedX);
console.log("Swapped Y:", swappedY);
console.log("Swapped Width:", swappedWidth);
console.log("Swapped Height:", swappedHeight);

In this example, we apply a rotate(45deg) transform to the element. Then, we use getBoundingClientRect() to get the transformed geometry. Finally, we swap the x and y coordinates as well as the width and height properties to get the geometry as if it were not transformed."

Hopefully this helps.

Thanks.

@plia7 commented on GitHub (Mar 11, 2024): > It didn't work out quickly, there were some problems with video scaling. A note for myself not to forget: use css transform and swap x/y/width/height in getGeometry @mdevaev From ChatGPT: "To use CSS transform and swap the x, y, width, and height properties in getBoundingClientRect() or any similar method, you'll need to follow these steps: 1. Apply CSS Transform: Apply the necessary CSS transform to the element whose geometry you want to manipulate. This can be done using the transform property in CSS. 2. Get Transformed Geometry: After applying the transform, you need to get the transformed geometry of the element. You can do this by using the getBoundingClientRect() method in JavaScript. 3. Swap Properties: Once you have the transformed geometry, swap the x and y coordinates, as well as the width and height properties, to get the desired result. Here's a basic example: HTML: `<div id="element"></div>` CSS: ``` #element { width: 100px; height: 100px; background-color: red; transform: rotate(45deg); } ``` JavaScript: ``` // Get the element const element = document.getElementById('element'); // Get the transformed geometry const rect = element.getBoundingClientRect(); // Swap x and y coordinates const swappedX = rect.y; const swappedY = rect.x; // Swap width and height properties const swappedWidth = rect.height; const swappedHeight = rect.width; // Output the swapped geometry console.log("Swapped X:", swappedX); console.log("Swapped Y:", swappedY); console.log("Swapped Width:", swappedWidth); console.log("Swapped Height:", swappedHeight); ``` In this example, we apply a rotate(45deg) transform to the element. Then, we use getBoundingClientRect() to get the transformed geometry. Finally, we swap the x and y coordinates as well as the width and height properties to get the geometry as if it were not transformed." Hopefully this helps. Thanks.

deekerman commented

Author

Owner

@mdevaev commented on GitHub (Mar 12, 2024):

I don't need GPT's help, I've already tried a similar approach and the problem is scaling, as I wrote.

@mdevaev commented on GitHub (Mar 12, 2024): I don't need GPT's help, I've already tried a similar approach and the problem is scaling, as I wrote.

deekerman commented

Author

Owner

@plia7 commented on GitHub (Mar 15, 2024):

I don't need GPT's help, I've already tried a similar approach and the problem is scaling, as I wrote.

You mean aspect ratio?
To ensure that the video scales properly within the portrait dimensions while maintaining its aspect ratio, you can set the object-fit property for the video element. Here's how you can modify the CSS:

#video {
  position: absolute;
  width: 100%; /* Ensure the video fills the container horizontally */
  height: 100%; /* Ensure the video fills the container vertically */
  object-fit: cover; /* Maintain aspect ratio and cover the container */
}

By setting object-fit: cover;, the video will be scaled to maintain its aspect ratio while covering the entire area of the container. This ensures that the video fills the portrait dimensions completely without distorting or cropping the video content.

With this adjustment, the video will scale properly within the portrait dimensions while maintaining its aspect ratio.

Transform technique:

To transform a video stream from landscape (1920x1080) to portrait (1080x1920) while ensuring that the video scales properly, you can use CSS transforms along with appropriate scaling techniques. Here's a basic approach using CSS:

HTML:

<div id="videoContainer">
  <video id="video" src="your_video_source.mp4" autoplay loop></video>
</div>

CSS:

#videoContainer {
  width: 1080px; /* portrait width */
  height: 1920px; /* portrait height */
  overflow: hidden;
  position: relative;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
}

#video {
  position: absolute;
  width: auto;
  height: 100%;
}

In this example:

The #videoContainer element is styled to have the dimensions of a portrait orientation (1080x1920).
The overflow: hidden; property ensures that any overflow content (which may occur due to the rotation) is hidden.
We apply a rotate(90deg) transform to the video container to rotate the video by 90 degrees clockwise, effectively changing it from landscape to portrait.
The translateY(-100%) transform is used to reposition the rotated video to the top-left corner of the container.
transform-origin: top left; ensures that the rotation and translation are applied from the top-left corner of the container.
The #video element inside the container is positioned absolutely to fill the container's height and maintain proper aspect ratio.

With this setup, the video will be transformed from landscape to portrait and will scale appropriately to fit within the portrait dimensions while maintaining its aspect ratio. Adjust the dimensions in CSS according to your specific requirements and make sure to replace "your_video_source.mp4" with the actual video source.

Hopefully this helps.
If not, could you please show an example/screenshot when you say the video doesn't scale? I'll see if I can help further but I want to ensure I understand where the problem is.

Thank you.

@plia7 commented on GitHub (Mar 15, 2024): > I don't need GPT's help, I've already tried a similar approach and the problem is scaling, as I wrote. You mean aspect ratio? To ensure that the video scales properly within the portrait dimensions while maintaining its aspect ratio, you can set the `object-fit` property for the video element. Here's how you can modify the CSS: ```css #video { position: absolute; width: 100%; /* Ensure the video fills the container horizontally */ height: 100%; /* Ensure the video fills the container vertically */ object-fit: cover; /* Maintain aspect ratio and cover the container */ } ``` By setting `object-fit: cover;`, the video will be scaled to maintain its aspect ratio while covering the entire area of the container. This ensures that the video fills the portrait dimensions completely without distorting or cropping the video content. With this adjustment, the video will scale properly within the portrait dimensions while maintaining its aspect ratio. Transform technique: To transform a video stream from landscape (1920x1080) to portrait (1080x1920) while ensuring that the video scales properly, you can use CSS transforms along with appropriate scaling techniques. Here's a basic approach using CSS: HTML: ```html <div id="videoContainer"> <video id="video" src="your_video_source.mp4" autoplay loop></video> </div> ``` CSS: ```css #videoContainer { width: 1080px; /* portrait width */ height: 1920px; /* portrait height */ overflow: hidden; position: relative; transform: rotate(90deg) translateY(-100%); transform-origin: top left; } #video { position: absolute; width: auto; height: 100%; } ``` In this example: 1. The `#videoContainer` element is styled to have the dimensions of a portrait orientation (1080x1920). 2. The `overflow: hidden;` property ensures that any overflow content (which may occur due to the rotation) is hidden. 3. We apply a `rotate(90deg)` transform to the video container to rotate the video by 90 degrees clockwise, effectively changing it from landscape to portrait. 4. The `translateY(-100%)` transform is used to reposition the rotated video to the top-left corner of the container. 5. `transform-origin: top left;` ensures that the rotation and translation are applied from the top-left corner of the container. 6. The `#video` element inside the container is positioned absolutely to fill the container's height and maintain proper aspect ratio. With this setup, the video will be transformed from landscape to portrait and will scale appropriately to fit within the portrait dimensions while maintaining its aspect ratio. Adjust the dimensions in CSS according to your specific requirements and make sure to replace `"your_video_source.mp4"` with the actual video source. Hopefully this helps. If not, could you please show an example/screenshot when you say the video doesn't scale? I'll see if I can help further but I want to ensure I understand where the problem is. Thank you.

deekerman commented

Author

Owner

@mdevaev commented on GitHub (Mar 15, 2024):

If you want to figure out the problem on your own, then I'm not stopping you. But please don't ask ChatGPT questions and then ask me to check it all out. ChatGPT does not know the context and does not see the code, and offers only common advice. This will not help solve the problem.

@mdevaev commented on GitHub (Mar 15, 2024): If you want to figure out the problem on your own, then I'm not stopping you. But please don't ask ChatGPT questions and then ask me to check it all out. ChatGPT does not know the context and does not see the code, and offers only common advice. This will not help solve the problem. ![image](https://github.com/pikvm/pikvm/assets/416259/25011b36-b01e-4aa6-b6b3-559d5c1f83da)

deekerman commented

Author

Owner

@RSATom commented on GitHub (Mar 15, 2024):

Just an idea, maybe it can be done different way? - If I understand correctly RTP video frames can contain information about video orientation and WebRTC client (browser in our case) can take it into account. So maybe there is a way to set that video orientation info on Janus side?
I can look at it, but unfortunately have some other tasks with higher priority right now, so it could be only at least some time later...

Also I'm agree with @mdevaev it's wrong Idea to do it on html/css/js level. And one more thing: ChatGPT gives a feeling everything is simple. But actually it's not - usually there are too many small details it doesn't take into account, and it can make solution very complicated finally or even wrong...

@RSATom commented on GitHub (Mar 15, 2024): Just an idea, maybe it can be done different way? - If I understand correctly RTP video frames can contain information about video orientation and WebRTC client (browser in our case) can take it into account. So maybe there is a way to set that video orientation info on Janus side? I can look at it, but unfortunately have some other tasks with higher priority right now, so it could be only at least some time later... Also I'm agree with @mdevaev it's wrong Idea to do it on html/css/js level. And one more thing: ChatGPT gives a feeling everything is simple. But actually it's not - usually there are too many small details it doesn't take into account, and it can make solution very complicated finally or even wrong...

deekerman commented

Author

Owner

@mdevaev commented on GitHub (Mar 15, 2024):

@RSATom I like the idea about RTP. I also have a higher priority issue right now, so let me know when you have time, maybe we can do something together.

@mdevaev commented on GitHub (Mar 15, 2024): @RSATom I like the idea about RTP. I also have a higher priority issue right now, so let me know when you have time, maybe we can do something together.

deekerman commented

Author

Owner

@plia7 commented on GitHub (Mar 15, 2024):

Just an idea, maybe it can be done different way? - If I understand correctly RTP video frames can contain information about video orientation and WebRTC client (browser in our case) can take it into account. So maybe there is a way to set that video orientation info on Janus side?

ChatGPT agrees with you too 🤣:

Yes, you're absolutely correct! If the video frames contain orientation information, the WebRTC client (browser) can utilize this information to properly render the video without the need for manual transformations on the client side.

In the context of Janus, you can indeed set video orientation information on the server side. Janus itself doesn't directly manipulate video frames at this level, but you can use external tools or libraries to handle video processing and orientation metadata.

Here's a potential approach:

Video Processing: Use a video processing library or tool to analyze and modify the video frames to include orientation metadata. You can extract metadata from the original video, modify it to reflect the desired orientation (e.g., 90-degree rotation for portrait mode), and then repackage the video frames with the updated metadata.
Janus Integration: Once the video frames contain orientation metadata, Janus can stream them as usual. Janus doesn't need to be aware of the specific orientation metadata; it simply forwards the video frames to the WebRTC clients.
WebRTC Client: The WebRTC client (browser) receives the video stream with orientation metadata. Modern browsers, such as Chrome and Firefox, have built-in support for processing this metadata and rendering the video correctly according to the specified orientation.

By setting the orientation metadata at the server side (before streaming through Janus), you can ensure that the video is rendered properly in portrait mode without requiring additional transformations or adjustments on the client side. This approach can lead to a more seamless and efficient viewing experience.

Thanks.

@plia7 commented on GitHub (Mar 15, 2024): > Just an idea, maybe it can be done different way? - If I understand correctly RTP video frames can contain information about video orientation and WebRTC client (browser in our case) can take it into account. So maybe there is a way to set that video orientation info on Janus side? ChatGPT agrees with you too 🤣: Yes, you're absolutely correct! If the video frames contain orientation information, the WebRTC client (browser) can utilize this information to properly render the video without the need for manual transformations on the client side. In the context of Janus, you can indeed set video orientation information on the server side. Janus itself doesn't directly manipulate video frames at this level, but you can use external tools or libraries to handle video processing and orientation metadata. Here's a potential approach: 1. **Video Processing**: Use a video processing library or tool to analyze and modify the video frames to include orientation metadata. You can extract metadata from the original video, modify it to reflect the desired orientation (e.g., 90-degree rotation for portrait mode), and then repackage the video frames with the updated metadata. 2. **Janus Integration**: Once the video frames contain orientation metadata, Janus can stream them as usual. Janus doesn't need to be aware of the specific orientation metadata; it simply forwards the video frames to the WebRTC clients. 3. **WebRTC Client**: The WebRTC client (browser) receives the video stream with orientation metadata. Modern browsers, such as Chrome and Firefox, have built-in support for processing this metadata and rendering the video correctly according to the specified orientation. By setting the orientation metadata at the server side (before streaming through Janus), you can ensure that the video is rendered properly in portrait mode without requiring additional transformations or adjustments on the client side. This approach can lead to a more seamless and efficient viewing experience. Thanks.

deekerman commented

Author

Owner

@mdevaev commented on GitHub (Mar 15, 2024):

Can you stop posting ChatGPT here? I have a strong desire to close this issue, because since you are so good at communicating with ChatGPT, then let it write the code for you. It is unlikely that you need our help in this case.

@mdevaev commented on GitHub (Mar 15, 2024): Can you stop posting ChatGPT here? I have a strong desire to close this issue, because since you are so good at communicating with ChatGPT, then let it write the code for you. It is unlikely that you need our help in this case.

deekerman commented

Author

Owner

@plia7 commented on GitHub (Mar 15, 2024):

Can you stop posting ChatGPT here? I have a strong desire to close this issue, because since you are so good at communicating with ChatGPT, then let it write the code for you. It is unlikely that you need our help in this case.

Sorry, I'm done with it.
Just one thing, for this new web ui portrait flip switch, is it possible to expose it please to the api also so I can add a shortcut trigger when my screen flips to portrait mode, it automatically sends a pikvm api call to flip the orientation? (say mode parameter value 0 is landscape and 1 is portrait). I won't bother anymore :)

Thank you.

@plia7 commented on GitHub (Mar 15, 2024): > Can you stop posting ChatGPT here? I have a strong desire to close this issue, because since you are so good at communicating with ChatGPT, then let it write the code for you. It is unlikely that you need our help in this case. Sorry, I'm done with it. Just one thing, for this new web ui portrait flip switch, is it possible to expose it please to the api also so I can add a shortcut trigger when my screen flips to portrait mode, it automatically sends a pikvm api call to flip the orientation? (say mode parameter value 0 is landscape and 1 is portrait). I won't bother anymore :) ![image](https://github.com/pikvm/pikvm/assets/134864072/3ea2fc61-2db6-4d34-b0e0-83a78e6dd27a) Thank you.

deekerman commented

Author

Owner

@mdevaev commented on GitHub (Mar 15, 2024):

We can't detect screen orientation automatically.

@mdevaev commented on GitHub (Mar 15, 2024): We can't detect screen orientation automatically.

deekerman commented

Author

Owner

@plia7 commented on GitHub (Mar 15, 2024):

We can't detect screen orientation automatically.

Sorry, what I meant to say is my own connecting pc will have it's own program running in the background that can detect the screen orientation change in my connecting pc and will send to the pikvm api to switch the stream orientation accordingly.

Thanks.

@plia7 commented on GitHub (Mar 15, 2024): > We can't detect screen orientation automatically. Sorry, what I meant to say is my own connecting pc will have it's own program running in the background that can detect the screen orientation change in my connecting pc and will send to the pikvm api to switch the stream orientation accordingly. Thanks.

deekerman commented

Author

Owner

@mdevaev commented on GitHub (Mar 17, 2024):

It's done, but since this is a client-side feature, we have no API on the server side to change orientation.

@mdevaev commented on GitHub (Mar 17, 2024): It's done, but since this is a client-side feature, we have no API on the server side to change orientation. ![image](https://github.com/pikvm/pikvm/assets/416259/b2f5d1ad-e395-4c2f-a102-eb9b0aa5ddfd)

deekerman commented

Author

Owner

@plia7 commented on GitHub (Mar 17, 2024):

It's done, but since this is a client-side feature, we have no API on the server side to change orientation.

Thank you. Given that it's done as a client-side feature, is it possible to handle it in addition in window orientationchange so when you detect a change there you pass it to the streamer (you can get the info from screen.orientation.type)?

I tried to register it in stream.js for testing purpose as follows:

$("stream-window").show_hook = () => __applyState(__state);
$("stream-window").close_hook = () => __applyState(null);

window.addEventListener("orientationchange", function() {
			var orientationType = screen.orientation.type;
			if (__streamer.getMode() === "janus") { // Right now it's working only for H.264
				tools.storage.setInt("stream.orient", 90);
				if (__streamer.getOrientation() != 90) {
					__resetStream();
				}
			}
}

But it's not being fired when I change the display orientation. Do you know why? (I suppose something special about registering the event for regular window versus stream-window) Or maybe because it's already registered by it's parent window container:

I do see that you register this event already inside wm.js and it it being fired there when the display orientation changes - But I'm not sure how to access the streamer object from the windows manager class - Can you use the tools object from wm.js to actually simulate a click in the system menu for the right orientation and then click reset stream? Or maybe it can be consolidated somehow (session.js)? (I guess if we can get the orientationchange event to fire from stream.js that will be the easiest way)

Thanks again.

@plia7 commented on GitHub (Mar 17, 2024): > It's done, but since this is a client-side feature, we have no API on the server side to change orientation. > Thank you. Given that it's done as a client-side feature, is it possible to handle it in addition in window orientationchange so when you detect a change there you pass it to the streamer (you can get the info from screen.orientation.type)? I tried to register it in stream.js for testing purpose as follows: ``` $("stream-window").show_hook = () => __applyState(__state); $("stream-window").close_hook = () => __applyState(null); window.addEventListener("orientationchange", function() { var orientationType = screen.orientation.type; if (__streamer.getMode() === "janus") { // Right now it's working only for H.264 tools.storage.setInt("stream.orient", 90); if (__streamer.getOrientation() != 90) { __resetStream(); } } } ``` But it's not being fired when I change the display orientation. Do you know why? (I suppose something special about registering the event for regular window versus stream-window) Or maybe because it's already registered by it's parent window container: I do see that you register this event already inside wm.js and it it being fired there when the display orientation changes - But I'm not sure how to access the streamer object from the windows manager class - Can you use the tools object from wm.js to actually simulate a click in the system menu for the right orientation and then click reset stream? Or maybe it can be consolidated somehow (session.js)? (I guess if we can get the orientationchange event to fire from stream.js that will be the easiest way) Thanks again.

deekerman commented

Author

Owner

@mdevaev commented on GitHub (Mar 17, 2024):

I don't know why this might not work. And for my taste, this is not so necessary because it is always easy to press the button to explicitly specify the orientation. Especially considering that mobile devices support is limited.

@mdevaev commented on GitHub (Mar 17, 2024): I don't know why this might not work. And for my taste, this is not so necessary because it is always easy to press the button to explicitly specify the orientation. Especially considering that mobile devices support is limited.

deekerman commented

Author

Owner

@plia7 commented on GitHub (Mar 17, 2024):

I don't know why this might not work. And for my taste, this is not so necessary because it is always easy to press the button to explicitly specify the orientation. Especially considering that mobile devices support is limited.

This is mostly to allow displays that have an auto pivot/rotate function when you physically rotate the display, it changes automatically the display orientation and that fires into the browser orientationchange function so it's a shame not to take advantage of that given that the hook for it already exists.

I also tried to register it for the stream-window element but it still didn't fire (I put the breakpoint on the first line inside the function):

$("stream-window").addEventListener("orientationchange", function() {
        var orientationType = screen.orientation.type;
        if (__streamer.getMode() === "janus") { // Right now it's working only for H.264
            tools.storage.setInt("stream.orient", 90);
            if (__streamer.getOrientation() != 90) {
                __resetStream();
            }
        }
    });

Update: Ok, I was able to get it fired. orientationchange is deprecated and what you need to use instead is:

	  screen.orientation.addEventListener("change", (event) => {
		const type = event.target.type;
		const angle = event.target.angle;
		console.log(`ScreenOrientation change: ${type}, ${angle} degrees.`);
	  });

I made the change locally for myself, but I think it's a good change for everybody, I'll let you decide :)

Here is the updated code:

		var __changeOrientation = function changeOrientation(angle) {
			let orient = parseInt(angle);
			if (__streamer.getMode() === "janus") {
				tools.storage.setInt("stream.orient", orient);
				if (__streamer.getOrientation() !== orient) {
					__resetStream();
				}
			}
		};

		// Not getInt() because of radio is a string container.
		// Also don't reset Janus at class init.
		tools.radio.clickValue("stream-orient-radio", tools.storage.get("stream.orient", 0));
		tools.radio.setOnClick("stream-orient-radio", () => {
			__changeOrientation(tools.radio.getValue("stream-orient-radio"));
		}, false);
		screen.orientation.addEventListener("change", (event) => __changeOrientation(event.target.angle));

Thanks.

@plia7 commented on GitHub (Mar 17, 2024): > I don't know why this might not work. And for my taste, this is not so necessary because it is always easy to press the button to explicitly specify the orientation. Especially considering that mobile devices support is limited. This is mostly to allow displays that have an auto pivot/rotate function when you physically rotate the display, it changes automatically the display orientation and that fires into the browser orientationchange function so it's a shame not to take advantage of that given that the hook for it already exists. I also tried to register it for the stream-window element but it still didn't fire (I put the breakpoint on the first line inside the function): ``` $("stream-window").addEventListener("orientationchange", function() { var orientationType = screen.orientation.type; if (__streamer.getMode() === "janus") { // Right now it's working only for H.264 tools.storage.setInt("stream.orient", 90); if (__streamer.getOrientation() != 90) { __resetStream(); } } }); ``` Update: Ok, I was able to get it fired. orientationchange is deprecated and what you need to use instead is: screen.orientation.addEventListener("change", (event) => { const type = event.target.type; const angle = event.target.angle; console.log(`ScreenOrientation change: ${type}, ${angle} degrees.`); }); I made the change locally for myself, but I think it's a good change for everybody, I'll let you decide :) Here is the updated code: ``` var __changeOrientation = function changeOrientation(angle) { let orient = parseInt(angle); if (__streamer.getMode() === "janus") { tools.storage.setInt("stream.orient", orient); if (__streamer.getOrientation() !== orient) { __resetStream(); } } }; // Not getInt() because of radio is a string container. // Also don't reset Janus at class init. tools.radio.clickValue("stream-orient-radio", tools.storage.get("stream.orient", 0)); tools.radio.setOnClick("stream-orient-radio", () => { __changeOrientation(tools.radio.getValue("stream-orient-radio")); }, false); screen.orientation.addEventListener("change", (event) => __changeOrientation(event.target.angle)); ``` Thanks.

deekerman commented

Author

Owner

@mdevaev commented on GitHub (Mar 18, 2024):

I really don't think anyone else would need it. The application of this is too specific.

@mdevaev commented on GitHub (Mar 18, 2024): I really don't think anyone else would need it. The application of this is too specific.

deekerman commented