Weatherapp.js file looks like this:
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
#!/usr/bin/gjs
//The previous line is a hash bang tells how to run the script.
// Note that the script has to be executable (run in terminal in the right folder: chmod +x scriptname)
var Gtk = imports.gi.Gtk;
const WeatherService = imports.geonames;
//Bring your own library from same folder (as set in GJS_PATH). If using autotools .desktop will take care of this
// Initialize the gtk
Gtk.init(null, 0);
//create your window, name it and connect the x to quit function. Remember that window is a taken word
var weatherwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
weatherwindow.title = "Today's weather";
//Window only accepts one widget and a title. Further structure with Gtk.boxes of similar
weatherwindow.connect("destroy", function(){Gtk.main_quit()});
//We initialize the icon here, but decide the file later in geonames.js.
var weatherIcon = new Gtk.Image();
//Set some labels to your window
var label1 = new Gtk.Label({label: ""});
var label2 = new Gtk.Label({label: "Looking in the sky..."});
var label3 = new Gtk.Label({label: ""});
var grid = new Gtk.Grid();
weatherwindow.add(grid);
var entry = new Gtk.Entry();
entry.set_width_chars(4);
entry.set_max_length(4);
var label4 = new Gtk.Label({label: "Enter ICAO station for weather: "});
var button1 = new Gtk.Button({label: "search!"});
//some weather
entry.connect("key_press_event", function(widget, event) {
// FIXME: Get weather on enter (key 13)
if (entry.get_text().length === 4) {
// Enough is enough
getWeatherForStation();
}
return false;
});
button1.connect("clicked", function(){
getWeatherForStation();
});
function getWeatherForStation() {
var station = entry.get_text();
var GeoNames = new WeatherService.GeoNames(station); //"EFHF";
GeoNames.getWeather(function(error, weather) {
//this here works bit like signals. This code will be run when we have weather.
if (error) {
label2.set_text("Suggested ICAO station does not exist Try EFHF");
return; }
weatherIcon.file = GeoNames.getIcon(weather);
label1.set_text("Temperature is " + weather.weatherObservation.temperature + " degrees.");
if (weather.weatherObservation.weatherCondition !== "n/a"){
label2.set_text("Looks like there is " + weather.weatherObservation.weatherCondition + " in the sky.");
}
else {
label2.set_text("Looks like there is " + weather.weatherObservation.clouds + " in the sky.");
}
label3.set_text("Windspeed is " + weather.weatherObservation.windSpeed + " m/s")
// ...
});
}
grid.attach(label4, 2, 1, 1, 1);
grid.attach_next_to(label1,label4,3,1,1);
grid.attach_next_to(label2,label1,3,1,1);
grid.attach_next_to(label3,label2,3,1,1);
grid.attach_next_to(entry,label4,1,1,1);
grid.attach_next_to(button1,entry,1,1,1);
grid.attach_next_to(weatherIcon,label2,1,1,1)
weatherwindow.show_all();
//and run it
Gtk.main();
Running until you have all the autotools files ready. :
$ GJS_PATH=`pwd` gjs weatherapp.js
Use this command on terminal while developing your modules. When calling your program in this manner it knows where to find your custom JSlibraries, in this case geonames.js.