Page 1 of 1

Tabular text output for MFDs/mission screens

Posted: Fri Oct 28, 2016 9:25 am
by alaric of rothestes
Hi all!,

This is my first post so be gentle :)

I have been working on several different OXP ideas and realized that quite often I want to build text with a tabular layout. I have also noticed in other OXPs there is a lot of re-inventing of this wheel, so I decided to share my work on this to make life easier for other developers.

I can't figure out how to attach files (maybe I don't have enough forum cred yet), so here is a pastebin link of the source. I should give a hat-tip to cim as oolite-passenger-contracts.js was my reference when I started this. I am re-learning Javascript after a brief dabble in the late 90's (C is my native language :) )

So, the easiest way to explain is via example. Therefore, here is one:

Let's say I was working on an OXP which detects impending mass-lock whilst the Torus is engaged and I want to provide probable IDs of the locking ship(s) via an MFD ( :wink: ). I could construct a quick mock-up of the MFD using the following code:

Code: Select all

	this._buildTabularText = worldScripts["alaric-oxp-utilities"]._buildTabularText.bind(worldScripts["alaric-oxp-utilities"]);
	
	var text = this._buildTabularText(
		[
			[ /* header */
				{ width: 14, alignment: "CENTER", text: "KV-32 Torus Field Analyser" }
			],

			[ /* line spacer */
			],

			[ /* row 1 */
				{ width: 7, alignment: "LEFT", text: "Bogey" },
				{ width: 7, alignment: "RIGHT", text: "Discrepancy" }
			],

			[ /* row 2 */
				{ width: 11, alignment: "LEFT", text: "Cobra Mk III" },
				{ width:  3, alignment: "RIGHT", text: "10%" }
			],

			[ /* row 3 */
				{ width: 11, text: "Krait" },
				{ width:  3, alignment: "RIGHT", text: "7%" }
			],

			[ /* row 4 */
				{ width: 11, alignment: "LEFT", text: "Unrealisticly long ship class name" },
				{ width:  3, alignment: "RIGHT", text: "100%" }
			],

			[ /* row 5 */
				{ width: 11, alignment: "LEFT", text: "Unrealisticly long name without ellipses", ellipses: false },
				{ width:  3, alignment: "RIGHT", text: "100%" }
			],

			[
			],

			/* footer */
			[
				{ width: 14, alignment: "CENTER", text: "13.4 seconds to field collapse" }
			]
		]
		
	);
	
	player.ship.setMultiFunctionText("torus-field-analyser", text, false);


Which results in:
Image

I apologise for misspelling Unrealistically.

The advantage of the array-of-array-of-objects approach is that it is quite easy to build the array dynamically, rather than statically as in this example, so when it comes to implementing the real MFD my life should be much easier!

Anyway, if you find any bugs or have any suggestions I would love to hear them!

Regards,

alaric

Re: Tabular text output for MFDs/mission screens

Posted: Fri Oct 28, 2016 9:34 am
by Cody
Welcome aboard, Commander!
alaric of rothestes wrote:
I can't figure out how to attach files...
You can't attach files on this forum - all such stuff has to be hosted elsewhere and linked (as above).

Re: Tabular text output for MFDs/mission screens

Posted: Fri Oct 28, 2016 9:41 am
by alaric of rothestes
Cody wrote:
You can't attach files on this forum - all such stuff has to be hosted elsewhere and linked (as above).
Well, that explains that problem! I guess we get a bit spoiled these days with forum software :)

And thank you for the welcome!

Re: Tabular text output for MFDs/mission screens

Posted: Fri Oct 28, 2016 9:46 am
by Cody
<grins> Nothing flash about this forum's software - it's basic!

Re: Tabular text output for MFDs/mission screens

Posted: Fri Oct 28, 2016 10:11 am
by Norby
Hi alaric, welcome in Oolite forum!

Your solution is very elegant, I like it, regardless of I use a variant in [wiki]CombatMFD[/wiki] which is based on an MFD of spara.

Maybe the usage would be easier without the width parameter, assuming the default width from the given text and truncating the side which is longer than the half if not enough space to display it before the end of the other.

A question is whether you support 3 column tables or not, when somebody give both left, right and center data.

Re: Tabular text output for MFDs/mission screens

Posted: Fri Oct 28, 2016 10:18 am
by alaric of rothestes
Norby wrote:
Hi alaric, welcome in Oolite forum!

Your solution is very elegant, I like it, regardless of I use a variant in [wiki]CombatMFD[/wiki] which is based on an MFD of spara.

Maybe the usage would be easier without the width parameter, assuming the default width from the given text and truncating the side which is longer than the half if not enough space to display it before the end of the other.

A question is whether you support 3 column tables or not, when somebody give both left, right and center data.
Rows can have any number of columns (and it is not necessary to have the same number of columns in each row - that is why I called it 'tabular' rather than 'table' :)) - this is why the width is required. 'width' is the width of the cell. The alignment is relative to the width of the cell and you can have any alignment you like within a cell. The width is also used to determine if a string needs to be truncated.

Also, Norby, whilst I have your attention: Thank you for including the "$Range" function in your variable mass-lock OXP! It is making my life much easier in making my mass-lock detector work when your OXP is installed.

Re: Tabular text output for MFDs/mission screens

Posted: Fri Oct 28, 2016 10:48 am
by alaric of rothestes
Here's an example with more than 2 columns:

Image

The code to create this was:

Code: Select all

	var text = this._buildTabularText(
		[
			[ /* header */
				{ width: 14, alignment: "CENTER", text: "KV-32 Torus Field Analyser" }
			],

			[ /* line spacer */
			],

			[ /* row 1 */
				{ width: 1.5, text: "" },	// spacer
				{ width: 6.5, alignment: "LEFT", text: "Bogey" },
				{ width: 6,   alignment: "RIGHT", text: "Discrepancy" }
			],

			[ /* row 2 */
				{ width:   1, alignment: "RIGHT", text: "1" },
				{ width: 0.5, alignment: "RIGHT", text: "" },	// spacer
				{ width:  10, alignment: "LEFT", text: "Cobra Mk III" },
				{ width: 2.5, alignment: "RIGHT", text: "10%" }
			],

			[ /* row 3 */
				{ width:   1, alignment: "RIGHT", text: "2" },
				{ width: 0.5, alignment: "RIGHT", text: "" },	// spacer
				{ width:  10, text: "Krait" },
				{ width: 2.5, alignment: "RIGHT", text: "7%" }
			],

			[ /* row 4 */
				{ width:   1, alignment: "RIGHT", text: "3" },
				{ width: 0.5, alignment: "RIGHT", text: "" },	// spacer
				{ width:  10, alignment: "LEFT", text: "Unrealisticly long ship class name" },
				{ width: 2.5, alignment: "RIGHT", text: "100%" }
			],

			[ /* row 5 */
				{ width:   1, alignment: "RIGHT", text: "4" },
				{ width: 0.5, alignment: "RIGHT", text: "" },	// spacer
				{ width:  10, alignment: "LEFT", text: "Unrealisticly long name without ellipses", ellipses: false },
				{ width: 2.5, alignment: "RIGHT", text: "100%" }
			],

			[
			],

			[
				{ width: 14, alignment: "CENTER", text: "13.4 seconds to field collapse" }
			]
		]
		
	);