Blog/content/publications/sgmapf/runaway_planning/animations/_index.md

---
title: Runaway Planning Animations
---

{{< dummy >}}

<h2>
Please enter a number in the field below, and press enter. The corresponding
dataset will be loaded.
</h2>

<input type="number" id="resultId" min="0" max="99" default="0" />
<input type="submit" id="showResultButton" value="Load dataset" />


<h3>
If the video does not load for a given algorithm, that means it failed to
compute a solution (within the 10s timeout).
</h3>

<div>
    <p>Raw CBS</p>
    <video id="cbs" controls width="560" class="videoTag">
        <source type="video/mp4" />
    </video>
</div>

<div>
    <p>Scheduler + CBS</p>
<video id="scheduling_cbs" controls width="560" class="videoTag">
    <source type="video/mp4" />
</video>
</div>

<div>
    <p>Subproblems + Scheduler + CBS</p>
    <video id="subproblem_scheduling_cbs" controls width="560" class="videoTag">
        <source type="video/mp4" />
    </video>
</div>

<script charset="utf-8">
    var idField = document.getElementById("resultId");
    var button = document.getElementById("showResultButton");
    button.addEventListener("click", () => show_all_videos(idField.value)); 
    idField.addEventListener("keypress", (event) => event.key === "Enter" && button.click());

    function show_one_video(videoDiv, n) {
        const videoLoc = "./" + videoDiv.id + "/from_generated_" + n + ".mp4";
        videoDiv.children[0].src = videoLoc;
        videoDiv.load();
        videoDiv.play();
    }

    function show_all_videos(n) {
        const videoDivs = document.getElementsByClassName("videoTag")
        for (var i = 0; i < videoDivs.length; i++) {
            show_one_video(videoDivs.item(i), n);
        }

    }

    if (n != null) {
        show_all_videos(n);
    }
</script>
{{< /dummy >}}