Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pop out clock #1213

Open
Haavard15 opened this issue Sep 10, 2024 · 5 comments
Open

Pop out clock #1213

Haavard15 opened this issue Sep 10, 2024 · 5 comments
Labels
feature New feature or request

Comments

@Haavard15
Copy link

Haavard15 commented Sep 10, 2024

I made this script for another project and I would love to have it in ontime as well:

It utilizes the built in pop-out window for video in HTML5, creates a blob from a canvas and populates the video feed with it

Screenshot 2024-09-10 at 20 57 17

It works on top of anything on the desktop, also powerpoint notes:

Screenshot 2024-09-10 at 21 21 54

I made a gist from parts of my own code here:

https://gist.github.com/Haavard15/ea283e818de82937b3d7ff195b5e7592

I put 0 effort into design/formatting/whatever, I think you will do a better job at that than I would. Maybe you can even use an library like html2canvas to make a carbon copy of the webpage and populate it from that?

I don't feel comfortable messing about in your codebase, or else I would happily do it myself :-)

@RasterboxOff
Copy link
Collaborator

Hey @Haavard15
I'm not sure if it'll be a feature that will appear in Ontime, but I can let you know that the very stable and convenient tool Vingester can do exactly that and even override the CSS, if you're going for a different style on the timer.
It is my go to way to display any Ontime view on a display.
Check it out, I think this will cover your needs and can also be used on any computer on the network, which keeps the Ontime server separate from the PPT machine as well.

@Haavard15
Copy link
Author

Hey @Haavard15 I'm not sure if it'll be a feature that will appear in Ontime, but I can let you know that the very stable and convenient tool Vingester can do exactly that and even override the CSS, if you're going for a different style on the timer. It is my go to way to display any Ontime view on a display. Check it out, I think this will cover your needs and can also be used on any computer on the network, which keeps the Ontime server separate from the PPT machine as well.

The code is running in HTML/Frontend and the idea is to keep the ontime server separate like you said.

Vingester does indeed seem to do the trick with the "pin" function, but it would be neater to have something you dont have to install on the PPT PC?

This is really only for when you in a pinch have 1 too little DVE layer on an ATEM, 1 too few resource on an Analog Way or a layer short on a Barco.

I'm not really worried about styling, I like the ontime timer like it is :)

@cpvalente
Copy link
Owner

Hi @Haavard15 , thank you for this.
I hope that my lack of reply is not discouraged to you, and I am thankful for the time you put into the work and in reaching out.

I postponed replying because I honestly do not understand what this entails.

However, if I understand correctly, there is currently no way of embedding Ontime in powerpoint / keynote, and there would be with this feature. Is this correct? If so, lets do it!

Silly questions:

  • is this something that we need to do in the browser, or could we do it in the server? and shold we?=
  • what is the video feed like? is it a graphic display? ie: do we care about styling here?

Even if we cant fit it into the app, Ontime ships with a demo page, we could add this there which would make the code simpler and also remove weight from the app

@Haavard15
Copy link
Author

No worries, I know how the days can be :-)

I put up a live demo for you to test:

https://multicam.media/examples/videopip.html

is this something that we need to do in the browser, or could we do it in the server? and shold we?

The nice thing about this implementation is that it is browser native, so it will work from a browser window as well as it can be called from the electron frontend. But as for the implementation it is a frontend/HTML feature. How we want to generate content for it is really up to us.

For the PiP feed to work, though, the video HTML tag needs to always exist so it doesnt dissapear when you switch between views. I'm not big on React myself, but I think it should be possible to make a global element somewhere? The element doesn't have to be visible, I think you can set in css "display: none".

what is the video feed like? is it a graphic display? ie: do we care about styling here?

In the demo I am drawing in a HTML Canvas, which was for me the easiest way to get a blob, but I think there are many possible ways to render this. I think 99% of cases you want a really simple clock for the presenter, so at least to start the design of the "minimal timer" is probably enough.

@cpvalente
Copy link
Owner

Thank you @Haavard15

I believe this can be a good option, but I am unsure on the UX here.
Where do the user activates this from?
What options are available?

I assume we would need some configuration similar to the /minimal view

@Haavard15 , would you be willing to create a PR with a proposal to implement this in Ontime? We can just add a button wherever is convenient to begin with until we lock in the UX. If you would like, you can come find me on our new discord channel and we can discuss

@RasterboxOff could you please advise on the UX here?

@cpvalente cpvalente added the feature New feature or request label Sep 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants