User:Book: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| Line 15: | Line 15: | ||
*In this tutorial, we assume the plug-in is in the same folder as your html file | *In this tutorial, we assume the plug-in is in the same folder as your html file | ||
===Hello World--web page with glider in viewer=== | ===Lesson 1: Hello World--web page with glider in viewer=== | ||
*A simple web page with a glider in a LifeViewer | *A simple web page with a glider in a LifeViewer | ||
*Paste | *Paste the code below in your text editor, save it and run it | ||
[[image:tutoriallvpluginex1.png|350px]] | [[image:tutoriallvpluginex1.png|350px]] | ||
<pre> | <pre> | ||
| Line 29: | Line 29: | ||
<!--viewer container--> | <!--viewer container--> | ||
<div class="viewer"> <!--class=viewer is required--> | <div class="viewer"> <!--class=viewer is required--> | ||
<textarea>bo$2bo$3o!</textarea><br/> <!--textarea required in viewer container--> | <textarea>bo$2bo$3o!</textarea><br/> <!--textarea required in viewer container, with glider rle--> | ||
<canvas></canvas> <!--canvas required in viewer container--> | <canvas></canvas> <!--canvas required in viewer container--> | ||
</div> | </div> | ||
| Line 37: | Line 37: | ||
</pre> | </pre> | ||
===Add some style=== | ===Lesson 2: Add some style=== | ||
*A simple web page with a glider in a LifeViewer | *A simple web page with a glider in a LifeViewer | ||
*Paste this in your text editor, save it and run it | *Paste this in your text editor, save it and run it | ||
[[image:tutoriallvpluginex2.png|350px]] | |||
<pre> | <pre> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
| Line 57: | Line 58: | ||
max-height:120px; | max-height:120px; | ||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
Revision as of 19:47, 18 November 2021
| Lifespan 4700 (click above to open LifeViewer) |
Under Construction
This is my sandbox.
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
- 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
- A simple web page with a glider in a LifeViewer
- Paste this 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-->
<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 with and height attributes for viewer-->
</div>
<!--end viewer container-->
</body>
</html>