+documentation page on project web-page
[liquid-graphic] / www / documentation.html
diff --git a/www/documentation.html b/www/documentation.html
new file mode 100755 (executable)
index 0000000..af1200a
--- /dev/null
@@ -0,0 +1,79 @@
+<html>
+<head>
+<link href="style.css" rel="stylesheet" type="text/css">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
+<title>Liquid - Funny graphic editor.</title>
+</head>
+<body>
+<div id="layout">
+<div class="header">
+       <h1 class="logo"><a href="http://liquid-graphic.garage.maemo.org" title="Liquid">Liquid<a></h1>
+       
+</div>
+
+<div id="menu" class="box">
+       <ul>
+               <li><a href="index.html">Home</a></li>
+               <li><a href="documentation.html">Documentation</a></li>
+               <li><a href="downloads.html">Downloads</a></li>
+               <li><a href="development.html">Development</a></li>  
+       </ul>
+</div><br>
+
+<div id="container">
+       <div class="content">
+               <h2>Documentation</h2>
+               <h3>Menu</h3>
+               <ul>
+                       <li><b>Menu File</b><img class="doc_img" src="img/Tools.png" align="right" width="150px">
+                       <ul>
+                               <li><b>New</b> - create new empty image</li>
+                               <li><b>Open</b> - open local graphic image</li>
+                               <li><b>Save</b> - save image with current format and name</li>
+                               <li><b>Save As</b> - save image with given name and png format</li>
+                               <li><b>Exit</b> - close application</li>
+                       </ul>                        
+                       </li>
+                       <li><b>Menu Mode</b>
+                       <ul>
+                               <li><b>Accelerometer</b> - turn on/off accelerometer mode (see below)</li>
+                       </ul>                        
+               </ul>
+               <h3>Tools</h3>
+               <ul>
+                       <li><b>Brush</b> - simple brush such as in Paint</li>
+                       <li><b>Color Tool</b> - use it for selection necessary brush color</li>
+                       <li><b>Drop</b> - analog of eraser in graphic editors</li>
+                       <li><b>Ice</b> - local Blur effect</li>
+                       <li><b>Fullscreen Mode</b> - turn on/off fullscreen mode</li>
+               </ul>       
+               <h3>Drawing Modes</h3>
+               <ul>
+                       <li><b>Accelerometer Mode</b> - in this mode control of any tools is implemented using 
+                               accelerometer of device. To move brush in this mode, you must tilt a tablet in space.</li>
+                       <ul>
+                               <li><b>Drawing: </b> to draw in this mode you must touch and hold touchscreen in right bottom corner (see screenshot) </li>
+                               <img class="doc_img" src="img/Finger.png" aligh="center" width="350px">
+                       </ul>
+                       <li><b>Touchscreen Mode</b> - in this mode control of any tools is implemented using touchscreen.</li>                  
+               </ul>    
+               <h3>Additional Features</h3>         
+               <ul>
+                       <li><b>Clearing workspace</b> - to clear workspace you must shake device on X axis: </li>
+                       <img src="img/X.png" aligh="center" width="180">
+                       <li><b>Blur</b> - to implement Blur effect on all workspace you must shake device on Y axis: </li>
+                       <img src="img/Y.png" aligh="center" width="400">
+                       <li><b>Switch Modes</b> - switch between drawing modes (Accelerometer/Touchscreen) is implemented by shaking device on Z axis:</li>
+                       <img src="img/Z.png" aligh="center" width="180">
+                       <li><b>Brush Size</b> - to change brush size you must touch brush and wait until popup menu appears:
+                       <img class="doc_img" src="img/popup.png" width="350">                   
+               </ul>    
+               <br>
+       </div>
+</div>
+<div id="footer">
+       <span class="f-right">&copy; 2010 <a href="mailto:maemo-sensors@cs.karelia.ru?subject=Liquid">Liquid</a> </span>                
+</div>
+</div>
+</body>
+</html>