ocarina/html/controls.html

<html>
<head>
<script type="text/javascript">
function set_attr(attr)
{
	var req = new XMLHttpRequest();
	req.onreadystatechange=function()
	{
		if (req.readyState == 4 && req.status == 200)
		{
			document.getElementById(attr).innerHTML = req.responseText;
		}
	}
	req.open('GET', "controls.py?a=" + attr, true)
	req.send()
	setTimeout("set_attr(\"" + attr + "\")", 3000)
}

function do_request(action)
{
	var http = new XMLHttpRequest();
	http.open('GET', "controls.py?a="+action, true);
	http.send();
	return http;
}

/*function get_response(http)
{
	while (http.readyState != 4)
	{}

	var resp = http.responseText;
	return resp;
}*/

function control(action)
{
	var http = do_request(action);
	/*var resp = get_response(http);*/
}

function play()
{
	control("play");
	var button = document.getElementById("play_pause");
	button.innerHTML = "<img src=\"images/pause.png\" onclick=\"pause();\">";
}

function pause()
{
	control("pause");
	var button = document.getElementById("play_pause");
	button.innerHTML = "<img src=\"images/play.png\" onclick=\"play();\">";
}

function stop()
{
	control("stop");
	var button = document.getElementById("play_pause");
	button.innerHTML = "<img src=\"images/play.png\" onclick=\"play();\">";
}

function next()
{
	control("next");
}

</script>
</head>

<body>
	<table>
		<tr><td id="title">Title goes here...</td></tr>
		<tr><td id="artist">Artist goes here...</td></tr>
		<tr><td id="album">Album goes here...</td></tr>
	</table>
	<table>
		<tr>
			<td id="play_pause">
				<img src="images/play.png" onclick="play();"/>
			</td><td>
				<img src="images/stop.png" onclick="stop();"/>
			</td><td>
				<img src="images/next.png" onclick="next();"/>
			</td>
		</tr>
	</table>

</body>

<script type="text/javascript">
	set_attr("title");
	set_attr("artist");
	set_attr("album");
</script>

</html>
Web remote controls I can play, pause, stop, and advance to the next song through the web interface. 2010-11-19 22:47:41 -05:00			`<html>`
			`<head>`
			`<script type="text/javascript">`
Added attributes to web page The attributes update every second to check for the current song. 2010-12-24 12:31:55 -05:00			`function set_attr(attr)`
			`{`
			`var req = new XMLHttpRequest();`
			`req.onreadystatechange=function()`
			`{`
			`if (req.readyState == 4 && req.status == 200)`
			`{`
			`document.getElementById(attr).innerHTML = req.responseText;`
			`}`
			`}`
			`req.open('GET', "controls.py?a=" + attr, true)`
			`req.send()`
Increase web get_attrs timeout Every second was too much! Do it every 3 seconds instead. 2010-12-24 12:41:26 -05:00			`setTimeout("set_attr(\"" + attr + "\")", 3000)`
Added attributes to web page The attributes update every second to check for the current song. 2010-12-24 12:31:55 -05:00			`}`

Web remote controls I can play, pause, stop, and advance to the next song through the web interface. 2010-11-19 22:47:41 -05:00			`function do_request(action)`
			`{`
			`var http = new XMLHttpRequest();`
			`http.open('GET', "controls.py?a="+action, true);`
			`http.send();`
			`return http;`
			`}`

			`/*function get_response(http)`
			`{`
			`while (http.readyState != 4)`
			`{}`

			`var resp = http.responseText;`
			`return resp;`
			`}*/`

			`function control(action)`
			`{`
			`var http = do_request(action);`
			`/var resp = get_response(http);/`
			`}`

			`function play()`
			`{`
			`control("play");`
			`var button = document.getElementById("play_pause");`
