weisjohn · December 19, 2024 02:11
diff --git a/README.md b/README.md
diff --git a/apng.sh b/apng.sh
 #!/bin/bash

 python -c $'import SimpleHTTPServer;\nmap = SimpleHTTPServer.SimpleHTTPRequestHandler.extensions_map;\nmap[""] = "text/plain";\nfor key, value in map.items():\n\tmap[key] = value + ";charset=UTF-8";\nSimpleHTTPServer.test();' "8896" &
 server=$!
 rm -rf animation.png render_*

 # install from http://phantomjs.org/
 phantomjs index.js



 # rm $(ls render_* | head -n 3)
 rm $(ls render_* | tail -n 1)

 for file in `ls render_*`; do
    echo "converting $file"

    # black needs to be transparent
    convert $file -fuzz 80% -transparent white $file
 done

 # install from http://apngasm.sourceforge.net/
 apngasm animation.png render_*.png

 open http://localhost:8896/preview.apng.html
 sleep 5
 kill $server
diff --git a/index.js b/index.js
 var page = require('webpage').create();

 var count = 0, frames = 8, delay = 94;

 function format(num) {
    return num > 9 ? num : "0" + num;
 }

 function render() {

    // skip the first frame
    if (count > 1) page.render('render_' + format(count) + '.png');

    if (count < frames) {
        count++;
        setTimeout(render, delay);
    } else {
        phantom.exit();
    }
 }

 page.open('http://localhost:8896/spin.html', function() {
    page.viewportSize = { width: 124, height: 124 };
    setTimeout(render, delay);
 });
diff --git a/preview.apng.html b/preview.apng.html
 <html>
 <head>
    <title></title>
    <style type="text/css">
        * { background: orange; }
    </style>
 </head>
 <body>
    <img src="animation.png">
 </body>
 </html>
diff --git a/spin.html b/spin.html
 <html>
 <head>
    <title>Olympus Dev Environment</title>
    <style type="text/css">
        * { background: white; }

        .spin {
            -webkit-animation: spinner 750ms infinite linear;
            animation: spinner 750ms infinite linear;
            width: 80.0px;
            height: 80.0px;
            left: 15px;
            top: 15px;
            z-index: 10000000;
            padding: 0 !important;
            margin: 0 !important;
            border: 8.0px solid black;
            border-right-color: white;
            border-radius: 80.0px;
            box-sizing: border-box;
            display: inline-block;
            position: relative;
            overflow: hidden;
            text-indent: -9999px;
        }

        @-webkit-keyframes spinner{
            0% {
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg)
            }
            100%{
                -webkit-transform:rotate(360deg);
                transform:rotate(360deg)}}
        @keyframes spinner { 
            0%{ 
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg)
            }
            100% {
                -webkit-transform:rotate(360deg);
                transform:rotate(360deg)}
            }
        }


    </style>
 </head>
 <body> 
    <div class="spin"></div>
    <!-- <div class="inner"> -->
        <!-- <div id="AdScene"></div> -->


    <!-- </div> -->
 </body>
 </html>
	#!/bin/bash

	python -c $'import SimpleHTTPServer;\nmap = SimpleHTTPServer.SimpleHTTPRequestHandler.extensions_map;\nmap[""] = "text/plain";\nfor key, value in map.items():\n\tmap[key] = value + ";charset=UTF-8";\nSimpleHTTPServer.test();' "8896" &
	server=$!
	rm -rf animation.png render_*

	# install from http://phantomjs.org/
	phantomjs index.js



	# rm $(ls render_* \| head -n 3)
	rm $(ls render_* \| tail -n 1)

	for file in `ls render_*`; do
	echo "converting $file"

	# black needs to be transparent
	convert $file -fuzz 80% -transparent white $file
	done

	# install from http://apngasm.sourceforge.net/
	apngasm animation.png render_*.png

	open http://localhost:8896/preview.apng.html
	sleep 5
	kill $server
	var page = require('webpage').create();

	var count = 0, frames = 8, delay = 94;

	function format(num) {
	return num > 9 ? num : "0" + num;
	}

	function render() {

	// skip the first frame
	if (count > 1) page.render('render_' + format(count) + '.png');

	if (count < frames) {
	count++;
	setTimeout(render, delay);
	} else {
	phantom.exit();
	}
	}

	page.open('http://localhost:8896/spin.html', function() {
	page.viewportSize = { width: 124, height: 124 };
	setTimeout(render, delay);
	});
	<html>
	<head>
	<title></title>
	<style type="text/css">
	* { background: orange; }
	</style>
	</head>
	<body>
	<img src="animation.png">
	</body>
	</html>
	<html>
	<head>
	<title>Olympus Dev Environment</title>
	<style type="text/css">
	* { background: white; }

	.spin {
	-webkit-animation: spinner 750ms infinite linear;
	animation: spinner 750ms infinite linear;
	width: 80.0px;
	height: 80.0px;
	left: 15px;
	top: 15px;
	z-index: 10000000;
	padding: 0 !important;
	margin: 0 !important;
	border: 8.0px solid black;
	border-right-color: white;
	border-radius: 80.0px;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	overflow: hidden;
	text-indent: -9999px;
	}

	@-webkit-keyframes spinner{
	0% {
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg)
	}
	100%{
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg)}}
	@keyframes spinner {
	0%{
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg)
	}
	100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg)}
	}
	}


	</style>
	</head>
	<body>
	<div class="spin"></div>
	<!-- <div class="inner"> -->
	<!-- <div id="AdScene"></div> -->


	<!-- </div> -->
	</body>
	</html>