• Home
  • History
  • Annotate
Name Date Size #Lines LOC

..24-May-2022-

images/H22-Mar-2020-

media/H22-Mar-2020-

phplib/H22-Mar-2020-1,5151,020

script/H22-Mar-2020-2,9962,364

LICENSEH A D21-Mar-20201.1 KiB2217

README.mdH A D21-Mar-20202.3 KiB10180

action.phpH A D21-Mar-20207.3 KiB202132

makezip.shH A D21-Mar-2020123 21

plugin.info.txtH A D21-Mar-2020252 87

script.jsH A D21-Mar-2020154 40

style.lessH A D21-Mar-2020127 65

syntax.phpH A D21-Mar-20204.3 KiB11677

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![Screenshot](media/threads.png)
33
34
35![Screenshot](media/screenshot.png)
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