cleanup help

This commit is contained in:
Stewart Allen 2020-06-07 10:43:07 -04:00
commit 52eca70376
6 changed files with 171 additions and 115 deletions

View file

@ -1167,12 +1167,12 @@
extOffsetY: UC.newInput(LANG.dv_exoy_s, {title:LANG.dv_exoy_l, convert:UC.toFloat, modes:FDM, expert:true}), extOffsetY: UC.newInput(LANG.dv_exoy_s, {title:LANG.dv_exoy_l, convert:UC.toFloat, modes:FDM, expert:true}),
extSelect: UC.newText(LANG.dv_exts_s, {title:LANG.dv_exts_l, modes:FDM, size:14, height:3, modes:FDM, expert:true, area:gcode}), extSelect: UC.newText(LANG.dv_exts_s, {title:LANG.dv_exts_l, modes:FDM, size:14, height:3, modes:FDM, expert:true, area:gcode}),
extrudeAbs: UC.newBoolean(LANG.dv_xtab_s, onBooleanClick, {title:LANG.dv_xtab_l, modes:FDM}), extrudeAbs: UC.newBoolean(LANG.dv_xtab_s, onBooleanClick, {title:LANG.dv_xtab_l, modes:FDM}),
extActions: UC.newTableRow([[ extActions: UC.newRow([
UI.extPrev = UC.newButton("<"), UI.extPrev = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-less-than"></i>'}),
UI.extAdd = UC.newButton("+"), UI.extAdd = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-plus"></i>'}),
UI.extDel = UC.newButton("-"), UI.extDel = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-minus"></i>'}),
UI.extNext = UC.newButton(">") UI.extNext = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-greater-than"></i>'})
]], {modes:FDM, expert:true}), ], {modes:FDM, expert:true, class:"ext-buttons"}),
gcode: UC.newGroup(LANG.dv_gr_gco, $('device'), {group:"dgco", inline:true, modes:GCODE}), gcode: UC.newGroup(LANG.dv_gr_gco, $('device'), {group:"dgco", inline:true, modes:GCODE}),
gcodeFan: UC.newInput(LANG.dv_fanp_s, {title:LANG.dv_fanp_l, modes:FDM, size:"40%", text:true}), gcodeFan: UC.newInput(LANG.dv_fanp_s, {title:LANG.dv_fanp_l, modes:FDM, size:"40%", text:true}),

View file

