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

move layer slider to bottom and gently restyle

Browse source
This commit is contained in:
Stewart Allen 2020-06-21 22:37:11 -04:00
commit 72a54b890f
4 changed files with 89 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

80
src/kiri/init.js
View file

@ -1534,11 +1534,11 @@
} }
function sliderUpdate() { function sliderUpdate() {
let start = drag.top / drag.maxval; let start = drag.low / drag.maxval;
let end = (drag.top + drag.mid - slbar) / drag.maxval; let end = (drag.low + drag.mid - slbar) / drag.maxval;
API.event.emit('slider.pos', { start, end }); API.event.emit('slider.pos', { start, end });
API.var.layer_hi = Math.round((1 - start) * API.var.layer_max); API.var.layer_lo = Math.round(start * API.var.layer_max);
API.var.layer_lo = Math.round((1 - end) * API.var.layer_max); API.var.layer_hi = Math.round(end * API.var.layer_max);
API.show.layer(); API.show.layer();
SPACE.scene.active(); SPACE.scene.active();
} }
@ -1547,13 +1547,14 @@
el.onmousedown = (ev) => { el.onmousedown = (ev) => {
tracker.style.display = 'block'; tracker.style.display = 'block';
ev.stopPropagation(); ev.stopPropagation();
drag.height = slider.clientHeight; drag.width = slider.clientWidth;
drag.maxval = drag.height - slbar2; drag.maxval = drag.width - slbar2;
drag.start = ev.screenY; drag.start = ev.screenX;
drag.hiat = drag.top = pxToInt(UI.sliderHold.style.marginTop); drag.loat = drag.low = pxToInt(UI.sliderHold.style.marginLeft);
drag.mdat = drag.mid = UI.sliderMid.clientHeight; drag.mdat = drag.mid = UI.sliderMid.clientWidth;
drag.mdmax = drag.height - slbar - drag.hiat; drag.hiat = pxToInt(UI.sliderHold.style.marginRight);
drag.himax = drag.height - slbar - drag.mdat; drag.mdmax = drag.width - slbar - drag.loat;
drag.himax = drag.width - slbar - drag.mdat;
let cancel_drag = tracker.onmouseup = (ev) => { let cancel_drag = tracker.onmouseup = (ev) => {
if (ev) { if (ev) {
ev.stopPropagation(); ev.stopPropagation();
@ -1568,33 +1569,39 @@
if (ev.buttons === 0) { if (ev.buttons === 0) {
return cancel_drag(); return cancel_drag();
} }
if (delta) delta(ev.screenY - drag.start); if (delta) delta(ev.screenX - drag.start);
}; };
}; };
} }
dragit(UI.sliderHi, (delta) => { dragit(UI.sliderLo, (delta) => {
let midval = drag.mdat - delta; let midval = drag.mdat - delta;
let topval = drag.hiat + delta; let lowval = drag.loat + delta;
if (midval < slbar || topval < 0) { if (midval < slbar || lowval < 0) {
return; return;
} }
UI.sliderHold.style.marginTop = `${topval}px`; UI.sliderHold.style.marginLeft = `${lowval}px`;
UI.sliderMid.style.height = `${midval}px`; UI.sliderMid.style.width = `${midval}px`;
drag.top = topval; drag.low = lowval;
drag.mid = midval; drag.mid = midval;
sliderUpdate(); sliderUpdate();
}); });
dragit(UI.sliderMid, (delta) => { dragit(UI.sliderMid, (delta) => {
let topoff = Math.max(0, Math.min(drag.himax, drag.hiat + delta)); let loval = drag.loat + delta;
UI.sliderHold.style.marginTop = `${topoff}px`; let hival = drag.hiat - delta;
drag.top = topoff; if (loval < 0 || hival < 0) return;
UI.sliderHold.style.marginLeft = `${loval}px`;
UI.sliderHold.style.marginRight = `${hival}px`;
drag.low = loval;
sliderUpdate(); sliderUpdate();
}); });
dragit(UI.sliderLo, (delta) => { dragit(UI.sliderHi, (delta) => {
let midlen = Math.max(slbar, Math.min(drag.mdmax, drag.mdat + delta)); let midval = drag.mdat + delta;
UI.sliderMid.style.height = `${midlen}px`; let hival = drag.hiat - delta;
drag.mid = midlen; if (midval < slbar || midval > drag.mdmax || hival < 0) return;
UI.sliderMid.style.width = `${midval}px`;
UI.sliderHold.style.marginRight = `${hival}px`;
drag.mid = midval;
sliderUpdate(); sliderUpdate();
}); });
@ -1615,26 +1622,27 @@
}; };
API.event.on('slider.unlabel', (values) => { API.event.on('slider.unlabel', (values) => {
$('slider-hi-val').style.display = 'none';
$('slider-lo-val').style.display = 'none';
}); });
API.event.on('slider.label', (values) => { API.event.on('slider.label', (values) => {
$('slider-hi-val').style.display = 'flex'; let digits = API.var.layer_max.toString().length;
$('slider-lo-val').style.display = 'flex'; $('slider-zero').style.width = `${digits}em`;
$('slider-hi-val').innerText = API.var.layer_hi; $('slider-max').style.width = `${digits}em`;
$('slider-lo-val').innerText = API.var.layer_lo; $('slider-zero').innerText = API.var.layer_lo;
$('slider-max').innerText = API.var.layer_hi;
}); });
API.event.on('slider.set', (values) => { API.event.on('slider.set', (values) => {
let height = slider.clientHeight; let width = slider.clientWidth;
let maxval = height - slbar2; let maxval = width - slbar2;
let start = Math.max(0, Math.min(1, values.start)); let start = Math.max(0, Math.min(1, values.start));
let end = Math.max(start, Math.min(1, values.end)); let end = Math.max(start, Math.min(1, values.end));
let topval = start * maxval; let lowval = start * maxval;
let midval = ((end - start) * maxval) + slbar; let midval = ((end - start) * maxval) + slbar;
UI.sliderHold.style.marginTop = `${topval}px`; let hival = maxval - end * maxval;
UI.sliderMid.style.height = `${midval}px`; UI.sliderHold.style.marginLeft = `${lowval}px`;
UI.sliderMid.style.width = `${midval}px`;
UI.sliderHold.style.marginRight = `${hival}px`;
}); });
// bind language choices // bind language choices

