User:Book: Difference between revisions

From LifeWiki
Jump to navigation Jump to search
← Older editNewer edit →
Book (talk | contribs)
Trusted users
8,810 edits
Replaced content with "{{EmbedViewer |rle = 3o$o2bo12bo$3o3b3o2b3o2bobo$o2bo2bobo2bobo2b2o$3o3b3o2b3o2bobo! |position = center |viewerconfig = #C THUMBSIZE 2 |caption = Lifespan 4..."
Tag: Replaced
Line 8: Line 8:
=Under Construction=
=Under Construction=
This is my sandbox.
This is my sandbox.
=Tutorial/LifeViewer Plug-in=
==Getting Started: Download the LifeViewer plug-in==
*Use this link: [http://lazyslug.com/lifeview/plugin/js/release/ download]
*The javascript code will be displayed in your browser
*Do a "Save" or "Save as..." and save lv-plugin.js where you want it
*In this tutorial, we assume the plug-in is in the same folder as your html file
==Lesson 1: Hello World--web page with glider in viewer==
[[image:tutoriallvpluginex1.png|framed|350px]]
*A simple web page with a glider in a LifeViewer
*Paste the code below in your text editor, save it and run it
<pre>
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;meta name="LifeViewer" content="viewer textarea"> &lt;!--required tag-->
&lt;script src="lv-plugin.js">&lt;/script> &lt;!--assumes plug-in is in the same directory as html file-->
&lt;/head>
&lt;body>
&lt;!--viewer container-->
&lt;div class="viewer"> &lt;!--class=viewer is required-->
&lt;textarea>bo$2bo$3o!&lt;/textarea>&lt;br/> &lt;!--textarea required in viewer container, with glider rle-->
&lt;canvas></canvas> &lt;!--canvas required in viewer container-->
&lt;/div>
&lt;!--end viewer container-->
&lt;/body>
&lt;/html>
</pre>
==Lesson 2: Add some style==
[[image:tutoriallvpluginex2.png|framed|350px]]
*Size the textarea, change font, make it non-resizable
*Size viewer by sizing canvas using inline width and height attributes (not CSS)
*Align viewer and textarea
*Note the textarea needs to be a few pixels narrower to properly align
<pre>
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;meta name="LifeViewer" content="viewer textarea"> &lt;!--required tag-->
&lt;script src="lv-plugin.js">&lt;/script> &lt;!--assumes plug-in is in the same directory as html file-->
&lt;style>
body{
margin:50px;
}
.lv-rle{
font:12pt arial;
resize:none;
width:594px;
min-height:120px;
max-height:120px;
}
&lt;/style>
&lt;/head>
&lt;body>
&lt;!--viewer container-->
&lt;div class="viewer">
&lt;textarea class="lv-rle">bo$2bo$3o!&lt;/textarea>&lt;br/> &lt;!--added classname for styling-->
&lt;canvas height=400 width=600>&lt;/canvas> &lt;!--added width and height attributes for viewer-->
&lt;/div>
&lt;!--end viewer container-->
&lt;/body>
&lt;/html>
</pre>
==Lesson 3: Update viewer with user input==
[[image:tutoriallvpluginex3.png|framed|350px]]
*Add control buttons to clear the textarea and update the viewer with user-entered rle
*The rle may be entered manually or pasted into the textarea
*The element that calls the updateMe function (button, link, whatever) must be inside the viewer container
<pre>
&lt;meta name="LifeViewer" content="viewer textarea"> &lt;!--required tag-->
&lt;script src="lv-plugin.js">&lt;/script> &lt;!--assumes plug-in is in the same directory as html file-->
&lt;style>
body{
margin:50px;
}
button{
font:12pt arial;
}
.lv-rle{
resize:none;
width:594px;
min-height:120px;
max-height:120px;
font:12pt arial;
}
.lv-buttons{
margin-bottom:4px;
}
&lt;/style>
&lt;/head>
&lt;body>
&lt;!--viewer container-->
&lt;div class="viewer">
&lt;div class="lv-buttons">
&lt;button onclick="document.getElementById('lv-text').innerHTML=''">Clear&lt;/button>
&lt;button onclick="updateMe(this)">Show in Viewer&lt;/button>
&lt;!--the element that calls updateMe must be in the viewer container-->
&lt;/div>
&lt;textarea class="lv-rle" id="lv-text">o2bo3bo$o2bobobo$4o3bo$o2bobo$o2bobobo!&lt;/textarea>&lt;br/>
&lt;canvas height=400 width=600>&lt;/canvas>
&lt;/div>
&lt;!--end viewer container-->
&lt;/body>
&lt;/html>
</pre>
==Lesson 4: Hide the textarea==
[[image:tutoriallvpluginex4.png|framed|350px]]
*Used when you only want to display a specific pattern in a LifeViewer
*This is done my moving the textarea containing the rle off the visible page using absolute positioning and setting the top to a negative number
*The textarea tag must remain inside the viewer container
<pre>
&lt;meta name="LifeViewer" content="viewer textarea"> &lt;!--required tag-->
&lt;script src="lv-plugin.js">&lt;/script> &lt;!--assumes plug-in is in the same directory as html file-->
&lt;style>
body{
margin:50px;
}
.lv-rle{
position:absolute;
top:-1000px;
}
&lt;/style>
&lt;/head>
&lt;body>
&lt;!--viewer container-->
&lt;div class="viewer">
&lt;textarea class="lv-rle">bo$2bo$3o!&lt;/textarea>
&lt;!--hide the textarea by moving it off the visible page with css-->
&lt;!--note the textarea element's tag must stay within the viewer container-->
&lt;canvas height=400 width=600>&lt;/canvas>
&lt;/div>
&lt;!--end viewer container-->
&lt;/body>
&lt;/html>
</pre>
==Lesson 5: Tips &amp; Tricks==
*To disable user input in a textarea, add the readonly attribute: &lt;textarea readonly>whatever&lt;/textarea>
*You can put multiple LifeViewers on a single page; each must have its own &lt;div> container with its own &lt;textarea> and <canvas> inside
*RLEs can control the viewer using [[LifeViewer#Scripts|LifeViewer scripts]]

Revision as of 21:39, 20 November 2021

3o$o2bo12bo$3o3b3o2b3o2bobo$o2bo2bobo2bobo2b2o$3o3b3o2b3o2bobo! #C [[ THUMBSIZE 2 THEME 6 GRID GRIDMAJOR 0 SUPPRESS THUMBLAUNCH ]] #C [[ THUMBSIZE 2 ]]
Lifespan 4700
(click above to open LifeViewer)

Under Construction

This is my sandbox.

Retrieved from "https://conwaylife.com/w/index.php?title=User:Book&oldid=85421"