forked from canonex/Interactive-Floorplan
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·159 lines (123 loc) · 5.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Interactive floorplan</title>
<meta name="description" content="Interactive Svg Floor Plan">
<meta name="author" content="Riccardo Gagliarducci @ Accademia Sironi">
<!-- Inline style - Stile inline
It is possibile to use a regex to remove style attribute from an svg file:
È possibile rimuovere gli attributi style da un svg utilizzando regex:
style="[^\"]*"
-->
<link type="text/css" href="css/interfloorplan.css" />
<!-- Library - Libreria
I can load the library in the document head.
Posso caricare la libreria nell'header del documento.
-->
<script src="js/interfloorplan.js"></script>
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<h1><a href="index.html">Planimetria interattiva</a></h1>
</header>
<!-- Main -->
<div id="main">
<article>
<!-- Multiple instances - Multiple istanze
Possono esistere più mappe nella pagina.
Le mappe vengono identificate dalla classe "interfloorplan".
Ciascuna mappa è legata alla sua interfaccia tramite l'id che deve essere formato in questo modo:
mappa class="interfloorplan" con id="mappa1"
mappa ui id="mappa-1-ui"
L'id quindi può essere qualsiasi nome, l'interfaccia sarà nome-ui.
-->
<!-- Ui
In questo div viene creata l'interfaccia per navigare la mappa.
Può essere collocato ovunque nella pagina, basta che abbia questo id:
se non esiste non viene creata l'interfaccia.
Le azioni possono comunque essere guidate da javascript personalizzato. -->
<div id="sironi-ui"></div>
<!-- Object
Object è un modo per fare l'embed dell'svg, rendendo accessibile il DOM dell'svg.
Usando il tag img non è possibile accedere al dom (va bene per contenuti svg statici).
È anche possibile inserire direttamente l'svg fra tag <svg> ma il contenuto risulta
difficilmente gestibile con programmi di editing vettoriale (Inkscape, Illustrator).
Il file caricato, deve essere posizionato nello stesso dominio del documento html altrimenti
il DOM è inaccessibile (same-origin policy). -->
<!-- Style
Questo svg può avere un foglio di stile interno, utilizzando CDATA subito prima delle geometrie.
Es.
...</metadata>
<style type="text/css">
<![CDATA[
.firstb { fill: yellow; }
.secondb { fill: red; }
]]>
</style>
<g id=...
Attenzione: questo NON è supportato da Adobe Illustrator.
È supportato parzialmente da Inkscape (non funzionano molte proprietà dei testi).
Funziona sui browser (testato Firefox, Chrome).
Inksape permette di gestire Id e Classi direttamente dal programma tramite l'editor di xml integrato,
attivabile con Maiusc+Ctrl+x (Win e Linux).
Un ulteriore modo per inserire un foglio di stile esterno in un svg è l'uso di:
<?xml-stylesheet href="css/svg.css" type="text/css"?>
Per combinare l'uso di stili interni ed esterni utilizzare una diversa specificità. -->
<!-- Structure - Struttura
Il file svg avere una specifica strtuttura per essere compatibile con lo script.
Osservarlo con l'ispector o aprirlo con Inkscape per scoprirla. -->
<object id="sironi" data="Floorplan.svg" width="100%" class="interfloorplan">
</article>
</div>
</div>
<script type="text/javascript">
/* Onload
Posso far partire la funzione quando il DOM (tutto window) è completo, incluse tutte le dipendenze.
Questo mi assicura che l'oggetto svg sia totalmente caricato quando lancio le funzioni javascript.
Onload è un evento, può essere assegnato a qualsiasi elemento.
*/
window.onload = function(){
/* Configuration - Configurazione
Creo la configurazione per gestire la mappa.
La configurazione è un file json con la seguente struttura di esempio.
var inlineConf = {
"name": "External v5", //Optional property, whatever name just for debug
"inputIds": {
"country":{ "id": "addr-country", "default": "Italia" },
"city": { "id": "addr-city", "default": "Le Pulci" },
"street": { "id": "addr-street", "default": "Via Fresca" },
"number": { "id": "addr-number", "default": "1" },
"zip": { "id": "addr-cap", "default": "060134" },
"lat": { "id": "coords-lat", "default": "43.189" },
"lon": { "id": "coords-lon", "default": "12.4505" }
},
"map": {
"mapHolder": { "id": "map-holder"},
"defaultLat":"43.189",
"defaultLon":"12.45",
"defaultZoom":"8"
}
};
*/
/* External Configuration - Configurazione esterna
È possibile anche usare una risorsa esterna: questo permette di posticipare il caricamento della risorsa a quando
la pagina è già completamente caricata.
Se è posizionata su un altro dominio è necessario abilitare il server (sempre same-origin).
*/
var remoteConf = "auleList.json";
/* Start
La libreria caricata espone un "metodo pubblico" che permette di lanciare la funzione
prendendo due parametri.
È possibile leggere la documentazione della funzione nella libreria.
Per brevità, il primo parametro è l'oggetto configurazione oppure un indirizzo da cui recuperarlo,
il secondo indica se il debug (la stampa di messaggi utili per programmare la libreria) è attivo oppure no.
*/
interfloorplan.load(remoteConf, true);
} //onload
</script>
</body>
</html>