COOL: Control your TV with your own Javascript Jointspace app

**matthias** · 11-28-2011, 01:05 PM

Hi,

I just found out something really cool:

You can very easily control your TV through JointSpace with a simple Javascript from your home network.
This includes manually setting the colours of your ambilight!!

The way, Philips implemented this is really cool - simple, straigt-forward and with all necessary information you need available locally in your TV!

Congretulations Philips! This is really great! Why are you not advertising this more?

If you enter in your browser http://ip-address-of-your-tv:1925, you get a very simple API on how to get information from the TV, including Ambilight, Channel list, etc.
You can also change Volume, send (remote control) keys, select a channel, etc. with a simple HTTP Post - no need to look into all of the details of the Jointspace library.

This pretty much allows us to easily create new "RemoteControl" Apps - even for cell phones.
Or create cool flashy ambilight applications ;-)

Did anyone try that yet?

**matthias** · 11-28-2011, 01:07 PM

Ah, just discovered a small bug:

I can only control the left side of the Ambilight strip - the right one stays dark.

I can set and read the values on the right side, they are written correctly, but when I set mode to manual, the right side stays dark.

Also, when setting mode to "expert", the values on the right side are ignored as well.

My ambilight/cached reads as:
{ "layer1": { "left": { "0": { "r": 255, "g": 0, "b": 255 }, "1": { "r": 0, "g": 255, "b": 0 } }, "top": { }, "right": { "0": { "r": 0, "g": 0, "b": 255 }, "1": { "r": 0, "g": 255, "b": 0 } }, "bottom": { } } }

As mentioned above - for the left side, it works perfectly as expected, just the right side does not..

**Toengel** · 11-28-2011, 07:22 PM

Hi,

does not seem to work on 2010 TVs...

Toengel@Alex

**daL** · 11-28-2011, 07:25 PM

Hi, first of all the remote app runs perfectly from my wife's iphone. Today I read Matthias articles and was happily surprised that even javascript was suported .. (and some sort of a mini web server).
As I would like to have a similar tool on my blackberry I thought to develop a little javascript app tonight. However for some reason I cannot connect neither my laptop nor my bb to the television via the given port number. I've tried portnumbers 1925 and 2323 (which Toengel advises in some other posts). My television 32pfl7605h is running the latest fw and again, the iphone remote app is running fine. Anybody who can shine some light on this?

Thanks,
daL

**daL** · 11-28-2011, 07:27 PM

Hi Toengel, it seems we were trying and typing at the same time... It doesn't work on my 2010 model either.

**Toengel** · 11-28-2011, 08:23 PM

Hi,

I did a NMAP-Scan on my 58PFL9955 (2010) TV. Please see Update 1: http://58pfl9955.wordpress.com/2010/...schnittstelle/

Toengel@Alex

**daL** · 11-29-2011, 06:19 AM

@Toengel, thanks for the port list on your blog. Only port 2323 doesn't give me a 404.
@Matthias, would you mind making a screen copy of what you get when using port 1925?
@Philips, is the javascript/jointspace described by Matthias also available on the 2010 series?

Guys, thanks a lot!!

**matthias** · 11-29-2011, 08:53 AM

Sorry to hear that it's not working on the 2010 models. I also didn't yet find a hint to that on the Jointspace SF page. If the difference is not too big, maybe selling the old one and buying a new one is an option? Or you find a friend or family member who needs a nice used TV

My guess is that interface is pretty new, maybe not yet finished and currently being tested, so it's not advertised. Realistically, I think chances are pretty small they'll integrate this in the old TV.
Anyway Philips - please keep this :-)

First page says "Welcome to JointSpace" and has a Link to "API reference".

The link points "http://192.168.178.33:1925/1/doc/API.html", with the following content.
So, nothing fancy, but everything you need..

<html>
<head><title>JointSpace API Documentation</title></head>
<body>
<h1>JointSpace API Documentation</h1>

