Interaktivni model na vaši spletni strani

Raziskali ste jamo in želite na svoji spletni strani ponuditi tudi njen interaktivni model? Spletni Speleoliti vam nudijo enostavno možnost za to. Tu so kratka navodila:

1. V spletne Speleolite naložite podatke vaše jame. Shranite jih kot datoteko v formatu JSON.

2. Izdelajte enostavno datoteko HTML z naslednjo vsebino (seveda zamenjajte 'testfile.js' z imenom vaše datoteke): 
<!DOCTYPE HTML>
<html>

<head>
<link rel="stylesheet" type="text/css" href="http://www.speleo.net/speleoliti/online/styles.css" />
<script language="JavaScript" charset="UTF-8" src="http://www.speleo.net/speleoliti/online/api.js"></script>
</head>

<body onload="loadJSON('testfile.js')">
</body>

</html>
3. Obe datoteki postavite na vašo spletno stran.

In tu je en delujoč primer.


Nastavitve pregledovalnika

Nekatere nastavitve pregledovalnika lahko krmilite preko dodatnega parametra v klicu metode 'loadJSON'. V spodnjem primeru definiramo konfiguracijski parameter 'cfg' z naborom željenih nastavitev. Vse nastavitve so neobvezne, torej nastavite samo tiste nastavitve, ki jih potrebujete. 
<!DOCTYPE HTML>
<html>

<head>
<title>Speleoliti API</title>

<link rel="stylesheet" type="text/css" href="http://www.speleo.net/speleoliti/online/styles.css" />
<script language="JavaScript" charset="UTF-8" src="http://www.speleo.net/speleoliti/online/api.js"></script>

<script type="text/javascript">
 function init()
 {
  var cfg=
  {
   name: "Moja slavna jama",              // s tem lahko povozimo ime objekta, kot je določeno v datoteki
   descr: "To je opis moje slavne jame.", // s tem lahko povozimo opis objekta, kot je določen v datoteki
   enableDrawingSettings: true,           // s tem omogočimo uporabniku, da si sam nastavlja grafične nastavitve
   startupInfo: true,                     // s tem sprožimo samodejni prikaz podatkov o objektu ob zagonu strani
   startupView: "profile",                // s tem določimo začetni pogled ob zagonu strani ("plan" / "profile" / "extended") 
   startupDirection: 33,                  // s tem določimo začetno orientacijo objekta
   startupInclination: 22,                // s tem določimo začetni nagib objekta
   linesOnly: true,                       // s tem določimo začetni pogled brez točk in prostorov
   units: "imperial",                     // s tem določimo imperialne merske enote namesto metričnih ("metric" / "imperial")
   box: true,                             // s tem vklopimo prikaz škatlastega okvirja okoli objekta
   touchToolbar: true                     // s tem vklopimo dodatno orodno vrstico za upravljanje na tistih napravah na dotik, ki ne podpirajo večtočkovnih dotikov
  }
  loadJSON("testfile.js", cfg);
 }

</script>

</head>

<body onload="init()">
</body>

</html>
Še delujoč primer uporabe vseh možnih nastavitev.


Večobjektni model

Model lahko prikazuje več kot en objekt naenkrat. Naslednji primer prikazuje, kako pripravimo predstavitev, ki vključuje štiri objekte. 
<!DOCTYPE HTML>
<html>

<head>
<title>Speleoliti API</title>

<link rel="stylesheet" type="text/css" href="http://www.speleo.net/speleoliti/online/styles.css" />
<script language="JavaScript" charset="UTF-8" src="http://www.speleo.net/speleoliti/online/api.js"></script>

<script type="text/javascript">
 function init()
 {
  var cfg=
  {
   name: "Moj testni izmišljeni jamski sitem",         // tako lahko določimo naslov predstavitve
   descr: "Par objektov zmetanih skupaj kot primer večobjektne predstavitve. Izberite s seznama posamezen objekt za več infomacij o njem, na sliki pa se bo obarval.",  // tako lahko določimo opis predstavitve
   enableDrawingSettings: true,
   startupInfo: true,
   startupView: "profile",
   startupDirection: 320,
   startupInclination: -30,
   box: true,
   touchToolbar: true
  }
  var files=
  [
   {
    file: "api3a.js"                                   // ime datoteke lahko podamo kot atribut "file" znotraj javascript objekta
   },
   {
    file: "api3b.js"
   },
   "api3c.js",                                         // ime datoteke lahko podamo tudi kot goli string
   {
    file: "api3d.js",
    name: "Moja slavna jama",                          // s tem lahko povozimo ime objekta, kot je določeno v datoteki
    descr: "To je opis moje slavne jame."              // s tem lahko povozimo opis objekta, kot je določen v datoteki
   }
  ]
  loadJSON(files, cfg);
 }

</script>

</head>

<body onload="init()">
</body>

</html>
Primer večobjektne predstavitve.

© MD 2012, powered by speleo.net