[1.0.x] KeRD - Kerbal Remote Display that runs in your browser - July 7th

[Lokaltog]

Kerbal Remote Display

About the project

KeRD is a remote display for Kerbal Space Program, written to work with data provided

by Telemachus. KeRD runs as a browser app, and is designed to run on a second monitor

(and soon available for tablets).

KeRD features a live 3D orbital map with markers, biome maps, a high contrast navball

and lots of data about your current flight.

It runs fine in any recent release of Chrome or Firefox, and has tablet support

(you may have to edit the default layout to make it fit your tablet or monitor).

Screenshots

You can check it out right now at http://kerd.space/ even if you don't have

Telemachus installed. Here's an album with some recent screenshots:

Javascript is disabled. View full album

Installation

1. Install Telemachus
   
2. Launch a craft (optionally attach a Telemachus antenna).
   
3. Visit http://kerd.space/ in a WebGL enabled browser.
   

Tablet usage instructions

1. Visit kerd.space (with Safari on the iPad, Chrome on android).
   
2. Optionally add a shortcut to the dashboard, on the iPad this will remove the browser borders when you open it.
   
3. Tap the bottom of the screen, you should see a narrow bar appear.
   
4. Tap again, this will open the menu.
   
5. Click the cog/settings icon to open the settings menu, in the settings menu change the IP to the machine that you're playing KSP on, then save your settings.
   
6. Optionally repeat step 3-4 and click the edit icon to enable the layout editing mode - this will allow you to remove parts of the UI so the interface will fit the screen.
   

Source code

The source code is available at https://github.com/Lokaltog/KeRD under the MIT license.

Contributing

I'd love to hear what you guys think, if you have any cool ideas please feel free to post them in this thread!

If you encounter any issues, please report them on GitHub or in this topic and I'll take a look at it right away.

Edited July 8, 2015 by Lokaltog

[HoloYolo]

Very interesting. When will the tablet app come out? I have a tablet and I'd love to use it.

[Lokaltog]

I'm working on it now, hopefully within a day or two! It mostly requires tweaking of the dimensions of various modules, but I don't want to spend a lot of time on it before I know that the base design works.

[kiwiak]

Nice work, finaly some use for my second monitor!

There was some mod that allowed displaying orbital map on second monitor but it just runned second copy of ksp, it was not wery performace friendly.

Have you thought of some classic map, like in regular telemachus? But with ground track orbit lines displayed (like in scansat).

[Lokaltog]

Yep, someone suggested a classic map with ground track lines on Reddit, I'm definitely going to see if I'll be able to implement this (maybe as a toggle button on the map view). It kinda depends if I'm able to wrap my head around the math involved!

[Scorp1579]

Whats the difference between the fustek telemachus antenna and the normal one?

[Lokaltog]

I'm not sure, both appear to work fine. I'm guessing it's just an aesthetic choice, or maybe they're at different positions in the tech tree.

[Rich]

Awesome work!

I'm not sure, both appear to work fine. I'm guessing it's just an aesthetic choice, or maybe they're at different positions in the tech tree.

Correct, the choice is purely aesthetic.

Do you mind if I add your project to this page?

[Lokaltog]

Not at all, go ahead!

I received a comment regarding displaying data from other mods earlier, do you know if it's possible to publish resource information from e.g TAC Life Support in Telemachus?

[Scorp1579]

It would be amazing if you could somehow integrate Hullcam VDS into it - So you can see your ships camera (not actually sure if this is possible but worth a try!)

[kiwiak]

Its impossible.

That woudl require KSP engine to render now scene, this mod just uses crude rendering on its own to display simple orbit map.

[Rich]

I received a comment regarding displaying data from other mods earlier, do you know if it's possible to publish resource information from e.g TAC Life Support in Telemachus?

If TAC Life Support exposes its resources using the KSP resource system, then yes, Telemachus should be able to read them. For example (using the Telemachus websocket API):

{"+":["r.resource[Water_TAC]"]}

[Lokaltog]

Awesome! Would that work out of the box with the current version of Telemachus or would it require changes to the plugin code?

