Pistetään nyt tämäkin purkkiin. valmishan se on jo ollut jokusen viikon...
Eli uusi NSDisplay Nexstorm-näyttö jossa ajaxilla päivittyvät (nyt se suuri yllätys) jQuery-käppyrät. :)
Erityistä painoa on laitettu siihen että html-requestien määrä olisi mahdollisimman pieni, tämä jotta se toimisi mahdollisimman hyvin myös suuremman liikenteen kanssa. Tässä uudessa ajax hakee vain datatiedoston joka x sekunti sekä käyrätiedoston + tutkakuvan kerran minuutissa.
Käppyrät päivittyvät siis automaagisesti kerran minuutissa.
Mitä tarvitset:
- Boltek + Nexstorm stormtracker
- Jimin NSLog-palikka joka tekee clientraw-tyyppiset filut ja siinä NSRealtime.txt & NSGraph.txt aktivoituna
Asennus:
- NSjson.php: Vain yksi asetus tässä, polku NSGraph.txt-tiedostoon. Tämä tekee JSON-arrayt käyrille. Voit kokeilla sen toimivuutta menemällä tähän tiedostoon jolloin sen pitäisi kirjoittaa ruudun täyteen dataa jos toimii, jollei toimi tulee vain pieni rivin puolikas.
- NSDisplay.php: muutama asetus tässä, muista myös tarkistaa $nshead:ssa olevat polut js-filuille
- jquery.nsdisplay.js: Käyrä-tiedosto
- NSDisplay.css: cssää
- wxtracker.php, testi-tiedosto sekä malli miten implentoida se omalle sivulle. Kopioi NSD START ja NSD END-kommenttien väliset osat head- sekä body-osaan sivuasi samalla tavalla kun ovat testifilussa.
Nexstormin asetukset:
- Upload asetuksissa Data transfer --> täppi Altenate sekä täppi UPload TRAC datafile
- Screenshot asetuksissa --> täppi Capture map only
- Display mode joko 800x600 tai 1024x768
- Karttakuvan voi uploadata joko Nexstormin omalla ftp:llä (ei taida osata renamea) tai NSLogilla (osaa renamen)
Zippi sisältää myös excanvas.pack.js ja jquery.flot.comb.js-tiedostot (samat kuin wxsim-käyrissä), jollei sinulla ole niitä, tarvitset niitä.
Lataa: http://www.nordicweather.net/NSD.zip
Live demo: http://www.nordicweather.net/index.php?sivu=32&lang=fi
EDIT: 21.03: Zippi päivitetty.
Jepulis, sain tuon NSD2:sen pienen räpeltämisen jälkeen jotenkuten toimimaan. ;)
Pikkusen on vielä hakusessa tuo 12 tunnin käyrien näyttäminen ja IE:llä katsottuna tavitsee porukka suurennuslasia että näkee nuo kellonajat. ;D
Aivan loistavan näköinen kokonaisuus. Pitänee katsoa, josko tuo on implementoitavissa FinWX Helsinki-42:n tutkallekin jossain vaiheessa (ideointivaihe on menossa, miten parantaa FinWX:n sivuja nykyisestä (eli sivuston 4-versio).
Tein pienen kosmeettinen havainnon tuosta demosta: Joko se on minun järjestelmän vika (en yllättyisi), mutta kartassa näyttäisi nuo kaupungit paenneen pohjoisemmaksi, kuin missä niiden olettaisi olevan (esim. Helsingin täplä).
LainaaTein pienen kosmeettinen havainnon tuosta demosta: Joko se on minun järjestelmän vika (en yllättyisi), mutta kartassa näyttäisi nuo kaupungit paenneen pohjoisemmaksi, kuin missä niiden olettaisi olevan (esim. Helsingin täplä).
Se oli bugi tuossa aikasemmassa Nexstorm 1.8 betassa joka mulla oli testissä Relkolta ja jonka korjasi uusimmassa versiossa enkä ole vielä saanut korjattua kordinaatit ;)
Aikasemmassa versiossa se heitti Helsingin täplän Hämeenlinnan korville jos zoomas sisään 100km:iin ja taas Suomenlinnan eteläpuolelle jos zoomas 1200 km:iin. ;D
Nuo kaupunki-täplät ovat siis Nexstormin tulevan version jekkuja, ei tuon tutkanäytön ;)
Tosin, tuo paikkakuntanäyttö nostaa taas kalibroinnin tarpeen aivan uudelle tasolle ;D
NS 1.8 pitäisi olla ihan hienossäätöja vailla julkaisua.
Dodiih, nyt on täplät fixattu ja muutama uusikin lisätty mutta niitä saadaan odotella näkyviin kunnes ilmestyy soluja ja autozoom ottaa ohjaat ;)
Se on helppoa kun sen osaa ;D http://www.liminkaweather.info/wxradartest.php
jamo
Lainaus käyttäjältä: jamo - lauantai, 20.03.2010, 10:09
Se on helppoa kun sen osaa ;D http://www.liminkaweather.info/wxradartest.php
jamo
No....., pikkusen näyttäisi olevan räjähtäneen näköinen. ;D :o
Lainaus käyttäjältä: jamo - lauantai, 20.03.2010, 10:09
Se on helppoa kun sen osaa ;D http://www.liminkaweather.info/wxradartest.php
jamo
Pikkusen oli minullakin tuskaa saada tuota NSD2 sivua toimimaan mutta seuraavilla muutoksilla se alkoi sitten pelittämään. ;)
Nyt mennään sitten takaperin puuhun että kaikki pitää tehdä päin vastoin.
-jquery kansiossa olevat tiedostot latasin samaan kansioon minne NexStorm lataa tutkakuvan/tiedostot
-NSDisplay.ccs, NSDdisplay.php, NSjson.php ja wxtracker.php tiedostot latasin palvelimen juureen
Koodia muokkaamaan:
1-jquery.nsdisplay.js -->rivi 106 = $.getJSON("../NSjson.php", function (data) {
2-NSjson.php -->rivi 3 = $path_to_data = "./tähän tutkakansion nimi/NSGraph.txt";
3-NSDisplay.php sivulle seuraavat muutokset :
$nshead = '
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="./tähän tutkakansion nimi/excanvas.pack.js"></script><![endif]-->
<script type="text/javascript" src="./tähän tutkakansion nimi/jquery.flot.min.js"></script>
<script type="text/javascript" src="./tähän tutkakansion nimi/jquery.nsdisplay.js"></script>
';
// Main settings
$path_to_trac = "./tähän tutkakansion nimi/TRACReport.txt";
$path_to_data = "./tähän tutkakansion nimi/NSRealtime.txt";
$path_to_map = "./tähän tutkakansion nimi/tähän tutkakuvan nimi";
$range = "800 km"; // Just for the infobox
$persist = "60 min";// Same here..
$squelsh = "0"; // And here..
$kmorm = "km"; // km or mi or whatever you use ;)
$updates = 30; // Allowed updates before pause
$timeout = 20; // Time between updates, in sec
$smallmap = 0; // Do you use small (800x600) map? 1024x768 is default
$graphhours = 24; // How many hours do NSGraph.txt include?
$datestr = 1; // 1 = dd.mm.yyyy, 2 = mm/dd/yyyy, 3 = dd/mm/yyyy
======================================================================================
if($smallmap) {
$bwidth = 697;
$twidth = 555;
$graphheight = 140;
$graphwidth = 660;
} else {
$bwidth = 861;
$twidth = 690;
$graphheight = 150;
$graphwidth = 850;
}
========================================================================================
<img id="NEXMAP" src="'. $path_to_map .'" alt="Mikäli ei kuvaa näy, paina F5-nappia, tuore kuva on juuri latautumassa serverille" style="border:0 height:691px; width:691px;" />
========================================================================================
Noilla asetuksilla NSD2:n istuu Carterlake templateen
HUOM!
-NexStormessa pitää olla Display mode --> 1024x768
-Upload asetuksissa Data transfer --> täppi Altenate sekä täppi UPload TRAC datafile
-Screenshot asetuksissa --> täppi Capture map only
-NSLog:in pitäisi upata NSRealtime sekä NSGraph tiedostot tuohon tutkakansioon
Lainaus käyttäjältä: teutari - lauantai, 20.03.2010, 14:54
Lainaus käyttäjältä: jamo - lauantai, 20.03.2010, 10:09
Se on helppoa kun sen osaa ;D http://www.liminkaweather.info/wxradartest.php
jamo
Pikkusen oli minullakin tuskaa saada tuota NSD2 sivua toimimaan mutta seuraavilla muutoksilla se alkoi sitten pelittämään. ;)
Nyt mennään sitten takaperin puuhun että kaikki pitää tehdä päin vastoin.
Kiitos, nyt jo menee sinnepäin. Näyttää että oikealla olevaan "Salamatilastot" ja alla oleviin "ruutuihin" ei tule ilmestymään mitään käyriä.
Näin oli jo siinä entisessä versiossa ja syytä tähän en tiedä. Alkaa jo käymään mielessä josko palaisin niihin vanhoihin html-filuihin, nekun
toimivat niinkuin halusin.
jamo
Kuten aravasin sihen on jäänyt jotain asetusta pois automatiikasta (eli siitä asetusryppäässtä NSDisplay.php:ssa) ;)
Teutarin 1. sekä tuo $smallmap-rypäs näytttää ainakin siltä, sekä itse tutkakuvan koko NEXMAP-kuvassa, joka itse asiassa aika pitkälle määrää koko systeemin leveyden käppryien lisäksi.
Mainittakoon että miulla on NSD2-filut sekä NSLogin puskemat filut (mukaanlukien tutkakuva) aivan eri kansioissa.
Vinkkinä, laittaa NSLog uppaamaan tutkakuvan, siinä on kaksikin hjuvaa puolta:
- Siinä toimii rename, eli tutkakuva ei häviä uppauksen ajaksi
- Se osaa tutkia jos kuva on muuttunut, eli se jos kuva ei ole muuttunut, se ei myöskään uppaa turhaan.
Tuli mieleen,
jos haluat hienosäätää isoissa käyrissä välin jolloin aika näytetään (nyt joka tunti) niin jquery.nsdisplay.js:ssä rivillä
116:
$.plot($("#TOTCHART")
ja
123:
$.plot("#TYPCHART",
riveillä jossa {yaxis: löytyy kohta tickSize: [1, "hour"], sitä muuttamalla muuttu aikaväli. Tuo 1 tunnin väli on säädetty oman NSGraph.txtin mukaan joka sisältää 12 tunnin datat.
Pikkukäyrässä oikeassa palkissa on hardkoodatut tikit jotta ne toimis väärään suuntaan 60->0 eikä niinkun käyrä normaalisti toimii 0 -> 60:iin, eli käytännössä nuo numerot ovat feikatut. Jotta se myös näyttäis numerot 0 ja 60 käyrän koko on 61 minuuttia, muuten jäis viimeinen pois.
Lainaus käyttäjältä: weatherc - lauantai, 20.03.2010, 18:13
Tuli mieleen,
jos haluat hienosäätää isoissa käyrissä välin jolloin aika näytetään (nyt joka tunti) niin jquery.nsdisplay.js:ssä rivillä
116:
$.plot($("#TOTCHART")
ja
123:
$.plot("#TYPCHART",
riveillä jossa {yaxis: löytyy kohta tickSize: [1, "hour"], sitä muuttamalla muuttu aikaväli. Tuo 1 tunnin väli on säädetty oman NSGraph.txtin mukaan joka sisältää 12 tunnin datat.
Pikkukäyrässä oikeassa palkissa on hardkoodatut tikit jotta ne toimis väärään suuntaan 60->0 eikä niinkun käyrä normaalisti toimii 0 -> 60:iin, eli käytännössä nuo numerot ovat feikatut. Jotta se myös näyttäis numerot 0 ja 60 käyrän koko on 61 minuuttia, muuten jäis viimeinen pois.
Valitettavasti hienosäädöt ei auta jos koko käyriä ei näy ollenkaa. :(
jamo
LainaaValitettavasti hienosäädöt ei auta jos koko käyriä ei näy ollenkaa.
Todennäköisesti siksi koska sulla on <head>-osioon kuuluvat tavarat <body>ssä. Nuo kuuluu headiin, koska mitä kokeilin Flot ei toimi muuten:
<title>NSDisplay Test using NSLog and jQuery + Flot</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="./excanvas.pack.js"></script><![endif]-->
<script type="text/javascript" src="./jquery.flot.min.js"></script>
<script type="text/javascript" src="./jquery.nsdisplay.js"></script>
</head>
<body>tai koodissa:
<title>NSDisplay Test using NSLog and jQuery + Flot</title>
<?php
include 'NSDisplay.php';
echo $nshead;
?>
</head>
Carterlake templaten sivu pitäisi tehdä noin:
$TITLE= $SITE['organ'] . " - Sample Blank Page";
$showGizmo = false; // set to false to exclude the gizmo
include("top.php");
############################################################################
?>
<?php
include 'NSDisplay.php';
echo $nshead;
?>
</head>
<body>
<?php
############################################################################
include("header.php");
############################################################################
include("menubar.php");
############################################################################
?>
<div id="main-copy">
<h1>NSDisplay Test using NSLog and jQuery + Flot</h1>
<?php
echo $nsdisplay;
?>
<p> </p>
</div><!-- end main-copy -->
<?php
############################################################################
include("footer.php");
Vaikka rautalankaohjeet tulee, niin ei sitten millään.
Eiköhän tämä jo riitä tältä erää.
jamo
Ensimmäinen tälli tuli ja hyvin näyttää pelittävän. ;D
Käyrien aikavälikin tuli muutettua tuohon 12 tuntiin sitten huomasin tuossa jquery.nsdisplay.js TYPCHART:ssa taisi olla pieni näppäinvirhe kun oli +CG, -CG, +CC, -CC kun ilmeisesti pitäisi nuo kaksi viimeistä olla +IC ja -IC joten muutin ne.
LainaaKäyrien aikavälikin tuli muutettua tuohon 12 tuntiin sitten huomasin tuossa jquery.nsdisplay.js TYPCHART:ssa taisi olla pieni näppäinvirhe kun oli +CG, -CG, +CC, -CC kun ilmeisesti pitäisi nuo kaksi viimeistä olla +IC ja -IC joten muutin ne.
Jospa olen ajatellut jotain Cloud-to-cloud-tyylistä kun väänsin ne siihen? ;D Tiedä häntä. IntraCloud (IC) se oikeampi on.
Jäipä tuo jamon NSD2 pikkusen kaivelemaan kun oli aivan hiuskarvanvarassa että alkaisi toimimaan. :(
Itse sivu ja jQuery näyttäisi toimivan aivan oikein mutta jQuery ei löydä NSLog-palikkan NSRealtime.txt ja NSGraph.txt tiedostoja että osaisi piirtää aikajanan sekä käyrän.
Kompastuskivi taitaa nyt olla NSLog-palikka ja asetukset....., mutta tähän NSD2:een pätee samat asetukset mitä oli aikasemmassa NSDisplay asennuksessa kohdassa "Osa 1 - Asennetaan ensin NsLog"
Juttuhan löytyy tuolta: http://www.finwx.net/forum/index.php/topic,1081.0.html
Jamo, jos haluat niin voin käydä kurkkaamassa missä vika on ja katsoa että saanko toimimaan (pistätkö ftp-tiedot yv:nä?) ;)
Sen olen huomannut että joskus voi javascriptit olla aika hankalia noitten polkujen suhteen.
Dodiih, nyt toimii jamollakin :)
Olin unhottanut että myös NSjson.php:ssä oli polku. Täytyypi päivittää ohje sekä nuo filut ;)
Lainaus käyttäjältä: weatherc - sunnuntai, 21.03.2010, 14:34
Dodiih, nyt toimii jamollakin :)
Olin unhottanut että myös NSjson.php:ssä oli polku. Täytyypi päivittää ohje sekä nuo filut ;)
Hieno homma että alkoi toimimaan. ;)
Nyt filutkin päivitetty. Laitoin nuo Teutarin muokkaukset mukaan sekä uudet variablet tuolle tutkakuvan koolle sekä NSjson:n polulle jotta pitäisi löytyä paremmin. Tutkakuvan koko pitäisi nyt toimia $smallmap-asetuksen mukaisesti. :)
Kiitos kovasti. Uusi tutkasivu myös otettu heti käyttöön. Pientä hienosäätöä saattaa tulla sitten myöhemmin.
http://www.liminkaweather.info/wxradar.php
jamo
Kaikkia murheita sitä tulee kun kelloja väänellään ees taas. >:(
Nyt pitäis saada noiden 12h salamat/12h salamatyyppien käyrien kelloaika rukattua oikein.
Lainaus käyttäjältä: teutari - sunnuntai, 28.03.2010, 15:17
Kaikkia murheita sitä tulee kun kelloja väänellään ees taas. >:(
Nyt pitäis saada noiden 12h salamat/12h salamatyyppien käyrien kelloaika rukattua oikein.
Hrmm...Katsellaan huomiseen jos ja kuin paljon tasoiuttuu kun datat ovat koko filussa samaa aikaa, mulla ainakin näyttää ihan sekolta tällä hetkellä...
Pikakorjaus, toimii ainakin täällä, infoa tulemaan miten siellä :)
Aikavyöhyke toimii automaagisesti niin kauan ainakin kun NSLog ja palvelin puhuuvat samaa aikaa ;)
Tuttuun tapaan, "rename first" ;)
Lainaus käyttäjältä: weatherc - sunnuntai, 28.03.2010, 20:40
Pikakorjaus, toimii ainakin täällä, infoa tulemaan miten siellä :)
Aikavyöhyke toimii automaagisesti niin kauan ainakin kun NSLog ja palvelin puhuuvat samaa aikaa ;)
Tuttuun tapaan, "rename first" ;)
Jep toimii hienosti! ;D