Module:LinesOverlay/doc - Revision history

Xpmodder at 17:05, 28 March 2024

2024-03-28T17:05:36Z

← Older revision		Revision as of 17:05, 28 March 2024
Line 35:		Line 35:
	==== Icons ====		==== Icons ====
	In addition to drawing lines, you can also place specific icons at specific coordinates with this template.<br>		In addition to drawing lines, you can also place specific icons at specific coordinates with this template.<br>
	There are 4 predefined icons and you have the ability to specify a custom FontAwesome icon as well.<br>		There are 5 predefined icons and you have the ability to specify a custom FontAwesome icon as well.<br>
	The 4 predefined icons are:<br>		The 5 predefined icons are:<br>
	<i class="fa-solid fa-train"></i> <code>station</code><br>		<i class="fa-solid fa-train"></i> <code>station</code><br>
	<i class="fa-solid fa-anchor"></i> <code>port</code><br>		<i class="fa-solid fa-anchor"></i> <code>port</code><br>

Xpmodder at 17:03, 28 March 2024

2024-03-28T17:03:41Z

← Older revision		Revision as of 17:03, 28 March 2024
Line 41:		Line 41:
	<i class="fa-solid fa-horse"></i> <code>shelter</code><br>		<i class="fa-solid fa-horse"></i> <code>shelter</code><br>
	<i class="fa-solid fa-dungeon"></i> <code>portal</code><br>		<i class="fa-solid fa-dungeon"></i> <code>portal</code><br>
			<i class="fa-solid fa-compass"></i> <code>hub</code><br>

	The predefined icons use the identifier shown above and accept a single coordinate block after the identifier. This coordinate block specifies the coordinates where the icon will be located.		The predefined icons use the identifier shown above and accept a single coordinate block after the identifier. This coordinate block specifies the coordinates where the icon will be located.

Xpmodder at 14:41, 21 March 2024

2024-03-21T14:41:42Z

← Older revision		Revision as of 14:41, 21 March 2024
Line 126:		Line 126:
	</pre>		</pre>
	<br>		<br>
	<div style="max-width: ~~501px~~; max-height: ~~501px~~; aspect-ratio: 1/1; border-style: solid; border-width: 1px; border-color: black;">		<div style="max-width: 500px; max-height: 500px; aspect-ratio: 1/1; border-style: solid; border-width: 1px; border-color: black;">{{LinesOverlay\|
	{{LinesOverlay\|
	info 0,-500		info 0,-500
	station 258,-147		station 258,-147
Line 139:		Line 138:
	line lime 269,-135 276,-132 328,-126 360,-100 422,-100 436,-97 468,-82 484,-83 489,-85 543,-85		line lime 269,-135 276,-132 328,-126 360,-100 422,-100 436,-97 468,-82 484,-83 489,-85 543,-85
	line yellow 248,-139 244,-136 245,-130 253,-126 279,-126 304,-119 312,-111 315,-99 315,-56 318,-47 323,-43 328,-41 353,-41 361,-38 363,-34 365,-29 365,-13 367,-7 373,-2 383,0 389,6		line yellow 248,-139 244,-136 245,-130 253,-126 279,-126 304,-119 312,-111 315,-99 315,-56 318,-47 323,-43 328,-41 353,-41 361,-38 363,-34 365,-29 365,-13 367,-7 373,-2 383,0 389,6
	}}		}}</div>
	</div>

Xpmodder at 14:33, 21 March 2024

2024-03-21T14:33:57Z

← Older revision		Revision as of 14:33, 21 March 2024
Line 117:		Line 117:
	port 271,-66		port 271,-66
	portal 272,-235		portal 272,-235
			icon 323,-353 fa-solid fa-dog
	line #ff4500 237,-91 306,-91 324,-95 413,-95 434,-92 478,-72 514,-72 521,-60		line #ff4500 237,-91 306,-91 324,-95 413,-95 434,-92 478,-72 514,-72 521,-60
	line #ff4500 302,-91 305,-82 305,-66 308,-51 308,-25 327,8		line #ff4500 302,-91 305,-82 305,-66 308,-51 308,-25 327,8
