Mission screen - Revision history

Phkb: Updating BB links

2024-02-29T02:10:52Z

Updating BB links

Cholmondely: Added note and picture

2023-08-25T09:44:02Z

Added note and picture

Cholmondely: Added Phkb's "RegisterKey.oxp"s

2023-08-25T09:39:56Z

Added Phkb's "RegisterKey.oxp"s

Cholmondely: /* Links */ Added another

2023-03-29T11:15:43Z

‎Links: Added another

Cholmondely: /* Backdrop */ Added another note

2023-03-06T11:02:19Z

‎Backdrop: Added another note

Alnivel: /* Tabular layout */ Added picture

2023-02-12T15:47:13Z

‎Tabular layout: Added picture

Alnivel: /* Tab stops */ Reworded a bit for clarity

2023-02-12T15:23:09Z

‎Tab stops: Reworded a bit for clarity

Alnivel: /* Tab stops */ Added code of padText functions

2023-02-12T12:35:07Z

‎Tab stops: Added code of padText functions

Alnivel: /* Alignment */ Added about padText- functions, no code yet

2023-02-12T10:54:40Z

‎Alignment: Added about padText- functions, no code yet

Cholmondely: /* Links */ Added a little more

2023-02-11T20:53:34Z

‎Links: Added a little more

@@ Line 38: / Line 38: @@
 == Colour ==