Rename web buttons The stock_media-* style was too hard to work with. The buttons have been renamed in the following way: stock_media-next.png -> next.png stock_media-pause.png -> pause.png stock_media-play.png -> play.png stock_media-next.png -> next.png 2010-12-26 12:27:52 -05:00			`button.innerHTML = "<img src=\"images/pause.png\" onclick=\"pause();\">";`
Web remote controls I can play, pause, stop, and advance to the next song through the web interface. 2010-11-19 22:47:41 -05:00			`}`

			`function pause()`
			`{`
			`control("pause");`
			`var button = document.getElementById("play_pause");`
Rename web buttons The stock_media-* style was too hard to work with. The buttons have been renamed in the following way: stock_media-next.png -> next.png stock_media-pause.png -> pause.png stock_media-play.png -> play.png stock_media-next.png -> next.png 2010-12-26 12:27:52 -05:00			`button.innerHTML = "<img src=\"images/play.png\" onclick=\"play();\">";`
Web remote controls I can play, pause, stop, and advance to the next song through the web interface. 2010-11-19 22:47:41 -05:00			`}`

			`function stop()`
			`{`
			`control("stop");`
			`var button = document.getElementById("play_pause");`
Rename web buttons The stock_media-* style was too hard to work with. The buttons have been renamed in the following way: stock_media-next.png -> next.png stock_media-pause.png -> pause.png stock_media-play.png -> play.png stock_media-next.png -> next.png 2010-12-26 12:27:52 -05:00			`button.innerHTML = "<img src=\"images/play.png\" onclick=\"play();\">";`
Web remote controls I can play, pause, stop, and advance to the next song through the web interface. 2010-11-19 22:47:41 -05:00			`}`

			`function next()`
			`{`
			`control("next");`
			`}`

			`</script>`
			`</head>`

			`<body>`
Added attributes to web page The attributes update every second to check for the current song. 2010-12-24 12:31:55 -05:00			`<table>`
			`<tr><td id="title">Title goes here...</td></tr>`
			`<tr><td id="artist">Artist goes here...</td></tr>`
			`<tr><td id="album">Album goes here...</td></tr>`
			`</table>`
Web remote controls I can play, pause, stop, and advance to the next song through the web interface. 2010-11-19 22:47:41 -05:00			`<table>`
			`<tr>`
			`<td id="play_pause">`
Rename web buttons The stock_media-* style was too hard to work with. The buttons have been renamed in the following way: stock_media-next.png -> next.png stock_media-pause.png -> pause.png stock_media-play.png -> play.png stock_media-next.png -> next.png 2010-12-26 12:27:52 -05:00			`<img src="images/play.png" onclick="play();"/>`
Web remote controls I can play, pause, stop, and advance to the next song through the web interface. 2010-11-19 22:47:41 -05:00			`</td><td>`
Rename web buttons The stock_media-* style was too hard to work with. The buttons have been renamed in the following way: stock_media-next.png -> next.png stock_media-pause.png -> pause.png stock_media-play.png -> play.png stock_media-next.png -> next.png 2010-12-26 12:27:52 -05:00			`<img src="images/stop.png" onclick="stop();"/>`
Web remote controls I can play, pause, stop, and advance to the next song through the web interface. 2010-11-19 22:47:41 -05:00			`</td><td>`
Rename web buttons The stock_media-* style was too hard to work with. The buttons have been renamed in the following way: stock_media-next.png -> next.png stock_media-pause.png -> pause.png stock_media-play.png -> play.png stock_media-next.png -> next.png 2010-12-26 12:27:52 -05:00			`<img src="images/next.png" onclick="next();"/>`
Web remote controls I can play, pause, stop, and advance to the next song through the web interface. 2010-11-19 22:47:41 -05:00			`</td>`
			`</tr>`
			`</table>`

			`</body>`

Added attributes to web page The attributes update every second to check for the current song. 2010-12-24 12:31:55 -05:00			`<script type="text/javascript">`
			`set_attr("title");`
			`set_attr("artist");`
			`set_attr("album");`
			`</script>`

Web remote controls I can play, pause, stop, and advance to the next song through the web interface. 2010-11-19 22:47:41 -05:00			`</html>`