start a new look
This commit is contained in:
parent
672d42fe41
commit
d3680873fe
8 changed files with 1075 additions and 1539 deletions
2
app.js
2
app.js
|
|
@ -235,7 +235,7 @@ const script = {
|
|||
"moto/space",
|
||||
"moto/load-stl",
|
||||
"moto/db",
|
||||
"moto/ui",
|
||||
"kiri/ui",
|
||||
"kiri/lang",
|
||||
"kiri/lang-en",
|
||||
"kiri/fill",
|
||||
|
|
|
|||
222
src/kiri/init.js
222
src/kiri/init.js
|
|
@ -522,7 +522,7 @@
|
|||
let code = devices[API.mode.get_lower()][devicename];
|
||||
setDeviceCode(code, devicename);
|
||||
}
|
||||
$('selected-device').innerHTML = devicename;
|
||||
// $('selected-device').innerHTML = devicename;
|
||||
}
|
||||
|
||||
// only for local filters
|
||||
|
|
@ -535,6 +535,7 @@
|
|||
}
|
||||
|
||||
function setDeviceCode(code, devicename) {
|
||||
return console.log('TODO setDeviceCode');
|
||||
try {
|
||||
if (typeof(code) === 'string') code = js2o(code) || {};
|
||||
|
||||
|
|
@ -1010,6 +1011,7 @@
|
|||
}
|
||||
|
||||
function updateCatalog(files) {
|
||||
return console.log('TODO catalog render');
|
||||
let table = UI.catalogList,
|
||||
list = [];
|
||||
table.innerHTML = '';
|
||||
|
|
@ -1126,9 +1128,9 @@
|
|||
layerID: $('layer-id'),
|
||||
layerSpan: $('layer-span'),
|
||||
layerRange: $('layer-range'),
|
||||
loading: $('loading').style,
|
||||
progress: $('progress').style,
|
||||
prostatus: $('prostatus'),
|
||||
loading: $('progress').style,
|
||||
progress: $('progbar').style,
|
||||
prostatus: $('progtxt'),
|
||||
selection: $('selection'),
|
||||
sizeX: $('size_x'),
|
||||
sizeY: $('size_y'),
|
||||
|
|
@ -1184,44 +1186,44 @@
|
|||
gcodePre: UC.newText(LANG.dv_head_s, {title:LANG.dv_head_l, modes:GCODE, size:14, height:3}),
|
||||
gcodePost: UC.newText(LANG.dv_foot_s, {title:LANG.dv_foot_l, modes:GCODE, size:14, height:3}),
|
||||
|
||||
mode: UC.newGroup(LANG.mo_menu, assets, {region:"left", poprow:false}),
|
||||
modeTable: UC.newTableRow([
|
||||
[ UI.modeFDM = UC.newButton(LANG.mo_fdmp, function() { API.mode.set('FDM',null,platform.update_size) }, {icon: icons.fdm}) ],
|
||||
[ UI.modeSLA = UC.newButton(LANG.mo_slap, function() { API.mode.set('SLA',null,platform.update_size) }, {icon: icons.sla}) ],
|
||||
[ UI.modeLASER = UC.newButton(LANG.mo_lazr, function() { API.mode.set('LASER',null,platform.update_size) }, {icon: icons.laser}) ],
|
||||
[ UI.modeCAM = UC.newButton(LANG.mo_cncm, function() { API.mode.set('CAM',null,platform.update_size) }, {icon: icons.cam, id:"modeCAM"}) ]
|
||||
]),
|
||||
system: UC.newGroup(LANG.su_menu),
|
||||
sysTable: UC.newTableRow([
|
||||
[ UI.setupDevices = UC.newButton(LANG.su_devi, showDevices) ],
|
||||
[ UI.setupTools = UC.newButton(LANG.su_tool, showTools, {modes:CAM}) ],
|
||||
[ UI.setupExport = UC.newButton(LANG.su_xprt, settingsExport, {modes:ALL, expert:true}) ],
|
||||
[ UI.localButton = UC.newButton(LANG.su_locl, API.show.local, {modes:FDM_CAM, expert:true}) ]
|
||||
]),
|
||||
wsFile: UC.newGroup(LANG.fe_menu),
|
||||
wsFileTable: UC.newTableRow([
|
||||
[ UI.import = UC.newButton(LANG.fn_recn, undefined, {class:"asym"}) ],
|
||||
[ UI.load = UC.newButton(LANG.fn_impo, function() { API.event.import() }, {class:"asym"}) ]
|
||||
]),
|
||||
wsFunc: UC.newGroup(LANG.fn_menu),
|
||||
wsFuncTable: UC.newTableRow([
|
||||
[ UI.modeArrange = UC.newButton(LANG.fn_arra, platform.layout) ],
|
||||
[ UI.modeSlice = UC.newButton(LANG.fn_slic, API.function.slice) ],
|
||||
[ UI.modePreview = UC.newButton(LANG.fn_prev, API.function.print) ],
|
||||
[ UI.modeExport = UC.newButton(LANG.fn_expo, API.function.export) ]
|
||||
]),
|
||||
|
||||
workspace: UC.newGroup(LANG.ws_menu, undefined, {modes:ALL, expert:true}),
|
||||
wsTable: UC.newTableRow([
|
||||
[
|
||||
UC.newButton(LANG.vu_sptp, SPACE.view.top),
|
||||
UC.newButton(LANG.vu_home, SPACE.view.home),
|
||||
],[
|
||||
UI.saveButton =
|
||||
UC.newButton(LANG.ws_save, API.space.save),
|
||||
UC.newButton(LANG.ws_cler, API.space.clear)
|
||||
]
|
||||
], {modes:ALL, expert:true}),
|
||||
// mode: UC.newGroup(LANG.mo_menu, assets, {region:"left", poprow:false}),
|
||||
// modeTable: UC.newTableRow([
|
||||
// [ UI.modeFDM = UC.newButton(LANG.mo_fdmp, function() { API.mode.set('FDM',null,platform.update_size) }, {icon: icons.fdm}) ],
|
||||
// [ UI.modeSLA = UC.newButton(LANG.mo_slap, function() { API.mode.set('SLA',null,platform.update_size) }, {icon: icons.sla}) ],
|
||||
// [ UI.modeLASER = UC.newButton(LANG.mo_lazr, function() { API.mode.set('LASER',null,platform.update_size) }, {icon: icons.laser}) ],
|
||||
// [ UI.modeCAM = UC.newButton(LANG.mo_cncm, function() { API.mode.set('CAM',null,platform.update_size) }, {icon: icons.cnc, id:"modeCAM"}) ]
|
||||
// ]),
|
||||
// system: UC.newGroup(LANG.su_menu),
|
||||
// sysTable: UC.newTableRow([
|
||||
// [ UI.setupDevices = UC.newButton(LANG.su_devi, showDevices) ],
|
||||
// [ UI.setupTools = UC.newButton(LANG.su_tool, showTools, {modes:CAM}) ],
|
||||
// [ UI.setupExport = UC.newButton(LANG.su_xprt, settingsExport, {modes:ALL, expert:true}) ],
|
||||
// [ UI.localButton = UC.newButton(LANG.su_locl, API.show.local, {modes:FDM_CAM, expert:true}) ]
|
||||
// ]),
|
||||
// wsFile: UC.newGroup(LANG.fe_menu),
|
||||
// wsFileTable: UC.newTableRow([
|
||||
// [ UI.import = UC.newButton(LANG.fn_recn, undefined, {class:"asym"}) ],
|
||||
// [ UI.load = UC.newButton(LANG.fn_impo, function() { API.event.import() }, {class:"asym"}) ]
|
||||
// ]),
|
||||
// wsFunc: UC.newGroup(LANG.fn_menu),
|
||||
// wsFuncTable: UC.newTableRow([
|
||||
// [ UI.modeArrange = UC.newButton(LANG.fn_arra, platform.layout) ],
|
||||
// [ UI.modeSlice = UC.newButton(LANG.fn_slic, API.function.slice) ],
|
||||
// [ UI.modePreview = UC.newButton(LANG.fn_prev, API.function.print) ],
|
||||
// [ UI.modeExport = UC.newButton(LANG.fn_expo, API.function.export) ]
|
||||
// ]),
|
||||
//
|
||||
// workspace: UC.newGroup(LANG.ws_menu, undefined, {modes:ALL, expert:true}),
|
||||
// wsTable: UC.newTableRow([
|
||||
// [
|
||||
// UC.newButton(LANG.vu_sptp, SPACE.view.top),
|
||||
// UC.newButton(LANG.vu_home, SPACE.view.home),
|
||||
// ],[
|
||||
// UI.saveButton =
|
||||
// UC.newButton(LANG.ws_save, API.space.save),
|
||||
// UC.newButton(LANG.ws_cler, API.space.clear)
|
||||
// ]
|
||||
// ], {modes:ALL, expert:true}),
|
||||
|
||||
layout: UC.newGroup(LANG.op_menu),
|
||||
expert: UC.newBoolean(LANG.op_xprt_s, booleanSave, {title:LANG.op_xprt_l}),
|
||||
|
|
@ -1234,9 +1236,9 @@
|
|||
units: UC.newSelect(LANG.op_unit_s, {title: LANG.op_unit_l, modes:CAM}, "units"),
|
||||
|
||||
// allow modules to insert new items at the bottom of the left menu
|
||||
appendLeft: UC.checkpoint(),
|
||||
// appendLeft: UC.checkpoint(),
|
||||
|
||||
settingsGroup: UC.newGroup(LANG.se_menu, control, {region:"right"}),
|
||||
settingsGroup: UC.newGroup(LANG.se_menu, $('settings'), {region:"right"}),
|
||||
settingsTable: UC.newTableRow([
|
||||
[
|
||||
UI.settingsLoad =
|
||||
|
|
@ -1508,74 +1510,74 @@
|
|||
}
|
||||
|
||||
SPACE.onEnterKey([
|
||||
UI.layerSpan, function() { API.show.slices() },
|
||||
UI.layerID, function() { API.show.layer(UI.layerID.value) },
|
||||
UI.scaleX, selectionScale,
|
||||
UI.scaleY, selectionScale,
|
||||
UI.scaleZ, selectionScale,
|
||||
UI.sizeX, selectionSize,
|
||||
UI.sizeY, selectionSize,
|
||||
UI.sizeZ, selectionSize,
|
||||
UI.toolName, updateTool,
|
||||
UI.toolNum, updateTool,
|
||||
UI.toolFluteDiam, updateTool,
|
||||
UI.toolFluteLen, updateTool,
|
||||
UI.toolShaftDiam, updateTool,
|
||||
UI.toolShaftLen, updateTool,
|
||||
UI.toolTaperTip, updateTool,
|
||||
$('rot_x'), selectionRotate,
|
||||
$('rot_y'), selectionRotate,
|
||||
$('rot_z'), selectionRotate
|
||||
// UI.layerSpan, function() { API.show.slices() },
|
||||
// UI.layerID, function() { API.show.layer(UI.layerID.value) },
|
||||
// UI.scaleX, selectionScale,
|
||||
// UI.scaleY, selectionScale,
|
||||
// UI.scaleZ, selectionScale,
|
||||
// UI.sizeX, selectionSize,
|
||||
// UI.sizeY, selectionSize,
|
||||
// UI.sizeZ, selectionSize,
|
||||
// UI.toolName, updateTool,
|
||||
// UI.toolNum, updateTool,
|
||||
// UI.toolFluteDiam, updateTool,
|
||||
// UI.toolFluteLen, updateTool,
|
||||
// UI.toolShaftDiam, updateTool,
|
||||
// UI.toolShaftLen, updateTool,
|
||||
// UI.toolTaperTip, updateTool,
|
||||
// $('rot_x'), selectionRotate,
|
||||
// $('rot_y'), selectionRotate,
|
||||
// $('rot_z'), selectionRotate
|
||||
]);
|
||||
|
||||
UI.layerID.convert = UC.toFloat.bind(UI.layerID);
|
||||
UI.layerSpan.convert = UC.toFloat.bind(UI.layerSpan);
|
||||
UI.layerRange.onclick = function() {
|
||||
UI.layerRange.checked = !(UI.layerRange.checked || false);
|
||||
API.show.slices();
|
||||
};
|
||||
// UI.layerID.convert = UC.toFloat.bind(UI.layerID);
|
||||
// UI.layerSpan.convert = UC.toFloat.bind(UI.layerSpan);
|
||||
// UI.layerRange.onclick = function() {
|
||||
// UI.layerRange.checked = !(UI.layerRange.checked || false);
|
||||
// API.show.slices();
|
||||
// };
|
||||
//
|
||||
// $('layer-toggle').onclick = function(ev) {
|
||||
// let ls = UI.layers.style;
|
||||
// ls.display = ls.display !== 'block' ? 'block' : 'none';
|
||||
// UI.layers.style.left = ev.target.getBoundingClientRect().left + 'px';
|
||||
// };
|
||||
|
||||
$('layer-toggle').onclick = function(ev) {
|
||||
let ls = UI.layers.style;
|
||||
ls.display = ls.display !== 'block' ? 'block' : 'none';
|
||||
UI.layers.style.left = ev.target.getBoundingClientRect().left + 'px';
|
||||
};
|
||||
// UI.modelOpacity.onchange = UI.modelOpacity.onclick = function(ev) {
|
||||
// API.widgets.opacity(parseInt(UI.modelOpacity.value)/100);
|
||||
// };
|
||||
//
|
||||
// UI.layerSlider.ondblclick = function() {
|
||||
// UI.layerRange.checked = !UI.layerRange.checked;
|
||||
// API.show.slices();
|
||||
// };
|
||||
//
|
||||
// UI.layerSlider.onmousedown = function(ev) {
|
||||
// if (ev.shiftKey) UI.layerRange.checked = !UI.layerRange.checked;
|
||||
// };
|
||||
//
|
||||
// UI.layerSlider.onclick = function() {
|
||||
// API.show.layer(UI.layerSlider.value);
|
||||
// };
|
||||
//
|
||||
// UI.layerSlider.onmousemove = UI.layerSlider.onchange = function() {
|
||||
// API.show.layer(UI.layerSlider.value);
|
||||
// };
|
||||
//
|
||||
// UI.layerSlider.onmouseup = function() { API.focus() };
|
||||
//
|
||||
// UI.import.setAttribute("import","1");
|
||||
// UI.import.onclick = function() {
|
||||
// UC.hidePoppers();
|
||||
// API.dialog.show("catalog");
|
||||
// };
|
||||
//
|
||||
// $('cache-close').onclick = API.dialog.hide;
|
||||
//
|
||||
// UI.toolMetric.onclick = updateTool;
|
||||
// UI.toolType.onchange = updateTool;
|
||||
|
||||
UI.modelOpacity.onchange = UI.modelOpacity.onclick = function(ev) {
|
||||
API.widgets.opacity(parseInt(UI.modelOpacity.value)/100);
|
||||
};
|
||||
|
||||
UI.layerSlider.ondblclick = function() {
|
||||
UI.layerRange.checked = !UI.layerRange.checked;
|
||||
API.show.slices();
|
||||
};
|
||||
|
||||
UI.layerSlider.onmousedown = function(ev) {
|
||||
if (ev.shiftKey) UI.layerRange.checked = !UI.layerRange.checked;
|
||||
};
|
||||
|
||||
UI.layerSlider.onclick = function() {
|
||||
API.show.layer(UI.layerSlider.value);
|
||||
};
|
||||
|
||||
UI.layerSlider.onmousemove = UI.layerSlider.onchange = function() {
|
||||
API.show.layer(UI.layerSlider.value);
|
||||
};
|
||||
|
||||
UI.layerSlider.onmouseup = function() { API.focus() };
|
||||
|
||||
UI.import.setAttribute("import","1");
|
||||
UI.import.onclick = function() {
|
||||
UC.hidePoppers();
|
||||
API.dialog.show("catalog");
|
||||
};
|
||||
|
||||
$('cache-close').onclick = API.dialog.hide;
|
||||
|
||||
UI.toolMetric.onclick = updateTool;
|
||||
UI.toolType.onchange = updateTool;
|
||||
|
||||
$('apphelp').onclick = API.help.show;
|
||||
$('app-name').onclick = API.help.show;
|
||||
|
||||
SPACE.platform.setSize(
|
||||
settings().device.bedWidth,
|
||||
|
|
@ -1583,7 +1585,7 @@
|
|||
settings().device.bedHeight
|
||||
);
|
||||
|
||||
UI.selection.classList.add('compact');
|
||||
// UI.selection.classList.add('compact');
|
||||
|
||||
if (dark) {
|
||||
SPACE.platform.setGrid(25, 5, 0x999999, 0x333333);
|
||||
|
|
@ -1765,7 +1767,7 @@
|
|||
API.dialog.update();
|
||||
|
||||
// show version on startup
|
||||
API.show.alert(`${LANG.version} ${KIRI.version}`);
|
||||
$('app-vers').innerHTML = KIRI.version;
|
||||
|
||||
if (!SETUP.s) console.log(`kiri | init main | ${KIRI.version}`);
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
newWidget = kiri.newWidget,
|
||||
// ---------------
|
||||
UI = {},
|
||||
UC = MOTO.ui.prefix('kiri').inputAction(updateSettings).hideAction(updateDialogLeft),
|
||||
UC = KIRI.ui.prefix('kiri').inputAction(updateSettings).hideAction(updateDialogLeft),
|
||||
MODE = MODES.FDM,
|
||||
onEvent = {},
|
||||
currentPrint = null,
|
||||
|
|
@ -502,6 +502,7 @@
|
|||
}
|
||||
|
||||
function updateSliderMax(set) {
|
||||
return console.log('TODO updateSliderMax');
|
||||
let max = 0;
|
||||
if (viewMode === VIEWS.PREVIEW && currentPrint) {
|
||||
max = currentPrint.getLayerCount();
|
||||
|
|
@ -558,8 +559,8 @@
|
|||
|
||||
layer = bound(layer, 0, API.var.layer_max);
|
||||
|
||||
UI.layerID.value = layer;
|
||||
UI.layerSlider.value = layer;
|
||||
// UI.layerID.value = layer;
|
||||
// UI.layerSlider.value = layer;
|
||||
|
||||
let j,
|
||||
slice,
|
||||
|
|
@ -849,12 +850,12 @@
|
|||
});
|
||||
if (bounds.min.x === Infinity) {
|
||||
if (selectedMeshes.length === 0) {
|
||||
UI.sizeX.value = 0;
|
||||
UI.sizeY.value = 0;
|
||||
UI.sizeZ.value = 0;
|
||||
UI.scaleX.value = 1;
|
||||
UI.scaleY.value = 1;
|
||||
UI.scaleZ.value = 1;
|
||||
// UI.sizeX.value = 0;
|
||||
// UI.sizeY.value = 0;
|
||||
// UI.sizeZ.value = 0;
|
||||
// UI.scaleX.value = 1;
|
||||
// UI.scaleY.value = 1;
|
||||
// UI.scaleZ.value = 1;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
@ -862,17 +863,17 @@
|
|||
dy = bounds.max.y - bounds.min.y,
|
||||
dz = bounds.max.z - bounds.min.z,
|
||||
scale = unitScale();
|
||||
UI.sizeX.value = UI.sizeX.was = UTIL.round(dx/scale,2);
|
||||
UI.sizeY.value = UI.sizeY.was = UTIL.round(dy/scale,2);
|
||||
UI.sizeZ.value = UI.sizeZ.was = UTIL.round(dz/scale,2);
|
||||
UI.scaleX.value = UI.scaleX.was = track.scale.x;
|
||||
UI.scaleY.value = UI.scaleY.was = track.scale.y;
|
||||
UI.scaleZ.value = UI.scaleZ.was = track.scale.z;
|
||||
// UI.sizeX.value = UI.sizeX.was = UTIL.round(dx/scale,2);
|
||||
// UI.sizeY.value = UI.sizeY.was = UTIL.round(dy/scale,2);
|
||||
// UI.sizeZ.value = UI.sizeZ.was = UTIL.round(dz/scale,2);
|
||||
// UI.scaleX.value = UI.scaleX.was = track.scale.x;
|
||||
// UI.scaleY.value = UI.scaleY.was = track.scale.y;
|
||||
// UI.scaleZ.value = UI.scaleZ.was = track.scale.z;
|
||||
}
|
||||
|
||||
function setOpacity(value) {
|
||||
forAllWidgets(function (w) { w.setOpacity(value) });
|
||||
UI.modelOpacity.value = value * 100;
|
||||
// UI.modelOpacity.value = value * 100;
|
||||
SPACE.update();
|
||||
}
|
||||
|
||||
|
|
@ -1018,8 +1019,8 @@
|
|||
}
|
||||
|
||||
function platformUpdateSelected() {
|
||||
UI.selection.style.display = platform.selected_count() ? 'inline' : 'none';
|
||||
$('ext-sel').style.display = (MODE === MODES.FDM) ? 'inline-block' : 'none';
|
||||
// UI.selection.style.display = platform.selected_count() ? 'inline' : 'none';
|
||||
// $('ext-sel').style.display = (MODE === MODES.FDM) ? 'inline-block' : 'none';
|
||||
let extruders = settings.device.extruders;
|
||||
if (extruders) {
|
||||
for (let i=0; i<extruders.length; i++) {
|
||||
|
|
@ -1225,7 +1226,7 @@
|
|||
camTopZ = topZ;
|
||||
// create/inject cam stock if stock size other than default
|
||||
if (MODE === MODES.CAM && stockSet && WIDGETS.length) {
|
||||
UI.stock.style.display = offset ? 'inline-block' : 'none';
|
||||
// UI.stock.style.display = offset ? 'inline-block' : 'none';
|
||||
let csx = sd.camStockX * scale;
|
||||
let csy = sd.camStockY * scale;
|
||||
let csz = sd.camStockZ * scale;
|
||||
|
|
@ -1253,9 +1254,9 @@
|
|||
csz += max.z - min.z;
|
||||
csox = min.x + ((max.x - min.x) / 2);
|
||||
csoy = min.y + ((max.y - min.y) / 2);
|
||||
$('stock-width').innerText = (csx/scale).toFixed(2);
|
||||
$('stock-depth').innerText = (csy/scale).toFixed(2);
|
||||
$('stock-height').innerText = (csz/scale).toFixed(2);
|
||||
// $('stock-width').innerText = (csx/scale).toFixed(2);
|
||||
// $('stock-depth').innerText = (csy/scale).toFixed(2);
|
||||
// $('stock-height').innerText = (csz/scale).toFixed(2);
|
||||
}
|
||||
if (!camStock) {
|
||||
let geo = new THREE.BoxGeometry(1, 1, 1);
|
||||
|
|
@ -1635,6 +1636,7 @@
|
|||
}
|
||||
|
||||
function showDialog(which, force) {
|
||||
return console.log('TODO showDialog');
|
||||
if (UC.isPopped()) {
|
||||
UC.hidePop();
|
||||
return;
|
||||
|
|
@ -1694,9 +1696,9 @@
|
|||
settings.devproc[currentDeviceName()] = name;
|
||||
|
||||
// update selection display
|
||||
$('selected-mode').innerHTML = API.mode.get();
|
||||
$('selected-device').innerHTML = API.device.get();
|
||||
$('selected-process').innerHTML = name;
|
||||
// $('selected-mode').innerHTML = API.mode.get();
|
||||
// $('selected-device').innerHTML = API.device.get();
|
||||
// $('selected-process').innerHTML = name;
|
||||
|
||||
// FDM process settings overridden by device
|
||||
if (mode == "FDM") {
|
||||
|
|
@ -1765,6 +1767,7 @@
|
|||
}
|
||||
|
||||
function updateDialogLeft() {
|
||||
return console.log('TODO updateDialogLeft');
|
||||
let left = UI.ctrlLeft.getBoundingClientRect();
|
||||
let right = UI.ctrlRight.getBoundingClientRect();
|
||||
UI.catalog.style.left = (left.width + 5) + 'px';
|
||||
|
|
@ -1828,14 +1831,15 @@
|
|||
}
|
||||
|
||||
function setFocus(el) {
|
||||
el = [ el || UI.load, UI.import, UI.ctrlLeft, UI.container, UI.assets, UI.control, UI.modeFDM, UI.reverseZoom, UI.modelOpacity, DOC.body ];
|
||||
for (let es, i=0; i<el.length; i++) {
|
||||
es = el[i];
|
||||
es.focus();
|
||||
if (DOC.activeElement === es) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
console.log('TODO setFocus')
|
||||
// el = [ el || UI.load, UI.import, UI.ctrlLeft, UI.container, UI.assets, UI.control, UI.modeFDM, UI.reverseZoom, UI.modelOpacity, DOC.body ];
|
||||
// for (let es, i=0; i<el.length; i++) {
|
||||
// es = el[i];
|
||||
// es.focus();
|
||||
// if (DOC.activeElement === es) {
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
function setViewMode(mode) {
|
||||
|
|
@ -1868,6 +1872,7 @@
|
|||
}
|
||||
|
||||
function showModeActive(el) {
|
||||
return console.log('TODO showModeActive');
|
||||
[ UI.modeArrange, UI.modeSlice, UI.modePreview, UI.modeExport ].forEach(function(b) {
|
||||
if (b === el) {
|
||||
b.classList.add('buton');
|
||||
|
|
@ -1878,7 +1883,7 @@
|
|||
}
|
||||
|
||||
function showLayerView(bool) {
|
||||
UI.layerView.style.display = bool ? 'flex' : 'none';
|
||||
// UI.layerView.style.display = bool ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
function setExpert(bool) {
|
||||
|
|
@ -1923,14 +1928,14 @@
|
|||
API.conf.save();
|
||||
clearWidgetCache();
|
||||
SPACE.update();
|
||||
UI.modeFDM.setAttribute('class', MODE === MODES.FDM ? 'buton' : '');
|
||||
UI.modeSLA.setAttribute('class', MODE === MODES.SLA ? 'buton' : '');
|
||||
UI.modeCAM.setAttribute('class', MODE === MODES.CAM ? 'buton' : '');
|
||||
UI.modeLASER.setAttribute('class', MODE === MODES.LASER ? 'buton' : '');
|
||||
UI.mode.style.display = lock ? 'none' : '';
|
||||
UI.modeTable.style.display = lock ? 'none' : '';
|
||||
UI.modelOpacity.style.display = MODE === MODES.SLA ? 'none' : '';
|
||||
UI.modePreview.style.display = MODE === MODES.SLA ? 'none' : '';
|
||||
// UI.modeFDM.setAttribute('class', MODE === MODES.FDM ? 'buton' : '');
|
||||
// UI.modeSLA.setAttribute('class', MODE === MODES.SLA ? 'buton' : '');
|
||||
// UI.modeCAM.setAttribute('class', MODE === MODES.CAM ? 'buton' : '');
|
||||
// UI.modeLASER.setAttribute('class', MODE === MODES.LASER ? 'buton' : '');
|
||||
// UI.mode.style.display = lock ? 'none' : '';
|
||||
// UI.modeTable.style.display = lock ? 'none' : '';
|
||||
// UI.modelOpacity.style.display = MODE === MODES.SLA ? 'none' : '';
|
||||
// UI.modePreview.style.display = MODE === MODES.SLA ? 'none' : '';
|
||||
if (camStock) {
|
||||
camStock.material.visible = settings.mode === 'CAM';
|
||||
}
|
||||
|
|
@ -1950,8 +1955,9 @@
|
|||
}
|
||||
|
||||
function setControlsVisible(show) {
|
||||
UI.ctrlLeft.style.display = show ? 'block' : 'none';
|
||||
UI.ctrlRight.style.display = show ? 'block' : 'none';
|
||||
console.log('TODO setControlsVisible');
|
||||
// UI.ctrlLeft.style.display = show ? 'block' : 'none';
|
||||
// UI.ctrlRight.style.display = show ? 'block' : 'none';
|
||||
}
|
||||
|
||||
// prevent safari from exiting full screen mode
|
||||
|
|
|
|||
579
src/kiri/ui.js
Normal file
579
src/kiri/ui.js
Normal file
|
|
@ -0,0 +1,579 @@
|
|||
/** Copyright Stewart Allen <sa@grid.space> -- All Rights Reserved */
|
||||
|
||||
"use strict";
|
||||
|
||||
(function() {
|
||||
|
||||
if (kiri.ui) return;
|
||||
|
||||
let SELF = self,
|
||||
KIRI = self.kiri,
|
||||
lastRegion = null,
|
||||
lastGroup = null,
|
||||
lastDiv = null,
|
||||
addTo = null,
|
||||
hideAction = null,
|
||||
inputAction = null,
|
||||
groups = {},
|
||||
groupShow = {},
|
||||
groupName = undefined,
|
||||
hideable = {},
|
||||
hasModes = [],
|
||||
isExpert = [],
|
||||
letMode = null,
|
||||
letExpert = false,
|
||||
SDB = moto.KV,
|
||||
DOC = SELF.document,
|
||||
prefix = "tab",
|
||||
NOMODE = "nomode",
|
||||
exitimer = undefined;
|
||||
|
||||
SELF.$ = (SELF.$ || function (id) { return DOC.getElementById(id) } );
|
||||
|
||||
KIRI.ui = {
|
||||
prefix: function(pre) { prefix = pre; return kiri.ui },
|
||||
hideAction: function(fn) { hideAction = fn; return kiri.ui },
|
||||
inputAction: function(fn) { inputAction = fn; return kiri.ui },
|
||||
setMode: setMode,
|
||||
setExpert: setExpert,
|
||||
bound: bound,
|
||||
toInt: toInt,
|
||||
toFloat: toFloat,
|
||||
hidePop: hidePop,
|
||||
isPopped: isPopped,
|
||||
newText: newTextArea,
|
||||
newLabel: newLabel,
|
||||
newRange: newRange,
|
||||
newInput: newInputField,
|
||||
newButton: newButton,
|
||||
newBoolean: newBooleanField,
|
||||
newSelect: newSelect,
|
||||
newTable: newTables,
|
||||
newTableRow: newTableRow,
|
||||
newRow: newRow,
|
||||
newBlank: newBlank,
|
||||
newGroup: newGroup,
|
||||
setGroup: setGroup,
|
||||
hidePoppers: hidePoppers,
|
||||
checkpoint,
|
||||
restore
|
||||
};
|
||||
|
||||
function setMode(mode) {
|
||||
// $('control-left').classList.add('compact');
|
||||
// $('control-right').classList.add('compact');
|
||||
Object.keys(groupShow).forEach(group => {
|
||||
updateGroupShow(group);
|
||||
});
|
||||
letMode = mode;
|
||||
hasModes.forEach(function(div) {
|
||||
div.setMode(div._group && !groupShow[div._group] ? NOMODE : mode);
|
||||
});
|
||||
}
|
||||
|
||||
function setExpert(bool) {
|
||||
letExpert = bool;
|
||||
setMode(letMode);
|
||||
}
|
||||
|
||||
function checkpoint() {
|
||||
return { addTo, lastDiv, lastGroup, lastRegion, groupName };
|
||||
}
|
||||
|
||||
function restore(opt) {
|
||||
if (opt) {
|
||||
addTo = opt.addTo;
|
||||
lastDiv = opt.lastDiv;
|
||||
lastGroup = opt.lastGroup;
|
||||
lastRegion = opt.lastRegion;
|
||||
groupName = opt.groupName;
|
||||
}
|
||||
}
|
||||
|
||||
// at present only used by the layers popup menu
|
||||
function setGroup(div) {
|
||||
addTo = lastDiv = div;
|
||||
groupName = undefined;
|
||||
lastGroup = [];
|
||||
return div;
|
||||
}
|
||||
|
||||
function newGroup(label, div, options) {
|
||||
lastDiv = div || lastDiv;
|
||||
return addCollapsableGroup(label, lastDiv, options);
|
||||
}
|
||||
|
||||
function addCollapsableGroup(label, div, options) {
|
||||
let opt = options || {};
|
||||
let group = opt.group || label;
|
||||
lastRegion = opt.region || lastRegion;
|
||||
hideable[group] = opt.nocompact === true ? false : true;
|
||||
|
||||
let row = DOC.createElement('div'),
|
||||
a = DOC.createElement('a'),
|
||||
dbkey = `beta-${prefix}-show-${group}`,
|
||||
popper = !opt.nocompact;
|
||||
|
||||
if (popper) {
|
||||
let pop = DOC.createElement('div');
|
||||
pop.classList.add('popper');
|
||||
if (lastRegion) pop.classList.add(lastRegion);
|
||||
if (opt.poprow) pop.classList.add('poprow')
|
||||
row.appendChild(pop);
|
||||
addTo = pop;
|
||||
} else {
|
||||
addTo = lastDiv;
|
||||
}
|
||||
|
||||
div.appendChild(row);
|
||||
row.setAttribute("class", "grouphead noselect");
|
||||
row.appendChild(a);
|
||||
a.appendChild(DOC.createTextNode(label));
|
||||
addModeControls(row, opt);
|
||||
lastGroup = groups[group] = [];
|
||||
lastGroup.key = dbkey;
|
||||
groupName = group;
|
||||
groupShow[group] = popper ? SDB[dbkey] === 'true' : SDB[dbkey] !== 'false';
|
||||
row.onclick = function(ev) {
|
||||
if (ev.target !== a && ev.target !== row) {
|
||||
return;
|
||||
}
|
||||
toggleGroup(group, dbkey);
|
||||
};
|
||||
if (popper) {
|
||||
row.onmouseenter = function(ev) {
|
||||
if (ev.target !== a && ev.target !== row) {
|
||||
return;
|
||||
}
|
||||
clearTimeout(exitimer);
|
||||
showGroup(group);
|
||||
};
|
||||
row.onmouseleave = function(ev) {
|
||||
if (ev.target !== a && ev.target !== row) {
|
||||
return;
|
||||
}
|
||||
clearTimeout(exitimer);
|
||||
exitimer = setTimeout(showGroup, 1000);
|
||||
};
|
||||
addTo._group = group;
|
||||
addModeControls(addTo, opt);
|
||||
lastGroup.push(addTo);
|
||||
}
|
||||
|
||||
return row;
|
||||
}
|
||||
|
||||
function hidePoppers() {
|
||||
showGroup(undefined);
|
||||
}
|
||||
|
||||
function showGroup(groupname) {
|
||||
Object.keys(groups).forEach(name => {
|
||||
let group = groups[name];
|
||||
groupShow[name] = SDB[group.key] = (groupname === name);
|
||||
updateGroupShow(name);
|
||||
});
|
||||
}
|
||||
|
||||
function toggleGroup(groupname, dbkey) {
|
||||
let show = SDB[dbkey] === 'false';
|
||||
groupShow[groupname] = hideable[groupname] ? SDB[dbkey] = show : true;
|
||||
updateGroupShow(groupname);
|
||||
}
|
||||
|
||||
function updateGroupShow(groupname) {
|
||||
let show = groupShow[groupname] || !hideable[groupname];
|
||||
let group = groups[groupname];
|
||||
group.forEach(div => {
|
||||
if (show) div.setMode(letMode);
|
||||
else div.setMode(NOMODE);
|
||||
});
|
||||
}
|
||||
|
||||
function toInt() {
|
||||
let nv = this.value !== '' ? parseInt(this.value) : null;
|
||||
if (isNaN(nv)) nv = 0;
|
||||
if (nv !== null && this.bound) nv = this.bound(nv);
|
||||
this.value = nv;
|
||||
return nv;
|
||||
}
|
||||
|
||||
function toFloat() {
|
||||
let nv = this.value !== '' ? parseFloat(this.value) : null;
|
||||
if (nv !== null && this.bound) nv = this.bound(nv);
|
||||
this.value = nv;
|
||||
return nv;
|
||||
}
|
||||
|
||||
function bound(low,high) {
|
||||
return function(v) {
|
||||
if (isNaN(v)) return low;
|
||||
return v < low ? low : v > high ? high : v;
|
||||
};
|
||||
}
|
||||
|
||||
function raw() {
|
||||
return this.value !== '' ? this.value : null;
|
||||
}
|
||||
|
||||
function newLabel(text) {
|
||||
let label = DOC.createElement('label');
|
||||
label.appendChild(DOC.createTextNode(text));
|
||||
label.setAttribute("class", "noselect");
|
||||
return label;
|
||||
}
|
||||
|
||||
function addId(el, options) {
|
||||
if (options && options.id) {
|
||||
el.setAttribute("id", options.id);
|
||||
}
|
||||
}
|
||||
|
||||
function addModeControls(el, options) {
|
||||
options = options || {};
|
||||
el.__show = true;
|
||||
el.__modeSave = null;
|
||||
el.showMe = function() {
|
||||
if (el.__show) return;
|
||||
el.style.display = el.__modeSave;
|
||||
el.__show = true;
|
||||
el.__modeSave = null;
|
||||
};
|
||||
el.hideMe = function() {
|
||||
if (!el.__show) return;
|
||||
el.__show = false;
|
||||
el.__modeSave = el.style.display;
|
||||
el.style.display = 'none';
|
||||
};
|
||||
el.setVisible = function(show) {
|
||||
if (show) el.showMe();
|
||||
else el.hideMe();
|
||||
};
|
||||
el.setMode = function(mode) {
|
||||
let show = options.expert === undefined || (options.expert === letExpert);
|
||||
el.setVisible(el.hasMode(mode) && show);
|
||||
}
|
||||
el.hasMode = function(mode) {
|
||||
if (mode === NOMODE) return false;
|
||||
if (!el.modes) return true;
|
||||
return el.modes.contains(mode);
|
||||
}
|
||||
if (options.modes) {
|
||||
el.modes = options.modes;
|
||||
hasModes.push(el);
|
||||
}
|
||||
}
|
||||
|
||||
function newDiv(options) {
|
||||
let div = DOC.createElement('div');
|
||||
addModeControls(div, options);
|
||||
addTo.appendChild(div);
|
||||
lastGroup.push(div);
|
||||
div._group = groupName;
|
||||
return div;
|
||||
}
|
||||
|
||||
let lastPop = null;
|
||||
let savePop = null;
|
||||
|
||||
function hidePop() {
|
||||
if (lastPop) {
|
||||
lastPop.style.display = "none";
|
||||
}
|
||||
if (savePop) {
|
||||
savePop();
|
||||
savePop = null;
|
||||
}
|
||||
lastPop = null;
|
||||
}
|
||||
|
||||
function isPopped() {
|
||||
return lastPop !== null;
|
||||
}
|
||||
|
||||
function newTextArea(label, options) {
|
||||
let opt = options || {},
|
||||
row = newDiv(options),
|
||||
btn = DOC.createElement("button"),
|
||||
box = DOC.createElement("div"),
|
||||
pop = DOC.createElement("div"),
|
||||
lbl = DOC.createElement("label"),
|
||||
txt = DOC.createElement("textarea");
|
||||
|
||||
pop.setAttribute("class", "poptext flow-col");
|
||||
box.setAttribute("style", "position: relative");
|
||||
box.appendChild(pop);
|
||||
pop.appendChild(lbl);
|
||||
pop.appendChild(txt);
|
||||
lbl.appendChild(DOC.createTextNode(label));
|
||||
|
||||
txt.setAttribute("cols", 40);
|
||||
txt.setAttribute("rows", 20);
|
||||
txt.setAttribute("wrap", "off");
|
||||
|
||||
btn.appendChild(DOC.createTextNode("edit"));
|
||||
btn.onclick = function(ev) {
|
||||
ev.stopPropagation();
|
||||
if (ev.target === txt) {
|
||||
// drop clicks on TextArea
|
||||
ev.target.focus();
|
||||
} else {
|
||||
// first time, button click / show
|
||||
btn.parentNode.appendChild(box);
|
||||
btn.parentNode.onclick = btn.onclick;
|
||||
txt.scrollTop = 0;
|
||||
txt.scrollLeft = 0;
|
||||
txt.selectionEnd = 0;
|
||||
let rows = txt.value.split('\n');
|
||||
let cols = 0;
|
||||
rows.forEach(row => {
|
||||
cols = Math.max(cols, row.length);
|
||||
});
|
||||
txt.setAttribute("cols", Math.max(30, cols + 1));
|
||||
txt.setAttribute("rows", Math.max(10, rows.length + 1));
|
||||
|
||||
let showing = pop === lastPop;
|
||||
hidePop();
|
||||
if (!showing) {
|
||||
savePop = inputAction;
|
||||
pop.style.display = "flex";
|
||||
lastPop = pop;
|
||||
txt.focus();
|
||||
} else {
|
||||
inputAction();
|
||||
}
|
||||
}
|
||||
};
|
||||
addModeControls(btn, opt);
|
||||
addId(btn, opt);
|
||||
|
||||
row.appendChild(newLabel(label));
|
||||
row.appendChild(btn);
|
||||
row.setAttribute("class", "flow-row");
|
||||
if (opt.title) row.setAttribute("title", options.title);
|
||||
btn.setVisible = row.setVisible;
|
||||
|
||||
return txt;
|
||||
}
|
||||
|
||||
function newInputField(label, options) {
|
||||
let opt = options || {},
|
||||
row = newDiv(opt),
|
||||
hide = opt && opt.hide,
|
||||
size = opt ? opt.size || 5 : 5,
|
||||
height = opt ? opt.height : 0,
|
||||
ip = height > 1 ? DOC.createElement('textarea') : DOC.createElement('input'),
|
||||
action = opt.action || inputAction;
|
||||
|
||||
row.appendChild(newLabel(label));
|
||||
row.appendChild(ip);
|
||||
row.setAttribute("class", "flow-row");
|
||||
if (height > 1) {
|
||||
ip.setAttribute("cols", size);
|
||||
ip.setAttribute("rows", height);
|
||||
ip.setAttribute("wrap", "off");
|
||||
} else {
|
||||
if (Number.isInteger(size)) {
|
||||
ip.setAttribute("size", size);
|
||||
} else {
|
||||
ip.setAttribute("style", `width:${size}`);
|
||||
}
|
||||
}
|
||||
ip.setAttribute("type", "text");
|
||||
row.style.display = hide ? 'none' : '';
|
||||
if (opt) {
|
||||
if (opt.disabled) ip.setAttribute("disabled", "true");
|
||||
if (opt.title) row.setAttribute("title", opt.title);
|
||||
if (opt.convert) ip.convert = opt.convert.bind(ip);
|
||||
if (opt.bound) ip.bound = opt.bound;
|
||||
if (opt.action) action = opt.action;
|
||||
}
|
||||
ip.addEventListener('focus', function(event) {
|
||||
hidePop();
|
||||
});
|
||||
if (action) {
|
||||
ip.addEventListener('keydown', function(event) {
|
||||
let key = event.key;
|
||||
if (
|
||||
opt.text ||
|
||||
(key >= '0' && key <= '9') ||
|
||||
key === '.' ||
|
||||
key === '-' ||
|
||||
key === 'Backspace' ||
|
||||
key === 'Delete' ||
|
||||
key === 'ArrowLeft' ||
|
||||
key === 'ArrowRight' ||
|
||||
key === 'Tab' ||
|
||||
event.metaKey ||
|
||||
event.ctrlKey ||
|
||||
(key === ',' && options.comma)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
ip.addEventListener('keyup', function(event) {
|
||||
if (event.keyCode === 13) {
|
||||
// action(event);
|
||||
ip.blur();
|
||||
}
|
||||
});
|
||||
ip.addEventListener('blur', function(event) {
|
||||
action(event);
|
||||
});
|
||||
}
|
||||
if (!ip.convert) ip.convert = raw.bind(ip);
|
||||
ip.setVisible = row.setVisible;
|
||||
|
||||
return ip;
|
||||
}
|
||||
|
||||
function newRange(label, options) {
|
||||
let row = newDiv(options),
|
||||
ip = DOC.createElement('input'),
|
||||
hide = options && options.hide,
|
||||
action = inputAction;
|
||||
|
||||
if (label) row.appendChild(newLabel(label));
|
||||
row.appendChild(ip);
|
||||
row.setAttribute("class", "flow-row");
|
||||
ip.setAttribute("type", "range");
|
||||
ip.setAttribute("min", (options && options.min ? options.min : 0));
|
||||
ip.setAttribute("max", (options && options.max ? options.max : 100));
|
||||
ip.setAttribute("value", 0);
|
||||
row.style.display = hide ? 'none' : '';
|
||||
if (options) {
|
||||
if (options.title) {
|
||||
ip.setAttribute("title", options.title);
|
||||
row.setAttribute("title", options.title);
|
||||
}
|
||||
if (options.action) action = options.action;
|
||||
}
|
||||
ip.setVisible = row.setVisible;
|
||||
|
||||
return ip;
|
||||
}
|
||||
|
||||
function newSelect(label, options, source) {
|
||||
let row = newDiv(options),
|
||||
ip = DOC.createElement('select'),
|
||||
hide = options && options.hide,
|
||||
action = inputAction;
|
||||
|
||||
row.appendChild(newLabel(label));
|
||||
row.appendChild(ip);
|
||||
row.setAttribute("source", source || "tools");
|
||||
row.setAttribute("class", "flow-row");
|
||||
row.style.display = hide ? 'none' : '';
|
||||
if (options) {
|
||||
if (options.convert) ip.convert = options.convert.bind(ip);
|
||||
if (options.disabled) ip.setAttribute("disabled", "true");
|
||||
if (options.title) row.setAttribute("title", options.title);
|
||||
if (options.action) action = options.action;
|
||||
}
|
||||
ip.onchange = function() { action() };
|
||||
ip.setVisible = row.setVisible;
|
||||
|
||||
return ip;
|
||||
}
|
||||
|
||||
function newBooleanField(label, action, options) {
|
||||
let row = newDiv(options),
|
||||
ip = DOC.createElement('input'),
|
||||
hide = options && options.hide;
|
||||
|
||||
if (label) {
|
||||
row.appendChild(newLabel(label));
|
||||
}
|
||||
row.appendChild(ip);
|
||||
row.setAttribute("class", "flow-row");
|
||||
row.style.display = hide ? 'none' : '';
|
||||
ip.setAttribute("type", "checkbox");
|
||||
ip.checked = false;
|
||||
if (options) {
|
||||
if (options.disabled) ip.setAttribute("disabled", "true");
|
||||
if (options.title) {
|
||||
ip.setAttribute("title", options.title);
|
||||
row.setAttribute("title", options.title);
|
||||
}
|
||||
}
|
||||
if (action) ip.onclick = function() { action() };
|
||||
ip.setVisible = row.setVisible;
|
||||
|
||||
return ip;
|
||||
}
|
||||
|
||||
function newBlank(options) {
|
||||
let row = newDiv(options),
|
||||
hide = options && options.hide;
|
||||
|
||||
row.setAttribute("class", "flow-row");
|
||||
row.style.display = hide ? 'none' : '';
|
||||
ip.setVisible = row.setVisible;
|
||||
|
||||
return ip;
|
||||
}
|
||||
|
||||
function newButton(label, action, options) {
|
||||
let b = DOC.createElement('button'),
|
||||
t = DOC.createTextNode(label);
|
||||
|
||||
b.onclick = function() {
|
||||
hidePoppers();
|
||||
if (action) action();
|
||||
};
|
||||
|
||||
if (options) {
|
||||
if (options.class) b.classList.add(options.class);
|
||||
if (options.icon) {
|
||||
let d = DOC.createElement('div');
|
||||
d.innerHTML = options.icon;
|
||||
b.appendChild(d);
|
||||
}
|
||||
}
|
||||
|
||||
b.appendChild(t);
|
||||
|
||||
addModeControls(b, options);
|
||||
addId(b, options);
|
||||
|
||||
return b;
|
||||
}
|
||||
|
||||
function newTableRow(arrayOfArrays, options) {
|
||||
return newRow(newTables(arrayOfArrays), options);
|
||||
}
|
||||
|
||||
function newTables(arrayOfArrays) {
|
||||
let array = [];
|
||||
for (let i=0; i<arrayOfArrays.length; i++) {
|
||||
array.push(newRowTable(arrayOfArrays[i]));
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
function newRowTable(array) {
|
||||
let div = newDiv();
|
||||
div.setAttribute("class", "tablerow");
|
||||
array.forEach(function(c) {
|
||||
div.appendChild(c);
|
||||
});
|
||||
return div;
|
||||
}
|
||||
|
||||
function newRow(children, options) {
|
||||
let row = addCollapsableElement((options && options.noadd) ? null : addTo);
|
||||
if (children) children.forEach(function (c) { row.appendChild(c) });
|
||||
addModeControls(row, options);
|
||||
return row;
|
||||
}
|
||||
|
||||
function addCollapsableElement(parent) {
|
||||
let row = newDiv();
|
||||
if (parent) parent.appendChild(row);
|
||||
if (lastGroup) lastGroup.push(row);
|
||||
return row;
|
||||
}
|
||||
|
||||
})();
|
||||
1435
web/kiri/index.css
1435
web/kiri/index.css
File diff suppressed because it is too large
Load diff
|
|
@ -2,10 +2,10 @@
|
|||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="author" content="Stewart Allen">
|
||||
<meta name="keywords" content="3d slicer,slicer,3d slicing,cnc,cam,toolpaths,toolpath generation,kiri,kirimoto,kiri:moto,gcode" />
|
||||
<meta name="copyright" content="stewart allen [sa@grid.space]">
|
||||
<meta name="description" content="3d slice modeler, gcode and CNC toolpath generator">
|
||||
<meta name="keywords" content="3d slicer,slicer,3d slicing,cnc,cam,toolpaths,toolpath generation,kiri,kirimoto,kiri:moto,gcode" />
|
||||
<meta name="author" content="Stewart Allen">
|
||||
<meta property="og:description" content="Kiri:Moto is a unique multi-modal 3D slicer that runs entirely in browser and creates output for your favorite maker tools: 3D Printers, CNC Mills and Laser Cutters.">
|
||||
<meta property="og:title" content="Free 3D Tools for Makers">
|
||||
<meta property="og:type" content="website">
|
||||
|
|
@ -15,209 +15,121 @@
|
|||
<link rel="icon" href="/kiri/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="/kiri/favicon-mobile.png">
|
||||
<link rel="stylesheet" type="text/css" href="/kiri/index.css?{{version}}">
|
||||
<link href="https://fonts.googleapis.com/css?family=Russo+One&display=swap" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script>
|
||||
<script src="/code/kiri.js?{{version}}"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- app title home page links -->
|
||||
<div id="appid">
|
||||
<span id="applang" title="language">A<div id="langpop"></div></span>
|
||||
<span><a href="/" id="appname" target="home">Kiri:Moto Slicer</a></span>
|
||||
<span id="apphelp" title="help">?</span>
|
||||
</div>
|
||||
<!-- left control menu -->
|
||||
<div id="control-left" class="control"><div id="assets"></div></div>
|
||||
<!-- right control menu -->
|
||||
<div id="control-right" class="control"><div id="control"></div></div>
|
||||
<!-- selected device and print profiles -->
|
||||
<div id="selected" class="control">
|
||||
<span id="selected-mode">mode</span>
|
||||
<span> : </span>
|
||||
<span id="selected-device">device</span>
|
||||
<span> : </span>
|
||||
<span id="selected-process">settings</span>
|
||||
</div>
|
||||
<!-- all modal dialogs -->
|
||||
<div id="modal">
|
||||
<div id="help">
|
||||
<a href="https://en.wikipedia.org/wiki/Slicer_(3D_printing)">wikipedia</a>
|
||||
<a href="https://www.onshape.com/cad-blog/partner-spotlight-kirimoto">Onshape</a>
|
||||
<a href="https://www.inov3d.net/3d-printing-slicer-software-download/">slicer news</a>
|
||||
<a href="https://sienci.com/2016/08/24/the-story-of-kirimoto/">Sienci Labs</a>
|
||||
<a href="https://www.youtube.com/watch?v=IZ1VG07oFCo">Teaching Tech</a>
|
||||
</div>
|
||||
<!-- changeable print dialog -->
|
||||
<div id="print"></div>
|
||||
<!-- local devices dialog -->
|
||||
<div id="local" class="dialog">
|
||||
<button id="local-close" class="modal-x">X</button>
|
||||
<center><b><u>Grid.Local Devices</u></b></center>
|
||||
<br><div id="local-dev" class="flow-col"></div>
|
||||
</div>
|
||||
<!-- hidden file input loader -->
|
||||
<input id="load-file" type="file" name="loadme" style="display:none" accept=".stl,.gcode,.nc"/>
|
||||
</div>
|
||||
<!-- 3js -->
|
||||
<body class="col">
|
||||
<div id="container"></div>
|
||||
<!-- progress bar -->
|
||||
<div id="loading"><div id="progress"><span id="prostatus">status</span></div></div>
|
||||
<!-- file load catalog -->
|
||||
<div id="catalog" class="dialog">
|
||||
<div id="catalogBody" class="flow-col">
|
||||
<label id="localCache">recent files<button id="cache-close">x</button></label>
|
||||
<div id="catalogList"></div>
|
||||
</div>
|
||||
<div id="top" class="row">
|
||||
<div id="app-vers">version</div>
|
||||
<div class="grow"></div>
|
||||
<div id="app-name">Kiri:Moto</div>
|
||||
<div class="grow"></div>
|
||||
<div id="app-acct"><i class="fas fa-user-cog"></i></div>
|
||||
</div>
|
||||
<!-- settings load dialog -->
|
||||
<div id="settings" class="dialog">
|
||||
<div id="settingsBody" class="flow-col">
|
||||
<label id="settingsCache">saved settings</label>
|
||||
<div id="settingsList"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- GCode filter editor -->
|
||||
<div id="devices" class="dialog flex-col">
|
||||
<div id="devices-body" class="flow-col">
|
||||
<div id="device-labels" class="flow-row">
|
||||
<label>device</label>
|
||||
<label>settings</label>
|
||||
<div id="mid-sep"></div>
|
||||
<div id="mid" class="grow row">
|
||||
<div id="mid-lcol" class="col j-center">
|
||||
<div id="lt-setup" class="lt-menu">
|
||||
<i class="fas fa-cogs"></i>
|
||||
<label>setup</label>
|
||||
</div>
|
||||
<div id="device-cols" class="flow-row">
|
||||
<div id="device-list" class="flow-col">
|
||||
<select id="device-select" size="15"></select>
|
||||
</div>
|
||||
<div id="device-info">
|
||||
<div id="device"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:relative">
|
||||
<div id="insert" style="position:absolute"></div>
|
||||
</div>
|
||||
<div id="device-action" class="flow-row">
|
||||
<button id="device-add">+</button>
|
||||
<button id="device-del">-</button>
|
||||
<span id="device-spacer"></span>
|
||||
<button id="device-favorites">favorites</button>
|
||||
<button id="device-all">all</button>
|
||||
<span id="device-spacer"></span>
|
||||
<button id="device-save">save</button>
|
||||
<button id="device-close">close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CAM tools dialog -->
|
||||
<div id="tools" class="dialog">
|
||||
<div id="tools-body" class="flow-col">
|
||||
<div id="tool-labels" class="flow-row">
|
||||
<label>tool</label>
|
||||
<label>detail</label>
|
||||
<label>view</label>
|
||||
</div>
|
||||
<div id="tool-cols" class="flow-row">
|
||||
<div id="tool-list" class="flow-col">
|
||||
<select id="tool-select" size="15"></select>
|
||||
</div>
|
||||
<div id="tool-info" class="flow-col">
|
||||
<div class="flow-row"><label>type</label>
|
||||
<select id="tool-type">
|
||||
<option value="endmill" selected>end</option>
|
||||
<option value="ballmill">ball</option>
|
||||
<option value="tapermill">taper</option>
|
||||
</select>
|
||||
<div id="lt-file" class="lt-menu">
|
||||
<i class="fas fa-folder"></i>
|
||||
<label>files</label>
|
||||
<div id="file-pop" class="pop-lcol row">
|
||||
<div id="file-recent">
|
||||
<i class="fas fa-list"></i>
|
||||
<label>recent</label>
|
||||
</div>
|
||||
<div id="file-recent">
|
||||
<i class="fas fa-file-upload"></i>
|
||||
<label>import<label>
|
||||
</div>
|
||||
<div class="flow-row"><label>name</label><input id="tool-name" size="15"></input></div>
|
||||
<div class="flow-row" title="tool number to use
in gcode commands"><label>tool #</label><input id="tool-num" size="7"></input></div>
|
||||
<div class="flow-row"><label>metric</label><input id="tool-metric" type="checkbox"></input></div>
|
||||
<div class="grouphead">shaft</div>
|
||||
<div class="flow-row" title="shaft diameter in inches
unless metric is checked
then in millimeters"><label>diameter</label><input id="tool-sdiam" size="7"></input></div>
|
||||
<div class="flow-row" title="shaft length in inches
unless metric is checked
then in millimeters"><label>length</label><input id="tool-slen" size="7"></input></div>
|
||||
<div class="grouphead">flute</div>
|
||||
<div class="flow-row" title="flute diameter in inches
unless metric is checked
then in millimeters"><label>diameter</label><input id="tool-fdiam" size="7"></input></div>
|
||||
<div class="flow-row" title="flute length in inches
unless metric is checked
then in millimeters"><label>length</label><input id="tool-flen" size="7"></input></div>
|
||||
<div class="grouphead">taper</div>
|
||||
<!-- <div class="flow-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=5></input></div> -->
|
||||
<div class="flow-row" title="tip width in inches
unless metric is checked
then in millimeters"><label>tip</label><input id="tool-ttip" size="7"></input></div>
|
||||
</div>
|
||||
<div id="tool-view" class="flow-col"></div>
|
||||
</div>
|
||||
<div id="tool-action" class="flow-row">
|
||||
<button id="tool-add">+</button>
|
||||
<button id="tool-del">-</button>
|
||||
<span id="tool-spacer"></span>
|
||||
<button id="tools-save">save</button>
|
||||
<button id="tools-close">done</button>
|
||||
<div id="lt-action" class="lt-menu">
|
||||
<i class="fas fa-layer-group"></i>
|
||||
<label>action</label>
|
||||
<div id="pop-act" class="pop-lcol row">
|
||||
<div id="act-slice">
|
||||
<i class="fas fa-bars"></i>
|
||||
<label>slice</label>
|
||||
</div>
|
||||
<div id="act-preview">
|
||||
<i class="fas fa-cubes"></i>
|
||||
<label>preview</label>
|
||||
</div>
|
||||
<div id="act-export">
|
||||
<i class="fas fa-file-download"></i>
|
||||
<label>export</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lt-view" class="lt-menu">
|
||||
<i class="fas fa-eye"></i>
|
||||
<label>view</label>
|
||||
<div id="pop-view" class="pop-lcol row">
|
||||
<div id="view-arrange">
|
||||
<i class="fas fa-th"></i>
|
||||
<label>arrange</label>
|
||||
</div>
|
||||
<div id="view-top">
|
||||
<i class="fas fa-square"></i>
|
||||
<label>top</label>
|
||||
</div>
|
||||
<div id="view-home">
|
||||
<i class="fas fa-home"></i>
|
||||
<label>home</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mid-mcol" class="grow">
|
||||
<div id="modal">
|
||||
<div id="mod-help">
|
||||
<a href="https://en.wikipedia.org/wiki/Slicer_(3D_printing)">wikipedia</a>
|
||||
<a href="https://www.onshape.com/cad-blog/partner-spotlight-kirimoto">Onshape</a>
|
||||
<a href="https://www.inov3d.net/3d-printing-slicer-software-download/">slicer news</a>
|
||||
<a href="https://sienci.com/2016/08/24/the-story-of-kirimoto/">Sienci Labs</a>
|
||||
<a href="https://www.youtube.com/watch?v=IZ1VG07oFCo">Teaching Tech</a>
|
||||
</div>
|
||||
<div id="mod-setup">
|
||||
<div id="device">temp device</div>
|
||||
<div id="layers">temp layers</div>
|
||||
<div id="langpop">temp language</div>
|
||||
</div>
|
||||
<div id="mod-tools"></div>
|
||||
<div id="mod-local"></div>
|
||||
<div id="mod-print"></div>
|
||||
<!-- hidden file input loader -->
|
||||
<input id="load-file" type="file" name="loadme" style="display:none" accept=".stl,.gcode,.nc"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mid-rcol" class="col j-center">
|
||||
<div id="settings" class="col"></div>
|
||||
<div id="slider" class="col">
|
||||
<div id="slider-begin">0</div>
|
||||
<div id="slider-center" class="grow">
|
||||
<div id="slider-hold" class="col a-center">
|
||||
<div id="slider-hold-top" class="shim"></div>
|
||||
<div id="slider-hold-mid"> </div>
|
||||
<div id="slider-hold-bot" class="shim"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="slider-end">∞</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- selection info -->
|
||||
<div id="widget-info">
|
||||
<div id="selection">
|
||||
<span class="sel-span">
|
||||
<label class="label">scale</label>
|
||||
<div class="sel-pop">
|
||||
<table><tr>
|
||||
<th></th>
|
||||
<td><label>size</label></td>
|
||||
<td><label>scale</label></td>
|
||||
<td><label>lock</label></td>
|
||||
</tr><tr>
|
||||
<td><label>x</label></td>
|
||||
<td><input id="size_x" size="8" class="value"/></td>
|
||||
<td><input id="scale_x" size="3" class="value" value="1"/></td>
|
||||
<td><input id="lock_x" type="checkbox" checked/></td>
|
||||
</tr><tr>
|
||||
<td><label>y</label></td>
|
||||
<td><input id="size_y" size="8" class="value"/></td>
|
||||
<td><input id="scale_y" size="3" class="value" value="1"/></td>
|
||||
<td><input id="lock_y" type="checkbox" checked/></td>
|
||||
</tr><tr>
|
||||
<td><label>z</label></td>
|
||||
<td><input id="size_z" size="8" class="value"/></td>
|
||||
<td><input id="scale_z" size="3" class="value" value="1"/></td>
|
||||
<td><input id="lock_z" type="checkbox" checked/></td>
|
||||
</tr></table>
|
||||
</div>
|
||||
</span>
|
||||
<span class="sel-span">
|
||||
<label class="label">rotate</label>
|
||||
<div class="sel-pop">
|
||||
<table><tr><td>
|
||||
<label>z</label>
|
||||
<input id="rot_z" class="value" size="5"/ value="0">
|
||||
</td></tr><tr><td>
|
||||
<label>y</label>
|
||||
<input id="rot_y" class="value" size="5"/ value="0">
|
||||
</td></tr><tr><td>
|
||||
<label>x</label>
|
||||
<input id="rot_x" class="value" size="5"/ value="0">
|
||||
</td></tr></table>
|
||||
</div>
|
||||
</span>
|
||||
<span id="ext-sel" class="sel-span">
|
||||
<label class="label">extruder</label>
|
||||
<div class="sel-pop"><div id="sel-ext"></div></div>
|
||||
</span>
|
||||
<span id="stock" class="sel-span">
|
||||
<label class="label">stock</label>
|
||||
<label id="stock-width" class="value">mm</label> x
|
||||
<label id="stock-depth" class="value">mm</label> x
|
||||
<label id="stock-height" class="value">mm</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- layer slider -->
|
||||
<div id="layer-view" class="flow-row">
|
||||
<button id="layer-toggle" title="toggle layers">layers</button>
|
||||
<div id="layers"></div>
|
||||
<input id="layer-id" size="4" title="selected layer">
|
||||
<input id="layer-slider" type="range" title="layer selection">
|
||||
<button id="layer-range" title="toggle section view">section</button>
|
||||
<input id="layer-span" size="4" value="1" title="layer span">
|
||||
<input id="opacity" type="range" title="opacity" min=0 max=100>
|
||||
</div>
|
||||
<!-- alert area -->
|
||||
<div id="alert-area">
|
||||
<div id="alert-border">
|
||||
<div id="alert-text"></div>
|
||||
<div id="bot" class="col a-center">
|
||||
<div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
|
||||
<div id="bottom"></div>
|
||||
<div id="alert-area">
|
||||
<div id="alert-border">
|
||||
<div id="alert-text">alerts<br>alerts<br>alerts</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
|
||||
<div id="help-left">
|
||||
|
||||
<p><center><b>Quick Help</b></center></p>
|
||||
<p><center><b>Kiri:Moto</b></center></p>
|
||||
|
||||
<div class="grouphead">About</div>
|
||||
|
||||
<div class="content">
|
||||
<a href="#" title="Kiri-e is the Japanese art of papercutting"><b>Kiri:Moto</b></a>
|
||||
|
|
@ -13,7 +15,7 @@
|
|||
Laser cutting, 3D printing, CNC milling
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Loading Objects</div>
|
||||
<div class="grouphead">File Loading</div>
|
||||
|
||||
<div class="content">
|
||||
Drag and drop a <a href="https://en.wikipedia.org/wiki/STL_(file_format)" target="_stl">file</a> onto the grid
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ kiri.lang['en-us'] = {
|
|||
vu_sprt: "Right",
|
||||
|
||||
// WORKSPACE
|
||||
ws_menu: "workspace",
|
||||
ws_menu: "view",
|
||||
ws_save: "Save",
|
||||
ws_cler: "Clear",
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue