DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:sketchcanvas

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
plugin:sketchcanvas [2015-08-11 11:47]
msakuta created
plugin:sketchcanvas [2018-05-29 23:42] (current)
Klap-in [Installation]
Line 5: Line 5:
 author ​    : ​ Masahiro Sakuta author ​    : ​ Masahiro Sakuta
 email      :  ​ email      :  ​
-type       :  +type       : ​syntax, action 
-lastupdate : 2015-08-11 +lastupdate : 2015-09-12 
-compatible : Hrun+compatible : Hrun, Detritus
 depends ​   :  depends ​   : 
 conflicts ​ :  conflicts ​ : 
-similar ​   : edittable +similar ​   : edittable, svgedit 
-tags       : editing+tags       : editing, vector, graphics, paintbrush, sketch, pencil
  
-downloadurl:​ https://​github.com/​msakuta/​SketchCanvas/​archive/​DW-v0.1.0.zip+downloadurl:​ https://​github.com/​msakuta/​SketchCanvas/​archive/​dokuwiki.zip
 bugtracker : https://​github.com/​msakuta/​SketchCanvas/​issues bugtracker : https://​github.com/​msakuta/​SketchCanvas/​issues
-sourcerepo : https://​github.com/​msakuta/​SketchCanvas/​+sourcerepo : https://​github.com/​msakuta/​SketchCanvas/​tree/​dokuwiki
 donationurl: ​ donationurl: ​
  
-screenshot_img : +screenshot_img : http://​msakuta.github.io/​SketchCanvas/​media/​screenshot-dokuwiki.png
 ---- ----
  
Line 28: Line 28:
 ===== Installation ===== ===== Installation =====
  
