Latest revision as of 06:04, 13 January 2024

This page is dedicated to demonstrate features of various extensions. [Updated 14-Mar-2022 16:13 WIB]

For HTML Widget Demos, please look at this page: Demo:Widget collection

Map

The following maps are interactive maps^[1] embedded in MediaWiki, you can find instructions^[2] on how to edit these embedded links to create your own map. For the usage statistics of this website, please see Matomo Dashboard.

Map 1

To show the the center of a region, a map can be specified as follow:

{{#display_map:center=Indonesia|zoom=5}}

Loading map...

Gasing Locations

Loading map...

Map 2

For example, the following map can be specified as follow:

{{#display_map:circles=
  Serangan, Bali, Indonesia:500;
  Serangan, Bali, Indonesia:100~TSEA Campus~HDX Program~green~0.7~10~blue~0.5
|zoom=9
|width=600
|height=400
}}

Loading map...

EmbedVideo

Please see the MediaWiki Widget Extension.

{{#Widget:YouTube
|id=X_oNzF_KS6g
|start=100
|width=640
|height=360
}}

Or, please refer to below code [1]

{{#widget:YouTube
|id= hP3ENPc8Jf0
|width= 900
|height=500
}}|https://www.youtube.com/watch?v=g1QMqc06UNo |||||start=5&end=15&loop=5}}

|https://www.youtube.com/watch?v=X_oNzF_KS6g |||||start=5&end=15&loop=5}}

Embedding videos in a web page will significantly enrich user experience. The following link shows a video embedded in this page. More extensive demo can be found in this link.

|https://www.youtube.com/watch?v=g1QMqc06UNo |||||start=5&end=15&loop=5}}

Spotify

If you are into music^[3], you can embed Spotify songs here.

<spotify>album/4tRU7xRuLI8oaTTNFtrytT</spotify>

Math Typesetting

For mathematicians and engineers, your can also typeset mathematical equations using LaTeX syntax here.

<math>\int_a^Q \!\!\!\int_a^q f(u)\,dQ\,ds = \int_a^x f(q)(z-c)\,dQ</math>

$\int _{a}^{Q}\!\!\!\int _{a}^{q}f(u)\,dQ\,ds=\int _{a}^{x}f(q)(z-c)\,dQ$

3D Object

If you have 3D objects that you want to show on the page, you can just upload the file to this website, and embed them into the page:

[[File:Asad Al-Lat.stl|300px]]

Click on the image below to interact with it in Media Viewer.

You may also make the 3D object interactive in the page.

[[File:Cube.json]]

Timeline.js in Widget:Iframe

This page uses the Timeline.js demo website to show what can be done in an Iframe.

DynamicPageList

You may also specify certain conditional information to extract a list of pages from the database. This is the well-known DynamicPageList^[4] feature of MediaWiki.

An example can be shown here

<DynamicPageList>
category=BPMN StartEvent
count=2</DynamicPageList>

Pictures

To embed and view you images inside Mediawiki Page, please refer to [2]

Text Formatting

To learn how to format your text^[5], please refer to [3]

Userful Websites

For generating wikitables, please see: TableGenerator/MediaWiki Tables.

It is always helpful to read MediaWiki's Manual:Extensions ^[6]

References

↑ https://leafletjs.com
↑ https://maps.extension.wiki/wiki/Displaying_Leaflet_maps
↑ Book:And yet it is heard
↑ IlyaHaykinson and Amgine, Extension:DynamicPageList, Wikimedia, last accessed: March 27, 2021, URL:https://www.mediawiki.org/wiki/Extension:DynamicPageList_(Wikimedia)
↑ Koo, Hsueh-Yung Benjamin (31 Jan 2005). A Meta-language for Systems Architecting (PDF) (Ph.D.). local page: MIT. Retrieved July 18, 2021.
↑ Anonymous MediaWiki Manual Editors, Manual:Extensions, Last Access: March 27, 2021, https://www.mediawiki.org/wiki/Manual:Extensions

[1] ttps://leafletjs.com

[2] ttps://maps.extension.wiki/wiki/Displaying_Leaflet_maps

[3] Book:And yet it is heard

[4] IlyaHaykinson and Amgine, Extension:DynamicPageList, Wikimedia, last accessed: March 27, 2021, URL:https://www.mediawiki.org/wiki/Extension:DynamicPageList_(Wikimedia)

[5] Koo, Hsueh-Yung Benjamin (31 Jan 2005). A Meta-language for Systems Architecting (PDF) (Ph.D.). local page: MIT. Retrieved July 18, 2021.

[6] Anonymous MediaWiki Manual Editors, Manual:Extensions, Last Access: March 27, 2021, https://www.mediawiki.org/wiki/Manual:Extensions

[1]

[2]

[3]

[4]

[5]

[6]

Difference between revisions of "Feature Demo"

Latest revision as of 06:04, 13 January 2024

Contents

Map

Map 1

Gasing Locations

Map 2

EmbedVideo

Spotify

Math Typesetting

3D Object

Timeline.js in Widget:Iframe

DynamicPageList

Pictures

Text Formatting

Userful Websites

References

Navigation menu

@@ Line 1: / Line 1: @@
-This page is dedicated to demonstrate features of various extensions.
+This page is dedicated to demonstrate features of various extensions. [Updated 14-Mar-2022 16:13 WIB]
+For HTML Widget Demos, please look at this page: [[Demo:Widget collection]]
+=Map=
+The following maps are interactive maps<ref>https://leafletjs.com</ref> embedded in MediaWiki, you can find instructions<ref>https://maps.extension.wiki/wiki/Displaying_Leaflet_maps</ref> on how to edit these embedded links to create your own map. For the usage statistics of this website, please see [[Matomo Dashboard]].
+==Map 1==
+To show the the center of a region, a map can be specified as follow:
+<pre>
+{{#display_map:center=Indonesia|zoom=5}}
+</pre>
+{{#display_map:center=Indonesia|zoom=5}}
+----
+===Gasing Locations===
+{{#display_map:circles=
+  Jembrana, Bali, Indonesia:10000~[[Jembarana Bali]];
+  Bangli, Bali, Indonesia:10000~[[Bangli Bali]];
+  Dairi, Sumatera Utara:10000~[[Dairi Sumatera Utara]];
+  Simalungun, Sumatera Utara:10000~[[Simalungun Sumatera Utara]];
+  Tapanuli Utara, Sumatera Utara:10000~[[Tapanuli Utara Sumatera Utara]];
+  Tapanuli Selatan, Sumatera Utara:10000~[[Tapanuli Selatan Sumatera Utara]];
+  Humbang Hasudutan, Sumatera Utara:10000~[[Humbang Hasudutan Sumatera Utara]];
+  Toba, Sumatera Utara:10000~[[Toba Sumatera Utara]];
+  Bitung, Sulawesi:10000~[[Bitung Sulawesi]];
+  Jayapura, Papua:10000~[[Jayapura Sulawesi]];
+  Kerong, Papua:10000~[[Kerong Sulawesi]];
+  Manokwari Selatan, Papua:10000~[[Manokwari Selatan Sulawesi]];
+  Murung Raya, Kalimantan:10000~[[Manokwari Selatan Sulawesi]];
+  Serang, Banten:10000~[[Manokwari Selatan Sulawesi]];
+  Banyuwangi, Jawa Tengah:10000~[[Manokwari Selatan Sulawesi]];
+  Morowali utara, Sulawesi:10000~[[Manokwari Selatan Sulawesi]];
+  Morowali, Sulawesi:10000~[[Manokwari Selatan Sulawesi]];
+|zoom=4.5
+|zoom=4.5
+|width=1200
+|height=400
+}}
+==Map 2==
+For example, the following map can be specified as follow:
+<pre>
+{{#display_map:circles=
+  Serangan, Bali, Indonesia:500;
+  Serangan, Bali, Indonesia:100~TSEA Campus~HDX Program~green~0.7~10~blue~0.5
+|zoom=9
+|width=600
+|height=400
+}}
+</pre>
-A few obvious features are:
-# [[Feature Demo#Map|Maps]] by leaflet
-# [[Feature Demo#Extension:EmbedVideo|EmbedVideo]]
-# [[Feature Demo#Math Type Setting|Math Type Setting]]
-# [[Feature Demo#3D object visualization|3D object visualization]]
-# [[Feature Demo#Dynamic Page List|Dynamic Page List]]
-==Nginx Reverse Proxy==
+{{#display_map:circles=
-A common practice to set up website is to use Nginx as a reverse proxy to direct web traffic through an encrypted channel, often called [[https]]. The following page on [[Nginx as Reverse Proxy]] shows how to do it.
+   Serangan, Bali, Indonesia:500;
+   Serangan, Bali, Indonesia:100~TSEA Campus~HDX Program~green~0.8~10~blue~0.6
+|zoom=9
+|width=800
+|height=500
+}}
-==Locating the Table of Content (ToC) using the Magic word==
-Please look at this page [https://maps.extension.wiki/wiki/Displaying_Leaflet_maps] for map-related extensions.
-__TOC__
 ----
-=Map=
+==EmbedVideo==
-{{#display_map:Berlin; Brussel; 40° 42' 46.02" N, 74° 0' 21.39" W}}
-----
+Please see the MediaWiki [[mw:Extension:Widgets|Widget Extension]].
-{{#display_map:center=Brandenburg Gate, Berlin, Germany}}
+<pre>
+{{#Widget:YouTube
+|id=X_oNzF_KS6g
+|start=100
+|width=640
+|height=360
+}}
+</pre>
+Or, please refer to below code [https://www.mediawiki.org/wiki/Extension:EmbedVideo]
+<pre>
+{{#widget:YouTube
+|id= hP3ENPc8Jf0
+|width= 900
+|height=500
+}}|https://www.youtube.com/watch?v=g1QMqc06UNo |||||start=5&end=15&loop=5}}
+</pre>
+{{#widget:YouTube
+|id= hP3ENPc8Jf0
+|width= 900
+|height=500
+}}|https://www.youtube.com/watch?v=X_oNzF_KS6g |||||start=5&end=15&loop=5}}
+Embedding videos in a web page will significantly enrich user experience. The following link shows a video embedded in this page. More extensive demo can be found in this [[THE REBEL BILLIONAIRE|link]].
-Before doing any development, please read [http://mediawiki.org MediaWiki]'s Manual:Extensions
+{{#widget:YouTube
-<ref>
+|id= hP3ENPc8Jf0
-Anonymous MediaWiki Manual Editors,
+|width= 900
-Manual:Extensions,
+|height=500
-Last Access: March 27, 2021,
+}}|https://www.youtube.com/watch?v=g1QMqc06UNo |||||start=5&end=15&loop=5}}
-https://www.mediawiki.org/wiki/Manual:Extensions
-</ref>
 ----
 =Spotify=
+If you are into music<ref>{{:Book:And yet it is heard}}</ref>, you can embed Spotify songs here.
+<pre>
+<spotify>album/4tRU7xRuLI8oaTTNFtrytT</spotify>
+</pre>
 <spotify>album/4tRU7xRuLI8oaTTNFtrytT</spotify>
-Try this special page:
-[[Special:Manage_Two-factor_authentication]]
-==EmbedVideo==
+==Math Typesetting==
-<ref>
-Alexia E. Smith (Alexia E. Smith), Andrew Whitworth (Whiteknight), Jim R. Wilson (Jimbojw), and Mohammad Derakhshani (Mderakhs),
+For mathematicians and engineers, your can also typeset mathematical equations using LaTeX syntax here.
-Extension:EmbedVideo,
+<pre>
-Latest version	2.9.0 (2020-10-14),
+<math>\int_a^Q \!\!\!\int_a^q f(u)\,dQ\,ds = \int_a^x f(q)(z-c)\,dQ</math>
-Wikimedia,
+</pre>
-https://www.mediawiki.org/wiki/Extension:EmbedVideo
-</ref>
-<Center>
+<math>\int_a^Q \!\!\!\int_a^q f(u)\,dQ\,ds = \int_a^x f(q)(z-c)\,dQ</math>
-Note that using the ''''#ev'''' tag, one may specify ''''start'''' and ''''stop'''' time points.
-{{#ev:youtube|https://www.youtube.com/watch?v=-cPchmU-pB4|||||start=200&end=203}}
-Using the ''''#evt'''' tag, specify the dimensions of the video.
+==3D Object==
-{{#evt:
+If you have 3D objects that you want to show on the page, you can just upload the file to this website, and embed them into the page:
-service=youtube
+<pre>
-|id=https://www.youtube.com/watch?v=eAORm-8b1Eg
+[[File:Asad Al-Lat.stl|300px]]
-|dimensions=50
+</pre>
-}}
-</Center>
+Click on the image below to interact with it in [[MW:Extension:Media_Viewer|Media Viewer]].
-----
-==Math Typesetting==
+<Center>[[File:Asad Al-Lat.stl|300px]]</Center>
-<Center>
- <math>\int_a^x \!\!\!\int_a^s f(x)\,dz\,ds = \int_a^x f(w)(z-c)\,dy</math>
-<br>
-</Center>
-==3D Data in json format==
+----
+You may also make the 3D object interactive in the page.
+<pre>
+[[File:Cube.json]]
+</pre>
 <Center>[[File:Cube.json]]</Center>
+==Timeline.js in Widget:Iframe==
+{{:Demo:Widget:Iframe/Timeline.js}}
 ==DynamicPageList==
-<ref>
+You may also specify certain conditional information to extract a list of pages from the database. This is the well-known DynamicPageList<ref>
 IlyaHaykinson and Amgine,
 Extension:DynamicPageList,
@@ Line 81: / Line 146: @@
 last accessed: March 27, 2021,
 URL:https://www.mediawiki.org/wiki/Extension:DynamicPageList_(Wikimedia)
-</ref> :
+</ref> feature of MediaWiki.
+An example can be shown here
+<pre>
+<DynamicPageList>
+category=BPMN StartEvent
+count=2</DynamicPageList>
+</pre>
 <DynamicPageList>
-category=Logic Model
+category=BPMN StartEvent
-count=5
+count=2
 </DynamicPageList>
+=Pictures=
+To embed and view you images inside Mediawiki Page, please refer to [https://www.mediawiki.org/wiki/Help:Images]
+=Text Formatting=
+To learn how to format your text<ref>{{:Thesis/A Meta-language for Systems Architecting}}</ref>, please refer to [https://www.mediawiki.org/wiki/Help:Formatting]
+=Userful Websites=
+For generating wikitables, please see: [https://www.tablesgenerator.com/mediawiki_tables TableGenerator/MediaWiki Tables].
+It is always helpful to read [http://mediawiki.org MediaWiki]'s Manual:Extensions
+<ref>
+Anonymous MediaWiki Manual Editors,
+Manual:Extensions,
+Last Access: March 27, 2021,
+https://www.mediawiki.org/wiki/Manual:Extensions
+</ref>
 =References=
 <References/>

Difference between revisions of "Feature Demo"

Latest revision as of 06:04, 13 January 2024

Map

Map 1

Gasing Locations

Map 2

EmbedVideo

Spotify

Math Typesetting

3D Object

Timeline.js in Widget:Iframe

DynamicPageList

Pictures

Text Formatting

Userful Websites

References

Navigation menu

Search