ค้นหาเว็บไซต์

สร้างแอปพลิเคชัน 'เว็บเบราว์เซอร์' และ 'เครื่องบันทึกเดสก์ท็อป' ของคุณเองโดยใช้ PyGobject - ตอนที่ 3


นี่เป็นส่วนที่ ที่ 3 ของซีรีส์เกี่ยวกับการสร้างแอปพลิเคชัน GUI ภายใต้เดสก์ท็อป Linux โดยใช้ PyGObject วันนี้เราจะพูดถึงการใช้โมดูลและไลบรารี Python ขั้นสูงในโปรแกรมของเรา เช่น 'os', 'WebKit', 'requests' และ อื่นๆ นอกเหนือจากข้อมูลที่เป็นประโยชน์อื่นๆ สำหรับการเขียนโปรแกรม

ความต้องการ

คุณต้องอ่านส่วนก่อนหน้าทั้งหมดของซีรีส์จากที่นี่ เพื่อทำตามคำแนะนำเพิ่มเติมเกี่ยวกับการสร้างแอปพลิเคชันขั้นสูงเพิ่มเติม:

  1. สร้างแอปพลิเคชัน GUI ภายใต้ Linux Desktop โดยใช้ PyGObject - ตอนที่ 1
  2. การสร้างแอปพลิเคชัน PyGobject ขั้นสูงบน Linux - ตอนที่ 2

โมดูลและไลบรารี่ใน Python มีประโยชน์มาก แทนที่จะต้องเขียนโปรแกรมย่อยหลายๆ โปรแกรมเพื่อทำงานที่ซับซ้อนซึ่งจะต้องใช้เวลาและงานมาก คุณสามารถนำเข้ามันได้เลย ! ใช่ เพียงนำเข้าโมดูลและไลบรารีที่คุณต้องการไปยังโปรแกรมของคุณ และคุณจะสามารถประหยัดเวลาและความพยายามได้มากในการทำให้โปรแกรมของคุณเสร็จสมบูรณ์

มีโมดูลที่มีชื่อเสียงมากมายสำหรับ Python ซึ่งคุณสามารถพบได้ที่ Python Module Index

คุณสามารถนำเข้าไลบรารีสำหรับโปรแกรม Python ของคุณได้เช่นกัน จาก “gi.repository import Gtk ” บรรทัดนี้จะนำเข้าไลบรารี GTK ลงในโปรแกรม Python และมีไลบรารีอื่นๆ อีกมากมายเช่น Gdk, WebKit.. เป็นต้น

การสร้างแอปพลิเคชัน GUI ขั้นสูง

วันนี้เราจะสร้าง 2 โปรแกรม:

  1. เว็บเบราว์เซอร์ที่เรียบง่าย ซึ่งจะใช้ไลบรารี WebKit
  2. เครื่องบันทึกเดสก์ท็อปโดยใช้คำสั่ง 'avconv' ซึ่งจะใช้โมดูล 'os' จาก Python

ฉันจะไม่อธิบายวิธีการลากและวางวิดเจ็ตในตัวออกแบบ Glade นับจากนี้ไป ฉันจะบอกชื่อวิดเจ็ตที่คุณต้องการสร้าง นอกจากนี้ ฉันจะให้ .glade สำหรับแต่ละโปรแกรม และไฟล์ Python อย่างแน่นอน

การสร้างเว็บเบราว์เซอร์อย่างง่าย

ในการสร้างเว็บเบราว์เซอร์ เราจะต้องใช้เครื่องมือ “WebKit ” ซึ่งเป็นเครื่องมือแสดงผลแบบโอเพ่นซอร์สสำหรับเว็บ ซึ่งเป็นเครื่องมือเดียวกับที่ใช้ใน Chrome/Chromium สำหรับข้อมูลเพิ่มเติม โปรดดูที่เว็บไซต์อย่างเป็นทางการของ Webkit.org

ขั้นแรก เราจะต้องสร้าง GUI เปิดตัวออกแบบ Glade และเพิ่มวิดเจ็ตต่อไปนี้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีสร้างวิดเจ็ต โปรดติดตาม ส่วนที่ 1 และ ส่วนที่ 2 ของซีรี่ส์นี้ (ลิงก์ที่ให้ไว้ด้านบน)

  1. สร้างวิดเจ็ต 'window1'
  2. สร้างวิดเจ็ต 'box1' และ 'box2'
  3. สร้างวิดเจ็ต 'button1' และ 'button2'
  4. สร้างวิดเจ็ต 'entry1'
  5. สร้างวิดเจ็ต 'scrolledwindow1'

