2011-07-10, 12:30
Hi,
I wanted to have control over up/down/left/right/select in AWX for XBMC 10.1, so i wrote it using the old http-api (eden will have it via json-rpc)
Changes:
ui.default/ui.default.js - line ~270
add
after
ui.default/ui.default.js - line ~326
Add after
js/jquery.awx.js
Add
after
js/lib.xbmc.jc:
add
after
layout.css
Add
And add input.png
Result:
I wanted to have control over up/down/left/right/select in AWX for XBMC 10.1, so i wrote it using the old http-api (eden will have it via json-rpc)
Changes:
ui.default/ui.default.js - line ~270
add
Code:
'<div id="input"></div>' +
Code:
'<div id="navigation"></div>' +
ui.default/ui.default.js - line ~326
Add
Code:
$('#input').inputControls();
Code:
$('#controls').defaultControls();
js/jquery.awx.js
Add
Code:
/* ########################### *\
| Input-Controls
\* ########################### */
$.fn.inputControls = function() {
$controls = $('<a class="button up" href=""></a><a class="button down" href=""></a><a class="button left" href=""></a><a class="button right" href=""></a><a class="button select" href=""></a><a class="button home" href=""></a><a class="button back" href=""></a>');
$controls.filter('.up').click(function() {
xbmc.input({type: 'up'}); return false;
});
$controls.filter('.down').click(function() {
xbmc.input({type: 'down'}); return false;
});
$controls.filter('.left').click(function() {
xbmc.input({type: 'left'}); return false;
});
$controls.filter('.right').click(function() {
xbmc.input({type: 'right'}); return false;
});
$controls.filter('.select').click(function() {
xbmc.input({type: 'select'}); return false;
});
$controls.filter('.home').click(function() {
xbmc.input({type: 'home'}); return false;
});
$controls.filter('.back').click(function() {
xbmc.input({type: 'back'}); return false;
});
this.each (function() {
$(this).append($controls.clone(true));
});
}; // END inputControls
Code:
(function($) {
js/lib.xbmc.jc:
add
Code:
input: function(options) {
var settings = {
type: 'select',
onSuccess: null,
onError: null
};
$.extend(settings, options);
var commands = {left: 1, right: 2, up: 3, down: 4, select: 7, back: 9, home: 10 };
xbmc.httpapi(
'action', commands[ settings.type] ,
settings.onSuccess,
settings.Error
);
return true;
},
httpapi: function(command, parameter, onError, onComplete, asyncRequest) {
if (typeof asyncRequest === 'undefined')
asyncRequest = true;
if (!this.xbmcHasQuit) {
$.ajax({
async: asyncRequest,
type: 'GET',
url: './xbmcCmds/xbmcHttp',
data: {
"command": command,
"parameter": parameter
},
dataType: 'text',
cache: false,
timeout: this.timeout,
success: function(result, textStatus, XMLHttpRequest) {
// its possible to get here on timeouts. --> error
if (XMLHttpRequest.readyState==4 && XMLHttpRequest.status==0) {
if (onError) {
onError({"error" : { "ajaxFailed" : true, "xhr" : XMLHttpRequest, "status" : textStatus }});
}
return;
}
// Example Error-Response: { "error" : { "code" : -32601, "message" : "Method not found." } }
if (result.error) {
if (onError) { onError(result); }
return;
}
if (onSuccess) { onSuccess(result); }
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
if (onError) {
onError({"error" : { "ajaxFailed" : true, "xhr" : XMLHttpRequest, "status" : textStatus, "errorThrown" : errorThrown }});
}
},
complete: function(XMLHttpRequest, textStatus) {
if (onComplete) { onComplete(); }
}
});
}
},
Code:
timeout: 10000,
layout.css
Add
Code:
#input {
position: absolute;
bottom: 240px;
left: 15px;
height: 65px;
width: 60px;
padding: 15px 15px 40px 15px;
background: #343434;
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
border: 1px solid #7c7c7c;
}
#input a.button {
background: url('../images/input.png') no-repeat;
width: 30px;
height: 30px;
position: absolute;
right: 30px;
}
#input a.left { right: 60px; top: 60px; background-position: -60px 0px; }
#input a.right { top: 60px; right: 0; background-position: -90px 0px; }
#input a.up { top: 30px; background-position: -30px 0px; }
#input a.down { top: 90px; background-position: -0px 0px; }
#input a.select { top: 60px;right:30px; background-position: -120px 0px; }
#input a.home { top: 0px; right: 0; background-position: -150px 0px; }
#input a.back { top: 0px; right: 60px; background-position: -180px 0px; }
#input a.left:hover { background-position: -60px -30px; }
#input a.right:hover { background-position: -90px -30px; }
#input a.up:hover { background-position: -30px -30px; }
#input a.down:hover { background-position: -0px -30px; }
#input a.select:hover { background-position: -120px -30px; }
#input a.home:hover { background-position: -150px -30px; }
#input a.back:hover { background-position: -180px -30px; }
And add input.png
Result: