Difference between revisions of "Linden Lab Official:Viewer Web Widgets"

From Second Life Wiki
Jump to navigation Jump to search
Line 1: Line 1:
{{Supported API}}
{{KBcaution|Work-in-progress! Expect these widgets to change over time. Watch this page for updates.}}
{{KBcaution|Work-in-progress! Expect these widgets to change over time. Watch this page for updates.}}
{{Supported API}}


These viewer web widgets are a first attempt at making the current Second Life Viewer [http://viewer-login.agni.lindenlab.com/ login screen] features available for easy use in third-party viewers. Linden Lab provides a base javascript library which will search the DOM of a given page, populating specifically-named divs with widget content.  
These viewer web widgets are a first attempt at making the current Second Life Viewer [http://viewer-login.agni.lindenlab.com/ login screen] features available for easy use in third-party viewers. Linden Lab provides a base javascript library which will search the DOM of a given page, populating specifically-named divs with widget content.  


=Basic implementation=
==Basic implementation==


The example below shows the simplest way to implement these widgets. Simply include the sl.widgets.js library, then include a div with both id="[the widget you want]" and class="second-life-widget".
The example below shows the simplest way to implement these widgets. Simply include the sl.widgets.js library, then include a div with both id="[the widget you want]" and class="second-life-widget".


<pre>
<html4strict>
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
Line 19: Line 20:
     </body>
     </body>
</html>
</html>
</pre>
</html4strict>


Version 1 of the main sl.widgets.js library currently lives here:
Version 1 of the main sl.widgets.js library currently lives here:


* http://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v1/modules/sl.widgets.js
http://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v1/modules/sl.widgets.js


This library will pull in all the supporting content it needs -- other js files, css, and the content for each widget. It uses its own version of jQuery, and will create a separate namespace to avoid conflicts if you already have jQuery installed.
This library will pull in all the supporting content it needs -- other Javascript files, CSS, and the content for each widget. It uses its own version of jQuery, and will create a separate namespace to avoid conflicts if you already have jQuery installed.


=Widgets=
==Widgets==


==What's Hot==
===What's hot===


This widget displays a thumbnail list of destinations with people (a population of 25 or less, in the last ~10 minutes). The cutoff number may change over time; 25 was chosen as a reasonable performance threshold.
This widget displays a thumbnail list of destinations with people (a population of 25 or less, in the last ~10 minutes). The cutoff number may change over time; 25 was chosen as a reasonable performance threshold.
Line 35: Line 36:
With the main js library loaded, include this div in your html markup:
With the main js library loaded, include this div in your html markup:


* <pre><div id="whats-hot-now-widget" class="second-life-widget"></div></pre>
&lt;div id="whats-hot-now-widget" class="second-life-widget">&lt;/div>
 
This widget expects the above div to be a fixed height of 148px. It will adapt its content to 100% of the div's width, so you can make it as wide as you like. To control positioning, size, and other parameters, just style the #whats-hot-now-widget in your own page's css.
 


=Localization=
This widget expects the above div to be a fixed height of 148px. It will adapt its content to 100% of the div's width, so you can make it as wide as you like. To control positioning, size, and other parameters, just style the #whats-hot-now-widget in your own page's CSS.


Widget strings can be localized by adding ?lang=[de|es|fr|ja|pt] to your page's url.
==Localization==


Widget strings can be localized by adding ?lang=[de|es|fr|ja|pt] to your page's URL.


=Future roadmap=
==Future roadmap==


In the near future we plan to add widgets for each item on the current Second Life Viewer [http://viewer-login.agni.lindenlab.com/ login screen]:
In the near future we plan to add widgets for each item on the current Second Life Viewer [http://viewer-login.agni.lindenlab.com/ login screen]:
Line 56: Line 55:
* Ability to set custom click function: currently the default click behavior triggers a modal notification dialog in addition to initiating a secondlife:// teleport action. We plan to enable a widget setting that can override this with a custom javascript function.
* Ability to set custom click function: currently the default click behavior triggers a modal notification dialog in addition to initiating a secondlife:// teleport action. We plan to enable a widget setting that can override this with a custom javascript function.


For other features or requests, please file a jira and/or discuss in the talk page here.
For other features or requests, please file a Jira and/or discuss in the talk page here.

Revision as of 12:42, 3 October 2011

NOTE: This is an official Second Life API provided and documented by Linden Lab. Its use is subject to the API Terms of Use.
KBcaution.png Important: Work-in-progress! Expect these widgets to change over time. Watch this page for updates.

These viewer web widgets are a first attempt at making the current Second Life Viewer login screen features available for easy use in third-party viewers. Linden Lab provides a base javascript library which will search the DOM of a given page, populating specifically-named divs with widget content.

Basic implementation

The example below shows the simplest way to implement these widgets. Simply include the sl.widgets.js library, then include a div with both id="[the widget you want]" and class="second-life-widget".

<html4strict> <!DOCTYPE html> <html> 

   <head>
       <script type="text/javascript" src="http://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v1/modules/sl.widgets.js">
       </script>
   </head>
   <body>

   </body>

</html> </html4strict>

Version 1 of the main sl.widgets.js library currently lives here: 

http://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v1/modules/sl.widgets.js

This library will pull in all the supporting content it needs -- other Javascript files, CSS, and the content for each widget. It uses its own version of jQuery, and will create a separate namespace to avoid conflicts if you already have jQuery installed.

Widgets

What's hot

This widget displays a thumbnail list of destinations with people (a population of 25 or less, in the last ~10 minutes). The cutoff number may change over time; 25 was chosen as a reasonable performance threshold.

With the main js library loaded, include this div in your html markup: 

<div id="whats-hot-now-widget" class="second-life-widget"></div>

This widget expects the above div to be a fixed height of 148px. It will adapt its content to 100% of the div's width, so you can make it as wide as you like. To control positioning, size, and other parameters, just style the #whats-hot-now-widget in your own page's CSS.

Localization

Widget strings can be localized by adding ?lang=[de|es|fr|ja|pt] to your page's URL.

Future roadmap

In the near future we plan to add widgets for each item on the current Second Life Viewer login screen:

  • Editors' Picks slideshow (the big one, top left)
  • Destinations main widget (with category selector)
  • Upcoming events
  • Second Life Blog

Other features we plan to enable for all widgets:

  • Ability to set custom click function: currently the default click behavior triggers a modal notification dialog in addition to initiating a secondlife:// teleport action. We plan to enable a widget setting that can override this with a custom javascript function.

For other features or requests, please file a Jira and/or discuss in the talk page here.

Retrieved from "https://wiki.secondlife.com/w/index.php?title=Linden_Lab_Official:Viewer_Web_Widgets&oldid=1155426"