You're not reading the latest revision of this page, which is here.

CindyJS

CindyJS is a framework to create interactive content.

MUMIE offers to embed CindyJS in your content, or create standalone CindyJS content in a simplified manner.
If you created a visualisation with the program Cinderella, it is straight forward to incorporate the corresponding HTML into your tex-file in webMiau.

We also offer a list of templates, so that you don't have to start from scratch when you are going to create your interactive visualizations by hand.

Example:

\begin{cindyJS}[default]{CSCanvas}
 
  \cindyObject[width: 500, height: 500, axes: true]{{geometry: [
    {name: "A", type: "Free", pos: [4, -2,1], color: [1.0, 0.0, 0.0], labeled: true},
    {name: "B", type: "Free", pos: [4, 2,1], color: [1.0, 0.0, 0.0], labeled: true},
    {name: "C", type: "Free", pos: [0, 0.5, 1], color: [1.0, 0.0, 0.0], labeled: true},
    {name: "S", type: "Free", pos: [1,1 , 1], color: [1.0, 1.0, 0.0], labeled: true}
  ]}}
  \begin{cindyscript}{csinit}
      S.x=(A.x+B.x+C.x)/3;
      S.y=(A.y+B.y+C.y)/3;
  \end{cindyscript}
  \begin{cindyscript}{csmove}
      S.x=(A.x+B.x+C.x)/3;
      S.y=(A.y+B.y+C.y)/3;
   \end{cindyscript}
 
\end{cindyJS}

CindyJS-environment

The whole component is placed in an environment \begin{cindyJS}[<templateName>]{<canvasId>} ... \end{cindyJS}.
The first parameter <templateName> is optional and defaults to the template default which consists of an empty canvas with a grey background. The second parameter is the ID of the canvas. If you use several Cindy-visualizations in one document, their IDs have to be distinct.

Within the cindyJS-environment, the following command and environment are available (more details are below):

command \cindyObject: Here you can add content to your visualization.
environment cindyscript: Each environment contains a cindyscript for your visualization.

Templates

Currently, there is only the template default available, which sets the following attributes:

defaultAppearance: {
    dimDependent: 0.7,
    fontFamily: 'sans-serif',
    lineSize: 1,
    pointSize: 5.0,
    textsize: 12.0,
},
angleUnit: '°',
csconsole: false,

Furthermore, it sets width and height to 500px, and the minimally visible ranges for x- and y-coordinates to the range from -10 to 10.

command cindyObject

The command \cindyObject[<canvasOptions>]{<content>} allows to add content to your visualization like geometric objects. With the optional argument <canvasOptions>, you can change the appearance of the canvas (like width, height, or background, showing/hiding the axes).
The mandatory argument <content> is mainly for providing the geometric objects for your visualization.

environment cindyscript

The cindyscript-environments replace the cindyscripts that you usually would put inside your HTML-document.
The syntax is \begin{cindyscript}{<scriptID>} ... \end{cindyscript} where <scriptID> is the ID of the script, like csinit, csdraw etc. (see CindyJS documentation).
Within the environment you write your cindyscript commands as you would do in HTML.

Transforming HTML-output from Cinderella to MUMIE-content

When you create visualizations with Cinderella, and export it as HTML, you can easily transform this HTML to a cindy component in your MUMIE-article.

Assume the following HTML-output:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
 
    <title>Construction.cdy</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
 
        #CSConsole {
            background-color: #FAFAFA;
            border-top: 1px solid #333333;
            bottom: 0px;
            height: 200px;
            overflow-y: scroll;
            position: fixed;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://cindyjs.org/dist/v0.8/CindyJS.css">
    <script type="text/javascript" src="https://cindyjs.org/dist/v0.8/Cindy.js"></script>
<script id="csinit" type="text/x-cindyscript">
//Script (CindyScript)
S.xy = (A.xy+B.xy+C.xy)/3;
;
 
</script>
<script id="csmove" type="text/x-cindyscript">
//Script (CindyScript)
S.xy = (A.xy+B.xy+C.xy)/3;
;
 
</script>
    <script type="text/javascript">
var cdy = CindyJS({
  scripts: "cs*",
  defaultAppearance: {
    dimDependent: 0.7,
    fontFamily: "sans-serif",
    lineSize: 1,
    pointSize: 5.0,
    textsize: 12.0
  },
  angleUnit: "°",
  geometry: [
    {name: "A", type: "Free", pos: [2.08, -2.72, 4.0], color: [1.0, 0.0, 0.0], labeled: true},
    {name: "B", type: "Free", pos: [4.0, -3.5, 0.76], color: [1.0, 0.0, 0.0], labeled: true},
    {name: "C", type: "Free", pos: [4.0, 0.7, 0.5], color: [1.0, 0.0, 0.0], labeled: true},
    {name: "S", type: "Free", pos: [4.0, -1.1, 0.88], color: [1.0, 1.0, 0.0], labeled: true}
  ],
  ports: [{
    id: "CSCanvas",
    width: 600,
    height: 560,
    transform: [{visibleRect: [-9.06, 9.34, 10.06, -10.02]}],
    background: "rgb(168,176,192)"
  }],
  csconsole: false,
  cinderella: {build: 2039, version: [3, 0, 2039]}
});
    </script>
</head>
<body>
    <div id="CSCanvas"></div>
</body>
</html>

This shows three movable red points A,B and C, as well as a yellow point S which always marks the center of gravity of the three points.

For having this applet inside MUMIE, start by writing the following snippet in your MUMIE article in WebMiau:

1
2
3
4
5 \begin{cindyJS}{CSCanvas}
\cindyObject[..]{..}    
 
 
\end{cindyJS}

Copy the part width: 600, height: 560, transform: [{visibleRect: [-9.06, 9.34, 10.06, -10.02]}], background: "rgb(168,176,192)"
into the optional argument of the command \cindyObject, and copy the part geometry: [.....] into the mandatory argument of the command \cindyObject. As our default template contains axes, add axes: false to the optional argument.

Finally, for the two cindyScript-environments of the HTML write two environments \begin{cindyscript}{<scriptID>}...\end{cindyscript}, copy the ids csinit and csmove, respectively, for the argument <scriptID>, and copy the content of the scripts into the body of the two environments.

Your Cindy component inside MUMIE is ready!

Your result should read something like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 \begin{cindyJS}{CSCanvas}
 
  \cindyObject[width: 600, height: 560, transform: [{visibleRect: [-9.06, 9.34, 10.06, -10.02]}],
  background: "rgb(168,176,192), axes: false]{geometry: [
          {name: "A", type: "Free", pos: [2.08, -2.72, 4.0], color: [1.0, 0.0, 0.0], labeled: true},
          {name: "B", type: "Free", pos: [4.0, -3.5, 0.76], color: [1.0, 0.0, 0.0], labeled: true},
          {name: "C", type: "Free", pos: [4.0, 0.7, 0.5], color: [1.0, 0.0, 0.0], labeled: true},
          {name: "S", type: "Free", pos: [4.0, -1.1, 0.88], color: [1.0, 1.0, 0.0], labeled: true}
      ]}
  \begin{cindyscript}{csinit}
      S.xy = (A.xy+B.xy+C.xy)/3;
  \end{cindyscript}
 
  \begin{cindyscript}{csmove}
      S.xy = (A.xy+B.xy+C.xy)/3;
  \end{cindyscript}
 
\end{cindyJS}