<h2><a href="API-gettingstarted.html">Getting Started</a></h2>

<h2>REST API Methods</h2>

<h3>Ambilight methods</h3>

<ul>
<li><a href="API-ambilight.html">Introduction to the ambilight interface</a>
<li><a href="API-Method-ambilight-topology-GET.html">GET ambilight/topology</a>
<li><a href="API-Method-ambilight-mode-GET.html">GET ambilight/mode</a>
<li><a href="API-Method-ambilight-mode-POST.html">POST ambilight/mode</a>
<li><a href="API-Method-ambilight-measured-GET.html">GET ambilight/measured</a>

<li><a href="API-Method-ambilight-processed-GET.html">GET ambilight/processed</a>
<li><a href="API-Method-ambilight-cached-GET.html">GET ambilight/cached</a>
<li><a href="API-Method-ambilight-cached-POST.html">POST ambilight/cached</a>
</ul>

<h3>Audio methods</h3>
<ul>

<li><a href="API-Method-audio-volume-GET.html">GET audio/volume</a>
<li><a href="API-Method-audio-volume-POST.html">POST audio/volume</a>
</ul>

<h3>Channel list methods</h3>
<ul>
<li><a href="API-Method-channellists-GET.html">GET channellists</a>
<li><a href="API-Method-channellists-id-GET.html">GET channellists/<i>id</i></a>

</ul>

<h3>Channel methods</h3>
<ul>
<li><a href="API-Method-channels-GET.html">GET channels</a>
<li><a href="API-Method-channels-current-GET.html">GET channels/current</a>
<li><a href="API-Method-channels-current-POST.html">POST channels/current</a>

<li><a href="API-Method-channels-id-GET.html">GET channels/<i>id</i></a>
</ul>

<h3>Input methods</h3>
<ul>
<li><a href="API-Method-input-key-POST.html">POST input/key</a>
</ul>

<h3>Source methods</h3>

<ul>
<li><a href="API-Method-sources-GET.html">GET sources</a>
<li><a href="API-Method-sources-current-GET.html">GET sources/current</a>
<li><a href="API-Method-sources-current-POST.html">POST sources/current</a>
</ul>

<h3>System methods</h3>
<ul>

<li><a href="API-Method-system-GET.html">GET system</a>
<li><a href="API-Method-system-country-GET.html">GET system/country</a>
<li><a href="API-Method-system-name-GET.html">GET system/name</a>
<li><a href="API-Method-system-menulanguage-GET.html">GET system/menulanguage</a>
<li><a href="API-Method-system-model-GET.html">GET system/model</a>
<li><a href="API-Method-system-serialnumber-GET.html">GET system/serialnumber</a>

<li><a href="API-Method-system-softwareversion-GET.html">GET system/softwareversion</a>
</ul>

</body>
</html>

**Nettle** · 11-29-2011, 09:14 AM

Originally Posted by Toengel

Hi,

does not seem to work on 2010 TVs...

Toengel@Alex

I was reading the 1st post and I've said to me:"Great, finally something even for the TV Philips purchasers of one year ago!!!!".

Than I've seen the comments regarding the "2011 exclusivity".....
I'd be amazed at the contrary.

The 2010 models are completely "forgotten" nowadays.

regards

**daL** · 11-29-2011, 12:55 PM

Thank guys,

Matthias, I think you're right. They are betatesting it or started development (hé this base has got a web server!)and forgot to remove it from the release which also with other brands happen quite often.
I hope they'll complete and implement it on the 2010 series as well, as from a hardware perspective it shouldn't have an impact on resources, but I'm doubt they will.
O yes, Matthias I won't sell my television and buy a new one for this feature

Cheers,
daL

**matthias** · 12-05-2011, 05:02 PM

An thought just crossed my mind - maybe, in the 2010 TVs, it's just the "online" documentation that is missing. (I remember someone saying something about a webserver running without content)

So, if you would like to try this - maybe it works :-)

