Tutorials/LifeViewer JavaScript plug-in

From LifeWiki
Jump to navigation Jump to search

The LifeViewer Javascript Plug-in lets you use LifeViewer in you own web pages.

Getting Started: Download the LifeViewer plug-in

  • Use this link: 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

Tutoriallvpluginex1.png
  • A simple web page with a glider in a LifeViewer
  • Paste the code below in your text editor, save it and run it
<!DOCTYPE html>
<html>
<head>
<meta name="LifeViewer" content="viewer textarea"> <!--required tag-->
<script src="lv-plugin.js"></script> <!--assumes plug-in is in the same directory as html file-->
</head>
<body>
<!--viewer container-->
<div class="viewer"> <!--class=viewer is required-->
	<textarea>bo$2bo$3o!</textarea><br/> <!--textarea required in viewer container, with glider rle-->
	<canvas></canvas> <!--canvas required in viewer container-->
</div>
<!--end viewer container-->
</body>
</html>

Lesson 2: Add some style

Tutoriallvpluginex2.png
  • 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
<!DOCTYPE html>
<html>
<head>
<meta name="LifeViewer" content="viewer textarea"> <!--required tag-->
<script src="lv-plugin.js"></script> <!--assumes plug-in is in the same directory as html file-->
<style>
body{
	margin:50px;
}
.lv-rle{
	font:12pt arial;
	resize:none;
	width:594px;
	min-height:120px;
	max-height:120px;
}
</style>
</head>
<body>
<!--viewer container-->
<div class="viewer"> 
	<textarea class="lv-rle">bo$2bo$3o!</textarea><br/> <!--added classname for styling-->
	<canvas height=400 width=600></canvas> <!--added width and height attributes for viewer-->
</div>
<!--end viewer container-->
</body>
</html>

Lesson 3: Update viewer with user input

Tutoriallvpluginex3.png
  • 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
<!DOCTYPE html>
<html>
<head><meta name="LifeViewer" content="viewer textarea"> <!--required tag-->
<script src="lv-plugin.js"></script> <!--assumes plug-in is in the same directory as html file-->
<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;
}
</style>
</head>
<body>
<!--viewer container-->
<div class="viewer"> 
	<div class="lv-buttons"> 
		<button onclick="document.getElementById('lv-text').innerHTML=''">Clear</button>
		<button onclick="updateMe(this)">Show in Viewer</button>
		<!--the element that calls updateMe must be in the viewer container-->
	</div>
	<textarea class="lv-rle" id="lv-text">o2bo3bo$o2bobobo$4o3bo$o2bobo$o2bobobo!</textarea><br/>
	<canvas height=400 width=600></canvas>
</div>
<!--end viewer container-->
</body>
</html>

Lesson 4: Hide the textarea

Tutoriallvpluginex4.png
  • 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
<!DOCTYPE html>
<html>
<head><meta name="LifeViewer" content="viewer textarea"> <!--required tag-->
<script src="lv-plugin.js"></script> <!--assumes plug-in is in the same directory as html file-->
<style>
body{
	margin:50px;
}
.lv-rle{
	position:absolute;
	top:-1000px;
}
</style>
</head>
<body>
<!--viewer container-->
<div class="viewer"> 
	<textarea class="lv-rle">bo$2bo$3o!</textarea>
	<!--hide the textarea by moving it off the visible page with css-->
	<!--note the textarea element's tag must stay within the viewer container-->
	<canvas height=400 width=600></canvas>
</div>
<!--end viewer container-->
</body>
</html>

Lesson 5: Tips & Tricks

  • To disable user input in a textarea, add the readonly attribute: <textarea readonly>whatever</textarea>
  • You can put multiple LifeViewers on a single page; each must have its own <div> container with its own <textarea> and <canvas> inside
  • RLEs can control the viewer using LifeViewer scripts


Tutorials
Starting out
Software
Search methods
Python
Other Cellular Automata
Retrieved from "https://conwaylife.com/w/index.php?title=Tutorials/LifeViewer_JavaScript_plug-in&oldid=85443"