Skip to main content

Python Tkinter Webview dan Kivy Webview

python tkinter webview dan kivy webview

Kadang untuk hal tertentu kita membutuhkan untuk bisa menampilkan halaman website tertentu didalam aplikasi GUI yang kita buat. Pada pustaka python ada yang memang dibuat untuk tujuan itu, biasa disebut scraping. Pustaka PyForms dan PyWebview keduanya ini pada dasarnya dibuat untuk dapat menampilkan halaman website. Tapi bagaimana kalau kita ingin menampilkan halaman website pada aplikasi yang sudah ada dan dibuat dengan Tkinter. Apakah ada modul Python Tkinter Webview?

Dalam kasus ini kita sudah membuat aplikasi menggunakan pustaka Tkinter, dan ingin menambahkan fitur agar bisa menampilkan halaman webiste ke dalam aplikasi yang dibuat. Sedangkan pustaka ini sendiri apakah bisa menampilkan halaman html? mungkin ada cara agar kita bisa menampilkan halaman HTML dengan Tkinter. Mungkin saja sekarang sudah ada modul atau toolkit python tkinter webview.

Setelah melakukan penelusuran, saya menemukan modul bernama cefpython yang memungkinkan bisa menampilkan halaman HTML didalam aplikasi yang dibuat dengan Tkinter dan Kivy. Pada tulisan ini kita akan coba membuatnya, entah tepat atau tidak kalau saya menyebutnya dengan Python Tkinter Webview

Back to top

1) Python Tkinter Webview

Semakin saya suka dengan bahasa pemrograman python, kita bisa melakukan apa saja hal yang diinginkan. Termasuk ini, menampilkan halaman HTML pada aplikasi yang dibuat dengan Tkinter. Dan ini pertama kali saya akan mencobanya, dan belum tau apakah berhasil atau tidak. Bagaimana hasilnya mari kita coba praktikkan bersama, dan saya pun akan mencobanya pada Kivy setelah ini.

Pertama kita siapkan dulu virtualenv untuk Tkinter, kalau ada yang belum tau cara membuatnya boleh dibaca lagi Cara Membuat Virtual Environment. Setelah dibuat langsung diaktifkan, Ok

Kalau sudah siap, sekarang install kebutuhan yang diperlukan yaitu modul cefpython

Oh iya, saya akan mengulas sedikit tentang modul CEF Python. Modul ini adalah proyek open source yang dibuat oleh Czarek Tomczak pada tahun 2012. Merupakan binding python untuk embed chromium framework dan bisa juga disematkan pada banyak toolkit GUI diantaranya Tkinter, Kivy, PyGTK, Panda 3D, PyGame & PyOpenGL, PySide, dan PyQT.

Menggunakan CEF ini kita bisa memasukkan kontrol browser chromium yang telah mendukung HTML 5, untuk keperluan pengembangan aplikasi GUI berbasis HTML 5. Dan juga bisa menggantikan toolkit GUI standar seperti GTK, QT, dan wxWidget. Ini bisa digunakan untuk scraping web sebagai perayap (spider/crawler) atau jenis bot lainnya.

Ok, mari kita mulai persiapannya. Untuk CEF bisa diinstall pada python3 membutuhkan pip versi 8.1 keatas (Linux). Cara installnya sama seperti yang lainnya

pip3 install --upgrade pip setuptools
pip3 install cefpython3==66.0

Saya ingin menginstall CEF versi 66.0 saja. Bukan apa sih sebenarnya, sepertinya versi terakhir adalah 66.0 dan versi python yang didukung saat ini baru sampai python 3.7 64bit.

Kalau sudah selesai sekarang buat file py (saya menamainya dengan tk-webview.py) dan berikut kode programmnya

from cefpython3 import cefpython as cef
import ctypes

try:
    import tkinter as tk
except ImportError:
    import Tkinter as tk

import sys

class MyApp(tk.Frame):
    def link_url(self, url):
        sys.excepthook = cef.ExceptHook     # untuk menghentikan proses saat terjadi error
        cef.Initialize()
        cef.CreateBrowserSync(url=url, window_title='CEF Browser edikartono.com')
        cef.MessageLoop()
        cef.Shutdown()

    def main(self):
        self.mylabel = tk.Label(root, text='CEF Edi Kartono')
        self.mylabel.pack()
        v = tk.StringVar()
        v.set('https://edikartono.com')
        self.mylink = tk.Entry(root, textvariable=v)
        self.mylink.bind("<Return>", lambda x: self.link_url(self.mylink.get()))
        self.mylink.pack(side='top', fill='x')

    
    def __init__(self, master=None):
        tk.Frame.__init__(self, master)
        self.pack()
        self.main()

