-
Notifications
You must be signed in to change notification settings - Fork 0
Home
The varseltavle (warning board) is a client that shows a summary of flagged extreme values in a database JSON file created from filtering weather model fields at the Norwegian Meteorological Institute.
The client setup json file contains the threshold-, color-, key- and icon-definitions for the client.
{
"thrs":{
"Phenomenon":{
"Polare lavtrykk":{"lat":"maxlat","lon":"maxlon", "key":"a100", ">": [0.0,0.05] },
"Regn":{"Duration":{"6t" :{"lat":"maxlat","lon":"maxlon", "key":"a100", ">": [0,5,10,25] },
"12t" :{"lat":"maxlat","lon":"maxlon", "key":"a100", ">": [0,5,10,25] },
"24t" :{"lat":"maxlat","lon":"maxlon", "key":"a100", ">": [0,5,10,25] }}},
...
},
"colors":{
"background":["lightgreen","rgb(110,150,230)","rgb(200,110,230)","rgb(240,140,190)"],
"foreground":["rgb( 0, 0, 0)","rgb( 0, 0, 0)","rgb(255,255,255)","white"]
},
"other":[
...
],
...
"svg":{"key":"Phenomenon","svgs":{
"Polare lavtrykk":"<svg id=\"svg8\" version=\"1.1\" ...
}
The client uses icons in a react-leaflet map:
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { Map, Marker } from 'react-leaflet';
...
var size=50;
var flagIcon = new L.divIcon({iconSize: [size, size], html:svgstr, className:'dummy'});
...
<Marker icon={flagIcon} ...>
where svgstr contains the svg-string from the setup file.
The icons are defined in the client setup file.
Download, edit, and upload the client setup-file using Settings->Save/Load setup->Browse.
You may create or edit icons using common software like inkscape.
sudo apt-get update
sudo apt-get install inkscape
The current icons are located on github:src/svg. You may download an svg-file from the github repo like this:
sudo apt-get install wget
wget https://raw.githubusercontent.com/FrankThomasTveter/varseltavle/master/src/svg/Skogbrann.svg
Open an icon-svg-file in inkscape.
inkscape Skogbrann.svg
Remember that the "fill color" will be replaced with the background color while the "stroke color" will be replaced by the foreground color in the setup file. Make your changes to the icon and save your file as "Plain svg" in inkscape:
File->Save As->"Plain SVG(*.svg)"->SAVE
Extract the setup-file input by running the extract.pl script on your svg-file:
wget https://raw.githubusercontent.com/FrankThomasTveter/varseltavle/master/src/svg/extract.pl
./extract.pl Skogbrann.svg
Finally paste the input into the setup-file with your favorite editor:
"svg":{ "key":{...}, "svgs":{<insert here>} },
Uploading your new setup-file to the client will not have any impact on the server. If your icon should be permanently located on the server you must contact the varseltavle project team.
The database JSON file on the server contains a list of the extreme model values within predefined polygons and typically looks like this:
{
"data" : [
{
"Type" : "Fiskebank",
"maxlon" : "9.19999981",
"f95" : "20.41350565",
"a400" : "20.55524448",
"minlat" : "65.00000000",
"lead" : "+29",
"Model" : "EC1h",
"Method" : "mb0",
"Variable" : "Wind10m",
"f90" : "20.27234745",
"Issued" : "2020-09-20_00-00-00.000Z",
"f70" : "19.63883018",
"level" : "-1",
"Phenomenon" : "Middelvind",
"Unit" : "Meter per sekund",
"day" : "+0",
"minlon" : "11.19999981",
"maxlat" : "64.30000305",
"max" : "20.92777824",
"f98" : "20.60300613",
"dtg" : "2020-09-21_05",
"Partner" : "MetNo",
"Region" : "Haltenbanken",
"a1000" : "20.38711944",
"a100" : "20.80790606",
"date" : "2020-09-21"
},
{
...
The server filters the model fields and reports highest values according to predefined criteria. For instance the 100% value is the highest value (max), while f98 is the 98% value and the 100km2 area with the highest values are all above the a100 value. A typical filter is a polygon covering a specific geographic region.
Note that the database file does not include thresholds. These are defined in the client setup file.
First make sure you have basic tools installed.
sudo apt-get install -y git npm emacs
To install the varseltavle-client you need to download the client code from the git repository, and some test data from the alarm-server. Download the code:
git clone https://github.com/FrankThomasTveter/varseltavle
Download some test data:
wget -r --no-parent -nH https://projects.met.no/alarm/data
wget -r --no-parent -nH https://projects.met.no/alarm/summary
wget -r --no-parent -nH https://projects.met.no/alarm/summary_avkroker
wget -r --no-parent -nH https://projects.met.no/alarm/summary_broer
wget -r --no-parent -nH https://projects.met.no/alarm/summary_efisot
wget -r --no-parent -nH https://projects.met.no/alarm/summary_fjelloverganger
wget -r --no-parent -nH https://projects.met.no/alarm/summary_kommuner
wget -r --no-parent -nH https://projects.met.no/alarm/summary_stasjoner
Now move your test data to your code:
mv alarm/data varseltavle/public/
mv alarm/summary* varseltavle/public/
mkdir test
mv varseltavle/public/data test/
ln -sf test/data varseltavle/public/.
Start the development server.
cd varseltavle/
npm start
A common task is to edit the defaults.json setup file. The development server will update automatically as soon as you save your changes.
emacs public/def/defaults.json
When you are happy with your changes, you should upload them to the git-server:
git pull
git status
git add --all
git commit -m "I made some changes..."
git push origin master # this only works if you have been invited...
Remember to tell the others that you have uploaded changes to git. :-)
Build a release based on the changes you made to the development server.
cd varseltavle/
npm run build
cd build
tar cvf ../build.tar *.js *.json def fonts images static textures favicon.ico index.html
cd ..
Move the build.tar file to projects.met.no/alarm (you need special permission to do this).
scp build.tar [email protected]:
Make sure the file was successfully transferred (no disk-quota errors).
If you run into disk quota errors you need to log onto projects.met.no and clean up the home directory.
It you still get disk-quota errors when transferring the build-file,
you should verify that the build-file only contains code and no test-data.
Use tar tvf to see content of a tar-file.
tar tvf varseltavle/build.tar
Finally log onto projects.met.no and install your build, build.tar.
ssh [email protected]
cd /var/www/alarm
# rm *.js; tar xvf ~/build.tar
tar xvf ~/build.tar
Next you need to check if everything is ok.
If the page does not load properly, you should press "shift" + [reload icon]
on the browser to make sure you are not using cached code. If the problem persists,
make sure the files in /var/www/alarm match the build files in varseltavle/build,
rebuild and reload if necessary. If the problem persists, call someone.