PyQt5 webkit browser

QWebview inside a browser
PyQt5 Webkit (QWebview) inside a browser
PyQt5 comes with a webkit webbrowser. Webkit is an open source web browser rendering engine that is used by Apple Safari and others. It was used in the older versions of Google Chrome, they have switched to the Blink rendering engine.

Related course:
Create Simple GUI Applications with Python and Qt

QWebView
The widget is called QWebView and webpages (HTML content) can be shown through this widget, local or live from the internet.

Download Example Code

Methods
The QWebView class comes with a lot of methods including:

  • back (self)
  • forward (self)
  • load (self, QUrl url)
  • reload (self)

More documentation on this class can be found on ics.uci.edu

#!/usr/bin/python
 
import PyQt5
from PyQt5.QtCore import QUrl 
from PyQt5.QtWidgets import QApplication, QWidget 
from PyQt5.QtWebKitWidgets import QWebView , QWebPage
from PyQt5.QtWebKit import QWebSettings
from PyQt5.QtNetwork import *
import sys
from optparse import OptionParser
 
 
class MyBrowser(QWebPage):
    ''' Settings for the browser.'''
 
    def userAgentForUrl(self, url):
        ''' Returns a User Agent that will be seen by the website. '''
        return "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36"
 
class Browser(QWebView):
    def __init__(self):
        # QWebView
        self.view = QWebView.__init__(self)
        #self.view.setPage(MyBrowser())
        self.setWindowTitle('Loading...')
        self.titleChanged.connect(self.adjustTitle)
        #super(Browser).connect(self.ui.webView,QtCore.SIGNAL("titleChanged (const QString&)"), self.adjustTitle)
 
    def load(self,url):  
        self.setUrl(QUrl(url)) 
 
    def adjustTitle(self):
        self.setWindowTitle(self.title())
 
    def disableJS(self):
        settings = QWebSettings.globalSettings()
        settings.setAttribute(QWebSettings.JavascriptEnabled, False)
 
 
 
app = QApplication(sys.argv) 
view = Browser()
view.showMaximized()
view.load("https://pythonspot.com")
app.exec_()

Python Web Development

Introduction

pythonQuote

Web apps are often created using a framework. Frameworks make it easier to develop web apps that are scalable, reliable and maintainable. It avoids recreating the same code over and over again.
Common features are:

  • URL Routing
  • Output templates
  • Database management
  • Session management
  • Security against common attacks

A framework may offer some or all of these features.

For example, the Flask web application framework does not have database support and you would need a separate module to use a database.  The Django web application framework supports databases by default.

Why use a web framework?

As you are doing web development, you want to avoid spending time on programming things that have already been solved. On the other hand, if you are an experienced web developer a web framework may not offer everything you need.

What Python web frameworks exist?

Django and Flask are the most popular web frameworks. However, you may want to evaluate the frameworks. An overview:

The most popular python web application framework is Django, followed by Flask.

python web development
# of projects on Github mentioning a framework.

Django

Django is the most used Python web framework. It takes care of many things so you can focus on the web app development. Sites built withDjango have dealt with high traffic spikes such as 50 thousands hits per second.  

Database access is achieved through an Object-relational mapper:   You define your data models in Python and Django deals with the actual database management systems (SQL).  However, if  you need to you can write your own SQL Queries with Django.  URL routing is supported by Django. It encourages beautiful URL design such as ending without .php or .asp.

Features:

  • Object-relational mapper
  • URLs routing and views
  • Template engine
  • Forms
  • Authentication
  • Admin
  • Internationalization
  • Security

If you want to know more about Django, read here.

Did you know the websites of NASA,  Bitbucket and Pinterest were made with Django?

Flask

flask-logo
Flask is a Python micro framework which is modular by design. The framework is intended to build web apps. Flask does not have a  specific database system or ORM system.  If you want to use a database, you’ll have to use extensions. Flask is often combined with SQLAlchemy for database use.

Flask is very easy to get running, a minimal app would be:

from flask import Flask
app = Flask(__name__)
 
@app.route('/')
def hello_world():
    return 'Hello World!'
 
if __name__ == '__main__':
    app.run()

The framework supports URL routing, template (using Jinja2), session management and has some out of the box security.

Features:

  • URL Routing and views
  • Template engine
  • Session management
  • Logging

If you want to know more about Flask, read here.

Did you know Flask started as an April Fools joke?

Python Hosting

To run your app on the web, you will need hosting. Unless you want to do hosting yourself, you need a party to host.
Hosting servers:

Flask with static html files

You can use the Flask framework and use static files together.

Flask will give you URL routing, many features and all the Python benefits.

You may want an application that is partly dynamic and partly static. Or you may simply want to browse with URL routing. In this article we will teach you how to load static HTML files with Flask.

Related course
Complete Python Web Course: Build 8 Python Web Apps

Flask static files example

Create a file called app.py with this contents:

from flask import Flask, render_template
 
app = Flask(__name__)
 
@app.route('/<string:page_name>/')
def render_static(page_name):
    return render_template('%s.html' % page_name)
 
if __name__ == '__main__':
    app.run()

This application initializes a Flask app with the method:

app.run()

The app creates an URL route for any possible page and links that to static html files with:

@app.route('/<string:page_name>/')
def render_static(page_name):
    return render_template('%s.html' % page_name)

Create a directory /templates/ and add the file hello.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title>Hello World Template</title>
</head>
<body>
Hello World
</body>
</html>

Start the server with:

$ python app.py 
* Running on http://127.0.0.1:5000/

Then any .html file is accesible using URL routing.

For example the static file hello.html can be accessed using http://127.0.0.1:5000/hello. You can store any css file in the /static/ directory.

Download Flask Examples

JSON encoding and decoding with Python

Introduction
JSON (JavaScript Object Notation) is frequently used between a server and a web application. An example of JSON data:

{
    "persons": [
        {
            "city": "Seattle", 
            "name": "Brian"
        }, 
        {
            "city": "Amsterdam", 
            "name": "David"
        }
    ]
}

The json module enables you to convert between JSON and Python Objects.

JSON conversion examples

Convert JSON to Python Object (Dict)
To convert JSON to a Python dict use this:

import json
 
json_data = '{"name": "Brian", "city": "Seattle"}'
python_obj = json.loads(json_data)
print python_obj["name"]
print python_obj["city"]

Convert JSON to Python Object (List)
JSON data can be directly mapped to a Python list.

import json
 
array = '{"drinks": ["coffee", "tea", "water"]}'
data = json.loads(array)
 
for element in data['drinks']:
    print element

Convert JSON to Python Object (float)
Floating points can be mapped using the decimal library.

import json
from decimal import Decimal
 
jsondata = '{"number": 1.573937639}'
 
x = json.loads(jsondata, parse_float=Decimal)
print x['number']

Convert JSON to Python Object (Example)
JSON data often holds multiple objects, an example of how to use that below:

import json
 
json_input = '{"persons": [{"name": "Brian", "city": "Seattle"}, {"name": "David", "city": "Amsterdam"} ] }'
 
try:
    decoded = json.loads(json_input)
 
    # Access data
    for x in decoded['persons']:
        print x['name']
 
except (ValueError, KeyError, TypeError):
    print "JSON format error"

Convert Python Object (Dict) to JSON
If you want to convert a Python Object to JSON use the json.dumps() method.

import json
from decimal import Decimal
 
d = {}
d["Name"] = "Luke"
d["Country"] = "Canada"
 
print json.dumps(d, ensure_ascii=False)
# result {"Country": "Canada", "Name": "Luke"}

Converting JSON data to Python objects 
JSON data can be converted (deserialized) to Pyhon objects using the json.loads() function.  A table of the mapping:

JSON Python
object dict
array list
string str
number (int) int
number (real) float
true True
false False
null None

Pretty printing

If you want to display JSON data you can use the json.dumps() function.

import json
 
json_data = '{"name": "Brian", "city": "Seattle"}'
python_obj = json.loads(json_data)
print json.dumps(python_obj, sort_keys=True, indent=4)

More
Google Charts with JSON data

Creating a web-browser with Python and PyQT

Python browser PyQt4
Python browser with PyQt4

In this tutorial we will build a webbrowser with Python. We will use the PyQT library which has a web component.  In this tutorial you will learn how to link all the components together. We will use the default rendering engine and not roll one in this tutorial.

If you have not done our pyqt4 beginner tutorial, you could try it. If python-kde4 cannot be found update your repository to find it. The Ubuntu or Debian install guide .

Related course:
Create Simple GUI Applications with Python and Qt

PyQt installation

Install the required packages:

sudo pip install python-qt4
sudo apt-get install qt4-designer
sudo apt-get install pyqt4-dev-tools
sudo apt-get install python-kde4

Creating the GUI with PyQT

Start qt4-designer from your applications menu. The QT Designer application will appear:

QT_Designer
QT_Designer