-:Choices can be non-yellow (have a look at the various contracts interfaces in 1.77) but there is a more fundamental limitation of the current UI code that all text on a particular line has to be the same colour. [http://www.aegidian.org/bb/viewtopic.php?p=203777#p203777 Cim (2013)]
+:Choices can be non-yellow (have a look at the various contracts interfaces in 1.77) but there is a more fundamental limitation of the current UI code that all text on a particular line has to be the same colour. [https://bb.oolite.space/viewtopic.php?p=203777#p203777 Cim (2013)]
-:Code for [http://www.aegidian.org/bb/viewtopic.php?p=283402#p283402 Colour change]
+:Code for [https://bb.oolite.space/viewtopic.php?p=283402#p283402 Colour change]
 [[File:First Finance Loan Management.png|right|300px]]
@@ Line 396: / Line 396: @@
 These can be prevented from appearing by other oxp's such as [[XenonUI]] which also create backdrops for the docked screens.
-Using ''overlay'' helps, but also see Phkb's comments [http://aegidian.org/bb/viewtopic.php?p=282180#p282180 here] (for Dark Side solutions) and [http://aegidian.org/bb/viewtopic.php?p=278857#p278857 here] (using Library config).
+Using ''overlay'' helps, but also see Phkb's comments [https://bb.oolite.space/viewtopic.php?p=282180#p282180 here] (for Dark Side solutions) and [https://bb.oolite.space/viewtopic.php?p=278857#p278857 here] (using Library config).
 === Problems: Blurry/Wrong size ===
-See [http://aegidian.org/bb/viewtopic.php?f=4&t=17487 Background image sizes] (2015)
+See [https://bb.oolite.space/viewtopic.php?f=4&t=17487 Background image sizes] (2015)
 == Exit Screen ==
@@ Line 469: / Line 469: @@
 == Links ==
-*[http://aegidian.org/bb/viewtopic.php?p=276448#p276448 Creating a mission screen] for textual messages (2021)
+*[https://bb.oolite.space/viewtopic.php?p=276448#p276448 Creating a mission screen] for textual messages (2021)
-*[http://www.aegidian.org/bb/viewtopic.php?p=283395#p283395 Changing text colour] (2022)
+*[https://bb.oolite.space/viewtopic.php?p=283395#p283395 Changing text colour] (2022)
-*[http://www.aegidian.org/bb/viewtopic.php?f=4&t=18713 New Line in mission.runScreen?] (2017)
+*[https://bb.oolite.space/viewtopic.php?f=4&t=18713 New Line in mission.runScreen?] (2017)
-*[http://www.aegidian.org/bb/viewtopic.php?f=4&t=18414 Tabular text output for MFDs/mission screens] (2016)
+*[https://bb.oolite.space/viewtopic.php?f=4&t=18414 Tabular text output for MFDs/mission screens] (2016)
-*[http://aegidian.org/bb/viewtopic.php?f=4&t=8494 Mission screen images] (2010) Overlays & backgrounds: combinations and scaling
+*[https://bb.oolite.space/viewtopic.php?f=4&t=8494 Mission screen images] (2010) Overlays & backgrounds: combinations and scaling
 === Useful OXPs ===
 *[[HDBG]] - High Definition BackGrounds - provides background pictures for Mission Screens
@@ Line 480: / Line 480: @@
 === Proofs of concept ===
-*[http://www.aegidian.org/bb/viewtopic.php?p=290407#p290407 3 Register Key.oxp demos] (Phkb 2023) for using the v.1.91 recognition of more than just the "enter" key on missions screens
+*[https://bb.oolite.space/viewtopic.php?p=290407#p290407 3 Register Key.oxp demos] (Phkb 2023) for using the v.1.91 recognition of more than just the "enter" key on missions screens
 [[Category:Oolite scripting]]

@@ Line 2: / Line 2: @@
 [[File:Hints.png|right|320px]]
-Mission screens started off as screens which allow the player to interface with NPCs in a mission.oxp. They also allow other sorts of "communication" as in the conversation overheard in the bar in the [[Hints]] OXP.
+[[File:Telescope2Beta station options.jpg|right|320px]]
 They can have backdrops, changes in text and allow choices for the player.

@@ Line 478: / Line 478: @@
 *[[Library OXP]] - enables animated Mission Screens
+=== Proofs of concept ===
 [[Category:Oolite scripting]]

@@ Line 472: / Line 472: @@
 *[http://www.aegidian.org/bb/viewtopic.php?f=4&t=18713 New Line in mission.runScreen?] (2017)
 *[http://www.aegidian.org/bb/viewtopic.php?f=4&t=18414 Tabular text output for MFDs/mission screens] (2016)
 === Useful OXPs ===
 *[[HDBG]] - High Definition BackGrounds - provides background pictures for Mission Screens

@@ Line 392: / Line 392: @@
 or you can use ''overlay'' instead of ''background'' (less conflicts with other oxp's such as XenonUI which also tend to specify a background)
-=== Problems with Backdrop ===
+=== Problems: Invisible ===
 These can be prevented from appearing by other oxp's such as [[XenonUI]] which also create backdrops for the docked screens.
 Using ''overlay'' helps, but also see Phkb's comments [http://aegidian.org/bb/viewtopic.php?p=282180#p282180 here] (for Dark Side solutions) and [http://aegidian.org/bb/viewtopic.php?p=278857#p278857 here] (using Library config).
 == Exit Screen ==

@@ Line 167: / Line 167: @@
 var table = tableHeader + "\n" + tableRows.join("\n") + "\n\n";
 </pre>
 [[User:Alaric/KV-16 Owners Manual|Alaric's unfinished Torus-field-monitor OXZ]] contains handy function to help format text in tabular layout for use in mission screens/MFDs. See his alaric-oxp-utilities.js file:
 <pre style="max-width: max-content; max-height: 40vh; overflow-y: auto;">
 "use strict";

@@ Line 46: / Line 46: @@
 === Tab stops ===
-Although there are no built-in tabs, this behavior can be mimicked using helper functions. Below will be placed are just one of the implementations of the most basic and atomic functions - _limitText and _padTextLeft/Right/Around, but in various OXPs you can find them under other names, as well as others that can be a way more complex and specialized.
+Although there are no built-in tabs, they can be imitated with some JavaScript. Below you can find some of the basic functions for formating the text, but in various OXPs you can find them under other names, as well as others that can be a way more complex and specialized.
 However, their core principle remains the same - they add invisible characters to the string passed to them up to the desired width - just as you can do it in a text editor, by adding spaces you can get (almost) any kind of text tabulation. The functions, however, don't use a rather wide regular space, but a narrow hair space, which allows text to align more accurately.
-Text width is measured in ems and may vary depending on the font. To measure the length of text in a default forn, you can use <code>defaultFont.measureString</code>. The width of mission screen row equals to 32 ems.
+The unit of text width is em - the intrinsic unit size of a font. The mission screen is 32 em wide and text wider than that will wrap with breaks on spaces. You can measure the width of a string using <code>[[Oolite_JavaScript_Reference:_Global#defaultFont|defaultFont.measureString]]</code>.
-Here you can see one of the implementations of these functions. Inside the code there are comments that should help better understand how the functions work.
+Here you can see one of the implementations of <code>_limitText</code>, <code>_padTextLeft</code>, <code>_padTextRight</code> and <code>_padTextAround</code> functions. Feel free to use it in your work!
 <pre style="max-width: max-content; max-height: 40vh; overflow-y: auto;">
 /**

← Older revision		Revision as of 12:35, 12 February 2023
Line 49:		Line 49:
	However, their core principle remains the same - they add invisible characters to the string passed to them up to the desired width - just as you can do it in a text editor, by adding spaces you can get (almost) any kind of text tabulation. The functions, however, don't use a rather wide regular space, but a narrow hair space, which allows text to align more accurately.		However, their core principle remains the same - they add invisible characters to the string passed to them up to the desired width - just as you can do it in a text editor, by adding spaces you can get (almost) any kind of text tabulation. The functions, however, don't use a rather wide regular space, but a narrow hair space, which allows text to align more accurately.

		+	Text width is measured in ems and may vary depending on the font. To measure the length of text in a default forn, you can use <code>defaultFont.measureString</code>. The width of mission screen row equals to 32 ems.
		+
		+	Here you can see one of the implementations of these functions. Inside the code there are comments that should help better understand how the functions work.
		+	<pre style="max-width: max-content; max-height: 40vh; overflow-y: auto;">
		+	/**
		+	* The function cuts text to limitWidth if necessary, and adds an ellipsis in this case.
		+	* It's useful when you want to display text that may be larger than the available space, such as ship names.
		+	* Large text, if left unprocessed, can make the rest of the formatting go haywire.
		+	*
		+	* text - the string to make sure that it won't be longer than limitWidth
		+	* limitWidth - the maximum width of the result, in ems
		+	* result - the limited string
		+	*/
		+	this._limitText = function _limitText(text, limitWidth) {
		+	const ellipsis = "…";
		+
		+	var tmp = text;
		+
		+	while (defaultFont.measureString(tmp) > limitWidth) { // until text in wider than limit
		+	// remove from the text two last characters and add an ellipsis
		+	// two because we need to remove an ellipsis from previous iteration
		+	tmp = tmp.substring(0, tmp.length - 2) + ellipsis;
		+	}
		+
		+	return tmp;
		+	}
		+
		+	/**
		+	* The functions below add hair spaces to the text to make it have a desiredWidth,
		+	* but in case if text is too wide, the function do the _limitText instead.
		+	*
		+	* To reduce the duplication of code they all just shorcuts for more generic _padText
		+	*
		+	* text - the string that we want to have a desiredWidth
		+	* desiredWidth - the width of the result, in ems
		+	* result - the padded string
		+	*/
		+	this._padTextLeft = function _padTextLeft(text, desiredWidth) {
		+	return this._padText(text, desiredWidth, "left");
		+	}
		+
		+	this._padTextRight = function _padTextRight(text, desiredWidth) {
		+	return this._padText(text, desiredWidth, "right");
		+	}
		+
		+	this._padTextAround = function _padTextAround(text, desiredWidth) {
		+	return this._padText(text, desiredWidth, "both");
		+	}
		+
		+	/**
		+	* The function add hair spaces to the text to make it have a desiredWidth.
		+	* But in case if text is too wide, the function do _limitText instead.
		+	*
		+	* text - the string that we want to have a desiredWidth
		+	* desiredWidth - the width of the result, in ems
		+	* padSide:
		+	* "left" - add pads before the text
		+	* "right" - add pads after the text
		+	* "both" - add pads both before and after the text
		+	* result - the padded string
		+	*/
		+	this._padText = function _padText(text, desiredWidth, padSide) {
		+	// Keep character and it's width it variables for sake of optimization and clarity
		+	const hairSpace = String.fromCharCode(31);
		+	const hairSpaceWidth = defaultFont.measureString(hairSpace);
		+
		+	// Find out the width of text in ems
		+	const textWidth = defaultFont.measureString(text);
		+
		+	const padsNeeded = Math.floor((desiredWidth - textWidth) / hairSpaceWidth);
		+
		+	var resultText;
		+	if (padsNeeded > 1) {
		+	// new Array(n).join(someString) - the compact way to say "repeat the someString n times"
		+	if (padSide == "left") {
		+	resultText = new Array(padsNeeded).join(hairSpace) + text;
		+	}
		+	else if (padSide == "right") {
		+	resultText = text + new Array(padsNeeded).join(hairSpace);
		+	}
		+	else if (padSide == "both") {
		+	const leftPadsNumber = Math.floor(padsNeeded / 2);
		+	const leftPadding = new Array(leftPadsNumber).join(hairSpace);
		+	const rightPadding = new Array(padsNeeded - leftPadsNumber).join(hairSpace);
		+
		+	resultText = leftPadding + text + rightPadding;
		+	}
		+	}
		+	else {
		+	resultText = this.$limitText(text, desiredWidth);
		+	}
		+
		+	return resultText;
		+	}
		+	</pre>

	=== Tabular layout ===		=== Tabular layout ===

@@ Line 44: / Line 44: @@
 == Alignment ==
 There is no obvious way to do this, but [[User:Ocz|Ocz]] managed some version of right alignment for his [[First Finance OXP]]
 === Tabular layout ===