add frame message objec wrapper / helper that looks like engine api
This commit is contained in:
Stewart Allen
parent
0f4e92f7a2
commit
5fe11ef05a
4 changed files with 118 additions and 18 deletions
4
app.js
4
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) {
|
||||
|
|
|
|||
80
src/kiri/frame.js
Normal file
80
src/kiri/frame.js
Normal file
|
|
@ -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 });
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
|
@ -405,13 +405,14 @@
|
|||
});
|
||||
}
|
||||
if (data.emit) API.event.emit(data.emit, data.message)
|
||||
switch (data.get) {
|
||||
case "all": send({all: settings}); break;
|
||||
if (data.get) switch (data.get) {
|
||||
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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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("{}");
|
||||
window.addEventListener('message', receive_message);
|
||||
edit.session.setValue(localStorage.kiri_frame_code || defc);
|
||||
kiri.frame.setFrame('fbody');
|
||||
kiri.frame.onmessage = receive_message;
|
||||
}
|
||||
function receive_message(msg) {
|
||||
let { origin, source, target, data } = msg;
|
||||
function receive_message(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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue