User:Becky Pippen/Shared Media LSL Recipes - Revision history

Gwyneth Llewelyn: /* Make TinyURLs by script */ Added `to the URLs and tried to get better indentation`


2024-05-01T10:50:50Z
Make TinyURLs by script:  Added <code> to the URLs and tried to get better indentation

				
				
				
				
				
				← Older revision
				Revision as of 03:50, 1 May 2024
				
Line 705:
Line 705:
'''Comments:''' '''Comments:'''
* Any URL or data URI can be mapped to a TinyURL. The example above reduces an assigned HTTP-in URL, which is a long one such as: * Any URL or data URI can be mapped to a TinyURL. The example above reduces an assigned HTTP-in URL, which is a long one such as:
 <nowiki>http://sim4605.agni.lindenlab.com:12046/cap/2b9f06f7-431e-5b0f-9271-2d03bd15370b</nowiki> :<code><nowiki>http://sim4605.agni.lindenlab.com:12046/cap/2b9f06f7-431e-5b0f-9271-2d03bd15370b</nowiki></code>
into a TinyURL this size: into a TinyURL this size:
 <nowiki>https://tinyurl.com/26dsnl2b</nowiki> :<code><nowiki>https://tinyurl.com/26dsnl2b</nowiki></code>



===Development hints=== ===Development hints===



Gwyneth Llewelyn: /* Reverse Ajax - Long-polling the HTTP-in server, chat logger example */ On my own reference (footnote) it's redundant to prefix it with "Note:" since this will appear in a section called "Notes" anyway...
2024-05-01T10:46:11Z
Reverse Ajax - Long-polling the HTTP-in server, chat logger example:  On my own reference (footnote) it's redundant to prefix it with "Note:" since this will appear in a section called "Notes" anyway...

				
				
				
				
				
				← Older revision
				Revision as of 03:46, 1 May 2024
				
Line 626:
Line 626:
<li>This "{{Wikipedia|Push technology|server-push}}" technique using long-polling gives an LSL script the ability to modify the web page displayed on a prim. The Javascript side always keeps an HTTP GET open to the prim's HTTP-in URL, and the LSL side responds whenever it wants to with a response consisting of strings of Javascript to be executed by the web browser. For example, this LSL code causes an alert box to pop up on the web page: <li>This "{{Wikipedia|Push technology|server-push}}" technique using long-polling gives an LSL script the ability to modify the web page displayed on a prim. The Javascript side always keeps an HTTP GET open to the prim's HTTP-in URL, and the LSL side responds whenever it wants to with a response consisting of strings of Javascript to be executed by the web browser. For example, this LSL code causes an alert box to pop up on the web page:
: <syntaxhighlight lang="lsl2" inline>sendMessage( "alert()" );</syntaxhighlight></li> : <syntaxhighlight lang="lsl2" inline>sendMessage( "alert()" );</syntaxhighlight></li>
<li>In the LSL listing above, <span style="background-color:#F8F8C8">the yellow highlighting</span> shows the most important parts of the HTTP long-polling mechanism. The <span style="background-color:#E0FDE0">green highlighting</span> shows the message buffering on top of that. The <span style="background-color:#E8E8FF">blue highlighting</span> is the application code that uses long-polling. To use long-polling for a different application, replace the blue parts. The rest is glue.<ref>Note: Unfortunately, at the time of editing/cleaning up the WikiText on this fantastic tutorial, I couldn't figure out a neat way of having three separate colours as highlights on the code. I've placed a request on the MediaWiki talk page for <code><syntaxhighlight></code>, but I'm unsure if whatever tricks they suggest will work on the SL Wiki. So, for the time being, this example will remain untouched, as originally written by {{mention|Becky Pippen|p=}} — [[User:Gwyneth Llewelyn|Gwyneth Llewelyn]]</ref></li> <li>In the LSL listing above, <span style="background-color:#F8F8C8">the yellow highlighting</span> shows the most important parts of the HTTP long-polling mechanism. The <span style="background-color:#E0FDE0">green highlighting</span> shows the message buffering on top of that. The <span style="background-color:#E8E8FF">blue highlighting</span> is the application code that uses long-polling. To use long-polling for a different application, replace the blue parts. The rest is glue.<ref>Unfortunately, at the time of editing/cleaning up the WikiText on this fantastic tutorial, I couldn't figure out a neat way of having three separate colours as highlights on the code. I've placed a request on the MediaWiki talk page for <code><syntaxhighlight></code>, but I'm unsure if whatever tricks they suggest will work on the SL Wiki. So, for the time being, this example will remain untouched, as originally written by {{mention|Becky Pippen|p=}} — [[User:Gwyneth Llewelyn|Gwyneth Llewelyn]]</ref></li>
<li>To avoid some subtle WebKit<ref>It might be the case that the SL Viewer is now based on the Chromium Embedded Framework instead, so Becky's references might not apply any longer. — [[User:Gwyneth Llewelyn|Gwyneth Llewelyn]]</ref> problems when dynamically appending or replacing the first-level child nodes in <syntaxhighlight lang="html" inline><head></syntaxhighlight> or <syntaxhighlight lang="html" inline><body></syntaxhighlight>, we've made two special <syntaxhighlight lang="html" inline><div></syntaxhighlight> elements on the bootstrap HTML page. The first surrounds the <code>script#sc</code> element that we replace for each GET. The second is at the end of <syntaxhighlight lang="html" inline><body></syntaxhighlight> as a convenient place for the application to insert new content that would otherwise go in <syntaxhighlight lang="html" inline><body></syntaxhighlight>.</li> <li>To avoid some subtle WebKit<ref>It might be the case that the SL Viewer is now based on the Chromium Embedded Framework instead, so Becky's references might not apply any longer. — [[User:Gwyneth Llewelyn|Gwyneth Llewelyn]]</ref> problems when dynamically appending or replacing the first-level child nodes in <syntaxhighlight lang="html" inline><head></syntaxhighlight> or <syntaxhighlight lang="html" inline><body></syntaxhighlight>, we've made two special <syntaxhighlight lang="html" inline><div></syntaxhighlight> elements on the bootstrap HTML page. The first surrounds the <code>script#sc</code> element that we replace for each GET. The second is at the end of <syntaxhighlight lang="html" inline><body></syntaxhighlight> as a convenient place for the application to insert new content that would otherwise go in <syntaxhighlight lang="html" inline><body></syntaxhighlight>.</li>
<li>To make sure that there is nearly always a valid GET request open, the Javascript side starts a new GET after receiving a response, or just before the last unanswered GET times out.</li> <li>To make sure that there is nearly always a valid GET request open, the Javascript side starts a new GET after receiving a response, or just before the last unanswered GET times out.</li>



Gwyneth Llewelyn: /* Reverse Ajax - Long-polling the HTTP-in server, chat logger example */ Not a full replacement due to limitations of  - only one colour can be used for highlighting a line, not three, as Becky used
2024-05-01T10:43:52Z
Reverse Ajax - Long-polling the HTTP-in server, chat logger example:  Not a full replacement due to limitations of <syntaxhighlight> - only one colour can be used for highlighting a line, not three, as Becky used

				
				
				
				
				
				← Older revision
				Revision as of 03:43, 1 May 2024
				
Line 622:
Line 622:
</tt> </tt>



