Sunday, March 29, 2009

a webkit-based web browser part II


yup! it's my web browser part II! I was thinking about iphone browser features and how to make a browser like it. It's for small devices, not like a normal firefox one. The screen is smaller, without a fully functional keyboard, and probably user only use fingers. I saw a video from Apple iphone website and found their nice features. Eg.'zoom-in, zoom-out', 'finger scrolling', 'vertical & horizontal placing', and a easy bookmark menu!

A. finger scrolling:
i found a very cool article in Qt blog and Ariya Hidayat implemented a Flick Charm example. Also, Akos Polster updated it to a python version. They save all my work. Only few lines, then i can see this beauty. User needn't use mouse wheel to scroll pages and can scroll/drag page by mouse gestures. If it's a touch screen, then it would be user fingers. You can check ariya's video in youtube.


WebBrowser = QtWebKit.QWebView(Frame3)
charm = FlickCharm()
charm.activateOn(WebBrowser)

B. Text zoom-in & zoom-out:
I put 3 zooming buttons on the tool bar and also make hot keys. User can zoom-in, zoom-out, zoom to fit-in page by clicking a button.


def on_actionZoomIn_triggered(self):
current = self.WebBrowser.textSizeMultiplier()
self.WebBrowser.setTextSizeMultiplier(current+0.1)

C. Full page zooming:
There is another zooming function and it can zoom-in the whole web page (including images and fonts). I use a MouseDoubleClick event to set the page view to 0.5 or 1.0. When user read a web page, they can use this function to see a thumbnail image.


def mouseDoubleClickEvent(self,mouseEvent):
if self.zoomFactor() == 1.0:
self.setZoomFactor(0.5)
else:
self.setZoomFactor(1.0)
QtWebKit.QWebView.mouseDoubleClickEvent(self,mouseEvent)



D. bookmark menu:
I made 2 buttons on tool bar. One is to show bookmark list and the other one is to add the current page to a bookmark. User can click one bookmark in list and load it in browser. Also, user can double-click to delete a bookmark. I use python-sqlite to store bookmark data to a db.

I have to distinguish MousePressEvent and MouseDoubleClickEvent, since they have different meaning in my design. I use a timer, when I get a MousePressEvent. It would load a bookmark page after 300 millisecond. Also, if we get a double-clicked event, it would stop that timer. Then, I can know it's to delete a bookmark, not to load it.

E. enable plug-in: (Flash player)
I just found that i cannot see video in YouTube website from Qt version 4.4. Therefore, I have to upgrade it to version 4.5, even PyQt 4.5 is still development snapshots. Qt4.5 new feature: Netscape plug in (NPAPI) support, enabling you to to incorporate Flash™ content in your Qt applications. :)

*download & install Qt4.5

wget http://dist.trolltech.com/developer/download/qt-embedded-linux-eval-src-4.5.0.tar.gz
tar zxvf qt-x11-eval-src-4.5.0.tar.gz
cd qt-x11-eval-src-4.5.0/
./configure & make & sudo make install

*install sip 4.8 and pyqt4.5 (Development Snapshots!!)

wget http://www.riverbankcomputing.co.uk/static/Downloads/sip4/sip-4.8-snapshot-20090327.tar.gz
tar zxvf sip-4.8-snapshot-20090327.tar.gz
cd sip-4.8-snapshot-20090327
python configure.py
make & make install

wget http://www.riverbankcomputing.co.uk/static/Downloads/PyQt4/PyQt-x11-gpl-4.5-snapshot-20090328.tar.gz
tar zxvf PyQt-x11-gpl-4.5-snapshot-20090328.tar.gz
cd PyQt-x11-gpl-4.5-snapshot-20090328
python configure.py --qmake=/usr/local/Trolltech/Qt-4.5.0/bin/qmake
make & make install

Put one more line!

web = QtWebKit.QWebView()
web.settings().setAttribute(QtWebKit.QWebSettings.PluginsEnabled,True)

DONE! I can watch a video from my tiny pyqt browser. The complete source code are here.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.