หลังจากสร้างวิดเจ็ตแล้ว คุณจะได้รับอินเทอร์เฟซดังต่อไปนี้

ไม่มีอะไรใหม่ ยกเว้นวิดเจ็ต “หน้าต่างแบบเลื่อน ” วิดเจ็ตนี้มีความสำคัญเพื่อให้สามารถฝังเอ็นจิ้น WebKit ไว้ข้างในได้ การใช้วิดเจ็ต “หน้าต่างแบบเลื่อน จะทำให้คุณสามารถเลื่อนในแนวนอนและแนวตั้งได้ในขณะที่คุณ เรียกดูเว็บไซต์

ตอนนี้คุณจะต้องเพิ่มตัวจัดการ “backbutton_clicked ” ให้กับปุ่ม ย้อนกลับคลิกแล้ว ” สัญญาณ “refreshbutton_clicked ” ตัวจัดการของปุ่มรีเฟรช “สัญญาณคลิก” และตัวจัดการ “enterkey_clicked ” ตัวจัดการของสัญญาณ “เปิดใช้งานแล้ว ” สำหรับรายการ

ไฟล์ .glade ที่สมบูรณ์สำหรับอินเทอร์เฟซอยู่ที่นี่

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.16.1 -->
<interface>
  <requires lib="gtk+" version="3.10"/>
  <object class="GtkWindow" id="window1">
    <property name="can_focus">False</property>
    <property name="title" translatable="yes">Our Simple Browser</property>
    <property name="window_position">center</property>
    <property name="default_width">1000</property>
    <property name="default_height">600</property>
    <property name="icon_name">applications-internet</property>
    <child>
      <object class="GtkBox" id="box1">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkBox" id="box2">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <child>
              <object class="GtkButton" id="button1">
                <property name="label">gtk-go-back</property>
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
                <property name="relief">half</property>
                <property name="use_stock">True</property>
                <property name="always_show_image">True</property>
                <signal name="clicked" handler="backbutton_clicked" swapped="no"/>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">True</property>
                <property name="position">0</property>
              </packing>
            </child>
            <child>
              <object class="GtkButton" id="button2">
                <property name="label">gtk-refresh</property>
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
                <property name="relief">half</property>
                <property name="use_stock">True</property>
                <property name="always_show_image">True</property>
                <signal name="clicked" handler="refreshbutton_clicked" swapped="no"/>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">True</property>
                <property name="position">1</property>
              </packing>
            </child>
            <child>
              <object class="GtkEntry" id="entry1">
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <signal name="activate" handler="enterkey_clicked" swapped="no"/>
              </object>
              <packing>
                <property name="expand">True</property>
                <property name="fill">True</property>
                <property name="position">2</property>
              </packing>
            </child>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkScrolledWindow" id="scrolledwindow1">
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="hscrollbar_policy">always</property>
            <property name="shadow_type">in</property>
            <child>
              <placeholder/>
            </child>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>

ตอนนี้คัดลอกโค้ดด้านบนและวางลงในไฟล์ “ui.glade ” ในโฟลเดอร์หลักของคุณ ตอนนี้สร้างไฟล์ใหม่ชื่อ “mywebbrowser.py ” และป้อนโค้ดต่อไปนี้ข้างใน คำอธิบายทั้งหมดอยู่ในความคิดเห็น

#!/usr/bin/python 
-*- coding: utf-8 -*- 

## Here we imported both Gtk library and the WebKit engine. 
from gi.repository import Gtk, WebKit 

class Handler: 
  
  def backbutton_clicked(self, button): 
  ## When the user clicks on the Back button, the '.go_back()' method is activated, which will send the user to the previous page automatically, this method is part from the WebKit engine. 
    browserholder.go_back() 

  def refreshbutton_clicked(self, button): 
  ## Same thing here, the '.reload()' method is activated when the 'Refresh' button is clicked. 
    browserholder.reload() 
    
  def enterkey_clicked(self, button): 
  ## To load the URL automatically when the "Enter" key is hit from the keyboard while focusing on the entry box, we have to use the '.load_uri()' method and grab the URL from the entry box. 
    browserholder.load_uri(urlentry.get_text()) 
    
