- Improve HTML

- Improve layout
- Pull JavaScript and CSS out into their own files.
- Add jQuery
- jQuery-fy JavaScript.

openlp/core/lib/serviceitem.py

@@ -153,15 +153,16 @@ class ServiceItem(object):
             self.RenderManager.set_override_theme(self.theme)
         format = self._display_frames[row][u'text'].split(u'\n')
         #if screen blank then do not display footer
-        if self.cache[row] is not None:
+        if row in self.cache and self.cache[row]:
             frame = self.cache[row]
         else:
             if format[0]:
                 frame = self.RenderManager.generate_slide(format,
-                                self.raw_footer)
+                    self.raw_footer)
             else:
                 frame = self.RenderManager.generate_slide(format, u'')
-            self.cache[row] = frame
+            if frame:
+                self.cache.insert(row, frame)
         return frame
 
     def add_from_image(self, path, title, image):

openlp/plugins/remotes/html/index.html

@@ -5,191 +5,52 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>OpenLP Remote Controller</title>
     <script type="text/javascript" src="/files/jquery.js"></script>
-    <script type='text/javascript'>
+    <script type='text/javascript' src="/files/openlp.js"></script>
-
+    <script type='text/javascript' src="/files/init.js"></script>
-function send_event(eventname, data) {
+    <link rel="stylesheet" href="/files/style.css" type="text/css" />
-    /*var req = new XMLHttpRequest();
-    req.onreadystatechange = function() {
-        if(req.readyState==4)
-            response(eventname, req);
-    }
-    var url = '';
-    if(eventname.substr(-8) == '_request')
-        url = 'request';
-    else
-        url = 'send';
-    url += '/' + eventname;
-    if(data!=null)
-        url += '?q=' + escape(data);
-    req.open('GET', url, true);
-    req.send();*/
-    var url = "";
-    if (eventname.substr(-8) == "_request")
-    {
-        url = "request";
-    }
-    else
-    {
-        url = "send";
-    }
-    url += "/" + eventname;
-    var args = {};
-    if (data != null)
-    {
-        args.q = escape(data);
-    }
-    $.get(url, args, function (data, textStatus) {
-        if (textStatus != "success")
-        {
-            if (eventname == "remotes_poll_request")
-            {
-                send_event("remotes_poll_request");
-            }
-        }
-        else
-        {
-            new_response(eventname, data);
-        }
-    });
-}
-function failed_response(eventname, req){
-    switch(eventname){
-        case 'remotes_poll_request':
-            if(req.status==408)
-                send_event("remotes_poll_request");
-            break;
-    }
-}
-function response(eventname, req){
-    if(req.status!=200){
-        failed_response(eventname, req);
-        return;
-    }
-    text = req.responseText;
-    switch(eventname){
-        case 'servicemanager_list_request':
-            var data = eval('(' + text + ')');
-            var html = '<table>';
-            for(row in data){
-                html += '<tr onclick="send_event('
-                html += "'servicemanager_set_item', " + row + ')"';
-                if(data[row]['selected'])
-                    html += ' style="font-weight: bold"';
-                html += '>'
-                html += '<td>' + (parseInt(row)+1) + '</td>'
-                html += '<td>' + data[row]['title'] + '</td>'
-                html += '<td>' + data[row]['plugin'] + '</td>'
-                html += '<td>' + data[row]['notes'] + '</td>'
-                html += '</tr>';
-            }
-            html += '</table>';
-            document.getElementById('service').innerHTML = html;
-            break;
-        case 'slidecontroller_live_text_request':
-            var data = eval('(' + text + ')');
-            var html = '<table>';
-            for(row in data){
-                html += '<tr onclick="send_event('
-                html += "'slidecontroller_live_set', " + row + ')"';
-                if(data[row]['selected'])
-                    html += ' style="font-weight: bold"';
-                html += '>';
-                html += '<td>' + data[row]['tag'] + '</td>';
-                html += '<td>' + data[row]['text'].replace(/\n/g, '<br>');
-                html += '</td></tr>';
-            }
-            html += '</table>';
-            document.getElementById('currentitem').innerHTML = html;
-            break;
-        case 'remotes_poll_request':
-            send_event("remotes_poll_request");
-            send_event("servicemanager_list_request");
-            send_event("slidecontroller_live_text_request");
-            break;
-    }
-}
-function new_response(eventname, text){
-    switch (eventname)
-    {
-        case 'servicemanager_list_request':
-            var data = eval('(' + text + ')');
-            var table = $("<table>");
-            for (row in data)
-            {
-                var trow = $("<tr>").click("send_event");
-                if (data[row]['selected'])
-                {
-                    trow.attr("style", "font-weight: bold");
-                }
-                trow.append($("<td>").text(parseInt(row)+1));
-                trow.append($("<td>").text(data[row]['title']));
-                trow.append($("<td>").text(data[row]['plugin']));
-                trow.append($("<td>").text(data[row]['notes']));
-                table.append(trow);
-            }
-            $("#service").html(table);
-            break;
-        case 'slidecontroller_live_text_request':
-            var data = eval('(' + text + ')');
-            var html = '<table>';
-            for(row in data){
-                html += '<tr onclick="send_event('
-                html += "'slidecontroller_live_set', " + row + ')"';
-                if(data[row]['selected'])
-                    html += ' style="font-weight: bold"';
-                html += '>';
-                html += '<td>' + data[row]['tag'] + '</td>';
-                html += '<td>' + data[row]['text'].replace(/\\n/g, '<br>');
-                html += '</td></tr>';
-            }
-            html += '</table>';
-            document.getElementById('currentitem').innerHTML = html;
-            break;
-        case 'remotes_poll_request':
-            send_event("remotes_poll_request");
-            send_event("servicemanager_list_request");
-            send_event("slidecontroller_live_text_request");
-            break;
-    }
-}
-send_event("servicemanager_list_request");
-send_event("slidecontroller_live_text_request");
-send_event("remotes_poll_request");
-</script>
 </head>
 <body>
     <h1>OpenLP Controller</h1>