Select Main Window and press Create. We now have our designer window open.  Drag a KWebView component on the window. If you have a QtWebView in the component list. use that instead. We also add an Line Edit on top. Press File > Save As > browser.ui.  Run the command:

pyuic4 browser.ui > browser.py

This will generate a Python file. Remove the line “from kwebview import KWebView” from the bottom of the browser.py file. Change KWebView to QtWebView. We want to use QtWebView instead. If you are lazy to change that, take the browser.py file from below.

QWebView exploration

Create a file called run.py with this contents:

import sys
from browser import BrowserDialog
from PyQt4 import QtCore, QtGui
from PyQt4.QtCore import QUrl
from PyQt4.QtWebKit import QWebView
 
class MyBrowser(QtGui.QDialog):
    def __init__(self, parent=None):
        QtGui.QWidget.__init__(self, parent)
        QWebView.__init__(self)
        self.ui = BrowserDialog()
        self.ui.setupUi(self)
        self.ui.lineEdit.returnPressed.connect(self.loadURL)
 
    def loadURL(self):
        url = self.ui.lineEdit.text()
        self.ui.qwebview.load(QUrl(url))
        self.show()  
        #self.ui.lineEdit.setText("")
 
if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    myapp = MyBrowser()
    myapp.ui.qwebview.load(QUrl('http://www.pythonspot.com'))
    myapp.show()
    sys.exit(app.exec_())

This code will use the UI as defined in browser.py and add logic to it. The lines

 self.ui.lineEdit.returnPressed.connect(self.loadURL)
 
    def loadURL(self):
        url = self.ui.lineEdit.text()
        self.ui.qwebview.load(QUrl(url))
        self.show()  
        #self.ui.lineEdit.setText("")

The first line defines the callback or event. If a person presses enter (returnPressed), it will call the function loadURL. It makes sure that once you press enter, the page is loaded with that function. If you did everything correctly, you should be able to run the browser with the command:

python run.py

Please make sure you type the full url, e.g.  : http://pythonspot.com including the http:// part.  Your browser should now start:

Python browser
Python browser

If your code does not run, please use the codes below (or look at the differences and change whats wrong):

browser.py

# -*- coding: utf-8 -*-
 
# Form implementation generated from reading ui file 'browser.ui'
#
# Created: Fri Jan 30 20:49:32 2015
#      by: PyQt4 UI code generator 4.10.4
#
# WARNING! All changes made in this file will be lost!
 
import sys
from PyQt4 import QtCore, QtGui
from PyQt4.QtGui import QApplication
from PyQt4.QtCore import QUrl
from PyQt4.QtWebKit import QWebView
 
try:
    _fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
    def _fromUtf8(s):
        return s
 
try:
    _encoding = QtGui.QApplication.UnicodeUTF8
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig, _encoding)
except AttributeError:
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig)
 
class BrowserDialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName(_fromUtf8("Dialog"))
        Dialog.resize(1024, 768)
        self.qwebview = QWebView(Dialog)
        self.qwebview.setGeometry(QtCore.QRect(0, 50, 1020, 711))
        self.qwebview.setObjectName(_fromUtf8("kwebview"))
        self.lineEdit = QtGui.QLineEdit(Dialog)
        self.lineEdit.setGeometry(QtCore.QRect(10, 20, 1000, 25))
        self.lineEdit.setObjectName(_fromUtf8("lineEdit"))
 
        self.retranslateUi(Dialog)
        QtCore.QMetaObject.connectSlotsByName(Dialog)
 
    def retranslateUi(self, Dialog):
        Dialog.setWindowTitle(_translate("Browser", "Browser", None))

run.py

import sys
from browser import BrowserDialog
from PyQt4 import QtCore, QtGui
from PyQt4.QtCore import QUrl
from PyQt4.QtWebKit import QWebView
 
class MyBrowser(QtGui.QDialog):
    def __init__(self, parent=None):
        QtGui.QWidget.__init__(self, parent)
        QWebView.__init__(self)
        self.ui = BrowserDialog()
        self.ui.setupUi(self)
        self.ui.lineEdit.returnPressed.connect(self.loadURL)
 
    def loadURL(self):
        url = self.ui.lineEdit.text()
        self.ui.qwebview.load(QUrl(url))
        self.show()  
        #self.ui.lineEdit.setText("")
 
if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    myapp = MyBrowser()
    myapp.ui.qwebview.load(QUrl('http://www.pythonspot.com'))
    myapp.show()
    sys.exit(app.exec_())

Download PyQT Code (Bulk Collection)