Najevi Wiki
Don't have an account?
Register
Advertisement
Register

Gadget - Tunngle Live List

Edit

Tunngle is free virtual private network (VPN) software and allows any interested parties to extend their local area network (LAN) to include computers at remote locations around the world. It is a secure network but behaves like a LAN when it comes to hosting and joining multi-player games that support a local network style of game play. Your LAN party options are no longer limited to the one room or building. In this way it functions very much like Hamachi.

At www.tunngle.net/network-browser you can see a live list of Tunngle channels and the number of users in each channel. That list can be sorted and filtered seven ways from Sunday for those who care to play with it.

It seems like a good idea to have a more succinct version of this available to Wikia's community of wikis. Although Gaming wikis may seem like the primary benefactors there is no reason why other Wikia communities should not take advantage of this easy* to setup and use VPN technology.

The so-called Tunngle Live List rendered below are based on live data retrieved from www.tunngle.net and will update each time the page is refreshed.

demo 

The list is not interactive because it is expected that each wiki will care only for one group of channels. As demonstrated here the list may be enabled or disabled via each user's personal preferences.

*The international Tunngle client is due to be released on 11-Dec-2009 so unless you can read and understand a German user interface, you'd be well advised to wait until then to download and test drive Tunngle software.

How to .. embed a Tunngle Live List in a wiki page[]

There are two methods. One that uses the custom WikiPage widget MediaWiki:Widget-tunnglelivelist and the other which does not.

Embed the widget using <widget> tags[]

This is the simplest method and recommended. Simply use this markup, <widget source="MediaWiki:Widget-tunnglelivelist">WikiPage</widget> to render as follows:


Not using the widget[]

