JCM:Building a Scripted PIDS Preset - Revision history

AmberFrost at 17:46, 4 February 2025

2025-02-04T17:46:04Z

← Older revision		Revision as of 01:46, 5 February 2025
Line 10:		Line 10:
	## 2nd station named <code>田景\|Tin King</code>		## 2nd station named <code>田景\|Tin King</code>
	# Name the route <code>輕鐵\|Light Rail</code> with Route Number <code>507</code> and color code <code>00A650</code>		# Name the route <code>輕鐵\|Light Rail</code> with Route Number <code>507</code> and color code <code>00A650</code>
			#Place a single PIDS within your view distance, which can display the arrivals of the routes
	#'''[Note] A fully operational route is not required.''' (i.e. If your route jams, the tutorial can still continue, as long as there's any train on the route).		#'''[Note] A fully operational route is not required.''' (i.e. If your route jams, the tutorial can still continue, as long as there's any train on the route).

Line 134:		Line 135:
	This creates a text, setting its text content to '''Hello World''', and then drawing it to <code>ctx</code> (Which is a provided parameter in the render function, more on that later).		This creates a text, setting its text content to '''Hello World''', and then drawing it to <code>ctx</code> (Which is a provided parameter in the render function, more on that later).

	A statement is only considered finish by ending with a semicolon (<code>;</code>), ~~so our code will still work after breaking down~~ to ~~different~~ lines~~. For~~ readability ~~purposes, opening new line is generally preferred~~.		Note that even after splitting it line by line, it is still ''valid code''! This is because a statement is only considered finish by ending it with a semicolon (<code>;</code>). In fact, it is recommended to split up the lines to maintain readability.

	Anyway now let's save the file, reload with F3+T and see what happens!		Anyway now let's save the file, reload with F3+T and see what happens!
Line 191:		Line 192:
	}		}
	</pre>		</pre>
	[[File:JCM JS PIDS Tutorial v0.4.png\|thumb\|407x407px\|''<small>(~~Note~~: The reason the bottom line appears to be more "left" than the top line is due to Minecraft's imperfection when rendering TTF font, it will work fine if you switch to Minecraft font or with most other text combination)</small>''\|none]]		[[File:JCM JS PIDS Tutorial v0.4.png\|thumb\|407x407px\|''<small>(Sidenote: The reason the bottom line appears to be more "left" than the top line is due to Minecraft's imperfection when rendering TTF font, it will work fine if you switch to Minecraft font or with most other text combination)</small>''\|none]]

	=== Rendering Arrivals ===		=== Rendering Arrivals ===