root = tk.Tk()
app = MyApp(master=None)
cef.Initialize()
app.mainloop()
root.destroy()

Dengan menggunakan kode di atas, pertama kali akan membuat satu jendela Tkinter dari main() yang ada input teks dengan value sudah di set https://edikartono.com kemudian saat ditekan enter maka akan muncul jendela baru lagi untuk membuka halaman dari https://edikartono.com.

Samapi disini program kita sudah berjalan, tapi belum sesuai dengan yang saya inginkan. Saya tidak ingin membuat jendela baru lagi saat membuka halaman website dimaksud. Karena tanpa fungsi main() sebenarnya sudah bisa digunakan untuk membuka halaman situs yang diinginkan dengan mengisi alamat tujuan.

Hanya dengan fungsi link_url() saja sudah bisa langsung membuka halaman situs dimaksud dengan memberikan nilai url pada cef.CreateBrowserSync(url='halama url disini', window_title='CEF Browser edikartono.com').

Karena ternyata Tkinter mainloop tidak bisa jalan berbarengan dengan CEF messageloop. Karena itu akan muncul jendela baru. Jadi kalau mau digunakan untuk membuka halaman website langsung saja gunakan CEF tanpa menggunakan Tkinter.

1.1) Python Webkit

Selanjutnya saya akan melakukan percobaan lainnya, dan masih ingin tetap bisa untuk membuka halaman situs pada aplikasi gui python yang saya buat.

Percobaan selanjutnya ini menggunakan webkit, tapi setelah mencari dokumentasi terbaru saya gagal menemukannya. Ada juga dokumentasi untuk macOS. Dan kalaupun ada itu sudah tidak bisa dipraktikkan lagi karena menggunakan Python versi 2.6 sedangkan python yang ingin saya gunakan adalah versi 3.7 ke atas. Pada python 3.7 saya masih bisa mengimport import webkit tanpa error, tapi module WebView tidak ada (mungkin ada yang belum diinstall.

Jadi, saya mencari alternatif lain

1.2) Webview

Menggunakan modul ini ternyata lumayan mudah juga, untuk menginstallnya menggunakan pip3 install webview, kalau ada error mungkin ada dependensi yang belum diinstall, misalnya GTK3 dan webkit2. Install dengan apt sudo apt-get install gtk+-3.0 webkit2gtk-4.0. Setelah itu buat kode programmnya seperti ini

import webview

w = webview.WebView(width=320, height=400, url='https://edikartono.com')
w.run()

Lalu coba jalankan dan berhasil membuka halaman website yang saya mau, meski ada warning tapi tetap berjalan sesuai harapan. Tapi ini tidak menggunakan Tkinter ya...

tkinter webview
Back to top

2) Kivy Webview

Kembali kepada CEF Python dan kali ini saya mencoba menggunakan framework Kivy, untuk menampilkan halaman web. Masih di virtualenv yang sama, jadi tidak perlu lagi install CEF Python, atau kalau mau membuat lingkungan virtual berbeda dari Tkinter juga tidak mengapa. Artinya membuat virtualenv yang baru. Dan tentu saja ditambah dengan install kivy, pip3 install kivy. Lalu tambahan lagi untuk menginstall garden.cefpython dengan perintah garden install cefpython. Bersiaplah untuk menunggu lama.

Ok, saya anggap kivy dan CEF Python sudah terinstall dengan baik. Dan mari kita coba membuat programnya. Ini adalah kode program yang saya gunakan, tapi masih ada error. Program berhasil menjalankan window (membuka window) tapi tidak muncul apa-apa hanya layar hitam saja.

import kivy
kivy.require('1.11.0')
from cefpython3 import cefpython
from kivy.app import App
from kivy.garden.cefpython import CefBrowser, cefpython

class MyApp(App):
    def build(self):
        return CefBrowser(start_url='https://edikartono.com')

if __name__ == '__main__':
    MyApp().run()

Entah apa masalahnya masih belum ketemu

Tulisan ini belum selesai

Back to top