Subversion Repositories wimsdev

Rev

Rev 18218 | Rev 18606 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
16849 obado 1
# Canvasdraw changes log
2
## TODO :
3
- sort out the global/local variable mess...and reorganize headerfile
17576 obado 4
	 : zooming and grid: scaling needs to be more adaptive! (use constant amount of grid lines)
18155 schaersvoo 5
## 2024
18218 schaersvoo 6
* 23/5/2024: add 'exp' to "to_js_math()"
18571 bpr 7
* 1/5/2024:  command "dashtype" was gone fishing...there must be a much better way of dealing with prefix "dash"...
18160 schaersvoo 8
* 31/4/2024: work in progress: rewrite reset,noreset !
18155 schaersvoo 9
* 28/4/2024: prefix "dash" may be used by all 'dashable' objects
18571 bpr 10
	     which is an overload on 'dashable' syntax !!
18155 schaersvoo 11
	     use commands "noreset" and "dashed" to 'dash' all following objects...until command 'reset'
12
	     size 200,200
13
	     xrange -10,10
14
	     yrange -10,10
15
	     noreset
16
	     dashed
17
	     hline ...
18
	     vline ...
19
	     polyline ...
20
	     rect ...
21
	     circle ...
22
	     reset
23
	     etc etc
18071 schaersvoo 24
* 1/3/2024: quick fix for halfline
25
## 2023
17586 schaersvoo 26
* 23/2/2023: minor improvement for sub/sup routine for command family strings (use of space is optional)
17583 schaersvoo 27
* 22/2/2023: snaptopoints may be called multiple times (no limit) And restored MAX_INT to 128 (but it's open for change, anyway)
17581 bpr 28
* 22/2/2023: increase the limit MAX_INT to 256
17576 obado 29
* 21/2/2023: canvasmultidraw now place object with relative coords (%) instead of absolute (px)
17518 schaersvoo 30
* 13/1/2023: corrected flaw in external images 'copy & drag/drop'
16849 obado 31
## 2022
17425 schaersvoo 32
* 28/8/2022: added command "newrange xmin,xmax,ymin,ymax" see https://wimsedu.info/?topic=dessiner-des-portions-de-fonctions-sur-un-meme-graphe
16942 schaersvoo 33
* 01/8/2022: getMouse(),latest improvements related to 'reponsiveness' will fatally lockup browsers in the pixel-by-pixel filling...at least in userdraw clickfill
16920 schaersvoo 34
* 19/7/2022: checked and corrected 'dashed' objects like arc,arrowarc,ellipse...
17581 bpr 35
* 16/7/2022: solved long standing issue of dashed arrow(s) and dashed arrow(s)2
17576 obado 36
* 06/7/2022: clearbutton preserves div's with '<' && '/>' and objects placed with `placed_image_on_canvas(id)` e.g. with `id = placed*`
16910 schaersvoo 37
* 05/7/2022: corrected flaw in 'clearbutton' https://wimsedu.info/?topic=geometrie-interactive-avec-canvasdraw
16892 schaersvoo 38
* 05/7/2022: command 'group' :
39
	- still some issues with direct clicks on group members (NaN due to competing mouselisteners)
40
	- removed 'debug newlines'
41
	- external images -via command 'copy' NOT supported (too much trouble)
42
	- need to add 'copy' to dragstuff library or introduce another command...
16872 schaersvoo 43
* 26/6/2022: added keyword 'group' : provides mouse-driven movements of all objects after keyword 'group' until keyword 'kill group;
44
	- may be combined with 'slider' to move or rotate single objects or grouped objects
45
	- may not be combined with command 'drag xy' (mouse listeners are already occupied...)
46
	- may be combined with command 'onclick'
16882 schaersvoo 47
	- added objects created by command 'latex' to grouping (todo : external images etc)
16872 schaersvoo 48
 
16849 obado 49
* 23/6/2022: corrected drag&drop reply of external images (via command 'copy') when mixed with other external/internal objects...
50
 
51
	 	 #
52
	 	 size 400,400
53
	 	 xrange -10,10
54
	 	 yrange -10,10
55
	 	 grid 2,2,grey
56
	 	 linewidth 2
57
	 	 onclick
58
	 	 fcircle -6,6,50,red
59
	 	 onclick
60
	 	 fcircle -6,-6,50,green
61
	 	 noreset
62
	 	 snaptogrid
63
	 	 drag xy
64
	 	 centered
65
	 	 latex 0,0,\frac{12345}{23456} \times \frac{12345}{23456}
66
	 	 translate 4,4
67
	 	 html 0,0,<table style='border:solid red 2px'><tr><th>HTML TABLE</th></tr><tr><td><img src="gifs/en.gif" /></tr><tr><td><img src="gifs/nl.gif" /></tr><tr><td><img src="gifs/fr.gif" /></tr><tr><td><img src="gifs/cn.gif" /></tr><tr><td><img src="gifs/it.gif" /></tr></table>
68
	 	 userdraw arrow2,red
69
	 	 translate 8,8
70
	 	 copy 0,0,-1,-1,-1,-1,gifs/nl.gif
71
 
72
* 20/6/2022: Start to make canvasdraw responsive [OB] :
16845 bpr 73
	- reduce size on small screens,
74
	- use percentage instead of absolute positioning for xml/html/tex
75
	- convert mouse position coords on shrinked canvas
76
	- correct mouse coordinates when inside a scrolled wims_scrollable div
16849 obado 77
	- Replace "Ariel" font references by "Arial"
78
* 19/6/2022: added function plot to multidraw (https://wimsedu.info/?topic=userinput-function)
79
	command 'multidraw functions' will -for now- give just 2 inputfields... *TODO*: make configurable, so implement commands like 'multidraw functions5')
80
	for multiple function input fields, use multiple keywords 'function', e.g. something like:
81
	multidraw text,line,function,function,function,points
82
* 27/5/2022: added subsup to userdraw and multidraw 'text' (which is always 'centered' e.g use_offset=4)
17581 bpr 83
* 26/5/2022: corrected replyformat 100
16849 obado 84
* 23/5/2022: overriding fontfamily and use Helvetica as font for _sub ^sup  strings: all inline numbers are in script-size (80% eg the same as strings+numbers for sub/sup)
17581 bpr 85
* 21/5/2022: using 'scriptsize' imitation on sub / sup
16849 obado 86
* 20/5/2022: added a sub / sup imitation to the canvas 'string' command family
16700 schaersvoo 87
 
16849 obado 88
		size 400,400
89
		xrange -6,6
90
		yrange -6,6
91
		fontfamily 22px Arial
16700 schaersvoo 92
 
16849 obado 93
		# use single space for separation in formula...
94
		# use double space to create new word
95
		string red,-5,0,H_3 O^+ + OH^\u2212  \u2192 2H_2 O
16845 bpr 96
 
16849 obado 97
* 2/4/2022: added timeout fix for centering issue in case of MathJaX (draw_xml())
15758 schaersvoo 98
 
16849 obado 99
## 2021
100
* 14/4/2021: added flydraw command 'range xmin,xmax,ymin,ymax'
101
* 6/4/2021: corrected 'text objects' (from cmd's text/string) were not added to 'noreset', e.g. keyword 'noreset' was ignored...
17581 bpr 102
added a live example from E3/number/oefgraduation.fr
16849 obado 103
* 4/4/2021: corrected use of precompiler directive "KATEX_INSTALLED" (was not working...)
104
* 12/3/2021: add "version 0.5" to canvasdraw include file
105
* 23/2/2021:
15716 schaersvoo 106
added generic command 'kill argument'
107
work in progress
15717 schaersvoo 108
corrected wrong alternative command for jscurve
16849 obado 109
* 21/2/2021:
15715 schaersvoo 110
alternative commands now 'seachable' using js-function look()
16849 obado 111
* 19/2/2021:
15711 schaersvoo 112
slightly improved dashing of arrows (in dragstuff,userdraw & multidraw)
113
to test : other objects+dashing !
114
resetting dashing for the arrow head (head was also dashed...)
115
see https://wimsedu.info/?topic=dashed-arrows-not-dashed-in-canvasdraw
16849 obado 116
* 2/2/2021:
15690 schaersvoo 117
added command 'arcarrow|arrowarc', left,right,left/right
118
added commands 'arc','angle','arcarrow' to onclick and drag&drop
17581 bpr 119
* 17/1/2021:
15672 schaersvoo 120
corrected syntax issue in canvasmultidraw.c signalled by Opera Presto : 'forbidden function user_drawstop(evt) declaration in statement'*/
15674 schaersvoo 121
 
15673 schaersvoo 122
can not correct centering in case of MathJaX, in commands like
16849 obado 123
 
124
```
15672 schaersvoo 125
####
15673 schaersvoo 126
centered
15672 schaersvoo 127
math 0,0,\frac{1}{222}
128
####
16849 obado 129
```
130
 
15674 schaersvoo 131
Things get even worse when activating in exec.c the "Safari/MathJax bugfix : refresh display when document ready."
132
(besides the ridiculous delay !!)
133
You should really try KaTeX on these systems/browsers !!!
15672 schaersvoo 134
 
15673 schaersvoo 135
OEF example of the problem:
16849 obado 136
 
137
```
15672 schaersvoo 138
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
139
\text{m1=wims(mathmlmath \frac{12344}{\pi\pi\pi\pi^{\pi}})}
140
\text{m2=wims(mathmlmath \frac{\pi\pi\pi\pi^{\pi}}{\alpha})}
141
\text{m3=wims(mathmlmath \sqrt{\pi\pi\pi\pi^{\pi}})}
142
\text{m4=wims(mathmlmath \sqrt{\frac{1223}{3344}})}
143
 
144
\statement{
145
<script type="text/javascript">
146
 function read_canvas(){
147
   var fun = eval("read_canvas"+canvas_scripts[0]);
148
   if( typeof fun === 'function'){ return fun();};
149
 };
150
 function read_dragdrop(){
17581 bpr 151
   var fun = eval("read_dragdrop"+canvas_scripts[0]);
15672 schaersvoo 152
   if(typeof fun === 'function'){return fun();};
153
 };
154
 
155
</script>
156
<br/>
157
<span id="m1" onclick="javascript:place_image_on_canvas(this.id)" >\m1</span>
158
<span id="m2" onclick="javascript:place_image_on_canvas(this.id)" >\m2</span>
159
<span id="m3" onclick="javascript:place_image_on_canvas(this.id)" >\m3</span>
160
<span id="m4" onclick="javascript:place_image_on_canvas(this.id)" >\m4</span>
161
 
162
\canvasdraw{400,400}{
163
xrange -10,10
164
yrange -10,10
165
grid 1,1,grey
166
noreset
167
# use keyword 'noreset' to avoid using keyword 'centered' before every addition of objects !
168
centered
169
fontfamily Bold Italic 42pt Courier
170
# these images are internal the reply prefix is imagepalette_0, imagepalette_1... !!
171
imagepalette gifs/ca.gif,gifs/en.gif,gifs/nl.gif,gifs/fr.gif,gifs/cn.gif,gifs/de.gif,gifs/kh.gif,gifs/it.gif
172
multicolors red,green,blue,lightblue,cyan
173
multisnaptogrid 1,1,1,1,0
174
multilinewidth 0,4,0,3,1
175
multidraw text,arrow,images,points,lines
176
math -6,6,\frac{1}{\pi}
177
math -2,2,\frac{1}{\pi}
178
math 2,-2,\frac{1}{\pi}
179
math 6,-6,\frac{1}{\pi}
180
linewidth 3
181
points red,-6,6,-2,2,2,-2,6,-6
182
mouse red,22
183
}
184
 
185
 
186
These images are external...The reply id-prefix is "placed_0_'this.id'"
187
<table><tr>
188
<td><img src="gifs/ca.gif" onclick='javascript:place_image_on_canvas(this.id);' id="ca" /></td>
189
<td><img src="gifs/nl.gif" onclick='javascript:place_image_on_canvas(this.id);' id="nl" /></td>
190
<td><img src="gifs/en.gif" onclick='javascript:place_image_on_canvas(this.id);' id="en" /></td>
191
<td><img src="gifs/fr.gif" onclick='javascript:place_image_on_canvas(this.id);' id="fr" /></td>
192
<td><img src="gifs/cn.gif" onclick='javascript:place_image_on_canvas(this.id);' id="cn" /></td>
193
<td><img src="gifs/it.gif" onclick='javascript:place_image_on_canvas(this.id);' id="it" /></td>
194
<td><img src="gifs/kh.gif" onclick='javascript:place_image_on_canvas(this.id);' id="kh" /></td>
195
<td><img src="gifs/de.gif" onclick='javascript:place_image_on_canvas(this.id);' id="de" /></td>
196
</tr>
197
</table>
198
   <input type="button" onclick="alert(read_canvas());" value="read_canvas()" />
199
   <input type="button" onclick="alert(read_dragdrop());" value="read_dragdrop()" />
200
}
16849 obado 201
```
15672 schaersvoo 202
 
16849 obado 203
* 15/1/2021:
15665 schaersvoo 204
corrected long standing flaw regarding "centered" on external stuff...tested: bitmap,svg,TeX [on KaTeX]
15669 schaersvoo 205
corrected 'onclick' for 'draw_xml()'
15665 schaersvoo 206
 
17581 bpr 207
* 14/1/2021:
15657 schaersvoo 208
only on KaTeX enabled wims, a slider title may use TeX produced by command "mathmlmath"
16849 obado 209
 
210
* 13/1/2021:
15655 schaersvoo 211
slider title may use TeX produced by command "mathmlmath"
212
 
16849 obado 213
=> oef example...
214
 
215
```
15655 schaersvoo 216
\title{slider + tex title}
217
\text{A = \frac{1}{2}}
218
\text{B = \frac{1}{3}}
219
\text{C = \frac{1}{4}}
15657 schaersvoo 220
\text{a = \(\frac{1}{2}\)}
15655 schaersvoo 221
\text{b = wims(mathmlmath \\Huge \\frac{1}{3} )}
222
\text{c = wims(mathmlmath \\Huge \\frac{1}{4} )}
223
\text{canvas=wims(exec canvasdraw
224
size 400,400
225
xrange -10,10
226
yrange -10,10
16849 obado 227
fontfamily 38px Arial
15655 schaersvoo 228
opacity 255,40
229
grid 1,1,grey
230
strokecolor red
15657 schaersvoo 231
slider -10,10,400,50,x active,\( \frac{1}{2} \)
15655 schaersvoo 232
frect -6,5,-4,-5,red
233
centered
234
latex -5,0,\A
235
killslider
236
strokecolor blue
237
slider -10,10,400,50,x active,\b
238
frect -6,5,-4,-5,blue
239
centered
240
latex -5,0,\B
241
killslider
242
strokecolor green
243
slider -10,10,400,50,x active,\c
244
frect -6,5,-4,-5,green
245
centered
246
latex -5,0,\C
247
killslider)
248
}
249
\statement{
250
canvas = \canvas
17581 bpr 251
}
16849 obado 252
```
15655 schaersvoo 253
 
16849 obado 254
* 8/1/2021:
15646 schaersvoo 255
added affine transformation to Fly text commmand analogue
15655 schaersvoo 256
 
16849 obado 257
* 3/1/2021:
15628 schaersvoo 258
added check on 'nan' in case of parametric curve
16849 obado 259
		size 260,220
260
		xrange 0,13
261
		yrange 0,11
262
		trange 0,2
263
		curve black,1/t,4*sin(t)
15540 schaersvoo 264
 
16849 obado 265
 
266
## 2020
267
* 29/12/2020:
15623 schaersvoo 268
disabled limitation of adding "curve points outside the visual ymin/ymax range" (parametric curves)
269
 
16849 obado 270
* 27/12/2020:
15611 schaersvoo 271
corrected command "parallel" , to be more compatible with flydraw & affine transformations
15613 schaersvoo 272
when a transformation is set  before command parallel...the lines may be set onclick or drag xy!
15611 schaersvoo 273
 
16849 obado 274
* 24/12/2020:
15601 schaersvoo 275
solved some issues with curve & affine/rotate...
16849 obado 276
see [https://wimstest1.di.u-psud.fr/wims/wims.cgi?lang=en&module=adm/doc&cmd=new&job=read&doc=1028&block=transform]()
15601 schaersvoo 277
 
16849 obado 278
```
15601 schaersvoo 279
size 200,200
280
xrange -5,5
281
yrange -5,5
282
linewidth 2
283
trange 0,1
284
curve blue,2*t,sin(2*pi*t)
285
affine 0,1,1,2,-1,1
286
trange 0,1
287
curve green,2*t,sin(2*pi*t)
16849 obado 288
```
15601 schaersvoo 289
 
16849 obado 290
* 22/12/2020:
291
command "fillpattern image_url" was gone fishing! `get_image_from_url()` needs to be called after function definition..
17581 bpr 292
* 16/11/2020:
16849 obado 293
	- added 'affine' to curve evaluation
15540 schaersvoo 294
 
16849 obado 295
	```
296
	size 220,220
297
	xrange -5,5
298
	yrange -5,5
299
	hline 0,0,black
300
	vline 0,0,black
301
	rotationcenter 0,0
302
	slider -2*pi,2*pi,200,28,angle degree active,Rotate
303
	linewidth 4
304
	curve blue,sin(x)
305
	affine 1,-0.2,-0.6,1,0,2
306
	curve red,sin(x)
307
	```
15540 schaersvoo 308
 
17581 bpr 309
* 13/11/2020:
16849 obado 310
	- added `safe_eval()` to userinput (using inputfields)
7614 schaersvoo 311
 
16849 obado 312
* 8/7/2020:
313
	- command `input x,y,size,readonly,value` gave canvaserror when 'value' was ommitted or a 'space'
314
	- corrected bug [https://wimsedu.info/?topic=bug-canvasdraw-et-ou-drawinput]()
315
		```
316
		case 4: temp = get_string(infile,1); --->  case 4: temp = get_string(infile,3);
317
		```
318
* 14/6/2020:
319
	- corrected bug in multidraw snaptopoints+curvedarrow
320
* 11/6/2020:
321
	- added 'touchend' to improve behaviour of touch devices in case 'userdraw' and 'multidraw' [TO TEST]
322
* 9/6/2020
323
	- touchend  not supported (eg lifting finger+tapping after dragging to signal some 'corner point')
324
	- in case of touch devices, use commands 'userinput' to enforce mathematical precise drawing and not finger painting...
325
	- function calc_lines(): 'multidraw lines' & 'userdraw line,color' returned (xmin:y1)--(xmax:y2)
326
	    that should have been (x1:y1)---(x2:y2) ...otherwise snaptogrid gives float values !
327
* 8/6/2020:
328
	- added command 'noreset' or 'killreset'
329
* 5/6/2020:
330
	- solved issue of sync loading of images (`command:html 0,0,<img src="modules/U2/geometry/oefrosoni.it/images/273x273/fig4.png"  />`)
331
 
332
	```
333
		size 400,400
334
		xrange -6,6
335
		yrange -6,6
336
		fontsize 40
337
		linewidth 1
17581 bpr 338
		slider -10,10,300,28,angle active degree,
16849 obado 339
		centered
340
		html 0,0,<img src="modules/U2/geometry/oefrosoni.it/images/273x273/fig4.png"  />
341
		killslider
342
		centered
343
		html 0,0,<img src="modules/U2/geometry/oefrosoni.it/images/273x273/fig4_ovr.png"  />
344
	```
345
 
346
	- commands math, katex, latex are identical
347
	- added compile time checking of 'katex.c' presence:
15111 schaersvoo 348
if present: use KaTeX for all browsers
349
if not present: use MathJaX (chrome) or native MathML (firefox)
16849 obado 350
	- TO DO: check if this actually works on non-KaTeX...
7614 schaersvoo 351
 
16849 obado 352
* 25/5/2020:
353
	- removed js-code for rotating (and transforming mouse-coordinates...) Now coordinates are transformed in C
354
	- slider, solved several issues (removed old slider stuff)
355
	- animated slider may be combined with manual/mouse slider
356
	- slider corrected for touch device
357
* 24/5/2020:
358
	- add keyword 'animate' to slider
7614 schaersvoo 359
 
16849 obado 360
	```
361
		size 300,300
362
		xrange -6,6
363
		yrange -6,6
364
		grid 1,1,grey
365
		linewidth 1
366
		slider 0,2*pi,300,28,angle animate active, no
367
		opacity 255,30
368
		ftriangle 2,2,-2,2,0,0,red
369
		ftriangle -2,2,-2,-2,0,0,blue
370
		ftriangle -2,-2,2,-2,0,0,green
371
		ftriangle 2,-2,2,2,0,0,orange
372
		rotationcenter 0,0
373
		frect -2,2,2,-2,black
374
	```
7614 schaersvoo 375
 
376
 
16849 obado 377
* 22/5/2020:
378
	- slider things...
379
* 21/5/2020:
380
	- minor changes: not yet really satisfied with combinations of xml+dragdrop+slider
381
	- some doc examples
382
* 20/5/2020:
383
	- slider reorganized:
384
	- restored all listeners on slider.(mousedown ,mousemove and mouseup)
385
	- update example 'angle': angle and arc are exceptions in case of sliders...they are always active (e.g. not click-activated)
386
	- added 'onclick=4' : in case of sliders ,no need for click-on-object to active the object--slider (important for objects covering each other)
387
 
388
* 18/5/2020:
389
	- restored interaction of commands 'arc' and 'angle' with sliders (specially Rotate)
390
	- drawxml() objects like katex,mathml,latex,html,obabel now interact identical as
15111 schaersvoo 391
    dragstuff library objects with slider...eg. 'first click'=select for sliders, 'second click' unselect sliders
16849 obado 392
    e.g.: `slidergroup[object_cnt] = obj or slidergroup[object_cnt] = null`
15111 schaersvoo 393
    selected sliders until 'killslider'
17581 bpr 394
 
16849 obado 395
    ```
396
	######################################################
397
	size 500,500
398
	xrange -6,6
399
	yrange -6,6
400
	grid 1,1,grey
401
	fontfamily 42px Arial
402
	opacity 255,60
403
	centered
404
	#drag xy
405
	snaptogrid
406
	slider -10,10,500,50,angle,R
407
	slider -10,10,500,50,x,X
408
	slider -10,10,500,50,y,Y
409
	# these objects act -if selected- on the above sliders
410
	katex 3,3,\frac{123}{123^{\pi}}
411
	centered
412
	obabel 0,0,smi,-:c1cccc1cc,-xb none -xP100
413
	filled
414
	fillcolor blue
415
	angle 0,0,4,0,0,red
416
	killslider
417
	linewidth 4
418
	slider -10,10,500,50,angle,Rotate rect
419
	# if selected this object will use only the above slider
420
	frect -5,5,-4,4,red
421
	##########################################################
422
	```
15271 bpr 423
 
16849 obado 424
* 15/5/2020:
425
	- further reduced size of 'plain' grid (like 'grid 1,1,grey')
426
	- using uniform "slidergroup[object_cnt] = object" to avoid difficulies with reply's of dragstuff/xml [IN PROGRESS]				         __
427
	- slider appearance changed to :  _____\/______________
7614 schaersvoo 428
 
16849 obado 429
	- xml-objects (katex/latex/mathml/html) and slider: onclick will activate slider for object and deactivate after second click
14071 bpr 430
 
16849 obado 431
	```
432
	size 500,500
433
	xrange -6,6
434
	yrange -6,6
435
	grid 1,1,grey
436
	fontfamily 42px Arial
437
	strokecolor red
438
	fillcolor orange
439
	#rotationcenter 0,0
440
	slider -12,12,500,50,angle,rotate
441
	katex 0,0,\frac{1}{2}
442
	katex 3,3,\frac{1}{3}
443
	katex -3,3,\frac{9}{3}
444
	#latex 0,0,\frac{1}{2}
445
	#latex 3,3,\frac{1}{3}
446
	#latex -3,3,\frac{9}{3}
447
	obabel 0,5,smi,-:c1cFccc1cc,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP100,-h
448
	html 3,-3,<img src='gifs/en.gif' />
449
	html 4,-2,<H2>OK?</H2>
450
	html -4,-2,<input size='4' value='?" />
451
	```
14071 bpr 452
 
16849 obado 453
	- added import of 'TD' and 'TH' elements with an unique 'id' and onclick='javascript:place_image_on_canvas(this.id)' to the canvas
14071 bpr 454
 
16849 obado 455
* 13/5/2020:
456
	- fixed several incompatibilities
457
	- moved legend_cnt,linegraph_cnt barchar_cnt variables (used by 'grid') to global. reducing the size of default grid
458
 
459
* 12/5/2020:
460
	- reorganized command copy/copyresized: reply is now js-object, identical to dragstuff library
461
	- onclick/drag of 'copy images' transparent integration with dragstuff objects onclick/drag and external XML material
462
	- slider is not supported for flydraw analogues copy/copyresized : use command `html x,y,<img src='gifs/en.gif' />`
463
	- IOS fixed (thx Olivier Obado)
464
	- renamed variable 'click_cnt' into 'object_cnt' : it counts all interactive (onclick,dragdrop,slider) objects and results
15111 schaersvoo 465
    in a uniform 'reply' object{}
14071 bpr 466
 
16849 obado 467
* 8/5/2020:
468
	- finished commands 'html','katex','latex','mathml' using draw_xml()
15271 bpr 469
    with 'html' virtually all material can be imported
15111 schaersvoo 470
    affine operations and sliders are supported
16849 obado 471
	- corrected reply & slider
472
* 6/5/2020:
473
	- added imported object to sliders [work in progress]
474
	- added rotation center to draw_xml(obj); [only for command katex]
475
* 5/5/2020:
476
	- changed draw_xml() to object, for importing svg,img,div,p,span,mathml,katex in canvasdraw
477
	- added transformation matrix to draw_xml(). Preparing for slider manipulation of imported objects
478
* 3/5/2020: corrected error avoiding multiple calls to 'obabel'
479
* 1/5/2020: killed 'stderr' default message from 'obabel' : "converted 1 molecule"
480
* 30/4/2020:
481
	- added command 'katex x,y,tex-string'
482
	- thus bypassing cludge between firefox/mathml/mathjax/katex
483
	- for traditional wims (using MathML) use command 'latex x,y,tex-string' or 'mathml x,y,xml-code'
484
	- for katex-only wims, use only 'katex'
485
	- solved 'centered' and 'snaptogrid' issues dealing with drag&drop of generated 'svg/mathml/xml/html/js-code'
486
	- added link to 'howto katex and wims'
7614 schaersvoo 487
 
16849 obado 488
* 21/4/2020:
489
	- using execvp() to call "obabel" , using $PATH
7614 schaersvoo 490
 
16849 obado 491
* 20/4/2020:
492
	- changed command 'smiles' into 'obabel'
493
	- now all formats may be used as input
494
	- obabel 5,5,mol,$module_dir/mymolfile.mol,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP180,-h
495
	- obabel -5,-5,smi,-:c1ccFccc1,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP180,-h
496
	- added check on 'forbidden argument' to call obabel
14071 bpr 497
 
16849 obado 498
* 18/4/2020:
499
	- added command 'smiles args' , calling -if installed- 'obabel' to produce an SVG image
500
	- added command 'chemtex' , adding "mhchem.js" for typesetting (needs to come first!)
501
	- chemtex: added bogus code for mathjax. THIS WILL ONLY WORK ON KATEX ENABLED WIMS !
502
 
503
```
15111 schaersvoo 504
chemtex
505
size 400,400
506
xrange -10,10
507
yrange -10,10
508
fillcolor green
509
grid 1,1,grey
510
drag xy
511
centered
512
smiles 5,5,-:c1cFccc1cc,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP180,-h
513
rotate 180
514
drag xy
515
centered
516
smiles -5,-5,-:c1cFccc1cc,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP180,-h
517
drag xy
518
rotate -90
519
centered
520
smiles -5,5,-:c1cFccc1cc,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP180,-h
521
zoom red
522
drag xy
523
killrotate
16849 obado 524
fontfamily 32px Arial
15271 bpr 525
latex 0,0,\frac{1}{2} \ce{H3O+}
16849 obado 526
```
7991 schaersvoo 527
 
16849 obado 528
* 15/3/2020:
529
	- command latex ; improve code...minor cosmetic things (need to test on android)
530
	- changed syntax command html : 'html x,y,some-html-code'
531
	- drag/drop centering for html/latex/mathml/images
532
 
533
```
15111 schaersvoo 534
size 500,500
535
xrange -10,10
536
yrange -10,10
537
grid 1,1,grey
538
linewidth 3
539
vline 0,0,green
540
hline 0,0,green
16849 obado 541
fontfamily 16px Arial
15111 schaersvoo 542
fillcolor red
543
strokecolor blue
544
drag xy
545
centered
546
latex 0,0,\frac{12345}{23456} \times \frac{12345}{23456}
547
drag xy
548
centered
549
latex 5,5,\frac{12345}{\frac{12345}{ \frac{12345}{12345}}}
550
centered
551
drag xy
552
html -5,5,<table border=1><tr><td>1234567</td></tr><tr><td>1234567</td></tr><tr><td>1234567</td></tr><tr><td>1234567</td></tr></table>
553
drag xy
554
centered
555
copy 5,-5,-1,-1,-1,-1,gifs/images/skull_and_crossbones50.png
556
centered
557
drag xy
558
html 5,0,<img src=gifs/images/skull_and_crossbones50.png />
16849 obado 559
```
7991 schaersvoo 560
 
561
 
16849 obado 562
* 13/3/2020:
563
	- corrected stupid error in default replyformat
564
	- added support for touch/android for 'drag_xml()' 'drag_external_images()'
565
	- unified onclick/drag&drop answer format for MathML,JS_TeX,bitmap-images,html5-canvas-objects
566
	- compiler warnings (BPR)
14071 bpr 567
 
16849 obado 568
* 10/3/2020:
569
	- command 'rotate angle (deg)' now works for 'draw_xml()' e.g. for commands like latex,mathml,html,video,audio etc
570
	- corrected drag&drop reply for external things...
8112 schaersvoo 571
 
16849 obado 572
* 7/3/2020:
573
	- command functionlabel is now converted to js-array "functionlabel f(x)=:g(x)=:h(x)=:f'(x)="
574
	- so multiple funtion inputs may all have different colours and function agruments
8112 schaersvoo 575
 
16849 obado 576
* 6/3/2020:
577
	- added alternative command 'userdraw function,color' , is identical to 'userinput function'
578
	- added alternative command 'userdraw functions[n],color' , is identical to n-times 'userinput function' (n=1..9)
579
	- command 'multistrokecolors' or 'multicolors' may be used for setting  function argument/plot colour
14071 bpr 580
 
16849 obado 581
* 15/2/2020:
582
	- corrected flaw in drawing+zooming+multiple jscurves
583
	- userinput for arrows and polylines (forgotten and corrected)
584
	- zooming js-curves created by 'userinput function' (or should it be 'userdraw function'?...)
15111 schaersvoo 585
    will adapt to new x/y-ranges after re-clicking the 'draw' or 'OK' button. This is a flaw and not a feature !!
586
 
16849 obado 587
* 13/2/2020:
588
	- corrected stuff related to 'onclick'
589
	- corrected combo of clickreply+dragreply
15111 schaersvoo 590
 
16849 obado 591
* 11/2/2020:
592
	- corrected commands 'arc' and 'angle'
593
	- reset() will not reset the 'use_rotate' eg only 'killrotate' will set 'angle = 0.0'
594
	- default css_class="none"
595
	- corrected flaw in command 'input' ('style' is no longer needed...-> css)
15111 schaersvoo 596
 
16849 obado 597
* 9/2/2020:
598
	- restored command 'userinput function|inputfield'
599
	- 'userdraw text,color' uses `text_inputfield+mouse` and/or `text_inputfield+xy-inputfields`
15271 bpr 600
 
16849 obado 601
* 7/2/2020:
602
	- made a few corrections (Marina)
603
	- 'userinput inputfield'
15111 schaersvoo 604
 
16849 obado 605
* 6/2/2020:
606
	- added (forgotten) 'userdraw demiline(s),color'
607
	- restored command 'userinput inputfields|textarea|function'
15111 schaersvoo 608
 
16849 obado 609
* 5/2/2020:
610
	- forgotten rotation/translation for object 'segment'
611
	- restored 'setlimits' and added 'redraw_jsplot()'
612
	- added 'jsplot' to 'zoom'
15111 schaersvoo 613
 
16849 obado 614
* 4/2/2020:
615
	- restored copy/copyresized with onclick or drag xy
616
	- start with affine transformation without using canvas/html5 transform system (e.g. drag&drop&click will work for transformed objects)
15111 schaersvoo 617
    [work in progress]
16849 obado 618
	- added commands 'linear a,b,c,d' and 'killlinear|killinear' (flydraw compatibility needs to be tested)
619
	- updated internal doc's; (todo : example scripts)
620
	- added forgotten userdraw arrow(s)2,color
15111 schaersvoo 621
 
16849 obado 622
* 31/1/2020:
623
	- cleaning: removed unused js-functions
624
	- work in progress: combined drag/drop external images, draggable copy/resized images and dragstuff objects
15111 schaersvoo 625
 
16849 obado 626
* 30/1/2020:
627
	- userdraw zooming ; marked 'canvas-zoom-buttons' forbidden (eg clicking on zoom will not produce extra userdrawing clicks...)
628
	- start with cleaning...
15271 bpr 629
 
16849 obado 630
* 29/1/2020:
631
	- minor stuff
15111 schaersvoo 632
 
16849 obado 633
* 28/1/2020:
634
	- restored 'userdraw dotfill...textfill,color|text' (pattern filling)
635
	- restored 'userdraw inputs'
636
	- changed 'style' for elements by command 'css some_css' for buttons etc (style="xxxx" --> class="xxxx" )
15111 schaersvoo 637
 
16849 obado 638
* 26/1/2020:
639
	- restored 'userdraw clickfill,color' (the lrest like 'userdraw dotfill,color' not yet ready)
15111 schaersvoo 640
 
16849 obado 641
* 25/1/2020:
642
	- rightmouse click removes last drawn userdraw thing
15111 schaersvoo 643
(including svg/div/p/span/images/inputfields...eg non-canvas elements)
16849 obado 644
	- restored 'userdraw inputs,color'
15271 bpr 645
 
16849 obado 646
* 24/1/2020:
647
	- restored "userdraw" image(s),arc(s),parallelogram(s)  etc
15111 schaersvoo 648
 
16849 obado 649
* 22/1/2020:
650
	- moving "userdraw" things to separate file, simular to "multidraw"
15111 schaersvoo 651
    work in progress...not all primitives are implemented.
652
    giving further reduction of resulting javascript filesize
653
 
16849 obado 654
* 17/1/2020
655
	- zooming : added mouse wheel zoom-in-out
15111 schaersvoo 656
	    : restored panning and reset (x) is now back to original x|y min|max
657
	    : added basic support for touch devices
658
	    : TODO adjust zooming params
659
 
16849 obado 660
* 16/1/2020
661
	- removed unused variables (clang, compiled with: -Weverything)
662
	- zoom & drag/drop
663
	- TODO: zoom & other-grid-types ; use mousewheel & tablets?
15111 schaersvoo 664
 
16849 obado 665
* 11/1/2020
666
	- corrected long standing design flaw (zooming would reset dragged objects...)
667
	- modified command grid (concering zooming)
668
	- TODO : rethink zooming & panning !!
15111 schaersvoo 669
 
16849 obado 670
	```
671
	##############
672
	performance/size_reductions:
17581 bpr 673
 
16849 obado 674
	U1/logic/oefmap.fr&+cmd=new&defaultlist=free01&+exo=free01&+qnum=1&+scoredelay=&+seedrepeat=0&+qcmlevel=1
675
		- old canvasdraw version approx 40 kb
676
		- new canvasdraw version approx 20 kb
677
		- latest canvasdraw version approx 18 kb
17581 bpr 678
 
16849 obado 679
	H5/analysis/gebieden-1.nl&subject=4&level=0&total_exos=3&rounding=-1&usage=2&taal=nl
680
		- old canvasdraw version approx 83 kb
681
		- new canvasdraw version approx 38 kb
682
	##############
683
	```
15111 schaersvoo 684
 
16849 obado 685
	- split large files into fragments:still needs some further shifting/reorganizing
686
	- multidraw: add draw primitive: crosshair | crosshairs (draw_type no. 25 | 26)
687
    TODO: arc,angle,ellipse??
15111 schaersvoo 688
 
16849 obado 689
	- multidraw: finished fillpatterns
15111 schaersvoo 690
 
16849 obado 691
```
8379 schaersvoo 692
size 400,400
693
xrange -10,10
694
yrange -10,10
15111 schaersvoo 695
grid 1,1,grey
696
linewidth  3
697
snaptogrid
698
multilinewidth 1,2,3,1,2,3
699
multifillcolors red,green,blue,brown,cyan,yellow
700
multistrokecolors red,green,blue,brown,cyan,yellow
701
#solid, grid, hatch, diamond, dot, none
702
multifill 1,2,3,4,0
703
multidraw rects,circles,triangles,poly5,parallelogram,points
16849 obado 704
```
8379 schaersvoo 705
 
16849 obado 706
* 10/1/2020
707
	- simplified 'fillpattern' for static and dynamic objects
708
	- multidraw:
15111 schaersvoo 709
    started with implementing fillpatterns for multidraw (only rects/circles for now)
710
    command: multifill 0,1,2,3,4,5 ... none,fillcolor,grid,hatch,diamond,dot
711
    image filling not yet ready...
16849 obado 712
	- corrected flaw in 'ellipses'
713
	- corrected docs for 'ellipse | ellipses'
714
	- corrected zoom issue (minimized code increase)
8448 schaersvoo 715
 
16849 obado 716
* 8/1/2020
717
	- added a few other object to "non-html5-canvas" rotation
14071 bpr 718
 
16849 obado 719
* 6/1/2020
720
	- "stringup" now can be "onclick & dragdrop"
15111 schaersvoo 721
eg: stringup == string+angle+mouse_rotation-code
722
note: no need to reset rotation through 'killrotate'
17581 bpr 723
 
16849 obado 724
	```
725
	onclick
726
	rotate 45
727
	string red,0,0,AAAAAA
728
	killrotate
729
	string red,4,4,BBBBBB
730
	```
17581 bpr 731
 
16849 obado 732
	is identical with:
17581 bpr 733
 
16849 obado 734
	```
735
	onclick
736
	stringup red,0,0,45,AAAAAA
737
	string red,4,4,BBBBBB
738
	```
14071 bpr 739
 
16849 obado 740
	- dragstuff using C-switch
741
	- code kbytes:
14071 bpr 742
 
16849 obado 743
```
15271 bpr 744
 minimal: 		 4 kb
15111 schaersvoo 745
 grid only: 		15 kb
746
 userdraw only: 	10 kb
747
 multidraw single:	18 kb
748
 multidraw all: 	40 kb
749
 onclick + objects: 	14 kb
750
 drag xy + objects: 	14 kb
751
 typical exercise : 	30 kb
16849 obado 752
```
15271 bpr 753
 
16849 obado 754
* 4/1/2020
755
	- moved dragstuff code : needs to simplify
756
	- start to move HTML5/Canvas transformation things to canvasdraw.c:
757
		- e.g. just recalculate the coordinates for objects: so there is no need for recalculating mouse coordinates in case of onclick/drag
758
		- except for 'text' and ?
759
		- keep optional mouse coordinate recalculation when using HTML5 transformations...
9266 schaersvoo 760
 
15271 bpr 761
 
16849 obado 762
* 11/2019
763
	- rewrite of multidraw code and removal of verbatim js-code
764
	A few notes:
765
	- command 'inputstyle' will be used for setting 'css class' of the multidraw control table
15111 schaersvoo 766
    for example: inputstyle wimstable
16849 obado 767
	- when using a single draw primitive , command 'multilable nocontrols' will remove the 'control buttons'
768
	- when using keyword "duplicates" || "allowdups"  multiple identical points will NOT be removed from the student answer/reply
769
	- drag&drop math typesetting onto canvasdraw image:
770
	    - multidraw|userdraw images will only work with Mathml (through !insmath etc) if you use the 'wims modules svn' version of wims_mathml !!
771
		- e.g. things like !insdraw  \mmlid{123} \frac{1}{\pi}
772
		- of course the 'id' will only be added to a single call: this will NOT work: \mmlid{1} \frac{1}{\pi} + \mmlid{2} \frac{\pi}{2}
773
	   - multidraw|userdraw images and MathJaX will not work !
774
	   - multidraw|userdraw images and native MathML and KaTeX will work
775
	- drag&drop external material onto canvasdraw image:
776
		- all objects/content of type 'p','span','div','bitmap image','svg image' with an unique 'id' and
15111 schaersvoo 777
       onclick handler "onclick='javascript:place_image_on_canvas(this.id)'" may be placed onto a canvasdraw image
778
       when 'userdraw images,boguscolor' or 'multidraw images,...' is declared.
16849 obado 779
	- currently implemented multidraw primitives:
780
		*     "point","points",
781
		*     "circle","circles",
782
		*     "line","lines",
783
		*     "segment","segments",
784
		*     "arrow","arrows",
785
		*     "triangle","triangles",
786
		*     "closedpoly",
787
		*     "text",
788
		*     "rect","rects",
789
		*     "poly","polys",
790
		*     "parallelogram","parallelograms",
791
		*     "images",
792
		*     "curvedarrow","curvedarrows",
793
		*     "curvedarrow2","curvedarrows2"
15271 bpr 794
 
16849 obado 795
	- TODO: add a few more draw primitives, like
15111 schaersvoo 796
    "crosshair(s)","ellipse(s)","arc(s) || angle(s)"...
15271 bpr 797
 
798
 
15111 schaersvoo 799
############## REWRITE ################################
11769 schaersvoo 800
 
15111 schaersvoo 801
added 'angle' to draw_xml()10/4/2020
802
typo in 'case 12' command 'arc'
16849 obado 803
 
804
* 23/3/2020
15111 schaersvoo 805
added alternative commands for a few 'multidraw' subcommands
806
typo in doc
16849 obado 807
* 29/1/2020
15111 schaersvoo 808
stringup may now be set onclick (drag&drop not supported: is implemented in 'canvasdraw.min')
809
corrected non-univeral path to wims_mathml
16849 obado 810
* 6/1/2020
15111 schaersvoo 811
forgotten to reset angle=0 in 'killrotate'
16849 obado 812
 
813
## 2019
814
* 26/12/2019
15111 schaersvoo 815
NO support for dragging and transformation / rotations
816
generic mouse coordinate transformation ( transform_mouse(x,y,obj) ) usable for 'affine transformation' and 'onclick'
16849 obado 817
* 25/12/2019
15111 schaersvoo 818
 
819
"drag" and "rotate" WILL NOT WORK !!
820
"onclick" and "rotate" may be combined. (see createxo help "rotate")
821
 
822
adjusted documentation.
823
string/text using 'xoffset','xyoffset','yoffset' will now use a 2*linewidth marge
824
22/12/2019
825
 
16849 obado 826
object 10: clicked
15271 bpr 827
object 9 : clicked
15111 schaersvoo 828
object 8 : not clicked
829
object 7 : not clicked
830
object 6 : clicked
831
object 5 : moved from (1:2) -> (2:2)
832
object 4 : not moved
833
object 3 : moved from (1:1) -> (3:3)
834
object 2 : moved from (1:3) -> (3:2)
835
object 1 : moved from (1:0) -> (2:1)
836
object 0 : not moved
837
reply = ["not_moved", "1:1:0:2:1:0", "2:0:1:3:2:0", "3:1:1:3:3:0", "not_moved", "5:1:2:2:2:0",1,0,0,1,1]
15271 bpr 838
for example:
15111 schaersvoo 839
 
840
the clicked objects are '0' or '1'
841
obj_number,xorg[0],yorg[0],xnew[0],ynew[0],new_angle
842
moved object are items in the javascript reply array...in the same order as their appearance in the fly_script
843
unmoved object are labelled "not_moved" !
844
"onclick" and "drag x|y|xy" may now be used together and all data be read using "read_dragdrop()"
845
 
846
[ these are bugs, not features... ]
847
drag xy & rotate are only compatible if you are using a 'slider'
848
onclick & rotate are not compatible
849
impoved mouse selection of text (height of selection box was not ok)
850
corrected missing font-change when text was set 'onclick' [BPR]
851
 
16849 obado 852
* 21/12/2019
15111 schaersvoo 853
corrected wrong hexcolor conversion [Sophie Lemaire]
16849 obado 854
 
855
* 12/11/2019
15111 schaersvoo 856
if set, multiple identical points will NOT be removed from the student answer/reply
857
added keyword "duplicates" || "allowdups" for default "multidraw" replyformat
16849 obado 858
* 9/11/2019
15111 schaersvoo 859
corrected multidraw curvedarrows numeric input [BPR]
16849 obado 860
* 8/11/2019
861
correction in multidraw circles : list_uniq(A,B,C) will reserve 'C' for non-numeric answers !
15111 schaersvoo 862
 
16849 obado 863
* 2/11/2019
15271 bpr 864
this will break module "H4/logic/logica-1.nl/exos/exo14" (only dutch module, so no serious conflicts)
15111 schaersvoo 865
reply format for "multidraw" in case of "circles" will give radius in x-range [BPR]
866
 
16849 obado 867
* 2/11/2019
868
 
869
```
15111 schaersvoo 870
#######
871
}
872
<input type="button" onclick="alert(read_dragdrop());" value="read_dragdrop()" />
873
<input type="button" onclick="alert(read_canvas());" value="read_canvas()" />
874
 
875
 
876
</script>
877
 find_images();
878
 };
879
  };
880
   };
881
    img.setAttribute('onclick','javascript:place_image_on_canvas(this.id);');
882
    idx++;
883
    img.setAttribute('id','drag_'+idx);
884
   if(id.indexOf('insert')!= -1){
885
   var id = img.id;
886
   var img = images[p];
887
  for(var p=0;p<len;p++){
888
  var idx=0;
889
  var len = images.length;
890
  var images = document.getElementsByTagName('img');
891
 /* look for images with 'insert' in the 'id'*/
892
 function find_images(){
893
 };
894
   if(typeof fun === 'function'){return fun();};
15271 bpr 895
   var fun = eval("read_dragdrop"+canvas_scripts[0]);
15111 schaersvoo 896
 function read_dragdrop(){
897
 };
898
   if( typeof fun === 'function'){ return fun();};
899
   var fun = eval("read_canvas"+canvas_scripts[0]);
900
 function read_canvas(){
901
<script type="text/javascript">
902
 
903
</table>
15271 bpr 904
 <tr><th> <img src="gifs/en.gif"  id="insert_en" /> </th><th>  <img src="gifs/nl.gif"  id="insert_nl" /> </th><th>  <img src="gifs/cn.gif"  id="insert_cn" />  </th><th>  <img src="gifs/it.gif"  id="insert_it" />  </th></tr>
905
 <tr><th> \I1   </th><th> \I2 </th><th> \I3 </th><th> \I4 </th></tr>
906
 <tr><th> \(\M1\) </th><th> \(\M2)</th><th> \(\M3) </th><th> \(\M4\) </th></tr>
907
 <tr><th> M1   </th><th> M2 </th><th> M3 </th><th> M4 </th></tr>
15111 schaersvoo 908
<table border="1">
909
}
910
# multidraw images
911
userdraw images,red
11764 schaersvoo 912
snaptogrid
15111 schaersvoo 913
centered
914
grid 2,2,grey,1,1,6,grey
915
axisnumbering
916
axis
917
precision 1
918
yrange -10,10
919
xrange -10,10
920
bgcolor white
921
\canvasdraw{500,500}{
11769 schaersvoo 922
 
15111 schaersvoo 923
\statement{
11820 schaersvoo 924
 
15111 schaersvoo 925
\text{divstyle="display:inline-block;width:auto;text-align: center;"}
15271 bpr 926
\text{I4=<img style="width:50%;height:50%" onclick="javascript:place_image_on_canvas(this.id);" src="modules/data/chemistry/mol2D.fr/images/100_39_0.png" id="I4" />}
15111 schaersvoo 927
\text{I3=<img style="width:50%;height:50%" onclick="javascript:place_image_on_canvas(this.id);" src="modules/data/chemistry/mol2D.fr/images/1002_69_3.png" id="I3" />}
928
\text{I2=<img style="width:50%;height:50%" onclick="javascript:place_image_on_canvas(this.id);" src="modules/data/chemistry/mol2D.fr/images/1002_57_9.png" id="I2" />}
929
\text{I1=<img style="width:50%;height:50%" onclick="javascript:place_image_on_canvas(this.id);" src="modules/data/chemistry/mol2D.fr/images/1002_28_4.png" id="I1" />}
930
\text{M4=\mmlid{M4}\xrightarrow{\rm N_2 \uparrow}}
931
\text{M3=\mmlid{M3}\xrightarrow{\rm O_2 \uparrow}}
932
\text{M2=\mmlid{M2}\xrightarrow{\rm H_2 \uparrow}}
933
\text{M1=\mmlid{M1}\xrightarrow{\text{reaction}}}
934
##### example OEF...
16849 obado 935
```
11823 schaersvoo 936
 
16849 obado 937
	- 'userdraw images,bogus color' : right mouse click removes item/object under mouse pointer
938
	- solving issue with size of dynamic created div's in 'userdraw images,color' and 'multidraw images'
11823 schaersvoo 939
 
16849 obado 940
* 26/9/2019
15111 schaersvoo 941
 
942
multidraw images
943
userdraw images,red
944
using command:
945
including KaTeX or MathJaX js-typesetting, MathML,bitmap, and any other html content,
946
All 'svg','div','span' elements on page may be used to drop onto canvas,
16849 obado 947
 
948
* 17/9/2019
15111 schaersvoo 949
on touch devices the canvasdraw inputfields could not be used
950
add attrubute autofocus,true to function 'add_inputs()'
951
 
16849 obado 952
* 8/9/2019
15111 schaersvoo 953
will now accept anything from the exercise page (including MathML,MathJaX,KaTeX typesetting) if included a 'div' with unique id and onclick='javascript:place_image_on_canvas(this.id);'
954
multidraw images
15271 bpr 955
userdraw images,somecolor
15111 schaersvoo 956
 
16849 obado 957
* 5/9/2019
15111 schaersvoo 958
case killslider: replaced 'int p' by loop indicator 'i' [obado]
959
 
16849 obado 960
* 27/8/2019
15111 schaersvoo 961
TEMPORARY ---> all browsers are type 'GECKO' and MathJaX will take care of all others in command 'latex'
962
 
963
in case of KaTeX only use command 'latex x,y,tex_string'
964
command mathml is only suitable for "GECKO" and "NON-GECKO+MathJaX"
965
command latex calls 'getMML()' e.g. 'wims_mathml'  in case of "GECKO"
966
 
16849 obado 967
* 26/8/2019
15111 schaersvoo 968
Needs looking into. In mathml.c: katex div: 'display:block;visibility:hidden'./SCHAERSVOORDE/H1/algebra/vergelijkingen-1.nl/exos/exo9:mathml 0,10,10,0,$fun\
15271 bpr 969
setting 'drag_type = -1' to drag KaTeX with left top corner...problems reading width of created div's/span's
15111 schaersvoo 970
WORK IN PROGRESS ( canvasdraw will need to call wims_mathml in case of GECKO browsers!)
971
to be used for KaTeX
972
Added command 'latex x,y,tex-string
973
 
16849 obado 974
* 25/8/2019
975
 
976
```
15111 schaersvoo 977
fcircles blue,3,3,1
978
drag xy
979
angle 0,0,2,0,0,red
980
fillpattern dot
981
arrow 0,0,5,0,7,red
982
fillcolor blue
983
slider -pi,pi,250,30,angle degrees,Rotate
984
opacity 200,100
985
fillcolor white
986
rotationcenter 0,0
987
linewidth 3
988
precision 1000
989
yrange -5,5
11820 schaersvoo 990
xrange -5,5
15111 schaersvoo 991
size 300,300
16849 obado 992
```
15111 schaersvoo 993
 
15271 bpr 994
- click on 'reset' will deactivate all
15111 schaersvoo 995
- click on objects will activate
996
- command 'angle x0,y0,x1,y1,angle,color' will always be active in case of a rotation slider.
997
- drag x|y|xy may be combined with slider(s)
998
- snapto* will not work !
999
in slider exercises:
1000
 
1001
onclick and dragdrop may be combined, but is not really usefull :)
1002
- every onclick object starts with obj.onclick_cnt = 0... when clicked obj.click_cnt = 1
1003
- only the first element of a row is important (obj.click_cnt), which is 0 or 1
1004
in onclick exercises
1005
 
1006
- obj.click_cnt is the objects sequence number (starting with '0' for the first draggable object in the script)
1007
- only clicked objects have a line in the reply
1008
in dragdrop exercises:
1009
 
1010
obj.click_cnt+','+obj.xorg[0]+','+obj.yorg[0]+','+current_x+','+current_y+','+current_angle+';\\n
1011
dragdrop reply is now in format:
1012
broken modules adapted
1013
 
16849 obado 1014
* 15/8/2019
1015
 
15111 schaersvoo 1016
   -- todo: restore slider 'follow_function system'
15271 bpr 1017
6) -- todo: restore xy-slider??
15111 schaersvoo 1018
6) finished: reply&display precision and reply-format
15271 bpr 1019
5) finished: restored slider display 'system'
15111 schaersvoo 1020
4) finished: slider rotation with preservation of coordinates e.g. 'mouse dragging' is supported
1021
3) finished: group selection (just by clicking...no 'lasso')
15271 bpr 1022
2) finished: real coordinates when using 'drag & manual rotating' objects
15111 schaersvoo 1023
1) finished: multiple sliders per object or objects (until 'killslider')
1024
targets:
1025
 
