D(one) IT

IT Tips, Tricks & Such

Boxee Box web remote

I created a simple web remote to control the Boxee Box.

(Limited due to api: http://developer.boxee.tv/Remote_Control_Interface )

ML Boxee Box Web Remote: Download

Note: changing the commandiframe to display:block; will show the the iframe used to send the commands. If the api command is successful, an “OK” is displayed.

I put most of the code into just the one html. This web remote will work launched right from a folder on a pc or off a hosted web server (not the boxee box). Most remotes I found, had you replace the boxee web server files, which is locked down on the boxee box.

remote.html (click “show source” below)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>MAJL Boxee Remote</title>
<STYLE type="text/css">
<!--
body
{
 	background: url('images/nav.jpg') no-repeat 0 0;
}

a 				{text-decoration:none;
				color:white;}

div#preload { display: none; }

#commandiframe	{position:absolute;
	display:none;
	width:50px;
	height:50px;
	top:0px;
	left:0px;
	font-family:Helvetica, Arial, sans-serif;
	font-size:6px;
	padding:2px;
	background-color:gray
}

#inputfields	{position:absolute;
	display:block;
	width:260px;
	height:25px;
	top:10px;
	left:55px;
	font-family:Helvetica, Arial, sans-serif;
	font-size:15px;
	padding:5px;
	border:5px solid #c5e2a0;
	background-color:gray
}

#up {position:absolute;
  	display:block;
  	width: 97px;
 	height: 80px;
 	background:url('images/up.jpg') no-repeat 0 0;
  	top:236px;
  	left:125px;
  	padding: 0px 0px;
}

#up:visited, #up:hover, #up:active{
  	display:block;
  	width: 97px;
 	height: 80px;
	background:url('images/up_press.jpg') no-repeat 0 0;
	top:236px;
  	left:125px;
  	padding: 0px 0px;
}

#down {position:absolute;
  	display:block;
  	width: 97px;
 	height: 80px;
 	background:url('images/down.jpg') no-repeat 0 0;
  	top:400px;
  	left:125px;
  	padding: 0px 0px;
}

#down:visited, #down:hover, #down:active{
  	display:block;
  	width: 97px;
 	height: 80px;
	background:url('images/down_press.jpg') no-repeat 0 0;
	top:400px;
  	left:125px;
  	padding: 0px 0px;
}

#left {position:absolute;
  	display:block;
  	width: 80px;
 	height: 97px;
 	background:url('images/left.jpg') no-repeat 0 0;
  	top:310px;
  	left:52px;
  	padding: 0px 0px;
}

#left:visited, #left:hover, #left:active{
  	display:block;
  	width: 80px;
 	height: 97px;
	background:url('images/left_press.jpg') no-repeat 0 0;
	top:310px;
  	left:52px;
  	padding: 0px 0px;
}

#right {position:absolute;
  	display:block;
  	width: 80px;
 	height: 97px;
 	background:url('images/right.jpg') no-repeat 0 0;
  	top:310px;
  	left:220px;
  	padding: 0px 0px;
}

#right:visited, #right:hover, #right:active{
  	display:block;
  	width: 80px;
 	height: 97px;
	background:url('images/right_press.jpg') no-repeat 0 0;
	top:310px;
  	left:220px;
  	padding: 0px 0px;
}

#pause {position:absolute;
  	display:block;
  	width: 97px;
 	height: 97px;
 	background:url('images/pause.jpg') no-repeat 0 0;
  	top:80px;
  	left:125px;
  	padding: 0px 0px;
}

#pause:visited, #pause:hover, #pause:active{
	display:block;
  	width: 97px;
 	height: 97px;
	background:url('images/pause_press.jpg') no-repeat 0 0;
	top:80px;
  	left:125px;
  	padding: 0px 0px;
}

#mute {position:absolute;
  	display:block;
  	width: 64px;
 	height: 64px;
 	background:url('images/mute.jpg') no-repeat 0 0;
  	top:80px;
  	left:10px;
  	padding: 0px 0px;
}

#mute:visited, #mute:hover, #mute:active{
	display:block;
  	width: 64px;
 	height: 64px;
	background:url('images/mute_press.jpg') no-repeat 0 0;
	top:80px;
  	left:10px;
  	padding: 0px 0px;
}

#selecta {position:absolute;
  	display:block;
  	width: 97px;
 	height: 97px;
 	background:url('images/select.jpg') no-repeat 0 0;
  	top:310px;
  	left:125px;
  	padding: 0px 0px;
}

