redo help dialog

This commit is contained in:
Stewart Allen 2020-11-16 21:17:47 -05:00
commit aa978a0199
4 changed files with 201 additions and 125 deletions

View file

@ -2,7 +2,6 @@
## 2.3 remaining ## 2.3 remaining
* cap path ends * cap path ends
* help dialog
* onshape mouse mapping option * onshape mouse mapping option
## 2.4 ## 2.4

View file

@ -1898,7 +1898,6 @@
function showHelp() { function showHelp() {
showHelpFile(`/kiri/lang/${KIRI.lang.get()}-help.html?${KIRI.version}`,() => { showHelpFile(`/kiri/lang/${KIRI.lang.get()}-help.html?${KIRI.version}`,() => {
return;
const sel = $('help-sel'); const sel = $('help-sel');
const labels = [...sel.getElementsByTagName('div')]; const labels = [...sel.getElementsByTagName('div')];
const tabs = []; const tabs = [];
@ -1914,7 +1913,7 @@
tabs.push(tab); tabs.push(tab);
label.onclick = () => { click(label, tab) }; label.onclick = () => { click(label, tab) };
}); });
click(labels[0], tabs[0]); click(labels[1], tabs[1]);
}); });
} }
@ -1927,6 +1926,7 @@
UI.help.innerHTML = html; UI.help.innerHTML = html;
try { try {
$('kiri-version').innerHTML = `${LANG.version} ${KIRI.version}`; $('kiri-version').innerHTML = `${LANG.version} ${KIRI.version}`;
// $('kiri-version').innerHTML = `${KIRI.version}`;
} catch (e) { } } catch (e) { }
if (then) { if (then) {
then(); then();

View file

@ -654,9 +654,6 @@ th, tr, td, label {
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }
#help #kiri-version {
font-weight: bold;
}
#help .header { #help .header {
background-color: rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.1);
justify-content: center; justify-content: center;
@ -668,18 +665,33 @@ th, tr, td, label {
font-family: monospace; font-family: monospace;
} }
#help .title { #help .title {
justify-content: center;
flex-direction: column;
text-align: center; text-align: center;
font-size: larger; font-size: larger;
font-weight: bold; font-weight: bold;
padding: 10px; padding: 10px 0 5px 50px;
}
#help .title label {
display: inline-flex;
}
#help #kiri-version {
position: absolute;
right: 10px;
bottom: 5px;
font-family: monospace;
font-weight: normal;
font-size: smaller;
color: #333;
} }
#help .content { #help .content {
white-space: nowrap;
flex-direction: column; flex-direction: column;
font-family: monospace;
margin: 3px 0 8px 0; margin: 3px 0 8px 0;
line-height: 1.5em;
}
#help .content p {
text-align: justify;
}
#help .content li {
line-height: 1.75em;
} }
#help .footer { #help .footer {
font-family: monospace; font-family: monospace;
@ -695,29 +707,37 @@ th, tr, td, label {
#help td label { #help td label {
font-weight: bold; font-weight: bold;
} }
#help-left { #help button {
padding-right: 5px; display: inline-flex;
border-right: 1px dashed #aaa;
}
#help-left .title {
margin-bottom: 2px;
}
#help-right {
padding-left: 3px;
} }
.help-label { .help-label {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border: 1px solid rgba(0,0,0,0); border: 1px solid rgba(0,0,0,0);
border-right: 0; border-right: 0;
padding: 5px; padding: 12px 10px 12px 8px;
z-index: 1000;
} }
.help-label.sel { .help-label.sel {
background-color: white;
border: 1px solid #888; border: 1px solid #888;
border-right: 0; border-right: 0;
} }
#help-tabs {
width: 550px;
height: 450px;
transform: translateX(-1px);
}
.help-tab { .help-tab {
flex-grow: 1;
display: none; display: none;
overflow-y: auto;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border: 1px solid #888; border: 1px solid #888;
padding: 5px; padding: 10px;
background-color: white;
white-space: normal;
} }
.confirm { .confirm {
padding-top: 15px; padding-top: 15px;
@ -1063,6 +1083,16 @@ th, tr, td, label {
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
} }
.nounderline a {
text-decoration: none !important;
line-height: 2em;
}
.nounderline svg {
width: 30px !important;
}
.mono {
font-family: monospace;
}
#gdpr { #gdpr {
position: absolute; position: absolute;

View file

@ -1,118 +1,165 @@
<!-- <div id="help" class="f-col a-stretch">
<div id="help" class="f-row">
<div class="title f-row j-center">
<label>Kiri:Moto Slicer Help</label>
<label id="kiri-version"></label>
</div>
<div class="f-row">
<div id="help-sel" class="f-col"> <div id="help-sel" class="f-col">
<div class="help-label" tab="about">about</div> <div class="help-label" tab="about">about</div>
<div class="help-label" tab="shortcut">shortcuts</div> <div class="help-label" tab="start">starting</div>
<div class="help-label" tab="controls">controls</div>
<!--
<hr width=75%>
<div class="help-label" tab="print">3d print</div>
<div class="help-label" tab="mill">cnc mill</div>
<div class="help-label" tab="laser">laser cut</div>
<hr width=75%>
-->
<div class="help-label" tab="support">support</div>
<div class="help-label" tab="project">project</div>
</div> </div>
<div id="help-tabs"> <div id="help-tabs" class="f-grow">
<div id="help-tab-about" class="help-tab">about</div> <div id="help-tab-about" class="help-tab f-col a-center">
<div id="help-tab-shortcut" class="help-tab">shortcuts</div> <div class="content">
</div> <p>
<b>Kiri:Moto</b> is a unique browser-based, fully open source slicer that
</div> turns 3d models into machine instructions for <u>3D printers</u>, <u>CNC mills</u>,
--> and <u>Laser Cutters</u>.
<div id="help" class="f-row"> </p><br><p>
Being browser-based means that <i>all</i> processing happens in your local browser,
<div id="help-left" class="f-col"> and not in the cloud. Your data and models stay <i>private</i> to you.
<div class="title">Kiri:Moto</div> </p><br><p>
This means that Kiri behaves just like a native app on your computer with the added
<div class="header">About</div> safety of running inside the browser's security sandbox.
<div class="content"> </p><br><p>
<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> The other benefit of running from the web is that Kiri is always up to date. New
<p>Laser cutting, 3D printing, CNC milling</p> features, bug fixes, and updaets roll out frequently. If you want to run an older
</div> or development version of Kiri, select that version from the user menu on the top right.
</p>
<div class="header">File Loading</div>
<div class="content">
<p>Drag and drop a <a href="https://en.wikipedia.org/wiki/STL_(file_format)" target="_stl">file</a> onto the grid</p>
<p>or import from your computer</p>
</div>
<div class="header">Integrations</div>
<div class="content">
<p>Kiri:Moto is also available through</p>
<p><a target="_onshape" href="https://appstore.onshape.com/apps/CAM/EAAEWYIOMQKBENEMYW2N7MF253CT4WYL6SUJGEY=/description"><b>Onshape</b></a> and
<a target="_thingiverse" href="http://www.thingiverse.com/apps/kirimoto/"><b>Thingiverse</b></a> as apps</p>
</div>
<div class="header">Resources</div>
<div class="content">
<p>Visit the <a target="_fo" href="https://forum.grid.space">forums</a> on Grid.Space</p>
<p>Watch a <a target="_tutor" href="https://www.youtube.com/playlist?list=PLRoVgyRoWZpumQIKWm7oldx3bjDivqP24">tutorial</a> on YouTube</p>
<p>Read the <a target="_help" href="https://wiki.grid.space/wiki/Kiri:Moto">Wiki</a> on Github</p>
<p>Follow <a target="_tw" href="https://twitter.com/grid_space_3d">Grid.Space</a> on Twitter</p>
<p style="text-align:center; font-size:smaller">... also ...</p>
<p>Choose another <a target="_help" href="/choose">version</a> of Kiri:Moto</p>
</div>
<div class="grow"></div>
<div class="footer">
<div id="kiri-version"></div>
<div>Please report bugs</div>
</div>
</div>
<div id="help-right" class="f-col">
<div class="title">Keyboard & Mouse Controls</div>
<div class="f-row">
<table>
<tr><td colspan=2 class="header">Mode</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>p</label></td><td>Preview</td></tr>
<tr><td><label>x</label></td><td>Export</td></tr>
<tr><td></td></tr>
<tr><td colspan=2 class="header">View</td></tr>
<tr><td><label>t</label></td><td>Top</td></tr>
<tr><td><label>h</label></td><td>Home</td></tr>
<tr><td><label>v</label></td><td>Layer</td></tr>
<tr><td><label>shift</label> wheel</td><td>Change Layer</td></tr>
<tr><td><label>meta</label> drag</td><td>Pan</td></tr>
<tr><td><label>right-drag</label></td><td>Pan</td></tr>
<tr><td><label>left-drag</label></td><td>Rotate</td></tr>
<tr><td><label>mouse-wheel</label></td><td>Zoom</td></tr>
<tr><td><label>middle-drag</label></td><td>Zoom</td></tr>
<tr><td><label>z</label></td><td>Reset View</td></tr>
<tr><td></td></tr>
<tr><td colspan=2 class="header">Help</td></tr>
<tr><td><label>?</label></td><td>This Window</td></tr>
</table>
<table>
<tr><td colspan=2 class="header">Config</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>c</label></td><td>Grid Local Devices</td></tr>
<tr><td><label>q</label></td><td>Preference panel</td></tr>
<tr><td></td></tr>
<tr><td colspan=2 class="header">Object</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>w</label></td><td>Wireframe</td></tr>
<tr><td><label>delete</label></td><td>Delete</td></tr>
<tr><td><label>arrow</label></td><td>Rotate 90&deg;</td></tr>
<tr><td><label>shift-arrow</label></td><td>Rotate 5&deg;</td></tr>
<tr><td><label>option-arrow</label></td><td>Move 5mm</td></tr>
<tr><td><label>ctrl-click</label></td><td>Align face to bed</td></tr>
<tr><td><label>meta-click</label></td><td>of selected object</td></tr>
<tr><td><label>ctrl-a</label></td><td>Select all</td></tr>
<tr><td></td></tr>
<tr><td colspan=2 class="header">File</td></tr>
<tr><td><label>i</label></td><td>Import</td></tr>
<tr><td><label>r</label></td><td>Recent</td></tr>
</table>
</div>
<div class="grow"></div>
<div class="footer">
<div><b>Kiri:Moto is entirely open source</b>!</div>
<div style="display:inline-block">
<a target="_paypal" href="https://paypal.me/gridspace3d?locale.x=en_US">Donations</a> and
<a target="_github" href="https://github.com/GridSpace/grid-apps">Contributions</a> welcome
</div> </div>
<div class="grow"></div>
<i>Kiri comes from Kiri-e which is the Japanese art of papercutting</i>
<i>Moto is short for "Modeling Tool"</i>
</div> </div>
<div id="help-tab-start" class="help-tab f-col"><div class="content">
<b class="header">Quick Start Guide</b>
<div class="content">
<p>
<li>Use the <button><i class="fas fa-cogs"></i></button> Setup menu to select a <button><i class="fas fa-cube"></i></button> machine</li>
<li><button><i class="fas fa-plus"></i></button> Clone the machine if you want to customize it</li>
<li>Drag and drop an <a href="https://en.wikipedia.org/wiki/STL_(file_format)" target="_stl">STL file</a> onto the grid (turns green)</li>
<li>or use <button><i class="fas fa-folder"></i></button> files <button><i class="fas fa-file-upload"></i></button> import from your computer</li>
<li>use the settings menus (right) to customize slicing parameters</li>
<li><button><i class="fas fa-bars"></i></button> slice objects to see the effect of the parameters</li>
<li><button><i class="fas fa-cubes"></i></button> preview calculates path data from slice objects</li>
<li><button><i class="fas fa-file-download"></i></button> export converts paths to files like GCode and SVG</li>
<li>Explore <button><i class="fas fa-cogs"></i></button> Setup <button><i class="fas fa-sliders-h"></i></button> preferences for app customization</li>
</p>
</div>
<div class="content">
<b class="header">Operating Modes</b>
<p>Each mode (FDM, CAM, Laser, SLA) has different features and settings.
Explore the Youtube videos to find out more.</p>
</div>
</div></div>
<div id="help-tab-print" class="help-tab f-col">about 3d printing</div>
<div id="help-tab-mill" class="help-tab f-col">about cnc milling</div>
<div id="help-tab-laser" class="help-tab f-col">about laser cutting</div>
<div id="help-tab-controls" class="help-tab f-col a-center"><div class="content">
<b class="header">Keyboard & Mouse Controls</b><br>
<div class="f-row">
<table>
<tr><td colspan=2 class="header">Mode</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>p</label></td><td>Preview</td></tr>
<tr><td><label>x</label></td><td>Export</td></tr>
<tr><td></td></tr>
<tr><td colspan=2 class="header">View</td></tr>
<tr><td><label>t</label></td><td>Top</td></tr>
<tr><td><label>h</label></td><td>Home</td></tr>
<tr><td><label>v</label></td><td>Layer</td></tr>
<tr><td><label>shift</label> wheel</td><td>Change Layer</td></tr>
<tr><td><label>meta</label> drag</td><td>Pan</td></tr>
<tr><td><label>right-drag</label></td><td>Pan</td></tr>
<tr><td><label>left-drag</label></td><td>Rotate</td></tr>
<tr><td><label>mouse-wheel</label></td><td>Zoom</td></tr>
<tr><td><label>middle-drag</label></td><td>Zoom</td></tr>
<tr><td><label>z</label></td><td>Reset View</td></tr>
<tr><td></td></tr>
<tr><td colspan=2 class="header">Help</td></tr>
<tr><td><label>?</label></td><td>This Window</td></tr>
</table>
<table>
<tr><td colspan=2 class="header">Config</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>c</label></td><td>Grid Local Devices</td></tr>
<tr><td><label>q</label></td><td>Preference panel</td></tr>
<tr><td></td></tr>
<tr><td colspan=2 class="header">Object</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>w</label></td><td>Wireframe</td></tr>
<tr><td><label>delete</label></td><td>Delete</td></tr>
<tr><td><label>arrow</label></td><td>Rotate 90&deg;</td></tr>
<tr><td><label>shift-arrow</label></td><td>Rotate 5&deg;</td></tr>
<tr><td><label>option-arrow</label></td><td>Move 5mm</td></tr>
<tr><td><label>ctrl-click</label></td><td>Align face to bed</td></tr>
<tr><td><label>meta-click</label></td><td>of selected object</td></tr>
<tr><td><label>ctrl-a</label></td><td>Select all</td></tr>
<tr><td></td></tr>
<tr><td colspan=2 class="header">File</td></tr>
<tr><td><label>i</label></td><td>Import</td></tr>
<tr><td><label>r</label></td><td>Recent</td></tr>
</table>
</div>
</div></div>
<div id="help-tab-support" class="help-tab f-col"><div class="content">
<b class="header">Resources</b>
<div class="content nounderline">
<a target="_fo" href="https://forum.grid.space"><i class="fab fa-discourse"></i> Grid.Space Discourse forums</a>
<a target="_tutor" href="https://www.youtube.com/playlist?list=PLRoVgyRoWZpumQIKWm7oldx3bjDivqP24"><i class="fab fa-youtube"></i> Youtube videos and tutorials</a>
<a target="_tw" href="https://twitter.com/grid_space_3d"><i class="fab fa-twitter"></i> Follow Grid.Space on Twitter</a>
<a target="_fb" href="https://facebook.com/groups/kirimoto"><i class="fab fa-facebook"></i> Kiri:Moto Users group on Facebook</a>
<a target="_help" href="https://wiki.grid.space/wiki/Kiri:Moto"><i class="fab fa-github"></i> Grid.Space Wiki</a>
</div>
<b class="header">In-App Options</b>
<p>
Under the <button><i class="fas fa-user-cog"></i></button> user menu on the top right,
use the <span class="mono">export</span> option to create a downloadable copy of your device
profiles and (optionally) workspace. This file can be used to checkpoint and restore a full
snapshot of your setup an any time. It can also be shared so that developers and other users
can replicate your environment to help aid in debugging.
</p>
</div></div>
<div id="help-tab-project" class="help-tab f-col"><div class="content">
<b class="header">Open Source</b>
<p>
Kiri:Moto is entirely <a href="https://github.com/GridSpace/grid-apps" target="_github">open-source</a>.
Check out the Github project page. There are companion projects, both hardware and software.
New developers and code contributions are welcome at any time. The code license is MIT.
</p><br><p>
<a target="_paypal" href="https://paypal.me/gridspace3d?locale.x=en_US">Donations</a> are also welcome.
</p>
<br><b class="header">Integrations</b>
<p>Kiri:Moto is also integrated into several other web-based applications</p>
<li><a target="app" href="https://appstore.onshape.com/apps/CAM/EAAEWYIOMQKBENEMYW2N7MF253CT4WYL6SUJGEY=/description"><b>Onshape</b></a> in the App store</li>
<li><a target="app" href="http://www.thingiverse.com/apps/kirimoto/"><b>Thingiverse</b></a> as a native Thing Apps</li>
<li><a target="app" href="https://simplyprint.io">SimplyPrint.io</a> as the primary slicer under the covers</li>
<li><a target="app" href="https://sienci.com/camlab-help/">CAMLab</a> is a fork of an earlier version of Kiri:Moto</li>
</div></div>
</div> </div>
</div>
</div> </div>