-    <input type='button' value='<- Previous Slide'
+    <h2>Service Manager</h2>
-        onclick='send_event("slidecontroller_live_previous");' />
+    <div id="service"></div>
-    <input type='button' value='Next Slide ->'
+    <p><em>(Click service item to go live.)</em></p>
-        onclick='send_event("slidecontroller_live_next");' />
+    <fieldset>
-    <br/>
+        <legend>Controls</legend>
-    <input type='button' value='<- Previous Item'
+        <div id="service-buttons">
-        onclick='send_event("servicemanager_previous_item");' />
+            <input type="button" value="Refresh Service" id="servicemanager_list_request" />
-    <input type='button' value='Next Item ->'
+        </div>
-        onclick='send_event("servicemanager_next_item");' />
+        <div id="item-buttons">
-    <br/>
+            <input type="button" value="&lt;- Previous Item" id="servicemanager_previous_item" />
-    <input type='button' value='Blank'
+            <input type="button" value="Next Item -&gt;" id="servicemanager_next_item" />
-        onclick='send_event("slidecontroller_live_blank");' />
+        </div>
-    <input type='button' value='Unblank'
+    </fieldset>
-        onclick='send_event("slidecontroller_live_unblank");' />
-    <br/>
-    <label>Alert text</label><input id='alert' type='text' />
-    <input type='button' value='Send'
-        onclick='send_event("alerts_text",
-        document.getElementById("alert").value);' />
     <hr>
