behackl/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is a rough, hacked-together tool for creating "slide show"-like presentations
using the partial video files Manim renders for scene caching.
Setup


Put the slides.html into the directory containing the partial_movie_files_list.txt
for some scene you have rendered.
Start a web server serving the files from that directory (e.g., via docker by running
something like docker run --rm -v $(pwd):/usr/share/nginx/html:ro -p 8080:80 nginx.
Extra step: make sure that slides.html has read permissions, otherwise 403: chown a+r slides.html
Visit localhost:8080/slides.html in your browser.

Using the slideshow

Some keys are bound to actions:

Spacebar: Starts / Pauses an animation
Right arrow: advance to next animation
Left arrow: go back to previous animation
R: reload the partial_movie_files_list.txt and reset to the beginning


## slides.html
<!DOCTYPE html>
<head>
    <style>
        html {
            background-color: #000000;
            min-width: 100%;
            min-height: 100%;
        }
        #video {
            position: absolute;
            left: 0;
            top: 0;
            min-width: 100%;
            max-width: 100%;
            min-height: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body onkeydown="keyControl(event)">
    <video id="video"></video>
    <script>
        var video = document.getElementById('video');
        var source = document.createElement('source');

        var partial_videos = [];
        var ind = 0;
        video.appendChild(source);

        function changeVideoSource(index) {
            source.setAttribute('src', partial_videos[index]);
            ind = index;
            video.load();
        }

        async function loadPartialVideos() {
            let file_list = await fetch('./partial_movie_file_list.txt').then(res => res.text());
            file_list = file_list.match(/\/[0-9_]+.mp4/gi);
            partial_videos = file_list.map((entry) => "." + entry);
            changeVideoSource(0);
        }

        loadPartialVideos();

        async function keyControl(event){
            var x = event.keyCode;
            if (x == 32) { // 32 ... space
                if (video.paused)
                    video.play();
                else
                    video.pause();
            }
            if (x == 37) { // 37 ... arrow left
                ind = Math.max(ind-1, 0);
                changeVideoSource(ind);
                video.play();
            }
            if (x == 39) { // 39 ... right arrow
                ind = Math.min(ind+1, partial_videos.length - 1);
                changeVideoSource(ind);
                video.play();
            }
            if (x == 82) { // 82 ... r
                ind = 0;
                await loadPartialVideos();
                video.play();
            }
        }
    </script>
</body>
	<!DOCTYPE html>
	<head>
	<style>
	html {
	background-color: #000000;
	min-width: 100%;
	min-height: 100%;
	}
	#video {
	position: absolute;
	left: 0;
	top: 0;
	min-width: 100%;
	max-width: 100%;
	min-height: 100%;
	max-height: 100%;
	}
	</style>
	</head>
	<body onkeydown="keyControl(event)">
	<video id="video"></video>
	<script>
	var video = document.getElementById('video');
	var source = document.createElement('source');

	var partial_videos = [];
	var ind = 0;
	video.appendChild(source);

	function changeVideoSource(index) {
	source.setAttribute('src', partial_videos[index]);
	ind = index;
	video.load();
	}

	async function loadPartialVideos() {
	let file_list = await fetch('./partial_movie_file_list.txt').then(res => res.text());
	file_list = file_list.match(/\/[0-9_]+.mp4/gi);
	partial_videos = file_list.map((entry) => "." + entry);
	changeVideoSource(0);
	}

	loadPartialVideos();

	async function keyControl(event){
	var x = event.keyCode;
	if (x == 32) { // 32 ... space
	if (video.paused)
	video.play();
	else
	video.pause();
	}
	if (x == 37) { // 37 ... arrow left
	ind = Math.max(ind-1, 0);
	changeVideoSource(ind);
	video.play();
	}
	if (x == 39) { // 39 ... right arrow
	ind = Math.min(ind+1, partial_videos.length - 1);
	changeVideoSource(ind);
	video.play();
	}
	if (x == 82) { // 82 ... r
	ind = 0;
	await loadPartialVideos();
	video.play();
	}
	}
	</script>
	</body>