#selecta:visited, #selecta:hover, #selecta:active{
  	display:block;
  	width: 97px;
 	height: 97px;
	background:url('images/select_press.jpg') no-repeat 0 0;
	top:310px;
  	left:125px;
  	padding: 0px 0px;
}

#selectb {position:absolute;
  	display:block;
  	width: 97px;
 	height: 97px;
 	background:url('images/home.jpg') no-repeat 0 0;
  	top:580px;
  	left:125px;
  	padding: 0px 0px;
}

#selectb:visited, #selectb:hover, #selectb:active{
  	display:block;
  	width: 97px;
 	height: 97px;
	background:url('images/home_press.jpg') no-repeat 0 0;
	top:580px;
  	left:125px;
  	padding: 0px 0px;
}
-->
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function toggle() {
	var ele = document.getElementById("settings");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "Device";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "Hide";
	}
}

function linkGenerator(commands){
	frames['debug'].location.href= 'http://' + document.getElementById('userIP').value +':' + document.getElementById('userPort').value + '/xbmcCmds/xbmcHttp?command=' + commands;
	}
-->
</script>

	</head>
	<body>
<div id="preload">
	<img src="images/nav.jpg" width="1" height="1"/>
	<img src="images/mute.jpg" width="1" height="1"/>
    <img src="images/pause.jpg" width="1" height="1"/>
    <img src="images/up.jpg" width="1" height="1"/>
    <img src="images/select.jpg" width="1" height="1"/>
    <img src="images/left.jpg" width="1" height="1"/>
    <img src="images/right.jpg" width="1" height="1"/>
    <img src="images/down.jpg" width="1" height="1"/>
    <img src="images/home.jpg" width="1" height="1"/>
    <img src="images/mute_press.jpg" width="1" height="1"/>
    <img src="images/pause_press.jpg" width="1" height="1"/>
    <img src="images/select_press.jpg" width="1" height="1"/>
    <img src="images/home_press.jpg" width="1" height="1"/>
    <img src="images/up_press.jpg" width="1" height="1"/>
    <img src="images/left_press.jpg" width="1" height="1"/>
    <img src="images/right_press.jpg" width="1" height="1"/>
    <img src="images/down_press.jpg" width="1" height="1"/>
</div>

  <div id="settings" style="display:none">
    <form id="inputfields">
	<b>Boxee</b>
	<input id=userIP type="text" size=15 name="IPvalue" value="BoxeeBox" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
	<b>:</b>
	<input id=userPort type="text" size=5 name="Portvalue" value="8800" maxlength="5">
	</form>
  </div>

		    <div id="navigation">
		    <a id="displayText" href="javascript:toggle();">Device</a>

			<div id="up" onClick ="linkGenerator('SendKey(270)')"></div>

			<div id="down" onClick="linkGenerator('SendKey(271)')"></div>

			<div id="left" onClick="linkGenerator('SendKey(272)')"></div>

			<div id="right" onClick="linkGenerator('SendKey(273)')"></div>

			<div id="selecta" onClick="linkGenerator('SendKey(256)')"></div>

			<div id="selectb" onClick="linkGenerator('SendKey(257)')"></div>

			<div id="mute" onClick="linkGenerator('Mute()')"></div>

			<div id="pause" onclick="linkGenerator('Pause()')"></div>

			<div id="commandiframe">
			    <a href=""></a>
			&lt;/div&gt;

	    &lt;/div&gt;

	&lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;
Advertisements

10 responses to “Boxee Box web remote

  1. Kermonk February 14, 2011 at 4:07 pm

    This could be very handy if it allows you to send text.

    Ie, allow the PC to function as a keyboard for the Boxee Box so you can enter search queries etc. For some of us the remote is too small to read.

    How about it? 🙂

  2. that is right March 9, 2011 at 3:48 pm

    nice work with the update Kermonk (pc keyboard can be used to key in searches inBB). Get it to accept keyboard commands to also emulate remote functions. i.e.: using arrow keys on keyboard to navigate like the remote. Enter key = center button (ok/confirm), space = play/pause, back = backspace

  3. that is right March 9, 2011 at 3:50 pm

    I mean MLamontagne … good work!

  4. Nour December 11, 2011 at 5:23 pm

    Thank you very much. Usefull.

  5. William Grigoratos May 4, 2012 at 6:45 pm

    Looks like the page is down, and only recently. Is the project still active?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: