David's Blog

How I will describe how to make a qt app that edits a yaml file.

By David Li on Fri, 21 July 2024

Qt is a cross-platform application development framework that is widely used for developing desktop, mobile, and embedded applications. It provides a comprehensive set of libraries and tools for building graphical user interfaces (GUIs), network and database connectivity, and other essential functionalities for application development. Qt is written in C++, but it also has bindings for other programming languages, such as Python and Java. It is developed by The Qt Company and was first released in 1995.

 import yaml
import sys
import os

from PyQt6.QtWidgets import QApplication, QMainWindow, QGridLayout, QLabel, QLineEdit, QTextEdit, QPushButton, QComboBox, QWidget, QVBoxLayout, QHBoxLayout, QListWidget, QMessageBox, QInputDialog, QFileDialog 

The above code is a Python script that imports several modules, including yaml, sys, and os. It also imports various classes and widgets from the PyQt6.QtWidgets module, which is part of the PyQt6 library for creating GUI applications.

The classes and widgets that are imported include QApplication, QMainWindow, QGridLayout, QLabel, QLineEdit, QTextEdit, QPushButton, QComboBox, QWidget, QVBoxLayout, QHBoxLayout, QListWidget, QMessageBox, QInputDialog, and QFileDialog. These are all used to create different elements of the GUI, such as labels, text boxes, buttons, and file dialogs.

Overall, this code sets up the basic framework for a GUI application that can be used to edit YAML files. The specific functionality of the application will depend on how these widgets are used and connected to the underlying data and YAML parsing code.

class YamlEditor(QMainWindow):

    def __init__(self, yaml_file):
        self.yaml_file = yaml_file 

The above code defines a class called YamlEditor that inherits from the QMainWindow class of PyQt6. The __init__ method of the class takes a yaml_file argument and initializes it as an instance variable.

This class can be used to create an instance of a YAML editor window, which can then be used to edit the contents of a YAML file. The yaml_file argument passed to the constructor can be used to specify the file that the editor should load initially.

Other methods can be added to the YamlEditor class to provide additional functionality, such as methods for parsing the YAML file and displaying its contents in the editor, or methods for saving the edited YAML back to the file. These methods can be connected to the various GUI elements created in the previous code block to provide a complete YAML editing application.

        # Create widgets
        self.prompt_label = QLabel("Prompt:")
        self.prompt_edit = QLineEdit(self.yaml_data["imageArgs"]["prompt"])
        self.tags_label = QLabel("Tags:")
        self.tags_edit = QLineEdit(", ".join(self.yaml_data["frontMatter"]["tags"]))
        self.title_label = QLabel("Title:")
        self.title_edit = QLineEdit(self.yaml_data["frontMatter"]["title"])
        self.description_label = QLabel("Description:")
        self.description_edit = QTextEdit(self.yaml_data["frontMatter"]["description"])
        self.sections_label = QLabel("Sections:")
        self.sections_list = QListWidget()
        # self.sections_list.addItems(self.yaml_data.get("sections", []))
        self.add_section_button = QPushButton("Add Section")
        self.remove_section_button = QPushButton("Remove Section")
        self.save_button = QPushButton("Save")

The above code creates various PyQt6 widgets that are used to display and edit the contents of a YAML file.

The widgets include:

  • QLabel objects, which are used to display text labels for the various fields in the YAML file.
  • QLineEdit objects, which are used to allow the user to edit simple text fields in the YAML file.
  • QTextEdit objects, which are used to allow the user to edit longer text fields in the YAML file.
  • QListWidget object, which is used to display and edit a list of items in the YAML file.
  • QPushButton objects, which are used to allow the user to interact with the application by triggering actions, such as adding or removing sections or saving changes.

These widgets are arranged in the GUI layout using various PyQt6 layout managers, such as QVBoxLayout, QHBoxLayout, and QGridLayout. This code sets up the basic structure of the YAML editor GUI, which can be further customized and connected to the underlying YAML parsing code to create a fully functional YAML editor application.

        # Connect signals


        # Set layout
        central_widget = QWidget()
        main_layout = QVBoxLayout()
        grid_layout = QGridLayout()
        grid_layout.addWidget(self.prompt_label, 0, 0)
        grid_layout.addWidget(self.prompt_edit, 0, 1)
        grid_layout.addWidget(self.tags_label, 1, 0)
        grid_layout.addWidget(self.tags_edit, 1, 1)
        grid_layout.addWidget(self.title_label, 2, 0)
        grid_layout.addWidget(self.title_edit, 2, 1)
        grid_layout.addWidget(self.description_label, 3, 0)
        grid_layout.addWidget(self.description_edit, 3, 1)
        buttons_layout = QHBoxLayout()
        # add another section for save button and load button
        bottom_buttons_layout = QHBoxLayout()

The above code connects various signals to the PyQt6 widgets that were created earlier.

The clicked signal of the QPushButton objects are connected to their respective callback methods using the connect method. Specifically, the add_section method is connected to the add_section_button, the remove_section method is connected to the remove_section_button, and the save_yaml method is connected to the save_button.

Additionally, the clicked signal of the load_button is connected to a method called external_yaml, which presumably loads an external YAML file into the editor.

The code then sets up the layout of the various PyQt6 widgets using layout managers. A QVBoxLayout is used as the main layout, with a QGridLayout used to arrange the various QLabel and QLineEdit widgets for the different YAML fields. The QListWidget object for sections is added to the main layout, along with QHBoxLayout objects to arrange the QPushButton objects for adding and removing sections.

Finally, another QHBoxLayout is added to the bottom of the main layout to hold the save_button and load_button objects.

    def set_values_from_yaml():
        # when the yaml file is loaded, set the values in the editor
    def external_yaml(self):
        # file_dialog.setNameFilter()
        file_dialog = QFileDialog.getOpenFileName(
            caption='Select a file',
            filter="YAML files (*.yaml *.yml)",
        filename, filter_name = file_dialog
        print("filename", filename)
        print("filter_name", filter_name)

        self.yaml_file = filename
        self.yaml_data = self.load_yaml()

    def load_yaml(self):
            with open(self.yaml_file, "r") as f:
                return yaml.safe_load(f)
        except FileNotFoundError:
            return {"imageArgs": {"prompt": ""}, "frontMatter": {"tags": [], "title": "", "description": ""}}

    def add_section(self):
        section, ok = QInputDialog.getText(self, "Add Section", "Enter section title:")
        if ok and section:

    def remove_section(self):
        current_row = self.sections_list.currentRow()
        if current_row != -1:

    def save_yaml(self):
        self.yaml_data["imageArgs"]["prompt"] = self.prompt_edit.text()
        self.yaml_data["frontMatter"]["tags"] = [tag.strip() for tag in self.tags_edit.text().split(",")]
        self.yaml_data["frontMatter"]["title"] = self.title_edit.text()
        self.yaml_data["frontMatter"]["description"] = self.description_edit.toPlainText()
        # save sections if they exist
        if self.sections_list.count() > 0:
            self.yaml_data["sections"] = [self.sections_list.item(i).text() for i in range(self.sections_list.count())]
        with open("data.yaml", "w") as f:
            yaml.dump(self.yaml_data, f)

        # Show a message box to indicate that the data has been saved
        msg_box = QMessageBox()
        msg_box.setText("Data has been saved.")

This is the implementation of several functions in the YamlEditor class that enable the user to load a YAML file, set the values of the widgets in the editor to the values in the YAML file, add and remove sections, and save the edited YAML file.

The external_yaml method opens a file dialog and prompts the user to select a YAML file. If a file is selected, the load_yaml method is called to load the YAML file and set the values of the widgets in the editor.

The load_yaml method attempts to open the specified YAML file and load its contents using yaml.safe_load. If the file does not exist, it returns a default YAML data structure.

The add_section method prompts the user to enter a section title and adds the title to the sections list widget.

The remove_section method removes the currently selected section from the sections list widget.

The save_yaml method saves the edited YAML data to a file named “data.yaml”. It sets the values of the YAML data to the current values of the widgets in the editor, including the prompt, tags, title, and description, as well as any sections that have been added. After saving the file, it displays a message box indicating that the data has been saved.

All of these methods are connected to the appropriate signals emitted by the widgets in the editor, such as button clicks, to ensure that the user’s changes are properly reflected in the editor and saved to the YAML file.

if __name__ == "__main__":
    app = QApplication(sys.argv)
    editor = YamlEditor("posts/chatgpt_chrome_extension.yml") 

It looks like you are creating an instance of the YamlEditor class with the YAML file posts/chatgpt_chrome_extension.yml. After creating the instance, you can call editor.show() to display the window and start the application event loop. Here’s an example:

`if __name__ == "__main__":
 app = QApplication(sys.argv)
 editor = YamlEditor("posts/chatgpt\_chrome\_extension.yml")

This will create the application, create the editor window with the specified YAML file, show the window, and start the event loop. The sys.exit() call ensures that the application exits cleanly when the event loop is exited.

Qt is an important framework because it provides a comprehensive set of tools for developing graphical user interfaces (GUIs) and cross-platform applications. It allows developers to write code once and deploy it on multiple platforms without having to rewrite the code for each platform. This saves a lot of time and effort in software development. Qt also provides a wide range of features and functionality, making it a versatile tool for developing applications ranging from small utilities to large, complex systems. Additionally, Qt has a large and active developer community, which provides support, documentation, and resources to developers using the framework.

© Copyright 2024 by FriendlyUsers Tech Blog. Built with ♥ by FriendlyUser. Last updated on 2024-06-14.