cobalt/demos/content/animated-webp-performance-demo/index.html - cobalt - Git at Google

 <!DOCTYPE html>
 <!--
  | Demo to help test animated webp performance metrics.
  | We set up decoding speed tracking on a regular interval, and make a
  | customizeable page with varying number of decoded images.
  -->
 <html>

 <head>
   <title>WebP performance test</title>
   <style type="text/css">

     body {
       background-color: white;
     }
     .image {
       width: 100px;
       height: 100px;
       background-size: contain;
       display: inline-block;
     }
     .highlight {
       background-color: rgb(0, 255, 0);
     }
   </style>
   <script type="text/javascript">
     window.onload = () => {
       var size = 100; // Default pixel size of rendered images
       var search = window.location.search;
       var num = 1; // Default number of decoded images

       // Grab URL search args
       var matches = search.matchAll(/num=([0-9]+)/gm);
       for (const match of matches) {
         num = match[1]
       }
       var matches = search.matchAll(/size=([0-9]+)/gm);
       for (const match of matches) {
         size = match[1]
       }

       // Insert images into DOM tree
       var layer = document.getElementById('layer');
       function addImage(img, size) {
         var el = document.createElement('span');
         console.log(`adding ${img}`);
         el.classList.add('image');
         el.style['backgroundImage'] = `url(${img}.webp)`;
         el.style['width'] = `${size}px`;
         el.style['height'] = `${size}px`;
         layer.appendChild(el)
         console.log("Added image");
       }
       var images = [
         "1_fan","2_heart","3_cry","4_clap", "5_egg",
         "6_party","7_rofl","8_melt","9_explode","10_turtle"
       ]
       for(i = 0; i< num; i++)  {
         (function(i) {
           var img = images[i % 10];
           window.setTimeout( () => {  addImage(img,size) } , 1 + i*40);
         })(i)
       }

       // Set up function retrieve CVals.
       var getCVal = function(name) { return 0 }
       if (typeof h5vcc != "undefined" && typeof h5vcc.cVal != "undefined") {
         getCVal = function(name) {
           return h5vcc.cVal.getValue(name);
         }
       }

       // Set up periodic stats tracking loop.
       var last_frames = 0;
       var last_time = performance.now();
       function updateStats() {
         var current_time = performance.now();
         var time_delta_milliseconds = current_time - last_time;
         var decoded_frames =
           getCVal('Count.MainWebModule.AnimatedImage.DecodedFrames');
         var underruns = getCVal('Count.MainWebModule.AnimatedImage.DecodingUnderruns');
         var overruns = getCVal('Count.MainWebModule.AnimatedImage.DecodingOverruns');
         var newly_decoded_frames = decoded_frames - last_frames;
         var fps = parseInt( newly_decoded_frames * 100 / (time_delta_milliseconds / 1000.0)) / 100;
         document.getElementById('Active').textContent =
           getCVal('Count.MainWebModule.AnimatedImage.Active');
         document.getElementById('DecodedFrames').textContent = decoded_frames;
         document.getElementById('DecodingUnderruns').textContent = underruns
         document.getElementById('DecodingOverruns').textContent = overruns;
         document.getElementById('DecodedFPS').textContent = fps;
         document.getElementById('UnderrunPercent').textContent =  parseInt(underruns / decoded_frames * 100.0);
         document.getElementById('OverrunPercent').textContent =  parseInt(overruns / decoded_frames * 100.0);

         last_frames = decoded_frames;
         last_time = current_time;
       }
       window.setInterval(updateStats, 1000);

       // Set up keyboard menu nav
       var menu = document.getElementById('menu').children;
       var index = 0;
       function refresh() {
         var textBox = document.getElementById('nav');
         for (let i = 0; i < menu.length; i++) {
           if (i == index) {
             menu[i].classList.add('highlight');
           } else {
             menu[i].classList.remove('highlight');
           }
         }
       }
       document.addEventListener('keydown', function (e) {
         // left, up, android left, up
         if ([37, 38, 32782, 32780].includes(e.keyCode)) {
           index -= 1;
         //right, down, android right, down
         } else if ([39, 40, 32781, 32783].includes(e.keyCode)) {
           index += 1;
         // enter, android enter
         } else if ([13, 32768].includes(e.keyCode)) {
           var el = document.getElementById('menu').children[index];
           window.location = el.firstChild.href;
         }
         index = (index + menu.length) % menu.length;
         refresh();
       });
       refresh();
     }
   </script>
 </head>

 <body>
   <div class="background"></div>
   <div id="menu">
     <span><a href="?size=100&amp;num=1">1 small image</a></span>
     <span><a href="?size=300&amp;num=1">1 large image</a></span>
     <span><a href="?size=100&amp;num=2">2 small images</a></span>
     <span><a href="?size=300&amp;num=2">2 large image</a></span>
     <span><a href="?size=100&amp;num=3">3 small images</a></span>
     <span><a href="?size=300&amp;num=3">3 large images</a></span>
     <span><a href="?size=100&amp;num=4">4 small images</a></span>
     <span><a href="?size=300&amp;num=4">4 large images</a></span>
     <div></div>
     <span><a href="?size=100&amp;num=4">5 small images</a></span>
     <span><a href="?size=300&amp;num=4">5 large images</a></span>
     <span><a href="?size=100&amp;num=6">6 small images</a></span>
     <span><a href="?size=300&amp;num=6">6 large images</a></span>
     <span><a href="?size=100&amp;num=8">8 small images</a></span>
     <span><a href="?size=300&amp;num=8">8 large images</a></span>
     <span><a href="?size=100&amp;num=10">10 small images</a></span>
     <span><a href="?size=300&amp;num=10">10 large images</a></span>
   </div>
   <div id="metrics">
     <div><span>Total images playing:</span><span id="Active"></span></div>
     <div><span>Total frames decoded:</span><span id="DecodedFrames"></span></div>
     <div><span>Total frames underrun:</span><span id="DecodingUnderruns"></span></div>
     <div><span>Total frames overrun:</span><span id="DecodingOverruns"></span></div>
     <div><span>Frames decoded per second:</span><span id="DecodedFPS"></span></div>
     <div><span>Underrun %:</span><span id="UnderrunPercent"></span>
       <span>Overrun %:</span><span id="OverrunPercent"></span></div>
   </div>

   <div class="layer" id="layer"></div>
 </body>

 </html>
	<!DOCTYPE html>
	<!--
	\| Demo to help test animated webp performance metrics.
	\| We set up decoding speed tracking on a regular interval, and make a
	\| customizeable page with varying number of decoded images.
	-->
	<html>

	<head>
	<title>WebP performance test</title>
	<style type="text/css">

	body {
	background-color: white;
	}
	.image {
	width: 100px;
	height: 100px;
	background-size: contain;
	display: inline-block;
	}
	.highlight {
	background-color: rgb(0, 255, 0);
	}
	</style>
	<script type="text/javascript">
	window.onload = () => {
	var size = 100; // Default pixel size of rendered images
	var search = window.location.search;
	var num = 1; // Default number of decoded images

	// Grab URL search args
	var matches = search.matchAll(/num=([0-9]+)/gm);
	for (const match of matches) {
	num = match[1]
	}
	var matches = search.matchAll(/size=([0-9]+)/gm);
	for (const match of matches) {
	size = match[1]
	}

	// Insert images into DOM tree
	var layer = document.getElementById('layer');
	function addImage(img, size) {
	var el = document.createElement('span');
	console.log(`adding ${img}`);
	el.classList.add('image');
	el.style['backgroundImage'] = `url(${img}.webp)`;
	el.style['width'] = `${size}px`;
	el.style['height'] = `${size}px`;
	layer.appendChild(el)
	console.log("Added image");
	}
	var images = [
	"1_fan","2_heart","3_cry","4_clap", "5_egg",
	"6_party","7_rofl","8_melt","9_explode","10_turtle"
	]
	for(i = 0; i< num; i++) {
	(function(i) {
	var img = images[i % 10];
	window.setTimeout( () => { addImage(img,size) } , 1 + i*40);
	})(i)
	}

	// Set up function retrieve CVals.
	var getCVal = function(name) { return 0 }
	if (typeof h5vcc != "undefined" && typeof h5vcc.cVal != "undefined") {
	getCVal = function(name) {
	return h5vcc.cVal.getValue(name);
	}
	}

	// Set up periodic stats tracking loop.
	var last_frames = 0;
	var last_time = performance.now();
	function updateStats() {
	var current_time = performance.now();
	var time_delta_milliseconds = current_time - last_time;
	var decoded_frames =
	getCVal('Count.MainWebModule.AnimatedImage.DecodedFrames');
	var underruns = getCVal('Count.MainWebModule.AnimatedImage.DecodingUnderruns');
	var overruns = getCVal('Count.MainWebModule.AnimatedImage.DecodingOverruns');
	var newly_decoded_frames = decoded_frames - last_frames;
	var fps = parseInt( newly_decoded_frames * 100 / (time_delta_milliseconds / 1000.0)) / 100;
	document.getElementById('Active').textContent =
	getCVal('Count.MainWebModule.AnimatedImage.Active');
	document.getElementById('DecodedFrames').textContent = decoded_frames;
	document.getElementById('DecodingUnderruns').textContent = underruns
	document.getElementById('DecodingOverruns').textContent = overruns;
	document.getElementById('DecodedFPS').textContent = fps;
	document.getElementById('UnderrunPercent').textContent = parseInt(underruns / decoded_frames * 100.0);
	document.getElementById('OverrunPercent').textContent = parseInt(overruns / decoded_frames * 100.0);

	last_frames = decoded_frames;
	last_time = current_time;
	}
	window.setInterval(updateStats, 1000);

	// Set up keyboard menu nav
	var menu = document.getElementById('menu').children;
	var index = 0;
	function refresh() {
	var textBox = document.getElementById('nav');
	for (let i = 0; i < menu.length; i++) {
	if (i == index) {
	menu[i].classList.add('highlight');
	} else {
	menu[i].classList.remove('highlight');
	}
	}
	}
	document.addEventListener('keydown', function (e) {
	// left, up, android left, up
	if ([37, 38, 32782, 32780].includes(e.keyCode)) {
	index -= 1;
	//right, down, android right, down
	} else if ([39, 40, 32781, 32783].includes(e.keyCode)) {
	index += 1;
	// enter, android enter
	} else if ([13, 32768].includes(e.keyCode)) {
	var el = document.getElementById('menu').children[index];
	window.location = el.firstChild.href;
	}
	index = (index + menu.length) % menu.length;
	refresh();
	});
	refresh();
	}
	</script>
	</head>

	<body>
	<div class="background"></div>
	<div id="menu">
	<span><a href="?size=100&num=1">1 small image</a></span>
	<span><a href="?size=300&num=1">1 large image</a></span>
	<span><a href="?size=100&num=2">2 small images</a></span>
	<span><a href="?size=300&num=2">2 large image</a></span>
	<span><a href="?size=100&num=3">3 small images</a></span>
	<span><a href="?size=300&num=3">3 large images</a></span>
	<span><a href="?size=100&num=4">4 small images</a></span>
	<span><a href="?size=300&num=4">4 large images</a></span>
	<div></div>
	<span><a href="?size=100&num=4">5 small images</a></span>
	<span><a href="?size=300&num=4">5 large images</a></span>
	<span><a href="?size=100&num=6">6 small images</a></span>
	<span><a href="?size=300&num=6">6 large images</a></span>
	<span><a href="?size=100&num=8">8 small images</a></span>
	<span><a href="?size=300&num=8">8 large images</a></span>
	<span><a href="?size=100&num=10">10 small images</a></span>
	<span><a href="?size=300&num=10">10 large images</a></span>
	</div>
	<div id="metrics">
	<div><span>Total images playing:</span><span id="Active"></span></div>
	<div><span>Total frames decoded:</span><span id="DecodedFrames"></span></div>
	<div><span>Total frames underrun:</span><span id="DecodingUnderruns"></span></div>
	<div><span>Total frames overrun:</span><span id="DecodingOverruns"></span></div>
	<div><span>Frames decoded per second:</span><span id="DecodedFPS"></span></div>
	<div><span>Underrun %:</span><span id="UnderrunPercent"></span>
	<span>Overrun %:</span><span id="OverrunPercent"></span></div>
	</div>

	<div class="layer" id="layer"></div>
	</body>

	</html>