Building SageTV web UI JAR Files

[Taddeusz]

I want to make modifications to the SageTV web UI but I'm having trouble building the JAR. I've tried using the jardesc file that's included in the project but Eclipse doesn't like the entry point.

I've already posted to the proper thread but not gotten a reply. Any ideas how I can make this work?

My goal is to modernize the interface. The first thing I want to do is change to using a tr onclick event rather than the "a href" links that are scattered through each row.

Ideally it would be nice to create an interface that is more client centric rather than the java servlet approach it currently employs. Utilizing the current sagex web service to simply get data rather than the current method of servlets that generate the actual html. Seems really outdated considering today's technology choices.

Again, if anyone has any idea how I can get this to build successfully it would be greatly appreciated.

FYI, the source code is available at:

http://sourceforge.net/p/sagetv-addo...i/master/tree/

[stuckless]

While I can't help with the jar (I've never worked on the web server), personally, given your goals, I'd just start with a new project.

I started this a couple times, but I've never really finished anything.

I don't think there is anything in the existing jsp/servlet based web server that is really needed from this project if you are going to build a javascript/REST based client.

[Taddeusz]

Yeah, ideally that's what I'd like to do. The plus side is that the web services are already there with sagex. All that would need to be done is a front end.

Would also be nice to migrate away from the basic http authentication that is used now. While it works well it is frustrating with iOS because it won't auto fill those passwords even if you have it saved in your iCloud keychain from a Mac. iOS will only fill web forms usernames and passwords. You can include the username and password in the URL but that is insecure. iOS also gives a big fat warning about the site not being legitimate or something like that before allowing you to browse to it. Either way the basic http auth is extremely annoying on iOS and needs to be removed from SageTV services.

We need a better central way to authenticate SageTV web services that doesn't rely on basic http auth.

[stuckless]

Originally Posted by Taddeusz

Yeah, ideally that's what I'd like to do. The plus side is that the web services are already there with sagex. All that would need to be done is a front end.

Would also be nice to migrate away from the basic http authentication that is used now. While it works well it is frustrating with iOS because it won't auto fill those passwords even if you have it saved in your iCloud keychain from a Mac. iOS will only fill web forms usernames and passwords. You can include the username and password in the URL but that is insecure. iOS also gives a big fat warning about the site not being legitimate or something like that before allowing you to browse to it. Either way the basic http auth is extremely annoying on iOS and needs to be removed from SageTV services.

We need a better central way to authenticate SageTV web services that doesn't rely on basic http auth.

While I agree about the basic auth, that's a much bigger issue, and I'm not sure it's required if you are writing a JavaScript application. Are you suggesting that on iOS, if you use a javascript REST service and you supply the Authorization header, that iOS will still warn about the request? That would surprise me (well, it's Apple, so maybe not surprise me).

I would think that you could create a login page, and optionally store the sagetv username/password in localstorage (encrypted). And then in the JavaScript REST request, you can pass the authorization in the service header. For the WAR project configuration, you'll just not enable user authentication since you'll be handling it in your application.

But, yeah, ultimately, it would good to re-do the api layer an not use authentication. Maybe use an access token model, or something like that.

Have you given any thoughts to what technologies to use?

When I was looking at this, I started to look at Material Design Lite. You could use something like Polymer or Angular, but, I though that the MDL would be a lighter choice.

[Taddeusz]

Originally Posted by stuckless

While I agree about the basic auth, that's a much bigger issue, and I'm not sure it's required if you are writing a JavaScript application. Are you suggesting that on iOS, if you use a javascript REST service and you supply the Authorization header, that iOS will still warn about the request? That would surprise me (well, it's Apple, so maybe not surprise me).

I assume you mean the standard:

http://username:password@host

On iOS you get the following warning from the attached image. It can be bypassed but it is still annoying.

Originally Posted by stuckless

I would think that you could create a login page, and optionally store the sagetv username/password in localstorage (encrypted). And then in the JavaScript REST request, you can pass the authorization in the service header. For the WAR project configuration, you'll just not enable user authentication since you'll be handling it in your application.

But, yeah, ultimately, it would good to re-do the api layer an not use authentication. Maybe use an access token model, or something like that.

I'll have to investigate this further. I've not yet done a WAR project. It would be nice to make a central authentication agent separate from any other WAR. But I'm not sure how or if that could work in Jetty.

I don't know if the API's are available for authentication but SageTV already has user access via Placeshifter. There may be some way to extend that for other uses?

Originally Posted by stuckless

Have you given any thoughts to what technologies to use?

When I was looking at this, I started to look at Material Design Lite. You could use something like Polymer or Angular, but, I though that the MDL would be a lighter choice.

