[FEATURE] Add a digital clock on each slide of the html output

[gsong-math]

Description

Would it be possible to add a digital clock on each slide of the html output? Could this be an option on the reveal.js template?

Screenshots

No response

Additional information

No response

[jeertmans]

Hello, I am not sure to visualize what you are proposing. Could you provide an example image or else?

[gsong-math]

Sure, it is something like this.

A digital clock displays the current time in the corner of each slide.

[jeertmans]

Well you can use a custom template for RevealJS (see CLI reference), but I can see if I find a nice component to add to the default template. Do you have an exemple html code that would render this clock?

Did you try the speaker mode when pressing S?

[gsong-math]

Thanks a lot for the response. Yes, the speaker mode displays the time. It might still be sweet to have a time clock on the slides. Sometimes, the presenter might need to walk away from the computer and look at the projected screen.

I am sorry that I am not good at html coding and do not have an existing code for rendering the clock.

[jeertmans]

I will try to write an example tutorial to show how to modify the template for that purpose.

In the meantime, you could do that yourself, see this page: http://www.java2s.com/Tutorials/Javascript/Javascript_Data_Type_How_to/Date_Clock/Create_auto_refresh_clock.htm.

You can create a new file from https://github.com/jeertmans/manim-slides/blob/main/manim_slides/templates/revealjs.html, and add the code to render the clock (not sure how to add it on top of every slide though).

Then, render using manim-slides convert ... --use-template <PATH-TO-YOUR-TEMPLATE-FILE>.

[gsong-math]

Thanks a lot for the information. I guess I could use the provided information to render the clock in html.

The issue is how to add it on top of every slide. In the reveal.js template, we could tweak it to add some extra things like progress bar, page number to every slide. I was just wondering whether it would also be possible to add a clock there.

[gsong-math]

I made it work through manually inserting the following script in the converted html file.

Would it be possible to modify the template file for this purpose? It is a little tedious to edit the html file afterwards.

 <!-- Add dynamic content to each section dynamically using JavaScript -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var revealContainer = document.querySelector('.reveal');
    // Append dynamic content to each section
    var sections = revealContainer.querySelectorAll('.slides > section');
    sections.forEach(function (section) {
      // Create a new clock container
      var clockContainer = document.createElement('div');
      clockContainer.className = 'clock';

      // Append the new clock container to the section
      section.appendChild(clockContainer);
    });

    // Function to update the clock content
    function updateClock() {
      var now = new Date();
      var hours = now.getHours();
      var minutes = now.getMinutes();
      var seconds = now.getSeconds();

      // Format the time as HH:MM:SS
      var timeString = padZero(hours) + ":" + padZero(minutes) + ":" + padZero(seconds);

      // Update the content of all clock containers
      var clockContainers = document.querySelectorAll('.clock');
      clockContainers.forEach(function (container) {
        container.innerText = timeString;
      });
    }

    // Function to pad zero for single-digit numbers
    function padZero(number) {
      return number < 10 ? "0" + number : number;
    }

    // Update the clock every second
    setInterval(updateClock, 1000);

    // Register a reveal.js event to update the clock on each slide change
    Reveal.addEventListener('slidechanged', function (event) {
      updateClock();
    });

    // Initial update
    updateClock();
  });
</script>

<style>
      .clock {
        position: fixed;
        bottom: 10px;
        left: 10px;
        font-size: 24px;
        font-family: "Arial", sans-serif;
        color: #333;
      }

      /* control the position of slides */
      .reveal .slides > section.present, .reveal .slides > section > section.present {
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        position: absolute !important;
        top: 0 !important;
      }
      section > h1 {
        position: absolute !important;
        top: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: 0 !important;
        right: 0 !important;
      }

      .print-pdf .reveal .slides > section.present, .print-pdf .reveal .slides > section > section.present {
        min-height: 770px !important;
        position: relative !important;
      }
</style>

[gsong-math]

Never mind. I figured it out. I just need to add the script into the template html file. It works perfectly now.

Thanks a lot for the help.

[jeertmans]

Nice! Can you share the template here please?

[gsong-math]

Sure, here is the tweaked template to include a clock at the bottom of each slide.