Skip to content

Commit e06d4eb

Browse files
spacefallspacefall
authored
Merge pull request #2 from spacefall/restyle
Restyling del sito
2 parents c0cb91b + 68500e9 commit e06d4eb

10 files changed

+196
-7014
lines changed

‎index.html

+67-30
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,84 @@
22
<html lang="it">
33
<head>
44
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
57
<title>iwb2svg</title>
6-
<script src="svg.js"></script>
7-
<script src="utils.js"></script>
8-
<script src="iwb.js"></script>
9-
<script src="typeHandle.js"></script>
10-
<meta name="viewport" content="width=device-width, initial-scale=1" />
11-
<link rel="stylesheet" type="text/css" href="styles.css" />
8+
9+
<!-- <script src="svg.js"></script>-->
10+
<!-- <script src="utils.js"></script>-->
11+
<!-- <script type="module" src="iwb.js"></script>-->
12+
<!-- <script src="typeHandle.js"></script>-->
13+
14+
<meta name="description" content="Convertitore file iwb lavagna Wacebo Dabliu Draw 2.0 in SVG">
15+
16+
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
17+
<link rel="stylesheet" type="text/css" href="styles.css">
1218
</head>
1319
<body>
14-
<div id="div-pagina">
15-
<span>Pagina corrente:</span>
16-
<button onclick="cambioPagina(true)">&lt;</button>
17-
<span id="pagina">1</span>
18-
<button onclick="cambioPagina(false)">&gt;</button>
20+
<header>
21+
<h1>iwb2svg</h1>
22+
</header>
23+
24+
<main>
25+
<!-- Coso selezione file-->
26+
<div class="notice" id="dndZone">
27+
<div id="dashes"></div>
28+
<input type="file" id="fileSelector" class="hide" accept=".iwb">
29+
<p class="center">
30+
Rilascia un file o
31+
<label class="button inline" for="fileSelector">selezionane uno</label>
32+
</p>
1933
</div>
20-
<div>
21-
<label for="iwb-loader">IWB selezionato:</label>
22-
<input type="file" id="iwb-loader" accept=".iwb">
23-
</div>
24-
<div>
25-
<b>Impostazioni:</b>
26-
<br>
27-
<i>(Passare il mouse sopra le tick per ulteriori informazioni)</i>
28-
<label>
29-
Penna più precisa (beta, lento)
30-
<input id="precisioneChk" type="checkbox" onclick="rigeneraPagine()" title="Quando si scrive in modalità stilografica, il tratto cambia spessore; questa impostazione segue lo stesso cambiamento di spessore.&#10;*L'implementazione corrente non funziona correttamente con le linee trasparenti ed è lenta: in media è il doppio più lenta di quella normale e in alcune pagine anche 5 volte più lenta.*&#10;Se disattivata il tratto seguirà uno spessore costante.">
34+
35+
<!-- Impostazioni -->
36+
<details>
37+
<summary>Impostazioni</summary>
38+
<small><i>Passare il mouse sopra le tick per ulteriori informazioni</i></small>
39+
<!-- Mod. precisione -->
40+
<label title="Quando si scrive in modalità stilografica, il tratto cambia spessore; questa impostazione segue lo stesso cambiamento di spessore.&#10;Se disattivata il tratto seguirà uno spessore costante.&#10;*L'implementazione corrente ha problemi con le linee trasparenti e potrebbe richiedere più tempo di elaborazione iniziale.*">
41+
Penna più precisa (beta)
42+
<input id="precisioneChk" type="checkbox" onclick="rigeneraPagine()">
3143
</label>
32-
<label>
44+
<!-- Dito -->
45+
<label title="Questa opzione abilita i tratti disegnati senza la penna.">
3346
Abilita tratti disegnati a mano
34-
<input id="touchChk" type="checkbox" onclick="rigeneraPagine()" checked="checked" title="Questa opzione abilita/disabilita i tratti disegnati senza la penna.">
47+
<input id="touchChk" type="checkbox" onclick="rigeneraPagine()" checked="checked">
3548
</label>
36-
<label>
49+
<!-- Penna -->
50+
<label title="Questa opzione abilita i tratti disegnati con la penna.">
3751
Abilita tratti disegnati a penna
38-
<input id="pennaChk" type="checkbox" onclick="rigeneraPagine()" checked="checked" title="Questa opzione abilita/disabilita i tratti disegnati con la penna.">
52+
<input id="pennaChk" type="checkbox" onclick="rigeneraPagine()" checked="checked">
3953
</label>
40-
<label>
54+
<!-- Tratti cancellati -->
55+
<label title="Questa opzione ripristina i tratti cancellati.">
4156
Abilita tratti cancellati
42-
<input id="cancellatiChk" type="checkbox" onclick="rigeneraPagine()" title="Questa opzione ripristina i tratti cancellati.">
57+
<input id="cancellatiChk" type="checkbox" onclick="rigeneraPagine()">
4358
</label>
59+
</details>
60+
61+
<!-- Preview -->
62+
<div id="previewdiv" class="hide">
63+
<details open id="preview">
64+
<summary>Preview</summary>
65+
<!-- Selezione pagina -->
66+
<div>
67+
<span>Pagina:</span>
68+
<button class="minibtn">&lt;</button>
69+
<b><span id="pagina">1</span></b>
70+
<button class="minibtn">&gt;</button>
71+
</div>
72+
<!-- SVG aggiunto qui a runtime -->
73+
</details>
4474
</div>
45-
<!--<svg id="preview"></svg>-->
46-
<script src="main.js"></script>
75+
</main>
76+
77+
<footer>
78+
<p>
79+
Source on <a href="https://github.com/spacefall/iwb2svg">GitHub</a>
80+
</p>
81+
</footer>
82+
83+
<script type="module" src="main.js"></script>
4784
</body>
4885
</html>