[Scorp1579]

Trying to make hullcam vds work for me now via telemachus - Has anyone got any idea where to start?

[Fengist]

Initial thoughts.

1. Your html is not a flexible design. You have apparently hard coded it for a fixed width. Not everyone has a monitor big enough to display it.

2. Resources. While you show the basics, there are quite literally hundreds of modded resources.

[Scorp1579]

Its impossible.

That woudl require KSP engine to render now scene, this mod just uses crude rendering on its own to display simple orbit map.

I've seen the dev of telemachus had a camera working a while back though

[Lokaltog]

1. Your html is not a flexible design. You have apparently hard coded it for a fixed width.

Not everyone has a monitor big enough to display it.

2. Resources. While you show the basics, there are quite literally hundreds of modded resources.

Thanks for the comments!

1. I've done some tweaks to improve the design flexibility (automatically shrinking some modules to fit smaller screens, using the viewport width and height to scale the elements), the thing is that I haven't really decided how I want the modular design to work yet. I'm kind of leaning towards modularizing the design completely, splitting it into data providers and visualizers like gauges and displays, and allowing the user to customize it to their preferences - maybe with the ability to share layouts as e.g. JSON documents. I haven't done this yet as it requires a bit of work, I've kind of just whipped this thing up over a couple of days, but it's definitely on the long term todo list to improve this.

2. I'd like to include the ability to display any resource, but the API docs for Telemachus only referenced the vanilla resources so that's what I started with. If it's possible to display any resource like Rich mentioned above this will be implemented for sure!

[Raptor831]

First off, well done. Looks great!

Second, I'd really vote for a modular setup the user can customize. JSON would probably be perfect.

Also, what setup are you using to build this? I'm a front-end web developer by day, and I'm really curious to know. I checked the repo but I'm not familiar with Jade so I'm a bit lost.

[Lokaltog]

Thanks! I've looked at some options and other plugins for telemachus, and I'm going to start implementing a flexbox based modular layout soon. I'm thinking that it will work by allowing users to split sections of the interface horizontally or vertically (kind of how the current layout is defined), and resizing them (translating the proportions to the CSS flex-grow or flex-basis property). This should be simple to store in a JSON structure, and it's a modern and flexible way of defining a grid based layout. I think I'll also end up splitting the components into displays, gauges, etc. and allow the user to link them to specific data providers, while also allowing "static" plugins like the map display, which wouldn't work well with a dynamic data source. This is just initial thoughts, let me know if you guys have any suggestions!

The setup is something I've used for a lot of projects lately, it's basically a single-page app built on Vue.js (a simpler, faster alternative to frameworks like Angular), it works well with an API backend, as well as for a static page like this where the websocket connection is the data provider. It's compiling Jade templates and SASS stylesheets into a component based system using Webpack. It's a lot to explain, but look up webpack, it's handling the assembly of the components into a single-page app.

The app itself basically works by telling Vue that variables from the websocket have changed, and Vue automatically updates the corresponding DOM elements with the updated data. Some plugins have watchers on specific variables and update their presentation whenever these variables are changed. I'll write docs on the project wiki later once the base app is done, it's kind of pointless documenting it when it's changing so rapidly. If you have any questions on the project layout let me know and I'd be happy to help you out!

[Raptor831]

Cool, thanks. Oh, to be able to use flexbox. At work we still have to support IE 8.

[Skalou]

very promising!

i tryed with firefox, it refits well by resizing with "ctrl +mouse whell"

[Lokaltog]

Just uploaded a new navball texture (not live yet), what do you guys think?

[Probus]

Just uploaded a new navball texture (not live yet), what do you guys think?

Pretty

[Raptor831]

Looks good to me.

[Lokaltog]

Thought I'd give you a heads up on what's being added with the next update (hopefully released today or tomorrow):

• Support for TAC Life Support resources (see screenshot below)
  
• Fully customizable layout
  
• New navball
  
• High-res textures
  
• Updated skybox
  
• All celestial bodies in the Kerbol system have been added and can be browsed on the orbital display