Line 132:		Line 133:
	port 271,-66		port 271,-66
	portal 272,-235		portal 272,-235
			icon 323,-353 fa-solid fa-dog
	line #ff4500 237,-91 306,-91 324,-95 413,-95 434,-92 478,-72 514,-72 521,-60		line #ff4500 237,-91 306,-91 324,-95 413,-95 434,-92 478,-72 514,-72 521,-60
	line #ff4500 302,-91 305,-82 305,-66 308,-51 308,-25 327,8		line #ff4500 302,-91 305,-82 305,-66 308,-51 308,-25 327,8

Xpmodder at 14:24, 21 March 2024

2024-03-21T14:24:26Z

← Older revision		Revision as of 14:24, 21 March 2024
Line 101:		Line 101:
	}}		}}
	\|}		\|}


			=== Close Template ===
			Dont forget to close the template below the last line of markup with '''}}'''!


			== Full example ==
			Here is an example using most available features:

			<pre>
			{{LinesOverlay\|
			info 0,-500
			station 258,-147
			shelter 313,-154
			port 271,-66
			portal 272,-235
			line #ff4500 237,-91 306,-91 324,-95 413,-95 434,-92 478,-72 514,-72 521,-60
			line #ff4500 302,-91 305,-82 305,-66 308,-51 308,-25 327,8
			line #ff4500 275,-92 274,-121 283,-134 284,-156 282,-168 269,-216 269,-231 274,-250 289,-262 297,-278 399,-379 399,-393 397,-396 385,-396 382,-399 382,-454 396,-468 396,-489 394,-491 387,-491 369,-509
			line lime 269,-135 276,-132 328,-126 360,-100 422,-100 436,-97 468,-82 484,-83 489,-85 543,-85
			line yellow 248,-139 244,-136 245,-130 253,-126 279,-126 304,-119 312,-111 315,-99 315,-56 318,-47 323,-43 328,-41 353,-41 361,-38 363,-34 365,-29 365,-13 367,-7 373,-2 383,0 389,6
			}}
			</pre>
			<br>
			<div style="max-width: 501px; max-height: 501px; aspect-ratio: 1/1; border-style: solid; border-width: 1px; border-color: black;">
			{{LinesOverlay\|
			info 0,-500
			station 258,-147
			shelter 313,-154
			port 271,-66
			portal 272,-235
			line #ff4500 237,-91 306,-91 324,-95 413,-95 434,-92 478,-72 514,-72 521,-60
			line #ff4500 302,-91 305,-82 305,-66 308,-51 308,-25 327,8
			line #ff4500 275,-92 274,-121 283,-134 284,-156 282,-168 269,-216 269,-231 274,-250 289,-262 297,-278 399,-379 399,-393 397,-396 385,-396 382,-399 382,-454 396,-468 396,-489 394,-491 387,-491 369,-509
			line lime 269,-135 276,-132 328,-126 360,-100 422,-100 436,-97 468,-82 484,-83 489,-85 543,-85
			line yellow 248,-139 244,-136 245,-130 253,-126 279,-126 304,-119 312,-111 315,-99 315,-56 318,-47 323,-43 328,-41 353,-41 361,-38 363,-34 365,-29 365,-13 367,-7 373,-2 383,0 389,6
			}}
			</div>

Xpmodder at 14:15, 21 March 2024

2024-03-21T14:15:30Z

@@ Line 49: / Line 49: @@
 The css class names are inserted into the class attribute of a <nowiki><i></nowiki> html tag. If FontAwesome classes are used here, this can result in a FontAwesome icon being displayed.
 {| class="wikitable"
-|+ Example
+|+
 |-
 ! Markup !! Result
@@ Line 65: / Line 66: @@
 |}
 <sup>1</sup> Note that multiple different icons overwrite each other and only one of the icon classes will have effect, thus only showing one icon.<br>
-<sup>2</sup> Note that the class "otherclass" is not styled in any way on this page and thus has no effect. The class green sets the color to green, thus changing the color of the icon.
+<sup>2</sup> Note that the class "otherclass" is not styled in any way on this page and thus has no effect. The class "green" sets the color to green, thus changing the color of the icon.
@@ Line 78: / Line 79: @@
 To draw a line splitting to 2 lines, you can either specify them as 2 lines (the starting line continuing after the split as one of the two ends and the other end as a separate line) or as 3 lines (the starting line and 2 separate ends).<br>
 Lines can cross, overlap and coincide arbitrarily. Multiple lines can also have points at the exact same coordinates.<br>

Xpmodder at 14:02, 21 March 2024