16849 obado 1026
* 8/2019 rewriting of slider stuff (reponse to request/question of BPR)
15111 schaersvoo 1027
 
16849 obado 1028
* 10/8 correctedd stupid typo in DRAW_EXTERNAL_IMAGES
15271 bpr 1029
and corrected snapping to grid
15111 schaersvoo 1030
corrected flaw in multidraw cirle [BPR]
16849 obado 1031
* 3/7/2019
15111 schaersvoo 1032
removed 'touchend' (MC)
16849 obado 1033
* 22/6/2019
15111 schaersvoo 1034
(changes should be made, not yet fixed)
1035
work on the documentation: add '' ``for emphased words and <code></code>
16849 obado 1036
* 08/06/2019
1037
`userdraw circles,red`
15111 schaersvoo 1038
is identical to
16849 obado 1039
`multidraw circles
1040
strokecolor red
1041
multilabel NOCONTROLS`
15111 schaersvoo 1042
 
1043
in multidraw NOCONTROLS and a single object, no need for a 'draw object' button. It's analogue to userdraw.
1044
in multidraw right mouse click will remove last drawn object of the currently selected  draw primitive
16849 obado 1045
 
1046
* 7/6
15111 schaersvoo 1047
added ruler & protractor to new multisnap_check(x,y,use_snap);
1048
 
