README.md
1# SketchCanvas
2A simple HTML5 figure editor and viewer
3
4
5## Objectives
6
7Create a simple figure format that can replace Microsoft Word figures in
8web documents.
9
10It aims to have following features:
11
12* Easily editable in-place by GUI.
13* Easily embeddable into Wiki pages, blogs and design documents.
14* Can be easily copy & pasted to another document.
15* Unlike SVG, no complex graphics features are supported
16* Has a text format that is easily examined and edited by human.
17* Can also be saved as a separate text file.
18* Can be easily compared with text-wise diff.
19* Has extensible format.
20
21
22## Current implementation
23
24Current implementation uses YAML as format.
25It enables easy inspection and editing by humans.
26
27It can be edited by a static HTML document with JavaScript.
28It's so easy to setup a server that accepts and shows uploaded figures.
29
30It's very easy to create a figure or a diagram like this one:
31
32
33
34
35
36
37The source looks like this:
38
39~~~ yaml
40- type: line
41 points: '485,569:233,536'
42- type: line
43 points: '605,546:478,421'
44- type: line
45 points: '382,147:264,303'
46 color: blue
47- type: line
48 points: '630,139:639,272'
49 color: green
50- type: line
51 points: '763,153:492,244'
52 color: green
53 width: 2
54- type: line
55 points: '720,142:435,209'
56 color: green
57 width: 3
58- type: arrow
59 points: '134,115:372,269'
60 color: green
61 width: 3
62- type: text
63 points: '583,343'
64 text: Normal Text
65- type: text
66 points: '583,369'
67 width: 2
68 text: Bold Text
69- type: text
70 points: '588,392'
71 width: 3
72 text: Extra Bold Text
73- type: text
74 points: '589,424'
75 color: red
76 width: 3
77 text: Red Extra Bold Text
78- type: arcarrow
79 points: '577,364:264,390:583,387'
80 color: green
81 width: 2
82- type: ellipse
83 points: '567,399:784,435'
84 color: blue
85 width: 2
86
87~~~
88
89## Server-side SketchCanvas renderer
90
91SketchCanvas documents can be rendered in the server if the server
92has a PHP running with GD extension.
93You have to download a file named "NotoSansCJKjp-Regular.otf" from
94the URL below and place it under "phplib" directory in the server
95in order to enable this feature.
96
97https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKJP-hinted.zip
98
99This feature can be used to embed sketches into a PDF in conjunction with
100DokuWiki's dw2pdf plugin.
101