8
src/kiri/main.js
View file

@ -473,8 +473,8 @@
function updateSlider() { function updateSlider() {
API.event.emit("slider.set", { API.event.emit("slider.set", {
start: 1 - (API.var.layer_hi / API.var.layer_max), start: (API.var.layer_lo / API.var.layer_max),
end: 1 - (API.var.layer_lo / API.var.layer_max) end: (API.var.layer_hi / API.var.layer_max)
}); });
} }
@ -752,13 +752,13 @@
function showSlider() { function showSlider() {
UI.layers.style.display = 'flex'; UI.layers.style.display = 'flex';
UI.slider.style.display = 'flex'; UI.slider.style.display = 'flex';
UI.setMenu.style.display = 'none'; // UI.setMenu.style.display = 'none';
} }
function hideSlider(andmenu) { function hideSlider(andmenu) {
UI.layers.style.display = 'none'; UI.layers.style.display = 'none';
UI.slider.style.display = 'none'; UI.slider.style.display = 'none';
UI.setMenu.style.display = andmenu ? 'none' : 'flex'; // UI.setMenu.style.display = andmenu ? 'none' : 'flex';
} }
/** /**

45
web/kiri/index.css
View file

@ -2,7 +2,8 @@
--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); --gradbar: linear-gradient(to right, #ddd, #666, #ddd);
--holdbar: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0)); --holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
--holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important;
} }
a, a:hover, a:visited { a, a:hover, a:visited {
border: none; border: none;
@ -783,14 +784,19 @@ and (orientation : landscape) {
color: #335; color: #335;
} }
#slider { #layer-slider {
display: none;
position: absolute; position: absolute;
font-size: smaller; font-size: smaller;
top: 15px; left: 15px;
right: 3px; right: 15px;
bottom: 15px; bottom: 3px;
width: 50px; pointer-events: all;
}
#slider {
display: none;
height: 30px;
z-index: 100;
} }
#slider-hi-val, #slider-lo-val { #slider-hi-val, #slider-lo-val {
display: none; display: none;
@ -800,44 +806,45 @@ and (orientation : landscape) {
background-color: rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.5);
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
right: 110%; bottom: 110%;
top: 50%; left: 50%;
} }
#slider > div { #slider > div {
flex-direction: column; justify-content: center;
flex-direction: row;
align-items: center; align-items: center;
} }
#slider-max { #slider-max {
background-color: #ccc; background-color: #ccc;
border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
margin-bottom: 3px; border-bottom-right-radius: 10px;
margin-left: 3px;
} }
#slider-center { #slider-center {
background-image: var(--holdbar); background-image: var(--holdbar);
} }
#slider-zero { #slider-zero {
z-index: 10; z-index: 10;
margin-top: 3px; margin-right: 3px;
background-color: #ccc; background-color: #ccc;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
} }
#slider-hold { #slider-hold {
background-color: rgba(0,0,0,0.15); background-color: rgba(0,0,0,0.15);
position: absolute; position: absolute;
bottom: 0;
right: 0; right: 0;
left: 0;
top: 0; top: 0;
} }
#slider-hold .handle { #slider-hold .handle {
width: 100%; width: 15px;
height: 15px; height: 100%;
border-radius: 3px; border-radius: 3px;
background-color: var(--bg-gray); background-color: var(--bg-gray);
} }
#slider-mid { #slider-mid {
height: 20px; width: 20px;
} }
#alert-area { #alert-area {
@ -972,7 +979,7 @@ and (orientation : landscape) {
border-radius: 10px; border-radius: 10px;
background-color: #ddd; background-color: #ddd;
padding: 2px 5px 2px 5px; padding: 2px 5px 2px 5px;
margin: 0 2px 0 2px; margin: 0 2px 3px 2px;
} }
.var-row { .var-row {
white-space: nowrap; white-space: nowrap;

29
web/kiri/index.html
View file

@ -308,6 +308,20 @@
<input id="load-file" type="file" name="loadme" style="display:none" accept=".stl,.gcode,.nc"/> <input id="load-file" type="file" name="loadme" style="display:none" accept=".stl,.gcode,.nc"/>
<div class="mod-end"></div></div> <div class="mod-end"></div></div>
</div> </div>
<div id="layer-slider" class="col a-stretch">
<div id="layers" class="row j-center"></div>
<div id="slider" class="row russo">
<div id="slider-zero">0</div>
<div id="slider-center" class="grow">
<div id="slider-hold" class="row">
<div id="slider-lo" class="handle"><div id="slider-lo-val"></div></div>
<div id="slider-mid">&nbsp;</div>
<div id="slider-hi" class="handle"><div id="slider-hi-val"></div></div>
</div>
</div>
<div id="slider-max">&infin;</div>
</div>
</div>
</div> </div>
<div id="mid-rcol" class="col j-center noshow"> <div id="mid-rcol" class="col j-center noshow">
<div id="set-menu" class="col"> <div id="set-menu" class="col">
@ -315,23 +329,10 @@
<div id="settings" class="col"></div> <div id="settings" class="col"></div>
<div id="set-end" class="set-group"></div> <div id="set-end" class="set-group"></div>
</div> </div>
<div id="slider" class="col russo">
<div id="slider-max">&infin;</div>
<div id="slider-center" class="grow">
<div id="slider-hold" class="col xa-center">
<div id="slider-hi" class="handle"><div id="slider-hi-val"></div></div>
<div id="slider-mid">&nbsp;</div>
<div id="slider-lo" class="handle"><div id="slider-lo-val"></div></div>
</div>
</div>
<div id="slider-zero">0</div>
</div>
</div> </div>
</div> </div>
<div id="end" class="col a-center"> <div id="end" class="col a-center">
<div id="bottom"> <div id="bottom"></div>
<div id="layers"></div>
</div>
<div id="alert-area"> <div id="alert-area">
<div id="alert-border"> <div id="alert-border">
<div id="alert-text">alerts<br>alerts<br>alerts</div> <div id="alert-text">alerts<br>alerts<br>alerts</div>