## Nothing new here.. We just imported the 'ui.glade' file. 
builder = Gtk.Builder() 
builder.add_from_file("ui.glade") 
builder.connect_signals(Handler()) 

window = builder.get_object("window1") 

## Here's the new part.. We created a global object called 'browserholder' which will contain the WebKit rendering engine, and we set it to 'WebKit.WebView()' which is the default thing to do if you want to add a WebKit engine to your program. 
browserholder = WebKit.WebView() 

## To disallow editing the webpage. 
browserholder.set_editable(False) 

## The default URL to be loaded, we used the 'load_uri()' method. 
browserholder.load_uri("https://linux-console.net") 

urlentry = builder.get_object("entry1") 
urlentry.set_text("https://linux-console.net") 

## Here we imported the scrolledwindow1 object from the ui.glade file. 
scrolled_window = builder.get_object("scrolledwindow1") 

## We used the '.add()' method to add the 'browserholder' object to the scrolled window, which contains our WebKit browser. 
scrolled_window.add(browserholder) 

## And finally, we showed the 'browserholder' object using the '.show()' method. 
browserholder.show() 
 
## Give that developer a cookie ! 
window.connect("delete-event", Gtk.main_quit) 
window.show_all() 
Gtk.main()

บันทึกไฟล์และเรียกใช้

chmod 755 mywebbrowser.py
./mywebbrowser.py

และนี่คือสิ่งที่คุณจะได้รับ

คุณอาจอ้างอิงเอกสารอย่างเป็นทางการของ WebKitGtk เพื่อค้นหาตัวเลือกเพิ่มเติม

การสร้างเครื่องบันทึกเดสก์ท็อปอย่างง่าย

ในส่วนนี้ เราจะเรียนรู้วิธีเรียกใช้คำสั่งระบบภายในเครื่องหรือเชลล์สคริปต์จากไฟล์ Python โดยใช้โมดูล 'os' ซึ่งจะช่วยให้เราสร้างเครื่องบันทึกหน้าจออย่างง่ายสำหรับเดสก์ท็อปโดยใช้ คำสั่ง 'avconv'

เปิดตัวออกแบบ Glade และสร้างวิดเจ็ตต่อไปนี้:

  1. สร้างวิดเจ็ต 'window1'
  2. สร้างวิดเจ็ต 'box1'
  3. สร้างวิดเจ็ต 'button1', 'button2' และ 'button3'
  4. สร้างวิดเจ็ต 'entry1'

หลังจากสร้างวิดเจ็ตดังกล่าวแล้ว คุณจะพบกับอินเทอร์เฟซด้านล่าง

นี่คือไฟล์ ui.glade ที่สมบูรณ์

<?xml version="1.0" encoding="UTF-8"?> 
<!-- Generated with glade 3.16.1 --> 
<interface> 
  <requires lib="gtk+" version="3.10"/> 
  <object class="GtkWindow" id="window1"> 
    <property name="can_focus">False</property> 
    <property name="title" translatable="yes">Our Simple Recorder</property> 
    <property name="window_position">center</property> 
    <property name="default_width">300</property> 
    <property name="default_height">30</property> 
    <property name="icon_name">applications-multimedia</property> 
    <child> 
      <object class="GtkBox" id="box1"> 
        <property name="visible">True</property> 
        <property name="can_focus">False</property> 
        <child> 
          <object class="GtkEntry" id="entry1"> 
            <property name="visible">True</property> 
            <property name="can_focus">True</property> 
          </object> 
          <packing> 
            <property name="expand">False</property> 
            <property name="fill">True</property> 
            <property name="position">0</property> 
          </packing> 
        </child> 
        <child> 
          <object class="GtkButton" id="button1"> 
            <property name="label">gtk-media-record</property> 
            <property name="visible">True</property> 
            <property name="can_focus">True</property> 
            <property name="receives_default">True</property> 
            <property name="use_stock">True</property> 
            <property name="always_show_image">True</property> 
            <signal name="clicked" handler="recordbutton" swapped="no"/> 
          </object> 
          <packing> 
            <property name="expand">True</property> 
            <property name="fill">True</property> 
            <property name="position">1</property> 
          </packing> 
        </child> 
        <child> 
          <object class="GtkButton" id="button2"> 
            <property name="label">gtk-media-stop</property> 
            <property name="visible">True</property> 
            <property name="can_focus">True</property> 
            <property name="receives_default">True</property> 
            <property name="use_stock">True</property> 
            <property name="always_show_image">True</property> 
            <signal name="clicked" handler="stopbutton" swapped="no"/> 
          </object> 
          <packing> 
            <property name="expand">True</property> 
            <property name="fill">True</property> 
            <property name="position">2</property> 
          </packing> 
        </child> 
        <child> 
          <object class="GtkButton" id="button3"> 
            <property name="label">gtk-media-play</property> 
            <property name="visible">True</property> 
            <property name="can_focus">True</property> 
            <property name="receives_default">True</property> 
            <property name="use_stock">True</property> 
            <property name="always_show_image">True</property> 
            <signal name="clicked" handler="playbutton" swapped="no"/> 
          </object> 
          <packing> 
            <property name="expand">True</property> 
            <property name="fill">True</property> 
            <property name="position">3</property> 
          </packing> 
        </child> 
      </object> 
    </child> 
  </object> 