Comments: '''Comments:'''
<ol start="1"> <ol start="1">
<li>This "[http://en.wikipedia.org/wiki/Push_technology server-push]" technique using long-polling gives an LSL script the ability to modify the web page displayed on a prim. The Javascript side always keeps an HTTP GET open to the prim's HTTP-in URL, and the LSL side responds whenever it wants to with a response consisting of strings of Javascript to be executed by the web browser. For example, this LSL code causes an alert box to pop up on the web page: <li>This "{{Wikipedia|Push technology|server-push}}" technique using long-polling gives an LSL script the ability to modify the web page displayed on a prim. The Javascript side always keeps an HTTP GET open to the prim's HTTP-in URL, and the LSL side responds whenever it wants to with a response consisting of strings of Javascript to be executed by the web browser. For example, this LSL code causes an alert box to pop up on the web page:
: <code>sendMessage( "alert()" );</code></li> : <syntaxhighlight lang="lsl2" inline>sendMessage( "alert()" );</syntaxhighlight></li>
<li>In the LSL listing above, <span style="background-color:#F8F8C8">the yellow highlighting</span> shows the most important parts of the HTTP long-polling mechanism. The <span style="background-color:#E0FDE0">green highlighting</span> shows the message buffering on top of that. The <span style="background-color:#E8E8FF">blue highlighting</span> is the application code that uses long-polling. To use long-polling for a different application, replace the blue parts. The rest is glue.</li> <li>In the LSL listing above, <span style="background-color:#F8F8C8">the yellow highlighting</span> shows the most important parts of the HTTP long-polling mechanism. The <span style="background-color:#E0FDE0">green highlighting</span> shows the message buffering on top of that. The <span style="background-color:#E8E8FF">blue highlighting</span> is the application code that uses long-polling. To use long-polling for a different application, replace the blue parts. The rest is glue.<ref>Note: Unfortunately, at the time of editing/cleaning up the WikiText on this fantastic tutorial, I couldn't figure out a neat way of having three separate colours as highlights on the code. I've placed a request on the MediaWiki talk page for <code><syntaxhighlight></code>, but I'm unsure if whatever tricks they suggest will work on the SL Wiki. So, for the time being, this example will remain untouched, as originally written by {{mention|Becky Pippen|p=}} — [[User:Gwyneth Llewelyn|Gwyneth Llewelyn]]</ref></li>
<li>To avoid some subtle WebKit problems when dynamically appending or replacing the first-level child nodes in &lt;head> or &lt;body>, we've made two special &lt;div> elements on the bootstrap HTML page. The first surrounds the script#sc element that we replace for each GET. The second is at the end of &lt;body> as a convenient place for the application to insert new content that would otherwise go in &lt;body>.</li> <li>To avoid some subtle WebKit<ref>It might be the case that the SL Viewer is now based on the Chromium Embedded Framework instead, so Becky's references might not apply any longer. — [[User:Gwyneth Llewelyn|Gwyneth Llewelyn]]</ref> problems when dynamically appending or replacing the first-level child nodes in <syntaxhighlight lang="html" inline><head></syntaxhighlight> or <syntaxhighlight lang="html" inline><body></syntaxhighlight>, we've made two special <syntaxhighlight lang="html" inline><div></syntaxhighlight> elements on the bootstrap HTML page. The first surrounds the <code>script#sc</code> element that we replace for each GET. The second is at the end of <syntaxhighlight lang="html" inline><body></syntaxhighlight> as a convenient place for the application to insert new content that would otherwise go in <syntaxhighlight lang="html" inline><body></syntaxhighlight>.</li>
<li>To make sure that there is nearly always a valid GET request open, the Javascript side starts a new GET after receiving a response, or just before the last unanswered GET times out.</li> <li>To make sure that there is nearly always a valid GET request open, the Javascript side starts a new GET after receiving a response, or just before the last unanswered GET times out.</li>
<li>There are two timeouts hard-coded in the bootstrap data URI: <li>There are two timeouts hard-coded in the bootstrap data URI:
<ol style="list-style-type:lower-roman"><li>The "20000" is the timeout (20 seconds) for when an open GET expires, and should be set to a little less than the minimum of the WebKit outgoing GET request timeout, and the SL-LSL incoming GET timeout. This ensures that GETs are nearly continuous, and the LSL side can always respond to the most recent GET request. [[LlHTTPResponse|This page]] says the timeout on the LSL side is 25 seconds.</li> <ol style="list-style-type:lower-roman"><li>The "20000" is the timeout (20 seconds) for when an open GET expires, and should be set to a little less than the minimum of the WebKit outgoing GET request timeout, and the SL-LSL incoming GET timeout. This ensures that GETs are nearly continuous, and the LSL side can always respond to the most recent GET request. [[LlHTTPResponse|This page]] says the timeout on the LSL side is 25 seconds.</li>
<li>The "500" is a throttle that sets an upper limit to how fast the Javascript re-polls HTTP-in to prevent hammering the simulator. It's a half-second delay after receiving a GET response before starting a new GET.</li></ol> <li>The "500" is a throttle that sets an upper limit to how fast the Javascript re-polls HTTP-in to prevent hammering the simulator. It's a half-second delay after receiving a GET response before starting a new GET.</li></ol>
<li> If there's a little gap between two GETs, or if two overlap a little, the sendMessage() message buffering will compensate by queuing up messages to be sent when the next GET arrives. If there are multiple messages in the queue when a GET arrives, the LSL side will concatenate as many messages as possible and send them together. <li> If there's a little gap between two GETs, or if two overlap a little, the <syntaxhighlight lang="lsl2" inline>sendMessage()</syntaxhighlight> message buffering will compensate by queuing up messages to be sent when the next GET arrives. If there are multiple messages in the queue when a GET arrives, the LSL side will concatenate as many messages as possible and send them together.
</li> </li>
<li>On the Javascript side, the GET is not triggered until the <tt>&lt;script></tt> element is attached to its parent node with .appendChild() or .replaceChild().</li> <li>On the Javascript side, the GET is not triggered until the <syntaxhighlight lang="html" inline><script></syntaxhighlight> element is attached to its parent node with <code>.appendChild()</code> or <code>.replaceChild()</code>.</li>
<li>The bootstrap Javascript above in setDataURI() had to be compressed somewhat to fit into the 1024-byte data URI limit. Here's an expanded listing for reference with more descriptive names:</li> <li>The bootstrap Javascript above in <syntaxhighlight lang="lsl2" inline>setDataURI()</syntaxhighlight> had to be compressed somewhat to fit into the 1024-byte data URI limit. Here's an expanded listing for reference with more descriptive names:</li>
<tt> :<syntaxhighlight lang="html">
 &lt;!DOCTYPE HTML> <!DOCTYPE HTML>
 &lt;html> <html>
    &lt;body>     <body>
      &lt;div>       <div>
        &lt;script id='script'> &lt;/script>         <script id='script'> </script>
      &lt;/div>       </div>
      &lt;script>       <script>
        var poll=function(){         var poll=function(){
          var script=document.getElementById('script'),           var script=document.getElementById('script'),
Line 658:
Line 658:
              script=newScript;},               script=newScript;},
       
            end:function() {             end: function() {
              clearTimeout(timeoutId);               clearTimeout(timeoutId);
              timeoutId=null;               timeoutId=null;
Line 666:
Line 666:
          };           };
        }();         }();
      &lt;/script>       </script>
      &lt;button id='btn'onclick=poll.beg()>Start&lt;button>       <button id='btn' onclick=poll.beg()>Start<button>
      &lt;div id='dv'> &lt;/div>       <div id='dv'> </div>
    &lt;/body>     </body>
 &lt;/html> </html>
</tt> </syntaxhighlight>
</ol> </ol>






Gwyneth Llewelyn: /* Display an image — works with animated GIFs too */ Found a HTML tag without proper highlighting in the comments section
2024-05-01T10:19:46Z
Display an image — works with animated GIFs too:  Found a HTML tag without proper highlighting in the comments section

				
				
				
				
				
				← Older revision
				Revision as of 03:19, 1 May 2024
				
