Introduction

python

import stitch

w = stitch.StitchWidget()
w.srcdoc = """
<html>
<script>
window.addEventListener("message", function(event) {
    if (event.source === window.parent && event.data.type === "kernelmsg") {
        document.getElementById("msgview").innerHTML = event.data.content;
        window.parent.postMessage({type: "clientmsg", content: event.data.content}, "*");
    }
});
window.addEventListener("load", function(){
    var prevHeight = 0;
    var prevWidth = 0;
    setInterval(function() {
        var body = document.body, html = document.documentElement;
        var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
        var width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
        if (height !== prevHeight || prevWidth !== width) {
            msg = {type: 'resize', content: {height: height + 'px', width: width + 'px'}};
            window.parent.postMessage(msg, "*");
            prevHeight = height;
            prevWidth = width;
        }
    }, 100);
});
</script>
<body>
<div style="white-space: nowrap">
MESSAGE: <span id="msgview"></span>
</div>
</body>
</html>
"""
w

python

w.kernelmsg = "Houston, we have a problem."
w

python

w.observe(lambda x: print(x["new"]), "kernelmsg")
w.kernelmsg = "Wow, a change!"