</interface>

ตามปกติ ให้คัดลอกโค้ดด้านบนและวางลงในไฟล์ “ui.glade ” ในโฮมไดเร็กตอรี่ของคุณ สร้างไฟล์ “myrecorder.py ” ใหม่ แล้วป้อนข้อมูลต่อไปนี้ รหัสข้างใน (อธิบายทุกบรรทัดใหม่ในความคิดเห็น)

#!/usr/bin/python 
-*- coding: utf-8 -*- 

## Here we imported both Gtk library and the os module. 
from gi.repository import Gtk 
import os 
        
class Handler: 
  def recordbutton(self, button): 
    ## We defined a variable: 'filepathandname', we assigned the bash local variable '$HOME' to it + "/" + the file name from the text entry box. 
    filepathandname = os.environ["HOME"] + "/" + entry.get_text() 
    
    ## Here exported the 'filepathandname' variable from Python to the 'filename' variable in the shell. 
    os.environ["filename"] = filepathandname 
    
    ## Using 'os.system(COMMAND)' we can execute any shell command or shell script, here we executed the 'avconv' command to record the desktop video & audio. 
    os.system("avconv -f x11grab -r 25 -s `xdpyinfo | grep 'dimensions:'|awk '{print $2}'` -i :0.0 -vcodec libx264 -threads 4 $filename -y & ") 
    
    
  def stopbutton(self, button): 
    ## Run the 'killall avconv' command when the stop button is clicked. 
    os.system("killall avconv") 
    
  def playbutton(self, button): 
  ## Run the 'avplay' command in the shell to play the recorded file when the play button is clicked. 
    os.system("avplay $filename &") 
    
    
## Nothing new here.. We just imported the 'ui.glade' file. 
builder = Gtk.Builder() 
builder.add_from_file("ui.glade") 
builder.connect_signals(Handler()) 

window = builder.get_object("window1") 
entry = builder.get_object("entry1") 
entry.set_text("myrecording-file.avi") 

## Give that developer a cookie ! 
window.connect("delete-event", Gtk.main_quit) 
window.show_all() 
Gtk.main()

ตอนนี้รันไฟล์โดยใช้คำสั่งต่อไปนี้ในเทอร์มินัล

chmod 755 myrecorder.py
./myrecorder.py

และคุณมีเครื่องบันทึกเดสก์ท็อปเครื่องแรก

คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับโมดูล 'os' ได้ที่ Python OS Library

เพียงเท่านี้ การสร้างแอปพลิเคชันสำหรับเดสก์ท็อป Linux ไม่ใช่เรื่องยากโดยใช้ PyGObject คุณเพียงแค่ต้องสร้าง GUI นำเข้าโมดูลบางส่วน และเชื่อมโยงไฟล์ Python กับ GUI ไม่มีอะไรมาก ไม่มีอะไรน้อยไปกว่านั้น มีบทช่วยสอนที่เป็นประโยชน์มากมายเกี่ยวกับการทำเช่นนี้ในเว็บไซต์ PyGObject:

คุณได้ลองสร้างแอปพลิเคชันโดยใช้ PyGObject แล้วหรือยัง? คุณคิดอย่างไรเกี่ยวกับการทำเช่นนั้น? คุณเคยพัฒนาแอปพลิเคชันใดบ้างมาก่อน