thm/slitscan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

styling & improvements

Browse source
This commit is contained in:
Tomáš Mládek 2019-11-01 19:31:15 +01:00
parent 0c1656b87e
commit 062fbf84df
3 changed files with 128 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/App.vue
View file

@ -54,8 +54,25 @@ html, body, #app {
font-size: .95em; font-size: .95em;
} }
input, button {
font-family: Consolas, Inconsolata, monospace, serif;
}
input { input {
font-size: .95em; font-size: .95em;
padding: 4px 0;
background: white;
border: 1px solid black;
}
input[type="file"] {
border: none;
}
button {
background: white;
border: 1px solid black;
box-shadow: 2px 2px #272727;
} }
#menu-wrap, #canvas-wrap { #menu-wrap, #canvas-wrap {

48
src/components/Player.vue
View file

@ -2,18 +2,18 @@
<div id="player"> <div id="player">
<div> <div>
<label for="zoom">Zoom:</label> <label for="zoom">Zoom:</label>
<input type="number" min="0.01" value="1" step="0.1" class="slider" v-model.number="zoom" id="zoom"> <input type="number" min="0.1" value="1" step="0.1" class="slider" v-model.number="zoom" id="zoom">
</div> </div>
<div id="player-canvas-container"> <div class="player-container">
<canvas ref="canvas" id="player-canvas" <canvas ref="canvas" id="player-canvas"
:height="canvas_height" :width="canvas_width"> :height="canvas_height" :width="canvas_width">
</canvas> </canvas>
</div>
<div id="controls">
<div> <div>
<input type="range" min="0" :max="frames - 1" value="0" class="slider" <input type="range" min="0" :max="frames - 1" value="0" class="slider"
v-model.number="position" :disabled=recording> v-model.number="position" :disabled=recording>
</div> </div>
</div>
<div class="controls">
<div> <div>
<button @click="playOnceOrPause">{{!this.playing ? "PLAY ONCE" : "STOP"}}</button> <button @click="playOnceOrPause">{{!this.playing ? "PLAY ONCE" : "STOP"}}</button>
</div> </div>
@ -23,6 +23,8 @@
<div> <div>
<button @click="loopFullscreen">LOOP & FULLSCREEN</button> <button @click="loopFullscreen">LOOP & FULLSCREEN</button>
</div> </div>
</div>
<div class="options">
<div> <div>
<label for="sort">Sort by size</label> <label for="sort">Sort by size</label>
<input type="checkbox" v-model="sortBySize" id="sort"> <input type="checkbox" v-model="sortBySize" id="sort">
@ -252,21 +254,31 @@ export default {
text-align: center; text-align: center;
} }
.fullscreen {
position: absolute;
top: 0;
left: 0;
background-color: rgba(1, 1, 1, .9);
width: 100%;
height: 100%;
}
.fullscreen-controls {
position: absolute;
bottom: 0;
}
#zoom { #zoom {
width: 3em; width: 3em;
text-align: center;
}
.player-container {
padding: 2em 0 1em 0;
}
.controls, .options {
display: flex;
flex-direction: column;
}
.controls button {
width: 12em;
margin: .25em;
}
.options {
padding-top: 1em;
}
.options div {
display: flex;
justify-content: space-between;
} }
</style> </style>

93
src/components/Sidebar.vue
View file

