add frame message objec wrapper / helper that looks like engine api

app.js

@@ -368,6 +368,9 @@ const script = {
         "kiri/codec",
         "kiri/engine"
     ].map(p => `src/${p}.js`),
+    frame : [
+        "kiri/frame"
+    ].map(p => `src/${p}.js`),
     meta : [
         "ext/three",
         "license",
@@ -709,6 +712,7 @@ function prepareScripts() {
     code.kiri = concatCode(script.kiri);
     code.worker = concatCode(script.worker);
     code.engine = concatCode(script.engine);
+    code.frame = concatCode(script.frame);
 }
 
 function concatCode(array) {

src/kiri/frame.js

@@ -0,0 +1,80 @@
+/** Copyright Stewart Allen <sa@grid.space> -- All Rights Reserved */
+
+"use strict";
+
+(function() {
+    let KIRI = self.kiri = self.kiri || {};
+    let frame, cwin, onevent = {};
+
+    function $(id) { return document.getElementById(id) }
+
+    function setFrame(fo) {
+        frame = fo;
+        cwin = fo.contentWindow;
+    }
+
+    function send(msg) {
+        cwin.postMessage(msg);
+    }
+
+    function recv(msg) {
+        let { origin, source, target, data } = msg;
+        let efn = onevent[data.event];
+        if (efn) {
+            efn(data.data, data.event);
+        }
+        API.onmessage(data, msg);
+    }
+
+    let API = KIRI.frame = {
+        setFrame: (io) => {
+            let type = typeof(io);
+            switch (type) {
+                case 'string': setFrame($(io)); break;
+                case 'object': setFrame(io); break;
+                default: throw `invalid frame type ${type}`;
+            }
+            window.addEventListener('message', msg => {
+                let { origin, source, target, data } = msg;
+                if (source.window === cwin) {
+                    recv(msg);
+                }
+            });
+        },
+
+        send: send,
+
+        load: (load) => { send({ load }) },
+
+        parse: (data) => { send({ parse })},
+
+        get: (scope) => { send({ get: scope })},
+
+        setMode: (mode) => { send({ mode }) },
+
+        setDevice: (device) => { send({ device })},
+
+        setProcess: (process) => { send({ process })},
+
+        setFeatures: (features) => { send({ features })},
+
+        slice: () => { send({ function: "slice" }) },
+
+        prepare: () => { send({ function: "prepare" }) },
+
+        export: () => { send({ function: "export" }) },
+
+        onmessage: () => { },
+
+        progress: (progress, message) => { send({ progress, message }) },
+
+        alert: (alert, time) => { send({ alert, time }) },
+
+        emit: (emit, message) => { send({ emit, message }) },
+
+        onevent: (event, fn) => {
+            onevent[event] = fn;
+            send({ event });
+        }
+    };
+})();

src/kiri/main.js

@@ -405,13 +405,14 @@
             });
         }
         if (data.emit) API.event.emit(data.emit, data.message)
-        switch (data.get) {
+        if (data.get) switch (data.get) {
-            case "all": send({all: settings}); break;
             case "mode": send({mode: settings.mode}); break;
             case "device": send({device: settings.device}); break;
             case "process": send({process: settings.process}); break;
+            default: send({all: settings}); break;
+
         }
-        switch (data.set) {
+        if (data.set) switch (data.set) {
             case "features":
                 Object.assign(feature, data.features);
                 break;
@@ -424,6 +425,14 @@
                 saveSettings();
                 break;
         }
+        if (data.parse) {
+            new moto.STL().parse(data.parse, vertices => {
+                let widget = newWidget().loadVertices(vertices);
+                platform.add(widget);
+            });
+        }
+        if (data.load) platformLoad(data.load);
+        if (data.clear) platform.clear();
         if (data.alert) alert2(data.alert, data.time);
         if (data.progress >= 0) setProgress(data.progress, data.message);
     });

web/kiri/frame.html

@@ -82,8 +82,13 @@
         }
     </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
-    <script xsrc="/code/engine.js"></script>
+    <script src="/code/frame.js"></script>
     <script>
+        let defc = [
+            "let api = kiri.frame;",
+            "api.setMode('FDM');",
+            "api.slice();"
+        ].join('\n');
         let msgs = [];
         let edit;
         function $(id) { return document.getElementById(id) }
@@ -96,18 +101,19 @@
             });
             edit.session.setTabSize(4);
             edit.session.setUseSoftTabs(true);
-            edit.session.setValue("{}");
+            edit.session.setValue(localStorage.kiri_frame_code || defc);
-            window.addEventListener('message', receive_message);
+            kiri.frame.setFrame('fbody');
+            kiri.frame.onmessage = receive_message;
         }
-        function receive_message(msg) {
+        function receive_message(data, msg) {
-            let { origin, source, target, data } = msg;
             msgs.push(JSON.stringify(data));
             $('rbody').innerText = msgs.join("\n-----\n");
             $('rbody').scrollTop = 1000000;
         }
-        function send_message() {
+        function run_code() {
             let code = edit.session.getValue();
-            $('fbody').contentWindow.postMessage(eval(`(${code})`));
+            eval(`(function(){${code}})()`);
+            localStorage.kiri_frame_code = code;
         }
     </script>
 </head>
@@ -115,9 +121,9 @@
     <h2 id="title">Kiri:Moto Frame Message API</h2>
     <div id="demo">
         <div id="mcode">
-            <div id="mhead">message</div>
+            <div id="mhead">code</div>
             <div id="mbody"></div>
-            <div id="mfoot"><button onclick="send_message()">send message</button></div>
+            <div id="mfoot"><button onclick="run_code()">send message</button></div>
             <div id="rhead">output</div>
             <div id="rbody"></div>
         </div>
@@ -127,20 +133,21 @@
         </div>
     </div>
     <div id="api">
-        <h2>Message API</h2>
+        <h2>Frame Message API</h2>
         <li><label>load(url)</label> - where URL points to an STL</li>
         <li><label>parse(data)</label> - where data is a string or binary STL</li>
+        <li><label>setFrame(id_obj)</label> - id or object of iframe with Kiri:Moto loaded</li>
         <li><label>setMode(mode)</label> - FDM, CAM, LASER, SLA</li>
-        <li><label>setListener(fn)</label> - function to receive engine progress messages</li>
         <li><label>setDevice(options)</label> - change default object parameters</li>
         <li><label>setProcess(options)</label> - change default process parameters</li>
-        <li><label>moveTo(x,y,z)</label> - absolute move origin of loaded object</li>
-        <li><label>move(x,y,z)</label> - relative move origin of loaded object</li>
-        <li><label>scale(x,y,z)</label> - scale axes of loaded object</li>
-        <li><label>rotate(x,y,z)</label> - rotate axes of loaded object in radians</li>
         <li><label>slice()</label> - async slice loaded object</li>
         <li><label>prepare()</label> - async path routing of slice data</li>
         <li><label>export()</label> - async gcode generation from path routing</li>
+        <li><label>onmessage(fn)</label> - function to receive all messages</li>
+        <li><label>onevent(event, fn)</label> - function to receive named messages</li>
+        <li><label>emit(event, data)</label> - send named event with data</li>
+        <li><label>alert(msg, time)</label> - show alert message with optional time in seconds</li>
+        <li><label>progress(pct, msg)</label> - set progress bar (0-1) with optional message</li>
     </div>
 </body>
 </html>