[Web Interface Addon] AWX - Ajax based Web Interface Addon for XBMC

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($) {

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,

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; }