@ -1,54 +1,63 @@
<template> <template>
<div id="sidebar-container"> <div id="sidebar-container">
<div class="sidebar-section">
<div> <div>
<input type="file" id="file" @change="loadImage($event)"> <input type="file" id="file" @change="loadImage($event)">
</div> </div>
<div> <div class="section-formlike">
<label>Image size: {{imageSize[0]}} x {{imageSize[1]}}</label> <label>Image size:</label>
<div class="readout">{{imageSize[0]}} x {{imageSize[1]}}</div>
</div> </div>
<hr> </div>
<div> <div class="sidebar-section">
<div class="section-formlike">
<label for="slice_x">Slice X: </label> <label for="slice_x">Slice X: </label>
<input class="spinBox" id="slice_x" v-model.number="guideSizeX" type="number" min="2" :max="imageSize[0]/2" <input class="spinBox" id="slice_x" v-model.number="guideSizeX" type="number"
step="1" value="64"> min="2" :max="imageSize[0]/2" step="1" value="64">
</div> </div>
<div> <div>
<label for="slice_x">No X remainder: {{noXremainder}}</label> <label for="slice_x">X remainder: {{this.imageSize[0] % this.guideSizeX}}</label>
</div> </div>
<div> <div class="section-formlike">
<label for="slice_y">Slice Y: </label> <label for="slice_y">Slice Y: </label>
<input class="spinBox" id="slice_y" v-model.number="guideSizeY" type="number" min="2" :max="imageSize[1]/2" <input class="spinBox" id="slice_y" v-model.number="guideSizeY" type="number"
step="1" value="64"> min="2" :max="imageSize[1]/2" step="1" value="64">
</div> </div>
<div> <div>
<label for="slice_x">No Y remainder: {{noYremainder}}</label> <label for="slice_x">Y remainder: {{this.imageSize[1] % this.guideSizeY}}</label>
</div> </div>
<div> <div class="section-formlike">
<label for="lockSize">Maintain square ratio: </label> <label for="lockSize">Maintain square ratio: </label>
<input type="checkbox" id="lockSize" v-model="lockSize"> <input type="checkbox" id="lockSize" v-model="lockSize">
</div> </div>
<div> <div class="section-formlike">
<label for="cleanSize">Allow only clean sizes: </label> <label for="cleanSize">Allow only clean sizes: </label>
<input type="checkbox" id="cleanSize" v-model="cleanSize"> <input type="checkbox" id="cleanSize" v-model="cleanSize">
</div> </div>
<hr> </div>
<div> <div class="sidebar-section">
<div class="section-formlike">
<label>Offset: x={{offset[0]}}, y={{offset[1]}}</label> <label>Offset: x={{offset[0]}}, y={{offset[1]}}</label>
<button @click="$emit('params', {type: 'offset', x: 0, y: 0})">RESET</button> <button @click="$emit('params', {type: 'offset', x: 0, y: 0})">RESET</button>
</div> </div>
<hr>
<div>
<label>Total amount of slices: {{slices}}</label>
</div> </div>
<div> <div class="sidebar-section">
<div class="section-formlike">
<label>Total amount of slices:</label>
<div class="readout">{{slices}}</div>
</div>
<div class="section-formlike">
<label for="fps">FPS: </label> <label for="fps">FPS: </label>
<input class="spinBox" id="fps" v-model="fps" type="number" min="1" max="60" step="1" value="60" disabled> <input class="spinBox" id="fps" v-model="fps" type="number" min="1" max="60" step="1" value="60" disabled>
</div> </div>
<div> <div class="section-formlike">
<label>Est. length: {{length}}</label> <label>Est. length:</label>
<div class="readout">{{length}}</div>
</div>
</div>
<div class="sidebar-section player-section">
<player class="player" :width="guideSizeX" :height="guideSizeY" :offset="offset" @frames="(n)=>{slices=n}"/>
</div> </div>
<hr>
<player :width="guideSizeX" :height="guideSizeY" :offset="offset" @frames="(n)=>{slices=n}"/>
</div> </div>
</template> </template>
@ -160,12 +169,6 @@ export default {
return "~" + seconds + " seconds" + (mins > 0 ? (" (" + mins + "m " + secs + "s)") : ""); return "~" + seconds + " seconds" + (mins > 0 ? (" (" + mins + "m " + secs + "s)") : "");
} }
}, },
noXremainder: function () {
return this.imageSize[0] % this.guideSizeX === 0;
},
noYremainder: function () {
return this.imageSize[1] % this.guideSizeY === 0;
},
}, },
methods: { methods: {
loadImage (e) { loadImage (e) {
@ -193,17 +196,41 @@ export default {
<style scoped> <style scoped>
#sidebar-container { #sidebar-container {
display: flex;
flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-right: 1px solid black; border-right: 1px solid black;
} }
.spinBox { .sidebar-section {
height: 1em; padding: .5em;
border-bottom: 1px solid grey;
} }
.green { .sidebar-section > div {
background-color: green; padding: .25em;
}
.section-formlike {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.section-formlike input[type="number"] {
width: 4em;
text-align: center;
}
.section-formlike .readout {
min-width: 4em;
text-align: center;
}
.player-section {
border-bottom: none;
} }
</style> </style>