@ -1807,14 +1807,13 @@
} }
ajax(local, function(html) { ajax(local, function(html) {
UI.help.innerHTML = html; UI.help.innerHTML = html;
$('kiri-version').innerHTML = `<i>${LANG.version} ${KIRI.version}</i>`; $('kiri-version').innerHTML = `${LANG.version} ${KIRI.version}`;
showModal('help'); showModal('help');
}); });
API.event.emit('help.show', local); API.event.emit('help.show', local);
} }
function showLocal() { function showLocal() {
// $('local-close').onclick = hideModal;
showModal('local'); showModal('local');
fetch("/api/grid_local") fetch("/api/grid_local")
.then(r => r.json()) .then(r => r.json())
@ -1901,7 +1900,7 @@
} }
function setExpert(bool) { function setExpert(bool) {
UC.setExpert(UI.expert.checked = control.expert = bool); UC.setExpert(UI.expert.checked = bool);
} }
function getMode() { function getMode() {

View file

@ -267,6 +267,7 @@
return div; return div;
} }
let lastTxt = null;
let lastPop = null; let lastPop = null;
let savePop = null; let savePop = null;
@ -289,7 +290,6 @@
let opt = options || {}, let opt = options || {},
row = newDiv(options), row = newDiv(options),
btn = DOC.createElement("button"), btn = DOC.createElement("button"),
box = DOC.createElement("div"),
pop = DOC.createElement("div"), pop = DOC.createElement("div"),
txt = DOC.createElement("textarea"), txt = DOC.createElement("textarea"),
area = opt.area; area = opt.area;
@ -298,7 +298,6 @@
txt.setAttribute("spellcheck", "false"); txt.setAttribute("spellcheck", "false");
txt.setAttribute("style", "resize: none"); txt.setAttribute("style", "resize: none");
box.appendChild(pop);
btn.appendChild(DOC.createTextNode("edit")); btn.appendChild(DOC.createTextNode("edit"));
btn.onclick = function(ev) { btn.onclick = function(ev) {
@ -311,7 +310,6 @@
if (fc) area.removeChild(fc); if (fc) area.removeChild(fc);
area.appendChild(txt); area.appendChild(txt);
// first time, button click / show // first time, button click / show
btn.parentNode.appendChild(box);
btn.parentNode.onclick = btn.onclick; btn.parentNode.onclick = btn.onclick;
txt.scrollTop = 0; txt.scrollTop = 0;
txt.scrollLeft = 0; txt.scrollLeft = 0;
@ -327,9 +325,14 @@
let showing = pop === lastPop; let showing = pop === lastPop;
hidePop(); hidePop();
if (!showing) { if (!showing) {
if (lastTxt) {
lastTxt.classList.remove('txt-sel');
}
row.classList.add('txt-sel');
savePop = inputAction; savePop = inputAction;
pop.style.display = "flex"; pop.style.display = "flex";
lastPop = pop; lastPop = pop;
lastTxt = row;
txt.focus(); txt.focus();
} else { } else {
inputAction(); inputAction();
@ -510,25 +513,28 @@
} }
function newButton(label, action, options) { function newButton(label, action, options) {
let b = DOC.createElement('button'), let opt = options || {},
t = DOC.createTextNode(label); b = DOC.createElement('button');
b.onclick = function() { b.onclick = function() {
hidePoppers(); hidePoppers();
if (action) action(); if (action) action();
}; };
if (options) { if (opt.class) {
if (options.class) b.classList.add(options.class); opt.class.split(' ').forEach(ce => {
if (options.icon) { b.classList.add(ce);
});
}
if (opt.icon) {
let d = DOC.createElement('div'); let d = DOC.createElement('div');
d.innerHTML = options.icon; d.innerHTML = opt.icon;
b.appendChild(d); b.appendChild(d);
} }
if (label) {
b.appendChild(DOC.createTextNode(label));
} }
b.appendChild(t);
addModeControls(b, options); addModeControls(b, options);
addId(b, options); addId(b, options);
@ -560,6 +566,11 @@
let row = addCollapsableElement((options && options.noadd) ? null : addTo); let row = addCollapsableElement((options && options.noadd) ? null : addTo);
if (children) children.forEach(function (c) { row.appendChild(c) }); if (children) children.forEach(function (c) { row.appendChild(c) });
addModeControls(row, options); addModeControls(row, options);
if (options && options.class) {
options.class.split(' ').forEach(ce => {
row.classList.add(ce);
});
}
return row; return row;
} }

View file

@ -1,8 +1,9 @@
:root { :root {
--fg-gray: #495057; --fg-gray: #495057;
--bg-gray: rgba(0,0,0,0.25); --bg-gray: rgba(0,0,0,0.25);
--gradbar: linear-gradient(to right, #ddd, #666, #ddd);
} }
a:hover, a:visited { a, a:hover, a:visited {
border: none; border: none;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@ -240,7 +241,7 @@ th, tr, td {
#mid-sep { #mid-sep {
height: 1px; height: 1px;
background-image: linear-gradient(to right, #ddd, #666, #ddd); background-image: var(--gradbar);
} }
#lt-top { #lt-top {
@ -270,7 +271,6 @@ th, tr, td {
left: 100%; left: 100%;
z-index: 10; z-index: 10;
} }
.pop-lcol > div { .pop-lcol > div {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -282,7 +282,6 @@ th, tr, td {
width: 60px; width: 60px;
color: var(--fg-gray); color: var(--fg-gray);
} }
.pop-lcol > div:hover { .pop-lcol > div:hover {
background-color: #eee; background-color: #eee;
border: 1px solid #aaa; border: 1px solid #aaa;
@ -300,26 +299,36 @@ th, tr, td {
left: -5px; left: -5px;
background-color: rgba(255,255,255,0.75); background-color: rgba(255,255,255,0.75);
} }
.lt-menu svg { .lt-menu svg {
font-size: 40px; font-size: 40px;
text-align: center; text-align: center;
} }
.lt-menu label { .lt-menu label {
font-size: smaller; font-size: smaller;
} }
.lt-menu:hover { .lt-menu:hover {
background-color: #eee; background-color: #eee;
border: 1px solid #aaa; border: 1px solid #aaa;
color: #000; color: #000;
} }
.lt-menu:hover .pop-lcol { .lt-menu:hover .pop-lcol {
display: flex; display: flex;
} }
.ext-buttons button {
justify-content: center;
align-items: center;
text-align: center;
flex-grow: 1;
margin-top: 3px;
}
.txt-sel {
background-color: #eee;
}
.txt-sel button {
background-color: #ccc;
}
#end { #end {
text-align: center; text-align: center;
font-size: smaller; font-size: smaller;
@ -379,7 +388,7 @@ th, tr, td {
padding: 10px; padding: 10px;
min-height: 20px; min-height: 20px;
font-size: smaller; font-size: smaller;
font-family: monospace; xfont-family: monospace;
background-color: rgba(255,255,255,0.75); background-color: rgba(255,255,255,0.75);
} }
@ -402,6 +411,53 @@ th, tr, td {
background-color: var(--bg-gray); background-color: var(--bg-gray);
} }
#help p {
margin: 2px;
}
#help a {
font-weight: bold;
text-decoration: underline;
}
#help #kiri-version {
font-weight: bold;
}
#help .header {
background-image: var(--gradbar);
white-space: nowrap;
text-align: center;
justify-content: center;
border-radius: 5px;
padding: 1px 0 2px 0;
margin-bottom: 5px;
font-family: monospace;
color: white;
}
#help .title {
justify-content: center;
flex-direction: column;
text-align: center;
font-size: larger;
font-weight: bold;
padding: 10px;
}
#help .content {
white-space: nowrap;
flex-direction: column;
font-family: monospace;
margin: 3px 0 8px 0;
}
#help .footer {
font-family: monospace;
align-items: center;
white-space: nowrap;
flex-direction: column;
padding: 8px 0 3px 0;
border-top: 1px dashed black;
}
#help th, #help td {
font-family: monospace;
}
.dev-type { .dev-type {
font-family: 'Russo One', sans-serif; font-family: 'Russo One', sans-serif;
flex-direction: column; flex-direction: column;
@ -423,9 +479,10 @@ th, tr, td {
width: 33%; width: 33%;
} }
.t-group { .t-group {
background-image: linear-gradient(to right, #ddd, #666, #ddd); background-image: var(--gradbar);
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
justify-content: center;
border-radius: 2px; border-radius: 2px;
padding: 1px 0 2px 0; padding: 1px 0 2px 0;
margin: 5px 0 5px 0; margin: 5px 0 5px 0;

View file

@ -1,68 +1,58 @@
<div id="help-body" class="row"> <div id="help" class="row">
<div id="help-left" class="col"> <div id="help-left" class="col">
<p><center><b>Kiri:Moto</b></center></p> <div class="title">Kiri:Moto</div>
<div class="grouphead">About</div> <div class="header">About</div>
<div class="content"> <div class="content">
<a href="#" title="Kiri-e is the Japanese art of papercutting"><b>Kiri:Moto</b></a> <p><a href="#" title="Kiri-e is the Japanese art of papercutting"><b>Kiri:Moto</b></a> is an <a href="https://github.com/GridSpace/grid-apps" target="_github">open-source</a> slicer for</p>
is an <a href="https://github.com/GridSpace/grid-apps" target="_github">open-source</a> slicer for <p>Laser cutting, 3D printing, CNC milling</p>
<br>
Laser cutting, 3D printing, CNC milling
</div> </div>
<div class="grouphead">File Loading</div> <div class="header">File Loading</div>
<div class="content"> <div class="content">
Drag and drop a <a href="https://en.wikipedia.org/wiki/STL_(file_format)" target="_stl">file</a> onto the grid <p>Drag and drop a <a href="https://en.wikipedia.org/wiki/STL_(file_format)" target="_stl">file</a> onto the grid</p>
<br> <p>or import from your computer</p>
or import from your computer
</div> </div>
<div class="grouphead">Workflow</div> <div class="header">Integrations</div>
<div class="content"> <div class="content">
Select operating <u>mode</u><br> <p>Kiri:Moto is also available through</p>
Select target <u>device</u><br> <p><a target="_onshape" href="https://appstore.onshape.com/apps/CAM/EAAEWYIOMQKBENEMYW2N7MF253CT4WYL6SUJGEY=/description"><b>Onshape</b></a> and
<u>Slice</u>, <u>Preview</u>, then <u>Export</u> GCode <a target="_thingiverse" href="http://www.thingiverse.com/apps/kirimoto/"><b>Thingiverse</b></a> as apps</p>
</div> </div>
<div class="grouphead">Integrations</div> <div class="header">Resources</div>
<div class="content"> <div class="content">
Kiri:Moto is also available through<br> <p>Watch a <a target="_tutor" href="https://www.youtube.com/playlist?list=PLRoVgyRoWZpumQIKWm7oldx3bjDivqP24">tutorial</a> on YouTube</p>
<a target="_onshape" href="https://appstore.onshape.com/apps/CAM/EAAEWYIOMQKBENEMYW2N7MF253CT4WYL6SUJGEY=/description">Onshape</a> and <p>Follow <a target="_tw" href="https://twitter.com/grid_space_3d">Grid.Space</a> on Twitter</p>
<a target="_thingiverse" href="http://www.thingiverse.com/apps/kirimoto/">Thingiverse</a> as apps <p>Join the <a target="_fb" href="https://www.facebook.com/groups/kirimoto">user group</a> on Facebook</p>
<p>Visit the <a target="_help" href="https://wiki.grid.space/wiki/Kiri:Moto">Wiki</a> on Github</p>
</div> </div>
<div class="grouphead">Resources</div> <div class="grow"></div>
<div class="footer">
<div class="content"> <div id="kiri-version"></div>
Watch <a target="_tutor" href="https://www.youtube.com/playlist?list=PLRoVgyRoWZpumQIKWm7oldx3bjDivqP24">a tutorial</a> on YouTube <div>Please report bugs</div>
<br>
Follow <a target="_tw" href="https://twitter.com/grid_space_3d">Grid.Space</a> on Twitter
<br>
Join the <a target="_fb" href="https://www.facebook.com/groups/kirimoto">user group</a> on Facebook
<br>
Visit the <a target="_help" href="https://wiki.grid.space/wiki/Kiri:Moto">Wiki</a> on Github
</div> </div>
<div class="help-post"><p id="kiri-version"></p></div>
</div> </div>
<div id="help-right" class="col"> <div id="help-right" class="col">
<p><center><b>Keyboard & Mouse Controls</b></center> <div class="title">Keyboard & Mouse Controls</div>
<p>
<div class="row"> <div class="row">
<table> <table>
<tr><th colspan=2 class="grouphead">Mode</th></tr> <tr><td colspan=2 class="header">Mode</td></tr>
<tr><td><label>a</label></td><td>Arrange</td></tr> <tr><td><label>a</label></td><td>Arrange</td></tr>
<tr><td><label>s</label></td><td>Slice</td></tr> <tr><td><label>s</label></td><td>Slice</td></tr>
<tr><td><label>p</label></td><td>Preview</td></tr> <tr><td><label>p</label></td><td>Preview</td></tr>
<tr><td><label>x</label></td><td>Export</td></tr> <tr><td><label>x</label></td><td>Export</td></tr>
<tr><td></td></tr> <tr><td></td></tr>
<tr><th colspan=2 class="grouphead">View</th></tr> <tr><td colspan=2 class="header">View</td></tr>
<tr><td><label>h</label></td><td>Home</td></tr> <tr><td><label>h</label></td><td>Home</td></tr>
<tr><td><label>t</label></td><td>Top</td></tr> <tr><td><label>t</label></td><td>Top</td></tr>
<tr><td><label>l</label></td><td>Left</td></tr> <tr><td><label>l</label></td><td>Left</td></tr>
@ -79,13 +69,13 @@
<tr><td>middle-drag</td><td>Zoom</td></tr> <tr><td>middle-drag</td><td>Zoom</td></tr>
</table> </table>
<table> <table>
<tr><th colspan=2 class="grouphead">Config</th></tr> <tr><td colspan=2 class="header">Config</td></tr>
<tr><td><label>?</label></td><td>This Help Window</td></tr> <tr><td><label>?</label></td><td>This Help Window</td></tr>
<tr><td><label>e</label></td><td>Device Selection</td></tr> <tr><td><label>e</label></td><td>Device Selection</td></tr>
<tr><td><label>o</label></td><td>CAM Tool Selection</td></tr> <tr><td><label>o</label></td><td>CAM Tool Selection</td></tr>
<tr><td><label>c</label></td><td>Grid Local Devices</td></tr> <tr><td><label>c</label></td><td>Grid Local Devices</td></tr>
<tr><td></td></tr> <tr><td></td></tr>
<tr><th colspan=2 class="grouphead">Object</th></tr> <tr><td colspan=2 class="header">Object</td></tr>
<tr><td><label>d</label></td><td>Duplicate</td></tr> <tr><td><label>d</label></td><td>Duplicate</td></tr>
<tr><td><label>m</label></td><td>Mirror</td></tr> <tr><td><label>m</label></td><td>Mirror</td></tr>
<tr><td><label>w</label></td><td>Wireframe</td></tr> <tr><td><label>w</label></td><td>Wireframe</td></tr>
@ -100,11 +90,10 @@
</table> </table>
</div> </div>
<div class="help-post"> <div class="grow"></div>
<p><b>Kiri:Moto is entirely open source</b>!</p> <div class="footer">
<p>Please contribute to the project with code,<br> <div><b>Kiri:Moto is entirely open source</b>!</div>
ideas, or localizations for your preferred language.</p> <div>Contributions welcome</div>
<p><b>&lt;ESC&gt; key closes any dialog in Kiri</b></p>
</div> </div>
</div> </div>

View file

@ -112,7 +112,7 @@ kiri.lang['en-us'] = {
ws_cler: "Clear", ws_cler: "Clear",
// OPTIONS // OPTIONS
op_menu: "options", op_menu: "preferences",
op_xprt_s: "expert", op_xprt_s: "expert",
op_xprt_l: "enable expert options", op_xprt_l: "enable expert options",
op_dark_s: "dark mode", op_dark_s: "dark mode",