Hi people.
I hope i'm in the good section for my question.
First, my english and my javascript Knowledge = Not so good.
I use the music player Foobar. One of my dream is to remote Foobar with my PSP, with the wifi connection.
I found that project:
http://www.hydrogenaudio.org/forums/index.php?showtopic=62218With this plugin, we can remote control foobar with HTTP commands.
That's working good, I can make my template too, perfect. Execpt one thing.
On my PSP internet browser, any time I press a button (play,next,..) this doing the work but the page are refresh completly. It's a little inconvenient cause the browser is not too fast and I want to make my own icons, so the refresh time is too long. Not so long, but too long for me.
So, you can see on the project page, some guys have do many templates with AJAX commands. It's perfect for PC browser or iphone, but not the Netfront PSP browser.
So, I search everywhere on the internet and found two little things:
http://www.psp-programming.com/forums/index.php?PHPSESSID=5trqm7m8j0a6f9h8jel282i3k4&topic=2890.msg24105#msg24105and
http://forums.qj.net/psp-flash-player-discussions-releases/118086-ajax-psp.htmlInteresting, vey intersting. But I don't know enough javascript for make this work myself.
I try all the day, all the things I can but I can"t make this working with my remote plugin.
The second link is the most interesting for me, the proof page working good on my PSP. So I just want to when I press play button, the command send to the server without refresh.
The commands are in FORM GET. Here is the code of the default template with my icons:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Mon Index Foobar 2000</title>
<script type="text/javascript" src="script.js"></script> <!--Ligne importe le javascript à partir d'un fichier -->
<link rel="stylesheet" type="text/css" href="style.css" /> <!--Ligne importe le style CSS à partir d'un fichier-->
</head><body onload="mouse_capture_init(); fit();" onresize="fit();">
<form action="/" method="get" name="cmd_form" target="_self" class="frm">
<!--Ces 6 lignes sont les icones-->
<input name="Stop" title="Stop Playback" type="image" src="stop.png" ;width="50"; height="50"; class="stop" ; onclick="pc(this.name);">
<input name="PlayOrPause" title="Pause/resume playback" type="image" src="pause.png" width="50" ; height="50" ; onclick="pc(this.name);">
<input name="Start" title="Start playback" type="image" src="lecture.png" width="50" ; height="50" ; onclick="pc(this.name);">
<input name="StartPrevious" title="Play previous track" type="image" src="precedent.png" width="50" ; height="50" ; onclick="pc(this.name);">
<input name="StartNext" title="Play next track" type="image" src="suivant.png" width="50" ; height="50" ; onclick="pc(this.name);">
<input name="StartRandom" title="Play random track" type="image" src="random.png" width="50" ; height="50" ; onclick="pc(this.name);">
<select title="Playback order" onchange="pc('PlaybackOrder',this.value);">[PLAYBACK_ORDER_OPTION]</select><!--Boite de dialogue changer l'ordre de lecture-->
<select title="Volume level" onchange="pc('Volume',this.value);">[VOLUME_OPTION]</select>%<!--Changement de son-->
<p>
<select title="Playlist actions" id="Actions" style="background-color: #eeeeee;" onchange="act=this.selectedIndex;"><option>Start</option><option>Enqueue</option><option>Dequeue</option><option>Focus</option><option>Delete</option></select>
<input name="EmptyPlaylist" title="Empty playlist" type="button" value="—" onclick="if (confirm('Empty active playlist?')) pc(this.name); else return false;">
<select title="Playlists" onchange="pc('SwitchPlaylist',this.value);">[PLAYLISTS_OPTION]</select>
<a href="/?cmd=Browse">[ ... ]</a>
</p>
<p><input type="text" size="9" style="width: auto" onkeypress="document.cmd_form.cmd.value='SearchMediaLibrary'; document.cmd_form.param1.value=this.value;" value="[SEARCH_REQUEST]">
<input name="QueryRetrace" title="Retrace/init query" type="button" value=" < " onclick="pc(this.name);">
<select title="Media library query" id="QueryAdvance" onchange="pc('QueryAdvance',this.value);">[QUERY_OPTION]</select> [QUERY_INFO]</p>
<br><p id="npstr"><span id="npd" style="white-space: nowrap;" onclick="np_onclick();"><span id="np" class="npc"> </span><span id="track_title" class="track">[HELPER1]</span> <span id="t_time" class="track"></span></span> </p>
<p><span id="status"></span> <font size="-2" color="#ababab">[HELPER3]</font></p>
</div>
<input name="cmd" type="hidden" value=""><input name="param1" type="hidden" value="">
<p>[PLAYLIST_PAGES]</p>
<div id="playlist" style="border-top: 1px solid #000000; clear: both; z-index: +1; ">
<table id="pl">
[PLAYLIST]
<tr><td id="totals"></td><td class="playlist_time">[PLAYLIST_TOTAL_TIME]</td><td class="playlist_time">[QUEUE_TOTAL_TIME]</td></tr>
</table>
</div>
<!--[PGT]s-->
</body>
</html>
Javascript:
var mouseX = 0;
var p_key = 0;
var act = 0;
function KeyPress(e) {
p_key = e;
if (p_key == 16) // shift -- focus
act = 3;
else if (p_key == 17) // ctrl -- remove
act = 4;
else if (p_key == 81) // q -- enqueue
act = 1;
else if (p_key == 87) // w -- dequeue
act = 2;
else
act = 0;
document.getElementById('Actions').selectedIndex = act;
}
function pad(str, chr, count) {
var str_out = str.toString();
while (str_out.length < count)
str_out = chr + str_out;
return str_out;
}
function pc(c, p) {
var com = c || ''; var par = p || '';
with (document.cmd_form)
{
cmd.value = com;
param1.value = par;
submit();
}
}
function format_time(time) {
mins = Math.floor(time / 60);
secs = pad(time % 60, '0', 2);
return mins+":"+secs;
}
function set_t_pos(time) {
var str = format_time(time) + " / ";
document.getElementById("t_time").innerHTML = str + ( [ITEM_PLAYING_LEN] > 0 ? format_time([ITEM_PLAYING_LEN]) : '?' );
}
function set_np_width(t_sec, t_length) {
var np_width = document.getElementById("npd").offsetWidth;
np_width = np_width < 100 ? 100: np_width;
document.getElementById('np').style.width=Math.floor(np_width * t_sec / t_length) + "px";
}
function t_playback_timer(t_sec, t_length) {
if (t_sec <= t_length && t_length != 0)
{
set_t_pos(t_sec);
if (t_length != 0)
set_np_width(t_sec, t_length);
setTimeout('t_playback_timer('+(t_sec+1)+','+t_length+')',1000);
}
}
function a(track) { // do a(ction) on clicked entry
if (act == 0) pc('Start', track);
else if (act == 1) pc('QueueItems', track);
else if (act == 2) pc('DequeueItems', track);
else if (act == 3) pc('MoveCursor', track);
else if (act == 4) pc('Del', track);
}
function np_onclick() {
with (document)
pc('Seek', Math.round((mouseX-getElementById("np").offsetLeft)*100 / (getElementById("npd").offsetWidth)) );
}
function mouse_capture_init() {
if (document.layers? true : false)
captureEvents(Event.MOUSEMOVE)
document.onmousemove = handleMouseMove;
}
function handleMouseMove(evt) {
if (evt)
mouseX=evt.clientX;
else
if (event)
mouseX=event.x;
return false;
}
function fit() {
with (document.getElementById('playlist'))
{
style.position = 'static'; // important for the onresize event
style.overflowY = 'auto';
style.top = offsetTop + 'px';
style.left = offsetLeft + 'px';
style.right = offsetLeft + 'px';
style.bottom = '8px'; // fit this to your taste
style.position = 'fixed';
var npelem = document.getElementById("nowplaying");
if (npelem)
{
scrolltop = npelem.offsetTop - offsetHeight/2;
if (scrolltop > 0)
scrollTop = scrolltop;
}
}
}
document.onkeydown = function(evt) { KeyPress(evt?evt.keyCode:event.keyCode); }
with (document)
{
act = [LAST_ACTION];
getElementById('Actions').selectedIndex = act;
var i_p;
if ('[PLAYLIST_ITEM_PLAYING]' != '?')
i_p = parseInt('[PLAYLIST_ITEM_PLAYING]') + 1;
else
i_p = '?';
if ([IS_PLAYING]) { // start progressbar if playing
t_playback_timer([ITEM_PLAYING_POS],[ITEM_PLAYING_LEN]);
if ('[AUTO_REFRESH]' != '')
{
if (([ITEM_PLAYING_LEN]>0) && ([ITEM_PLAYING_POS] < [ITEM_PLAYING_LEN]) )
setTimeout('pc()',([ITEM_PLAYING_LEN]-[ITEM_PLAYING_POS])*1000 + 500);
else
if (([ITEM_PLAYING_POS] > [ITEM_PLAYING_LEN]) )
setTimeout('pc("RefreshPlayingInfo")',15000);
else
if ('[ITEM_PLAYING_LEN]' == '[ITEM_PLAYING_POS]' && '[ITEM_PLAYING_LEN]' != '?' && '[ITEM_PLAYING_LEN]' != '0')
setTimeout('pc()',500);
}
getElementById('status').innerHTML = '[ Playing ' + i_p + ' / [PLAYLIST_PLAYING_ITEMS_COUNT] ]';
}
else if ([IS_PAUSED]) { // adjust progressbar width if paused
set_np_width([ITEM_PLAYING_POS], [ITEM_PLAYING_LEN]);
set_t_pos([ITEM_PLAYING_POS]);
getElementById('status').innerHTML = '[ Paused ' + i_p + ' / [PLAYLIST_PLAYING_ITEMS_COUNT] ]';
} else { // hide unnecessary track info if stopped
counter = getElementById("counter");
if (counter)
counter.innerHTML = "";
getElementById("status").innerHTML = "[ Stopped ]";
getElementById("npstr").style.visibility = "hidden";
}
if ([IS_ENQUEUEING] && ('[AUTO_REFRESH]' != '') ) {
getElementById('status').innerHTML = '[ Enqueuement in progress ] ' + getElementById('status').innerHTML;
setTimeout('pc()',5000);
}
track = getElementById("track_title");
if (track && track.innerHTML == '' && ([IS_PLAYING] || [IS_PAUSED]) && ('[AUTO_REFRESH]' != '')) // if playing but track info is not loaded yet, reload page
setTimeout('pc()',500);
npp = getElementById("np"); // adjust progressbar width and height, and opacity hack for IE6
if (npp)
with (npp.style) {
if (getElementById("np").offsetHeight >= 2 )
height=getElementById("np").offsetHeight*2-2+"px";
left=getElementById("npd").offsetLeft+"px";
filter = "alpha(opacity=50)";
}
}
I search all the fay, I promess, i'm tired really, it's 01:55am, i'm on it since yesterday or maybe more.
If someone can just show me for one command, play for example. I just want to know how this is work, if it's work off course. I like to learn, I try search myself, but here i'm really off.
So, I resume. I would know if it's possible on the internet PSP browser, to press a button wich send a command without refresh the page and without ajax. If you can show me with one of the twos links, that's will be perfect.
Really thanks in advance. I go to sleep. Hope someone can help me on that, it's really important for me.
Again, sorry for my english.
Best regards.