-Install ​the plugin using the [[plugin:plugin|Plugin ​Manager]] ​and the download URL above, which points to latest version of the plugin. Refer to [[:​Plugins]] on how to install plugins manually.+Search and install ​the plugin using the [[plugin:extension|Extension ​Manager]]. Refer to [[:​Plugins]] on how to install plugins manually.
  
 +==== Prerequisites ====
 +
 +  * The client'​s browser must support HTML5 canvas.
 +
 +If any of your Wiki viewers may have legacy browsers that don't support HTML5, the sketches won't show up
 +for them. ((Probably we could make server-side renderer to show rasterized images for them, but it would
 +require extensive development. Even if we have done it, old browsers still wouldn'​t be able to edit.))
 ===== Examples/​Usage ===== ===== Examples/​Usage =====
  
-The sketches are included by <​skcanvas>​ tag.+The best way to see how it works is by seeing 
 +[[http://​dokuwiki-type90.rhcloud.com/​doku.php?​id=start|this live demo site]]. 
 + 
 +The sketches are included by %%<​skcanvas>​%% tag.
  
-When a <​skcanvas>​ tag is included, an edit button appears below it.+When a %%<​skcanvas>​%% tag is included, ​a sketch is rendered in place of the tag like an image link 
 +and an edit button appears below it.
  
 A new button is added to the toolbar in edit page for inserting new sketch. A new button is added to the toolbar in edit page for inserting new sketch.
Line 46: Line 57:
   </​skcanvas>​   </​skcanvas>​
  
-Box and arrows+A bit more complex source:
  
 <​code>​ <​code>​
Line 64: Line 75:
 </​code>​ </​code>​
  
 +Results in a figure like this:
  
 +{{http://​msakuta.github.io/​SketchCanvas/​media/​Example.png}}
 +
 +==== Paths ====
 +
 +Path tool is a versatile tool for sketching complex lines.
 +
 +  * Path can be collection of line segments or curved splines.
 +  * Path can have arrowheads on one or both ends.
 +
 +Below is actually rendered sketches converted to an image. (Source omitted)
 +
 +{{http://​imageshack.com/​a/​img540/​1420/​Ecx317.png}}
 +
 +==== Edit page ====
 +
 +You don't have to remember the syntax to use the sketches.
 +There'​s an edit button below each sketch.
 +
 +{{http://​msakuta.github.io/​SketchCanvas/​media/​EditButton.png}}
 +
 +Pressing the edit button brings you to the [[plugin:​sketchcanvas:​editor]] page.
 +
 +{{http://​msakuta.github.io/​SketchCanvas/​media/​EditButtonAfter.png}}
 +
 +==== New Sketch ====
 +
 +When you want to add a new sketch into a document, press new sketch button
 +in the toolbar in edit mode.
 +You can also edit existing sketch in the edit page by selecting a whole
 +%%< skcanvas >%% tag in the wikitext and pressing the button.
 +
 +{{http://​msakuta.github.io/​SketchCanvas/​media/​NewSketch.png}}
 +
 +==== Output to PDF ====
 +
 +This plugin works with [[plugin:​dw2pdf]] plugin to produce PDF with embedded
 +SketchCanvas documents.
 +To enable this feature with text elements in the canvas, you need to download
 +and place a font file named NotoSansCJKjp-Regular.otf from
 +https://​noto-website.storage.googleapis.com/​pkgs/​NotoSansCJKJP-hinted.zip
 +to phplib/ subdirectory.
 ===== Syntax ===== ===== Syntax =====
  
 The SketchCanvas syntax is a [[http://​yaml.org/​|YAML]] document. The SketchCanvas syntax is a [[http://​yaml.org/​|YAML]] document.
-All text between <​skcanvas>​ and </​skcanvas>​ must be valid YAML document.+All text between ​%%<​skcanvas>​%% and %%</​skcanvas>​%% must be valid YAML document.
  
 +Although you don't have to remember them, complete syntax definition can be found at [[plugin:​sketchcanvas:​syntax]].
 ===== Configuration and Settings ===== ===== Configuration and Settings =====
  
Line 77: Line 131:
  
 {{rss>​https://​github.com/​msakuta/​SketchCanvas/​commits/​dokuwiki.atom date}} {{rss>​https://​github.com/​msakuta/​SketchCanvas/​commits/​dokuwiki.atom date}}
 +
 +====== Motivation ======
 +
 +If a Wiki system could be a knowledge base that everyone can participate,​
 +it must be easy to edit **all** contents for everyone.
 +If it's not easy enough, people would end up using MS Word to write documents.
 +
 +We already have [[plugin:​edittable]] which makes table editing easy enough,
 +but it's still awkward to include sketches in a Wiki document.
 +
 +If you had a decent vector graphics editor such as Adobe Illustrator,​ Inkscape or
 +even Excel, you can only attach rasterized image files and other people couldn'​t
 +edit them unless the source is separately provided.
 +So I decided to make a format for sketches that meets the requirements:​
 +
 +  * It must be editable with the browser alone (if HTML5 compliant).
 +  * The source is provided as well as the sketch image.
 +  * The format is human readable and easy to compare with text diffs.
 +
 +There is the [[plugin:​svgedit]] plugin that can do similar things with SVG.
 +So why should I bother reinventing wheels?
 +
 +SketchCanvas is very different from SVG in several aspects:
 +
 +  * It can be embedded in the Wiki text rather than external image file.
 +  * It has very simple and easy-to-read syntax for humans.
 +  * The syntax is easy to compare and produce meaningful diffs.
 +  * Its functionality is intentionally very limited so that the source text cannot be too complex.
 +
 +The main purpose is to sketch quick ideas/​concepts and not doing artistic paintings.
 +
 +====== Roadmap ======
 +
 +Blue areas are planned but not implemented yet.
 +BTW, this image itself was created with SketchCanvas.
 +
 +{{http://​msakuta.github.io/​SketchCanvas/​media/​Roadmap.png}}
  
 === Known Bugs and Issues === === Known Bugs and Issues ===
Line 85: Line 176:
  
   * Increase number of types of primitives   * Increase number of types of primitives
- 
- 
plugin/sketchcanvas.1439286452.txt.gz · Last modified: 2015-08-11 11:47 by msakuta