I don't know that I'm a huge fan of Google's Material Design. Although I'm definitely not a fan of the current SageTV web interface styling either. Definitely better than nothing though.

I'm a relatively new developer. Professionally I've most recently been working on Windows and ASP.NET MVC. I've also done iOS and a little Android development.

So when I can get the time this could be a good learning experience. Suggestions are definitely welcome though.

[Taddeusz]

After experimenting some with MDL today I can't say that I like it a whole lot.

1. I'm not a huge fan of their Material Design on Android.
2. The color scheming seem to be quite limited. Especially if you want a locally hosted copy.
3. Not sure how well the SageTV management workflow would fit into MDL.
4. To go with my first point. I really think it's kind of ugly.

[stuckless]

Originally Posted by Taddeusz

After experimenting some with MDL today I can't say that I like it a whole lot.

1. I'm not a huge fan of their Material Design on Android.
2. The color scheming seem to be quite limited. Especially if you want a locally hosted copy.
3. Not sure how well the SageTV management workflow would fit into MDL.
4. To go with my first point. I really think it's kind of ugly.

I was just suggesting stuff Feel free to use any windows, iOS, or other web ui library that appeals to your senses. My original point was just that you don't need to start with the existing web project.

[Taddeusz]

Originally Posted by stuckless

I was just suggesting stuff Feel free to use any windows, iOS, or other web ui library that appeals to your senses. My original point was just that you don't need to start with the existing web project.

I'm sorry, I didn't mean to sound so crappy. I really appreciate the suggestions. I have been thinking about styling. Just not sure how it should look.

Looking at Angular today it appears to be good for doing the dynamic parts of the page compared to trying to do it with straight jQuery or even standard JavaScript. Less code on the front end anyway.

[stuckless]

np... You might consider Bootstrap as well.

To demonstrate what I saying about using the username/password, here's a simple EndPoint class that has a .send() method that will send a request from the browser to the server and get back a reply. If you serve this up from server and set the CORS header, you can communicate from your local dev box to a remote sagetv server for testing.

/// <reference path="jquery.d.ts" />
var EndPoint = (function () {
    function EndPoint(url, username, password) {
        this.url = url;
        this.username = username;
        this.password = password;
    }
    EndPoint.prototype.send = function (cmd, onOK, onError) {
        var url = this.url + this.build(cmd);
        $.ajax(url, {
            username: this.username,
            password: this.password,
            dataType: 'json',
            method: 'GET',
            xhrFields: {
                withCredentials: true
            },
            success: onOK,
            error: (onError == null ? this.onDefaultError : onError)
        });
    };
    EndPoint.prototype.expression = function (expr, onOK, onError) {
        this.send({ command: 'EvaluateExpression', args: [expr] }, onOK, onError);
    };
    EndPoint.prototype.onDefaultError = function (xhr, status, error) {
        console.error("Request Failed", status, error, xhr);
    };
    EndPoint.prototype.build = function (sagex) {
        var cmd = "?c=";
        if (sagex.command) {
            cmd += encodeURIComponent(sagex.command);
            if (sagex.args) {
                for (var i = 0; i < sagex.args.length; i++) {
                    cmd += ("&" + (i + 1) + "=" + encodeURIComponent(sagex.args[i]));
                    i++;
                }
            }
        }
        else {
            if (sagex.expression == null)
                throw new Error("'expression' is required if 'command' is null");
            cmd += "EvaluateExpression";
            cmd += ("&1=" + encodeURIComponent(sagex.expression));
        }
        if (sagex.fields) {
            var filter = "";
            for (var i = 0; i < sagex.fields.length; i++) {
                if (filter.length > 0)
                    filter += "|";
                filter += sagex.fields[i];
            }
            cmd += ("&filter=" + encodeURIComponent(filter));
        }
        cmd += ("&encoder=json");
        return cmd;
    };
    return EndPoint;
})();


var endPoint = new EndPoint("http://192.168.1.10:8080/sagex/api", "sage", "frey");
endPoint.send({
    expression: "GetScheduledRecordings()",
    // only return these fields
    fields: [
        'AiringStartTime',
        'AiringTitle',
        'Show',
        'ShowEpisode',
        'ShowDescription'
    ]
}, function (json) {
    $.each(json.Result, function (i, item) {
        console.log("Scheduled Item", item);
    });
});
//# sourceMappingURL=app.js.map

Basically before the EndPoint is used, you'd need to get the username/password, probably by prompting the user to enter the user/pass in an html form and then save it off for later.

Independent of your UI choices, you can pretty much do anything from JavaScript. The exrpression can be any valid SageTV expression which mean you can use any types of expressions that you see in the STV. And you can even write your own sagex services javascript file and can that from the browser as well.

Good luck with whatever you do...

FYI... the above code uses jQuery.