‎iwb.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
import { SVG } from "https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.2.4/svg.esm.min.js";
2+
import { intToHexColor } from "./utils.js";
3+
import { typeHandlers, writingHandler } from "./typeHandle.js";
4+
15
// esegue la conversione da iwb (in formato lista) a svg
26
async function parseIWBList(lines, deleted, penIn, touchIn, precision, padding) {
37
let svgObj = SVG();
@@ -16,7 +20,6 @@ async function parseIWBList(lines, deleted, penIn, touchIn, precision, padding)
1620
let box = svgObj.bbox();
1721
svgObj.viewbox([box.x - (padding / 2), box.y - (padding / 2), box.width + padding, box.height + padding]);
1822
return svgObj;
19-
//return [svgObj, intToHexColor(pTagJson.bg.bc)];
2023
}
2124

2225
// esegue il parse di un tag "g"
@@ -38,7 +41,6 @@ async function parseIWB_gTag(tag, svgElem, deleted, penIn, touchIn, precision) {
3841
return;
3942
}
4043

41-
//svgObj.stroke(strokeObj);
4244
("fill" in jsonData) && jsonData.props.fill ? svgObj.fill(strokeObj.color) : svgObj.fill("none");
4345

4446
if ("transform" in jsonData) {
@@ -48,7 +50,7 @@ async function parseIWB_gTag(tag, svgElem, deleted, penIn, touchIn, precision) {
4850
}
4951

5052
// semplifica un iwb rimuovendo le cose (ritenute) inutili e dividendo le pagine in liste al posto di essere limitate da tag
51-
function iwbToList(iwb) {
53+
export function iwbToList(iwb) {
5254
let pages = [];
5355
iwb.split("\n").forEach(line => {
5456
if (line.startsWith("p{")) {
@@ -63,7 +65,7 @@ function iwbToList(iwb) {
6365
}
6466

6567
// praticamente un wrapper di parseIWB che fa il parse di tutte le pagine in modo asincrono
66-
async function batch_parseIWBList(pages, deleted, penIn, touchIn, precision, padding) {
68+
export async function batch_parseIWBList(pages, deleted, penIn, touchIn, precision, padding) {
6769
const promises = pages.map(page => parseIWBList(page, deleted, penIn, touchIn, precision, padding));
6870
const results = await Promise.allSettled(promises);
6971
return results.map(r => r.value);

‎main.js

+70-27
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
let previewSvg = SVG();// = SVG("#preview", true)
2-
const iwbFile = document.getElementById('iwb-loader');
1+
import { SVG } from "https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.2.4/svg.esm.min.js";
2+
import { batch_parseIWBList, iwbToList } from "./iwb.js";
3+
4+
5+
let previewSvg = SVG();
6+
const fileSelector = document.getElementById('fileSelector');
37
const svgPadding = 250;
48

59
// gestione pagine
@@ -13,28 +17,35 @@ const pennaChk = document.getElementById("pennaChk");
1317
const precisioneChk = document.getElementById("precisioneChk");
1418
const cancellatiChk = document.getElementById("cancellatiChk");
1519

16-
// cambia la pagina assicurandosi che non vada sotto 0 e sopra le pagine disponibili, poi carica la pagina corretta
17-
function cambioPagina(prec) {
18-
if (prec) {
19-
if (currPage-1 < 0) return;
20-
currPage--;
21-
} else {
22-
if (currPage+1 >= pageList.length) return;
23-
currPage++;
24-
}
20+
const paginaTxt = document.getElementById("pagina");
21+
const precBtn = document.getElementsByClassName("minibtn")[0];
22+
const nextBtn = document.getElementsByClassName("minibtn")[1];
23+
24+
const dndZone = document.getElementById("dndZone");
25+
26+
27+
28+
// cambia la pagina e ricarica la pagina
29+
precBtn.addEventListener("click", () => {
30+
currPage--;
31+
refreshPagina();
32+
});
33+
34+
nextBtn.addEventListener("click", () => {
35+
currPage++;
2536
refreshPagina();
26-
}
37+
})
2738

2839
// pulisce il svg, aggiorna l'indicatore della pagina e carica l'svg della pagina corretta
2940
function refreshPagina() {
3041
if (pageList.length === 0) return;
31-
previewSvg.clear();
32-
document.getElementById("pagina").innerText = currPage + 1;
42+
3343
previewSvg.remove();
34-
previewSvg = svgList[currPage].clone().addTo("body");
35-
//previewSvg.viewbox(svgList[currPage][0].viewbox())
36-
//previewSvg.css("background-color", svgList[currPage][1]);
37-
//parseIWB(pageList[currPage], cancellatiChk.checked, pennaChk.checked, touchChk.checked);
44+
previewSvg = svgList[currPage].clone().addTo("#preview");
45+
paginaTxt.innerText = currPage + 1;
46+
47+
precBtn.disabled = (currPage - 1 < 0) ? "disabled" : "";
48+
nextBtn.disabled = (currPage + 1 >= pageList.length) ? "disabled" : "";
3849
}
3950

4051
// forza un regen delle pagine già caricate
@@ -45,22 +56,54 @@ function rigeneraPagine() {
4556
})
4657
}
4758

48-
// carica il file e avvia l'elaborazione
49-
iwbFile.addEventListener('change', (event) => {
59+
// caricamento file
60+
61+
// evita di aprire il file come nuova tab
62+
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
63+
dndZone.addEventListener(eventName, (e) => {
64+
e.preventDefault();
65+
e.stopPropagation();
66+
});
67+
});
68+
69+
// animazione
70+
['dragenter', 'dragover'].forEach(eventName => {
71+
dndZone.addEventListener(eventName, () => dndZone.classList.add("dropping"))
72+
});
73+
74+
['dragleave', 'drop'].forEach(eventName => {
75+
dndZone.addEventListener(eventName, () => dndZone.classList.remove("dropping"))
76+
});
77+
78+
// carica file con selettore manuale
79+
fileSelector.addEventListener('change', (event) => {
5080
const fileList = event.target.files;
5181
if (fileList.length === 0) return;
82+
handleFile(fileList[0]);
83+
});
84+
85+
// carica file da drag and drop
86+
dndZone.addEventListener('drop', (event) => {
87+
let dt = event.dataTransfer;
88+
let files = dt.files;
89+
handleFile(files[0]);
90+
})
91+
92+
// gestisci il file "caricato"
93+
function handleFile(file) {
94+
if (!file.name.endsWith(".iwb")) {
95+
console.error("Input invalido");
96+
return;
97+
}
5298
const reader = new FileReader();
99+
const prDiv = document.getElementById("previewdiv");
53100

54101
reader.addEventListener("loadend", () => {
55102
let data = reader.result;
56103
pageList = iwbToList(data);
57104
currPage = 0;
105+
if (prDiv.classList.contains("hide")) prDiv.classList.remove("hide");
58106
rigeneraPagine();
59107
});
60-
reader.readAsText(fileList[0]);
61-
});
62-
63-
// idk easteregg?
64-
function funfun() {
65-
return "fünfhundertfünfundfünfzigtausendfünfhundertfünfundfünfzig";
66-
}
108+
reader.readAsText(file);
109+
}

‎styles.css

+47-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,54 @@
1-
body {
2-
font-family: sans-serif;
3-
font-size: 0.9em;
1+
input, label {
2+
cursor: pointer;
43
}
54

6-
div {
7-
padding: 5px;
5+
p {
6+
line-height: 2.1;
87
}
98

10-
label {
9+
.button {
10+
white-space: nowrap;
11+
}
12+
13+
#dndZone {
14+
position: relative;
15+
height: 13rem;
16+
padding: 1.5rem;
17+
transition: 0.25s;
18+
}
19+
20+
#dashes {
21+
border: 4px dashed var(--border);
22+
height: 100%;
23+
margin: 0;
24+
border-radius: var(--standard-border-radius);
25+
pointer-events: none;
26+
}
27+
28+
.minibtn {
29+
padding: .2rem .45rem !important;
30+
margin-left: .3rem;
31+
margin-right: .3rem;
32+
}
33+
34+
.dropping {
35+
padding: 1.8rem !important;
36+
}
37+
38+
.hide {
39+
display: none !important;
40+
}
41+
42+
.center {
1143
display: block;
44+
text-align: center;
45+
margin: 0;
46+
position: absolute;
47+
top: 50%;
48+
left: 50%;
49+
transform: translate(-50%, -50%);
1250
}
1351

14-
/*svg {
15-
width: 90%;
16-
height: 90vh;
17-
}*/
52+
.inline {
53+
display: inline !important;
54+
}

0 commit comments

Comments
 (0)