-    <input type='button' value='Order of service'
+    <h2>Slide Controller</h2>
-        onclick='send_event("servicemanager_list_request");'>
+    <div id="current-item"></div>
-    <i>(Click service item to go live.)</i>
+    <p><em>(Click verse to display.)</em></p>
-    <div id='service'></div>
+    <fieldset>
+        <legend>Controls</legend>
+        <div id="item-buttons">
+            <input type="button" value="Refresh Item" id="slidecontroller_live_text_request" />
+        </div>
+        <div id="slide-buttons">
+            <input type="button" value="&lt;- Previous Slide" id="slidecontroller_live_previous" />
+            <input type="button" value="Next Slide -&gt;" id="slidecontroller_live_next" />
+        </div>
+    </fieldset>
     <hr>
-    <input type='button' value='Current item'
+    <h2>Miscellaneous</h2>
-        onclick='send_event("slidecontroller_live_text_request");'>
+    <div id="display-buttons">
-    <i>(Click verse to display.)</i>
+        <input type="button" value="Blank" id="slidecontroller_live_blank" />
-    <div id='currentitem'></div>
+        <input type="button" value="Unblank" id="slidecontroller_live_unblank" />
+    </div>
+    <div id="alert-details">
+        <label for="alert-text">Alert text:</label>
+        <input type="text" id="alert-text" />
+        <input type="button" value="Send" id="alert-send" />
+    </div>
     <hr>
-    <a href="http://www.openlp.org/">OpenLP website</a>
+    <a href="http://openlp.org/">OpenLP website</a>
 </body>
 </html>
 

openlp/plugins/remotes/html/openlp.js