16849 obado 1049
```
15111 schaersvoo 1050
#<input type='button' onclick='javascript:var fun=eval("clear_draw_area"+canvas_scripts[0]);fun(9,0);' value='REMOVE LAST ARROW ' />
1051
<input type='button' onclick='javascript:var fun=eval("clear_draw_area"+canvas_scripts[0]);fun(24,0);' value='REMOVE LAST CURVEDARROW2 ' />
1052
<input type='button' onclick='javascript:userdraw_primitive=24;multidraw_click_cnt = 0;' value='start drawing curvedarrows2' /> etc etc
1053
<input type='button' onclick='javascript:userdraw_primitive=null' value='STOP DRAWING' />
16849 obado 1054
```
15111 schaersvoo 1055
controls for example:
16849 obado 1056
 
1057
```
15111 schaersvoo 1058
curvedarrows2 = 24
1059
curvedarrow2 = 23
1060
curvedarrows = 22
1061
curvedarrow = 21
1062
images = 20
1063
parallelograms = 19
1064
parallelogram = 18
1065
polys[3-9] = 17
1066
poly[3-9] = 16
1067
rects = 15
1068
rect = 14
1069
text = 13
1070
closedspoly = 12
1071
triangles = 11
1072
triangle = 10
1073
arrows = 9
1074
arrow = 8
1075
segments = 7
1076
segment = 6
1077
lines = 5
1078
line = 4
1079
circles = 3
1080
circle = 2
1081
points =1
1082
point = 0
16849 obado 1083
```
15111 schaersvoo 1084
The object types are internally represented by the following numbers (makeing typo's will render your exercise null and void)
1085
To activate this feature, use multilabel NOCONTROLS
1086
When you are not content with the default 'multidraw control panel', you can create your own interface, using a few javascript functions to call the drawprimitives, delete things and 'stop drawing' in case you also want to drag&drop stuff...
1087
### from doc's
1088
6/6 added keyword 'NOCONTROLS' to disable all buttons for multidraw
1089
 
1090
command 'drag xy|x|y' was fallen of the wagon...
1091
 
1092
don't touch replyformat 29: it is universal and for multidraw  !
1093
todo: modify/change 6,10,11,15,16,17,18,19,20,25,27,31
1094
 
1095
OEF : replyformat		22,23,28
1096
USERDRAW DEFAULTS: replyformat  2,6,8,10,11,15,16,17,18,19,20,23,24,25,27,29,31
1097
SCHAERSVOORDE : replyformat	2,7,8,21,22,23,24
1098
Starting with unifying the 'replyformat' jungle...without touching existing modules
1099
A single function "multisnap_check(x,y,use_snap)" will return xy[2] array with corrected  coordinates
1100
 
16849 obado 1101
* 5/6 removed confusing code about 'snapping to something' and unified it in a single variable 'use_snap=0,1,2,3,4' for 'dragstuff library', 'userdraw' and 'multidraw'
1102
* 4/6 modified 'find_angle()' now using Math.atan2(x,y) ... smooth turning 360+ without flipping...see 'protractor'
1103
 
1104
```
1105
<script>
15111 schaersvoo 1106
 resize_svg_mathml(mythings);
1107
 var mythings = [ array_with_image_id's ];
1108
 };
1109
  };
1110
   svg.setAttribute("width", w+'px');
1111
   svg.setAttribute("height", h+'px');
1112
   var h = parseInt(getComputedStyle(div).height);
1113
   var w = parseInt(getComputedStyle(div).width);
1114
   var div = document.getElementById(mythings[p+1]);
1115
   var svg = document.getElementById(mythings[p]);
1116
  for(var p=0; p < len ; lpp){
1117
  var len = mythings.length;
1118
 function resize_svg_mathml( mythings ){
1119
<script type="text/javascript">
1120
To resize and used the svg element, a small piece of javascript is needed..
1121
</svg>
1122
</foreignObject>
1123
<div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;width:auto;text-align: center;" > MATHML </div>
1124
<foreignObject width="100%" height="100%">
1125
<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="1px" onclick="javascript:place_image_on_canvas(this.id);" id='my_id'>
16849 obado 1126
```
1127
when the MathML code is embedded in a foreignObject, a div and an svg with size 1px, like in:
15111 schaersvoo 1128
On Gecko browsers there is an option to include MathML from the page onto the canvas,
1129
The 'id' and (x;y) coordinates will be returned using read_canvas();
16849 obado 1130
`<img src="somewhere" id="myid" onclick="javascript:place_image_on_canvas(this.id)" alt="hmm" />`
15111 schaersvoo 1131
Images (bitmap or svg) present in the exercise page and the img-tag with an unique 'id' and onclick='javascript:place_image_on_canvas(this.id)' can be placed onto the canvas.
1132
(*)
1133
 
1134
multidraw curvedimages,curvedimages2
1135
multidraw images  (*)
1136
userdraw curvedimages2,color
1137
userdraw curvedimages,color
1138
userdraw curvedimage2,color
1139
userdraw curvedimage,color
1140
userdraw images,boguscolor (*)
1141
using: in canvasdraw.c: int use_snap = 0; /* 0 = none 1=grid : 2=x-grid : 3=y-grid : 4=snap to points ... to finally harmonize the 'snap to grid etc etc */
1142
using multisnap_check(x,y,snap_type)
1143
preparing replyformat 29 (multidraw) as generic reply system (every object has a line, every line is a matrix)
1144
Merged with wimsmodules:
1145
 
1146
 
1147
y1,y2,yc,...
1148
x1,x2,xc,...
1149
default replyformat = 2
1150
 
16849 obado 1151
* 3/6 curvedarrow now has 3 points :
1152
 
15111 schaersvoo 1153
added to multidraw family 'curvedarrow' and 'curvedarrow2'
1154
added to dragstuff library objects 'curvedarrows color,x1,y1,xc,yc,x2,y2,...' and  'curvedarrows2 color,x1,y1,xc,yc,x2,y2,...'
1155
just to be complete...
1156
added to dragstuff library objects 'curvedarrow x1,y1,xc,yc,x2,y2,color' and  'curvedarrow2 x1,y1,xc,yc,x2,y2,color'
1157
added 'userdraw curvedarrow2,color' and 'userdraw curvedarrows2,color'
16849 obado 1158
 
1159
* 1/6/2019
15111 schaersvoo 1160
TODO: add curvedarrow to dragstuff object library
1161
TODO: multidraw curvedarrow
1162
TODO: 'userdraw curvedarrow2,color' and  'userdraw curvedarrows2,color'
16849 obado 1163
* 31/5/2019 added userdraw primitive 'userdraw curvedarrow,color' and  'userdraw curvedarrows,color'
1164
* 15/5/2019 dragging external images now centers the image around the mouse pointer
15111 schaersvoo 1165
all other drag&drop things (canvas related and div's (from xml/mathml) seem to work fine, only dragging of images fails
1166
this -however- does not seem to correct the problem om 'styled' wims-servers [BPR].
1167
draw_external images now makes use of the same dragstuff.getMouse()
16849 obado 1168
* 14/5/2019 problems with dragging images...
1169
* 13/5/2019 bugfix command angle|arc combined with command 'slider'...slidervalue is in radians...arc|angle needs degrees
1170
* 11/5/2019 add some examples for OEF [BPR] (work in progress)
1171
* 4/3/2019 corrected fontsize behaviour of command 'text' (always trouble between 'fontsize' and 'fontfamily' commands) [BPR]
1172
* 2/2/2019 corrected behaviour of replyformat 11 etc (dealing with (x1:y1)---<x2:y2) )
15111 schaersvoo 1173
 
16849 obado 1174
```
15111 schaersvoo 1175
jsplot red,4*cos(2*x),2*sin(3*x-pi/6),cos(x),3*sin(x),3*cos(x),sin(x),x,x^2
1176
multistrokecolors red,red,blue,blue,green,green,orange,orange
1177
precision 1000
1178
linewidth 1
1179
animate
1180
trange -pi,pi
1181
fillcolor blue
1182
linewidth 4
1183
grid 1,1,grey,4,4,7,black
1184
opacity 100,190
1185
axisnumbering
1186
axis
1187
precision 0
11820 schaersvoo 1188
yrange -5,5
15111 schaersvoo 1189
xrange -5,5
1190
size 400,400
16849 obado 1191
```
15111 schaersvoo 1192
(command animate may only be used once)
16849 obado 1193
 
1194
* 28/12 multiple animated curves using command jsplot
1195
* 25 --> 26
15111 schaersvoo 1196
corrected "snprintf(tmp_buffer,25,"use_mouse_coordinates();\n");add_to_buffer(tmp_buffer);"
16849 obado 1197
* 15/10 BPR
1198
* 12/4 piechart will show 'legend' text inside piechart when using keyword 'centered': use fill opacity to enhance visibility
1199
* 14/3/2018 draw_crosshairs: forgotten ctx.save(); (crosshairs will 'move' with every click...)
1200
* 13/11 live docs
1201
* 12/11 added command 'ellipses'
1202
* 6/11 added few things to "live documentation" work in progress
1203
* 18/10 reoganised string/text keywords 'centered','xoffset','yoffset','xyoffset'
1204
* 8/10 remove duplicates while drawing 2-point objects (circle/line/demiline/segment/rect)
15111 schaersvoo 1205
 
16849 obado 1206
* 4/10 work in progress: adding examples to documentation (the "example:"  flag can be used to extract)
15111 schaersvoo 1207
 
16849 obado 1208
* 2/10 fixed bugs (thx B.Perrin)
1209
* 28/9 bug fix : variable use_axis_numbering was reset by introduction of numberline command...
1210
* 20/9 bug fix in command curve (a parameter was wrongly set, resulting in curve being type=13 (is a circle) insteadof type=9
15111 schaersvoo 1211
 
16849 obado 1212
```
15111 schaersvoo 1213
mouse blue,22
1214
precision 1
1215
userinput function
1216
functionlabel f(x)=
1217
strokecolor green
1218
jsplot red,4*cos(2*x),2*sin(3*x-pi/6)
1219
precision 1000
11820 schaersvoo 1220
linewidth 1
15111 schaersvoo 1221
animate
1222
trange -pi,pi
1223
fillcolor blue
1224
linewidth 4
1225
grid 1,1,grey,2,2,5,black
1226
opacity 100,190
1227
axisnumbering
1228
axis
1229
precision 0
1230
yrange -5,5
1231
xrange -2*pi,2*pi
1232
size 400,400
1233
popup
16849 obado 1234
```
11824 schaersvoo 1235
 
16849 obado 1236
* 17/9 added basic 'point_on_curve' animation (parametric and 'normal' functions)
11837 schaersvoo 1237
 
16849 obado 1238
```
15111 schaersvoo 1239
zoom red
1240
numberline -5,5,2,10,-3.5,-3
1241
zoom red
1242
xaxis -4:AAAAA:-2:BBBBB:2:CCCCC:4:DDDDD
1243
strokecolor purple
1244
numberline -5,5,1,8,-2,-1.5
1245
xaxisup -4:AAAA:-2:BBBB:2:CCCC:4:DDDD
1246
strokecolor blue
1247
numberline -5,5,1,5,2,2.5
1248
xaxis -4:AAA:-2:BBB:2:CCC:4:DDD
1249
strokecolor green
1250
numberline -5,5,1,4,4,4.5
1251
xaxisup -4:AA:-2:BB:2:CC:4:DD
1252
strokecolor red
1253
opacity 255,255
1254
grid 1,1,grey
1255
hline 0,0,black
1256
xaxis -4:A:-2:B:2:C:4:D
1257
noyaxis
1258
yrange -5,5
11837 schaersvoo 1259
xrange -5,5
15111 schaersvoo 1260
size 400,400
16849 obado 1261
```
15111 schaersvoo 1262
     adding y-offset when x-values overlap.
1263
     multiple numberlines are allowed using multiple 'xaxis' commmands for labeling several numberlines, including a x-axis label in command grid...
1264
     numberline is mapped to xrange/yrange
16849 obado 1265
* 15/9 added command macro "numberline x0,x1,xmajor,xminor,y0,y1"
15111 schaersvoo 1266
 
1267
     solved long  standing issue with color 0,0,0 (black) as fill border
1268
     added 'fixed' pattern filling to primitives 'boxplot' and 'piechart'
16849 obado 1269
* 6/9  just for completeness: added pattern filling to all fillable userdraw primitives
15111 schaersvoo 1270
 
16849 obado 1271
```
15111 schaersvoo 1272
clearbutton removed
1273
userdraw gridfill,red
1274
circle 10,10,100,red
1275
imagefill 0,0,0,gifs/en.gif
1276
# syntax: x,y,scale?,image
1277
plot blue,-x^2+4
1278
plot red,x^2-4
11837 schaersvoo 1279
yrange -5,5
15111 schaersvoo 1280
xrange -5,5
1281
size 150,150
16849 obado 1282
```
11839 schaersvoo 1283
 
15111 schaersvoo 1284
NOTE: special filling (hatch,dot,...,image) should be harmonized to include userdraw and drag&drop library objects !!
1285
26/8 command imagefill x0,y0,URL now works like flydraw should
1286
 
16849 obado 1287
```
15111 schaersvoo 1288
fcircle 2,-3,100,cyan
11854 schaersvoo 1289
drag xy
15111 schaersvoo 1290
fillpattern gifs/fr.gif
1291
fcircle 2,3,100,green
11854 schaersvoo 1292
drag xy
15111 schaersvoo 1293
fillpattern gifs/de.gif
11854 schaersvoo 1294
fcircle -2,-3,100,red
1295
drag xy
15111 schaersvoo 1296
fillpattern gifs/nl.gif
1297
fcircle -2,3,100,blue
11854 schaersvoo 1298
drag xy
15111 schaersvoo 1299
fillpattern gifs/en.gif
1300
snaptogrid
1301
yrange -5,5
1302
xrange -5,5
1303
size 400,400
16849 obado 1304
```
14071 bpr 1305
 
16849 obado 1306
note: needs an alert for synchrone loading of images (TO DO: closures in fill routines ? )
1307
 
1308
* 25/8	added commmand 'fillpattern image_url' to use an image as 'ctx.fillStyle()'
1309
* 20/8	added patternfilling to 'userdraw' family
1310
 
1311
```
15111 schaersvoo 1312
zoom red
1313
userdraw dotfill,blue
1314
fcircle 3,-3,160,cyan
18571 bpr 1315
fillpattern diamond
15111 schaersvoo 1316
fcircle 0,3,160,green
1317
fillpattern hatch
1318
fcircle -3,-3,160,red
1319
fillpattern dot
1320
fcircle -6,3,160,blue
1321
fillpattern grid
1322
opacity 165,160
1323
yrange -5,5
11858 schaersvoo 1324
xrange -5,5
15111 schaersvoo 1325
size 370,370
16849 obado 1326
```
11874 schaersvoo 1327
 
16849 obado 1328
* 18/8	added command 'fillpattern grid | dot | hatch | diamond'
1329
* 14/8 	added commands 'textfill x,y,color,sometext' and 'userdraw textfill,color,some_text'
1330
* 13/8	updated html docs
11891 schaersvoo 1331
 
16849 obado 1332
```
15111 schaersvoo 1333
clearbutton REMOVE
1334
fill 0,5,red
1335
gridfill 4,0,3,3,blue
1336
diamondfill -4,0,6,6,cyan
1337
dotfill 0,0,6,6,green
1338
linewidth 1
1339
userdraw hatchfill,red
1340
plot blue,-x^2+4
1341
plot red,x^2-4
1342
yrange -5,5
11891 schaersvoo 1343
xrange -5,5
15111 schaersvoo 1344
size 150,150
16849 obado 1345
```
11891 schaersvoo 1346
 
15111 schaersvoo 1347
	userdraw clickfill,color (will use only color,no pattern)
1348
	userdraw hatchfill,color
1349
	userdraw dotfill,color
1350
	userdraw gridfill,color
1351
	userdraw diamondfill,color
11893 schaersvoo 1352
 
16849 obado 1353
* 12/8  added to userdraw family (not yet 'cleaned' the js-code)  the commands:
1354
* 11/8  function 'find_angle' was gone fishing in case of command 'protractor'
1355
        added gridfill,hatchfill,diamondfill
15111 schaersvoo 1356
example:
1357
     added pattern to command 'userdraw clickfill,color'
1358
     other patterns will -hopefully- follow
16849 obado 1359
* 10/8 premature version of pattern filling ; for now only 'dotfill x,y,dx,dy,color'
15111 schaersvoo 1360
     if set the text will not start at given (x:y) but end at (x:y)
16849 obado 1361
* 8/8  added keyword 'yoffset' for use with rotated text strings (command textup or stringup)
1362
* 4/8  multidraw primitive 'text' is now always x-centered on click-coordinates
15111 schaersvoo 1363
     reorganized canvasdraw.c : commands in alfabetical order (cleaning & formatting not yet ready)
1364
     (added 'this.use_once')
16849 obado 1365
* 3/8  corrected flaw introduced by keywords xyoffset etc... removed repeated shifting of text-strings in redraw of canvas
15111 schaersvoo 1366
     the inputfields will be x/y centered on (x:y)... default was left top corner
1367
     keyword xoffset also active for commands 'input x,y,size,editable,value'  and 'userdraw input(s),color'
16849 obado 1368
* 2/8  added keywords xyoffset,xoffset|centered,resetoffset for easier text-label placing close to 'objects' like crosshairs,points...
1369
* 26/7 multidraw_button_table now centered in tooltip placeholder div element (using style="margin: 0 auto;" )
1370
* 25/7 multidraw command 'text' now will place a 'text string' on canvas via a mouse-click or (if command multiuserinput is set to 1 for 'text') via x/y inputfields
1371
* 24/7 corrected multidraw text error (duplicate text)
1372
* 15/7 added command 'fillall color,x1,y1,x2,y2,x3,y3...xn,yn' for filling multiple speparated areas with the same color
1373
* 14/7 set timeout on clickfill and while waiting set cursor to 'wait'
11996 schaersvoo 1374
 
16849 obado 1375
```
15111 schaersvoo 1376
clearbutton REMOVE
1377
userdraw clickfill,purple
1378
colorpalette orange,yellow,red,green,lightgreen,blue,lightblue,cyan
1379
# multifillcolors orange,yellow,red,green,lightgreen,blue,lightblue,cyan
1380
replyformat 10
1381
snaptogrid
1382
grid 1,1,grey
1383
canvastype 4
1384
# use the grid canvas 4 as fill borders
1385
yrange -5,5
1386
xrange -5,5
13514 schaersvoo 1387
size 400,400
16849 obado 1388
```
15111 schaersvoo 1389
example of a simple clicktile in direct exec:
13521 schaersvoo 1390
 
16849 obado 1391
      this will bind coordinates with color...if the exercise wishes.
15111 schaersvoo 1392
      added command 'colorpalette color1,color2...color2' for creation of color-buttons to change the click color.
14038 schaersvoo 1393
 
15111 schaersvoo 1394
      to identify the correct color on the correct area...
1395
      When using something like 'replyformat 10' or another format reporting the 'userdraw_radius[]' the color-number will be part of 'read_canvas()'
1396
      the colors will re-cycle when there are more clicks than colors...
16849 obado 1397
 
1398
* 13/7  'userdraw clickfill,color' may now make use  of command 'multifillcolors color1,color2,color3...color_n'
15111 schaersvoo 1399
      fill commands may be used together with 'userdraw clickfill,color'
1400
      (it will still ignore the bordercolor...I just can't make this work... grrr )
18571 bpr 1401
      command 'filltoborder x,y,bordercolor,color' is still the same as fill
15111 schaersvoo 1402
      command 'fill x,y,color' or 'floodfill c,y,color' may now be used multiple times.
14035 schaersvoo 1403
 
15111 schaersvoo 1404
      read_canvas() will return the click-coordinates
1405
      areas can be removed (after confirm 'clear ?' ) with command 'clearbutton some_text'
16849 obado 1406
* 11/7  now 'userdraw clickfill,color' can fill multiple selected area's
15111 schaersvoo 1407
      (although this is possible through foreignobject --> blob --> image --> canvas )
16849 obado 1408
      will be located at (1:0) and the mathml will decide the width and height of the drag/click div's (the div's are added to the 'mother' div and not -of c ourse- to the html5 canvas
1409
 
1410
      ```mathml 1,0,-10000,10000, <span style="font-size:1em;">
1411
      <math xmlns="http://www.w3.org/1998/Math/MathML" display="inline">
1412
       <mstyle id="wims_mathml347806" mathsize="110%">
1413
        <mstyle mathsize="200%">
1414
         <mstyle displaystyle="true">
1415
          <mfrac>
1416
           <mi>?</mi>
1417
           <mrow><mi>sin</mi>
1418
            <mrow>
1419
             <mo stretchy="true">(</mo>
1420
             <mstyle displaystyle="true">
1421
              <mfrac><mi>?</mi><mi>?</mi></mfrac>
1422
             </mstyle>
1423
             <mo stretchy="true">)</mo>
1424
            </mrow>
1425
           </mrow>
1426
          </mfrac>
1427
         </mstyle>
1428
        </mstyle>
1429
       </mstyle>
1430
      </math></span>```
1431
 
15111 schaersvoo 1432
      so the left top corner of
1433
      however, the  values must still be defined (syntax backwards compatibility)
16849 obado 1434
 
1435
* 8/7   command mathml will use fill_color/fill_opacity when dragged / clicked ; x2,y2 (used for determining the width/height of the embedded mathml div, are no longer used
1436
* 6/7   improved onclick & (standard) reply format
1437
* 5/7   improved drag&drop in case of mathml (or better all xml/html inclusives)
1438
* 4/7   corrected -again?- color cludge in 'barchart'...
1439
* 20/5  added forgotten minimal touch-support for multidraw routines
15111 schaersvoo 1440
      drag xy|x|y and [xy]snaptogrid are supproted
1441
      (it's not really dragging , but selecting and moving to a new location by click)
16849 obado 1442
* 12/2  added very primitive dragging to 'mathml'
14038 schaersvoo 1443
 
16849 obado 1444
	```
15111 schaersvoo 1445
      line 11 = text_x+";"+text_y+";"+text"\n"
1446
      line 10 = parallelogram_x+";"+parallelogram_y+"\n"
1447
      line 9 = closedpoly_x+";"+closedpoly_y+"\n"
1448
      line 8 = rects_x +";"+rects_y+"\n"
1449
      line 7 = polys[3-9]_x+";"+polys[3-9]_y+"\n"
1450
      line 6 = triangles_x+";"+triangles_y+"\n"
1451
      line 5 = lines_x+";"+lines_y+"\n"
1452
      line 4 = arrows_x+";"+arrows_y+"\n"
1453
      line 3 = segments_x+";"+segments_y+"\n"
1454
      line 2 = circles_x+";"+circlespoint_y+";"+multi_radius+"\n"
1455
      line 1 = points_x+";"+points_y+"\n"
16849 obado 1456
   ```
15111 schaersvoo 1457
      The output is always a 11 lines string with fixed sequence.
14038 schaersvoo 1458
 
15111 schaersvoo 1459
      multiple parallograms may be used: the coordinates are stored in "line 10" in the reply
1460
      multiple polys[3-9] may be used: poly[3-9] or polys[3-9] has "line 7" in the reply
1461
      removed command poly[s][3-9] and parallelogram[s] from 'triangle' sub-command and used as additional commands.
1462
      command multidraw
16849 obado 1463
* 9/2
1464
 
1465
## 2017
15111 schaersvoo 1466
      the same  canvas :making it possible to do a 'userdraw clickfill,color' & pan & zoom on the single js-curves-canvas
16849 obado 1467
* 30/10 added some options to command jsplot/jscurve: multiple js-curves may now be plot in a single command and on
15111 schaersvoo 1468
      But it's still a vary ugly cludge caused by the "Flydraw backwards compatibility"
1469
      then this family&size will be used.
1470
      if command "fontfamily 'size px Family'" was given and the size of "m" is larger then a set/default fontsize
16849 obado 1471
      the context will use this fontsize in Arial...
1472
      if command "fontsize int" is given and it's size is larger than the default fontfamily "12px Arial"
1473
 
1474
      ```
15111 schaersvoo 1475
      ###
16849 obado 1476
      if( font_size > tmp_font_size ){context_userdraw.font = font_size+\"px Arial\";};
15111 schaersvoo 1477
      var tmp_font_size = parseInt(context_userdraw.measureText(\"m\").width);\
1478
      ###
16849 obado 1479
      ```
15111 schaersvoo 1480
      corrected cludge of fontsize versus fontfamily :
1481
      color was taken from fontcolor... and not from userdraw command... which is color --> strokecolor
16849 obado 1482
* 29/10 corrected "userdraw text,color" :
1483
      `x1,y1,text1 \n x2,y2,text2 \n` etc
15111 schaersvoo 1484
      changed the default replyformat for 'userdraw text,color' and 'userdraw input(s),color' to the type:
1485
      (in both cases a right | middle button click will always remove the drawings
1486
      and added to 'clearbutton' the removal of inputfields produced by command "userdraw input(s),color"
16849 obado 1487
* 28/10 corrected ctx-reset flaw in "userdraw text,color" when removing text with the "clearbutton xxx"
1488
* 24/10 command vline | hline now have range -100*xmin | 100*ymax : so on "moderate" zooming there will still be a vline | hline
1489
* 13/10 added keywords "noxaxis" "noyaxis" to "grid" command family
1490
* 8/10  canvasinfo.sh will (after chmod +x) generate also canvasdraw.phtml and move it to "../../../public_html/scripts/help/en"
15111 schaersvoo 1491
      so now every userdraw object may be deleted (indiviually) by a right mouse click...middle click still no good
1492
      added 'oncontextmenu="return false;"' to main canvas_div to disable context menu with right click on image
16849 obado 1493
* 7/10  added snapto*** to "userdraw clickfill,color"
1494
* 6/10  moved command "clickfill color" to the userdraw command list e.g. userdraw clickfill,color: clickfill is per default on the drag_canvas (unless you specify an other canvastype)
1495
* 5/10  added support for touch devices
1496
* 30/9  `clear_draw_area()` used by "clearbutton txt"  did not reset the internal click-count-variable "xy_cnt"
1497
* 29/9  corrected errors in replyformat 23 (B. Perrin)
1498
* 26/9  tried to solve the syntax issues with polyline etc
1499
* 11/9  added an option to command clock (and corrected the modulo bug :javascript remainder % is not the same as modulo)
15111 schaersvoo 1500
      added some html info
16849 obado 1501
* 10/9  corrected slider display (arguments "display x" and "display y" always showed "x : y" values
1502
* 4/7   using '\t' as command separator (for use within OEF)
1503
*       difference between 'arc' and 'angle': 'arc' may set width+height (ellipse)
1504
* 15/2 corrected filling in command 'arc'
1505
* 4/2  added command 'rotationcenter xc,yc' and keyword 'killrotate'
1506
* 3/1  corrected fontsize flaw in commands text / textup
1507
 
1508
## 2016
1509
	removed nonexisting 'div' argument 'tabindex=0' (thx to Perrin)
1510
 
1511
* 29/12 clearbutton was incompatible with chromium etc (revert to button.style = "style_text" when all browsers are supporting this construct)
1512
* 18/9 corrected command 'centerstring' : forgotten clearRect()
1513
* 17/9 corrected command clock: colors are now -really- optional
1514
*       corrected -fixed- interactive boxplot stuff (js-related)
1515
* 15/9 disabled 'crispy-lines' when zooming is activated (repeated translation of context)
1516
*       e.g. producing crispy sharp lines : if(line_width %2 == 1){ctx.translate(0.5,0.5);}
1517
* 12/9 now linewidth 1 == 1px and linewidth 2 == 2px
1518
* 5/9  added command boxplot and jsboxplot
1519
* 3/9  added commands xerrorbars,yerrorbars to dragdrop library
15111 schaersvoo 1520
      minor corrections in html-doc for fontsize ; although it will not compensate for 'not-reading-the-docs' !
1521
      corrected flaw in draw_points()
1522
      (the single command 'userdraw type,color) will NOT ZOOM / PAN !!)
16849 obado 1523
* 30/8 multidraw primitives will now zoom / pan (added function redraw_all())
1524
       added several alternatives to html-doc
1525
* 25/8 added command 'cursor some_css_cursor'
1526
* 20/8 added 'rect' and 'rects' to multidraw command
1527
* 10/8 added 'xaxisup' and modified grid extension 'barchart' using the xminor/x2step for the bar-width...
1528
* 2/8   added 'text' to 'multidraw'
1529
* 	when status=done the image will be shown in the page --> canvas_div.style.display='block'
1530
* 28/7  read_canvas and read_dragdrop in popup window
1531
*        no yet suitable for communication back to wims...[work in progress]
1532
*        embedding canvasdraw into separate window xsize x ysize
1533
* 26/7  added keyword 'popup'
1534
* 21/7  added command `triangles color,x1,y1,x2,y2,x3,y3,...`
14038 schaersvoo 1535
 
16849 obado 1536
```
15111 schaersvoo 1537
# reply[3]...reply[5] = protractor
1538
# reply[0]...reply[2] = ruler
1539
replyformat 32
14044 schaersvoo 1540
 
15111 schaersvoo 1541
protractor 2,-2,6,0,-1,1,1
1542
ruler -4,3,5,1,-1,1
1543
opacity 255,40
1544
fillcolor orange
14071 bpr 1545
 
15111 schaersvoo 1546
vline 0,0,black
1547
hline 0,0,black
1548
yrange -5,10
1549
xrange -5,10
1550
size 400,400
16849 obado 1551
```
14053 schaersvoo 1552
 
16849 obado 1553
* 14/7 combinations of ruler & protractor
1554
* 13/7 added command macro `ruler x,y,x-width ,y-height,passive_mode`
15111 schaersvoo 1555
	snaptogrid implementes ( xy | x | y )
16849 obado 1556
 	reply format implemented  `(read_canvas())  reply[0] = x;reply[1] = y;reply[2]=angle_in_radians`,
1557
 	value display implemented,
1558
 	left-right rotation with mouse (left click & drag),
1559
 	zooming implemented,
1560
* 12/7	added 'macro' command 'protractor x,y,x-width,type,passive_mode,value_display
1561
* 8/7	revert to normal size of a point at 'linewidth = 1' (e.g. differ from ridiculous small point size of flydraw)
15111 schaersvoo 1562
	This last -duplicated- point is removed from the answer array
1563
	only 1 onject can be drawn (only with mouse).The poly is closed when clicking on the first point again (+/- 10px)
16849 obado 1564
* 7/7	added argument 'closedpoly' to command 'multidraw'
14063 schaersvoo 1565
 
15111 schaersvoo 1566
	When things are more mature and speed is no longer an issue, the 'single userdraw' command will be replaced by multi*
1567
	And yes, these are horrible long command names.
1568
	multifillopacity,multiuserinput,multilabel,multilinewidth,multisnaptogrid
1569
	multidraw,multidash,multistrokecolors,multifill,multifillcolors,multistrokeopacity,
16849 obado 1570
* 26/6	multi-family of commands are 'finished'
15111 schaersvoo 1571
        NOT READY: many issues are still unadressed
14071 bpr 1572
 
15111 schaersvoo 1573
	(to increase speed of execution)
1574
	The js-canvas drawfunctions will be different (simpler) compared with the single 'userdraw obj,color' functions
1575
	using buttons to switch drawing primitive...
16849 obado 1576
* 17/6   added experimental 'multidraw', allowing multiple drawing primitives in a single canvas image,
14208 schaersvoo 1577
 
15111 schaersvoo 1578
	added command 'snaptofunction some_fun_x,some_fun_y'
14208 schaersvoo 1579
 
16849 obado 1580
		frect -3,3,0,0,red
1581
		slider -5,5,120,10,x function display,some_text
1582
		sliderfunction_x 5*sin(x)
17581 bpr 1583
 
16849 obado 1584
		'sliderfunction_y some_operation_on_y'
1585
		'sliderfunction_x some_operation_on_x'
1586
		added command
1587
		added argument 'function' to the slider objects.
1588
* 28/4	removed point2point...
1589
* 24/4	added experimental command 'point2point x,y,color1,color2,x-relation_1:y-relation_1: ... : x-relation_n_:y-relation_n
15111 schaersvoo 1590
	make background color in generated <span> elements adjustable via command 'fillcolor'
1591
	make font color in generated <span> elements adjustable via command 'strokecolor'
1592
	todo:
16849 obado 1593
* 23/4	removed most static settings of fontsize and/or style.
1594
* 22/4	corrected 'static fontsize settings' in some js-user-input stuff, using size set by 'command fontsize int'... to be continued
1595
* 21/4	corrected missing 'ctx.restore()' in case of arrow (gives very strange  rotations when using a slider to rotate only the arrow...)
1596
* 19/4	changing "abs" by "fabs" in case of floating point variables. (BPR)
1597
* 8/4	added forgotten /*<![CDATA[*/ .... /*]]>*/ to script tag
1598
* 25/2	Internet Explorer & "use strict" : changed 'span.style="color:..." into span.setAttribute('style','color:...');
14208 schaersvoo 1599
 
15111 schaersvoo 1600
	 (even those not set draggable)
1601
	 note: all external images positions will be present in the 'read_canvas' array
1602
	 the third image position is (-2:-5)
1603
	 the second image position is (6:2) and
1604
	 the first image position is (-5:4) ,
1605
	 0:-5:4,1:6:2,2:-2:-5
1606
	 e.g. expect in  case of 3 external images set draggable, something like
1607
	 read_canvas() will reply "object_number:x:y" of all external images introduced by commands 'copy copyresized'
16849 obado 1608
 
1609
	- corrected replyformat 20 (only used for external image drag&drop... outside the dragstuff library !!)
1610
	- corrected resetting of 'reply array' in case of zooming... (why did I reset this?)
1611
* 17/2
1612
	- added check on wims_status=done when using 'onclick' (otherwise objects can be 'clicked/dragged' in an answer.phtml)
1613
	- simplified onclick things in external images
1614
	- fixed bug when onclick external images were mixed with static external images
1615
* 16/12 - corrected 'userdraw points,color' erase/redraw bug (using 'clearbutton buttontxt')
1616
* 7/12	- onclick objects may now be of any type (eg external images ,via copy /copyresized or any other canvas 'object')
15111 schaersvoo 1617
	 see canvassdraw.html for possible usage and limitations
16849 obado 1618
* 25/11 - added "onclick" to external images (via commands copy / copyresized)
15111 schaersvoo 1619
	-again tried to fix copy/copyresized (grrr)
1620
	 and thus reset to "0,0,0"
16849 obado 1621
* 24/11
1622
	- corrected syntax-flaw in js-function draw_rects() ; both stroke_color and fill_color were not correctly defined
15111 schaersvoo 1623
          analogue to command 'ellipse'
16849 obado 1624
	- corrected command 'arc' : switched from width/height (width and height may now be different) in pixels to width / heigth in x/y-range
15111 schaersvoo 1625
          now "linewidth 1" is almost invisible, just as in 'flydraw'...that is a clear improvement :)
16849 obado 1626
	- synchronised size of point / points with flydraw
15111 schaersvoo 1627
          The image may be of type BITMAP and SVG
1628
          (even if there is no external image imported)
16849 obado 1629
* 23/11	- solved issue with drawing onto external images: now a empty 'external_image' canvas is created first / per default...
15111 schaersvoo 1630
	  image operations are now performed on a "real canvas" and no longer on a "canvas_div"
16849 obado 1631
* 22/11
1632
	- joined draw_external_images and drag_external_images
15111 schaersvoo 1633
	- changed output "function distance()" from integer to floating point. (slightly better in case of snaptopoints)
16849 obado 1634
* 9/11
1635
	- fixed bug of increasing font_size when using multiple 'text' commands [perrin]
15111 schaersvoo 1636
	- added "xsnaptogrid,ysnaptogrid,snaptogrid,snaptopoints" to dragging of 'external images'
1637
	- "click_cnt" counter (to identify the object in reply) only incremented when 'onclick' and / or "drag x|y|xy" is set.
1638
	- added "snaptopoints" to userdraw primitives and drag&onclick library
16849 obado 1639
* 6/11	- corrected dragging (dragging was missing...) of closed polygon (triangle etc)
1640
```
15111 schaersvoo 1641
userdraw arrow,blue
1642
#userdraw arrows2,blue
1643
arrowhead 10
1644
linewidth 2
1645
snaptopoints 0,0,-6,0,-3,3,0,6,3,3,6,0,3,-3,0,-6,-3,-3
1646
points red,-6,0,-3,3,0,6,3,3,6,0,3,-3,0,-6,-3,-3
1647
point 0,0,blue
1648
linewidth 3
1649
yrange -10,10
1650
xrange -10,10
1651
size 400,400
16849 obado 1652
```
15111 schaersvoo 1653
	 only implemented in command "userdraw arrow(s),color"
16849 obado 1654
* 5/11
1655
   - added experimental command "snaptopoints x1,y1,x2,y2,..."
1656
   - added command "bezier color,xs,ys,x1,y1,x2,y2,x3,y3"
1657
   - added alernative to command "polyline" : "path color,x1,y1,x2,y2,...."
1658
   - added command "roundrects color,radius,x1,y1,x2,y2,...."
1659
   - added command "vlines color,x1,y1,x2,y2,...."
1660
   - added command "hlines color,x1,y1,x2,y2,...."
1661
   - added command "demilines color,x1,y1,x2,y2,...." alternative "halflines"
1662
* 3/11   - added commands "rects color,x1,y1,x2,y2,...." and "frects color,x1,y1,x2,y2,...."
1663
* 2/11   - docs
1664
* 1/11
1665
   - corrected font behaviour of Flydraw text command.
15111 schaersvoo 1666
        Flydraw command "lines" is equivalent to "polyline"
1667
        "polyline" | "polylines" | "brokenline" | "brokenlines" will produce interconnected segments between the points (not closed)
1668
        "lines" will produce not connected lines through points (x1:y1)--(x2:y) etc
16849 obado 1669
   - syntax changed for command "lines color,x1,y1,x2,y2...x_n-1,y_n-1,x_n,y_n"
1670
   - corrected command "clearbutton some_text" : multiple interactive scripts in web page may have individual 'clear drawing buttons'
1671
   - corrected crosshair_size
15111 schaersvoo 1672
	can be set draggable / onclick individually
14208 schaersvoo 1673
 
16849 obado 1674
* 29/10
1675
	- added command "arrows2 color,head px,x_1a,y_1a,x_1b,y_1b,x_2a,y_2a,x_2b,y_2b....x_na,y_na,x_nb,y_nb
1676
	- added 'replyformat 28' to reinput date from 'userdraw circles,color' [perrin]
1677
* 17/10
1678
	- removed empty string error warning in 'char *get_string_argument(); [perrin]
1679
	- removed macro "iscalculation" and replace it by something better...
1680
	- added command "arrows color,x1,y1,x2,y2...x_n,y_n
15111 schaersvoo 1681
        note: radius is not in pixels but in xy-coordinate system ! (so dragging / onclick / scaling works )
16849 obado 1682
* 11/10
1683
	- added command "circles color,x1,y1,r1,x2,y2,r2...x_n,y_n,r_n
15111 schaersvoo 1684
	like: "0.2345^1.234x" will receive a warning : it should be "(0.2345)^(1.234x)"
1685
	(but they have a small footprint...)
16849 obado 1686
	- added warnings when plot function input has "syntax" issues...well it's more likely that my simple math-parsers are too simple
1687
	- added command segments color,x1,y1,x2,y2....x_n,y_n  	[perrin]
1688
	- added simple javascript "rawmath" to convert user function input (like : 4x --> 4*x)
15111 schaersvoo 1689
	 default value 'f(x)='
16849 obado 1690
	- added command 'functionlabel some_string' to label the specific inputfields for function input
1691
 
1692
* 9/10
1693
	- now multiple functions may be plotted by user via 'userinput function' and read via read_canvas()
1694
 
1695
```
1696
	  function read_dragdrop(){
1697
	  var script_len = canvas_scripts.length;var dragdrop_reply = "";var found_result = false;for(var p = 0 ; p < script_len ; p++){var fun = eval("read_dragdrop"+canvas_scripts[p]);if(typeof fun === 'function'){var result = fun();if( result && result.length != 0 ){if(script_len == 1 ){ return result;};found_result = true;dragdrop_reply = dragdrop_reply + result +"\n";};};};if( found_result ){return dragdrop_reply;}else{return null;};};
15111 schaersvoo 1698
	  <!-- will return all 'drag&drop' or 'onclick' data from all canvas javascript includes -->
1699
	  };
1700
	   };
1701
	    return null;
1702
	   {
1703
	   else
1704
	   }
1705
	    return draw_reply;
1706
	   if( found_result ){
1707
	   };
1708
	    };
1709
	     };
1710
	      draw_reply = draw_reply + result + "\n";
1711
	      found_result = true;
1712
	      if(script_len == 1 ){ return result;};
1713
	     if( result  && result.length != 0){
1714
	     var result = fun();
1715
	    if( typeof fun === 'function'){
1716
	    var fun = eval("read_canvas"+canvas_scripts[p]);
1717
	   for(var p = 0 ; p < script_len ; p++){
1718
	   var found_result = false;
1719
	   var draw_reply = "";
1720
	   var script_len = canvas_scripts.length;
1721
	  function read_canvas(){
1722
	  <!-- will return all 'userdraw' or 'userinput' data from all canvas javascript includes -->
16849 obado 1723
```
15111 schaersvoo 1724
	 A special version of 'read_canvas()' and 'read_dragdrop()' should be included in the web page, something like this:
14208 schaersvoo 1725
 
16849 obado 1726
	 In the C-program, the local functions will be called `read_canvas%d()` with '%d' is the random `canvas_root_id`
1727
	 array `canvas_scripts` will keep track of the `canvas_root_id` number of scripts included in the page.
1728
	 The native `read_canvas()` and `read_dragdrop()` are now linked to the `canvas_root_id` and a global
14225 schaersvoo 1729
 
16849 obado 1730
* 1/10	-multiple interactive canvasdraw scripts in a single page may now work correctly in replying the userdrawarrays and the drag&drop data..
1731
* 25/9	-added command 'demiline x1,y1,x2,y2,color` and commands 'userdraw demiline,color' 'userdraw demilines,color'
1732
* 22/9	-corrected missing js-variable declaration in 'userdraw path(s) ' [use strict]
1733
* 20/9	-added userinput function | input | textarea as alternative command + argment to keywords "userinput_function","userinput_textarea" and "userinput_xy"
1734
* 11/9	-tried to improve 'filltoborder x,y,bordercolor,fillcolor'
1735
* 10/9	-added keyword 'userinput_function'
1736
* 9/9	-corrected placement of inputfields 'userdraw inputs,color' (no longer can input fields be placed on top of each other
1737
* 30/8
1738
	- added command 'clearbutton button_text' to remove all user drawings from userdraw_canvas (and empty all userdraw data arrays)
15111 schaersvoo 1739
	(although I'm not happy to increase the size of the general part of the include file)
1740
	...sometimes functions expect these array's to be defined [use strict]
1741
	- added userdraw_x = [],yserdraw_y = [],userdraw_radius = [] to global section of javascript include
16849 obado 1742
* 29/8
1743
	- corrected 'display radius,color,fontsize' in case there is no 'userdraw circle,color' defined
1744
	- corrected 'use strict' problems with 'clock'
15111 schaersvoo 1745
	display x | y | xy | degree | radius ,color,fontsize
16849 obado 1746
 
1747
* 28/8
1748
	- added argument 'radius' to mousedisplay (in case of 'userdraw circle,color'
15111 schaersvoo 1749
	x_input_1:y_input_:1input_value_1,x_input_2:y_input_:2input_value_2...
16849 obado 1750
	- added 'replyformat 27' : read_canvas() will return array
1751
* 27/8	- corrected flaw [sigalled by 'use strict'] in 'userdraw text,color'
1752
* 26/8	- added command 'userdraw input,color' and 'userdraw inputs,color' [work in progress]
15111 schaersvoo 1753
	 type: x display | y display | xy display | angle degree | angle radian
1754
	 display slider values, use:
1755
	 type: x | y | xy | angle
1756
	 slider min,max,width,height,type,string
14230 schaersvoo 1757
 
16849 obado 1758
* 24/8	- reverted to originale command 'display' and modified slider arguments to support a per slider display of it's value in the main canvas window
15111 schaersvoo 1759
	 work in progress
16849 obado 1760
* 23/8	- added 'slider | slider_degree | slider_radian' to command "display x|y|xy|degree|slider|slider_degree|slider_radian,color,fontsize"
14232 schaersvoo 1761
 
16849 obado 1762
```
15111 schaersvoo 1763
zoom blue
1764
userdraw segment,orange
1765
string black,0.9,0.1,P
1766
fontfamily italic 24px Courier
1767
point 1,0,orange
1768
linewidth 4
1769
angle 0,0,0.3,0,0,green
1770
fillcolor yellow
1771
filled
1772
segment 0,0,1,0,orange
1773
linewidth 2
1774
slider 0,2*pi,200,40,angle degree,use slider to rotate point P
1775
circle 0,0,200,red
1776
fillcolor white
1777
grid 1,1,grey,4,4,10,blue
1778
xaxis 0:0:1:1:2:2:3:3:4:4:5:5:6:6:0.5*pi:\u03c0/2:pi:\u03c0:1.5*pi:3\u03c0/2:2*pi:2\u03c0:3*pi:3\u03c0:4*pi:4\u03c0
16849 obado 1779
fontfamily bold 14px Arial
15111 schaersvoo 1780
opacity 200,150
1781
axis
1782
yrange -1,1
1783
xrange -1,7
1784
size 800,200
16849 obado 1785
```
1786
    for example:
1787
    	if the grid does not match the xaxis values:strings there will be extra tics
15111 schaersvoo 1788
	- added x/y-tics in command 'grid xmajor,ymajor,color,xminor,yminor,tics-size,axiscolor'  case of command 'xaxis' or 'yaxis'
16849 obado 1789
 
1790
* 21/8
1791
	- corrected rotation direction in case of 'slider type angle' (anti-clockwise)
15111 schaersvoo 1792
	- removed 'animate' from dragstuff library : this should be done with a kind of slider...TO DO !!
1793
	  hope this works for all browsers...tested on FreeBSD Opera/Firefox/Seamonkey/Chrome
14234 schaersvoo 1794
 
16849 obado 1795
* 20/8
1796
	- added 'use strict'; to js-include [just to make sure the js-code is "properly written"
15111 schaersvoo 1797
	- slider using 'xy' will start & end by clicking the 'slider rect'
1798
	  'angle' will zoom in/out (using scale_x_radius();) and will use radians for slider values (in contrast to 'arc' which uses width/height in pixels)
1799
	- added command 'angle x,y,width,start,end,color' as alternative to flydraw compatible command 'arc'
16849 obado 1800
 
1801
* 19/8	- improved response speed of slider (in dragstuff library)
15111 schaersvoo 1802
	  The amount of sliders in not limited
1803
	  now a slider may adjust several different objects...until keyword 'killslider' or next 'slider'
16849 obado 1804
 
1805
* 18/8
1806
	- added keyword 'killslider'
15111 schaersvoo 1807
	- for all other object the slider will 'move' / 'rotate' the complete object
1808
	- if slider is used for command 'arc' the angle will be set with the slider
1809
	- javascript:read_dragdrop(); will return an array  'object number:slider value'
16849 obado 1810
* 17/8	- type: xy,x,y,angle : added slider 'rect' for xy movement
1811
* 15/8	- further integration of slider: all draggable objects may have sliders (x/y/angle)
1812
* 14/8
1813
	- adding slider to dragstuff library : work in "progress"
15111 schaersvoo 1814
	- adapted 'rotate angle' to be compatible with flydraw... :  -1*angle (Marina)
1815
	- correct imagefill etc : reset() was missing (Marina)
16849 obado 1816
* 5/8	- added replyformat 25/26 : 'userdraw arc(s),color' with degrees or radians
15111 schaersvoo 1817
	  STILL NOT 100%  CORRECT !!
16849 obado 1818
* 4/8
1819
	- corrected command 'userdraw arc,color'
15111 schaersvoo 1820
	- added precision to the dragdrop library (eg. read_dragdrop() )
16849 obado 1821
* 28/7
1822
	- added precision to the read_canvas() functions.
15111 schaersvoo 1823
	- corrected command 'ellipse' : switched from Beziercurve to arc-method. Should now be a true ellipse
1824
	- corrected command 'roundrect' : no inverted roundrect possible
16849 obado 1825
* 27/7	- corrected command 'square' ...
1826
* 26/7
1827
	- corrected a few flaws introduced by internal changing from 'translation' to 'affine'
15111 schaersvoo 1828
	- corrected command 'lattice' (hope it's ok now)
1829
	- corrected missing dashing of 'arrow' 'arrow2'
1830
	 to imitate flydraw's filling is too much work ... for both browser js-engine and me ...
1831
remark:  hatchfill/dotfill/diamondfill are not the same as flydraw...I've  not understood the flydraw filling correctly...
1832
	- corrected 'filltoborder' and 'floodfill' ... it should / could work now
1833
	- corrected command 'square x,y,side px,color'
1834
	  Changed several functions: new flaws in javascript may be introduced.
1835
	  the translation_ty being affine_matrix[5]
1836
	  the translation_tx being affine_matrix[4]
1837
	- removed internal variable used by 'translate' and moved to generic 'affine matrix'
1838
	- corrected affine : tx/ty now in x/y-range
16849 obado 1839
* 25/7	Thanks to Marina:
1840
 
1841
* 29/6
1842
	- added mousex / mousey commands : just show x or y values of mouse coordinates
1843
	- changed command 'barchart' : now "unlimited" barchart commands will be plotted in a single graph.
1844
	- reverted some correction mechanism for grid / axisnumbering when zooming out...need to rething
15111 schaersvoo 1845
          'userdraw vlines,color'
1846
          'userdraw vline,color'
1847
          'userdraw hlines,color'
1848
          'userdraw hline,color'
16849 obado 1849
	- added
15111 schaersvoo 1850
          Now the sequence is not important. However  both commands should be called at the end of the script
1851
          ('mouse' was only active when 'zoom' function was called before 'mouse')
16849 obado 1852
 
1853
* 28/6
1854
	- corrected preference behaviour of commands 'zoom' and 'mouse'
15111 schaersvoo 1855
	- removed some '\n' from js include code
14234 schaersvoo 1856
 
16849 obado 1857
* 27/6
1858
	- "replyformat 15" will only report inputfields/textareas set 'write' (eg not set 'readonly')
15111 schaersvoo 1859
	- added "replyformat 24" read all inputfields/textareas even those set 'readonly'
16849 obado 1860
* 23/6	- added command 'centerstring color,y,text' for placing a x-centered text in the canvas
1861
* 21/6
1862
	- corrected command jsplot : now more complex(...) functions may be used.
1863
	- increased value MAX_INT from 64 -> 128 : this is used for several arrays in C
1864
	- added some info on 'sgraph' (...)
1865
* 18/6
1866
	- solved small issue with removal of userdraw circle
15111 schaersvoo 1867
	- solved issue with precision (multiple roundings  x <--> px) in read_canvas() and js-functions x2px(x) / px2x(px):last precision in script is used for reply-precision
1868
	- fix stupid error in 'replyformat 23'
1869
	- zoom in y-direction was gone fishing...
1870
	- if wims_status='done' all 'drawing' related input fields are removed  (eg. userinput_xy etc)
1871
	- added flag to avoid multiple including of safe_eval, usd by several optional things
1872
	  added some alert message when inputstring has unfinished calculations , 'like 123 + 10^5/678'
1873
	- adapted 'safe_eval' to accept numbers like 2.345*10^5 (previous version only accepted 10^5...)
1874
          (barchart and linegraph are closely linked to grid: there can be multiple linegraphs in a single grid...but there can only be 1 grid)
16849 obado 1875
 
1876
* 17/6
1877
	- modified command 'piechart' and 'legend' : now multiple piecharts with legends may be present in a single canvas image
15111 schaersvoo 1878
 	- mouseup() in draglibrary corrected
16849 obado 1879
* 15/6	- added timeout for floodfill and filltoborder: the canvas was not yet 'drawn' in current setup , when floodfill was called...
1880
* 10/6	- added '(xy)snaptogrid' to drag library
15111 schaersvoo 1881
	  overide this default behaviour with keyword 'status' or 'nostatus'
16849 obado 1882
* 8/6
1883
	- inputfields/textarea's in canvasimage will be cleared and set 'readonly' when wims status variable is 'done'
15111 schaersvoo 1884
	  (in case you want to draw something...but not send the drawing to wims..)
1885
	- added 'replyformat -1' to disable the javascript read_canvas() function
1886
	  added commands 'userdraw arrow2' and 'userdraw arrows2'
16849 obado 1887
* 7/6
1888
	- corrected more inbalance in save() / restore() in 'draw_arrow()'
15111 schaersvoo 1889
	- corrected inbalance in save() / restore() causing annoying problems in command 'arc'
1890
	  todo CHECK THE REST !!
1891
	- added forgotten rotate&angle arguments to commands 'string / text'
1892
	- changed command 'grid' : now zooming and axisnumbering is slightly better...but it stays amateur scribling, grrrr...
1893
	- corrected typo "};else{" in javascript  replyformat 7
16849 obado 1894
* 6/6
1895
	- removed randomness from command clock (was annoying)
15111 schaersvoo 1896
	    added a lightweight javascipt function to convert math into js-math (only suitable for basic stuff)
1897
	    for plotting curves using clientside calculations: formula is verbatim in page-source
16849 obado 1898
	- added command jscurve color,formula_in_x
1899
* 5/6	- work in progress:
1900
* 2/6    - BPR: replace the dependance with libmatheval to the wims evaluation.
15111 schaersvoo 1901
	  allowing all combinations of 'setlimits', 'trace_jsmath' ,'jsmath' , 'userinput_xy+userdraw' , mouse , drag etc
16849 obado 1902
* 1/6
1903
	- added keyword 'setlimits'
15111 schaersvoo 1904
	- work in progress: added keyword 'setlimits'
16849 obado 1905
* 31/5	- slightly modified "trace_jsmath some_js_math_function_in_x" and "jsmath some_js_math_function_in_x"
1906
* 30/5	- added commands `trace_jsmath some_js_math_function_in_x` and `jsmath some_js_math_function_in_x`
1907
* 27/5	- javascript variable 'precision' was gone fishing
15111 schaersvoo 1908
	  level curve may be set 'onclick' or 'draggable'; every single curve has an unique identifier
16849 obado 1909
* 23/5	- command 'levelcurve' : the quality of the curves is not to be compared with the 'Flydraw levelcurve'
15111 schaersvoo 1910
          I'm not sure if this should be implemented in javascript...
16849 obado 1911
* 22/5	- work in progress: added command 'levelcurve'
15111 schaersvoo 1912
	  removed function get_double() from canvasdraw.
1913
	  corrected command 'rays color,xc,yc,x1,y1....xn,yn' (it was using pixels instead of x/y-range coordinates)
16849 obado 1914
* 21/5	- added forgotten commande 'dvline' and 'dhline'
15111 schaersvoo 1915
	  note: mouse coordinates (for drag / onclick) are not transformed....TODO)
16849 obado 1916
* 20/5	- added command 'affine a,b,c,d,tx,ty' and keyword 'killaffine'  (Marina Cazzola)
15111 schaersvoo 1917
	  'snaptogrid'  " will snap to both xmajor and ymajor (or xminor and yminor, if defined)
1918
	  'ysnaptogrid' : will snap to ymajor (or yminor, if defined)
1919
	  'xsnaptogrid' : will snap to xmajor (or xminor, if defined)
16849 obado 1920
* 19/5	- added keywords
15111 schaersvoo 1921
	- removed command 'debug'
1922
	    x1,y1,x2,y2,x3,y3,.....x(n-1),y(n-1),xn,yn
1923
	    x1,y1,x2,y2,x2,y2,x3,y3,x3,y3.....,x(n-1),y(n-1),x(n-1),y(n-1),xn,yn --replyformat 23-->
16849 obado 1924
* 18/5	- add replyformat 23 : used for 'userdraw polyline' : filtering out the second click on the same (+/- 5 px) point
15111 schaersvoo 1925
	  corrected mixup between userdraw polyline / polygon...
1926
	  if the mouse coordinate display or the student reply -in case of 'userdraw'-  needs a higher precision, just use as last command something like 'precision 10000'
16849 obado 1927
 
1928
* 16/5	- command 'precision' before ylogscale / xlogscale will set the number of decimals of the x-axis / y -axis (a local variable precision is set)
15111 schaersvoo 1929
	  corrected y-axis numbering in case of 'xlogscale'
16849 obado 1930
* 11/5
1931
	- added js function safe_eval() to command 'userinput_xy' to "safely" evaluate math inputs like 10^2 or sqrt(5)
1932
	- corrected x-axis numbering in case of 'ylogscale'
1933
	- corrected problems with ';' in html-text / text-arguments (the ';' is a command separator ... added 22/4)
1934
	- forgotten to clearRect()
15111 schaersvoo 1935
	  (just more copy and paste "programming")
16849 obado 1936
* 10/5	- added 'userdraw polygon,color'  'userdraw line,color' and 'userdraw lines,color' to userinput_xy
1937
* 5/5	- added commands 'ylogscale' , 'xlogscale' , 'xylogscale' , 'xlogbase' and 'ylogbase'
1938
* 25/4	- add 'nok' button to remove last item from userdraw arrays
15111 schaersvoo 1939
	  add keyword usertextarea_xy (...)
16849 obado 1940
* 24/4	- add userdraw polyline,color
1941
* 23/4	- corrected sgraph
1942
* 22/4	- added semicolon ; as 'new line separator' (Marina Cazzola)
1943
* 21/4	- corrected command grid in case xmin > 0  and / or ymin > 0
15111 schaersvoo 1944
	  for use as very (!) primitive 'broken axis graph'
16849 obado 1945
* 20/4	- work in progress: add command `sgraph xstart,ystart,xmajor,ymajor,xminor,yminor,majorgrid_color,minorgrid_color`
14295 schaersvoo 1946
 
16849 obado 1947
```
15111 schaersvoo 1948
	  'userdraw arrows,color'
1949
	  'userdraw arrow,color'
1950
	  'userdraw crosshairs,color'
1951
	  'userdraw crosshair,color'
1952
	  'userdraw circles,color'
1953
	  'userdraw circle,color'
1954
	  'userdraw points,color'
1955
	  'userdraw point,color'
1956
	  'userdraw segments,color'
1957
	  'userdraw segment,color'
1958
	  for now: only implemented in
16849 obado 1959
```
14295 schaersvoo 1960
 
16849 obado 1961
* 18/4	- added keyword 'userinput_xy' : if set 2 or 3 inputfields will be shown...the pupil will be able to 'draw' with mouse and/or by giving  a x-value and y-value (or radius-value)
1962
* 14/4   - added 'snaptogrid' to gridfill and dotfill (e.g. userdraw will snap to the grid)
1963
* 11/4	- corrected flaw in snaptogrid : now works correctly for dividers xminor  and yminor (only if they are even dividers e.g. 2,4,6,8 etc)
1964
* 8/4	- added to wims_svn
1965
 
1966
* 5/4	- corrected flaw in 'normal' userdraw (without snaptogrid)
15111 schaersvoo 1967
	  todo: other gridfill commands may use snaptogrid
1968
	  grid 1,1,black,2,2,6,grey  : will snap to all minor grid lines n/2
1969
	  grid 1,1,black : it will snap to all major grid lines 'n'
16849 obado 1970
* 2/4	- added command / keyword 'snaptogrid' : a userdrawing will snap to the given grid...
15111 schaersvoo 1971
	  added keyword 'status' to disable this default behaviour (e.g. pupils may draw in canvas when wims $status=done
16849 obado 1972
* 25/3	- userdraw functions only active if wims $status != done
15111 schaersvoo 1973
	  canvasdraw now only works in correct wims_environment : e.g. ./canvadraw < fly.txt  will not work anymore
1974
	  No option anymore to gzip the include.
1975
	  The rest is printed in a fairly small buffer and printed to stdout at the end of parsing the fly-script.
16849 obado 1976
* 23/3	- simplified buffer usage : now js-include file in wims-getfile-directoy is standard.
14295 schaersvoo 1977
 
16849 obado 1978
	Probably have to look into str_replace() !
1979
	segfault occured in case "blah" was not present in "temp"  (and no replacement was made) and string length wos big
1980
	On 32/64 bits FreeBSD ; 32/64 bits OpenBSD no problems
1981
 
1982
	```
1983
	if( strstr(temp,"blah") != 0 ){ temp = str_replace( temp ,"blah","beh");}
1984
    char *temp = getstring(infile,1);
1985
    Changed into:
1986
    char *temp = str_replace( getstring(infile,1),"blah","beh");
1987
	```
1988
* 21/3	- corrected spurious segfault on Gentoo 64 bits (leiden) and OpenSuSE-32 :
1989
* 14/3	- forgotten 'break;'
1990
* 3/3	- synchronized commands "arrow" and "arrow2" with flydraw syntax; e.g. arrow x1,y1,x2,y2,head_in_px,color
15111 schaersvoo 1991
	  It works if not too much cropping is required.
1992
	  The commands are still not equal to Flydraw: I'm giving up on this !!
16849 obado 1993
* 28/2
1994
	- tried to correct copy/ropyresized ; using image as background image of div (e.g. no canvas !)
1995
	  We just use the URL of the image...and add some CSS to it (no-repreat / Size / Position) and det the URL to the backgroundImage of the main div
1996
	- an external image copied into a canvas / resized etc... can be set as background of the document.body...
1997
	- an external image copied into a canvas / resized etc... can not be set as CSS backgroundImage of a div... (at least in firefox)
1998
	- there is no way to paint on top of an external image loaded into a canvas...
14295 schaersvoo 1999
 
16849 obado 2000
* 27/2	- solved nasty issue with "drawing on top of external image"  with copy / copyresized
2001
* 19/2	- added command 'animate type' as primitive animation ; only 'point' on curve is implemented
15111 schaersvoo 2002
	  Using generic js-functions in wims-pages to read all mathml-inputs (including the ones in a canvas image !)
16849 obado 2003
* 12/2	- removed reading of mathml-inputfield in canvas (only "replyformat 16" will read it)
14295 schaersvoo 2004
 
15111 schaersvoo 2005
	  canvas_div.style.background-size --> canvas_div.style.backgroundSize
16849 obado 2006
* 8/2
2007
	- corrected syntax in bgimage:
15111 schaersvoo 2008
	- command "bgimage url" will scale to fit background image
16849 obado 2009
* 7/2
2010
	- corrected x-y mixup in case xrange/yrange was forgotten (eg xrange = 0 px ,sizex px)
15111 schaersvoo 2011
	- added forgotten filling of an arc ;command 'filledarc'
2012
	  (something like:fontfamily bold italic 24px Courier)
2013
	  the rest of the gridfonts (numbering or x/yaxis text) is determined by the 'fontfamily'
16849 obado 2014
* 6/2
2015
	- added default fontfamily settings to 'legend', 'xlabel' and 'ylabel' ; size may be set by command 'fontsize'
15111 schaersvoo 2016
	- add command 'dsegment' as alias for dashed segment
2017
	  eg only active inputfields will be read with read_canvas();
16849 obado 2018
* 5/2	- if inputfield has attribute 'readonly', do not read the value when using javascript:read_canvas();
2019
* 3/2
2020
	- added forgotten 'readonly' attribute to js-function 'draw_inputs()'
2021
	- solved(?) some strange fill issues (pixel manipulation) added demo
14295 schaersvoo 2022
 
15111 schaersvoo 2023
          If legendcolors was not set , the default stroke_color will be used in a 'legend'
2024
          for all other legends, we can specify.
2025
          barchart & piechart will use -ofcourse- the same colours for legend
16849 obado 2026
* 1/2
2027
	- add command 'legendcolors color1:color2:color3:...:color_n'
15111 schaersvoo 2028
	- command 'legend string1:string2:string3:..:string_n' may now be used with any 'grid' (e.g. not only for barchart/linegraph/piechart)
2029
	- commands 'xlabel' 'ylabel' only depend on command 'grid' (eg without 'axis' and/or 'axisnumbering')
2030
	- added commands 'xlabel some_string' ylabel some_string'
2031
	- corrected tooltip when using images as 'linktext'
14295 schaersvoo 2032
 
15111 schaersvoo 2033
	will output reply[0]=x1 reply[1]=y1 reply[2]=x2 reply[3]=y2 ... reply[n-1]=x_n reply[n]=y_n
16849 obado 2034
 
2035
* 31/1
2036
	- read_canvas() : Added 'replyformat 22' : single array output (just for use in my existing checkfile)
15111 schaersvoo 2037
	will output words (x1:y1) (x2:y2) (x3:y3) ... (x_n:y_n)
2038
	- read_canvas() : Added 'replyformat 21' : verbatim coordinate output (just for use in my existing checkfile)
2039
	Command "intooltip tooltip_text" will accept html-text, images and now also Mathml as tooltip_text
16849 obado 2040
	- Now "mouse red,24" will default to font '24px Arial'
15111 schaersvoo 2041
	fontfamily [type] [size]px [family]
2042
	was set, the argument fontsize of command "mouse color,fontsize" was ignored...due to the strict syntax in html/js
16849 obado 2043
 
2044
* 29/1  - Corrected js-fontfamily kludge...when something like "fontfamily italic 14px Arial"
15111 schaersvoo 2045
	(On multiple panning/zooming the mouse coordinate display will get 'sluggish' and not very quick in response)
2046
	When 'x' is pressed the page will reload (location.reload();) so the panned/zoomed image or drawing will be reset to it's original state.
16849 obado 2047
 
2048
* 23/1	Added a 'x' to pan/zoom-buttons (command "zoom color")
2049
	`xaxis -4*pi:-4\u03c0:-3*pi:-3\u03c0:-2*pi:-2\u03c0:-1*pi:-\u03c0:pi/2:\u03c0/2:pi:\u03c0`
15111 schaersvoo 2050
	example (unicode allowed; no html)
16849 obado 2051
 
2052
		yaxis y_value:y_text:y_value:y_text:y_value:y_text....
2053
		xaxis x_value:x_text:x_value:x_text:x_value:x_text....
2054
 
2055
* 22/1 Corrected commands with "pi"... javascript did not calculate the x-value...
2056
 
2057
## 2014
2058
(was using keyword 'input' but changed wims_mathml to use a styled textarea as input...)
2059
 
2060
* 28/12 in case of command 'mathml' , look for 'mathml0' to trigger javascript:read_mathml() if no other ineractiveness was previously defined
2061
* 29/11 copy & copyresized of external images : preparing for drag&drop (outside the drag&drop shape library)
15111 schaersvoo 2062
	correction of zoom_buttons (wrong panning in wrong direction...)
16849 obado 2063
* 27/11 improved plotting of asymptotic curves
2064
* 16/11 setting & reading clock (preliminiary: for now just html-buttons for adjusting H,M,S...should be active fields in canvas...)
15111 schaersvoo 2065
	custom  colours: clock 0,0,60,4,35,45,1,2,white,white,white,black,yellow
2066
	custom  colours: clock 0,0,60,4,35,45,1,2,,,,yellow,red
2067
	default colours: clock 0,0,60,4,35,45,1,2,[space]
2068
	clock x,y,r(px),H,M,S,type hourglass,interactive [ ,H_color,M_color,S_color,background_color,foreground_color ]
16849 obado 2069
* 15/11 changed basic syntax of command clock : all colours are now optional
15111 schaersvoo 2070
	Temporarily removed check on 'valid wims-session' : it is not working for a 'chroot' environment (TODO correct this !!)
2071
	(only when using canvasdraw in a 'chroot' environment , giving : Undefined symbol "_ThreadRuneLocale)
2072
	I can not use the normal implementations found in 'ctypes.h' for this purpose, due to a bug in FreeBSD's C-library
16849 obado 2073
* 14/11 implemented own versions of "tolower()" and "toupper()"...
15111 schaersvoo 2074
	clock x,y,r(px),H,M,S,type hourglass,interactive,H_color,M_color,S_color,background_color,foreground_color
16849 obado 2075
* 13/11 Added interactive=2 (multiple choice  / onclick) to select a single clock
15111 schaersvoo 2076
	(work in progress)
2077
	Add basic interactivness
2078
	Add argument 'hourglass type' to controle appearance of analogue clock
16849 obado 2079
* 12/11 Multiple clocks may be set interactive ; read_canvas() will read all active clocks in H:M:S
15111 schaersvoo 2080
	Preparing for command clock (work in progress)
2081
	(was x/y-range -10,10)
2082
	ymin = 0 ymax = ysize
2083
	xmin = 0 xmax = xsize
16849 obado 2084
* 11/11 If xrange / yrange is not given :
15111 schaersvoo 2085
	Todo: check compatibility...I'm not sure it works the same as in 'flydraw'
2086
	"copyresized x1,y2,x2,y2,dx1,dy1,dx2,dy2,filename_URL"	and "copy x,y,x1,y1,x2,y2,filename_URL"
16849 obado 2087
* 08/11 Added commands
15111 schaersvoo 2088
	Just use a fairly recent Firefox / Opera / Chrome
2089
	E.g all non supported browsers will be excluded...no intention to offer 'canvas glue' library for IE < 9
2090
	try(document.createElement('canvas');)catch(e){alert("no support");return;}
16849 obado 2091
* 03/11	Added check on canvas-support in function 'create_canvas()';
2092
* 01/11 Added 'userdraw text,color' to reply types
15111 schaersvoo 2093
	a confirm will popup asking to delete the selected text.This text will be removed from the "userdraw_txt()" answer array.
16849 obado 2094
	Placing the cursor somewhere on a typed text and hitting "delete/backspace/esc",
15111 schaersvoo 2095
	You will need to hit "enter" to add the text to the array "userdraw_txt()" : lightblue background will disappear
2096
	"backspace / delete / esc" will remove typed text.
2097
	While typing the background of every typed char will be lightblue...
2098
	Any string of multiple strings may be placed anywhere on the canvas.
16849 obado 2099
* 30/10 Finished command 'userdraw text,color'
15111 schaersvoo 2100
	(it is ofcource possible, but at a very very high price)
2101
	because the mouse coordinates do not follow the transformation matrix if in the proximity of a text-object.
2102
	vertical or rotated text can not be set drag / onclick,
16849 obado 2103
* 29/10 add horizontal text to drag / onclick
2104
* 28/10 preparing for adding all 'text' commands to drag / click library
15111 schaersvoo 2105
	Would be nice to have some feedback (...)
2106
	need to find a way to bypass browser differences...using 'String.fromCharCode(evt.keyCode);' is not really a safe method ?
16849 obado 2107
* 27/10 add command "userdraw text,color" work in progress...just a single char, for now (no answer_type,yet)
15111 schaersvoo 2108
	(for example to be used for a barchart created by students)
2109
	add commands "userdraw rects,color" "userdraw roundrects,color" for drawing multiple rectangles
2110
	Many different linegraphs may be used in a single plot.
2111
	to be used together with commands 'grid'. May be combined with freestyle x-axis / y0-axis text (commands 'xaxis' 'yaxis')
16849 obado 2112
* 26/10 add command "linegraph x1:y1:x2:y2...x_n:y_n" : may be further controlled by commands 'strokecolor','linewidth','dashed','dashtype'
15111 schaersvoo 2113
	to be used together with commands 'grid'. May be combined with freestyle x-axis / y0-axis text (commands 'xaxis' 'yaxis')
2114
	add command "barchart x1:y1:color1:x2:y2:color2...x_n:y_n:color_n" to automate generation of barchart
16849 obado 2115
* 25/10 add command "legend string1:string2:...:string_n" to add an automatically sized legend to a graph
2116
* 24/10 add command "piechart xc,yc,radius,'data+colorlist'"
14295 schaersvoo 2117
 
15111 schaersvoo 2118
	add command "fontcolor color" (previously fontcolor=strokecolor) now x/y axis-texts color may be different from axis / xy-tics color
16849 obado 2119
* 22/10 grid: x/y major tics and x/y minor tics now different
15111 schaersvoo 2120
	update 'drag curve fill mathml-input' example (selective removal of filled area)
2121
	freestyle x/y-axistext move with panning (e.g stay in visual image)
2122
	to automate filling axis with text insteadof default numbering xmin...xmax
2123
	yaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string-n
2124
	xaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string-n
16849 obado 2125
* 21/10 added commands:
15111 schaersvoo 2126
	tried to improve 'axisnumbering' in command 'grid' ( avoiding number overlap )
16849 obado 2127
* 20/10 added testresults flydraw versus canvasdraw.
15111 schaersvoo 2128
	added "use_rotate" argument to shape library
16849 obado 2129
* 19/10 ellipse x,y,rx,ry,color is draggable/clickable and will scale/resize on zooming (like all other draggable 'massive' objects)
15111 schaersvoo 2130
	multiple instances of tooltip are allowed (as ofcourse is true for multiple canvas)
16849 obado 2131
* 18/10 corrected tooltip to work / integrate in 'real' wims modules
2132
* 15/10 circle x,y,radius(px),color will scale/resize on zooming (like all other draggable 'massive' objects)
2133
* 13/10 corrected hexcolor input
15111 schaersvoo 2134
	reading of useractions in canvas is only possible for a single instance (for now)
2135
	(experimental work in progress)
2136
	by using unique names for all potential conflicting functions
16849 obado 2137
* 12/10 added support for multi-canvasses in a single html-page
2138
* 10/10 added missing "userdraw polygone,color"
2139
* 9/10  added parallel to shape_library
15111 schaersvoo 2140
	default distance is 20 pix from original 'fill click'
2141
	size of 'measuring rectangle' may be tuned with "clickfillmarge"
16849 obado 2142
* 8/10  added specific removal of a 'click_filled' area.
2143
* 7/10  added arc to shape_library
2144
* 6/10  corrected syntax "fill" == "floodfill" = pixel filling to a border
2145
* 5/10  added missing "userdraw rect,color" "userdraw roundrect,color" "userdraw triangle,color"
2146
* 4/10  added missing "userdraw line,color" "userdraw lines,color"
14381 schaersvoo 2147
 
15111 schaersvoo 2148
or search keywords 'html5' 'canvas' om leiden mirror
2149
For live testing: use "directexec" module on Leiden mirror.
2150
For demo: see demo-directory.
2151
For implemented commands: see canvasdraw.html
2152
   (first need to solve  re-draw issues; managing multiple canvasses in drag/click library)
16849 obado 2153
	- Isolate static javascript code  components/functions from C-"programs"
2154
	- Some bitmap operations (like copyresize etc)
2155
	- OEF interface
15111 schaersvoo 2156
Unadressed issues at this point :
14544 schaersvoo 2157
 
15111 schaersvoo 2158
Opera (>9)
2159
Gecko browsers (Firefox > 17)
2160
Microsoft IE10
2161
Tested on :
14546 schaersvoo 2162
 
15111 schaersvoo 2163
(on Leiden mirror and intranet servers only)
2164
It will be used and tested to replace "flydraw" , "GeoGebra" and "flyapplet" in Schaersvoorde modules.
2165
Preliminary version. All javascript code is generated by 'C-program'
14548 schaersvoo 2166
 
16849 obado 2167
* 4/10/2013 First version