klemek
117 lines
5.7 KiB
HTML
117 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Sheet Divider</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<script type="text/javascript" src="lib/vue.min.js"></script>
|
||
<script type="text/javascript" src="main.js"></script>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<!-- card related -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta property="og:title" content="Sheet Divider">
|
||
<meta property="twitter:title" content="Sheet Divider">
|
||
<meta property="og:description" content="Draw boxes quickly and easily">
|
||
<meta property="twitter:description" content="Draw boxes quickly and easily">
|
||
<meta property="org:url" content="https://klemek.github.io/sheet-divider/)">
|
||
</head>
|
||
<body>
|
||
<main id="app" style="display:none">
|
||
<h1>Sheet Divider</h1>
|
||
<br>
|
||
<div id="table-container">
|
||
<table id="inputs">
|
||
<tr></tr>
|
||
<tr v-bind:class="{focused: isFocused('sw','sh','sheet')}">
|
||
<td>Sheet Size:</td>
|
||
<td><input @focus="setFocus('sw')" @blur="resetFocus()" v-model="sw" v-bind:disabled="sheet>0"
|
||
type="number" min="1" step="0.1"></td>
|
||
<td>×</td>
|
||
<td><input @focus="setFocus('sh')" @blur="resetFocus()" v-model="sh" v-bind:disabled="sheet>0"
|
||
type="number" min="1" step="0.1"></td>
|
||
<td><small>cm</small></td>
|
||
<td>
|
||
<select v-model="sheet" @focus="setFocus('sheet')" @blur="resetFocus()">
|
||
<option v-bind:value="i" v-for="s,i in sheets">{{s.title}}</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
<tr v-bind:class="{focused: isFocused('m','n')}">
|
||
<td>Boxes:</td>
|
||
<td><input @focus="setFocus('m')" @blur="resetFocus()" v-model="m" type="number" min="1" step="1"></td>
|
||
<td>×</td>
|
||
<td><input @focus="setFocus('n')" @blur="resetFocus()" v-model="n" type="number" min="1" step="1"></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr v-bind:class="{focused: isFocused('bw','bh')}" v-if="!incomplete">
|
||
<td>Box size:</td>
|
||
<td><input @focus="setFocus('bw')" @blur="resetFocus()" id="bw" v-model="bw"
|
||
v-bind:disabled="(finishedH && !bw) || fbw"
|
||
type="number" min="0.1" step="0.1"></td>
|
||
<td>×</td>
|
||
<td><input @focus="setFocus('bh')" @blur="resetFocus()" id="bh" v-model="bh"
|
||
v-bind:disabled="(finishedV && !bh) || fbh"
|
||
type="number" min="0.1" step="0.1"></td>
|
||
<td><small>cm</small></td>
|
||
<td><span><input v-model="ratio" type="checkbox">Use ratio</span></td>
|
||
</tr>
|
||
<tr v-bind:class="{focused: isFocused('rw','rh','ratio')}" v-if="ratio && !incomplete">
|
||
<td>Box ratio:</td>
|
||
<td><input @focus="setFocus('rw')" v-model="rw" v-bind:disabled="ratioId>0" type="number" min="1"
|
||
step="1"></td>
|
||
<td>:</td>
|
||
<td><input @focus="setFocus('rh')" v-model="rh" v-bind:disabled="ratioId>0" type="number" min="1"
|
||
step="1"></td>
|
||
<td></td>
|
||
<td>
|
||
<select v-model="ratioId" @focus="setFocus('ratio')" @blur="resetFocus()">
|
||
<option v-bind:value="i" v-for="r,i in ratios">{{r.title}}</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
<tr v-bind:class="{focused: isFocused('mh','mv')}" v-if="!incomplete">
|
||
<td>Box margin:</td>
|
||
<td><input @focus="setFocus('mh')" @blur="resetFocus()" id="mh" v-model="mh"
|
||
v-bind:disabled="finishedH && !mh" type="number"
|
||
min="0.1" step="0.1"></td>
|
||
<td><small>cm</small></td>
|
||
<td><input @focus="setFocus('mv')" @blur="resetFocus()" id="mv" v-model="mv"
|
||
v-bind:disabled="finishedV && !mv" type="number"
|
||
min="0.1" step="0.1"></td>
|
||
<td><small>cm</small></td>
|
||
<td><span><input v-model="padding" type="checkbox">Sheet padding</span></td>
|
||
</tr>
|
||
<tr v-bind:class="{focused: isFocused('ph','pv')}" v-if="padding && !incomplete">
|
||
<td>Sheet padding:</td>
|
||
<td><input @focus="setFocus('ph')" @blur="resetFocus()" id="ph" v-model="ph"
|
||
v-bind:disabled="finishedH && !ph" type="number"
|
||
min="0.1" step="0.1"></td>
|
||
<td><small>cm</small></td>
|
||
<td><input @focus="setFocus('pv')" @blur="resetFocus()" id="pv" v-model="pv"
|
||
v-bind:disabled="finishedV && !pv" type="number"
|
||
min="0.1" step="0.1"></td>
|
||
<td><small>cm</small></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="5" style="text-align: center"><small>(All sizes in centimeters)</small></td>
|
||
<td>
|
||
<button v-on:click="reset">Reset</button>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<br>
|
||
<div id="canvas-container">
|
||
<canvas id="preview"></canvas>
|
||
</div>
|
||
<br>
|
||
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a
|
||
href="https://github.com/klemek/sheet-divider" target="_blank">Github
|
||
Repository</a> - 2019</small>
|
||
</main>
|
||
</body>
|
||
</html>
|