The minimum wiki markup is <div class="tunnglelivelist"></div> however a suggested wiki markup is
<div class="tunnglelivelist"><small style="float:right; margin:0 2px 0 0;">[[Special:Preferences#prefsection-10|on/off ]]</small></div>
only because the user is then presented with a handy link to the Gadgets tag within their personal preferences. They may enable or disable this JavaScript as needed.

Why do this?
The additional page load time is noticeable especially if the user has already filtered advertisements from loading.

The second piece of markup above renders as:

on/off 

If no table appears above then:

  1. click the on/off link (at far right)
  2. tick the check box for Tunngle Live List (it may appear as tunnglelivelist until you save preferences the first time - then it should update)
  3. click [Save] at the bottom of that preferences page
  4. return to Project:Sandbox and press Ctrl+F5 to purge the browser's cache only if necessary


Do I have to remember all of that markup?
No. If you just visit MediaWiki:Widget-tunnglelivelist and view the source wikimarkup code then you'll be able to copy and paste it to whichever wiki article you are creating.

Hopefully you will agree that the WikiPage widget approach is more convenient. If you've forgotten how to get that widget into your Monaco sidebar or your Special:WidgetDashboard then review Help:Widgets to refresh your memory.

Samples rendered for each of the standard Monaco skins[]

Tunngle Network Live List at Wikia sidebar

Widget rendered in Monaco sidebar

The gallery below lets you see, for each of the standard Monaco skins available at Wikia, just how this gadget-in-widget renders in the sidebar.

Notes
  1. color1 and color2 are two standard/default class names used Wikia-wide for color styles so as to match the colors used in other parts of the Monaco skin
    • This choice can optionally be specified right alongside the tunngletablearea class name used in code block displayed in the next section.
  2. The Gaming skin is the only skin with a light-on-dark color scheme. That skin benefits from a light-on-dark tunngle logo as shown. The URLs to the most up to date full-size images with transparent backgrounds can be located via:
  3. There is one skin whose default color scheme seems to be flawed - Brick color2. The fix (see the very last image in this gallery) is a simple one-liner in your wiki's MediaWiki:Monaco.css message. viz.
    • .color2 {color:white}
Do I need to use a gadget?
No you don't. Choose to do so only if you want to allow any user who does not wish to be bothered by the additional load time to easily disable the feature via their Special:Preferences.
  • Of course you could copy the JS code into your wiki's MediaWiki:Monaco.js (or MediaWiki:Common.js) and the CSS code into MediaWiki:Monaco.css and the code will run for every visitor to your wiki. You will still need to use the minimum required wiki markup code somewhere on your target wiki page to let the code take effect. If that code is in the sidebar then keep in mind that it will refresh the list on every new page load.
Do I need to use a widget?
No you don't. It happens to be a convenient way for the Live List to be dragged and dropped into either the Monaco sidebar or the Special:WidgetDashboard. As noted in an earlier section, embedding a widget using a pair of <widget> tags is also the most convenient.
  • Any wiki article that has a pair of <div class="tunnglelivelist"> ... </div> tags will cause the list to be rendered at that specific location on that page.

JavaScript[]

/*

*/
jQuery(document).ready( function() {
    // Show the loading info
    $("div .tunnglelivelist").append("<div class='tunngleloadingarea'>Loading Tunngle network data</div><div class='tunngletablearea' style='display: none'><table class='tunngle color2'><thead><tr><th>Network Name</th><th>Users</th></tr></thead><tbody></tbody></table></div>");	

  // Get live data via JSON API
  if ( $("div .tunnglelivelist").length > 0 ) { //only perform the AJAX request if there is a target div that needs it
    jQuery.getJSON("http://www.tunngle.net/api/api.php?output=json&mode=smallnetworkinfo&nocache="+new Date().getMilliseconds()+"&callback=?", function(data) {

	// Write the table(s)
	for (var i=0;i<data.Export.Network.length;i++) { 
	    if(data.Export.Network[i].NetworkName.match("Virtual Skipper")) { // edit this line to customize to YOUR GAME
		var oddeven = (oddeven ? 0 : 1); // CSS can style odd & even rows differently using the class names 'row1' & 'row0' respectively
		$('.tunngletablearea').find('tbody')
                    .append("<tr class='row" + oddeven + "'><td>"+data.Export.Network[i].NetworkName+"</td><td>"+data.Export.Network[i].UserCount+"</td></tr>");
	    }
	}

	// Show table, hide loading info
	$('.tunngleloadingarea').hide("slow");
	$('.tunngletablearea').show("slow");
    }) 
  }
});
/*

*/

To specify color1 or color2 themes
Edit the line: .append("<div class='tunngleloadingarea'>Loading Tunngle network data</div><div class='tunngletablearea' style='display: none'><table class='tunngle color2'><thead><tr><th>Network Name</th><th>Users</th></tr></thead><tbody></tbody></table></div>"); ... Of course you can remove the second of the two class names altogether if you wish. A table will still be created from dynamic data if you accidentally delete the tunngle class name however you should not expect the cascading style sheet (CSS) in the next section to yield the same sidebar widget that you see in the gallery above.
To tailor the list to a game other than Virtual Skipper
Edit the line: if(data.Export.Network[i].NetworkName.match("Virtual Skipper")) {

CSS[]

The following styles were used to yield the skin swatches in the gallery above. Use this as a baseline but feel free to customize further.

/*

*/
/* Tunngle Live List */
.tunngle table, 
.tunngle th, 
.tunngle td { border: 1px solid black; }
table.tunngle { margin:3px auto 30px; width:100%; border-collapse:collapse; }
.tunngle th { padding:3px; text-align:center; vertical-align:bottom; font-weight:bold; }
.tunngle td { padding:3px; text-align:center; }
.tunngleloadingarea { font-style:italic; color:#f5f5f5; }
.tunngletablearea {
 background-image:url(https://images.wikia.nocookie.net/vsk/images/3/3a/Tunngle_black.png);
 background-repeat:no-repeat;
 background-position:bottom center;
}
/* -- optional styles for alternating table rows --
.row1 tr { background-color:lightgrey; }
.row0 tr { background-color:darkgrey; }
*/
/*

*/

How can I make every second row in the list use a different background color?
If the list of channels is more than 2 or 3 then this can certainly enhance readability. Although not illustrated in the gallery above, every odd numbered row has the class 'row1' while every even numbered row has the class 'row0'. Note the pair of lines at the end of the CSS listing above - they are commented out. That's where you can specify suitable alternating background colors that match your wiki's color scheme.

How to .. make the gadget[]

You must have a sysop/admin at your target wiki create the gadget. The MediaWiki namespace is viewable by any user but can only be edited by a sysop/admin.

  1. From your target wiki - use Special:Contact to send Wikia staff a request for the Gadget Extension be enabled for that wiki. (This is typically acted upon within 24 hours ... and often much sooner.)
  2. Visit Special:Gadgets at the wiki you are now reading and notice there are three links for the tunnglelivelist gadget.
  3. Visit each of those pages and copy the source code to a newly created page of the same name at your target wiki.
    • Yes, the Gadget- prefix in each MediaWiki message name is required ... it is not an option. (RTFM)
  4. Visit MediaWiki:Gadgets-definition and copy the bullet line item corresponding to tunnglelivelist to a MediaWiki message of the same name at your target wiki.
    • Yes, the page name prefix is Gadgets- with an "s" ... I dunno ... go figure!
  5. Now at your target wiki's Project:Sandbox paste the following code and save the page.
;Minimal:
<div class="tunnglelivelist"></div>
;Suggested:
<div class="tunnglelivelist"><small style="float:right; margin:0 2px 0 0;">[[Special:Preferences#prefsection-10|on/off ]]</small></div>

If you followed those steps then nothing should render under the Minimal heading and the only thing that should appear under Suggested is a very small on/off link at the far right.

  • That's the way it is supposed to work. i.e. Rather than requiring users to opt-out of using this gadget you invite them to opt-in.
    • Why Wikia consistently ignores this simple piece of common courtesy, we may never know!

OK so now refer to the steps described at #Not using the widget above to enable and verify the correct display of the table within that sandbox page.

That will get the Tunngle Live List into a wiki article but what about the sidebar or the gadget dashboard? For that you need a custom WikiPage widget.

How to .. make the widget[]

Create the gadget before creating the widget.

You don't need a sysop to create the widget unless you plan on creating that widget in the MediaWiki namespace as has been done at the wiki you are now browsing. Whether you create the widget in the MediaWiki namespace or the Main namespace or even in a sub-folder below your personal user page you would be well advised to give this widget definition page the prefix Widget-. This is not a requirement, just a suggestion.

You really need a custom WikiPage widget to get this Tunngle Live List displayed in your Monaco sidebar or any one of the three columns of widgets at Special:WidgetDashboard.

Once you have created the gadget creating the widget is a walk in the park!

  1. At your target wiki - create the page MediaWiki:Widget-tunnglelivelist - this becomes the custom WikiPage widget definition source page that any visitor may use if they want this feature in their sidebar or their widget dashboard.
    • Source page name is important only to the extent that as other Wikia hosted wiki's adopt this gadget-in-widget feature then as you browse to one of those other wikis the widget will appear in your sidebar or dashboard auto-magically only if all wikis adopt the same MediaWiki:Widget-tunnglelivelist name for the Source page.
  2. Now copy the same line of wiki markup that you pasted into the sandbox under the Suggested heading while verifying the gadget. (refer to the code block below)
  3. Save the page and, if need be, refresh and/or purge the browser's cache (CTRL+F) to see the rendered result.
  4. If you had not yet checked the appropriate box in your personal preferences then refer to the steps described at #Not using the widget above to enable and verify the correct display of the table at the newly created Source page for this custom WikiPage widget.
  5. Now return to the Project:Sandbox at your target wiki then paste and save two more lines to the markup you had pasted while verifying the gadget created earlier. viz.
;Minimal:
<div class="tunnglelivelist"></div>
;Suggested:
<div class="tunnglelivelist"><small style="float:right; margin:0 2px 0 0;">[[Special:Preferences#prefsection-10|on/off ]]</small></div>
;Convenient:
<widget source="MediaWiki:Widget-tunnglelivelist">WikiPage</widget>
Customize a new WikiPage widget

Click the spanner sprite to configure a newly added WikiPage widget

Notice how embedding the custom WikiPage widget produces a different size table than the previous two.

Finally, if you've forgotten how to get that custom widget into your Monaco sidebar or your Special:WidgetDashboard then review Help:Widgets to refresh your memory.

  • The thumbnail at right may be all the prompting you need.
  • You may choose any Title of widget you like however Tunngle Live List is suggested.
  • You should copy MediaWiki:Widget-tunnglelivelist into the Source page: field.


Why am I seeing this failed to load message in the Tunngle Live List widget at every other wiki I visit!
Well that's because Wikia don't yet see Widgets as a high priority feature. Give them time but more importantly, give them your feedback!
The interim workaround is simple and one that will make widgets a valuable tool to use at many wikis.
To learn about the interim workaround visit this user blog.
Also please revisit that blog after you've tried the workaround and leave your comment to let Wikia staff know whether or not this is how you would like to see missing widgets dealt with.
Community content is available under CC-BY-SA unless otherwise noted.
Advertisement

Fan Feed