Revisions compare

Compare two revisions of: JSX Visualization Color, Label and further Stylings

...	...	@@ -3,16 +3,19 @@
3	3
4	4	After defining the variables, you can use several commands to
5	5	add [label](#adding-labels-to-variables), [color and transparencies](#changing-the-color-of-variables), and [individual stylings](#further-stylings) for the variables.
6		-In addition, you can make the objects leave temporary traces when being moved.
	6	+In addition, you can make the objects leave [temporary traces](#enable-traces-for-objects) when being moved.
7	7	These only affect their appearance in the canvases.
8	8
9	9	You can also choose how numbers appearing in text are displayed (as rational fractions, reals or integers) by setting the [_field_](#command-field) of the variable, and also configure how the tuples for variables like points, vectors, and vectorfields are [displayed in text](#command-vectorform).
10	10
	11	+All commands follow the same syntax $\commandName{<varnameList>}{<value>}$ with possibly an optional argument before the list of variable names, e.g. $\color[<transparency>]{<varnameList>}{<colorName>}$ . The argument $<varnameList>$ is a comma separated list of names of variables to which the command should be applied.
	12	+
	13	+For example if three points $p1$ , $p2$ and $p3$ should appear in red, you can simply use $\color{p1,p2,p3}{red}$ .
11	14
12	15
13	16	# Adding labels to variables
14	17
15		-Labels are added with the command $\label{varname}{labeltext}$ within the environment of
	18	+Labels are added with the command $\label{<varnames>}{<labelText>}$ within the environment of
16	19	the visualization, but outside of the $variable$ -environment, $canvas$ -environment etc.
17	20
18	21	For $labeltext$ , you can use standard text, LaTeX-commands, and math mode, as well as values of variables with the same syntax $\var{n}$ as in texts. However, not all types of variables are supported in labels, but only those that provide a number value or function term. This includes coordinates of points to which you refer as $\var{p}[x]$ and $\var{p}[y}$ , as you would do in text.
...	...	@@ -47,7 +50,7 @@ An exception is the slider. Here the value shown next to the slider will be repl
47	50
48	51	# Changing the color of variables
49	52
50		-The default color of an object is changed by the command $\color{varname}{color}$ .
	53	+The default color of an object is changed by the command $\color{<varnames>}{<colorName>}$ .
51	54	While defining colors you can also optionally
52	55	define the transparency between 0 and 1 where 0 has no transparency at all,
53	56	and 1 will make the plotted variable object not visible.
...	...	@@ -65,7 +68,7 @@ e.g. #32CD32 which would be the same as the color LimeGreen.
65	68	\end{variables}
66	69
67	70
68		-\color{p}{RED} %set color of p to red
	71	+\color{p,q}{RED} %set color of p and q to red
69	72	\color[0.1]{g}{DARKGREEN} % set color of g to dark green with 10% transparency
70	73	`
71	74
...	...	@@ -80,7 +83,7 @@ Caution: In the IFELSE-condition, you are only allowed to use those variables wh
80	83
81	84	# Further stylings
82	85
83		-The default styling of variables in the canvas can be changed by the command $\style{varname}{styling-options}$ . The styling-options here is a comma-separated list of options that JSXGraph offers for styling, e.g. for a point with varname $p$ you can use $\style{p}{face:'[]', size:10}$ to display the point as a big square.
	86	+The default styling of variables in the canvas can be changed by the command $\style{<varnames>}{<styling-options>}$ . The styling-options here is a comma-separated list of options that JSXGraph offers for styling, e.g. for a point with varname $p$ you can use $\style{p}{face:'[]', size:10}$ to display the point as a big square.
84	87
85	88	See the [JSXGraph documentation](https://jsxgraph.org/wiki/index.php?title=Main_Page) for more details on the options available.
86	89	Specifically for
...	...	@@ -88,29 +91,32 @@ Specifically for
88	91	* lines/arrows: [https://jsxgraph.org/wiki/index.php/Line](https://jsxgraph.org/wiki/index.php/Line)
89	92	* circles: [https://jsxgraph.org/wiki/index.php/Circle](https://jsxgraph.org/wiki/index.php/Circle)
90	93
	94	+It is also allowed to have several style command affecting the same variable.
	95	+For example, when you would like to have three points $p1$ , $p2$ and $p3$ , all with face '[]', but $p3$ should in addition be large, you can use the lines
	96	+`LaTeX
	97	+\style{p1,p2,p3}{face: '[]'}
	98	+\style{p3}{size: 10}
	99	+`
91	100
92	101	## Styling of sequences
93	102
94		-The [sequences](JSX-Visualization-Variables.md#15-sequences) in visualizations consist of points and lines. For changing the styling of its points use the $\style$ -command like $\style{varname}{points:{styling-options}}$ where $varname$ is the name of the sequence-variable, and $styling-options$ are styling options as described above for points.
95		-In the same way, the styling of the lines can be changed by $\style{varname}{lines:{styling-options}}$ .
	103	+The [sequences](JSX-Visualization-Variables.md#15-sequences) in visualizations consist of points and lines. For changing the styling of its points use the $\style$ -command like $\style{<varname>}{points:{styling-options}}$ where $<varname>$ is the name of the sequence-variable, and $styling-options$ are styling options as described above for points.
	104	+In the same way, the styling of the lines can be changed by $\style{<varname>}{lines:{styling-options}}$ .
96	105
97	106	## Changing length of sliders
98	107
99	108	By default, sliders are positioned in the lower left corner of the canvas with a fixed width relative to the canvas width.
100		-The command $\sliderPositioning{varname}{<value>}$ allows to change that behaviour for the mentioned slider.
	109	+The command $\sliderPositioning{<varnames>}{<value>}$ allows to change that behaviour for the mentioned slider.
101	110	Currently, you can only change the width, by using as value e.g. $width:0.8$ . Here, the number determines the width relative to the canvas width.
102	111	Default value is $0.4$ .
103	112
104	113	# Enable traces for objects
105	114	You can make the objects leave temporary traces when they are moved by user interaction.
106		-The command for enabling this is $\trace[duration]{varname}{styling-options}$ where $varname$ is the name of the variable, and $styling-options$ are styling options as described for the [command $\styling$ ](#further-stylings).
	115	+The command for enabling this is $\trace[duration]{<varnames>}{<styling-options>}$ where $<varnames>$ is the list of names of the variables, and $<styling-options>$ are styling options as described for the [command $\styling$ ](#further-stylings).
107	116	The default styling for the trace is the same as for the object itself, so you only have to provide those attributes that should be different.
108	117	With the optional argument $duration$ , you can provide a time (in milliseconds) for how long a part of the trace remains on canvas. Default is 300 (ms).
109	118	A special case occurs, if you set $duration$ to $0$ . In this case, all parts of the trace will remain visible until the user releases the mouse button.
110	119
111		-# Changing properties for several objects
112		-
113		-If you need to change label, color, styles etc. for several objects in the same way, instead of just giving one variable name as the first parameter, you can also give a comma separated list of variable names, e.g. if the three points $p1$ , $p2$ and $p3$ should appear in red, you can simply use $\color{p1,p2,p3}{red}$ .
114	120
115	121	# Configurations for variables in visualization text
116	122
117	123

News

Index

Compare two revisions of: JSX Visualization Color, Label and further Stylings