How To Add Cavern Status To Your Own Website

Domain Resource Management & Use (Subdomains, FTP, Email, CNames)

Moderators: OpenUru.org Moderators, Domain Managers

User avatar
JWPlatt
Member
Posts: 1137
Joined: Sun Dec 07, 2008 7:32 pm
Location: Everywhere, all at once

How To Add Cavern Status To Your Own Website

Post by JWPlatt »

We have installed a script so you can easily put the full MOULa (Myst Online Uru Live again) Cavern Status message into an iframe on your own website.

Thanks to Mac_Fife for developing the script!


How To Add Cavern Status To Your Own Website

Include the following in the webpages you where want to show the status:

Code: Select all

<iframe src="http://www.openuru.org/tools/cavstat.php" width="550px" height="120px">
  <p>Your browser does not support iframes.</p>
</iframe>
Adjust the width and height values to suit your page layout.

That's it!

There are other ways to do this, so if anyone has a good suggestion or improvement, we can implement it.
Perfect speed is being there.
User avatar
Nalates
Member
Posts: 437
Joined: Mon Dec 22, 2008 7:50 pm

Re: How To Add Cavern Status To Your Own Website

Post by Nalates »

The HTML shown is fine. The hard coded HTML of cavstat.php is a problem. It would work better for blogs and web sites if it used CSS formatting. The existing output is:

Code: Select all

<html> 
<head></head> 
<body style="background-color: #dddddd;"> 
  <span style="font-size: 0.8em"><b><i>Cavern Status:</i></b></span> 
  <img src="http://www.openuru.org/sitestyle/img/led-green.gif"> Open for exploration!  - <a href="http://mystonline.com/play/"> Sign up to play at MystOnline.com!</a><br> 
<span style="font-size: 0.8em"><b><i>Developer Message:</i></b></span> Welcome to Myst Online: Uru Live! Riven: The Sequel to Myst is now available on iTunes app store
  <div style="font-size: 7pt; float: right;"><a href="http://www.openuru.org/">www.openuru.org</a></div> 