Line 263:		Line 264:
	.pos(0, 0)		.pos(0, 0)
	.draw(ctx);		.draw(ctx);
	</pre>The "'''1st row destination'''" text is purely cosmetic and you can write any string within that, so this could be served as a ~~comment~~. ~~However whether~~ this is preferable depends on your personal preferences.		</pre>The "'''1st row destination'''" text (in the above example) is purely cosmetic, and you can write any string within that. As such, this could be served as a slot for commenting. Whether this is preferable depends on your personal preferences.

	Now ~~for~~ the former arrival issue, we can add a null check to ensure that the arrival exists first:<pre>		Now back to the former arrival issue. For that, we can add a null check to ensure that the arrival exists first:<pre>
	function render(ctx, state, pids) {		function render(ctx, state, pids) {
	let firstRowArrival = pids.arrivals().get(0);		let firstRowArrival = pids.arrivals().get(0);
Line 279:		Line 280:
	</pre>		</pre>

	~~Now~~ this might be fine for rendering 1 arrival, ~~but~~ we often have to display more than that.		Great! However while this might be fine for rendering 1 line of arrival, in practice we often have to display much more than that, copy and pasting them is error-prune and a mess to modify.

	~~In addition~~, each PIDS Block have it's own number of arrival entry it supports. For example, RV PIDS supports 4 rows, while the PIDS 1A block only supports 3 rows.		Making matters even more complicated, each PIDS Block have it's own number of arrival entry it supports. For example, RV PIDS supports 4 rows, while the PIDS 1A block only supports 3 rows.

	~~Instead we can~~ change this to a for-loop, using <code>pids.rows</code> to obtain how many rows the current PIDS block supports:<pre>		One solution is to change this to a for-loop, using <code>pids.rows</code> to obtain how many rows the current PIDS block supports:<pre>
	function render(ctx, state, pids) {		function render(ctx, state, pids) {
	for(let i = 0; i < pids.rows; i++) { // Set i to 0. i++ if i < pids.rows, otherwise don't run this anymore		for(let i = 0; i < pids.rows; i++) { // Set i to 0. i++ if i < pids.rows, otherwise don't run this anymore
Line 387:		Line 388:
	</pre><code>jsblock:textures/block/pids/rv_default.png</code> is the default image used for the built-in Railway Vision PIDS that comes with JCM. But of course, you are welcomed to bring your own images as well!		</pre><code>jsblock:textures/block/pids/rv_default.png</code> is the default image used for the built-in Railway Vision PIDS that comes with JCM. But of course, you are welcomed to bring your own images as well!

	Now reload the resource pack and...[[File:JCM JS PIDS Tutorial v1.0.png\|337x337px]]''~~I don~~'~~t know how many of you have noticed~~, ~~but this~~ is ~~a foreground image~~ not a background ~~image!~~''		Now reload the resource pack and...[[File:JCM JS PIDS Tutorial v1.0.png\|337x337px]]

			On the surface it seems that the only thing wrong is the positioning (Which to be fair, we didn't tell JCM the size, so it uses the default), however another problem is that the image is appearing ''over'' the text, which is not what you want for a ''background'' image.

	=== Stacking Order ===		=== Stacking Order ===
Line 678:		Line 681:
	</pre>Just to keep you ''in the loop <small>(Pun intended)</small>'', what we are doing so far is ran for each arrival row, because we have setup a ''for-loop'' at the top.		</pre>Just to keep you ''in the loop <small>(Pun intended)</small>'', what we are doing so far is ran for each arrival row, because we have setup a ''for-loop'' at the top.

	So if you are going to render thing one-~~times~~, then ~~it's probably not a good idea to~~ place ~~that~~ logic ~~within~~ this loop~		So if you are going to render thing one-time on the screen, then you should place the logic ''outside'' this loop~

	[[File:JCM JS PIDS Tutorial v2.5.png\|291x291px]]		[[File:JCM JS PIDS Tutorial v2.5.png\|291x291px]]
Line 685:		Line 688:

	== v3: The PIDS called, they wanted their header bar back ==		== v3: The PIDS called, they wanted their header bar back ==
	The header bar is the blue bar at the top. ~~Under the regular~~ RV PIDS~~, it~~ contains a weather texture on the left, and a 24-hour clock on the right.		The header bar is the blue bar at the top. The built-in RV PIDS preset in JCM contains a weather texture on the left, and a 24-hour clock on the right.

	=== Weather Icon ===		=== Weather Icon ===
	There are 3 distinct texture for weather icon used in RV PIDS:		There are 3 distinct texture for weather icon used in the default RV PIDS preset:
	{\| class="wikitable"		{\| class="wikitable"
	\|+		\|+
Line 705:		Line 708:
	As such, we need to use different texture depending on the situation.		As such, we need to use different texture depending on the situation.

	To check the weather in the current world, we can ~~check out~~ the [[JCM:Scripting:Documentation:Utilities#MinecraftClient\|MinecraftClient]] class, which provides a couple of functions, namely <code>MinecraftClient.worldIsRaining()</code> and <code>MinecraftClient.worldIsThundering()</code>.		To check the weather for the current world, we can use the [[JCM:Scripting:Documentation:Utilities#MinecraftClient\|MinecraftClient]] class, which provides a couple of functions, namely <code>MinecraftClient.worldIsRaining()</code> and <code>MinecraftClient.worldIsThundering()</code>.

	We can then first declare a variable which represents the texture we are going to use, we are going to assign a value to it later:<pre>		We can then first declare a variable which represents the texture we are going to use, we are going to assign a value to it later:<pre>
	let weatherImg;		let weatherImg;
	</pre>''Note: Remember to place this outside the arrival for-loop as this is only meant to be drawn 1 time, but also after we drawn the Background texture, as we don't want the background to cover our ~~icon~~.''		</pre>''Note: Remember to place this outside the arrival for-loop as this is only meant to be drawn 1 time, but also after we drawn the Background texture, as we don't want the background to cover our image.''


	Now we can start checking from the order thunderstorm > raining > sunny, and assign the appropriate texture ID:<pre>		Now we can start checking from the order thunderstorm > raining > sunny, and assign the appropriate texture ID:<pre>
Line 720:		Line 722:
	weatherImg = "jsblock:textures/block/pids/weather_sunny.png";		weatherImg = "jsblock:textures/block/pids/weather_sunny.png";
	}		}
	</pre>The reason why we have to check in this order is because when a thunderstorm is active, it is also considered raining. Therefore we can't check if it's raining first, as otherwise it will always use the rainy texture. And finally if it's neither raining nor thundering, then the sky has to be clear.		</pre>(The reason why we have to check in this order is because when a thunderstorm is active, it is also considered raining. Therefore we can't check if it's raining first, as otherwise it will always use the rainy texture. And finally if it's neither raining nor thundering, then the sky has to be clear.)

	Now, let's draw the texture with our <code>weatherImg</code> variable:<pre>		Now, let's draw the texture with our <code>weatherImg</code> variable:<pre>
Line 766:		Line 768:
	</pre>After reloading, you'll notice that nothing has changed at all.		</pre>After reloading, you'll notice that nothing has changed at all.

	This is intended, ~~and~~ the text area ~~indeed~~ got defined. However by default JCM don't take any action if the text overflowed.		This is intended, the text area did got defined. However by default JCM don't take any action if the text overflowed.

	To do so, we need to tell JCM what to do, either with the <code>stretchXY()</code>, <code>scaleXY()</code>, <code>wrapText()</code> and <code>marquee()</code> function.		To do so, we need to tell JCM what to do, either with the <code>stretchXY()</code>, <code>scaleXY()</code>, <code>wrapText()</code> and <code>marquee()</code> function.

AmberFrost: /* Rendering Arrivals */

2024-11-18T09:19:37Z

Rendering Arrivals

← Older revision		Revision as of 17:19, 18 November 2024
Line 16:		Line 16:

	* Repeated/Irrelevant code may be abbreviated with the <code>...</code> notation. You should locate and updating only the affected line.		* Repeated/Irrelevant code may be abbreviated with the <code>...</code> notation. You should locate and updating only the affected line.
			*Sometimes surrounding codes are shown to ensure the readers don't get lost. The changed line is marked with <code><---</code> at the end of the line, indicating such line is affected.
	* This article is best read with basic level of programming knowledge (Doesn't have to be JavaScript). You may still finish the tutorial without such knowledge, but may find some difficulty grasping some concept as this article is not meant to be a programming 101.		* This article is best read with basic level of programming knowledge (Doesn't have to be JavaScript). You may still finish the tutorial without such knowledge, but may find some difficulty grasping some concept as this article is not meant to be a programming 101.
	* You don't have to finish the tutorial in one go :)		* You don't have to finish the tutorial in one go :)
Line 200:		Line 201:

	<pre>		<pre>
	let firstRowArrival = pids.arrivals().get(0);		function render(ctx, state, pids) {
			let firstRowArrival = pids.arrivals().get(0);
			...
	</pre>Remember, JavaScript is 0-index based. The first number starts from 0, then 1, and so on and so fourth...		</pre>Remember, JavaScript is 0-index based. The first number starts from 0, then 1, and so on and so fourth...

	You can obtain a variety of information in the arrival entry, which includes it's route/LRT number, it's arrival and departure time, the route it's running and more. You can refer to the [[JCM:Scripting:Documentation:PIDS\|documentation]] for further information, but we will also cover some of it in this tutorial.		You can obtain a variety of information in the arrival entry, which includes it's route/LRT number, it's arrival and departure time, the route it's running and more. You can refer to the [[JCM:Scripting:Documentation:PIDS\|documentation]] for further information, but we will also cover some of it in this tutorial.

	At this point we are only interested in getting the destination (Where the train is going), and we can do that ~~with~~ the <code>destination()</code> function.		At this point we are only interested in getting the destination (Where the train is going), and we can do that by calling the <code>destination()</code> function within our arrival:

	<pre>		<pre>
	let firstRowArrival = pids.arrivals().get(0);		function render(ctx, state, pids) {
	let firstRowDestination = firstRowArrival.destination();		let firstRowArrival = pids.arrivals().get(0);
	</pre>And now we can draw this to our text, by replacing the .text() content with firstRowDestination:		let firstRowDestination = firstRowArrival.destination();
			...
			</pre>And now we can draw this to our text, by replacing the <code>.text()</code> content with firstRowDestination:

	<pre>		<pre>
Line 218:		Line 223:

	Text.create()		Text.create()
	.text(firstRowDestination) // <--- ~~Here~~		.text(firstRowDestination) // <---
	.color(0xFFFFFF)		.color(0xFFFFFF)
	.pos(0, 0)		.pos(0, 0)
Line 234:		Line 239:
	function render(ctx, state, pids) {		function render(ctx, state, pids) {
	Text.create()		Text.create()
	.text(pids.arrivals().get(0).destination()) // <--- ~~Here~~		.text(pids.arrivals().get(0).destination()) // <---
	.color(0xFFFFFF)		.color(0xFFFFFF)
	.pos(0, 0)		.pos(0, 0)
Line 247:		Line 252:
	</pre>		</pre>
	[[File:JCM JS PIDS Tutorial v0.5.png\|none\|thumb\|368x368px]]		[[File:JCM JS PIDS Tutorial v0.5.png\|none\|thumb\|368x368px]]
	However before we continue, ~~there is~~ a few ~~problem with this~~:		However before we continue, let's go through a few problems we have to face first:

	# An arrival is not guaranteed to exist. For example if the client is still fetching the arrival info, or there are no arrival on that platform. This would cause the script to error out (Which you may have spotted in the console, but JCM will try to re-run the script every 4 second)		# An arrival is not guaranteed to exist. For example if the client is still fetching the arrival info, or there are no arrival on that platform. This would cause the script to error out (Which you may have spotted in the console, but JCM will try to re-run the script every 4 second) as the arrival entry would be <code>null</code>.
	# Imagine a script filled with <code>Text.create()</code>, how would you be able to easily tell which text is which?		# Imagine a script filled with <code>Text.create()</code>, how would you be able to easily tell which text is which?

	For the ~~latter~~, you ~~could~~ add JS comments with <code>//</code>~~. However~~ JCM also reserved a slot for comment, and that is within the <code>Text.create(string)</code> function. So as an example, you can do the following:<pre>		For the 2nd problem, while you can add JS comments with <code>//</code>, JCM also reserved a slot for comment, and that is within the <code>Text.create(string)</code> function. So as an example, you can do the following:<pre>
	Text.create("1st row destination") // <----		Text.create("1st row destination") // <----
	.text(firstRowDestination)		.text(firstRowDestination)
Line 258:		Line 263:
	.pos(0, 0)		.pos(0, 0)
	.draw(ctx);		.draw(ctx);
	</pre>The '''~~<u>~~1st row destination~~</u>~~''' text is purely cosmetic and you can write any string within that, so this could be served as a comment. However whether this is preferable depends on your personal preferences.		</pre>The "'''1st row destination'''" text is purely cosmetic and you can write any string within that, so this could be served as a comment. However whether this is preferable depends on your personal preferences.

	Now for the former arrival issue, we can add a null check to ensure that the arrival exists first:<pre>		Now for the former arrival issue, we can add a null check to ensure that the arrival exists first:<pre>

AmberFrost: /* Hello, World! */

2024-11-18T09:11:42Z

Hello, World!

← Older revision		Revision as of 17:11, 18 November 2024
Line 15:		Line 15:
	Before starting, please note that:		Before starting, please note that:

	* Repeated code may be abbreviated with the <code>...</code> notation. You should ~~consider locating~~ and ~~changing~~ only the affected line.		* Repeated/Irrelevant code may be abbreviated with the <code>...</code> notation. You should locate and updating only the affected line.
	* This article is best read with basic level of programming knowledge (Doesn't have to be JavaScript). You may still finish the tutorial without such knowledge, but may find some difficulty grasping some concept as this article is not meant to be a programming 101.		* This article is best read with basic level of programming knowledge (Doesn't have to be JavaScript). You may still finish the tutorial without such knowledge, but may find some difficulty grasping some concept as this article is not meant to be a programming 101.
	* You don't have to finish the tutorial in one go :)		* You don't have to finish the tutorial in one go :)
Line 75:		Line 75:

	Now, let's insert <code>print("Goodbye World ^^;");</code> within the <code>dispose</code> function as well.		Now, let's insert <code>print("Goodbye World ^^;");</code> within the <code>dispose</code> function as well.

			<pre>
			function create(ctx, state, pids) {
			print("Hello World ^^");
			}

			...

			function dispose(ctx, state, pids) {
			print("Goodbye World ^^;");
			}
			</pre>

	After that, we can press F3+T to reload our resource pack and look at your game console!		After that, we can press F3+T to reload our resource pack and look at your game console!
Line 93:		Line 105:

	There you have it, a very simple Hello World script running in JCM.		There you have it, a very simple Hello World script running in JCM.

	~~''(p.s. In case you got lost, run'' <code>/tp 0 -60 0</code>'').''~~

	So this concludes the Scripted PIDS tutorial, I hope that...		So this concludes the Scripted PIDS tutorial, I hope that...

AmberFrost: /* v4: Go ham! */

2024-11-12T16:32:03Z

v4: Go ham!

← Older revision		Revision as of 00:32, 13 November 2024
Line 735:		Line 735:
	Right now things are looking very solid, but this is the MTR Mod we are talking about, so things quickly falls apart when someone enter <code>Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</code> as their station name.		Right now things are looking very solid, but this is the MTR Mod we are talking about, so things quickly falls apart when someone enter <code>Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</code> as their station name.

	"Of course I am not ~~stupid~~ enough to do that" Ok sure but now let's look at a real-world example, by renaming your destination station from <code>田景\|Tin King</code> to <code>天水圍\|Tin Shui Wai</code>		"''Of course I am not silly enough to do that''" Ok sure but now let's look at a real-world example, by renaming your destination station from <code>田景\|Tin King</code> to <code>天水圍\|Tin Shui Wai</code>

	(~~And~~ if you know the HK LRT network well enough and are nerdy-enough, you can ~~also~~ set your route number to <code>705</code> and route color to <code>#71BE44</code>)		''(p.s. if you know the HK LRT network well enough and are nerdy-enough, you can set your route number to <code>705</code> and route color to <code>#71BE44</code> to match real-world situation)''

	[[File:JCM JS PIDS Tutorial v4.1.png\|362x362px]]ummm send help.		[[File:JCM JS PIDS Tutorial v4.1.png\|362x362px]]''ummm send help.''

	=== Limiting text size ===		=== Limiting text size ===
	As we had learnt, we can set the size of a texture with <code>size(w, h)</code> function. ~~The~~ same can actually be done with text, try it:<pre>		As we had learnt, we can set the size of a texture with <code>size(w, h)</code> function. What you might not know however is that the same can actually be done with text, try it:<pre>
	Text.create("Arrival destination")		Text.create("Arrival destination")
	.text(TextUtil.cycleString(arrival.destination()))		.text(TextUtil.cycleString(arrival.destination()))
Line 749:		Line 749:
	.scale(1.25)		.scale(1.25)
	.draw(ctx);		.draw(ctx);
	</pre>After reloading, you'll notice that nothing ~~happens. However the size indeed does get defined, but by default JCM don't take any action if the text overflowed the size we defined~~.		</pre>After reloading, you'll notice that nothing has changed at all.

	To do so, we need to tell JCM what to do, either with <code>stretchXY()</code> or <code>scaleXY()</code>.		This is intended, and the text area indeed got defined. However by default JCM don't take any action if the text overflowed.

			To do so, we need to tell JCM what to do, either with the <code>stretchXY()</code>, <code>scaleXY()</code>, <code>wrapText()</code> and <code>marquee()</code> function.

	With <code>stretchXY()</code>, the text will be stretched according to which axis it overflowed. So if it overflowed horizontally, the text will only be stretched horizontally.		With <code>stretchXY()</code>, the text will be stretched according to which axis it overflowed. So if it overflowed horizontally, the text will only be stretched horizontally.
Line 757:		Line 759:
	With <code>scaleXY()</code>, the text will be stretched on both-axis to ensure that it stays within the defined size. Or in other word, it maintains the aspect ratio of the text.		With <code>scaleXY()</code>, the text will be stretched on both-axis to ensure that it stays within the defined size. Or in other word, it maintains the aspect ratio of the text.

	~~You can~~ try ~~both and see what happens~~!<pre>		With <code>wrapText()</code>, any text that overflowed will be rendered in the next line, this might be useful when rendering paragraphs of text.

			With <code>marquee()</code>, the text content is cropped to only show the visible section. The text will be continuously shifted to ensure that all portion of the text is shown.

			For now, we'll go with <code>scaleXY()</code> as I think it looks nicer, feel free to try others however!<pre>
	Text.create("Arrival destination")		Text.create("Arrival destination")
	.text(TextUtil.cycleString(arrival.destination()))		.text(TextUtil.cycleString(arrival.destination()))
Line 765:		Line 771:
	.scale(1.25)		.scale(1.25)
	.draw(ctx);		.draw(ctx);
	</pre>~~For now, we'll go with <code>scaleXY()</code> as I think it looks nicer:~~[[File:JCM JS PIDS Tutorial v4.2.png\|417x417px]]		</pre>[[File:JCM JS PIDS Tutorial v4.2.png\|417x417px]]

	We can also apply the same logic elsewhere:<pre>		Nice. Now, we can also apply the same logic elsewhere:<pre>
	Text.create("LRT Number Text")		Text.create("LRT Number Text")
	.text(arrival.routeNumber())		.text(arrival.routeNumber())

AmberFrost: /* Re-implementing functions in PIDSUtil */

2024-11-12T16:21:39Z

Re-implementing functions in PIDSUtil

← Older revision		Revision as of 00:21, 13 November 2024
Line 797:		Line 797:
	</pre>		</pre>
	== v5: It's coming together ==		== v5: It's coming together ==
	At this point if you are developing this PIDS Preset for your own use ~~case~~, you should be ready to go by modifying the code to suit your need.		At this point if you are developing this PIDS Preset for your own use, you should be ready to go by modifying the code to suit your need.

	However if you are planning to publish a PIDS Preset for others to use, you have to also account for the variety of different configuration people uses. Most notably, each PIDS Block has it's own config, such as '''Custom Messages''', '''Hide Arrivals''', '''Hide Platform Number''' etc.		However if you are planning to publish a PIDS Preset for others to use, you have to also account for the variety of different configuration people uses. Most notably, each PIDS Block has it's own config, such as '''Custom Messages''', '''Hide Arrivals''', '''Hide Platform Number''' etc.
Line 804:		Line 804:

	=== Custom Message ===		=== Custom Message ===
	We can obtain the custom message of the ~~nth~~ row by using the function <code>pids.getCustomMessage(n)</code>		We can obtain the custom message of the n<sup>th</sup> row by using the function <code>pids.getCustomMessage(n)</code>

	If a custom message exists, it will return the custom message.		If a custom message exists, it will return the custom message.
Line 887:		Line 887:
	.pos(pids.width - 5, 2)		.pos(pids.width - 5, 2)
	.scale(0.9)		.scale(0.9)
	~~.italic()~~
	.rightAlign()		.rightAlign()
	.draw(ctx);		.draw(ctx);
Line 984:		Line 983:
	Now can you create your own function to replace the use of PIDSUtil?		Now can you create your own function to replace the use of PIDSUtil?

	===== getETAText(arrivalMs) =====		===== PIDSUtil.getETAText(arrivalMs) =====
	Tips:		Tips:

Line 991:		Line 990:
	* If arrival second less than 120, return <code><etaMin> 分鐘\|<etaMin> min</code>		* If arrival second less than 120, return <code><etaMin> 分鐘\|<etaMin> min</code>
	* Otherwise, return <code><etaMin> 分鐘\|<etaMin> mins</code>		* Otherwise, return <code><etaMin> 分鐘\|<etaMin> mins</code>
	* Use <code>Math.floor</code> and <code>Math.ceil</code> to round down/up numbers.		* Use <code>Math.floor</code> and <code>Math.ceil</code> to round down/up numbers

	===== formatTime(mcTime) =====		===== PIDSUtil.formatTime(mcTime) =====
	Tips:		Tips:

Line 1,006:		Line 1,005:
	* Read the [[JCM:Scripting:Documentation:PIDS#PIDS Object Related\|documentation]] to see whether there's a function to determine if arrivals have mixed car length		* Read the [[JCM:Scripting:Documentation:PIDS#PIDS Object Related\|documentation]] to see whether there's a function to determine if arrivals have mixed car length
	* Use <code>PIDSUtil.getCarText(carLength)</code> function to obtain the car text.		* Use <code>PIDSUtil.getCarText(carLength)</code> function to obtain the car text.
	* Append the car text to the ETA string~~, separated by~~ a <code>\|</code> so it cycles through ~~all of them.~~		* Append the car text to the ETA string with a <code>\|</code> so that it cycles through both car-text and ETA-text!

	== Ending ==		== Ending ==

AmberFrost: /* What to do next */

2024-11-12T16:16:42Z

What to do next

← Older revision		Revision as of 00:16, 13 November 2024
Line 1,008:		Line 1,008:
	* Append the car text to the ETA string, separated by a <code>\|</code> so it cycles through all of them.		* Append the car text to the ETA string, separated by a <code>\|</code> so it cycles through all of them.

			== Ending ==
	~~Looking forward for~~ any feedback ~~for this new scripted preset system~~! See you by then~ ^-^		This concludes the PIDS tutorial. If you have any question or feedback, please don't hesitate to send it either in the District of Joban server, or the JCM thread in the Minecraft Transit Railway server! See you by then~ ^-^

	- LX		- LX

AmberFrost at 16:13, 12 November 2024

2024-11-12T16:13:29Z

← Older revision		Revision as of 00:13, 13 November 2024
Line 4:		Line 4:
	[[File:JCM JS PIDS Tutorial Result.png\|none\|thumb\|413x413px\|Top: Default RV PIDS Preset, Bottom: Custom JS-based PIDS Preset]]		[[File:JCM JS PIDS Tutorial Result.png\|none\|thumb\|413x413px\|Top: Default RV PIDS Preset, Bottom: Custom JS-based PIDS Preset]]

	== Prerequisite ~~& Notes~~ ==		== Prerequisite ==
			Before beginning this tutorial, you should setup a MTR 4 world:
			#Create a route with 2 stations:
			## 1st station named <code>屯門碼頭\|Tuen Mun Ferry Pier</code>
			## 2nd station named <code>田景\|Tin King</code>
			# Name the route <code>輕鐵\|Light Rail</code> with Route Number <code>507</code> and color code <code>00A650</code>
			#'''[Note] A fully operational route is not required.''' (i.e. If your route jams, the tutorial can still continue, as long as there's any train on the route).

	~~# Setup an MTR 4 world~~		== Note ==
	~~## Create a route with 2 station~~:		Before starting, please note that:
	~~### 1st station named <code>屯門碼頭\|Tuen Mun Ferry Pier</code>~~
	~~### 2nd station named <code>田景\|Tin King</code>~~		* Repeated code may be abbreviated with the <code>...</code> notation. You should consider locating and changing only the affected line.
	~~## Name the route <code>輕鐵\|Light Rail</code> with Route Number <code>507</code> and color code <code>00A650</code>~~		* This article is best read with basic level of programming knowledge (Doesn't have to be JavaScript). You may still finish the tutorial without such knowledge, but may find some difficulty grasping some concept as this article is not meant to be a programming 101.
	# Repeated code may be abbreviated with the <code>...</code> notation. You should consider locating and changing only the affected line.		* You don't have to finish the tutorial in one go :)
	# This article is best read with basic level of programming knowledge (Doesn't have to be JavaScript). You may still finish the tutorial without such knowledge, but may find some difficulty grasping some concept as this article is not meant to be a programming 101.

	== Getting started ==		== Getting started ==

AmberFrost: /* Rendering Arrivals */

2024-11-09T16:36:39Z

Rendering Arrivals

← Older revision		Revision as of 00:36, 10 November 2024
Line 175:		Line 175:
	}		}
	</pre>		</pre>
	[[File:JCM JS PIDS Tutorial v0.4.png\|thumb\|407x407px\|''<small>(The reason the bottom line appears to be more "left" than the top line is due to Minecraft's imperfection when rendering TTF font, it will work fine if you switch to Minecraft font or with most other text combination)</small>''\|none]]		[[File:JCM JS PIDS Tutorial v0.4.png\|thumb\|407x407px\|''<small>(Note: The reason the bottom line appears to be more "left" than the top line is due to Minecraft's imperfection when rendering TTF font, it will work fine if you switch to Minecraft font or with most other text combination)</small>''\|none]]

	=== Rendering Arrivals ===		=== Rendering Arrivals ===
Line 186:		Line 186:
	<pre>		<pre>
	let firstRowArrival = pids.arrivals().get(0);		let firstRowArrival = pids.arrivals().get(0);
	</pre>~~You can obtain a variety of information in the arrival entry~~, ~~which includes it's route/LRT~~ number, ~~it's arrival~~ and ~~departure time, the route it's running~~ and ~~more~~. ~~You can refer to the documentation '''[TODO]''' for further information~~.		</pre>Remember, JavaScript is 0-index based. The first number starts from 0, then 1, and so on and so fourth...

	~~Here however~~, we are only interested in getting the destination (~~i.e.~~ Where the train is going), so we can do that with the <code>destination()</code> function.		You can obtain a variety of information in the arrival entry, which includes it's route/LRT number, it's arrival and departure time, the route it's running and more. You can refer to the [[JCM:Scripting:Documentation:PIDS\|documentation]] for further information, but we will also cover some of it in this tutorial.

			At this point we are only interested in getting the destination (Where the train is going), and we can do that with the <code>destination()</code> function.

	<pre>		<pre>

AmberFrost at 13:22, 9 November 2024

2024-11-09T13:22:11Z

← Older revision		Revision as of 21:22, 9 November 2024
Line 1:		Line 1:
	~~{{DraftBox}}~~

	This is a step-by-step tutorial on building a Scripted PIDS Preset using JavaScript.		This is a step-by-step tutorial on building a Scripted PIDS Preset using JavaScript.

AmberFrost at 13:21, 9 November 2024

2024-11-09T13:21:46Z

Show changes