Kirjautumissivun personointi
Wippies Wiki
Sisällysluettelo
|
Yleistä
Vierailijaverkon kirjautumissivun voi kukin personoida sellaiseksi kuin haluaa. Sivu tulee tehdä (X)HTML-kielellä. Skriptikielet, kuten PERL, PHP, ASP yms eivät toimi. Sivun toimintaa on rajoitettu myös siten, että, että kirjautumatta siltä ei pääse muualle, vaikka siinä olisikin linkkejä.
Tukiasemakartta vierailijaverkon kirjautumissivulle
Google Map API key
Ensimmäiseksi tarvitset Google Map API avaimen, sillä se on yksilöllinen kullekin verkko osoitteelle. Esim. tunnus.wippiespace.com ja/tai username.wippiespace.com tarvitsee molemmat omansa, että tukiasema kartta toimii. Tarvittavan avaimen voi hankkia osoitteesta http://www.google.com/apis/maps/
Selvitä oma koordinaattisi
Selvitä esim. http://mcnano.wippiespace.com/map.html osoitteessa oma koordinaattisi tuplaklikkaamalla haluamaasi kohdetta. Kartan alla pitäisi kohta tämän jälkeen olla paikan koordinaatit. Ota koordinaatit talteen. Samalla voit linkkiä klikkaamalla tarkistaa että kartalle tuleva tukiasemienmäärä on hyvä, esim. 100 kpl on varsin hyvä. (Älä hämäänny siitä, mitä tuolla sivulla niitä tukiasemia näkyy, sininen linkki näyttää aina kartta-alueen kaikki tukiasemat, jos niitä on alle 200 kpl.) Zoomaamalla kauemmaksi saat tukiasemia listalle lisää. Kun olet saanut listaan sopivan määrän lähimpiä tukiasemia, niin tallenna linkki nimellä maplocations.xml.
index.html
Luo itsellesi omannäköisesi index.html -sivu.
<body>-tagin muokkaaminen
Lisää index.html tiedoston body-tagiin seuraavat atribuutit onload ja onunload. Esim.
<body onload="load()" onunload="GUnload()">
Karttakoodin lisääminen
Sijoitat seuraavan koodin html-koodiin sekaan body-tagien väliin. Muista vaihtaa oma avaimesi sille varattuun paikkaan
<script src="http://maps.google.com/maps?file=api&v=2&key=TÄHÄN_TULEE_SINUN_OMA_AVAIMESI" //TÄMÄ pitää vaihtaa
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var locSaunalahti = new GLatLng(60.2131, 24.8108); //NÄMÄ koordinaatit määrittävät aukeavan kartan keskipisteen
var map = null;
var currentMarkers = new Array();
var iconGreen = new GIcon();
iconGreen.image = "http://www.wippies.com/pic_gen/wippies_icon1green_20.png";
var iconYellow = new GIcon();
iconYellow.image = "http://www.wippies.com/pic_gen/wippies_icon1yellow_20.png";
var iconRed = new GIcon();
iconRed.image = "http://www.wippies.com/pic_gen/wippies_icon1red_20.png";
var icons = [ iconGreen, iconRed, iconYellow ];
for (var i = 0; i<3; i++) {
icons[i].shadow = "http://www.wippies.com/pic_gen/shadow20.png";
icons[i].iconSize = new GSize(12, 20);
icons[i].shadowSize = new GSize(22, 20);
icons[i].iconAnchor = new GPoint(6, 20);
icons[i].infoWindowAnchor = new GPoint(5, 1);
}
function addMarker(point, info, icon) {
var marker = new GMarker(point, icon)
// markerMgr.addMarker(marker, 10);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(info);
});
currentMarkers[currentMarkers.length] = marker;
}
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
GEvent.addListener(map, "moveend", function() {
var bounds = map.getBounds();
var neLat = bounds.getNorthEast().lat();
var neLong = bounds.getNorthEast().lng();
var swLat = bounds.getSouthWest().lat();
var swLong = bounds.getSouthWest().lng();
updateLocations(swLat, swLong, neLat, neLong);
});
map.setCenter(locSaunalahti, 11); //Tässä numero 11 määrää kartan zoomauksen. Isompi luku tuo zoomausta lähemmäksi
// markerMgr = new GMarkerManager(map);
}
}
function clearMarkers() {
for (var i=0; i<currentMarkers.length; i++) {
map.removeOverlay(currentMarkers[i]);
}
currentMarkers = new Array();
}
function updateLocations(latBegin, lngBegin, latEnd, lngEnd) {
var url = "maplocations.xml"; //Tukiasemien tiedot sisältävä XML-tiedosto
var url2 = "http://www.wippies.com/maplocations?beginLat="+ latBegin + //NÄMÄ RIVIT
"&beginLng="+ lngBegin + //SISÄLTÄISIVÄT AUTOMAATTISEN
"&endLat="+ latEnd + //TUKIASEMALISTAUKSEN
"&endLng="+ lngEnd; //MUTTA SE EI TOIMI KARTAN KANSSA WIPPIESPACE.COM:ssa
GDownloadUrl(url, function(data, responseCode) {
var xml = GXml.parse(data);
var locdata = xml.getElementsByTagName("locationdata")[0];
var count = locdata.getAttribute("markerCount");
var msg;
clearMarkers();
if (locdata.getAttribute("limitExceeded") == null) {
var locs = xml.getElementsByTagName("location");
for (var i=0; i<locs.length; i++) {
var loc = locs[i];
addMarker(new GLatLng(loc.getAttribute("latitude"),
loc.getAttribute("longitude")),
loc.getAttribute("text"),
iconGreen);
}
}
msg = GXml.value(locdata.getElementsByTagName("infomessage")[0]);
document.getElementById("message").innerHTML = msg;
});
}
//]]>
</script>
<div id="map" style="width: 400px; height: 300px;"></div> //TÄSSÄ OLEVIA kartan korkeutta ja leveyttä voi itse säätää
<div id="message"></div>
Hakemiston luonti
Tee itsellesi Vierailijaverkko-sivun osoittaman tavalla sopiva hakemisto esim. captive
Tiedostojen siirto
Siirrä maplocations.xml ja index.html juuri luomaasi captive-hakemistoon
Valmis
Kartan pitäisi nyt olla valmis ja toiminnassa
Karttatietojen päivitys
Jotta kartta pysyisi edes jotenkin ajantasalla, niin maplocations.xml-tiedostoa pitää välillä päivittää kopioimalla se sinne uudestaan osoiteesta esim. http://mcnano.wippiespace.com/map.html
Karttatietojen päivitys -Automaattisesti
Tarvittavat ohjelmat:
- wget.exe http://jis.wippiespace.com/captive/wget.exe ( Alkuperäinen latauspaikka: http://www.ncftp.com/ncftp/ )
wget linuxille löytyy oletuksena melkein kaikista Linuxeista
- ncftpput.exe http://jis.wippiespace.com/captive/ncftpput.exe ( Alkuperäinen latauspaikka: http://pages.interlog.com/~tcharron/wgetwin.html )
ncftpput -linuxille http://jis.wippiespace.com/captive/ncftpput (muista chmod +x ncftpput )
- Tee kansio: C:\map\temp (Linuxissa /root/map )
- Lataa wget ja ncftpput C:\map -kansioon
Scriptin tekeminen
- Tee kansio: C:\map\temp
- Tee tiedosto: map.cmd ja tallenna se kansioon C:\map
cd C:\map wget -O c:\map\temp\maplocations.xml "http://www.wippies.com/maplocations?beginLat=59.495435&beginLng=25.527147&endLat=61.495435&endLng=26.527147" cd C:\map\temp c:\map\ncftpput -mRDD -u "käyttäjätunnuksesi" -p "salasanasi" "käyttäjätunnuksesi".wippiespace.com /captive maplocations.xml
Linuxille vastaava scripti olisi: map.sh
cd /root/maps wget -O temp/maplocations.xml "http://www.wippies.com/maplocations?beginLat=59.495435&beginLng=25.527147&endLat=61.495435&endLng=26.527147" cd /root/maps/temp ../ncftpput -mRDD -u "käyttäjätunnuksesi" -p "salasanasi" "käyttäjätunnuksesi".wippiespace.com /captive maplocations.xml
Ohje:
- Ensimmäinen rivi kertoo scriptille oikean kansion
- Toinen rivi lataa wget -ohjelmalla päivitetyn maplocations.xml listan, tee itselle sopiva esim. http://jis.wippiespace.com/captive/karttapisteet.html
- Kolmas rivi vaihtaa kansion kansioon mistä tiedosto ladataan ftp-palvelimelle
- Neljäs rivi lataa ncftpput -ohjelmalla tiedoston ftp:llä wippiespace-palvelimelle, HUOM! käyttäjätunnus ja salasana tulee ilman heittomerkkejä.
Testaa scriptin toimivuus
- Ennen ajastamista kannattaa testata toimiiko scripti jotta tiedetään toimiiko scripti oikein.
- Aja scripti seuraavasti:
- Start (käynnistä) --> Run (suorita) --> CMD --> "Enter"
- C:\map\map.cmd "Enter"
- Start (käynnistä) --> Run (suorita) --> CMD --> "Enter"
C:\map>cd C:\map
cd C:\map
C:\map>wget -O c:\map\temp\maplocations.xml "http://www.wippies.com/maplocations?beginLat=59.495435&beginLng=25.527147&endLat=61.495435&endLng=26.527147"
--12:30:05-- http://www.wippies.com:80/maplocations?beginLat=59.495435&beginLng=25.527147&endLat=61.495435&endLng=26.527147
=> `c:\map\temp\maplocations.xml'
Connecting to www.wippies.com:80... connected!
HTTP request sent, awaiting response... 200 OK
Length: 4,953 [text/xml]
0K -> .... [100%]
12:30:05 (4.72 MB/s) - `c:\map\temp\maplocations.xml' saved [4953/4953]
C:\map>cd C:\map\temp
C:\map\temp>c:\map\ncftpput -mRDD -u tunnus -p salasana tunnus.wippiespace.com /captive maplocations.xml
maplocations.xml: 4.84 kB 23.83 kB/s
Ajastetun tehtävän tekeminen
- Windowsissa sen saa helpoiten seuraavasti:
- Start (käynnistä) --> Run (suorita) --> CMD --> "Enter"
- at 17:05 /every:M,T,W,Th,F,S,Su c:\map\map.cmd /interactive "Enter"
- Start (käynnistä) --> Run (suorita) --> CMD --> "Enter"
- Linuxissa tehdään uusi crontab, esim:
5 17 * * * sh /root/map/map.sh >/dev/null 2>&1
--Vippe0 19:36, 14 May 2007 (EEST)
- Ubuntussa croniin lisätään näin (mahdollisesti muissakin linuxissa):
Päätteessä koodia:
export ED=nano && crontab -e
tänne lisätään rivi, esim:
5 17 * * * /bin/sh /root/map/map.sh >/dev/null 2>&1
(tuo tarkottaa että tuo map.sh ajetaan joka päivä klo 17:05)
Huomioitavaa kirjautumissivusta
Kirjautumissivu on tehty kehyksillä. Ylempi kehys on varattu kirjautumislomakkeelle ja alempi tälle personoidulle sivulle. Personoidun sivun osoite tässä tapauksessa on http://tacts.wippies.com:81/ ja sen Google Map API key kaikilla on:
ABQIAAAAuJ70GBkhf_scUP__IaT-cRRqES0_BeLlZS1m4B596LJWybAvyhT2Qa2rlMiApl7uDmlQ_mE2mEWLTA
Tämänkin jälkeen kartta näkyy valitettavasti vasta kirjautumisen jälkeen.
Kartan toimimattomuus voidaan kiertää tekemällä ensin sivu, johon on otettu kuvaruutukaappaus kartasta, jolloin kartta on pelkkä kuvatiedosto ja näkyy myös kirjautumattomalle käyttäjälle, kunhan kuva on vain siirretty samaan captive-hakemistoon. Tämän jälkeen kuva linkitetään oikeaan osoitteeseen http://tunnus.wippiespace.com/hakemisto/ Jos näin toimitaan, niin silloin oikealle karttasivulle pitää olla oma Google Map API avain osoitteeseen http://tunnus.wippiespace.com/hakemisto/.