<!-- Google analytics --> 
<script type="text/javascript"> 
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-20896922-1']);
  _gaq.push(['_setDomainName', 'none']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();
</script> 
</body> 
</html> 
I would suggest that something like this be generated:

Code: Select all

<html> 
<head></head> 
<body> 
  <span class="urustatus">Cavern Status:&nbsp;</span> 
  <img src="http://www.openuru.org/sitestyle/img/led-green.gif"> Open for exploration!  - <a href="http://mystonline.com/play/"> Sign up to play at MystOnline.com!</a><br> 
<span class="urustatus">Developer Message:&nbsp;</span> Welcome to Myst Online: Uru Live! Riven: The Sequel to Myst is now available on iTunes app store
  <div id=ouLink"><a href="http://www.openuru.org/">www.openuru.org</a></div> 
<!-- Google analytics --> 
<script type="text/javascript"> 
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-20896922-1']);
  _gaq.push(['_setDomainName', 'none']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();
</script> 
</body> 
</html> 
Obviously this may create a problem for the formatting here. If formatting is included in the page, you then take over control on all the sites. A PHP IF could check to see it the page is appearing inside another site and omit the CSS definitions. But, using CSS allows those using it to format things for their site/blog.

I suggest a separate page that generates an HTML code fragment for use with JQuery apps. Using more DIV tags with CSS Class and ID would allow more use of the feature. Perhaps a page named cavStatAlt.php that generates this:

Code: Select all

  <div id="uruStatus">Cavern Status:&nbsp;<img src="http://www.openuru.org/sitestyle/img/led-green.gif"> Open for exploration!</div>
  <div id="uruSignup">Sign up to play <a href="http://mystonline.com/play/">Uru Live at MystOnline.com!</a></div>
  <div id="uruDevLnk"><p>Developer Message: Welcome to Myst Online: Uru Live!</p><p>Riven: The Sequel to Myst is now available on iTunes app store <a href="http://www.openuru.org/">www.openuru.org</a></p></div> 
By using DIV tags to separate the items I can show or hide them as I want. Removal of the Body and HTML tags along with the script allows this fragment to blend into to any part of a page and skips the iframe problem for browsers that don’t support it. (Are there any that don’t?)

Plus this fragment could be used as an include in the cavstat.php page. That would allow one to skip the PHP IF and include a CSS file call in the cavstat.php page.

This pulls all the formatting from the page and code and moves it to a CSS defintion, a best (or in my mind, a better) practice.

If you are interested in stats, I would like to know if you are interested in how many times it is shown (impressions) or how many times it is clicked? The script code can be included. The Google code seems to work with other copies of the script in the page. So, it should not mess up sites that already have Google Analytics code.

If we can have a nice clean fragment page, I might (no promise) build a WordPress Widget to use it. Depends on time. But that would allow those of is with blogs to easily add it. I'm finding more of the SL Uruites starting blogs. So, it could be good promotion.
Nalates
GoW, GoMa and GoA apprentice - Guildmaster GoC - SL = Nalates Urriah
User avatar
JWPlatt
Member
Posts: 1137
Joined: Sun Dec 07, 2008 7:32 pm
Location: Everywhere, all at once

Re: How To Add Cavern Status To Your Own Website

Post by JWPlatt »

Thanks, Nalates! Very helpful. Mac_Fife will be interested in looking at this, I'm sure.

By the way, cavstat.php is not used directly by the site here. Mac_Fife broke it out of the code he wrote for site integration.

To answer your question about stats on clicks or views, well, yes. ;)

Funny you should mention Wordpress. Wordpress.com (not Wordpress.org) filters out Iframes, and plugins are not allowed. And I hear getting on the Iframe whitelist is unlikely. But for Wordpress in general, yes, we'd love to see a widget! Let's see what we can manage.
Perfect speed is being there.
User avatar
Mac_Fife
Member
Posts: 1239
Joined: Fri Dec 19, 2008 12:38 am
Location: Scotland
Contact:

Re: How To Add Cavern Status To Your Own Website

Post by Mac_Fife »

Thanks Nalates. This was quite literaly a two-minute hack when I got in from work yesterday. The original version used here actually uses CSS classes and DIVs, but I inlined all the styling for quickness. I was planning on adapting this to use parameters to allow users to apply their own styling, but maybe your suggestions will work better. I'll maybe take a look at this again over the weekend, but right now I've got some plumbing to do!
Mac_Fife
OpenUru.org wiki wrangler
User avatar
Mac_Fife
Member
Posts: 1239
Joined: Fri Dec 19, 2008 12:38 am
Location: Scotland
Contact:

Re: How To Add Cavern Status To Your Own Website

Post by Mac_Fife »

I ran out of time last night to finish it off, but I have a revised version of the php script which produces something similar to the code fragment suggested by Nalates. It still has inline styling applied, but since the <divs> have IDs, JQuery (or other javascript methods) should be able to override that styling after page load.

The reason I've retained the inline styling is to try to keep everything in one place (maybe not a good choice, but let's see), so that the same URL is used whether someone wants to include this via an <iframe> or a PHP include (although many web hosts won't allow a cross-site include for security reasons, which is why I targetted an iframe initially). But, I've added optional parameters to control the appearance for iframe users, as per this example (note that this will not work yet as the new code isn't posted on the live server yet):

Code: Select all

<iframe src="http://www.openuru.org/tools/cavstat.php?bgcolor=ffdddd&hdsize=0.9em&border=blue" width="550px" height="120px" frameborder="0">
  <p>Your browser does not support iframes.</p>
</iframe>
Add a '?' after the call to cavstat.php then list the parameter=value pairs, separating each with '&' and making sure to avoid leaving any spaces. The possible parameters are:
  • color= The color of the text, either a hex value or a standard color name. If using a hex value, omit the usual leading '#' symbol. Defaults to black if parameter omitted.
  • bgcolor= The background color of the box containing the status message, either a hex value or a standard color name. If using a hex value, omit the usual leading '#' symbol. Defaults to grey (DDDDDD) if parameter omitted.
  • txtsize= The size of the body text of the message, e.g. 12pt, 14px, 1.1em. Defaults to 1.0em if parameter is omitted.
  • hdsize= The size of the heading text of the message, e.g. 12pt, 14px, 1.1em. The headings are bold, so you may want to reduce the size compared to the main text to restore some "balance". Defaults to 0.8em if parameter is omitted.
  • width= The width of the box containing the status message, in px or %. Note that the iframe may also have a width specified and you may need to adjust both get a satisfactory result. Defaults to 400px if parameter is omitted.
  • height= The height of the box containing the status message, in px or %. Note that the iframe may also have a height specified and you may need to adjust both get a satisfactory result. Defaults to 120px if parameter is omitted.
  • border= The color of the border around the box containing the status message, either a hex value or a standard color name. If using a hex value, omit the usual leading '#' symbol. The border is a 1px solid line and is only displayed if a value is specified, otherwise the box will be borderless (default).
I'm not done yet, so I may also add other options to control whether or not sections of the message are displayed.
Last edited by JWPlatt on Mon Feb 14, 2011 1:53 pm, edited 2 times in total.
Reason: Made list more readable
Mac_Fife
OpenUru.org wiki wrangler
User avatar
Nalates
Member
Posts: 437
Joined: Mon Dec 22, 2008 7:50 pm

Re: How To Add Cavern Status To Your Own Website

Post by Nalates »

Yay! I'm looking forward to seeing the changes go live.

On the #include... I was thinking of that for the OU server side not remote access. JQuery processing can be simplified by having a PHP page create just the HTML fragment needed. Remote users can target their JQuery at that PHP page. That page can be an #include in cavstatus.php to avoid redundancy.
Nalates
GoW, GoMa and GoA apprentice - Guildmaster GoC - SL = Nalates Urriah
User avatar
Mac_Fife
Member
Posts: 1239
Joined: Fri Dec 19, 2008 12:38 am
Location: Scotland
Contact:

Re: How To Add Cavern Status To Your Own Website

Post by Mac_Fife »

OK, updated version is now available. It's fully backwards compatible with the original, so it won't break any pages that might have already adopted it.

I had to make one or two small changes to the "specification" I listed in the post above (using named colors was more of a nuisance than a benefit), but full(ish) documentation is on the wiki: Cavern Status Widget
Mac_Fife
OpenUru.org wiki wrangler
User avatar
Mac_Fife
Member
Posts: 1239
Joined: Fri Dec 19, 2008 12:38 am
Location: Scotland
Contact:

Re: How To Add Cavern Status To Your Own Website

Post by Mac_Fife »

Given the comment from D'Lanor on the MOUL forums (http://mystonline.com/forums/viewtopic. ... 782#377782) regarding the play link opening inside the iFrame, possibly the best solution is to amend the code to make that link open in a new window. I guess it's not something I particularly thought through at the time :oops: .
Mac_Fife
OpenUru.org wiki wrangler
Leonardo
Member
Posts: 35
Joined: Sat Dec 13, 2008 5:57 pm

Re: How To Add Cavern Status To Your Own Website

Post by Leonardo »

I hope you don't mind if I added the jQuery code to the Wiki page for using the Widget.

Right now that code doesn't really do what you intended initially. That's because browsers have the same-domain-policy, javascript can only request content from pages from the same domain of the page. So the jQuery code I added uses the PHP code that was already posted as a "backend" to dinamically update the cavern status widget every 10 minutes.
It would be possible to write a jQuery-only code that doesn't need to pass thru PHP, but I would need your page on OpenUru to give the content in JSONP format. :geek:
User avatar
Mac_Fife
Member
Posts: 1239
Joined: Fri Dec 19, 2008 12:38 am
Location: Scotland
Contact:

Re: How To Add Cavern Status To Your Own Website

Post by Mac_Fife »

I don't mind at all - in fact, since I haven't looked into jQuery, I invited just that kind of addition :)

If you want to tell me what the JSONP format content should look like, then I can look into providing that too.

Edit:
Is the right kind of thing? The webpage that wants to use the widget includes something like

Code: Select all

<script type="text/javascript"
         src="http://www.openuru.org/tools/cavstat.php?jsonp=cavStat">
 </script>
and in response to that request the OU server returns something similar to:

Code: Select all

cavStat (( "LED": "http://www.openuru.org/sitestyle/img/led-green.gif", "State": "Open for exploration!", "Link": "Sign up to play at MystOnline.com!", "LinkURL": "http://mystonline.com/play/", "Message": "Welcome to Myst Online: Uru Live!", "Origin": "www.openuru.org", "OriginURL": "http://www.openuru.org/" ))
Mac_Fife
OpenUru.org wiki wrangler
Post Reply

Return to “Domain (OpenUru.org)”