AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

redo help dialog

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

1
notes.md
View file

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

4
src/kiri/main.js
View file

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

68
web/kiri/index.css
View file

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

263
web/kiri/lang/en-help.html
View file

@ -1,118 +1,165 @@
<!--
<div id="help" class="f-row">
<div id="help" class="f-col a-stretch">
<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 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 id="help-tabs">
<div id="help-tab-about" class="help-tab">about</div>
<div id="help-tab-shortcut" class="help-tab">shortcuts</div>
</div>
</div>
-->
<div id="help" class="f-row">
<div id="help-left" class="f-col">
<div class="title">Kiri:Moto</div>
<div class="header">About</div>
<div class="content">
<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>
<p>Laser cutting, 3D printing, CNC milling</p>
</div>
<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 id="help-tabs" class="f-grow">
<div id="help-tab-about" class="help-tab f-col a-center">
<div class="content">
<p>
<b>Kiri:Moto</b> is a unique browser-based, fully open source slicer that
turns 3d models into machine instructions for <u>3D printers</u>, <u>CNC mills</u>,
and <u>Laser Cutters</u>.
</p><br><p>
Being browser-based means that <i>all</i> processing happens in your local browser,
and not in the cloud. Your data and models stay <i>private</i> to you.
</p><br><p>
This means that Kiri behaves just like a native app on your computer with the added
safety of running inside the browser's security sandbox.
</p><br><p>
The other benefit of running from the web is that Kiri is always up to date. New
features, bug fixes, and updaets roll out frequently. If you want to run an older
or development version of Kiri, select that version from the user menu on the top right.
</p>
</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 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>