(don't forget to change it to your TV's correct IP address)
Also, play with the ports (2323, 9090, 49153, ...) ;-)

<html>
<head><TITLE>Send HOME Key</TITLE>
<script type="text/javascript">
function pressthekey()
{
var http = new XMLHttpRequest();
var JSONObject = new Object;
JSONObject.key = "Home";

var url = "http://192.168.178.33:1925/1/input/key";
var params = JSON.stringify(JSONObject);

http.open("POST", url, true);
http.onreadystatechange = function() { //Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) { document.getElementById("jsresult").innerHTML=http .responseText;}}
http.send(params);
}

</script>
</head>
<body>
<form name="settings" action="" method="POST">
<input type="button" name="presskey" value="Press HOME key" onclick="pressthekey()">
<br>
</form>

JointSpace Result:<br>
<span id="jsresult"></span><br />

</body>
</html>

Have fun :-)

**matthias** · 01-14-2012, 12:42 AM

Just found that there is an even better control here by netdata.

But just for the sake of completion and for those who want to use it as template, here's a pretty ugly simple javascript button version with all available remote keys, including a few shortcuts not available on the remote control (e.g. ambilight, online, viewmode, ...)

Try it here or put the code below in a html file:

<html>
<head><TITLE>Jointspace Remote Control with JSON</TITLE>
<script type="text/javascript">
function pressthekey(mykey)
{
var http = new XMLHttpRequest();
var JSONObject = new Object;
JSONObject.key = mykey;

var url = "http://" + p['tvipaddr'].value + ":1925/1/input/key";
var params = JSON.stringify(JSONObject);

http.open("POST", url, true);
http.onreadystatechange = function() { //Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
document.getElementById("jsresult").innerHTML = http.responseText.replace(/\n/g, '<br/>');
}}
http.send(params);
}

function saveip()
{
var p = document.forms['settings'];
document.cookie = p['tvipaddr'].value;
window.location.reload();
}
</script>
</head>

<body>
<h3>Jointspace Remote Control with JSON</h3>