2024-03-21T14:02:59Z

← Older revision		Revision as of 14:02, 21 March 2024
Line 60:		Line 60:
	\| <code>icon 845,-512 fa-solid fa-sailboat fa-house</code> \|\| <i class="fa-solid fa-sailboat fa-house" style="color: red;"></i> Located at coordinates X:845, Z:-512 <sup>1</sup>		\| <code>icon 845,-512 fa-solid fa-sailboat fa-house</code> \|\| <i class="fa-solid fa-sailboat fa-house" style="color: red;"></i> Located at coordinates X:845, Z:-512 <sup>1</sup>
	\|-		\|-
	\| <code>icon 845,-512 fa-solid fa-sailboat green</code> \|\| <i class="fa-solid fa-sailboat green"></i> Located at coordinates X:845, Z:-512 <sup>2</sup>		\| <code>icon 845,-512 fa-solid fa-sailboat green</code> \|\| <i class="fa-solid fa-sailboat green" style="color: green;"></i> Located at coordinates X:845, Z:-512 <sup>2</sup>
	\|-		\|-
	\| <code>icon 845,-512 fa-solid fa-sailboat otherclass</code> \|\| <i class="fa-solid fa-sailboat otherclass" style="color: red;"></i> Located at coordinates X:845, Z:-512 <sup>2</sup>		\| <code>icon 845,-512 fa-solid fa-sailboat otherclass</code> \|\| <i class="fa-solid fa-sailboat otherclass" style="color: red;"></i> Located at coordinates X:845, Z:-512 <sup>2</sup>
Line 66:		Line 66:
	<sup>1</sup> Note that multiple different icons overwrite each other and only one of the icon classes will have effect, thus only showing one icon.<br>		<sup>1</sup> Note that multiple different icons overwrite each other and only one of the icon classes will have effect, thus only showing one icon.<br>
	<sup>2</sup> Note that the class "otherclass" is not styled in any way on this page and thus has no effect. The class green sets the color to green, thus changing the color of the icon.		<sup>2</sup> Note that the class "otherclass" is not styled in any way on this page and thus has no effect. The class green sets the color to green, thus changing the color of the icon.


	==== Lines ====		==== Lines ====
			Lines use the identifier <code>line</code> and accept first a color and width block and after that an arbitrary number of coordinate blocks.<br>
			The color and width block consists of a valid css color and a number for the line width (thickness) separated by a colon ':'.<br>
			Specifying the width is optional and defaults to 5.<br>
			CSS colors can be a word (eg "green"), a hex color (eg "#ff0000"), a rgb color (eg "rgb(255, 0, 0)"), or a rgba color (eg "rgba(255, 0, 0, 0.5)"). Please check the internet for examples or a list of available color names.<br>

			The following coordinate blocks are read left to right and the line is drawn in segments from point to point.<br>
			All coordinate blocks on the same ''line'' of text will be used to draw a '''single''' visible line.<br>
			To draw a line splitting to 2 lines, you can either specify them as 2 lines (the starting line continuing after the split as one of the two ends and the other end as a separate line) or as 3 lines (the starting line and 2 separate ends).<br>
			Lines can cross, overlap and coincide arbitrarily. Multiple lines can also have points at the exact same coordinates.<br>

Xpmodder at 13:43, 21 March 2024

2024-03-21T13:43:48Z

← Older revision		Revision as of 13:43, 21 March 2024
Line 20:		Line 20:
	A coordinate block consists of a X and a Z coordinate separated by a comma ','.<br>		A coordinate block consists of a X and a Z coordinate separated by a comma ','.<br>
	For example the coordinates X:500, Z:300 translate to the following coordinate block: <code>500,300</code>		For example the coordinates X:500, Z:300 translate to the following coordinate block: <code>500,300</code>


	==== The info line ====		==== The info line ====
Line 30:		Line 31:
	<code>info 500,-1000 1000,500</code> <br>		<code>info 500,-1000 1000,500</code> <br>
	This will set the top-left corner of the output to be at coordinates X:500, Z:-1000 and will set the width of the output to be 1000 and the height to be 500, making the output twice as wide as it is high.		This will set the top-left corner of the output to be at coordinates X:500, Z:-1000 and will set the width of the output to be 1000 and the height to be 500, making the output twice as wide as it is high.


	==== Icons ====		==== Icons ====
