Difference between revisions of "Feature Demo"

From PKC
Jump to navigation Jump to search
imported>Benkoo
Line 1: Line 1:
__NOTOC__
This page is dedicated to demonstrate features of various extensions.
 
{{#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=1200|height=800
}}
 


This page is dedicated to demonstrate features of various extensions.
For HTML Widget Demos, please look at this page: [[Demo:Widget collection]]
=Map=
=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.
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.


==Map 1==
To show the the center of a city, a map can be specified as follow:
<pre>
{{#display_map:center=Boston|zoom=5}}
</pre>
{{#display_map:center=Taiwan|zoom=5}}
----


==Map 1==
==Map 2==


For example, the following map can be specified as follow:
For example, the following map can be specified as follow:
Line 22: Line 22:
   Serangan, Bali, Indonesia:100~TSEA Campus~HDX Program~green~0.7~10~blue~0.5
   Serangan, Bali, Indonesia:100~TSEA Campus~HDX Program~green~0.7~10~blue~0.5
| zoom=9
| zoom=9
|width=1200|height=800
|width=600|height=400
}}
}}
</pre>
</pre>




==Map 2==
{{#display_map:circles=
To show the the center of a city, a map can be specified as follow:
  Serangan, Bali, Indonesia:500;
<pre>
  Serangan, Bali, Indonesia:100~TSEA Campus~HDX Program~green~0.7~10~blue~0.5
{{#display_map:center=Israle|zoom=5}}
| zoom=9
</pre>
|width=600|height=400
 
}}
{{#display_map:center=Israel|zoom=5}}
----




Line 50: Line 48:
</ref> videos of many sources in your page, you can also specify starting and stopping time points.
</ref> videos of many sources in your page, you can also specify starting and stopping time points.
<pre>
<pre>
{{#ev:youtube|https://www.youtube.com/watch?v=X_oNzF_KS6g|||||start=100&end=103}}
{{#ev:youtube|X_oNzF_KS6g|||||start=100&end=103}}
</pre>
</pre>


{{#ev:youtube|https://www.youtube.com/watch?v=X_oNzF_KS6g|||||start=100&end=103}}
{{#ev:youtube|X_oNzF_KS6g|||||start=100&end=103}}


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]].
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]].
Line 60: Line 58:


=Spotify=
=Spotify=
If you are into music, you can embed Spotify songs here.
If you are into music<ref>{{:Book:And yet it is heard}}</ref>, you can embed Spotify songs here.
<pre>
<pre>
<spotify>album/4tRU7xRuLI8oaTTNFtrytT</spotify>
<spotify>album/4tRU7xRuLI8oaTTNFtrytT</spotify>
Line 72: Line 70:
For mathematicians and engineers, your can also typeset mathematical equations using LaTeX syntax here.  
For mathematicians and engineers, your can also typeset mathematical equations using LaTeX syntax here.  
<pre>
<pre>
<math>\int_a^x \!\!\!\int_a^s f(x)\,dz\,ds = \int_a^x f(w)(z-c)\,dy</math>
<math>\int_a^x \!\!\!\int_a^w f(x)\,dz\,ds = \int_a^x f(w)(z-c)\,dy</math>
</pre>
</pre>


  <math>\int_a^x \!\!\!\int_a^s f(x)\,dz\,ds = \int_a^x f(w)(z-c)\,dy</math>
  <math>\int_a^x \!\!\!\int_a^w f(x)\,dz\,ds = \int_a^x f(w)(z-c)\,dy</math>


==3D Object==
==3D Object==
Line 113: Line 111:
<DynamicPageList>
<DynamicPageList>
category=Logic Model
category=Logic Model
count=5
count=2
</DynamicPageList>
</DynamicPageList>
</pre>
</pre>
Line 119: Line 117:
<DynamicPageList>
<DynamicPageList>
category=Logic Model
category=Logic Model
count=5
count=2
</DynamicPageList>
</DynamicPageList>


Revision as of 13:25, 22 July 2021

This page is dedicated to demonstrate features of various extensions.

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.

Map 1

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

{{#display_map:center=Boston|zoom=5}}
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

Not only you may embed[3] videos of many sources in your page, you can also specify starting and stopping time points. 

{{#ev:youtube|X_oNzF_KS6g|||||start=100&end=103}}

{{#ev:youtube|X_oNzF_KS6g|||||start=100&end=103}}

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.

Spotify

If you are into music[4], 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^x \!\!\!\int_a^w f(x)\,dz\,ds = \int_a^x f(w)(z-c)\,dy</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

Drawio Editor

You may click on the Edit hyperlink on the upper right corner of this image to edit the SVG image.

DynamicPageList

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

An example can be shown here 

<DynamicPageList>
category=Logic Model
count=2
</DynamicPageList>


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. ↑ 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
  4. ↑ Book:And yet it is heard
  5. ↑ IlyaHaykinson and Amgine, Extension:DynamicPageList, Wikimedia, last accessed: March 27, 2021, URL:https://www.mediawiki.org/wiki/Extension:DynamicPageList_(Wikimedia)
  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=6695"