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

fix adding cnc ops

Browse source
This commit is contained in:
Stewart Allen 2024-05-28 18:02:52 -04:00
commit c7456c7736
7 changed files with 313 additions and 276 deletions
Download patch file Download diff file Expand all files Collapse all files

123
web/kiri/index.css
View file

@ -3,6 +3,7 @@
--bg-gray: rgba(0,0,0,0.25);
--bg-gray-lt: rgba(0,0,0,0.15);
--gradbar: linear-gradient(to right, #ddd, #666, #ddd);
--gradbar2: linear-gradient(to right, #ddd, #999, #ddd);
--gradbar-vert: linear-gradient(to bottom, #ddd, #666, #ddd);
--holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
--holdbar-dk: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,0.25), rgba(100,100,100,0.1));
@ -179,6 +180,10 @@ th, tr, td, label {
bottom: 0;
}
#app-name .km-font {
font-size: larger;
}
/* top menu bar, drop menus */
#top, #app-name {
background-color: var(--work-area);
@ -514,6 +519,15 @@ th, tr, td, label {
/* border-top: 3px dashed black; */
background-color: var(--bg-gray-lt);
}
.chonk2 {
/* margin: 10px 0 10px 0; */
/* height: 0px; */
min-height: 3px;
max-height: 3px;
min-width: 100px;
/* border-top: 3px dashed black; */
background-color: var(--bg-gray-lt);
}
#mode-info {
white-space: nowrap;
font-size: smaller;
@ -641,20 +655,17 @@ th, tr, td, label {
text-transform: none !important;
}
#mid-left, #right-work {
#panel-left, #panel-right {
max-height: 100%;
background-color: var(--work-area);
}
#mid-left, #mid-right, #modal {
#panel-left, #panel-right, #modal {
pointer-events: visible;
text-transform: capitalize;
}
#mid-left label, #mid-left svg {
#panel-left label, #panel-left svg {
pointer-events: none;
}
#right-work > div {
padding: 0 5px 0 5px;
}
.slim-hide {
width: 0;
@ -671,6 +682,13 @@ th, tr, td, label {
max-height: 1px;
background-image: var(--gradbar);
}
.line-sep2 {
z-index: 14;
height: 1px;
min-height: 1px;
max-height: 1px;
background-image: var(--gradbar2);
}
.mid-sep {
z-index: 14;
width: 1px;
@ -938,18 +956,9 @@ th, tr, td, label {
display: flex;
padding: 5px 0 0 0;
}
.work-header {
background-color: var(--work-area);
font-size: smaller;
flex-direction: column;
justify-content: stretch;
text-align: center;
padding: 10px;
gap: 5px;
}
.cam-pop-op {
top: 0;
right: 100%;
right: calc(100% + 4px);
text-align: left;
position: absolute;
white-space: nowrap;
@ -1055,8 +1064,8 @@ th, tr, td, label {
#op-add-pop {
position: absolute;
display: none;
right: 100%;
top: 0;
right: 100%;
transform: translateY(-50%);
}
#op-add:hover #op-add-pop {
@ -1070,10 +1079,12 @@ th, tr, td, label {
gap: 5px;
}
#op-add-list {
margin-right: 10px;
padding: 4px;
display: flex;
align-items: stretch;
flex-direction: column;
text-transform: none !important;
}
#op-add-list > div {
padding: 3px 5px 3px 5px;
@ -1081,6 +1092,7 @@ th, tr, td, label {
flex-direction: column;
border: 1px dashed gray;
border-radius: 3px;
text-align: center;
}
#op-add-list > div:hover {
background-color: rgba(0,0,0,0.2);
@ -1840,7 +1852,10 @@ th, tr, td, label {
border-radius: 3px;
}
#settings {
#panel-right{
overflow: unset;
}
.settings {
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
@ -1848,46 +1863,38 @@ th, tr, td, label {
text-transform: capitalize;
background-color: rgba(255,255,255,0.5);
}
#settings .set-group {
.settings .set-group {
cursor: pointer;
}
#settings .pop-sep {
.settings .pop-sep {
display: none !important;
}
.settings .set-header a {
font-size: smaller;
}
.set2-group {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 10px;
padding-bottom: 2px;
margin: 3px;
gap: 1.5px;
}
.set2-group .var-row {
margin: 0 7px 0 7px !important;
padding: 0 7px 0 7px !important;
margin: 0 !important;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.set2-group .var-row:hover {
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
background-color: #f8f8f8 !important;
}
.set2-group .var-row label {
margin-right: 25px;
}
.set2-group .set-header {
background-color: #ddd !important;
padding: 5px !important;
margin: 0 0 3px 0 !important;
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
}
.set2-group .set-header a {
text-transform: uppercase;
text-align: center;
font-weight: bold;
font-size: smaller;
flex-grow: 1;
}
.set2-group .set-header hr {
border: 0 !important;
flex-grow: 0 !important;
max-width: 0 !important;
max-height: 0 o !important;
.set2-sep {
flex-shrink: 0;
flex-direction: column;
margin: 0 0 3px 0;
}
.pop-sep, .set-sep {
border: 0 !important;
@ -1899,26 +1906,18 @@ th, tr, td, label {
background-color: #bbb;
}
.set-header {
padding: 3px 5px 3px 5px;
margin: 7px 3px 3px 3px;
white-space: nowrap;
border-radius: 2px;
justify-content: center;
background-color: var(--menu);
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
padding: 4px;
margin: 0 0 4px 0;
}
.set-header hr {
display: none;
}
#settings .set-header {
justify-content: left !important;
background-color: transparent;
.settings .set-header {
border-radius: 2px;
}
#settings .set-header hr {
display: flex !important;
}
#settings .set-header:hover {
background-color: rgba(0,0,0,0.1) !important;
margin: 0 !important;
}
.set-header-line {
margin-left: 5px;
@ -1951,13 +1950,13 @@ th, tr, td, label {
margin-right: 5px;
padding: 5px;
}
#settings .var-row {
.settings .var-row {
margin: 0 10px 0 15px;
}
#settings .var-row:hover {
/* .settings .var-row:hover {
color: blue;
}
#settings .ext-buttons {
} */
.settings .ext-buttons {
margin: 0 9px 0 14px;
gap: 3px;
}

385
web/kiri/index.html
View file

@ -246,7 +246,7 @@
<div id="mid" class="grow f-row">
<!-- left settings menu -->
<div id="mid-left" class="f-col j-left">
<div id="panel-left" class="f-col j-left">
<!-- ephemeral -->
<div id="lt-back" class="lt-menu lt-enabled">
<i class="fas fa-arrow-circle-left"></i>
@ -267,10 +267,10 @@
<div><label>Device</label><span id="mode-device"></span></div>
<div><label>Profile</label><span id="mode-profile"></span></div>
</div>
<div class="line-sep"></div>
<div class="chonk"></div>
<div class="line-sep"></div>
<div id="settings" class="f-col grow">
<div class="line-sep2"></div>
<!-- <div class="chonk"></div>
<div class="line-sep"></div> -->
<div class="f-col grow settings">
<!-- FDM -->
<div id="fdm-layers" class="f-col set2-group mode-fdm"></div>
<div id="fdm-base" class="f-col set2-group mode-fdm"></div>
@ -308,166 +308,6 @@
<!-- main workspace -->
<div id="mid-mid" class="grow">
<div id="modal">
<div id="modal-box" class="f-col">
<div class="mod-top f-row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
<div id="mod-help" class="mdialog f-col">
<div class="f-row j-center title">
<label>Kiri:Moto Help</label>
</div>
<div class="f-col">
<a target="_rsc" href="https://docs.grid.space/projects/kiri-moto"><i class="fas fa-question-circle"></i>Kiri:Moto Full Documentation</a>
<a href="https://youtu.be/08795Sj22QE" target="youtube"><i class="fab fa-youtube"></i>Video Guide to Kiri:Moto 2.5</a>
<a target="_rsc" href="https://www.youtube.com/c/GridSpace/videos"><i class="fab fa-youtube"></i>YouTube Channel</a>
<a target="_rsc" href="https://discord.gg/suyCCgr"><i class="fab fa-discord"></i> Discord Live Chat</a>
<a target="_rsc" href="https://forum.grid.space"><i class="fab fa-discourse"></i> Discourse Forums</a>
<a target="_rsc" href="https://twitter.com/grid_space_3d"><i class="fab fa-twitter"></i> Follow on Twitter</a>
<a target="_rsc" href="https://paypal.me/gridspace3d?locale.x=en_US"><i class="fab fa-paypal"></i> Donations are welcome!</a>
</div>
<div class="f-row j-center">
<label id="kiri-version"></label>
</div>
</div>
<div id="mod-setup" class="mdialog f-row">
<div class="f-col left a-stretch">
<label class="header" lk="dm_sldt">select a device type</label>
<div class="f-col">
<table><tr>
<th><button id="mode-fdm" class="dev-type"><label>FDM</label></button></th>
<th><button id="mode-sla" class="dev-type"><label>SLA</label></button></th>
</tr><tr>
<th><button id="mode-cam" class="dev-type"><label>CNC</label></button></th>
<th><button id="mode-laser" class="dev-type"><label>LASER</label></button></th>
</tr></table>
</div>
<div id="dev-header" class="header sub f-col j-center">
<label lk="dm_stdd">standard devices</label>
<div id="dev-search">
<i class="fas fa-search"></i>
<input id="dev-filter">
</div>
</div>
<div class="f-col mh0 mh35 j-center a-stretch">
<div id="device-list" class="devlist f-col overy"></div>
</div>
<label class="header sub" lk="dm_mydd">my devices</label>
<div class="f-col grow">
<div id="device-my" class="devlist f-col grow overy"></div>
<div class="f-row footer">
<div class="grow"></div>
<button id="device-add" lk="copy">copy</button>
<button id="device-del" lk="delete">delete</button>
<button id="device-exp" lk="export">export</button>
<div class="grow"></div>
</div>
</div>
</div>
<div class="f-col grow a-stretch">
<label class="header" lk="dm_seld">selected device</label>
<div class="f-row">
<div id="device1" class="f-col t-body t-inset overy grow"></div>
<div class="t-pad"></div>
<div id="device2" class="f-col t-body t-inset overy grow"></div>
<div id="palette3" class="f-col t-body t-inset overy grow"></div>
</div>
<div class="t-pad"></div>
<div id="gcode-edit" class="f-col grow">
<div id="dg" class="f-col t-body t-inset"></div>
<div class="t-pad"></div>
<div id="dev-gcode" class="grow"></div>
</div>
<div id="device-action" class="f-row footer">
<div class="grow"></div>
<button id="device-save" lk="save">save</button>
<div class="grow"></div>
</div>
</div>
</div>
<div id="mod-files" class="mdialog f-col">
<label class="set-header menu-title" lk="dm_rcnt">recent files</label>
<div id="catalogList" class="f-col"></div>
</div>
<div id="mod-saves" class="mdialog f-col">
<label class="set-header menu-title" lk="dm_savs">saved settings</label>
<div id="settingsList" class="f-col"></div>
<div id="settingsNew">
<input id="settingsName" class="grow"></input>
<button id="settingsSave" lk="save">Save</button>
</div>
</div>
<div id="mod-tools" class="mdialog">
<div class="f-col">
<div class="f-row t-head">
<label class="t-33" lk="tool">tool</label>
<div class="t-pad"></div>
<label class="t-33" lk="detail">detail</label>
<div class="t-pad"></div>
<label class="t-33" lk="view">view</label>
</div>
<div id="tool-cols" class="f-row">
<div class="f-col t-33">
<select id="tool-select" size="10" class="grow"></select>
</div>
<div class="t-pad"></div>
<div class="f-col t-33 t-body t-inset">
<div class="f-row var-row"><label lk="name">name</label><input id="tool-name" size="15"></input></div>
<div class="f-row var-row"><label lk="type">type</label>
<select id="tool-type">
<option value="endmill" lk="td_tyem" selected>end</option>
<option value="ballmill" lk="td_tybm">ball</option>
<option value="tapermill" lk="td_tytm">taper</option>
</select>
</div>
<div class="f-row var-row" title="tool number to use&#010;in gcode commands"><label lk="td_tonm">tool #</label><input id="tool-num" size="7"></input></div>
<div class="f-row var-row"><label lk="metric">metric</label><input id="tool-metric" type="checkbox"></input></div>
<div class="set-header f-col" lk="td_shft">shaft</div>
<div class="f-row var-row" title="shaft diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-sdiam" size="7"></input></div>
<div class="f-row var-row" title="shaft length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-slen" size="7"></input></div>
<div class="set-header f-col" lk="td_flut">flute</div>
<div class="f-row var-row" title="flute diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-fdiam" size="7"></input></div>
<div class="f-row var-row" title="flute length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-flen" size="7"></input></div>
<div class="set-header f-col" ln="td_tapr">taper</div>
<div class="f-row var-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=7></input></div>
<div class="f-row var-row" title="tip width in inches&#010;unless metric is checked&#010;then in millimeters"><label>tip</label><input id="tool-ttip" size="7"></input></div>
</div>
<div class="t-pad"></div>
<div id="tool-view" class="f-col t-33 t-body"></div>
</div>
<div id="tool-action" class="f-row j-center">
<button id="tool-add"><i class="fas fa-plus"></i></button>
<button id="tool-del"><i class="fas fa-minus"></i></button>
<div class="t-pad2"></div>
<button id="tools-save" lk="save">save</button>
<button id="tools-close" lk="done">done</button>
<div class="t-pad2"></div>
<button id="tools-export" lk="export">export</button>
</div>
</div>
</div>
<div id="mod-prefs" class="mdialog f-col a-center">
<label lk="dm_appp" class="menu-title">Application Preferences</label>
<hr width="80%">
<div class="f-row">
<div id="prefs-gen1" class="f-col"></div>
<div class="t-pad2"></div>
<div id="prefs-gen2" class="f-col"></div>
<div class="t-pad2"></div>
<div id="prefs-lay" class="f-col"></div>
<div class="t-pad2"></div>
<div id="prefs-xpo" class="f-col"></div>
<div class="t-pad2"></div>
<div id="prefs-prt" class="f-col"></div>
<div class="t-pad2"></div>
<div id="prefs-add" class="f-col"></div>
<div class="t-pad2"></div>
</div>
</div>
<div id="mod-local" class="mdialog f-col"></div>
<div id="mod-print" class="mdialog f-col"></div>
<div id="mod-any" class="mdialog f-col"></div>
<div class="mod-end"></div></div>
</div>
<div id="layer-slider" class="f-col a-stretch">
<div id="layers" class="f-row j-center"></div>
<div id="slider" class="f-row russo">
@ -485,33 +325,47 @@
</div>
<!-- allows right tray to slide/hide but still show speeds menu -->
<div id="mid-right" class="f-row j-center">
<div class="f-row j-center">
<div id="set-menu" class="f-col">
<div id="speeds"><div id="speedbar" class="f-col a-stretch j-center" lkt="sb_info"></div></div>
</div>
<!-- vertical separation between workspace and right tray -->
<div class="mid-sep"></div>
<div id="right-work" class="f-col j-start">
<div class="set-header f-col">
<a class="work-header"><span>workspace</span></a>
<div id="panel-right" class="f-col j-start settings">
<div class="set2-group f-col">
<div class="set-header">
<a>workspace</a>
</div>
<div class="set2-set f-col">
<div class="line-sep2"></div>
<div class="chonk2"></div>
<div class="line-sep2"></div>
</div>
<div id="ws-widgets" class="f-col"></div>
</div>
<div class="line-sep"></div>
<div class="chonk"></div>
<div class="line-sep"></div>
<div class="set-header f-col mode-fdm">
<a class="work-header"><span>ranges</span></a>
<div class="set2-group f-col mode-fdm">
<div class="set-header">
<a>ranges</a>
</div>
<div class="set2-set f-col">
<div class="line-sep2"></div>
<div class="chonk2"></div>
<div class="line-sep2"></div>
</div>
<div id="fdm-ranges" class="f-col"></div>
</div>
<div id="workspace-tool"></div>
<div class="contents mode-cam">
<div class="work-header">
<span>CNC</span>
<span>operations</span>
<div class="set2-group f-col">
<div id="workspace-tool"></div>
</div>
<div class="set2-group f-col mode-cam">
<div class="set-header mode-cam">
<a>operation list</a>
</div>
<div class="set2-set f-col">
<div class="line-sep2"></div>
<div class="chonk2"></div>
<div class="line-sep2"></div>
</div>
<div class="line-sep"></div>
<div class="chonk"></div>
<div class="line-sep"></div>
<div id="camops" class="f-col a-stretch grow">
<div id="oplist" class="f-col j-center"></div>
<div id="op-add" class="opdiv">
@ -537,9 +391,10 @@
</div>
</div>
</div>
<div class="line-sep"></div>
<div class="grow"></div>
<div class="line-sep2"></div>
<div class="chonk"></div>
<div class="line-sep"></div>
<div class="line-sep2"></div>
</div>
</div>
</div>
@ -552,6 +407,168 @@
<!-- ThreeJS container -->
<div id="container"></div>
<!-- modal dialogs-->
<div id="modal">
<div id="modal-box" class="f-col">
<div class="mod-top f-row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
<div id="mod-help" class="mdialog f-col">
<div class="f-row j-center title">
<label>Kiri:Moto Help</label>
</div>
<div class="f-col">
<a target="_rsc" href="https://docs.grid.space/projects/kiri-moto"><i class="fas fa-question-circle"></i>Kiri:Moto Full Documentation</a>
<a href="https://youtu.be/08795Sj22QE" target="youtube"><i class="fab fa-youtube"></i>Video Guide to Kiri:Moto 2.5</a>
<a target="_rsc" href="https://www.youtube.com/c/GridSpace/videos"><i class="fab fa-youtube"></i>YouTube Channel</a>
<a target="_rsc" href="https://discord.gg/suyCCgr"><i class="fab fa-discord"></i> Discord Live Chat</a>
<a target="_rsc" href="https://forum.grid.space"><i class="fab fa-discourse"></i> Discourse Forums</a>
<a target="_rsc" href="https://twitter.com/grid_space_3d"><i class="fab fa-twitter"></i> Follow on Twitter</a>
<a target="_rsc" href="https://paypal.me/gridspace3d?locale.x=en_US"><i class="fab fa-paypal"></i> Donations are welcome!</a>
</div>
<div class="f-row j-center">
<label id="kiri-version"></label>
</div>
</div>
<div id="mod-setup" class="mdialog f-row">
<div class="f-col left a-stretch">
<label class="header" lk="dm_sldt">select a device type</label>
<div class="f-col">
<table><tr>
<th><button id="mode-fdm" class="dev-type"><label>FDM</label></button></th>
<th><button id="mode-sla" class="dev-type"><label>SLA</label></button></th>
</tr><tr>
<th><button id="mode-cam" class="dev-type"><label>CNC</label></button></th>
<th><button id="mode-laser" class="dev-type"><label>LASER</label></button></th>
</tr></table>
</div>
<div id="dev-header" class="header sub f-col j-center">
<label lk="dm_stdd">standard devices</label>
<div id="dev-search">
<i class="fas fa-search"></i>
<input id="dev-filter">
</div>
</div>
<div class="f-col mh0 mh35 j-center a-stretch">
<div id="device-list" class="devlist f-col overy"></div>
</div>
<label class="header sub" lk="dm_mydd">my devices</label>
<div class="f-col grow">
<div id="device-my" class="devlist f-col grow overy"></div>
<div class="f-row footer">
<div class="grow"></div>
<button id="device-add" lk="copy">copy</button>
<button id="device-del" lk="delete">delete</button>
<button id="device-exp" lk="export">export</button>
<div class="grow"></div>
</div>
</div>
</div>
<div class="f-col grow a-stretch">
<label class="header" lk="dm_seld">selected device</label>
<div class="f-row">
<div id="device1" class="f-col t-body t-inset overy grow"></div>
<div class="t-pad"></div>
<div id="device2" class="f-col t-body t-inset overy grow"></div>
<div id="palette3" class="f-col t-body t-inset overy grow"></div>
</div>
<div class="t-pad"></div>
<div id="gcode-edit" class="f-col grow">
<div id="dg" class="f-col t-body t-inset"></div>
<div class="t-pad"></div>
<div id="dev-gcode" class="grow"></div>
</div>
<div id="device-action" class="f-row footer">
<div class="grow"></div>
<button id="device-save" lk="save">save</button>
<div class="grow"></div>
</div>
</div>
</div>
<div id="mod-files" class="mdialog f-col">
<label class="set-header menu-title" lk="dm_rcnt">recent files</label>
<div id="catalogList" class="f-col"></div>
</div>
<div id="mod-saves" class="mdialog f-col">
<label class="set-header menu-title" lk="dm_savs">saved settings</label>
<div id="settingsList" class="f-col"></div>
<div id="settingsNew">
<input id="settingsName" class="grow"></input>
<button id="settingsSave" lk="save">Save</button>
</div>
</div>
<div id="mod-tools" class="mdialog">
<div class="f-col">
<div class="f-row t-head">
<label class="t-33" lk="tool">tool</label>
<div class="t-pad"></div>
<label class="t-33" lk="detail">detail</label>
<div class="t-pad"></div>
<label class="t-33" lk="view">view</label>
</div>
<div id="tool-cols" class="f-row">
<div class="f-col t-33">
<select id="tool-select" size="10" class="grow"></select>
</div>
<div class="t-pad"></div>
<div class="f-col t-33 t-body t-inset">
<div class="f-row var-row"><label lk="name">name</label><input id="tool-name" size="15"></input></div>
<div class="f-row var-row"><label lk="type">type</label>
<select id="tool-type">
<option value="endmill" lk="td_tyem" selected>end</option>
<option value="ballmill" lk="td_tybm">ball</option>
<option value="tapermill" lk="td_tytm">taper</option>
</select>
</div>
<div class="f-row var-row" title="tool number to use&#010;in gcode commands"><label lk="td_tonm">tool #</label><input id="tool-num" size="7"></input></div>
<div class="f-row var-row"><label lk="metric">metric</label><input id="tool-metric" type="checkbox"></input></div>
<div class="set-header f-col" lk="td_shft">shaft</div>
<div class="f-row var-row" title="shaft diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-sdiam" size="7"></input></div>
<div class="f-row var-row" title="shaft length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-slen" size="7"></input></div>
<div class="set-header f-col" lk="td_flut">flute</div>
<div class="f-row var-row" title="flute diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-fdiam" size="7"></input></div>
<div class="f-row var-row" title="flute length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-flen" size="7"></input></div>
<div class="set-header f-col" ln="td_tapr">taper</div>
<div class="f-row var-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=7></input></div>
<div class="f-row var-row" title="tip width in inches&#010;unless metric is checked&#010;then in millimeters"><label>tip</label><input id="tool-ttip" size="7"></input></div>
</div>
<div class="t-pad"></div>
<div id="tool-view" class="f-col t-33 t-body"></div>
</div>
<div id="tool-action" class="f-row j-center">
<button id="tool-add"><i class="fas fa-plus"></i></button>
<button id="tool-del"><i class="fas fa-minus"></i></button>
<div class="t-pad2"></div>
<button id="tools-save" lk="save">save</button>
<button id="tools-close" lk="done">done</button>
<div class="t-pad2"></div>
<button id="tools-export" lk="export">export</button>
</div>
</div>
</div>
<div id="mod-prefs" class="mdialog f-col a-center">
<label lk="dm_appp" class="menu-title">Application Preferences</label>
<hr width="80%">
<div class="f-row">
<div id="prefs-gen1" class="f-col"></div>
<div class="t-pad2"></div>
<div id="prefs-gen2" class="f-col"></div>
<div class="t-pad2"></div>
<div id="prefs-lay" class="f-col"></div>
<div class="t-pad2"></div>
<div id="prefs-xpo" class="f-col"></div>
<div class="t-pad2"></div>
<div id="prefs-prt" class="f-col"></div>
<div class="t-pad2"></div>
<div id="prefs-add" class="f-col"></div>
<div class="t-pad2"></div>
</div>
</div>
<div id="mod-local" class="mdialog f-col"></div>
<div id="mod-print" class="mdialog f-col"></div>
<div id="mod-any" class="mdialog f-col"></div>
<div class="mod-end"></div></div>
</div>
<!-- click + drag mouse tracking -->
<div id="tracker"></div>