Line 56:		Line 58:
	\| <code>icon 500,354 fa-solid fa-door-open</code> \|\| <i class="fa-solid fa-door-open" style="color: red;"></i> Located at coordinates X:500, Z:354		\| <code>icon 500,354 fa-solid fa-door-open</code> \|\| <i class="fa-solid fa-door-open" style="color: red;"></i> Located at coordinates X:500, Z:354
	\|-		\|-
	\| <code>icon 845,-512 fa-solid fa-sailboat fa-house</code> \|\| <i class="fa-solid fa-sailboat fa-house" style="color: red;"></i> Located at coordinates X:845, Z:-512		\| <code>icon 845,-512 fa-solid fa-sailboat fa-house</code> \|\| <i class="fa-solid fa-sailboat fa-house" style="color: red;"></i> Located at coordinates X:845, Z:-512 <sup>1</sup>
	\|-		\|-
	\| <code>icon 845,-512 fa-solid fa-sailboat green</code> \|\| <i class="fa-solid fa-sailboat green"></i> Located at coordinates X:845, Z:-512 *		\| <code>icon 845,-512 fa-solid fa-sailboat green</code> \|\| <i class="fa-solid fa-sailboat green"></i> Located at coordinates X:845, Z:-512 <sup>2</sup>
	\|-		\|-
	\| <code>icon 845,-512 fa-solid fa-sailboat otherclass</code> \|\| <i class="fa-solid fa-sailboat otherclass" style="color: red;"></i> Located at coordinates X:845, Z:-512 *		\| <code>icon 845,-512 fa-solid fa-sailboat otherclass</code> \|\| <i class="fa-solid fa-sailboat otherclass" style="color: red;"></i> Located at coordinates X:845, Z:-512 <sup>2</sup>
	\|}		\|}
	* Note that the class "otherclass" is not styled in any way on this page and thus has no effect. The class green sets the color to green, thus changing the color of the icon.		<sup>1</sup> Note that multiple different icons overwrite each other and only one of the icon classes will have effect, thus only showing one icon.<br>
			<sup>2</sup> Note that the class "otherclass" is not styled in any way on this page and thus has no effect. The class green sets the color to green, thus changing the color of the icon.

	==== Lines ====		==== Lines ====

Xpmodder at 13:40, 21 March 2024

2024-03-21T13:40:09Z

← Older revision		Revision as of 13:40, 21 March 2024
Line 27:		Line 27:
	The first coordinate block specifies offset coordinates for the output, which sets the top-left corner of the output to the given coordinates. The default for this is 0,0.<br>		The first coordinate block specifies offset coordinates for the output, which sets the top-left corner of the output to the given coordinates. The default for this is 0,0.<br>
	The second coordinate block specifies a custom size of the output. The x coordinate in this case specifies width and the z coordinate specifies height. The default for this is 500,500.		The second coordinate block specifies a custom size of the output. The x coordinate in this case specifies width and the z coordinate specifies height. The default for this is 500,500.
			===== Example =====
			<code>info 500,-1000 1000,500</code> <br>
			This will set the top-left corner of the output to be at coordinates X:500, Z:-1000 and will set the width of the output to be 1000 and the height to be 500, making the output twice as wide as it is high.

			==== Icons ====
			In addition to drawing lines, you can also place specific icons at specific coordinates with this template.<br>
			There are 4 predefined icons and you have the ability to specify a custom FontAwesome icon as well.<br>
			The 4 predefined icons are:<br>
			<i class="fa-solid fa-train"></i> <code>station</code><br>
			<i class="fa-solid fa-anchor"></i> <code>port</code><br>
			<i class="fa-solid fa-horse"></i> <code>shelter</code><br>
			<i class="fa-solid fa-dungeon"></i> <code>portal</code><br>

			The predefined icons use the identifier shown above and accept a single coordinate block after the identifier. This coordinate block specifies the coordinates where the icon will be located.

			A custom icon can be specified using the <code>icon</code> identifier.<br>
			This identifier accepts 1 coordinate block and after that a unspecified number of css class names. This can be used with FontAwesome classes to specify an arbitrary icon.<br>
			The coordinate block, similar to the predefined icons, specifies the coordinates at which the icon will be located.<br>
			The css class names are inserted into the class attribute of a <nowiki><i></nowiki> html tag. If FontAwesome classes are used here, this can result in a FontAwesome icon being displayed.

			{\| class="wikitable"
			\|+ Example
			\|-
			! Markup !! Result
			\|-
			\| <code>station 500,354</code> \|\| <i class="fa-solid fa-train" style="color: red;"></i> Located at coordinates X:500, Z:354
			\|-
			\| <code>icon 500,354 fa-solid fa-door-open</code> \|\| <i class="fa-solid fa-door-open" style="color: red;"></i> Located at coordinates X:500, Z:354
			\|-
			\| <code>icon 845,-512 fa-solid fa-sailboat fa-house</code> \|\| <i class="fa-solid fa-sailboat fa-house" style="color: red;"></i> Located at coordinates X:845, Z:-512
			\|-
			\| <code>icon 845,-512 fa-solid fa-sailboat green</code> \|\| <i class="fa-solid fa-sailboat green"></i> Located at coordinates X:845, Z:-512 *
			\|-
			\| <code>icon 845,-512 fa-solid fa-sailboat otherclass</code> \|\| <i class="fa-solid fa-sailboat otherclass" style="color: red;"></i> Located at coordinates X:845, Z:-512 *
			\|}
			* Note that the class "otherclass" is not styled in any way on this page and thus has no effect. The class green sets the color to green, thus changing the color of the icon.

			==== Lines ====

