User:Book: Difference between revisions

From LifeWiki
Jump to navigation Jump to search
← Older edit
Book (talk | contribs)
Trusted users
8,810 edits
No edit summary
No edit summary
 
(55 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{EmbedViewer
{|
|rle = 3o$o2bo12bo$3o3b3o2b3o2bobo$o2bo2bobo2bobo2b2o$3o3b3o2b3o2bobo!
|{{EmbedViewer
|rle         = 3o$o2bo12bo$3o3b3o2b3o2bobo$o2bo2bobo2bobo2b2o$3o3b3o2b3o2bobo!
|position    = center
|position    = center
|viewerconfig = #C [[ THUMBSIZE 2 ]]
|viewerconfig = #C [[ THUMBSIZE 2 ]]
|caption      = Lifespan 4700
|caption      = Lifespan 4700
}}
}}
==Under Construction==
|}
This is my sandbox.


==Getting started==
[https://catagolue.hatsya.com/object/xp0_book/b3s23 xp0_book]
===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===
*[[User:Book/Sandbox|My sandbox]]
*A simple web page with a glider in a LifeViewer
*[[User:Book/Sandbox/WIP]]
*Paste the code below in your text editor, save it and run it
*[[User:Book/Sandbox/WIP2]]
[[image:tutoriallvpluginex1.png|350px]]
<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===
==Principles for Editing the Wiki==
*Size the textarea, change font, make it non-resizable
*The wiki should be authoritative and substantive
*Size viewer by sizing canvas using inline width and height attributes (not CSS)
*The wiki should be welcoming to the uninitiated and casual user as well as the expert
*Align viewer and textarea
*Err on the side of explaining concepts and terminology
*Note the textarea needs to be a few pixels narrower to properly align
*Err on the side of giving/showing examples
[[image:tutoriallvpluginex2.png|350px]]
*CGOL is visual: show stuff
<pre>
*Avoid dead links as much as possible (shed the red)
&lt;!DOCTYPE html>
*Upload missing pattern static images
&lt;html>
===Missing image report===
&lt;head>
{{Purge}} {{#dpl:category=Pages with broken file links|notnamespace=User|notnamespace=Talk}}
&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===
==Toolkit==
*Add control buttons to clear the textarea and update the viewer with user-entered rle
[https://golhobby.com/ Use these tools here]
*The rle may be entered manually or pasted into the textarea
*Pattern Manager (PatMan)
*The element that calls the updateMe function (button, link, whatever) must be in the viewer container
**Organize your patterns
[[image:tutoriallvpluginex3.png|350px]]
**View them in LifeViewer
<pre>
*Pattern Lookup
&lt;meta name="LifeViewer" content="viewer textarea"> &lt;!--required tag-->
**Look up a pattern by name and/or apgcode
&lt;script src="lv-plugin.js">&lt;/script> &lt;!--assumes plug-in is in the same directory as html file-->
**View it in Catagolue
&lt;style>
**View it in LifeWiki
body{
**View it in LifeViewer
margin:50px;
**Get its RLE
}
*Tidy RLE
button{
**Replaces enhanced RLE characters with o's and b's
font:12pt arial;
**Removes trailing b's from rows
}
**Compresses repeating characters (e.g. 3ooo2o becomes 7o)
.lv-rle{
**Assures each line is ≤70 characters but as close to 70 as possible and does not end in a number
**Calculates bounding box
resize:none;
*IMG to RLE - get an RLE from a pattern image
width:594px;
*RLE to PNG - get a static png file from an RLE
min-height:120px;
*RLE to SVG - get a static svg file from an RLE
max-height:120px;
*RLE to Plaintext - convert an RLE to plaintext
font:12pt arial;
*Plaintext to 2RLE - convert plaintext to an RLE
}
**Also handles 1 and 0 as well as O and .
.lv-buttons{
**Also handles Life 1.05 (* and .)
margin-bottom:4px;
*Apgcode to PNG - get a static png file from an apgcode
}
*Apgcode to RLE - convert an apgcode to an RLE
&lt;/style>
*Integer to Life Digits RLE - convert an integer to a Life Digits RLE
&lt;/head>
*Frequency Class Calculator
&lt;body>
*Frequency Calculator (from FC)
&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===
*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 in the viewer container
[[image:tutoriallvpluginex4.png|350px]]
<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 vizible page with css-->
&lt;!--not the textarea elemt's tag must stay within the viewer containr-->
&lt;canvas height=400 width=600>&lt;/canvas>
&lt;/div>
&lt;!--end viewer container-->
&lt;/body>
&lt;/html>
</pre>

Latest revision as of 20:06, 17 February 2023

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)

xp0_book

Principles for Editing the Wiki

  • The wiki should be authoritative and substantive
  • The wiki should be welcoming to the uninitiated and casual user as well as the expert
  • Err on the side of explaining concepts and terminology
  • Err on the side of giving/showing examples
  • CGOL is visual: show stuff
  • Avoid dead links as much as possible (shed the red)
  • Upload missing pattern static images

Missing image report

Purge the cache of this page or consider doing a null edit

Toolkit

Use these tools here

  • Pattern Manager (PatMan)
    • Organize your patterns
    • View them in LifeViewer
  • Pattern Lookup
    • Look up a pattern by name and/or apgcode
    • View it in Catagolue
    • View it in LifeWiki
    • View it in LifeViewer
    • Get its RLE
  • Tidy RLE
    • Replaces enhanced RLE characters with o's and b's
    • Removes trailing b's from rows
    • Compresses repeating characters (e.g. 3ooo2o becomes 7o)
    • Assures each line is ≤70 characters but as close to 70 as possible and does not end in a number
    • Calculates bounding box
  • IMG to RLE - get an RLE from a pattern image
  • RLE to PNG - get a static png file from an RLE
  • RLE to SVG - get a static svg file from an RLE
  • RLE to Plaintext - convert an RLE to plaintext
  • Plaintext to 2RLE - convert plaintext to an RLE
    • Also handles 1 and 0 as well as O and .
    • Also handles Life 1.05 (* and .)
  • Apgcode to PNG - get a static png file from an apgcode
  • Apgcode to RLE - convert an apgcode to an RLE
  • Integer to Life Digits RLE - convert an integer to a Life Digits RLE
  • Frequency Class Calculator
  • Frequency Calculator (from FC)
Retrieved from "https://conwaylife.com/w/index.php?title=User:Book&oldid=125120"