Difference between revisions of "Feature Demo"

From PKC
Jump to navigation Jump to search
BenKoo>Benkoo
m (Text replacement - "{{#ev:youtube|hP3ENPc8Jf0 |width=900 |height=500 }} " to "{{#widget:YouTube |id= hP3ENPc8Jf0 |width= 900 |height=500 }}")
 
(104 intermediate revisions by 9 users not shown)
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]


A few obvious features are:
For HTML Widget Demos, please look at this page: [[Demo:Widget collection]]
# [[Feature Demo#Map|Maps]] by leaflet
=Map=
# [[Feature Demo#EmbedVideo|EmbedVideo]]
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]].
# [[Feature Demo#Math Typesetting|Math Type Setting]]
 
# [[Feature Demo#3D Object|3D object visualization]]
==Map 1==
# [[Feature Demo#DynamicPageList|Dynamic Page List]]
To show the the center of a region, a map can be specified as follow:
# [[Feature Demo#Spotify|Spotify]]
<pre>
{{#display_map:center=Indonesia|zoom=5}}
</pre>


==Locating the Table of Content (ToC) using the Magic word==
{{#display_map:center=Indonesia|zoom=5}}
Please look at this page [https://maps.extension.wiki/wiki/Displaying_Leaflet_maps] for map-related extensions.
__TOC__
----
----


=Map=
===Gasing Locations===
The following maps are leaflet maps 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.
{{#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:
For example, the following map can be specified as follow:
<pre>
<pre>
{{#display_map:Bali, Indonesia}}
{{#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>
</pre>


==Example 1==
 
{{#display_map:Bali, Indonesia|width=400|height=250}}
{{#display_map:circles=
  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
}}
 
 
 
 
----
----


To show the the center of a city, a map can be specified as follow:
==EmbedVideo==
 
Please see the MediaWiki [[mw:Extension:Widgets|Widget Extension]].
<pre>
<pre>
{{#display_map:center=Boston, USA}}
{{#Widget:YouTube
|id=X_oNzF_KS6g
|start=100
|width=640
|height=360
}}
</pre>
</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}}


==Example 1==
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]].
{{#display_map:center=Boston, USA}}
 


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


=Spotify=
=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>
<spotify>album/4tRU7xRuLI8oaTTNFtrytT</spotify>
</pre>


Try this special page:
<spotify>album/4tRU7xRuLI8oaTTNFtrytT</spotify>
[[Special:Manage_Two-factor_authentication]]


==EmbedVideo==
Embedding videos<ref>
Alexia E. Smith (Alexia E. Smith), Andrew Whitworth (Whiteknight), Jim R. Wilson (Jimbojw), and Mohammad Derakhshani (Mderakhs),
Extension:EmbedVideo,
Latest version 2.9.0 (2020-10-14),
Wikimedia,
https://www.mediawiki.org/wiki/Extension:EmbedVideo
</ref> 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]].


==Math Typesetting==


<Center>
For mathematicians and engineers, your can also typeset mathematical equations using LaTeX syntax here.
Note that using the ''''#ev'''' tag, one may specify ''''start'''' and ''''stop'''' time points.
<pre>
{{#ev:youtube|https://www.youtube.com/watch?v=-cPchmU-pB4|||||start=200&end=203}}
<math>\int_a^Q \!\!\!\int_a^q f(u)\,dQ\,ds = \int_a^x f(q)(z-c)\,dQ</math>
</pre>


Using the ''''#evt'''' tag, specify the dimensions of the video.
<math>\int_a^Q \!\!\!\int_a^q f(u)\,dQ\,ds = \int_a^x f(q)(z-c)\,dQ</math>
{{#evt:
service=youtube
|id=https://www.youtube.com/watch?v=eAORm-8b1Eg
|dimensions=50
}}


</Center>
==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:
<pre>
[[File:Asad Al-Lat.stl|300px]]
</pre>


==Math Typesetting==
Click on the image below to interact with it in [[MW:Extension:Media_Viewer|Media Viewer]].
<Center>
<math>\int_a^x \!\!\!\int_a^s f(dsalfdafdas fx)\,dz\,ds = \int_a^x f(w)(z-c)\,dy</math>
<br>
</Center>


==3D Object==
<Center>[[File:Asad Al-Lat.stl|300px]]</Center>
<Center>[[File:Asad Al-Lat.stl|300px]]</Center>
----
You may also make the 3D object interactive in the page.
<pre>
[[File:Cube.json]]
</pre>
<Center>[[File:Cube.json]]</Center>
<Center>[[File:Cube.json]]</Center>
==Timeline.js in Widget:Iframe==
{{:Demo:Widget:Iframe/Timeline.js}}


==DynamicPageList==
==DynamicPageList==
Line 90: Line 151:
<pre>
<pre>
<DynamicPageList>
<DynamicPageList>
category=Logic Model
category=BPMN StartEvent
count=5
count=2</DynamicPageList>
</DynamicPageList>
</pre>
</pre>


<DynamicPageList>
<DynamicPageList>
category=Logic Model
category=BPMN StartEvent
count=5
count=2
</DynamicPageList>
</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
It is always helpful to read [http://mediawiki.org MediaWiki]'s Manual:Extensions

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>

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.

https://pkc.pub/images/a/af/Asad_Al-Lat.stl

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

[[File:Cube.json]]
https://pkc.pub/images/f/f1/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

  1. ↑ https://leafletjs.com
  2. ↑ https://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
Retrieved from "https://pkc.pub/index.php?title=Feature_Demo&oldid=40365"