Differences

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

--- plugin:sketchcanvas [2015-08-11 14:41] – [SketchCanvas Plugin] Add a screenshot msakuta
+++ plugin:sketchcanvas [2024-01-07 16:37] (current) – Add support for Hogfather, Igor and Jack Jackrum msakuta
@@ Line 5: / Line 5: @@
 author     :  Masahiro Sakuta
 email      :
-type       :
+type       : syntax, action
-lastupdate : 2015-08-11
+lastupdate : 2024-01-08
-compatible : Hrun
+compatible : Hrun, Detritus, Greebo, Hogfather, Igor, Jack Jackrum
 depends    :
 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
 sourcerepo : https://github.com/msakuta/SketchCanvas/tree/dokuwiki
@@ Line 28: / Line 28: @@
 ===== 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 ====
@@ Line 39: / Line 39: @@
 ===== Examples/Usage =====
-The sketches are included by <skcanvas> tag.
+The best way to see how it works is by seeing
+<del>this live demo site</del> Demo site is dead!
-When a <skcanvas> tag is included, an edit button appears below it.
+The sketches are included by %%<skcanvas>%% tag.
+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.
@@ Line 75: / Line 79: @@
 {{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 =====
 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 =====
@@ Line 87: / Line 131: @@
 {{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 ======
@@ Line 102: / Line 176: @@
   * Increase number of types of primitives