Esempio n. 1
0
/**
* Build a side-by-side table with the captured frames from each test
*
*/
function ScreenShotTable()
{
    global $tests;
    global $thumbSize;
    global $interval;
    global $maxCompare;
    global $color;
    global $bgcolor;
    global $supports60fps;
    $endTime = 'visual';
    if (array_key_exists('end', $_REQUEST) && strlen($_REQUEST['end'])) {
        $endTime = trim($_REQUEST['end']);
    }
    $filmstrip_end_time = 0;
    if (count($tests)) {
        // figure out how many columns there are
        $end = 0;
        foreach ($tests as &$test) {
            if ($test['video']['end'] > $end) {
                $end = $test['video']['end'];
            }
        }
        if (!defined('EMBED')) {
            echo '<br>';
        }
        echo '<form id="createForm" name="create" method="get" action="/video/create.php">';
        echo "<input type=\"hidden\" name=\"end\" value=\"{$endTime}\">";
        echo '<input type="hidden" name="tests" value="' . htmlspecialchars($_REQUEST['tests']) . '">';
        echo "<input type=\"hidden\" name=\"bg\" value=\"{$bgcolor}\">";
        echo "<input type=\"hidden\" name=\"text\" value=\"{$color}\">";
        if (isset($_REQUEST['labelHeight']) && is_numeric($_REQUEST['labelHeight'])) {
            echo '<input type="hidden" name="labelHeight" value="' . htmlspecialchars($_REQUEST['labelHeight']) . '">"';
        }
        if (isset($_REQUEST['timeHeight']) && is_numeric($_REQUEST['timeHeight'])) {
            echo '<input type="hidden" name="timeHeight" value="' . htmlspecialchars($_REQUEST['timeHeight']) . '">"';
        }
        echo '<table id="videoContainer"><tr>';
        // build a table with the labels
        echo '<td id="labelContainer"><table id="videoLabels"><tr><th>&nbsp;</th></tr>';
        foreach ($tests as &$test) {
            // figure out the height of this video
            $height = 100;
            if ($test['video']['width'] && $test['video']['height']) {
                if ($test['video']['width'] > $test['video']['height']) {
                    $height = 22 + (int) ((double) $thumbSize / (double) $test['video']['width'] * (double) $test['video']['height']);
                } else {
                    $height = 22 + $thumbSize;
                }
            }
            $break = '';
            if (!strpos($test['name'], ' ')) {
                $break = ' style="word-break: break-all;"';
            }
            echo "<tr width=10% height={$height}px ><td{$break} class=\"pagelinks\">";
            $name = urlencode($test['name']);
            $cached = 0;
            if ($test['cached']) {
                $cached = 1;
            }
            // Print the index outside of the link tag
            echo $test['index'] . ': ';
            if (!defined('EMBED')) {
                $cached = '';
                if ($test['cached']) {
                    $cached = 'cached/';
                }
                if (FRIENDLY_URLS) {
                    $href = "/result/{$test['id']}/{$test['run']}/details/{$cached}";
                } else {
                    $href = "/details.php?test={$test['id']}&run={$test['run']}&cached={$test['cached']}";
                }
                echo "<a class=\"pagelink\" id=\"label_{$test['id']}\" href=\"{$href}\">" . WrapableString(htmlspecialchars($test['name'])) . '</a>';
            } else {
                echo WrapableString(htmlspecialchars($test['name']));
            }
            // Print out a link to edit the test
            echo '<br/>';
            echo '<a href="#" class="editLabel" data-test-guid="' . $test['id'] . '" data-current-label="' . htmlentities($test['name']) . '">';
            if (class_exists("SQLite3")) {
                echo '(Edit)';
            }
            echo '</a>';
            echo "</td></tr>\n";
        }
        echo '</table></td>';
        // the actual video frames
        echo '<td><div id="videoDiv"><table id="video"><thead><tr>';
        $filmstrip_end_time = ceil($end / $interval) * $interval;
        $decimals = $interval >= 100 ? 1 : 3;
        $frameCount = 0;
        $ms = 0;
        while ($ms < $filmstrip_end_time) {
            $ms = $frameCount * $interval;
            echo '<th>' . number_format((double) $ms / 1000.0, $decimals) . 's</th>';
            $frameCount++;
        }
        echo "</tr></thead><tbody>\n";
        $firstFrame = 0;
        $maxThumbWidth = 0;
        foreach ($tests as &$test) {
            $aft = (int) $test['aft'] / 100;
            // figure out the height of the image
            $height = 0;
            $width = $thumbSize;
            if ($test['video']['width'] && $test['video']['height']) {
                if ($test['video']['width'] > $test['video']['height']) {
                    $width = $thumbSize;
                    $height = (int) ((double) $thumbSize / (double) $test['video']['width'] * (double) $test['video']['height']);
                } else {
                    $height = $thumbSize;
                    $width = (int) ((double) $thumbSize / (double) $test['video']['height'] * (double) $test['video']['width']);
                }
            }
            $maxThumbWidth = max($maxThumbWidth, $width);
            echo "<tr>";
            $testEnd = ceil($test['video']['end'] / $interval) * $interval;
            $lastThumb = null;
            $frameCount = 0;
            $progress = null;
            $ms = 0;
            while ($ms < $filmstrip_end_time) {
                $ms = $frameCount * $interval;
                // find the closest video frame <= the target time
                $frame_ms = null;
                foreach ($test['video']['frames'] as $frameTime => $file) {
                    if ($frameTime <= $ms && (!isset($frame_ms) || $frameTime > $frame_ms)) {
                        $frame_ms = $frameTime;
                    }
                }
                $path = null;
                if (isset($frame_ms)) {
                    $path = $test['video']['frames'][$frame_ms];
                }
                if (array_key_exists('frame_progress', $test['video']) && array_key_exists($frame_ms, $test['video']['frame_progress'])) {
                    $progress = $test['video']['frame_progress'][$frame_ms];
                }
                if (!isset($lastThumb)) {
                    $lastThumb = $path;
                }
                echo '<td>';
                if ($ms <= $testEnd) {
                    $cached = '';
                    if ($test['cached']) {
                        $cached = '_cached';
                    }
                    $imgPath = GetTestPath($test['id']) . "/video_{$test['run']}{$cached}/{$path}";
                    echo "<a href=\"/{$imgPath}\">";
                    echo "<img title=\"" . htmlspecialchars($test['name']) . "\"";
                    $class = 'thumb';
                    if ($lastThumb != $path) {
                        if (!$firstFrame || $frameCount < $firstFrame) {
                            $firstFrame = $frameCount;
                        }
                        $class = 'thumbChanged';
                    }
                    echo " class=\"{$class}\"";
                    echo " width=\"{$width}\"";
                    if ($height) {
                        echo " height=\"{$height}\"";
                    }
                    echo " src=\"/thumbnail.php?test={$test['id']}&fit={$thumbSize}&file=video_{$test['run']}{$cached}/{$path}\"></a>";
                    if (isset($progress)) {
                        echo "<br>{$progress}%";
                    }
                    $lastThumb = $path;
                }
                $frameCount++;
                echo '</td>';
            }
            echo "</tr>\n";
        }
        echo "</tr>\n";
        // end of the table
        echo "</tbody></table></div>\n";
        // end of the container table
        echo "</td></tr></table>\n";
        echo "<div id=\"image\">";
        echo "<a id=\"export\" class=\"pagelink\" href=\"filmstrip.php?tests={$_REQUEST['tests']}&thumbSize={$thumbSize}&ival={$interval}&end={$endTime}&text={$color}&bg={$bgcolor}\">Export filmstrip as an image...</a>";
        echo "</div>";
        echo '<div id="bottom"><input type="checkbox" name="slow" value="1"> Slow Motion<br><br>';
        echo "<input id=\"SubmitBtn\" type=\"submit\" value=\"Create Video\">";
        echo '<br><br><a class="pagelink" href="javascript:ShowAdvanced()">Advanced customization options...</a>';
        echo "</div></form>";
        if (!defined('EMBED')) {
            ?>
        <div id="layout">
            <form id="layoutForm" name="layout" method="get" action="/video/compare.php">
            <?php 
            echo "<input type=\"hidden\" name=\"tests\" value=\"{$_REQUEST['tests']}\">\n";
            ?>
                <table id="layoutTable">
                    <tr><th>Thumbnail Size</th><th>Thumbnail Interval</th><th>Comparison End Point</th></th></tr>
                    <?php 
            // fill in the thumbnail size selection
            echo "<tr><td>";
            $checked = '';
            if ($thumbSize <= 100) {
                $checked = ' checked=checked';
            }
            echo "<input type=\"radio\" name=\"thumbSize\" value=\"100\"{$checked} onclick=\"this.form.submit();\"> Small<br>";
            $checked = '';
            if ($thumbSize <= 150 && $thumbSize > 100) {
                $checked = ' checked=checked';
            }
            echo "<input type=\"radio\" name=\"thumbSize\" value=\"150\"{$checked} onclick=\"this.form.submit();\"> Medium<br>";
            $checked = '';
            if ($thumbSize > 150) {
                $checked = ' checked=checked';
            }
            echo "<input type=\"radio\" name=\"thumbSize\" value=\"200\"{$checked} onclick=\"this.form.submit();\"> Large";
            echo "</td>";
            // fill in the interval selection
            echo "<td>";
            if ($supports60fps) {
                $checked = '';
                if ($interval < 100) {
                    $checked = ' checked=checked';
                }
                echo "<input type=\"radio\" name=\"ival\" value=\"16.67\"{$checked} onclick=\"this.form.submit();\"> 60 FPS<br>";
            }
            $checked = '';
            if ($supports60fps && $interval == 100 || !$supports60fps && $interval < 500) {
                $checked = ' checked=checked';
            }
            echo "<input type=\"radio\" name=\"ival\" value=\"100\"{$checked} onclick=\"this.form.submit();\"> 0.1 sec<br>";
            $checked = '';
            if ($interval == 500) {
                $checked = ' checked=checked';
            }
            echo "<input type=\"radio\" name=\"ival\" value=\"500\"{$checked} onclick=\"this.form.submit();\"> 0.5 sec<br>";
            $checked = '';
            if ($interval == 1000) {
                $checked = ' checked=checked';
            }
            echo "<input type=\"radio\" name=\"ival\" value=\"1000\"{$checked} onclick=\"this.form.submit();\"> 1 sec<br>";
            $checked = '';
            if ($interval > 1000) {
                $checked = ' checked=checked';
            }
            echo "<input type=\"radio\" name=\"ival\" value=\"5000\"{$checked} onclick=\"this.form.submit();\"> 5 sec<br>";
            echo "</td>";
            // fill in the end-point selection
            echo "<td>";
            if (!strcasecmp($endTime, 'aft')) {
                $endTime = 'visual';
            }
            $checked = '';
            if (!strcasecmp($endTime, 'visual')) {
                $checked = ' checked=checked';
            }
            echo "<input type=\"radio\" name=\"end\" value=\"visual\"{$checked} onclick=\"this.form.submit();\"> Visually Complete<br>";
            $checked = '';
            if (!strcasecmp($endTime, 'all')) {
                $checked = ' checked=checked';
            }
            echo "<input type=\"radio\" name=\"end\" value=\"all\"{$checked} onclick=\"this.form.submit();\"> Last Change<br>";
            $checked = '';
            if (!strcasecmp($endTime, 'doc')) {
                $checked = ' checked=checked';
            }
            echo "<input type=\"radio\" name=\"end\" value=\"doc\"{$checked} onclick=\"this.form.submit();\"> Document Complete<br>";
            $checked = '';
            if (!strcasecmp($endTime, 'full')) {
                $checked = ' checked=checked';
            }
            echo "<input type=\"radio\" name=\"end\" value=\"full\"{$checked} onclick=\"this.form.submit();\"> Fully Loaded<br>";
            echo "</td></tr>";
            ?>
                </table>
            </form>
        </div>
        <?php 
            // display the waterfall if there is only one test
            $end_seconds = $filmstrip_end_time / 1000;
            if (count($tests) == 1) {
                $data = loadPageRunData($tests[0]['path'], $tests[0]['run'], $tests[0]['cached']);
                $secure = false;
                $haveLocations = false;
                $requests = getRequests($tests[0]['id'], $tests[0]['path'], $tests[0]['run'], $tests[0]['cached'], $secure, $haveLocations, true, true);
                InsertWaterfall('', $requests, $tests[0]['id'], $tests[0]['run'], $tests[0]['cached'], $data, "&max={$end_seconds}&mime=1&state=1&cpu=1&bw=1");
                echo '<br><br>';
            } else {
                $waterfalls = array();
                foreach ($tests as &$test) {
                    $waterfalls[] = array('id' => $test['id'], 'label' => $test['name'], 'run' => $test['run'], 'cached' => $test['cached']);
                }
                $labels = '';
                if (array_key_exists('hideurls', $_REQUEST) && $_REQUEST['hideurls']) {
                    $labels = '&labels=0';
                }
                InsertMultiWaterfall($waterfalls, "&max={$end_seconds}&mime=1&state=1&cpu=1&bw=1{$labels}");
            }
            ?>

        <div id="advanced" style="display:none;">
            <h3>Advanced Visual Comparison Configuration</h3>
            <p>There are additional customizations that can be done by modifying the <b>tests</b> parameter in the comparison URL directly.</p>
            <p>URL structure: ...compare.php?tests=&lt;Test 1 ID&gt;,&lt;Test 2 ID&gt;...</p>
            <p>The tests are displayed in the order listed and can be customized with options:</p>
            <table>
            <tr><td>Custom label</td><td>-l:&lt;label&gt;</td><td>110606_MJ_RZEY-l:Original</td></tr>
            <tr><td>Specific run</td><td>-r:&lt;run&gt;</td><td>110606_MJ_RZEY-r:3</td></tr>
            <tr><td>Repeat view</td><td>-c:1</td><td>110606_MJ_RZEY-c:1</td></tr>
            <tr><td>Specific End Time</td><td>-e:&lt;seconds&gt;</td><td>110606_MJ_RZEY-e:1.1</td></tr>
            </table>
            <br>
            <p>You can also customize the background and text color by passing HTML color values to <b>bg</b> and <b>text</b> query parameters.</p>
            <p>Examples:</p>
            <ul>
            <li><b>Customizing labels:</b>
            http://www.webpagetest.org/video/compare.php?tests=110606_MJ_RZEY-l:Original,110606_AE_RZN5-l:No+JS</li>
            <li><b>Compare First vs. Repeat view:</b>
            http://www.webpagetest.org/video/compare.php?tests=110606_MJ_RZEY, 110606_MJ_RZEY-c:1</li>
            <li><b>White background with black text:</b>
            http://www.webpagetest.org/video/compare.php?tests=110606_MJ_RZEY, 110606_MJ_RZEY-c:1&bg=ffffff&text=000000</li>
            </ul>
            <input id="advanced-ok" type=button class="simplemodal-close" value="OK">
        </div>
        <?php 
        }
        // EMBED
        // scroll the table to show the first thumbnail change
        $scrollPos = $firstFrame * ($maxThumbWidth + 6);
        ?>
        <script language="javascript">
            var thumbWidth = <?php 
        echo "{$maxThumbWidth};";
        ?>
            var scrollPos = <?php 
        echo "{$scrollPos};";
        ?>
            document.getElementById("videoDiv").scrollLeft = scrollPos;
        </script>
        <?php 
    }
}
Esempio n. 2
0
/**
* Build a side-by-side table with the captured frames from each test
* 
*/
function ScreenShotTable()
{
    global $tests;
    global $thumbSize;
    global $interval;
    global $maxCompare;
    if (count($tests)) {
        // figure out how many columns there are
        $end = 0;
        foreach ($tests as &$test) {
            if ($test['video']['end'] > $end) {
                $end = $test['video']['end'];
            }
        }
        echo '<br/><form id="createForm" name="create" method="get" action="/video/create.php" onsubmit="return ValidateInput(this)"><table id="videoContainer"><tr>';
        // build a table with the labels
        echo '<td id="labelContainer"><table id="videoLabels"><tr><th>&nbsp;</th></tr>';
        foreach ($tests as &$test) {
            // figure out the height of this video
            $height = 100;
            if ($test['video']['width'] && $test['video']['height']) {
                $height = 10 + (int) ((double) $thumbSize / (double) $test['video']['width'] * (double) $test['video']['height']);
            }
            $break = '';
            if (!strpos($test['name'], ' ')) {
                $break = ' style="word-break: break-all;"';
            }
            echo "<tr width=10% height={$height}px ><td{$break}>";
            $name = urlencode($test['name']);
            $cached = 0;
            if ($test['cached']) {
                $cached = 1;
            }
            echo "<input type=\"checkbox\" name=\"t[]\" value=\"{$test['id']},{$test['run']}," . $name . ",{$cached}\" checked=checked> ";
            $cached = '';
            if ($test['cached']) {
                $cached = 'cached/';
            }
            echo "<a class=\"pagelink\" href=\"/result/{$test['id']}/{$test['run']}/details/{$cached}\" target=\"_blank\">";
            echo WrapableString($test['name']);
            echo "</a></td></tr>\n";
        }
        echo '</table></td>';
        // the actual video frames
        echo '<td><div id="videoDiv"><table id="video"><thead><tr>';
        $skipped = $interval;
        $last = $end + $interval - 1;
        for ($frame = 0; $frame <= $last; $frame++) {
            $skipped++;
            if ($skipped >= $interval) {
                $skipped = 0;
                echo '<th>' . number_format((double) $frame / 10.0, 1) . 's</th>';
            }
        }
        echo "</tr></thead><tbody>\n";
        $firstFrame = 0;
        foreach ($tests as &$test) {
            // figure out the height of the image
            $height = 0;
            if ($test['video']['width'] && $test['video']['height']) {
                $height = (int) ((double) $thumbSize / (double) $test['video']['width'] * (double) $test['video']['height']);
            }
            echo "<tr>";
            $lastThumb = null;
            $frameCount = 0;
            $skipped = $interval;
            $last = $end + $interval - 1;
            for ($frame = 0; $frame <= $last; $frame++) {
                $path = $test['video']['frames'][$frame];
                if (isset($path)) {
                    $test['currentframe'] = $frame;
                } else {
                    if (isset($test['currentframe'])) {
                        $path = $test['video']['frames'][$test['currentframe']];
                    } else {
                        $path = $test['video']['frames'][0];
                    }
                }
                if (!$lastThumb) {
                    $lastThumb = $path;
                }
                $skipped++;
                if ($skipped >= $interval) {
                    $skipped = 0;
                    echo '<td>';
                    if ($frame - $interval + 1 <= $test['video']['end']) {
                        echo '';
                        $cached = '';
                        if ($test['cached']) {
                            $cached = '_cached';
                        }
                        $imgPath = GetTestPath($test['id']) . "/video_{$test['run']}{$cached}/{$path}";
                        echo "<a href=\"/{$imgPath}\">";
                        echo "<img title=\"{$test['name']}\"";
                        $class = 'thumb';
                        if ($lastThumb != $path) {
                            if (!$firstFrame || $frameCount < $firstFrame) {
                                $firstFrame = $frameCount;
                            }
                            $class = 'thumbChanged';
                        }
                        echo " class=\"{$class}\"";
                        echo " width=\"{$thumbSize}\"";
                        if ($height) {
                            echo " height=\"{$height}\"";
                        }
                        echo " src=\"/thumbnail.php?test={$test['id']}&width={$thumbSize}&file=video_{$test['run']}{$cached}/{$path}\"></a>";
                        $lastThumb = $path;
                    }
                    $frameCount++;
                    echo '</td>';
                }
            }
            echo "</tr>\n";
        }
        echo "</tr>\n";
        // end of the table
        echo "</tbody></table></div>\n";
        // end of the container table
        echo "</td></tr></table>\n";
        echo "<div id=\"image\">";
        $ival = $interval * 100;
        echo "<a class=\"pagelink\" href=\"filmstrip.php?tests={$_REQUEST['tests']}&thumbSize={$thumbSize}&ival={$ival}\">Export filmstrip as an image...</a>";
        echo "</div>";
        echo '<div id="bottom"><input type="checkbox" name="slow" value="1"> Slow Motion<br/><br/>';
        echo "Select up to {$maxCompare} tests and <input id=\"SubmitBtn\" type=\"submit\" value=\"Create Video\"></div>";
        echo "</form>";
        ?>
        <div id="layout">
            <form id="layoutForm" name="layout" method="get" action="/video/compare.php">
            <?php 
        echo "<input type=\"hidden\" name=\"tests\" value=\"{$_REQUEST['tests']}\" />\n";
        ?>
                <table id="layoutTable">
                    <tr><th>Thumbnail Size</th><th>Thumbnail Interval</th></tr>
                    <?php 
        // fill in the thumbnail size selection
        echo "<tr><td>";
        $checked = '';
        if ($thumbSize <= 100) {
            $checked = ' checked=checked';
        }
        echo "<input type=\"radio\" name=\"thumbSize\" value=\"100\"{$checked} onclick=\"this.form.submit();\"> Small<br>";
        $checked = '';
        if ($thumbSize <= 150 && $thumbSize > 100) {
            $checked = ' checked=checked';
        }
        echo "<input type=\"radio\" name=\"thumbSize\" value=\"150\"{$checked} onclick=\"this.form.submit();\"> Medium<br>";
        $checked = '';
        if ($thumbSize > 150) {
            $checked = ' checked=checked';
        }
        echo "<input type=\"radio\" name=\"thumbSize\" value=\"200\"{$checked} onclick=\"this.form.submit();\"> Large";
        echo "</td>";
        // fill in the interval selection
        echo "<td>";
        $checked = '';
        if ($interval <= 1) {
            $checked = ' checked=checked';
        }
        echo "<input type=\"radio\" name=\"ival\" value=\"100\"{$checked} onclick=\"this.form.submit();\"> 0.1 sec<br>";
        $checked = '';
        if ($interval == 5) {
            $checked = ' checked=checked';
        }
        echo "<input type=\"radio\" name=\"ival\" value=\"500\"{$checked} onclick=\"this.form.submit();\"> 0.5 sec<br>";
        $checked = '';
        if ($interval == 10) {
            $checked = ' checked=checked';
        }
        echo "<input type=\"radio\" name=\"ival\" value=\"1000\"{$checked} onclick=\"this.form.submit();\"> 1 sec<br>";
        $checked = '';
        if ($interval == 50) {
            $checked = ' checked=checked';
        }
        echo "<input type=\"radio\" name=\"ival\" value=\"5000\"{$checked} onclick=\"this.form.submit();\"> 5 sec<br>";
        echo "</td></tr>";
        ?>
                </table>
            </form>
        </div>
        <?php 
        // scroll the table to show the first thumbnail change
        $scrollPos = $firstFrame * ($thumbSize + 8);
        ?>
        <script language="javascript">
            var scrollPos = <?php 
        echo "{$scrollPos};";
        ?>
            document.getElementById("videoDiv").scrollLeft = scrollPos;
        </script>
        <?php 
        // display the waterfall if there is only one test
        if (count($tests) == 1) {
            ?>
        <div id="waterfall">
            <map name="waterfall_map">
            <?php 
            $data = loadPageRunData($tests[0]['path'], $tests[0]['run'], $tests[0]['cached']);
            $secure = false;
            $haveLocations = false;
            $requests = getRequests($tests[0]['id'], $tests[0]['path'], $tests[0]['run'], $tests[0]['cached'], $secure, $haveLocations, false);
            $options = array('id' => $tests[0]['id'], 'path' => $tests[0]['path'], 'run' => $tests[0]['run'], 'cached' => $tests[0]['cached'], 'cpu' => false);
            $map = drawWaterfall($tests[0]['url'], $requests, $data, true, $options);
            foreach ($map as $entry) {
                if ($entry['request'] !== NULL) {
                    $index = $entry['request'] + 1;
                    $title = $index . ': ' . $entry['url'];
                    echo '<area alt="' . $title . '" title="' . $title . '" shape=RECT coords="' . $entry['left'] . ',' . $entry['top'] . ',' . $entry['right'] . ',' . $entry['bottom'] . '">' . "\n";
                } else {
                    echo '<area alt="' . $entry['url'] . '" title="' . $entry['url'] . '" shape=RECT coords="' . $entry['left'] . ',' . $entry['top'] . ',' . $entry['right'] . ',' . $entry['bottom'] . '">' . "\n";
                }
            }
            ?>
            </map>
            
            <?php 
            echo "<img id=\"waterfallImage\" usemap=\"#waterfall_map\" border=\"0\" alt=\"Waterfall\" src=\"/waterfall.php?test={$tests[0]['id']}&run={$tests[0]['run']}&cached={$tests[0]['cached']}&cpu=0&bw=0\">";
            ?>
        </div>
        <?php 
        }
        echo '<br/><br/>';
    }
}