<form name="settings" action="" method="POST">
TV IP address:
<input type="text" name="tvipaddr">
<input type="button" name="btn_saveip" value="Set IP" onclick="saveip()">
<br><br>
<table>
<tr> <td align=center> </td>
<td align=center> <input type="button" name="presskey" value="Standby" onclick="pressthekey( 'Standby' )"> <br><br> </td>
<td align=center> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="Stop" onclick="pressthekey( 'Stop' )"> </td>
<td align=center> <input type="button" name="presskey" value="Record" onclick="pressthekey( 'Record' )"> </td>
<td align=center> <input type="button" name="presskey" value="Pause" onclick="pressthekey( 'Pause' )"> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="Rewind" onclick="pressthekey( 'Rewind' )"> </td>
<td align=center> <input type="button" name="presskey" value="PlayPause" onclick="pressthekey( 'PlayPause' )"> </td>
<td align=center> <input type="button" name="presskey" value="FastForward" onclick="pressthekey( 'FastForward' )"> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="RedColour" onclick="pressthekey( 'RedColour' )">
<input type="button" name="presskey" value="GreenColour" onclick="pressthekey( 'GreenColour' )"> </td>
<td align=center> </td>
<td align=center> <input type="button" name="presskey" value="YellowColour" onclick="pressthekey( 'YellowColour' )">
<input type="button" name="presskey" value="BlueColour" onclick="pressthekey( 'BlueColour' )"> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="Find" onclick="pressthekey( 'Find' )"> </td>
<td align=center> <input type="button" name="presskey" value="Home" onclick="pressthekey( 'Home' )"> <br><br> </td>
<td align=center> <input type="button" name="presskey" value="Adjust" onclick="pressthekey( 'Adjust' )"> </td>
</tr>
<tr> <td align=center> </td>
<td align=center> <input type="button" name="presskey" value="CursorUp" onclick="pressthekey( 'CursorUp' )"> </td>
<td align=center> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="CursorLeft" onclick="pressthekey( 'CursorLeft' )"> </td>
<td align=center> <input type="button" name="presskey" value="Confirm" onclick="pressthekey( 'Confirm' )"> </td>
<td align=center> <input type="button" name="presskey" value="CursorRight" onclick="pressthekey( 'CursorRight' )"> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="Previous" onclick="pressthekey( 'Previous' )"> </td>
<td align=center> <input type="button" name="presskey" value="CursorDown" onclick="pressthekey( 'CursorDown' )"> <br><br> </td>
<td align=center> <input type="button" name="presskey" value="Next" onclick="pressthekey( 'Next' )"> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="Source" onclick="pressthekey( 'Source' )"> </td>
<td align=center> <input type="button" name="presskey" value="Back" onclick="pressthekey( 'Back' )"> <br><br> </td>
<td align=center> <input type="button" name="presskey" value="Options" onclick="pressthekey( 'Options' )"> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="VolumeDown" onclick="pressthekey( 'VolumeDown' )"> <br><br></td>
<td align=center> <input type="button" name="presskey" value="Mute" onclick="pressthekey( 'Mute' )"> <br><br></td>
<td align=center> <input type="button" name="presskey" value="VolumeUp" onclick="pressthekey( 'VolumeUp' )"> <br><br></td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="Digit1" onclick="pressthekey( 'Digit1' )"> </td>
<td align=center> <input type="button" name="presskey" value="Digit2" onclick="pressthekey( 'Digit2' )"> </td>
<td align=center> <input type="button" name="presskey" value="Digit3" onclick="pressthekey( 'Digit3' )"> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="Digit4" onclick="pressthekey( 'Digit4' )"> </td>
<td align=center> <input type="button" name="presskey" value="Digit5" onclick="pressthekey( 'Digit5' )"> </td>
<td align=center> <input type="button" name="presskey" value="Digit6" onclick="pressthekey( 'Digit6' )"> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="Digit7" onclick="pressthekey( 'Digit7' )"> </td>
<td align=center> <input type="button" name="presskey" value="Digit8" onclick="pressthekey( 'Digit8' )"> </td>
<td align=center> <input type="button" name="presskey" value="Digit9" onclick="pressthekey( 'Digit9' )"> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="Subtitle" onclick="pressthekey( 'Subtitle' )"> </td>
<td align=center> <input type="button" name="presskey" value="Digit0" onclick="pressthekey( 'Digit0' )"> </td>
<td align=center> <input type="button" name="presskey" value="Teletext" onclick="pressthekey( 'Teletext' )"> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="Dot" onclick="pressthekey( 'Dot' )"> </td>
<td align=center> </td>
<td align=center> <input type="button" name="presskey" value="Info" onclick="pressthekey( 'Info' )"> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="Viewmode" onclick="pressthekey( 'Viewmode' )"> </td>
<td align=center> <input type="button" name="presskey" value="ChannelStepUp" onclick="pressthekey( 'ChannelStepUp' )"> </td>
<td align=center> <input type="button" name="presskey" value="AmbilightOnOff" onclick="pressthekey( 'AmbilightOnOff' )"> </td>
</tr>
<tr> <td align=center> <input type="button" name="presskey" value="Online" onclick="pressthekey( 'Online' )"> </td>
<td align=center> <input type="button" name="presskey" value="ChannelStepDown" onclick="pressthekey( 'ChannelStepDown' )"> </td>
<td align=center> <input type="button" name="presskey" value="WatchTV" onclick="pressthekey( 'WatchTV' )"> </td>
</tr>
</table>
</form>

<br>
JointSpace Result:<br>
<span id="jsresult"></span><br>

<script type="text/javascript">
var p = document.forms['settings'];
p['tvipaddr'].value = "192.168.178.33";
if (document.cookie)
p['tvipaddr'].value = document.cookie;
</script>

</body>
</html>

Topic: COOL: Control your TV with your own Javascript Jointspace app

Topic Tools

Search Topic

Display