[REL] External UI

Discussion in 'Released Mods' started by cola_colin, May 13, 2014.

  1. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    Release v1.0.0
    I think it works at least on chrome on my machine xD, needs people testing it.

    [​IMG]

    This can now do the following from inside the browser without PA launched:
    - List games
    - Allows you to join/spectate them (starts PA basically)
    - Allows you to create a new game (starts PA as well)
    - You can throttle the polling speed for games if you want. Default is 3 seconds, PA ingame has 1 second. PA itself constantly downloads 250kb/s when viewing the server browser. External UI uses ~25kb/s on a polling speed of 3 seconds. This is because External UI tells ubernet to use gzip, which reduces the download size for the game list quite a bit (hint at Uber: implement that in PA itself ;))

    I however think it only works in chrome. At least for some reason my firefox (which may be outdated though) shows a blank page and logs errors I don't understand right now. Firefox debugging tools are kind of different from chromes :( Tests and maybe bugfixes for firefox would be lovely.

    Other known issues:
    - do not open more than 1 tab. It does not like that right now
    - the list of game flickers a bit. I have NO IDEA why this happens. Please somebody help me xD

    So here is the how to set it up:
    1. Setup replay links, look here for it: https://forums.uberent.com/threads/info-how-to-open-replay-links.59212/
    1. Install node js: http://nodejs.org/download/
    2. Download this and unpack it wherever you want: https://github.com/pamods/external-ui/archive/v1.0.0.zip
    3. Copy the directory /mod/external-ui-receiver to your mods directory. On windows by default that is %LOCALAPPDATA%\Uber Entertainment\Planetary Annihilation\mods
    4. make sure the mod shows up in pamm and is enabled
    5. create a textfile called conf.json in /src. It needs to contain this information:
    Code:
    {
        "user": "your ubernet username",
        "password": "your ubernet password, yes this needs to be stored and handled by this. If you are afraid of me you can read the whole code of the application.",
        "couiHost": "your path to the media directory of your pa, i.e.: C:/Program Files (x86)/PA/Planetary Annihilation/stable/media/ note that you should use / instead of \ and it needs to end with /",
        "pollingRate": 3000
    }
    6. Run install.bat
    7. Run start.bat. This should create a black window that tells you something like "logged in as <your displayname>" (do not close it until you want to quit external UI) and open External UI in your default browser. If the page does not load directly: F5 it. Note that External UI may only work on chrome. Needs tests and probably fixes for other browsers.


    =============
    on github: https://github.com/pamods/external-ui
    if you want to experiment you can try it right now.

    So this is about running parts of the UI of PA inside a normal webbrowser. Not directly as file:// things, but as a local webserver on 127.0.0.1 of your machine, that uses the PA directory to get the UI files.
    The idea here is that it is easier to handle and allows for a pa.exe (cpu/ram expensive application after all) free view of the server list, people online in the ubernet social thing, etc. pp. If you have fancy ideas, please share them ;)
    What this cannot do is actually run the game inside a normal browser. That's not my target here. I just want to create an external client, one that is easier to handle than pa.exe. Think of how gpgnet/faf are sort of independent from fa.exe and how it makes things easier to handle, this is about doing that with PA.

    Since PA actually runs the UI in a webbrowser the stock UI can in fact be used for this. The "only" thing that needs to be done is to somehow replace the native interfaces of coherent with my own replacement that deals with i.e. ubernet things.

    I am aware of the following issues:

    - PA uses coui:// as the absolute host of everything. Easy to fix by a simple string replace "coui://" => "/"
    - PA loads files for mods from a different location, but serves them all under a virtual filesystem with the host "coui://". The pa ui webserver needs to handle this if it wants to support mods. (And it needs to, since i.e. PA Stats requires to run a bit of code in the server browser)
    - PA uses an object called "engine" that is provided by coherent to communicate with the native code. This implements an asynchronous way to exchange data with the native part of pa.exe. For this project I instead write a version of "engine" that call the backing webserver that in turn takes care of communication with the ubernet.
    - PA uses multiple tabs within coherent that are displayed in "panels". This is kind of like iframes in a normal browser. It enables PA to continue showing the ubernet social thing even when you switch scenes. So far I have simply disabled this. I don't think I will implement a generic solution for this, but see further down for my plans.
    - Handling games from the lobby onwards needs to be within pa.exe. So the plan is to use startpa:// to launch PA when you i.e. join or create a game. In doing this it also needs to pass values from the session/local storage into PA. This is also important for mods like PA Stats.
    - communication with the ubernet basically means just communicating with a webservice. This is pretty easy to do from within the pa ui webserver I am writing. So far the authentification is handled by configuring the webserver.

    So what do I have right now?
    I have focused on the server browser for now. My first target is to list games and join them from inside the browser. I have the listing working, joining isn't hard in itself, I just need to go sleep soon :p

    Screens outside of chrome, I have no pa.exe running whatsoever here:
    [​IMG]
    [​IMG]
    The list automatically refreshes just like you are used to it from PA.

    So how have I implemented this:
    - I use a local nodejs server that serves the files from inside the PA directory. However it applies some modifications to replace coui:// and replace the coherent api.
    - The browser talks to nodejs and nodejs talks to the ubernet. nodejs knows my ubernet credentials for this.
    - The communication between nodejs and the browser is done by faking the engine object so instead of native coherent calls it does webservice calls to the nodejs server.

    The next goal is to add the uberbar and make it work. So you can i.e. chat with your friends in PA without having to launch PA.
    Last edited: May 17, 2014
  2. thetrophysystem

    thetrophysystem Post Master General

    Messages:
    7,050
    Likes Received:
    2,874
    "cola_colin, 10 minutes ago"

    ...(or thirty)?
    tehtrekd likes this.
  3. mered4

    mered4 Post Master General

    Messages:
    4,083
    Likes Received:
    3,149
    *link missing and/or broken. Care to try again?*
  4. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    Sorry I had to write a wall of text :p
  5. proeleert

    proeleert Post Master General

    Messages:
    1,681
    Likes Received:
    1,656
    FYI: I have updated your readme.md a bit.

    This is really awesome.
    cola_colin likes this.
  6. thetrophysystem

    thetrophysystem Post Master General

    Messages:
    7,050
    Likes Received:
    2,874
    This is pretty badass. Makes me feel bad for harassing you on your timing.

    I'd test use this. Give feedback and see if it works for me. Not sure if I can help building it.
  7. Gorbles

    Gorbles Post Master General

    Messages:
    1,831
    Likes Received:
    1,420
    I . . . what.

    Woah.
  8. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
  9. cwarner7264

    cwarner7264 Moderator Alumni

    Messages:
    4,460
    Likes Received:
    5,390
    You know how you can use Chrome to turn things into 'webapps'?

    If there was ever a practical use for that, this is it.
  10. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    I have no idea what that is supposed to be.
  11. cwarner7264

    cwarner7264 Moderator Alumni

    Messages:
    4,460
    Likes Received:
    5,390
    Well, it's basically taking a bookmark and placing it on your desktop.

    Options > Tools > Create application shortcuts
  12. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    I have no chrome handy right now. So that bookmark on my desktop is just a link that opens the webpage?
  13. cwarner7264

    cwarner7264 Moderator Alumni

    Messages:
    4,460
    Likes Received:
    5,390
    Yup. In it's own window (i.e. no URL bar)
    cola_colin likes this.
  14. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    Ah. Yeah that may be cool.
  15. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    Pushed an update. Join game works now. Meaning I can click join game in the browser and it will start PA, login and join that game all by itself.

    - There is a mod in the folder /mod. You need it to make PA understand the join command. The links use the startpa:// protocol, so if you are setup for replays it's okay.
    - The startpa:// link encodes a json blob in base64 to make it work as a cmd parameter.
    - The autologin currently passes the ubernet credentials (as part of the base64 blob) and not a session ticket. This is because I dunno how to make a URL that invokes pa.exe --ticket <ticket> --uioptions "json" I might look into this further, but for now it works. (Actually I think I have a hacky idea...not, would probably need a launcher program)
    - So far no support for mods, however I added a hack into the mod to make it work for PA Stats, so a game joined via this will work fine on PA Stats. Any other mods that require to collect data in the server browser?
    Last edited: May 14, 2014
  16. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    That's btw completely awesome for this:
    [​IMG]

    =>

    [​IMG]

    this looks like PA, but look at the title bar: It is not. That's a browser window showing the server browser. (I need to fix that title xD)

    server startup for this is btw like 2 or 3 seconds
    opening the chrome webapp is another 2 to 3 seconds until it shows games.

    Would anyone like to make a nice icon for this?
  17. cptconundrum

    cptconundrum Post Master General

    Messages:
    4,186
    Likes Received:
    4,900
    God tier: rebuild the entire client engine in webGL. :D
    totalannihilation and LavaSnake like this.
  18. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    God^2 tier: make it actually have a playable framerate.

    This is just so awesome. Your work is amazing Cola_Colin!
  19. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    Version 1.0.0 released. Lists games, lets you join/spectate and create them. Changes a few UI things to make it look good. May only work in chrome.
  20. Mereth

    Mereth Active Member

    Messages:
    330
    Likes Received:
    164
    Did you considered using something like atom-shell for a fully integrated & standalone application ?
    cola_colin likes this.

Share This Page