anthonybaldwin/WIP: Browser Based Text Animations for OBS Studio

## follower.html
<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<script type="text/javascript" src="http://localhost:8888/ticker.js"></script>

<link rel="stylesheet" type="text/css" href="http://localhost:8888/animate.css">

<style type='text/css'>
body {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: bold;
  color: #000000;
  text-transform: uppercase;
  font-size: 14px;
  padding-left: 5px;
}
</style>

</head>

<body>

<div id="follower" class="animated bounce fast"></div>
<div id="followerCheck" style="visibility:hidden;"></div>

<script>

  window.onload = function () {

    text = loadFile("follower", "most_recent_follower.txt", false);
    textCheck = loadFile("follower", "most_recent_follower.txt", true);

    function ticker()
    {

      let mainText = document.getElementById("follower");
      let hiddenText = document.getElementById("followerCheck");

      mainText.classList.remove('animated','bounce','fast');

      textCheck = loadFile("follower", "most_recent_follower.txt", true);

      let pageText = document.getElementById("follower").innerHTML;
      let newPageText = document.getElementById("followerCheck").innerHTML;

      if (pageText != newPageText)
      {
        mainText.classList.add('animated', 'hinge', 'faster');

        mainText.addEventListener('animationend', function() {
            mainText.classList.remove('animated', 'hinge', 'faster');
            mainText.innerHTML = newPageText;
            mainText.classList.add('animated','bounceInRight', 'faster');
        })
      }
    }

    setInterval(ticker, 5000);
  }

</script>

</body>
</html>

## server.py
#!/usr/bin/env python3

from http.server import HTTPServer, SimpleHTTPRequestHandler, test
import sys

class CORSRequestHandler (SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')
        SimpleHTTPRequestHandler.end_headers(self)

if __name__ == '__main__':
    test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8888)

## ticker.js
function loadFile(id, file, isCheck) {

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      if (isCheck) {
        document.getElementById(id+"Check").innerHTML = this.responseText;
      }
      else {
        document.getElementById(id).innerHTML = this.responseText;
      }
    }
  };
  xhttp.open("GET", "http://localhost:8888/"+file, true);
  xhttp.send();
}

## WIP: Browser Based Text Animations for OBS Studio
Shitty README.md:

Inspiration: https://www.reddit.com/r/Twitch/comments/6uqhh9/how_to_use_css_to_format_imported_text/

This started because OBS cannot convert "read from file" text to uppercase/lowercase.
"Issue" is fixed in SLOBS, so is possible...maybe next time I'll dive into OBS and see if a bug, or what.
I have cool animations now, so it was worth it anyway. ;)

I didn't write server.py (found somewhere on StackOverflow researching CORS issue),
or most of ticker.js (this came with original post FTMP).

Shoutout to /u/TheHoneyThief for the initial post, and /u/zeromussc (twitch.tv/ZeromuS_) for the animate.css idea.

----

@TODO:
Need to parameterize some more of the JavaScript...removed a bunch when troubleshooting.
Yank JS again...also undid this for troubleshooting. Learning...

----

P.S.
SLOBS sucks even considering this project; stick to OBS.
	<!DOCTYPE HTML>
	<html>
	<head>

	<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

	<script type="text/javascript" src="http://localhost:8888/ticker.js"></script>

	<link rel="stylesheet" type="text/css" href="http://localhost:8888/animate.css">

	<style type='text/css'>
	body {
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: bold;
	color: #000000;
	text-transform: uppercase;
	font-size: 14px;
	padding-left: 5px;
	}
	</style>

	</head>

	<body>

	<div id="follower" class="animated bounce fast"></div>
	<div id="followerCheck" style="visibility:hidden;"></div>

	<script>

	window.onload = function () {

	text = loadFile("follower", "most_recent_follower.txt", false);
	textCheck = loadFile("follower", "most_recent_follower.txt", true);

	function ticker()
	{

	let mainText = document.getElementById("follower");
	let hiddenText = document.getElementById("followerCheck");

	mainText.classList.remove('animated','bounce','fast');

	textCheck = loadFile("follower", "most_recent_follower.txt", true);

	let pageText = document.getElementById("follower").innerHTML;
	let newPageText = document.getElementById("followerCheck").innerHTML;

	if (pageText != newPageText)
	{
	mainText.classList.add('animated', 'hinge', 'faster');

	mainText.addEventListener('animationend', function() {
	mainText.classList.remove('animated', 'hinge', 'faster');
	mainText.innerHTML = newPageText;
	mainText.classList.add('animated','bounceInRight', 'faster');
	})
	}
	}

	setInterval(ticker, 5000);
	}

	</script>

	</body>
	</html>
	#!/usr/bin/env python3

	from http.server import HTTPServer, SimpleHTTPRequestHandler, test
	import sys

	class CORSRequestHandler (SimpleHTTPRequestHandler):
	def end_headers (self):
	self.send_header('Access-Control-Allow-Origin', '*')
	SimpleHTTPRequestHandler.end_headers(self)

	if __name__ == '__main__':
	test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8888)
	function loadFile(id, file, isCheck) {

	var xhttp = new XMLHttpRequest();

	xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	if (isCheck) {
	document.getElementById(id+"Check").innerHTML = this.responseText;
	}
	else {
	document.getElementById(id).innerHTML = this.responseText;
	}
	}
	};
	xhttp.open("GET", "http://localhost:8888/"+file, true);
	xhttp.send();
	}
	Shitty README.md:

	Inspiration: https://www.reddit.com/r/Twitch/comments/6uqhh9/how_to_use_css_to_format_imported_text/

	This started because OBS cannot convert "read from file" text to uppercase/lowercase.
	"Issue" is fixed in SLOBS, so is possible...maybe next time I'll dive into OBS and see if a bug, or what.
	I have cool animations now, so it was worth it anyway. ;)

	I didn't write server.py (found somewhere on StackOverflow researching CORS issue),
	or most of ticker.js (this came with original post FTMP).

	Shoutout to /u/TheHoneyThief for the initial post, and /u/zeromussc (twitch.tv/ZeromuS_) for the animate.css idea.

	----

	@TODO:
	Need to parameterize some more of the JavaScript...removed a bunch when troubleshooting.
	Yank JS again...also undid this for troubleshooting. Learning...

	----

	P.S.
	SLOBS sucks even considering this project; stick to OBS.