diff --git a/src/ico/cnc.cvg b/src/ico/cnc.svg
similarity index 57%
rename from src/ico/cnc.cvg
rename to src/ico/cnc.svg
index 38f46b4c..857b7dca 100644
--- a/src/ico/cnc.cvg
+++ b/src/ico/cnc.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/src/ico/fdm.svg b/src/ico/fdm.svg
index 4aca6193..07acde06 100644
--- a/src/ico/fdm.svg
+++ b/src/ico/fdm.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/src/ico/laser.svg b/src/ico/laser.svg
index 0647993b..f7dd21bf 100644
--- a/src/ico/laser.svg
+++ b/src/ico/laser.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/src/ico/sla.svg b/src/ico/sla.svg
index c9456c7c..53268e1e 100644
--- a/src/ico/sla.svg
+++ b/src/ico/sla.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/src/kiri/init.js b/src/kiri/init.js
index a7d00384..234a3030 100644
--- a/src/kiri/init.js
+++ b/src/kiri/init.js
@@ -510,7 +510,7 @@
}
function getSelectedDevice() {
- return UI.deviceSelect.options[UI.deviceSelect.selectedIndex].text;
+ return UI.deviceList.options[UI.deviceList.selectedIndex].text;
}
function selectDevice(devicename, lock) {
@@ -535,7 +535,6 @@
}
function setDeviceCode(code, devicename) {
- return console.log('TODO setDeviceCode');
try {
if (typeof(code) === 'string') code = js2o(code) || {};
@@ -559,19 +558,21 @@
if (dev.extruders) {
let ext = API.lists.extruders = [];
dev.internal = 0;
- let selext = $('sel-ext');
+ let selext = $('pop-nozzle');
selext.innerHTML = '';
for (let i=dev.extruders.length-1; i>=0; i--) {
+ let d = DOC.createElement('div');
let b = DOC.createElement('button');
b.appendChild(DOC.createTextNode(i));
- b.setAttribute('id', `sel-ext-${i}`);
+ d.appendChild(b);
+ // b.setAttribute('id', `pop-nozzle-${i}`);
b.onclick = function() {
API.selection.for_widgets(w => {
current.widget[w.id] = {extruder: i};
});
API.platform.update_selected();
};
- selext.appendChild(b);
+ selext.appendChild(d);
ext.push({id:i, name:i});
}
}
@@ -627,9 +628,9 @@
e.parentNode.style.display = dev.spindleMax >= 0 ? 'none' : 'block';
});
- UI.deviceSave.disabled = !local;
- UI.deviceDelete.disabled = !local;
- UI.deviceAdd.disabled = dev.noclone;
+ // UI.deviceSave.disabled = !local;
+ // UI.deviceDelete.disabled = !local;
+ // UI.deviceAdd.disabled = dev.noclone;
API.view.update_fields();
platform.update_size();
@@ -665,9 +666,6 @@
}
function renderDevices(devices) {
- UI.devices.onclick = UC.hidePop;
- UC.hidePop();
-
let selectedIndex = -1,
selected = API.device.get(),
devs = settings().devices;
@@ -687,33 +685,33 @@
devices = devices.sort();
- UI.deviceClose.onclick = API.dialog.hide;
- UI.deviceSave.onclick = function() {
- API.function.clear();
- API.conf.save();
- showDevices();
- };
- UI.deviceAdd.onclick = function() {
- API.function.clear();
- cloneDevice();
- showDevices();
- };
- UI.deviceDelete.onclick = function() {
- API.function.clear();
- removeLocalDevice(getSelectedDevice());
- showDevices();
- };
-
- UI.deviceAll.onclick = function() {
- API.show.favorites(false);
- showDevices();
- };
- UI.deviceFavorites.onclick = function() {
- API.show.favorites(true);
- showDevices();
- };
-
- UI.deviceSelect.innerHTML = '';
+ // UI.deviceClose.onclick = API.dialog.hide;
+ // UI.deviceSave.onclick = function() {
+ // API.function.clear();
+ // API.conf.save();
+ // showDevices();
+ // };
+ // UI.deviceAdd.onclick = function() {
+ // API.function.clear();
+ // cloneDevice();
+ // showDevices();
+ // };
+ // UI.deviceDelete.onclick = function() {
+ // API.function.clear();
+ // removeLocalDevice(getSelectedDevice());
+ // showDevices();
+ // };
+ //
+ // UI.deviceAll.onclick = function() {
+ // API.show.favorites(false);
+ // showDevices();
+ // };
+ // UI.deviceFavorites.onclick = function() {
+ // API.show.favorites(true);
+ // showDevices();
+ // };
+ //
+ UI.deviceList.innerHTML = '';
let incr = 0;
let faves = API.show.favorites();
let found = false;
@@ -751,7 +749,7 @@
};
if (loc) opt.setAttribute("local", 1);
if (loc || fav) opt.setAttribute("favorite", 1);
- UI.deviceSelect.appendChild(opt);
+ UI.deviceList.appendChild(opt);
if (device === selected) {
selectedIndex = incr;
found = true;
@@ -760,17 +758,12 @@
});
if (selectedIndex >= 0) {
- UI.deviceSelect.selectedIndex = selectedIndex;
+ UI.deviceList.selectedIndex = selectedIndex;
selectDevice(selected);
} else {
- UI.deviceSelect.selectedIndex = 0;
+ UI.deviceList.selectedIndex = 0;
selectDevice(first);
}
-
- API.dialog.show('devices', true);
- API.dialog.update();
-
- UI.deviceSelect.focus();
}
function renderTools() {
@@ -968,10 +961,15 @@
UI.toolSelect.focus();
}
+ function updateDeviceList() {
+ renderDevices(Object.keys(devices[API.mode.get_lower()]).sort());
+ }
+
function showDevices() {
if (deviceLock) return;
- API.modal.hide();
- renderDevices(Object.keys(devices[API.mode.get_lower()]).sort());
+ updateDeviceList();
+ API.modal.show('setup');
+ UI.deviceList.focus();
}
function dragOverHandler(evt) {
@@ -1094,25 +1092,28 @@
menusep: $('lt-sep'),
rotate: $('lt-rotate'),
scale: $('lt-scale'),
+ nozzle: $('lt-nozzle'),
modal: $('modal'),
help: $('mod-help'),
+ setup: $('mod-setup'),
+ tools: $('mod-tools'),
+ prefs: $('mod-prefs'),
+ files: $('mod-files'),
print: $('mod-print'),
local: $('mod-local'),
- files: $('mod-files'),
- setup: $('mod-setup'),
+
catalogBody: $('catalogBody'),
catalogList: $('catalogList'),
devices: $('devices'),
+ deviceList: $('device-list'),
deviceAdd: $('device-add'),
deviceDelete: $('device-del'),
deviceSave: $('device-save'),
deviceClose: $('device-close'),
- deviceSelect: $('device-select'),
deviceFavorites: $('device-favorites'),
deviceAll: $('device-all'),
- tools: $('tools'),
toolsSave: $('tools-save'),
toolsClose: $('tools-close'),
toolSelect: $('tool-select'),
@@ -1231,14 +1232,14 @@
// ]
// ], {modes:ALL, expert:true}),
- layout: UC.newGroup(LANG.op_menu),
+ layout: UC.newGroup(LANG.op_menu, $('mod-prefs'), {nocompact: true}),
expert: UC.newBoolean(LANG.op_xprt_s, booleanSave, {title:LANG.op_xprt_l}),
dark: UC.newBoolean(LANG.op_dark_s, booleanSave, {title:LANG.op_dark_l}),
showOrigin: UC.newBoolean(LANG.op_show_s, booleanSave, {title:LANG.op_show_l, modes:GCODE}),
alignTop: UC.newBoolean(LANG.op_alig_s, booleanSave, {title:LANG.op_alig_l, modes:CAM}),
autoLayout: UC.newBoolean(LANG.op_auto_s, booleanSave, {title:LANG.op_auto_l}),
- freeLayout: UC.newBoolean(LANG.op_free_s, booleanSave, {title:LANG.op_free_l, modes:ALL, expert:true}),
- reverseZoom: UC.newBoolean(LANG.op_invr_s, booleanSave, {title:LANG.op_invr_l, modes:ALL, expert:true}),
+ freeLayout: UC.newBoolean(LANG.op_free_s, booleanSave, {title:LANG.op_free_l, modes:ALL}),
+ reverseZoom: UC.newBoolean(LANG.op_invr_s, booleanSave, {title:LANG.op_invr_l, modes:ALL}),
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
@@ -1447,19 +1448,12 @@
layerMoves: UC.newBoolean(LANG.la_move, onLayerToggle, {modes:GCODE})
});
- // populate language drop-down
- let lp = $('langpop');
- let elp = DOC.createElement("div");
- let dlp = DOC.createElement("div");
- elp.appendChild(DOC.createTextNode('english'));
- dlp.appendChild(DOC.createTextNode('danish'));
- lp.appendChild(elp);
- lp.appendChild(dlp);
- elp.onclick = function() {
+ // bind language choices
+ $('lset-en').onclick = function() {
SDB.setItem('kiri-lang', 'en-us');
API.space.reload();
};
- dlp.onclick = function() {
+ $('lset-da').onclick = function() {
SDB.setItem('kiri-lang', 'da-dk');
API.space.reload();
};
@@ -1579,13 +1573,20 @@
// };
//
// $('cache-close').onclick = API.dialog.hide;
- //
- // UI.toolMetric.onclick = updateTool;
- // UI.toolType.onchange = updateTool;
+
+ UI.toolMetric.onclick = updateTool;
+ UI.toolType.onchange = updateTool;
+
+ function showSetup() {
+ API.modal.show('setup');
+ }
// bind interface action elements
$('app-name').onclick = API.help.show;
- $('lt-setup').onclick = () => { API.modal.show('setup') };
+ $('app-mode').onclick = showSetup;
+ $('set-device').onclick = showSetup;
+ $('set-tools').onclick = showTools;
+ $('set-prefs').onclick = () => { API.modal.show('prefs') };
$('file-recent').onclick = () => { API.modal.show('files') };
$('file-import').onclick = API.event.import;
$('act-slice').onclick = API.function.slice;
@@ -1595,14 +1596,28 @@
$('view-top').onclick = SPACE.view.top;
$('view-home').onclick = SPACE.view.home;
+ $('mode-fdm').onclick = () => { API.mode.set('FDM') };
+ $('mode-sla').onclick = () => { API.mode.set('SLA') };
+ $('mode-cam').onclick = () => { API.mode.set('CAM') };
+ $('mode-laser').onclick = () => { API.mode.set('LASER') };
+
+ function mksvg(src) {
+ let svg = DOC.createElement('svg');
+ svg.innerHTML = src;
+ return svg;
+ }
+
+ $('mode-fdm').appendChild(mksvg(icons.fdm));
+ $('mode-sla').appendChild(mksvg(icons.sla));
+ $('mode-cam').appendChild(mksvg(icons.cnc));
+ $('mode-laser').appendChild(mksvg(icons.laser));
+
SPACE.platform.setSize(
settings().device.bedWidth,
settings().device.bedDepth,
settings().device.bedHeight
);
- // UI.selection.classList.add('compact');
-
if (dark) {
SPACE.platform.setGrid(25, 5, 0x999999, 0x333333);
SPACE.platform.opacity(0.8);
@@ -1635,22 +1650,6 @@
}
});
- // SPACE.mouse.onHover(function(d,me) {
- // if (d) {
- // // console.log(d,d.object.widget.id,d.face.materialIndex)
- // // d.object.material.vertexColors = true;
- // // d.object.material.needsUpdate = true;
- // // d.face.vertexColors = [
- // // new THREE.Color(0xffaa88),
- // // new THREE.Color(0xffaa88),
- // // new THREE.Color(0xffaa88)
- // // ];
- // // d.face.materialIndex = 1;
- // } else {
- // return API.widgets.meshes();
- // }
- // });
-
SPACE.mouse.onDrag(function(delta) {
if (delta && UI.freeLayout.checked) {
let set = settings();
@@ -1754,6 +1753,9 @@
// setup tab visibility watcher
// DOC.addEventListener('visibilitychange', function() { document.title = document.hidden });
+ // fill device list
+ updateDeviceList();
+
// ensure settings has gcode
selectDevice(DEVNAME || API.device.get(), DEVNAME);
diff --git a/src/kiri/main.js b/src/kiri/main.js
index 4731fbcc..d664cbaa 100644
--- a/src/kiri/main.js
+++ b/src/kiri/main.js
@@ -808,8 +808,6 @@
callback();
}
}
- // update slider window
- API.dialog.update();
// handle slicing errors
if (error && !errored) {
errored = true;
@@ -1019,8 +1017,10 @@
function platformUpdateSelected() {
let menu_show = platform.selected_count() ? 'flex': '';
+ let ext_show = platform.selected_count() && MODE === 'FDM' ? 'flex': '';
UI.scale.style.display = menu_show;
UI.rotate.style.display = menu_show;
+ UI.nozzle.style.display = menu_show;
UI.menusep.style.display = menu_show;
// $('ext-sel').style.display = (MODE === MODES.FDM) ? 'inline-block' : 'none';
let extruders = settings.device.extruders;
@@ -1281,7 +1281,7 @@
camStock.material.visible = settings.mode === 'CAM';
camTopZ = csz;
} else if (camStock) {
- UI.stock.style.display = 'none';
+ // UI.stock.style.display = 'none';
SPACE.platform.remove(camStock);
camStock = null;
camTopZ = topZ;
@@ -1630,7 +1630,7 @@
visible = modalShowing(),
info = { pct: 0 };
- ["setup","print","help","files","local"].forEach(function(name) {
+ ["help","setup","tools","prefs","files","print","local"].forEach(function(name) {
UI[name].style.display = name === which ? 'flex' : '';
});
@@ -1725,9 +1725,9 @@
settings.process.outputOriginCenter = (settings.device.originCenter || false);
}
- if (!named) {
- hideModal();
- }
+ // if (!named) {
+ // hideModal();
+ // }
updateFields();
API.conf.update();
@@ -1778,7 +1778,6 @@
row.appendChild(del);
table.appendChild(row);
});
- API.dialog.update();
}
function showSettings() {
@@ -1801,7 +1800,7 @@
}
function showHelpFile(local) {
- hideModal();
+ // hideModal();
if (!local) {
WIN.open("//wiki.grid.space/wiki/Kiri:Moto", "_help");
return;
@@ -1815,7 +1814,7 @@
}
function showLocal() {
- $('local-close').onclick = hideModal;
+// $('local-close').onclick = hideModal;
showModal('local');
fetch("/api/grid_local")
.then(r => r.json())
@@ -1918,12 +1917,12 @@
}
function setMode(mode, lock, then) {
- hideModal();
if (!MODES[mode]) {
DBUG.log("invalid mode: "+mode);
mode = 'FDM';
}
$('app-mode').innerHTML = mode;
+ $('set-tools').style.display = mode === 'CAM' ? '' : 'none';
settings.mode = mode;
// restore cached device profile for this mode
if (settings.cdev[mode]) {
@@ -1943,6 +1942,14 @@
API.conf.save();
clearWidgetCache();
SPACE.update();
+ ["fdm","sla","cam","laser"].forEach(dev => {
+ let cl = $(`mode-${dev}`).classList;
+ if (dev === mode.toLowerCase()) {
+ cl.add("dev-sel");
+ } else {
+ cl.remove("dev-sel");
+ }
+ });
// UI.modeFDM.setAttribute('class', MODE === MODES.FDM ? 'buton' : '');
// UI.modeSLA.setAttribute('class', MODE === MODES.SLA ? 'buton' : '');
// UI.modeCAM.setAttribute('class', MODE === MODES.CAM ? 'buton' : '');
@@ -1959,7 +1966,7 @@
triggerSettingsEvent();
platformUpdateSelected();
updateFields();
- if (settings.device.new) {
+ if (modalShowing()) {
API.show.devices();
}
API.event.emit("mode.set", mode);
diff --git a/src/kiri/ui.js b/src/kiri/ui.js
index c5ead320..9b570a0e 100644
--- a/src/kiri/ui.js
+++ b/src/kiri/ui.js
@@ -59,8 +59,6 @@
};
function setMode(mode) {
- // $('control-left').classList.add('compact');
- // $('control-right').classList.add('compact');
Object.keys(groupShow).forEach(group => {
updateGroupShow(group);
});
@@ -344,7 +342,7 @@
row.appendChild(newLabel(label));
row.appendChild(btn);
- row.setAttribute("class", "flow-row");
+ row.setAttribute("class", "var-row");
if (opt.title) row.setAttribute("title", options.title);
btn.setVisible = row.setVisible;
@@ -362,7 +360,7 @@
row.appendChild(newLabel(label));
row.appendChild(ip);
- row.setAttribute("class", "flow-row");
+ row.setAttribute("class", "var-row");
if (height > 1) {
ip.setAttribute("cols", size);
ip.setAttribute("rows", height);
@@ -432,7 +430,7 @@
if (label) row.appendChild(newLabel(label));
row.appendChild(ip);
- row.setAttribute("class", "flow-row");
+ row.setAttribute("class", "var-row");
ip.setAttribute("type", "range");
ip.setAttribute("min", (options && options.min ? options.min : 0));
ip.setAttribute("max", (options && options.max ? options.max : 100));
@@ -459,7 +457,7 @@
row.appendChild(newLabel(label));
row.appendChild(ip);
row.setAttribute("source", source || "tools");
- row.setAttribute("class", "flow-row");
+ row.setAttribute("class", "var-row");
row.style.display = hide ? 'none' : '';
if (options) {
if (options.convert) ip.convert = options.convert.bind(ip);
@@ -482,7 +480,7 @@
row.appendChild(newLabel(label));
}
row.appendChild(ip);
- row.setAttribute("class", "flow-row");
+ row.setAttribute("class", "var-row");
row.style.display = hide ? 'none' : '';
ip.setAttribute("type", "checkbox");
ip.checked = false;
@@ -503,7 +501,7 @@
let row = newDiv(options),
hide = options && options.hide;
- row.setAttribute("class", "flow-row");
+ row.setAttribute("class", "var-row");
row.style.display = hide ? 'none' : '';
ip.setVisible = row.setVisible;
diff --git a/web/kiri/index.css b/web/kiri/index.css
index 9fc8e41c..fae6aeb9 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -1,6 +1,6 @@
:root {
- --fg-blue-gray: #89a;
- --bg-blue-gray: #abc;
+ --fg-gray: #495057;
+ --bg-gray: rgba(0,0,0,0.25);
}
setpopsetpopa, a:hover, a:visited {
border: none;
@@ -29,6 +29,7 @@ div {
position: relative;
}
button {
+ display: flex;
outline: none;
border: 1px solid #ccc;
border-radius: 3px;
@@ -179,6 +180,53 @@ th, tr, td {
#app-acct {
justify-content: flex-end;
}
+#app-acct:hover #acct-pop {
+ display: flex;
+}
+#acct-pop {
+ display: none;
+ color: var(--fg-gray);
+ font-family: sans-serif;
+ position: absolute;
+ z-index: 10;
+ top: 100%;
+ right: -3px;
+}
+#acct-pop > div {
+ margin-top: 10px;
+ background-color: white;
+ border: 1px solid #ddd;
+ border-radius: 3px;
+ padding: 5px 0 5px 0;
+}
+#acct-pop > div > div {
+ padding: 0 5px 0 5px;
+}
+#acct-pop > div:hover {
+ color: #000;
+ background-color: #f4f4f4;
+}
+#acct-lang:hover #lang-pop {
+ display: flex;
+}
+#lang-pop {
+ display: none;
+ position: absolute;
+ right: 100%;
+ top: -6px;
+ align-items: stretch;
+ text-align: right;
+ border-radius: 3px;
+ border: 1px solid #ddd;
+ background-color: white;
+}
+#lang-pop > div {
+ padding: 4px 6px 4px 6px;
+}
+#lang-pop > div:hover {
+ color: #000;
+ background-color: #f4f4f4;
+}
#mid {
pointer-events: none;
@@ -196,12 +244,12 @@ th, tr, td {
#lt-top {
height: 10px;
border-top-right-radius: 10px;
- background-color: var(--bg-blue-gray);
+ background-color: var(--bg-gray);
left: -5px;
}
#lt-sep {
- background-color: var(--bg-blue-gray);
+ background-color: var(--bg-gray);
height: 10px;
left: -5px;
}
@@ -209,7 +257,7 @@ th, tr, td {
#lt-end {
height: 10px;
border-bottom-right-radius: 10px;
- background-color: var(--bg-blue-gray);
+ background-color: var(--bg-gray);
left: -5px;
}
@@ -230,7 +278,7 @@ th, tr, td {
border: 1px solid rgba(0,0,0,0);
border-radius: 3px;
width: 60px;
- color: var(--fg-blue-gray);
+ color: var(--fg-gray);
}
.pop-lcol > div:hover {
@@ -246,7 +294,7 @@ th, tr, td {
padding: 5px 5px 5px 10px;
border: 1px solid rgba(0,0,0,0);
border-radius: 3px;
- color: var(--fg-blue-gray);
+ color: var(--fg-gray);
left: -5px;
background-color: rgba(255,255,255,0.75);
}
@@ -313,7 +361,7 @@ th, tr, td {
right: 0px;
bottom: 0px;
height: 300px;
- background-color: rgba(0,0,0,0.25);
+ background-color: var(--bg-gray);
border-bottom: 1px solid black;
border-top: 1px solid black;
overflow: hidden;
@@ -332,11 +380,12 @@ th, tr, td {
font-family: monospace;
background-color: rgba(255,255,255,0.75);
}
-#mod-top {
+
+.mod-top {
height: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
- background-color: rgba(0,0,0,0.25);
+ background-color: var(--bg-gray);
}
#mod-x {
position: absolute;
@@ -344,11 +393,23 @@ th, tr, td {
bottom: -20px;
right: 5px;
}
-#mod-end {
+.mod-end {
height: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
- background-color: rgba(0,0,0,0.25);
+ background-color: var(--bg-gray);
+}
+
+.dev-type {
+ font-family: 'Russo One', sans-serif;
+ flex-direction: column;
+ align-items: center;
+ background-color: white;
+ margin: 5px;
+}
+.dev-sel {
+ color: #033;
+ background-color: #bbb;
}
#slider {
@@ -431,14 +492,14 @@ th, tr, td {
padding: 1px 10px 2px 2px;
border-top-left-radius: 10px;
border-bottom-left-radius: 0;
- background-color: var(--bg-blue-gray);
+ background-color: var(--bg-gray);
}
#set-end {
color: black;
padding: 1px 10px 2px 2px;
border-top-left-radius: 0;
border-bottom-left-radius: 10px;
- background-color: var(--bg-blue-gray);
+ background-color: var(--bg-gray);
height: 10px;
}
.set-group {
@@ -449,7 +510,7 @@ th, tr, td {
border-radius: 3px;
margin: 2px 0 2px 4px;
padding: 8px 10px 8px 5px;
- color: var(--fg-blue-gray);
+ color: var(--fg-gray);
right: -5px;
}
.set-group:hover {
@@ -470,7 +531,7 @@ th, tr, td {
margin-right: 5px;
padding: 5px;
}
-.set-pop label {
+.var-row label {
padding: 2px 4px 2px 0;
flex-grow: 1;
}
diff --git a/web/kiri/index.html b/web/kiri/index.html
index 7175c12f..841fddaf 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -27,7 +27,21 @@
Kiri:Moto
-
+
@@ -37,6 +51,20 @@