Line 127:
Line 127:
'''Comments:''' '''Comments:'''
* If attempting to display YouTube video full-frame, see [https://blogs.secondlife.com/community/community/tnt/blog/2010/03/16/viewer-2-tip-shared-media-show-youtube-on-a-full-prims-face this discussion]{{dead link|2024-04-29 Searched as deep as I could but didn't find it — Gwyn}}. * If attempting to display YouTube video full-frame, see [https://blogs.secondlife.com/community/community/tnt/blog/2010/03/16/viewer-2-tip-shared-media-show-youtube-on-a-full-prims-face this discussion]{{dead link|2024-04-29 Searched as deep as I could but didn't find it — Gwyn}}.
* For images, you can also use <code><image src= ></code> like this: <syntaxhighlight lang="lsl2" inline>string dataURI="data:text/html,<img src='" + imageURL + "'>";</syntaxhighlight> * For images, you can also use <syntaxhighlight lang="html" inline><image src= ></syntaxhighlight> like this: <syntaxhighlight lang="lsl2" inline>string dataURI="data:text/html,<img src='" + imageURL + "'>";</syntaxhighlight>
* Note: The original Wikimedia Commons image has been deprecated and was replaced by the closest-looking one. — [[User:Gwyneth Llewelyn|Gwyneth Llewelyn]] ([[User talk:Gwyneth Llewelyn|talk]]) 04:51, 29 April 2024 (PDT) * Note: The original Wikimedia Commons image given in the code as an example has been deprecated and was replaced by the closest-looking one; if you try this code in-world, it will show up differently than the animated image to the right. — [[User:Gwyneth Llewelyn|Gwyneth Llewelyn]] ([[User talk:Gwyneth Llewelyn|talk]]) 04:51, 29 April 2024 (PDT)



===Display a background image, tiled=== ===Display a background image, tiled===



Gwyneth Llewelyn: /* Calling external JavaScript functions (JQuery example) */ More prettifying of HTML tags in the comment section
2024-05-01T10:16:58Z
Calling external JavaScript functions (JQuery example):  More prettifying of HTML tags in the comment section

				
				
				
				
				
				← Older revision
				Revision as of 03:16, 1 May 2024
				
Line 249:
Line 249:



'''Comments:''' '''Comments:'''
* This is a technique for working around the 1024-byte limit for data URIs. When you can't fit all the JavaScript you need into one data URI, just move some JavaScript functions into an external file and give the browser a data URI that references the external file with a URL. In this example above, the JavaScript for [https://jquery.com/ JQuery] lives in an external file on Google's servers. You just need enough bytes left over in the data URI to put a JavaScript function call with its parameters inside a <code><script></code> element. * This is a technique for working around the 1024-byte limit for data URIs. When you can't fit all the JavaScript you need into one data URI, just move some JavaScript functions into an external file and give the browser a data URI that references the external file with a URL. In this example above, the JavaScript for [https://jquery.com/ JQuery] lives in an external file on Google's servers. You just need enough bytes left over in the data URI to put a JavaScript function call with its parameters inside a <syntaxhighlight lang="html" inline><script></syntaxhighlight> element.
* A data URI can be used as a springboard to generate arbitrary complex web pages by making use of these elements: * A data URI can be used as a springboard to generate arbitrary complex web pages by making use of these elements:
** a reference to external CSS with <code><link href=</code>,   ** a reference to external CSS with <syntaxhighlight lang="html" inline><link href=</syntaxhighlight>,  
** a reference to external JavaScript with <code><script src=</code>, and ** a reference to external JavaScript with <syntaxhighlight lang="html" inline><script src=</syntaxhighlight>, and
** a function call with parameters to the external JavaScript using <code><script>someFunction(args);</script></code>. (In the JQuery example above, the name of the external function is <code>"$"</code>.) ** a function call with parameters to the external JavaScript using <syntaxhighlight lang="html" inline><script>someFunction(args);</script></syntaxhighlight>. (In the JQuery example above, the name of the external function is <code>"$"</code>.)
* See the next two examples for variations of this same technique. * See the next two examples for variations of this same technique.






Gwyneth Llewelyn: /* Link to external CSS file (forms example) */ Prettifying the HTML tags mentioned in the comments.
2024-05-01T10:15:02Z
Link to external CSS file (forms example):  Prettifying the HTML tags mentioned in the comments.

				
				
				
				
				
				← Older revision
				Revision as of 03:15, 1 May 2024
				
Line 224:
Line 224:
'''Comments:''' '''Comments:'''
* This is one way to work around the 1024-byte limitation of data URIs. The external CSS can be as large as the browser permits. Also see the examples below for putting JavaScript in an external file. * This is one way to work around the 1024-byte limitation of data URIs. The external CSS can be as large as the browser permits. Also see the examples below for putting JavaScript in an external file.
* The tag <code><head></code> and the attribute <code>type='text/css'</code> may be omitted to make the data URI a few bytes shorter. * The tag <syntaxhighlight lang="html" inline><head></syntaxhighlight> and the attribute <syntaxhighlight lang="html" inline>type='text/css'</syntaxhighlight> may be omitted to make the data URI a few bytes shorter.



===Calling external JavaScript functions (JQuery example)=== ===Calling external JavaScript functions (JQuery example)===



Gwyneth Llewelyn: /* Text colors — using  element */ Better indentation on the comments!
2024-05-01T10:13:34Z
Text colors — using  element:  Better indentation on the comments!

				
				
				
				
				
				← Older revision
				Revision as of 03:13, 1 May 2024
				
Line 200:
Line 200:
'''Comments:''' '''Comments:'''
* You can also specify color and other CSS rules in a style attribute in another element. For example, you can replace message in the example above with: * You can also specify color and other CSS rules in a style attribute in another element. For example, you can replace message in the example above with:
  :<syntaxhighlight lang="lsl2" inline>string message = "<h2 style='color:#FF0000'>Hello World</h2>";</syntaxhighlight>
<syntaxhighlight lang="lsl2" inline>string message = "<h2 style='color:#FF0000'>Hello World</h2>";</syntaxhighlight> 



===Link to external CSS file (forms example)=== ===Link to external CSS file (forms example)===



Gwyneth Llewelyn: /* Example #2 — using ...
2024-05-01T10:12:21Z
Example #2 — using <body onload= (lag graph example):  Moving to <syntaxhighlight>...

				
				
				
				
				
				← Older revision
				Revision as of 03:12, 1 May 2024
				
Line 321:
Line 321:
:<syntaxhighlight lang="JavaScript" inline>document.getElementsByTagName('body')[0].innerHTML = </syntaxhighlight><code><i>new-content</i></code> :<syntaxhighlight lang="JavaScript" inline>document.getElementsByTagName('body')[0].innerHTML = </syntaxhighlight><code><i>new-content</i></code>



====Example #2 — using <body onload= (lag graph example)==== ====Example #2 — using <code><body onload=</code> (lag graph example)====
[[Image:MoaP-example-laggraph.gif‎|thumb|Refreshed pages]] [[Image:MoaP-example-laggraph.gif‎|thumb|Refreshed pages]]
<tt> <syntaxhighlight lang="lsl2" line highlight="40,41">
  integer face = 4;   integer face = 4;
  string jsURL; // where to fetch external JavaScript   string jsURL; // where to fetch external JavaScript
Line 336:
Line 336:
      return       return
          "function bar(widthPct,heightPix) {" +           "function bar(widthPct,heightPix) {" +
          " document.writeln(\"&lt;hr style='padding:0;margin:0;" +           " document.writeln(\"<hr style='padding:0;margin:0;" +
          "  margin-top:-1px;text-align:left;align:left;border=0;" +           "  margin-top:-1px;text-align:left;align:left;border=0;" +
          "  width:\"+widthPct+\"%;height:\"+heightPix+\"px;" +           "  width:\"+widthPct+\"%;height:\"+heightPix+\"px;" +
          "  background-color:#c22;color:#c22;'>\");}" +           "  background-color:#c22;color:#c22;'>\");}" +
          " function graphBars(arr){for(var i=0;i&lt;arr.length;++i)" +           " function graphBars(arr){for(var i=0;i<arr.length;++i)" +
          "  {bar(arr[i],18);}}";           "  {bar(arr[i],18);}}";
  }   }
Line 362:
Line 362:
          // The dataURI loads external JavaScript functions and calls one with parameters:           // The dataURI loads external JavaScript functions and calls one with parameters:
       
          string dataURI = "data:text/html," +           string dataURI = "data: text/html," +
              "<span style="background-color:#F8F8C8">&lt;head>&lt;script src='" + jsURL + "'>&lt;/script>&lt;/head></span>" +               "<head><script src='" + jsURL + "'></script></head></span>" +
              "<span style="background-color:#F8F8C8">&lt;body onload=\"graphBars([" + llList2CSV(numbers) + "]);\">&lt;/body></span>";               "<body onload=\"graphBars([" + llList2CSV(numbers) + "]);\"></body></span>";
       
          llSetPrimMediaParams(face, [PRIM_MEDIA_CURRENT_URL, dataURI, PRIM_MEDIA_AUTO_PLAY, TRUE]);           llSetPrimMediaParams(face, [PRIM_MEDIA_CURRENT_URL, dataURI, PRIM_MEDIA_AUTO_PLAY, TRUE]);
Line 378:
Line 378:
          }           }
      }       }
  } </tt>   } </syntaxhighlight>



Comments: '''Comments:'''
* Like the previous example, this is another variation of how to structure a data URI to serve as a springboard for arbitrarily large pages. In this example, the data URI first uses a <tt>&lt;script src=...></tt> tag to read a file of external JavaScript functions in the <tt>&lt;head></tt> element, and then the <tt>onload=</tt> attribute in <tt>&lt;body></tt> triggers a call to one of the functions which executes a loop creating a bunch of <tt>&lt;hr></tt> elements that form the bar chart. The size of HTML generated by the JavaScript can be as large as the browser permits. * Like the previous example, this is another variation of how to structure a data URI to serve as a springboard for arbitrarily large pages. In this example, the data URI first uses a <syntaxhighlight lang="html" inline><script src=...></syntaxhighlight> tag to read a file of external JavaScript functions in the <syntaxhighlight lang="html" inline><head></syntaxhighlight> element, and then the <syntaxhighlight lang="html" inline>onload=</syntaxhighlight> attribute in <syntaxhighlight lang="html" inline><body></syntaxhighlight> triggers a call to one of the functions which executes a loop creating a bunch of <syntaxhighlight lang="html" inline><hr></syntaxhighlight> elements that form the bar chart. The size of HTML generated by the JavaScript can be as large as the browser permits.
* In this example, <tt>jsURL</tt> is set to the script's own HTTP-in URL so that the example can be self-contained, but you can point <tt>jsURL</tt> to an external URL as well. If served by an external server, the JavaScript read in <tt>&lt;head></tt> can be as large as the browser permits. * In this example, <code>jsURL</code> is set to the script's own HTTP-in URL so that the example can be self-contained, but you can point <code>jsURL</code> to an external URL as well. If served by an external server, the JavaScript read in <syntaxhighlight lang="html" inline><head></syntaxhighlight> can be as large as the browser permits.
* <tt>&lt;head>&lt;/head></tt> can be omitted in the data URI surrounding the <tt>&lt;script src=</tt> tag. * <syntaxhighlight lang="html" inline><head></head></syntaxhighlight> can be omitted in the data URI surrounding the <syntaxhighlight lang="html" inline><script src=</syntaxhighlight> tag.



===Reverse Ajax - Long-polling the HTTP-in server, chat logger example=== ===Reverse Ajax - Long-polling the HTTP-in server, chat logger example===



Gwyneth Llewelyn: /* Example #1 — using <script src= and .innerHTML= */ Moving to ; replacing some of the (bit-rotten) links
2024-05-01T09:23:46Z
Example #1 — using <script src= and .innerHTML=:  Moving to <syntaxhighlight>; replacing some of the (bit-rotten) links

				
				
				
				
				
				← Older revision
				Revision as of 02:23, 1 May 2024
				
Line 258:
Line 258:



===Self-served HTML and JavaScript=== ===Self-served HTML and JavaScript===
====Example #1 — using &lt;script src= and .innerHTML= ==== ====Example #1 — using <code>script src=</code> and <code>.innerHTML=</code> ====
[[Image:MoaP-example-refresh-clock.gif‎|thumb|Self-served auto-refreshed pages]] [[Image:MoaP-example-refresh-clock.gif‎|thumb|Self-served auto-refreshed pages]]
<tt> <syntaxhighlight lang="lsl2" line highlight="5,7,25,31-33,47,50">
 integer face = 4; integer face = 4;
 string myURL; string myURL;
  
 // This can be up to 2KBytes after %-hex-escaping: // This can be up to 2KBytes after %-hex-escaping:
 <span style="background-color:#F8F8C8">string servedPage =</span> " string servedPage = "
 function checklength(i){if (i<10) {i='0'+i;} return i;}        function checklength(i){if (i<10) {i='0'+i;} return i;}       
 <span style="background-color:#F8F8C8">function clock()</span>{   function clock(){  
  var now = new Date();     var now = new Date();   
  var hours = checklength(now.getHours());     var hours = checklength(now.getHours());   
  var minutes = checklength(now.getMinutes());     var minutes = checklength(now.getMinutes());   
  var seconds = checklength(now.getSeconds());     var seconds = checklength(now.getSeconds());   
  var format = 1; //0=24 hour format, 1=12 hour format      var format = 1; //0=24 hour format, 1=12 hour format    
  var time;     var time;   
  if (format == 1) {    if (format == 1) {  
   if (hours >= 12) {      if (hours >= 12) {   
    if (hours ==12 ) { hours = 12;    if (hours ==12 ) { hours = 12;
    } else { hours = hours-12; }      } else { hours = hours-12; }  
    time=hours+':'+minutes+':'+seconds+' PM';        time=hours+':'+minutes+':'+seconds+' PM';    
   } else if(hours < 12) {     } else if(hours < 12) {  
    if (hours ==0) {hours=12;}        if (hours ==0) {hours=12;}    
    time=hours+':'+minutes+':'+seconds+' AM';        time=hours+':'+minutes+':'+seconds+' AM';    
   }       }    
  }     }   
  if (format == 0) {time= hours+':'+minutes+':'+seconds;}      if (format == 0) {time= hours+':'+minutes+':'+seconds;}    
  <span style="background-color:#F8F8C8">document.getElementById('clock').innerHTML=time;</span>  document.getElementById('clock').innerHTML=time;
  setTimeout('clock();', 500);    setTimeout('clock();', 500);  
 } "; // yes, that's one long string. } "; // yes, that's one long string.
  
 displayPage() displayPage()
 { {
     string dataURI = "data:text/html,<span style="background-color:#F8F8C8">&lt;script src='</span>" +     string dataURI = "data: text/html,<script src='" +
         <span style="background-color:#F8F8C8">myURL + "'>&lt;/script></span>" +         myURL + "'></script>" +
         "<span style="background-color:#F8F8C8">&lt;div id='clock'>&lt;script>clock();&lt;/script>&lt;/div></span>";         "<div id='clock'><script>clock()</script></div>";
     llSetPrimMediaParams(face, [PRIM_MEDIA_CURRENT_URL, dataURI]);     llSetPrimMediaParams(face, [PRIM_MEDIA_CURRENT_URL, dataURI]);
 } }
  
 default default
 { {
     state_entry()     state_entry()
     {     {
         llRequestURL();         llRequestURL();
     }     }
       
     http_request(key id, string method, string body)     http_request(key id, string method, string body)
     {     {
         if (method == URL_REQUEST_GRANTED) {         if (method == URL_REQUEST_GRANTED) {
             <span style="background-color:#F8F8C8">myURL = body;</span>             myURL = body;
             displayPage();             displayPage();
         } else if (method == "GET") {         } else if (method == "GET") {
             <span style="background-color:#F8F8C8">llHTTPResponse(id, 200, servedPage);</span>             llHTTPResponse(id, 200, servedPage);
         }         }
     }     }
 } </tt> } </syntaxhighlight>



Comments: '''Comments:'''
* This is a technique for trading the 1024-byte limit of data URIs for the 2048-byte-per-page limit that the script can serve itself. As in the previous example, when you can't fit all the JavaScript into one data URI, just move the JavaScript into an external file and reference the file with <tt>&lt;script src=URL>&lt;/script></tt>. When the URL refers to the script's own HTTP-in URL, then the page served can contain up to 2K bytes, so you get at least that many bytes plus whatever logic you can fit into the rest of the data URI. If you move that JavaScript to an external web server, the size of the external JavaScript file can be as large as the client web browser can render. * This is a technique for trading the 1024-byte limit of data URIs for the 2048-byte-per-page limit that the script can serve itself. As in the previous example, when you can't fit all the JavaScript into one data URI, just move the JavaScript into an external file and reference the file with <syntaxhighlight lang="HTML" inline><script src=URL></script></syntaxhighlight>. When the URL refers to the script's own HTTP-in URL, then the page served can contain up to 2K bytes, so you get at least that many bytes plus whatever logic you can fit into the rest of the data URI. If you move that JavaScript to an external web server, the size of the external JavaScript file can be as large as the client web browser can render.
* Your script can serve an arbitrary number of different pages through one HTTP-in URL by appending a path or parameter to the URL. * Your script can serve an arbitrary number of different pages through one HTTP-in URL by appending a path or parameter to the URL.
* This works by assigning a string containing HTML to the <tt>.innerHTML</tt> contents of the <tt>&lt;div></tt> element with id "clock". This achieves something similar to the Ajax-like [http://talirosca.wikidot.com/bootstrapping-html-on-a-prim technique published by Tali Rosca] and mentioned [http://wiki.secondlife.com/wiki/User:Kelly_Linden/lsl_hacks#DHTML_.2F_Javascript_.28Tali_Rosca.29 here]. In those techniques, a string is constructed containing an <tt>&lt;a href=</tt> tag and an <tt>href=</tt> that points to the script's HTTP-in URL. That string then replaces the <tt>&lt;body></tt> element using: * This works by assigning a string containing HTML to the <code>.innerHTML</code> contents of the <syntaxhighlight lang="HTML" inline><div></syntaxhighlight> element with id "clock". This achieves something similar to the Ajax-like [https://tali.appspot.com/oldhtml/scripting/scripts/bootstrapping.html technique published by Tali Rosca] and mentioned [http://wiki.secondlife.com/wiki/User:Kelly_Linden/lsl_hacks#DHTML_.2F_Javascript_.28Tali_Rosca.29 here]. In those techniques, a string is constructed containing an <syntaxhighlight lang="HTML" inline><a href=</syntaxhighlight> tag and an <syntaxhighlight lang="HTML" inline>href=</syntaxhighlight> that points to the script's HTTP-in URL. That string then replaces the <syntaxhighlight lang="HTML" inline><body></syntaxhighlight> element using:
 <tt>document.getElementsByTagName('body')[0].innerHTML = <i>new-content</i></tt> :<syntaxhighlight lang="JavaScript" inline>document.getElementsByTagName('body')[0].innerHTML = </syntaxhighlight><code><i>new-content</i></code>



====Example #2 — using <body onload= (lag graph example)==== ====Example #2 — using <body onload= (lag graph example)====



Gwyneth Llewelyn: /* Development hints */ Replaced  by inline  — much cooler!

2024-05-01T08:48:18Z
Development hints:  Replaced <code> by inline <syntaxhighlight> — much cooler!

				
				
				
				
				
				← Older revision
				Revision as of 01:48, 1 May 2024
				
Line 712:
Line 712:
===Development hints=== ===Development hints===
# You can develop your HTML and JavaScript outside of Second Life by putting your JavaScript incantations in data URIs that you feed to any web browser. For the most compatible browsers, use Safari or Google Chrome, or any other that uses the [[QtWebKit|WebKit]] HTML rendering engine. If you can't run Safari or Chrome, try the open source [https://github.com/Arora/arora Arora web browser] for simulating Media-on-a-Prim: it's based on straight-up WebKit and has the same handy inspector/debugger found in other WebKit browsers.<ref>Note: Arora seems to be a dead project these days, and I'm personally unsure if LL is still using WebKit or moved to the [https://github.com/chromiumembedded/cef Chromium Embedded Framework] instead. — [[User:Gwyneth Llewelyn|Gwyneth Llewelyn]]</ref> # You can develop your HTML and JavaScript outside of Second Life by putting your JavaScript incantations in data URIs that you feed to any web browser. For the most compatible browsers, use Safari or Google Chrome, or any other that uses the [[QtWebKit|WebKit]] HTML rendering engine. If you can't run Safari or Chrome, try the open source [https://github.com/Arora/arora Arora web browser] for simulating Media-on-a-Prim: it's based on straight-up WebKit and has the same handy inspector/debugger found in other WebKit browsers.<ref>Note: Arora seems to be a dead project these days, and I'm personally unsure if LL is still using WebKit or moved to the [https://github.com/chromiumembedded/cef Chromium Embedded Framework] instead. — [[User:Gwyneth Llewelyn|Gwyneth Llewelyn]]</ref>
# If you don't have direct access to a web server while developing this stuff, then consider installing a local copy of [https://www.apache.org/ Apache web server] on your computer. You can restrict it to local access. Then you can refer to files on your own computer with URLs that start with <code><nowiki>http://localhost/</nowiki>...</code>, and PHP scripts can simulate what the HTTP-in server would serve. That lets you, for example, edit <code>myfile.js</code> on your own computer while working on a data URI that contains <code><script src="<nowiki>http://localhost/myfile.js</nowiki>"></code>. Then when <code>myfile.js</code> is working, you can put the debugged code into an LSL script that will serve it through its HTTP-in port. That's easier than debugging all that in-world. # If you don't have direct access to a web server while developing this stuff, then consider installing a local copy of [https://www.apache.org/ Apache web server] on your computer. You can restrict it to local access. Then you can refer to files on your own computer with URLs that start with <code><nowiki>http://localhost/</nowiki>...</code>, and PHP scripts can simulate what the HTTP-in server would serve. That lets you, for example, edit <code>myfile.js</code> on your own computer while working on a data URI that contains <syntaxhighlight lang="HTML" inline><script src="http://localhost/myfile.js"></syntaxhighlight>. Then when <code>myfile.js</code> is working, you can put the debugged code into an LSL script that will serve it through its HTTP-in port. That's easier than debugging all that in-world.



===References and sources=== ===References and sources===

← Older revision		Revision as of 03:50, 1 May 2024
Line 705:		Line 705:
	'''Comments:'''		'''Comments:'''
	* Any URL or data URI can be mapped to a TinyURL. The example above reduces an assigned HTTP-in URL, which is a long one such as:		* Any URL or data URI can be mapped to a TinyURL. The example above reduces an assigned HTTP-in URL, which is a long one such as:
	<nowiki>http://sim4605.agni.lindenlab.com:12046/cap/2b9f06f7-431e-5b0f-9271-2d03bd15370b</nowiki>		:<code><nowiki>http://sim4605.agni.lindenlab.com:12046/cap/2b9f06f7-431e-5b0f-9271-2d03bd15370b</nowiki></code>
	into a TinyURL this size:		into a TinyURL this size:
	<nowiki>https://tinyurl.com/26dsnl2b</nowiki>		:<code><nowiki>https://tinyurl.com/26dsnl2b</nowiki></code>

	===Development hints===		===Development hints===

← Older revision		Revision as of 03:46, 1 May 2024
Line 626:		Line 626:
	<li>This "{{Wikipedia\|Push technology\|server-push}}" technique using long-polling gives an LSL script the ability to modify the web page displayed on a prim. The Javascript side always keeps an HTTP GET open to the prim's HTTP-in URL, and the LSL side responds whenever it wants to with a response consisting of strings of Javascript to be executed by the web browser. For example, this LSL code causes an alert box to pop up on the web page:		<li>This "{{Wikipedia\|Push technology\|server-push}}" technique using long-polling gives an LSL script the ability to modify the web page displayed on a prim. The Javascript side always keeps an HTTP GET open to the prim's HTTP-in URL, and the LSL side responds whenever it wants to with a response consisting of strings of Javascript to be executed by the web browser. For example, this LSL code causes an alert box to pop up on the web page:
	: <syntaxhighlight lang="lsl2" inline>sendMessage( "alert()" );</syntaxhighlight></li>		: <syntaxhighlight lang="lsl2" inline>sendMessage( "alert()" );</syntaxhighlight></li>
	<li>In the LSL listing above, <span style="background-color:#F8F8C8">the yellow highlighting</span> shows the most important parts of the HTTP long-polling mechanism. The <span style="background-color:#E0FDE0">green highlighting</span> shows the message buffering on top of that. The <span style="background-color:#E8E8FF">blue highlighting</span> is the application code that uses long-polling. To use long-polling for a different application, replace the blue parts. The rest is glue.<ref>~~Note:~~ Unfortunately, at the time of editing/cleaning up the WikiText on this fantastic tutorial, I couldn't figure out a neat way of having three separate colours as highlights on the code. I've placed a request on the MediaWiki talk page for <code><syntaxhighlight></code>, but I'm unsure if whatever tricks they suggest will work on the SL Wiki. So, for the time being, this example will remain untouched, as originally written by {{mention\|Becky Pippen\|p=}} — [[User:Gwyneth Llewelyn\|Gwyneth Llewelyn]]</ref></li>		<li>In the LSL listing above, <span style="background-color:#F8F8C8">the yellow highlighting</span> shows the most important parts of the HTTP long-polling mechanism. The <span style="background-color:#E0FDE0">green highlighting</span> shows the message buffering on top of that. The <span style="background-color:#E8E8FF">blue highlighting</span> is the application code that uses long-polling. To use long-polling for a different application, replace the blue parts. The rest is glue.<ref>Unfortunately, at the time of editing/cleaning up the WikiText on this fantastic tutorial, I couldn't figure out a neat way of having three separate colours as highlights on the code. I've placed a request on the MediaWiki talk page for <code><syntaxhighlight></code>, but I'm unsure if whatever tricks they suggest will work on the SL Wiki. So, for the time being, this example will remain untouched, as originally written by {{mention\|Becky Pippen\|p=}} — [[User:Gwyneth Llewelyn\|Gwyneth Llewelyn]]</ref></li>
	<li>To avoid some subtle WebKit<ref>It might be the case that the SL Viewer is now based on the Chromium Embedded Framework instead, so Becky's references might not apply any longer. — [[User:Gwyneth Llewelyn\|Gwyneth Llewelyn]]</ref> problems when dynamically appending or replacing the first-level child nodes in <syntaxhighlight lang="html" inline><head></syntaxhighlight> or <syntaxhighlight lang="html" inline><body></syntaxhighlight>, we've made two special <syntaxhighlight lang="html" inline><div></syntaxhighlight> elements on the bootstrap HTML page. The first surrounds the <code>script#sc</code> element that we replace for each GET. The second is at the end of <syntaxhighlight lang="html" inline><body></syntaxhighlight> as a convenient place for the application to insert new content that would otherwise go in <syntaxhighlight lang="html" inline><body></syntaxhighlight>.</li>		<li>To avoid some subtle WebKit<ref>It might be the case that the SL Viewer is now based on the Chromium Embedded Framework instead, so Becky's references might not apply any longer. — [[User:Gwyneth Llewelyn\|Gwyneth Llewelyn]]</ref> problems when dynamically appending or replacing the first-level child nodes in <syntaxhighlight lang="html" inline><head></syntaxhighlight> or <syntaxhighlight lang="html" inline><body></syntaxhighlight>, we've made two special <syntaxhighlight lang="html" inline><div></syntaxhighlight> elements on the bootstrap HTML page. The first surrounds the <code>script#sc</code> element that we replace for each GET. The second is at the end of <syntaxhighlight lang="html" inline><body></syntaxhighlight> as a convenient place for the application to insert new content that would otherwise go in <syntaxhighlight lang="html" inline><body></syntaxhighlight>.</li>
	<li>To make sure that there is nearly always a valid GET request open, the Javascript side starts a new GET after receiving a response, or just before the last unanswered GET times out.</li>		<li>To make sure that there is nearly always a valid GET request open, the Javascript side starts a new GET after receiving a response, or just before the last unanswered GET times out.</li>

← Older revision		Revision as of 03:43, 1 May 2024
Line 622:		Line 622:
	</tt>		</tt>

	Comments:		'''Comments:'''
	<ol start="1">		<ol start="1">
	<li>This "~~[http://en.wikipedia.org/wiki/Push_technology~~ server-push]" technique using long-polling gives an LSL script the ability to modify the web page displayed on a prim. The Javascript side always keeps an HTTP GET open to the prim's HTTP-in URL, and the LSL side responds whenever it wants to with a response consisting of strings of Javascript to be executed by the web browser. For example, this LSL code causes an alert box to pop up on the web page:		<li>This "{{Wikipedia\|Push technology\|server-push}}" technique using long-polling gives an LSL script the ability to modify the web page displayed on a prim. The Javascript side always keeps an HTTP GET open to the prim's HTTP-in URL, and the LSL side responds whenever it wants to with a response consisting of strings of Javascript to be executed by the web browser. For example, this LSL code causes an alert box to pop up on the web page:
	: <~~code~~>sendMessage( "alert()" );</~~code~~></li>		: <syntaxhighlight lang="lsl2" inline>sendMessage( "alert()" );</syntaxhighlight></li>
	<li>In the LSL listing above, <span style="background-color:#F8F8C8">the yellow highlighting</span> shows the most important parts of the HTTP long-polling mechanism. The <span style="background-color:#E0FDE0">green highlighting</span> shows the message buffering on top of that. The <span style="background-color:#E8E8FF">blue highlighting</span> is the application code that uses long-polling. To use long-polling for a different application, replace the blue parts. The rest is glue.</li>		<li>In the LSL listing above, <span style="background-color:#F8F8C8">the yellow highlighting</span> shows the most important parts of the HTTP long-polling mechanism. The <span style="background-color:#E0FDE0">green highlighting</span> shows the message buffering on top of that. The <span style="background-color:#E8E8FF">blue highlighting</span> is the application code that uses long-polling. To use long-polling for a different application, replace the blue parts. The rest is glue.<ref>Note: Unfortunately, at the time of editing/cleaning up the WikiText on this fantastic tutorial, I couldn't figure out a neat way of having three separate colours as highlights on the code. I've placed a request on the MediaWiki talk page for <code><syntaxhighlight></code>, but I'm unsure if whatever tricks they suggest will work on the SL Wiki. So, for the time being, this example will remain untouched, as originally written by {{mention\|Becky Pippen\|p=}} — [[User:Gwyneth Llewelyn\|Gwyneth Llewelyn]]</ref></li>
	<li>To avoid some subtle WebKit problems when dynamically appending or replacing the first-level child nodes in ~~<~~head> or ~~<~~body>, we've made two special ~~<~~div> elements on the bootstrap HTML page. The first surrounds the script#sc element that we replace for each GET. The second is at the end of ~~<~~body> as a convenient place for the application to insert new content that would otherwise go in ~~<~~body>.</li>		<li>To avoid some subtle WebKit<ref>It might be the case that the SL Viewer is now based on the Chromium Embedded Framework instead, so Becky's references might not apply any longer. — [[User:Gwyneth Llewelyn\|Gwyneth Llewelyn]]</ref> problems when dynamically appending or replacing the first-level child nodes in <syntaxhighlight lang="html" inline><head></syntaxhighlight> or <syntaxhighlight lang="html" inline><body></syntaxhighlight>, we've made two special <syntaxhighlight lang="html" inline><div></syntaxhighlight> elements on the bootstrap HTML page. The first surrounds the <code>script#sc</code> element that we replace for each GET. The second is at the end of <syntaxhighlight lang="html" inline><body></syntaxhighlight> as a convenient place for the application to insert new content that would otherwise go in <syntaxhighlight lang="html" inline><body></syntaxhighlight>.</li>
	<li>To make sure that there is nearly always a valid GET request open, the Javascript side starts a new GET after receiving a response, or just before the last unanswered GET times out.</li>		<li>To make sure that there is nearly always a valid GET request open, the Javascript side starts a new GET after receiving a response, or just before the last unanswered GET times out.</li>
	<li>There are two timeouts hard-coded in the bootstrap data URI:		<li>There are two timeouts hard-coded in the bootstrap data URI:
	<ol style="list-style-type:lower-roman"><li>The "20000" is the timeout (20 seconds) for when an open GET expires, and should be set to a little less than the minimum of the WebKit outgoing GET request timeout, and the SL-LSL incoming GET timeout. This ensures that GETs are nearly continuous, and the LSL side can always respond to the most recent GET request. [[LlHTTPResponse\|This page]] says the timeout on the LSL side is 25 seconds.</li>		<ol style="list-style-type:lower-roman"><li>The "20000" is the timeout (20 seconds) for when an open GET expires, and should be set to a little less than the minimum of the WebKit outgoing GET request timeout, and the SL-LSL incoming GET timeout. This ensures that GETs are nearly continuous, and the LSL side can always respond to the most recent GET request. [[LlHTTPResponse\|This page]] says the timeout on the LSL side is 25 seconds.</li>
	<li>The "500" is a throttle that sets an upper limit to how fast the Javascript re-polls HTTP-in to prevent hammering the simulator. It's a half-second delay after receiving a GET response before starting a new GET.</li></ol>		<li>The "500" is a throttle that sets an upper limit to how fast the Javascript re-polls HTTP-in to prevent hammering the simulator. It's a half-second delay after receiving a GET response before starting a new GET.</li></ol>
	<li> If there's a little gap between two GETs, or if two overlap a little, the sendMessage() message buffering will compensate by queuing up messages to be sent when the next GET arrives. If there are multiple messages in the queue when a GET arrives, the LSL side will concatenate as many messages as possible and send them together.		<li> If there's a little gap between two GETs, or if two overlap a little, the <syntaxhighlight lang="lsl2" inline>sendMessage()</syntaxhighlight> message buffering will compensate by queuing up messages to be sent when the next GET arrives. If there are multiple messages in the queue when a GET arrives, the LSL side will concatenate as many messages as possible and send them together.
	</li>		</li>
	<li>On the Javascript side, the GET is not triggered until the <tt>~~<~~script></tt> element is attached to its parent node with .appendChild() or .replaceChild().</li>		<li>On the Javascript side, the GET is not triggered until the <syntaxhighlight lang="html" inline><script></syntaxhighlight> element is attached to its parent node with <code>.appendChild()</code> or <code>.replaceChild()</code>.</li>
	<li>The bootstrap Javascript above in setDataURI() had to be compressed somewhat to fit into the 1024-byte data URI limit. Here's an expanded listing for reference with more descriptive names:</li>		<li>The bootstrap Javascript above in <syntaxhighlight lang="lsl2" inline>setDataURI()</syntaxhighlight> had to be compressed somewhat to fit into the 1024-byte data URI limit. Here's an expanded listing for reference with more descriptive names:</li>
	<tt>		:<syntaxhighlight lang="html">
	~~<~~!DOCTYPE HTML>		<!DOCTYPE HTML>
	~~<~~html>		<html>
	~~<~~body>		<body>
	~~<~~div>		<div>
	~~<~~script id='script'> ~~<~~/script>		<script id='script'> </script>
	~~<~~/div>		</div>
	~~<~~script>		<script>
	var poll=function(){		var poll=function(){
	var script=document.getElementById('script'),		var script=document.getElementById('script'),
Line 658:		Line 658:
	script=newScript;},		script=newScript;},

	end:function() {		end: function() {
	clearTimeout(timeoutId);		clearTimeout(timeoutId);
	timeoutId=null;		timeoutId=null;
Line 666:		Line 666:
	};		};
	}();		}();
	~~<~~/script>		</script>
	~~<~~button id='btn'onclick=poll.beg()>Start~~<~~button>		<button id='btn' onclick=poll.beg()>Start<button>
	~~<~~div id='dv'> ~~<~~/div>		<div id='dv'> </div>
	~~<~~/body>		</body>
	~~<~~/html>		</html>
	</tt>		</syntaxhighlight>
	</ol>		</ol>

← Older revision		Revision as of 03:19, 1 May 2024
Line 127:		Line 127:
	'''Comments:'''		'''Comments:'''
	* If attempting to display YouTube video full-frame, see [https://blogs.secondlife.com/community/community/tnt/blog/2010/03/16/viewer-2-tip-shared-media-show-youtube-on-a-full-prims-face this discussion]{{dead link\|2024-04-29 Searched as deep as I could but didn't find it — Gwyn}}.		* If attempting to display YouTube video full-frame, see [https://blogs.secondlife.com/community/community/tnt/blog/2010/03/16/viewer-2-tip-shared-media-show-youtube-on-a-full-prims-face this discussion]{{dead link\|2024-04-29 Searched as deep as I could but didn't find it — Gwyn}}.
	* For images, you can also use <~~code~~><image src= ></~~code~~> like this: <syntaxhighlight lang="lsl2" inline>string dataURI="data:text/html,<img src='" + imageURL + "'>";</syntaxhighlight>		* For images, you can also use <syntaxhighlight lang="html" inline><image src= ></syntaxhighlight> like this: <syntaxhighlight lang="lsl2" inline>string dataURI="data:text/html,<img src='" + imageURL + "'>";</syntaxhighlight>
	* Note: The original Wikimedia Commons image has been deprecated and was replaced by the closest-looking one. — [[User:Gwyneth Llewelyn\|Gwyneth Llewelyn]] ([[User talk:Gwyneth Llewelyn\|talk]]) 04:51, 29 April 2024 (PDT)		* Note: The original Wikimedia Commons image given in the code as an example has been deprecated and was replaced by the closest-looking one; if you try this code in-world, it will show up differently than the animated image to the right. — [[User:Gwyneth Llewelyn\|Gwyneth Llewelyn]] ([[User talk:Gwyneth Llewelyn\|talk]]) 04:51, 29 April 2024 (PDT)

	===Display a background image, tiled===		===Display a background image, tiled===

← Older revision		Revision as of 03:16, 1 May 2024
Line 249:		Line 249:

	'''Comments:'''		'''Comments:'''
	* This is a technique for working around the 1024-byte limit for data URIs. When you can't fit all the JavaScript you need into one data URI, just move some JavaScript functions into an external file and give the browser a data URI that references the external file with a URL. In this example above, the JavaScript for [https://jquery.com/ JQuery] lives in an external file on Google's servers. You just need enough bytes left over in the data URI to put a JavaScript function call with its parameters inside a <~~code~~><script></~~code~~> element.		* This is a technique for working around the 1024-byte limit for data URIs. When you can't fit all the JavaScript you need into one data URI, just move some JavaScript functions into an external file and give the browser a data URI that references the external file with a URL. In this example above, the JavaScript for [https://jquery.com/ JQuery] lives in an external file on Google's servers. You just need enough bytes left over in the data URI to put a JavaScript function call with its parameters inside a <syntaxhighlight lang="html" inline><script></syntaxhighlight> element.
	* A data URI can be used as a springboard to generate arbitrary complex web pages by making use of these elements:		* A data URI can be used as a springboard to generate arbitrary complex web pages by making use of these elements:
	** a reference to external CSS with <~~code~~><link href=</~~code~~>,		** a reference to external CSS with <syntaxhighlight lang="html" inline><link href=</syntaxhighlight>,
	** a reference to external JavaScript with <~~code~~><script src=</~~code~~>, and		** a reference to external JavaScript with <syntaxhighlight lang="html" inline><script src=</syntaxhighlight>, and
	** a function call with parameters to the external JavaScript using <~~code~~><script>someFunction(args);</script></~~code~~>. (In the JQuery example above, the name of the external function is <code>"$"</code>.)		** a function call with parameters to the external JavaScript using <syntaxhighlight lang="html" inline><script>someFunction(args);</script></syntaxhighlight>. (In the JQuery example above, the name of the external function is <code>"$"</code>.)
	* See the next two examples for variations of this same technique.		* See the next two examples for variations of this same technique.

← Older revision		Revision as of 03:15, 1 May 2024
Line 224:		Line 224:
	'''Comments:'''		'''Comments:'''
	* This is one way to work around the 1024-byte limitation of data URIs. The external CSS can be as large as the browser permits. Also see the examples below for putting JavaScript in an external file.		* This is one way to work around the 1024-byte limitation of data URIs. The external CSS can be as large as the browser permits. Also see the examples below for putting JavaScript in an external file.
	* The tag <~~code~~><head></~~code~~> and the attribute <~~code~~>type='text/css'</~~code~~> may be omitted to make the data URI a few bytes shorter.		* The tag <syntaxhighlight lang="html" inline><head></syntaxhighlight> and the attribute <syntaxhighlight lang="html" inline>type='text/css'</syntaxhighlight> may be omitted to make the data URI a few bytes shorter.

	===Calling external JavaScript functions (JQuery example)===		===Calling external JavaScript functions (JQuery example)===

← Older revision		Revision as of 03:13, 1 May 2024
Line 200:		Line 200:
	'''Comments:'''		'''Comments:'''
	* You can also specify color and other CSS rules in a style attribute in another element. For example, you can replace message in the example above with:		* You can also specify color and other CSS rules in a style attribute in another element. For example, you can replace message in the example above with:
			:<syntaxhighlight lang="lsl2" inline>string message = "<h2 style='color:#FF0000'>Hello World</h2>";</syntaxhighlight>
	<syntaxhighlight lang="lsl2" inline>string message = "<h2 style='color:#FF0000'>Hello World</h2>";</syntaxhighlight>

	===Link to external CSS file (forms example)===		===Link to external CSS file (forms example)===

← Older revision		Revision as of 03:12, 1 May 2024
Line 321:		Line 321:
	:<syntaxhighlight lang="JavaScript" inline>document.getElementsByTagName('body')[0].innerHTML = </syntaxhighlight><code><i>new-content</i></code>		:<syntaxhighlight lang="JavaScript" inline>document.getElementsByTagName('body')[0].innerHTML = </syntaxhighlight><code><i>new-content</i></code>

	====Example #2 — using <body onload= (lag graph example)====		====Example #2 — using <code><body onload=</code> (lag graph example)====
	[[Image:MoaP-example-laggraph.gif‎\|thumb\|Refreshed pages]]		[[Image:MoaP-example-laggraph.gif‎\|thumb\|Refreshed pages]]
	<tt>		<syntaxhighlight lang="lsl2" line highlight="40,41">
	integer face = 4;		integer face = 4;
	string jsURL; // where to fetch external JavaScript		string jsURL; // where to fetch external JavaScript
Line 336:		Line 336:
	return		return
	"function bar(widthPct,heightPix) {" +		"function bar(widthPct,heightPix) {" +
	" document.writeln(\"~~<~~hr style='padding:0;margin:0;" +		" document.writeln(\"<hr style='padding:0;margin:0;" +
	" margin-top:-1px;text-align:left;align:left;border=0;" +		" margin-top:-1px;text-align:left;align:left;border=0;" +
	" width:\"+widthPct+\"%;height:\"+heightPix+\"px;" +		" width:\"+widthPct+\"%;height:\"+heightPix+\"px;" +
	" background-color:#c22;color:#c22;'>\");}" +		" background-color:#c22;color:#c22;'>\");}" +
	" function graphBars(arr){for(var i=0;i~~<~~arr.length;++i)" +		" function graphBars(arr){for(var i=0;i<arr.length;++i)" +
	" {bar(arr[i],18);}}";		" {bar(arr[i],18);}}";
	}		}
Line 362:		Line 362:
	// The dataURI loads external JavaScript functions and calls one with parameters:		// The dataURI loads external JavaScript functions and calls one with parameters:

	string dataURI = "data:text/html," +		string dataURI = "data: text/html," +
	"<~~span style="background-color:#F8F8C8"><~~head>~~<~~script src='" + jsURL + "'>~~<~~/script>~~<~~/head></span>" +		"<head><script src='" + jsURL + "'></script></head></span>" +
	"<~~span style="background-color:#F8F8C8"><~~body onload=\"graphBars([" + llList2CSV(numbers) + "]);\">~~<~~/body></span>";		"<body onload=\"graphBars([" + llList2CSV(numbers) + "]);\"></body></span>";

	llSetPrimMediaParams(face, [PRIM_MEDIA_CURRENT_URL, dataURI, PRIM_MEDIA_AUTO_PLAY, TRUE]);		llSetPrimMediaParams(face, [PRIM_MEDIA_CURRENT_URL, dataURI, PRIM_MEDIA_AUTO_PLAY, TRUE]);
Line 378:		Line 378:
	}		}
	}		}
	} </tt>		} </syntaxhighlight>

	Comments:		'''Comments:'''
	* Like the previous example, this is another variation of how to structure a data URI to serve as a springboard for arbitrarily large pages. In this example, the data URI first uses a <tt>~~<~~script src=...></tt> tag to read a file of external JavaScript functions in the <tt>~~<~~head></tt> element, and then the <tt>onload=</tt> attribute in <tt>~~<~~body></tt> triggers a call to one of the functions which executes a loop creating a bunch of <tt>~~<~~hr></tt> elements that form the bar chart. The size of HTML generated by the JavaScript can be as large as the browser permits.		* Like the previous example, this is another variation of how to structure a data URI to serve as a springboard for arbitrarily large pages. In this example, the data URI first uses a <syntaxhighlight lang="html" inline><script src=...></syntaxhighlight> tag to read a file of external JavaScript functions in the <syntaxhighlight lang="html" inline><head></syntaxhighlight> element, and then the <syntaxhighlight lang="html" inline>onload=</syntaxhighlight> attribute in <syntaxhighlight lang="html" inline><body></syntaxhighlight> triggers a call to one of the functions which executes a loop creating a bunch of <syntaxhighlight lang="html" inline><hr></syntaxhighlight> elements that form the bar chart. The size of HTML generated by the JavaScript can be as large as the browser permits.
	* In this example, <tt>jsURL</tt> is set to the script's own HTTP-in URL so that the example can be self-contained, but you can point <tt>jsURL</tt> to an external URL as well. If served by an external server, the JavaScript read in <tt>~~<~~head></tt> can be as large as the browser permits.		* In this example, <code>jsURL</code> is set to the script's own HTTP-in URL so that the example can be self-contained, but you can point <code>jsURL</code> to an external URL as well. If served by an external server, the JavaScript read in <syntaxhighlight lang="html" inline><head></syntaxhighlight> can be as large as the browser permits.
	* <tt>~~<~~head>~~<~~/head></tt> can be omitted in the data URI surrounding the <tt>~~<~~script src=</tt> tag.		* <syntaxhighlight lang="html" inline><head></head></syntaxhighlight> can be omitted in the data URI surrounding the <syntaxhighlight lang="html" inline><script src=</syntaxhighlight> tag.

	===Reverse Ajax - Long-polling the HTTP-in server, chat logger example===		===Reverse Ajax - Long-polling the HTTP-in server, chat logger example===

← Older revision		Revision as of 02:23, 1 May 2024
Line 258:		Line 258:

	===Self-served HTML and JavaScript===		===Self-served HTML and JavaScript===
	====Example #1 — using ~~<~~script src= and .innerHTML= ====		====Example #1 — using <code>script src=</code> and <code>.innerHTML=</code> ====
	[[Image:MoaP-example-refresh-clock.gif‎\|thumb\|Self-served auto-refreshed pages]]		[[Image:MoaP-example-refresh-clock.gif‎\|thumb\|Self-served auto-refreshed pages]]
	<tt>		<syntaxhighlight lang="lsl2" line highlight="5,7,25,31-33,47,50">
	integer face = 4;		integer face = 4;
	string myURL;		string myURL;

	// This can be up to 2KBytes after %-hex-escaping:		// This can be up to 2KBytes after %-hex-escaping:
	~~<span style="background-color:#F8F8C8">~~string servedPage =~~</span>~~ "		string servedPage = "
	function checklength(i){if (i<10) {i='0'+i;} return i;}		function checklength(i){if (i<10) {i='0'+i;} return i;}
	~~<span style="background-color:#F8F8C8">~~function clock()~~</span>~~{		function clock(){
	var now = new Date();		var now = new Date();
	var hours = checklength(now.getHours());		var hours = checklength(now.getHours());
	var minutes = checklength(now.getMinutes());		var minutes = checklength(now.getMinutes());
	var seconds = checklength(now.getSeconds());		var seconds = checklength(now.getSeconds());
	var format = 1; //0=24 hour format, 1=12 hour format		var format = 1; //0=24 hour format, 1=12 hour format
	var time;		var time;
	if (format == 1) {		if (format == 1) {
	if (hours >= 12) {		if (hours >= 12) {
	if (hours ==12 ) { hours = 12;		if (hours ==12 ) { hours = 12;
	} else { hours = hours-12; }		} else { hours = hours-12; }
	time=hours+':'+minutes+':'+seconds+' PM';		time=hours+':'+minutes+':'+seconds+' PM';
	} else if(hours < 12) {		} else if(hours < 12) {
	if (hours ==0) {hours=12;}		if (hours ==0) {hours=12;}
	time=hours+':'+minutes+':'+seconds+' AM';		time=hours+':'+minutes+':'+seconds+' AM';
	}		}
	}		}
	if (format == 0) {time= hours+':'+minutes+':'+seconds;}		if (format == 0) {time= hours+':'+minutes+':'+seconds;}
	~~<span style="background-color:#F8F8C8">~~document.getElementById('clock').innerHTML=time;~~</span>~~		document.getElementById('clock').innerHTML=time;
	setTimeout('clock();', 500);		setTimeout('clock();', 500);
	} "; // yes, that's one long string.		} "; // yes, that's one long string.

	displayPage()		displayPage()
	{		{
	string dataURI = "data:text/html,<~~span style="background-color:#F8F8C8"><~~script src='~~</span>~~" +		string dataURI = "data: text/html,<script src='" +
	~~<span style="background-color:#F8F8C8">~~myURL + "'>~~<~~/script~~></span~~>" +		myURL + "'></script>" +
	"<~~span style="background-color:#F8F8C8"><~~div id='clock'>~~<~~script>clock()~~;<~~/script>~~<~~/div~~></span~~>";		"<div id='clock'><script>clock()</script></div>";
	llSetPrimMediaParams(face, [PRIM_MEDIA_CURRENT_URL, dataURI]);		llSetPrimMediaParams(face, [PRIM_MEDIA_CURRENT_URL, dataURI]);
	}		}

	default		default
	{		{
	state_entry()		state_entry()
	{		{
	llRequestURL();		llRequestURL();
	}		}

	http_request(key id, string method, string body)		http_request(key id, string method, string body)
	{		{
	if (method == URL_REQUEST_GRANTED) {		if (method == URL_REQUEST_GRANTED) {
	~~<span style="background-color:#F8F8C8">~~myURL = body;~~</span>~~		myURL = body;
	displayPage();		displayPage();
	} else if (method == "GET") {		} else if (method == "GET") {
	~~<span style="background-color:#F8F8C8">~~llHTTPResponse(id, 200, servedPage);~~</span>~~		llHTTPResponse(id, 200, servedPage);
	}		}
	}		}
	} </tt>		} </syntaxhighlight>

	Comments:		'''Comments:'''
	* This is a technique for trading the 1024-byte limit of data URIs for the 2048-byte-per-page limit that the script can serve itself. As in the previous example, when you can't fit all the JavaScript into one data URI, just move the JavaScript into an external file and reference the file with <tt>~~<~~script src=URL>~~<~~/script></tt>. When the URL refers to the script's own HTTP-in URL, then the page served can contain up to 2K bytes, so you get at least that many bytes plus whatever logic you can fit into the rest of the data URI. If you move that JavaScript to an external web server, the size of the external JavaScript file can be as large as the client web browser can render.		* This is a technique for trading the 1024-byte limit of data URIs for the 2048-byte-per-page limit that the script can serve itself. As in the previous example, when you can't fit all the JavaScript into one data URI, just move the JavaScript into an external file and reference the file with <syntaxhighlight lang="HTML" inline><script src=URL></script></syntaxhighlight>. When the URL refers to the script's own HTTP-in URL, then the page served can contain up to 2K bytes, so you get at least that many bytes plus whatever logic you can fit into the rest of the data URI. If you move that JavaScript to an external web server, the size of the external JavaScript file can be as large as the client web browser can render.
	* Your script can serve an arbitrary number of different pages through one HTTP-in URL by appending a path or parameter to the URL.		* Your script can serve an arbitrary number of different pages through one HTTP-in URL by appending a path or parameter to the URL.
	* This works by assigning a string containing HTML to the <tt>.innerHTML</tt> contents of the <tt>~~<~~div></tt> element with id "clock". This achieves something similar to the Ajax-like [~~http~~://~~talirosca~~.~~wikidot~~.com/bootstrapping-html~~-on-a-prim~~ technique published by Tali Rosca] and mentioned [http://wiki.secondlife.com/wiki/User:Kelly_Linden/lsl_hacks#DHTML_.2F_Javascript_.28Tali_Rosca.29 here]. In those techniques, a string is constructed containing an <tt>~~<~~a href=</tt> tag and an <tt>href=</tt> that points to the script's HTTP-in URL. That string then replaces the <tt>~~<~~body></tt> element using:		* This works by assigning a string containing HTML to the <code>.innerHTML</code> contents of the <syntaxhighlight lang="HTML" inline><div></syntaxhighlight> element with id "clock". This achieves something similar to the Ajax-like [https://tali.appspot.com/oldhtml/scripting/scripts/bootstrapping.html technique published by Tali Rosca] and mentioned [http://wiki.secondlife.com/wiki/User:Kelly_Linden/lsl_hacks#DHTML_.2F_Javascript_.28Tali_Rosca.29 here]. In those techniques, a string is constructed containing an <syntaxhighlight lang="HTML" inline><a href=</syntaxhighlight> tag and an <syntaxhighlight lang="HTML" inline>href=</syntaxhighlight> that points to the script's HTTP-in URL. That string then replaces the <syntaxhighlight lang="HTML" inline><body></syntaxhighlight> element using:
	<tt>document.getElementsByTagName('body')[0].innerHTML = <i>new-content</i></tt>		:<syntaxhighlight lang="JavaScript" inline>document.getElementsByTagName('body')[0].innerHTML = </syntaxhighlight><code><i>new-content</i></code>

	====Example #2 — using <body onload= (lag graph example)====		====Example #2 — using <body onload= (lag graph example)====

← Older revision		Revision as of 01:48, 1 May 2024
Line 712:		Line 712:
	===Development hints===		===Development hints===
	# You can develop your HTML and JavaScript outside of Second Life by putting your JavaScript incantations in data URIs that you feed to any web browser. For the most compatible browsers, use Safari or Google Chrome, or any other that uses the [[QtWebKit\|WebKit]] HTML rendering engine. If you can't run Safari or Chrome, try the open source [https://github.com/Arora/arora Arora web browser] for simulating Media-on-a-Prim: it's based on straight-up WebKit and has the same handy inspector/debugger found in other WebKit browsers.<ref>Note: Arora seems to be a dead project these days, and I'm personally unsure if LL is still using WebKit or moved to the [https://github.com/chromiumembedded/cef Chromium Embedded Framework] instead. — [[User:Gwyneth Llewelyn\|Gwyneth Llewelyn]]</ref>		# You can develop your HTML and JavaScript outside of Second Life by putting your JavaScript incantations in data URIs that you feed to any web browser. For the most compatible browsers, use Safari or Google Chrome, or any other that uses the [[QtWebKit\|WebKit]] HTML rendering engine. If you can't run Safari or Chrome, try the open source [https://github.com/Arora/arora Arora web browser] for simulating Media-on-a-Prim: it's based on straight-up WebKit and has the same handy inspector/debugger found in other WebKit browsers.<ref>Note: Arora seems to be a dead project these days, and I'm personally unsure if LL is still using WebKit or moved to the [https://github.com/chromiumembedded/cef Chromium Embedded Framework] instead. — [[User:Gwyneth Llewelyn\|Gwyneth Llewelyn]]</ref>
	# If you don't have direct access to a web server while developing this stuff, then consider installing a local copy of [https://www.apache.org/ Apache web server] on your computer. You can restrict it to local access. Then you can refer to files on your own computer with URLs that start with <code><nowiki>http://localhost/</nowiki>...</code>, and PHP scripts can simulate what the HTTP-in server would serve. That lets you, for example, edit <code>myfile.js</code> on your own computer while working on a data URI that contains <~~code~~><script src="~~<nowiki>~~http://localhost/myfile.js~~</nowiki>~~"></~~code~~>. Then when <code>myfile.js</code> is working, you can put the debugged code into an LSL script that will serve it through its HTTP-in port. That's easier than debugging all that in-world.		# If you don't have direct access to a web server while developing this stuff, then consider installing a local copy of [https://www.apache.org/ Apache web server] on your computer. You can restrict it to local access. Then you can refer to files on your own computer with URLs that start with <code><nowiki>http://localhost/</nowiki>...</code>, and PHP scripts can simulate what the HTTP-in server would serve. That lets you, for example, edit <code>myfile.js</code> on your own computer while working on a data URI that contains <syntaxhighlight lang="HTML" inline><script src="http://localhost/myfile.js"></syntaxhighlight>. Then when <code>myfile.js</code> is working, you can put the debugged code into an LSL script that will serve it through its HTTP-in port. That's easier than debugging all that in-world.

	===References and sources===		===References and sources===

User:Becky Pippen/Shared Media LSL Recipes - Revision history

Gwyneth Llewelyn: /* Make TinyURLs by script */ Added to the URLs and tried to get better indentation

Gwyneth Llewelyn: /* Reverse Ajax - Long-polling the HTTP-in server, chat logger example */ On my own reference (footnote) it's redundant to prefix it with "Note:" since this will appear in a section called "Notes" anyway...

Gwyneth Llewelyn: /* Reverse Ajax - Long-polling the HTTP-in server, chat logger example */ Not a full replacement due to limitations of - only one colour can be used for highlighting a line, not three, as Becky used

Gwyneth Llewelyn: /* Display an image — works with animated GIFs too */ Found a HTML tag without proper highlighting in the comments section

Gwyneth Llewelyn: /* Calling external JavaScript functions (JQuery example) */ More prettifying of HTML tags in the comment section

Gwyneth Llewelyn: /* Link to external CSS file (forms example) */ Prettifying the HTML tags mentioned in the comments.

Gwyneth Llewelyn: /* Text colors — using element */ Better indentation on the comments!

Gwyneth Llewelyn: /* Example #2 — using ...

Gwyneth Llewelyn: /* Example #1 — using <script src= and .innerHTML= */ Moving to ; replacing some of the (bit-rotten) links

Gwyneth Llewelyn: /* Development hints */ Replaced by inline — much cooler!

Gwyneth Llewelyn: /* Make TinyURLs by script */ Added `to the URLs and tried to get better indentation`

Gwyneth Llewelyn: /* Development hints */ Replaced `by inline — much cooler!`