Xpmodder: Created page with "The '''{{LinesOverlay}}''' template uses '''Module:LinesOverlay''' to draw lines and place icons based on coordinates. This is intended for marking connections and facilities of the transport networks on the Dogcraft Server to be overlayed on a map. This module uses line by line markup for generating the lines and icons. This template is intended to be used to create an overlay to be overlayed on a map, but can still be used for other purposes if so..."

2024-03-21T12:34:13Z

Created page with "The '''<nowiki>{{LinesOverlay}}</nowiki>''' template uses '''Module:LinesOverlay''' to draw lines and place icons based on coordinates. This is intended for marking connections and facilities of the transport networks on the Dogcraft Server to be overlayed on a map. This module uses line by line markup for generating the lines and icons. This template is intended to be used to create an overlay to be overlayed on a map, but can still be used for other purposes if so..."

New page

The '''<nowiki>{{LinesOverlay}}</nowiki>''' template uses '''Module:LinesOverlay''' to draw lines and place icons based on coordinates. This is intended for marking connections and facilities of the transport networks on the [[Dogcraft Server]] to be overlayed on a map. This module uses line by line markup for generating the lines and icons.

This template is intended to be used to create an overlay to be overlayed on a map, but can still be used for other purposes if so desired. The lines it creates are not particularly nice at sharp corners, as due to the limitations of Mediawiki lines are drawn with html <nowiki><div></nowiki> elements.

== Usage ==
This template can generate a effectively unlimited number of lines and/or icons. It is important to note however, that this template only accepts a single parameter: a block of text of special markup.

=== Template opener ===
Open a LinesOverlay template with the template identifier: <nowiki>{{LinesOverlay|</nowiki>

=== Lines Overlay Markup ===
The markup is parsed line by line, meaning that every line of text given to the template acts as one parameter. 
Please note that spaces ' ' and line breaks '\n' are significant in markup for this template and should only be used where needed.
Generally pieces of information are sperated by a single space ' ' in this templates markup and each line of markup acts like a parameter and provides a full set of information for one element. Every line begins with a line identifier and this is followed by information for this identifier.

This template accepts 3 types of information in markup: '''info, icon and line'''

==== Coordinate blocks ====
The template markup accepts many sets of coordinates, which are all specified as a coordinate block. 
A coordinate block consists of a X and a Z coordinate separated by a comma ','. 
For example the coordinates X:500, Z:300 translate to the following coordinate block: <code>500,300</code>

==== The info line ====
'''info''' is an optional line that can be specified in markup. If used, this line should be the first under the template opener. 
The '''info''' line can set a coordinate offset and a specific size and thus aspect ratio of the output. 
The info line begins with the <code>info</code> identifier, which is followed by 2 coordinate blocks. 
The first coordinate block specifies offset coordinates for the output, which sets the top-left corner of the output to the given coordinates. The default for this is 0,0. 
The second coordinate block specifies a custom size of the output. The x coordinate in this case specifies width and the z coordinate specifies height. The default for this is 500,500.