For any widget system, be it KDE4 Plasma, Mac OS X Dashboard, Yahoo! Widgets, Opera Widget, Google Gadgets, Microsoft Gadgets, and so on, weather applet is usually the typical example (beside a digital clock, an analog clock, or other variants of the clock). What is shown here is yet another little weather info tool, built using QtWebKit.
The idea came up when the other day I presented a challenge to myself: what is the shortest possible code that shows the weather, along with the forecasts for the next few days, for any places in the world? Usually this involves a lot of thinking. Thanks to Google however, the solution came instantly (avid Google users know this by heart). Hint: see the result of searching for "Weather in Oslo".
By smartly (some people call it cheating, though) combining this powerful Google service and a web rendering engine, the solution magically appears. Or rather it should not. Because by using magic, I will be unfair to my fellow (poor) software engineers, I decided to fire my Qt Creator and implemented the answer to that challenge the hard way, i.e. by actually doing it. The screenshot first:
The logic of the program is rather simple. Just loads the proper URL corresponding to the search for the weather, as if you would have typed in manually in your favorite web browser. After the web page shows up, find the DOM element that represents that information snippet (we are not interested in the search results lists), this is done using little jQuery-based JavaScript code. The web page is rendered to a pixmap, only the region of that DOM element is painted, and then the pixmap is shown.
The code is just one git clone (or git pull) away from the Graphics Dojo repository (yes, we are also moving to Gitorious). Check the subdirectory named gweather. You need Qt at least version 4.5.
As healthy exercises for the readers, try the following things. Implement an auto-reload feature (be gentle, no need to refresh the page every 5 minutes). In addition, add a possibility to change the location or city. Remember, magic is not allowed.
No related posts.
13 comments
clip.js missing ???
christophe@bespin:~/Downloads/dojo/gweather$ qmake-qt4
RCC: Error in ‘gweather.qrc’: Cannot find file ‘clip.js’
christophe@bespin:~/Downloads/dojo/gweather$ ls
form.ui gweather.cpp gweather.pro gweather.qrc jquery.min.js Makefile
christophe@bespin:~/Downloads/dojo/gweather$ cat gweather.qrc
jquery.min.js
clip.js
Actually that file is not need, you can remove it from gweather.qrc. Sorry for the trouble. I am pushing the fix, it may take a while until it appears in the public repository.
I’d have rather seen it done NOT using WebKit. WebKit is huge. I prefer lightweight. Is there any reason why you can’t just use QNetworkAccessManager, your xmlpatterns, and be done with it?
What does the BBC Oslo Weather have to do with anything? I know I can find any information on Google, but if I wanted the Oslo weather, I’d go to yr.no. It’s even shorter to type.
@Scorp1us: You miss the point. There are gazillions different ways to do this without QtWebKit. But this is an example of (ab)using QtWebKit to implement visual web scraping.
Update to my comment above:
Turns out that the “weather in Oslo” feature of Google only works if your Google settings are configured for English. My main browser (Konqueror) is configured to Portuguese, so I’d have to type “tempo em Oslo”. The other four browsers I tried (Arora, Firefox, Opera, Lynx) did not have any Google cookie set, so Google defaulted to Norwegian. In that case, I’d have to type “vær i Oslo”
Try it:
http://www.google.com/search?hl=no&q=v%C3%A6r+i+oslo
http://www.google.com/search?hl=pt-BR&q=tempo+em+oslo
http://www.google.com/search?hl=en&q=weather+in+oslo
Oh, no I got the point. I just didn’t appreciate it! lol. Looking at the source of the page, I can see that it is all javascript, so I see that “visual scraping” does have its place!
Good stuff. I never knew it could be so easy to extract information from web sites using Qt. Using these techniques, I am now able to go back to a personal project that was using Python and recode it in Qt, so that it can be incorporated into one application, instead of being implemented as several smaller scripts. Thanks for the post!
I see in your code
http://qt.gitorious.org/qt-labs/graphics-dojo/blobs/master/gweather/gweather.cpp#line98
that you use some Javascript magic I never heard of.
I had thought that there was no way to find out where an element was rendered using QWebView, but it turns out there’s a way to do it in Javascript! Can you recommend a good reference for the set of Javascript tricks useful for figuring out what’s where in a web page in a QWebView?
When I Google outerWidth, for example, which you use in this weather example, the references seem to think it only applies to windows, but you clearly use it on an element.
Thanks!
@nathan: It’s jQuery, search for outerWidth in http://api.jquery.com/. Alternatively, for the upcoming Qt 4.6 we will use the brand-new QWebElement API (see http://labs.trolltech.com/blogs/2009/04/07/qwebelement-sees-the-light-do-i-hear-a-booyakasha/).
Why do I not see the images? I only get an image with a question mark.
Solved the images problem; the .js file was not accessible. I changed “QFile file(“:/jquery.min.js”);” to “QFile file(“./jquery.min.js”);”, copied the js file in the current directory and it worked.
Thanks for this nice example on a great framework.
I want to run this application behind a proxy server.
Can you please tell me the way for doing it? Is that
possible to do?
Thank you.
Comments on this entry are closed.