Embed sketchometry

Starting with version 1.2.0 it is possible to embed sketchometry in web pages like learning management systems or content management systems. The preferred way to do this is to use an iframe and control sketchometry from the hosting web site with postMessage.

Send messages to sketchometry

Let’s suppose that sketchometry is embedded in the web page in an iframe with id sketchometry. Then, the hosting web page is communicating with the sub-object contentWindow of the iframe’s DOM node:

1
2
    var skm = document.getElementById("sketchometry").contentWindow;
    skm.postMessage({'code': 'init'}, URL);

the variable URL contains the URL where sketchometry is loaded from. Here, one can use either https://embed.sketchometry.org or download the zip file containing sketchometry and put it on a dedicated web server.

Receive messages from sketchometry

The only situation where sketchometry sends a message back to the hosting web page is after a save message. Before the hosting web site can receive postMessages from an iframe an eventhandler for the event message has to be customized. Examples:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var receiveMessage = function(evt) {
    var content;

    if (evt.origin !== "https://embed.sketchometry.org") {
        console.log("REJECT", evt.origin)
        return;
    }

    if (evt.data.code === 'save') {
        content = evt.data.data;

        // Write construction contained in content to database
        console.log("RECEIVED", content);
    }
};

window.addEventListener("message", receiveMessage, false);

But first, the saving of a construction has to be triggered by a save message:

1
    skm.postMessage({'code': 'save'}, URL);

Possible messages

  • {'code': 'init'}: Prepare embedded version of sketchometry
  • {'code': 'load', 'data': construction string}: Load base64 encoded sketch string
  • {'code': 'new', 'name': 'construction name'}: Open new construction
  • {'code': 'save'}: get the actual construction as base64 encoded sketch string. sketchometry will send a postMessage to the hosting web page of the form {‘code’: ‘save’, ‘data’: content}
  • {'code': 'set', 'data': {settingId': 'key', 'value': val}}: Change settings, see settings.js.
    • Examples are: {'code': 'set', 'data': {'settingId': 'language', 'value': 'de'}
  • {'code': 'clear'}: Removes all constructions from local storage.

Example

Here is an example of a hosting web page which enables the control of sketchometry by buttons:

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
70
71
72
73
74
75
76
<html>
<head><title>embed sketchometry</title></head>
<script type="text/javascript">

var URL = 'https://embed.sketchometry.org';

var init = function() {
    var skm = document.getElementById("sketchometry").contentWindow;
    skm.postMessage({'code': 'init'}, URL);
};

var showCircle = function() {
    var construction = "UEsDBAoAAAAIAKKSs ... AAALQIAAAAA";

    var skm = document.getElementById("sketchometry").contentWindow;
    skm.postMessage({'code': 'load',
                     'data': construction},
        URL);
};

var newConstruction = function() {
    var skm = document.getElementById("sketchometry").contentWindow;
    skm.postMessage({'code': 'new', 'name': 'new file'}, URL);
};

var save = function() {
    var skm = document.getElementById("sketchometry").contentWindow;
    skm.postMessage({'code': 'save'}, URL);
};

var setLang = function(lang) {
    var skm = document.getElementById("sketchometry").contentWindow;
    skm.postMessage({'code': 'set',
                     'data': {'settingId': 'language', 'value': lang}
                    }, URL);
};

var clearAll = function() {
    var skm = document.getElementById("sketchometry").contentWindow;
    skm.postMessage({'code': 'clear'}, URL);
};

var receiveMessage = function(evt) {
    var content;

    if (evt.origin !== "https://embed.sketchometry.org") {
        console.log("REJECT", evt.origin)
        return;
    }

    if (evt.data.code === 'save') {
        content = evt.data.data;

        // Write construction contained in content to database
        console.log("RECEIVED", content);
    }
};

window.addEventListener("message", receiveMessage, false);

</script>
<body>
<h1>This is a web page containing sketchometry</h1>
<iframe id="sketchometry" width="800" height="600"
    src="https://embed.sketchometry.org/index.html"
    onLoad="init();"></iframe>
<p>
<button onClick="showCircle();">Load construction</button>
<button onClick="newConstruction();">New construction</button>
<button onClick="save();">Save construction</button>
<button onClick="setLang('de');">Choose language "Deutsch"</button>
<button onClick="setLang('en');">Choose language "English"</button>
<button onClick="clearAll();">Clear gallery</button>
</p>
</body>
</html>

The live demo of this example is at https://embed.sketchometry.org/iframe.html.

Enjoy, Alfred