@@ -63,33 +63,42 @@ OpenLP.Namespace.create("OpenLP.Events", {
   // Local variables
   onload_functions: Array(),
   // Functions
-  load: function (func) {
+  bindLoad: function (func) {
     this.onload_functions.append(func);
   },
-  click: function (selector, func) {
+  bindClick: function (selector, func) {
     $(selector).bind("click", func);
   },
-  change: function (selector, func) {
+  bindChange: function (selector, func) {
     $(selector).bind("change", func);
   },
-  submit: function (selector, func) {
+  bindSubmit: function (selector, func) {
     $(selector).bind("submit", func);
   },
-  blur: function (selector, func) {
+  bindBlur: function (selector, func) {
     $(selector).bind("blur", func);
   },
-  paste: function (selector, func) {
+  bindPaste: function (selector, func) {
     $(selector).bind("paste", func);
   },
-  keyup: function (selector, func) {
+  bindKeyUp: function (selector, func) {
     $(selector).bind("keyup", func);
   },
-  keydown: function (selector, func) {
+  bindKeyDown: function (selector, func) {
     $(selector).bind("keydown", func);
   },
-  keypress: function (selector, func) {
+  bindKeyPress: function (selector, func) {
     $(selector).bind("keypress", func);
   },
+  bindMouseEnter: function (selector, func) {
+    $(selector).bind("mouseenter", func);
+  },
+  bindMouseLeave: function (selector, func) {
+    $(selector).bind("mouseleave", func);
+  },
+  liveClick: function (selector, func) {
+    $(selector).live("click", func);
+  },
   getElement: function(event) {
     var targ;
     if (!event) {
@@ -116,8 +125,115 @@ OpenLP.Namespace.create("OpenLP.Events", {
 });
 
 OpenLP.Namespace.create("OpenLP.Remote", {
-    sendEvent: function (event_name, event_data)
+    sendEvent: function (eventName, eventData)
     {
+        var url = "/";
+        if (eventName.substr(-8) == "_request")
+        {
+            url += "request";
+        }
+        else
+        {
+            url += "send";
+        }
+        url += "/" + eventName;
+        var args = {};
+        if (eventData != null && eventData != "")
+        {
+            args.q = $.parseJSON(eventData);
+        }
+        $.ajax({
+            url: url,
+            dataType: "json",
+            data: args,
+            success: function (data)
+            {
+                OpenLP.Remote.handleEvent(eventName, data);
+            },
+            error: function (xhr, textStatus, errorThrown)
+            {
+                if (eventName == "remotes_poll_request")
+                {
+                    OpenLP.Remote.handleEvent("remotes_poll_request");
+                }
+            }
+        });
+    },
+    handleEvent: function (eventName, eventData)
+    {
+        switch (eventName)
+        {
+            case "servicemanager_list_request":
+                var table = $("<table>");
+                $.each(eventData, function (row, item) {
+                    var trow = $("<tr>")
+                        .attr("value", parseInt(row))
+                        .click(OpenLP.Remote.sendSetItem);
+                    if (item["selected"])
+                    {
+                        trow.addClass("selected");
+                    }
+                    trow.append($("<td>").text(parseInt(row) + 1));
+                    trow.append($("<td>").text(item["title"]));
+                    trow.append($("<td>").text(item["plugin"]));
+                    trow.append($("<td>").text("Notes: " + item["notes"]));
+                    table.append(trow);
+                });
+                $("#service").html(table);
+                break;
+            case "slidecontroller_live_text_request":
+                var table = $("<table>");
+                $.each(eventData, function (row, item) {
+                    var trow = $("<tr>")
+                        .attr("value", parseInt(row))
+                        .click(OpenLP.Remote.sendLiveSet);
+                    if (item["selected"])
+                    {
+                        trow.addClass("selected");
+                    }
+                    trow.append($("<td>").text(item["tag"]));
+                    trow.append($("<td>").text(item["text"] ? item["text"].replace(/\\n/g, '<br />') : ""));
+                    table.append(trow);
+                });
+                $("#current-item").html(table);
+                break;
+            case "remotes_poll_request":
+                OpenLP.Remote.sendEvent("remotes_poll_request");
+                OpenLP.Remote.sendEvent("servicemanager_list_request");
+                OpenLP.Remote.sendEvent("slidecontroller_live_text_request");
+                break;
+        }
+    },
+    sendLiveSet: function (e)
+    {
+        var id = OpenLP.Events.getElement(e).parent().attr("value");
+        OpenLP.Remote.sendEvent("slidecontroller_live_set", id);
+        return false;
+    },
+    sendSetItem: function (e)
+    {
+        var id = OpenLP.Events.getElement(e).parent().attr("value");
+        OpenLP.Remote.sendEvent("servicemanager_set_item", id);
+        return false;
+    },
+    sendAlert: function (e)
+    {
+        var alert_text = $("#alert-text").val();
+        OpenLP.Remote.sendEvent("alerts_text", alert_text);
+        return false;
+    },
+    buttonClick: function (e)
+    {
+        var id = OpenLP.Events.getElement(e).attr("id");
+        OpenLP.Remote.sendEvent(id);
         return false;
     }
-});
+});
+
+OpenLP.Events.bindLoad(function () {
+    OpenLP.Events.bindClick("input[type=button][id!=alert-send]", OpenLP.Remote.buttonClick);
+    OpenLP.Events.bindClick("#alert-send", OpenLP.Remote.sendAlert);
+    OpenLP.Remote.sendEvent("servicemanager_list_request");
+    OpenLP.Remote.sendEvent("slidecontroller_live_text_request");
+    OpenLP.Remote.sendEvent("remotes_poll_request");
+});

openlp/plugins/remotes/html/style.css

@@ -0,0 +1,26 @@
+body
+{
+    font-family: Lucida Grande, Lucida Sans, Arial, Helvetica, sans-serif;
+    font-size: 80%;
+}
+
+fieldset
+{
+    border: 1px solid #ccc;
+}
+
+td
+{
+    cursor: pointer;
+}
+
+tr:hover
+{
+    background-color: #7397dd;
+}
+
+.selected
+{
+    background-color: #4f7ed9;
+    font-weight: bold;
+}

openlp/plugins/remotes/lib/httpserver.py

@@ -245,7 +245,7 @@ class HttpConnection(object):
             Receiver.send_message(event, params)
         else:
             Receiver.send_message(event)
-        return u'OK'
+        return json.dumps([u'OK'])
 
     def process_request(self, event, params):
         """