Dress up your code with a beautiful graphical user interface !

Related tags

GUI Developmentgui
Overview
Cover

Dresscode

Dress up your code with a beautiful graphical user interface !

This project is part of the Pyrustic Ecosystem. Look powered by the cyberpunk theme.

Showcase | Installation | Usage | Tutorial | Reference

Showcase

Welcome ! Let me show you something:

Figure

Figure 1 - Demo

What if I told you that I did this with 1 Hex-digit lines of code ™️ ?

The menu bar in Figure 1 is not a gimmick. Clicking on the buttons in the menu bar opens another page. So in fact I showed only 1/3 of the pages !

Let's take a look at the other pages:

Figure

Figure 2 - 1 hex-digit lines of code generated an app with 3 pages !

Now you are wondering how I did this with just 1 hex-digit lines of code ™️ .

Well, I first defined the first page:

from dresscode import page

home_page = page.Page(pid="home", name="Home")
home_page.add_entry(title="Username")
home_page.add_entry(title="Password", secretive=True)
home_page.add_button(new_row=True)

Then I defined the second page:

from dresscode import page

edit_page = page.Page(pid="edit", name="Edit")
edit_page.add_entry(title="Username")
edit_page.add_button(on_click=lambda page, cid: page.show_toast("Hello"))

Then the third page:

from dresscode import page

about_page = page.Page(pid="about", name="About")
about_page.add_button(text="Open Github")
about_page.add_button(text="Download the Wheel")

And then I created the app and linked the three pages to it.

from dresscode import app, page
...
my_app = app.App(title="Dresscode Demo", width=450, height=150, home="home")
my_app.add_page(home_page)
my_app.add_page(edit_page)
my_app.add_page(about_page)
my_app.start()

The 1 hex-digit lines of code:

from dresscode import app, page
my_app = app.App(title="Dresscode Demo", width=450, height=150, home="home")
home_page = page.Page(pid="home", name="Home")
home_page.add_entry(title="Username")
home_page.add_entry(title="Password", secretive=True)
home_page.add_button(new_row=True)
edit_page = page.Page(pid="edit", name="Edit")
edit_page.add_entry(title="Username")
edit_page.add_button(on_click=lambda page, cid: page.show_toast("Hello"))
about_page = page.Page(pid="about", name="About")
about_page.add_button(text="Open Github")
about_page.add_button(text="Download the Wheel")
my_app.add_page(home_page)
my_app.add_page(edit_page)
my_app.add_page(about_page)
my_app.start()
Figure

Figure 3 - Demo Animation

Voilà !

This is the full source code with comment and well structured:

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    # defining the home page here
    page = Page(pid="home", name="Home")  # pid = page id !
    page.add_entry(title="Username")
    page.add_entry(title="Password", secretive=True)  # secret secret !
    page.add_button(new_row=True)
    return page


def get_edit_page():
    page = Page(pid="edit", name="Edit")
    page.add_entry(title="Username")
    # Clicking this button will pop up a "Hello"
    page.add_button(on_click=lambda page, cid: page.show_toast("Hello"))
    return page


def get_about_page():
    page = Page(pid="about", name="About")
    page.add_button(text="Open Github")
    page.add_button(text="Download the Wheel")
    return page


# the home argument is the pid of the page to show at start up
app = App(title="Dresscode Demo", width=450, height=150, home="home")

# adding pages to the app !
app.add_page(get_home_page())
app.add_page(get_edit_page())
app.add_page(get_about_page())

# lift up !
app.start()  # the mainloop is hidden here ! ;)

Basically, you can just pip install dresscode, open a lightweight code editor, copy, paste, run the code and yeah it should work ! Try it !

Wondering what will happen when there are 10 pages ? Yes your menu bar will be full. The solution: buy large screens !

Joking aside, here's the solution:

...
# Asking Dresscode to create a dropdown menu 'Menu'
# then stack inside it the references to the pages ! 
app.add_page(home_page, category="Menu")
app.add_page(edit_page, category="Menu")
app.add_page(about_page, category="Menu")
...
Figure

Figure 4 - No need to buy large screens !

Installation

pip install dresscode --upgrade --upgrade-strategy eager

Interaction with Dresscode

Dress up your code with a beautiful graphical user interface ! was the intro to this README. There is a clear distinction between the backend and the frontend. The question that arises is therefore how to communicate the frontend and the backend.

With Dresscode, you can specify when creating a component which handler to call when a particular event occurs.

With the button component, there are the on_click parameter to keep a reference to the event handler. So basically, you just need to have a handler with 2 parameters: page and cid.

from dresscode.app import App
from dresscode.page import Page


def handler(page, cid):
    """
    page: the page object
    cid: the component id (here, the button cid)
    """
    # say 'Hello' !
    page.show_toast("Hello component {}".format(cid))
    # you can inspect the dict of components (keys are cid)
    components = page.components  # be curious, inspect the dict !
    # you can retrieve the data from a component
    username = page.get_data("username")
    # or you can display a large text
    page.show_text("Helloo\n{}".format(username), title="My large text")
    # or, ask for a confirmation
    ok = page.ask_confirmation()  # blocks the app, returns a boolean
    # you can even decide to scroll the content of the page
    page.scroll(value=1.0)
    # you can add a new page at runtime !!!
    app = page.app
    app.add_page(Page(pid="new_page", name="New"))
    # and guess what, you can open this new page !
    app.open_page("new_page")
    # and if you are in a hurry to open the home page
    app.open_home()


def get_home_page():
    # home page - a pid will be generated automatically if you don't set it
    page = Page(pid="home", name="Home")
    page.add_entry(cid="username", title="Username")
    # if you don't set a cid, it will be generated
    page.add_button(on_click=handler)  # a cid will be generated automatically

    # Note, if you click the button twice, you will get a:
    # dresscode.exception.DresscodeException
    # Duplicate page id isn't allowed (new_page) !
    # Guess why ! This isn't a bug but a feature ! hahaha !
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Components

Do you think Dresscode only offers two components, the input field and the button ?

Normally that would be enough. But I implemented a multitude of components to allow everyone to build applications quickly, from the simplest to the most complex.

Checkbuttons

Figure

Figure 5 - Checkbuttons

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    items = ("Banana", "Apple", "Avocado")
    page.add_checkbutton(title="Choose your favorite fruits", items=items)
    # you could add a on_choice event handler ;)
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Dropdown list

Figure

Figure 6 - Drop-down list

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    items = ("Banana", "Apple", "Avocado")
    page.add_dropdown_list(title="Choose your favorite fruit", items=items)
    # you could add a on_choice event handler ;)
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Editor

Figure

Figure 7 - Editor

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    essay = "non est ad astra mollis e terris via\nSénèque"
    page.add_editor(title="My essay", text=essay, readonly=True)
    # you could change the width and or height...
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Label

Figure

Figure 8 - Label

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    page.add_label(text="Marvelous")
    page.add_label(text="Dresscode", color="white")
    page.add_label(text="Project", color="cyan")
    text = "Make Desktop Apps Great Again !"
    page.add_label(new_row=True, text=text, color="gray",
                   side="right",
                   font=("Corrier", 10))
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Radiobuttons

Figure

Figure 9 - Radiobuttons

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    items = ("Blue", "Red")
    page.add_radiobutton(title="Make a choice", items=items)

    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Space

Figure

Figure 10 - SpaceX

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    items = ("Blue", "Red")
    page.add_button()
    page.add_button()
    page.add_space()  # you can alter the width, height and more...
    page.add_button()

    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Spinbox

Figure

Figure 11 - Spinbox

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    items = ("Blue", "Red")
    page.add_spinbox(title="Make a choice", items=items)
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

path entry

The path entry is part of pyrustic.widget. Discover the Pyrustic framework !

Figure

Figure 12 - Pathentry

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    page.add_path_entry(title="Directory", browse="dir")
    page.add_path_entry(new_row=True, title="File")
    return page


app = App(title="Dresscode Demo", width=450, height=150, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Table

The table is part of pyrustic.widget. Discover the Pyrustic framework !

Figure

Figure 13 - Table

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    columns = ("Name", "Age", "Gender")
    data = [("Jack", 45, "Male"), ("Jane", 37, "Female"), ("Alex", 100, "?")]
    page.add_table(title="My data", columns=columns, data=data)
    return page


app = App(title="Dresscode Demo", width=650, height=300, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Image

Admit that you didn't expect this !

Figure

Figure 14 - Image

from dresscode.app import App
from dresscode.page import Page


def get_home_page():
    page = Page(pid="home", name="Home")
    page.add_label(text="Welcome !", side=None, anchor="center", color="gray")
    with open("/home/alex/dresscode.png", "rb") as file:
        image = file.read()
    # to center any component, the trick: side=None, anchor="center" !
    page.add_image(new_row=True, image=image, side=None, anchor="center")
    page.add_label(text="https://github.com/pyrustic", side=None, anchor="center",
                   font=("Courrier", 10), new_row=True, color="gray")
    return page


app = App(title="Dresscode Demo", width=650, height=400, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

Cherry on the cake

Since we have this rebellious little side to wanting to customize everything, I implemented the possibility of adding custom components !

from dresscode.app import App
from dresscode.page import Page


# I will cover this topic another time !


def data_getter(page, cid):
    data = None
    return data


def builder(page, cid):
    parts = {}
    return parts, data_getter


def get_home_page():
    page = Page(pid="home", name="Home")
    page.add_custom(builder=builder)
    return page


app = App(title="Dresscode Demo", width=650, height=400, home="home")

app.add_page(get_home_page())

# lift up !
app.start()

There you go, so I won't be asked to add new components ! :)

Epilog

I created a Discord for announcements and discussions etc. Join the Discord !

Work in progress...

You might also like...
A lightweight file-copying interface.
A lightweight file-copying interface.

autosort A lightweight file-copying interface. Preview What is autosort? Autosort is a lightweight file-copying interface. It allows you to copy sever

Uma interfáce de usuário relativamente simples em pyqt5 + escolha de dispositivos
Uma interfáce de usuário relativamente simples em pyqt5 + escolha de dispositivos

Interface para Scrcpy Uma interfáce de usuário relativamente simples em pyqt5 para sistemas UNIX Requerimentos: Python3 PyQt5 adb scrcpy Você pode ins

Browser - A GTK browser trying to follow the GNOME Human Interface Guidelines.
Browser - A GTK browser trying to follow the GNOME Human Interface Guidelines.

A simple GTK browser trying to follow the GNOME Human Interface Guidelines.

Primeira interface (simples) desenvolvida em Python utilizando o PySimpleGUI
Primeira interface (simples) desenvolvida em Python utilizando o PySimpleGUI

Interface-Python Sobre o projeto Primeira interface gráfica (simples) desenvolvida em Python utilizando o PySimpleGUI Interface Gráfica Tecnologias ut

Projeto de mini-games de azar com interface gráfica utilizando Python e PySimpleGui.
Projeto de mini-games de azar com interface gráfica utilizando Python e PySimpleGui.

Gambling Mini jogos de azar unidos em uma mesma interface gráfica, utilizando a linguagem de programação Python em conjunto com a biblioteca de interf

This was my test project when i started to learn Python Tkinter. Its the simplest interface possible.

Rock-Paper-Scissors-Game- Project Description: This was my test project when i started to learn Python Tkinter. Its the simplest interface possible. R

Declarative User Interfaces for Python
Declarative User Interfaces for Python

Welcome to Enaml Enaml is a programming language and framework for creating professional-quality user interfaces with minimal effort. What you get A d

PyQt QGraphicsView with selection box. User can move vertical border of the box horizontally.

pyqt-horizontal-selection-square-graphics-view PyQt QGraphicsView with selection box. User can move vertical border of the box horizontally. Requireme

Function-Plotter - GUI Python program that plots functions that are entered by the user
Function-Plotter - GUI Python program that plots functions that are entered by the user

FunctionPlotter GUI Python program that plots functions that are entered by the user. The program takes minimum and maximum value for x and plot it as

Releases(v0.0.5)
Owner
Let's Build Great Things With Few Resources !
GlobalProtectGUI is a simple tray app to connect, disconnect and monitor globalprotect VPN connection.

Simple GlobalProtectGUI GlobalProtectGUI is simple tray app to connect, disconnect and monitor globalprotect VPN connection. Installation Required bef

Aleksandar Dostic 11 Oct 07, 2022
LCD GUI for P4wnP1 ALOA

GUI for P4wnP1 Colorful UI interface for P4wnP1 ALOA Don't pwn just as a USB client. Use also the USB host capabilities! UPS Lite support Scalability

John 7 Dec 13, 2022
Bank-Project - A bank ATM simulator recreated in python

Bank-Project A bank ATM simulator recreated in python. NOTE: this repo is a translation of Rasphy2009/Proyecto-Banco Requirements (.py only) 🐍 Python

Rasphy 2 Jan 02, 2022
Remi is a GUI library for Python applications that gets rendered in web browsers

Python REMote Interface library. Platform independent. In about 100 Kbytes, perfect for your diet.

Davide Rosa 3.2k Jan 07, 2023
Redis GUI using Qt & Python

QRedis A Python, Qt based Redis client user interface. Help wanted Open to people who want to colaborate. Would like to know which features you would

Tiago Coutinho 58 Dec 09, 2022
Basic browser based on PyQt5

goneDev-browser "basic browser based on PyQt5" This application is primarily built on macOS with more adaptibility for MacOS than Windows. v1.0 will s

Harsh ADV) 1 Jan 19, 2022
Open source UI framework written in Python, running on Windows, Linux, macOS, Android and iOS

Kivy Innovative user interfaces made easy. Kivy is an open source, cross-platform Python framework for the development of applications that make use o

Kivy 15.4k Jan 07, 2023
The Python-Weather-App is a service that provides weather data

The Python-Weather-App is a service that provides weather data, including current weather data to the developers of web services and mobile applications.

Sayed Tabish 1 Dec 13, 2021
A hotkey manager that runs in the system tray. Uses PySimpleGUI for the GUI and the system tray.

PySimpleHotkey PySimpleHotkey A hotkey manager that runs in the system tray. Uses PySimpleGUI for the GUI and the system tray. Packages Used This proj

PySimpleGUI 20 Nov 14, 2022
Small Python scripts to take screenshot from a KaiOS/FFOS device and to mirror the screen of your phone.

This version of kaiscr is written by tkinter and can run in windows(use kailive-tk.py). "kailive-tk-speed.py" is speed optimization version. The sourc

openGiraffes Group 2 Mar 02, 2022
A Minimalistic Backup GUI for your Windows, Mac or Linux

BlobBackup is a minimalistic backup utility for your Windows, Mac or Linux computer. With an excellent engine, extensive storage support, and an easy

283 Nov 30, 2022
A graphical user interface calendar with python

GUI-Calendar A graphical user interface calendar with python In this project I used tkinter module If you dont have tkinter module you can install it

Arone Sadegh 1 Dec 18, 2021
Python Screen Recorder using Python

PY-Screen-Recorder Python Screen Recorder using Python Requirement: pip install cv2 pip install pyautogui pip install numpy How to reach me? You can r

SonLyte 8 Nov 08, 2021
This simple python program can be used to make FontChooser dialog in Tkinter Applications.

tkFontBox This simple python program can be used to make FontChooser dialog in Tkinter Applications. how to use? Copy the tkFontBox.py file into your

Pawan Kumar Prachi 1 Feb 08, 2022
WhirlEdit, an excellent {code} editor

HELP! If you're experienced, I want you to make an executable for your platform (windows/mac/linux) and help me.. For more info get in touch at whirlp

whmsft 10 Aug 18, 2022
A very simple calculator with a modern UI made in Python thanks for the stunning Sun-Valley-ttk-theme and Segoe UI Variable font.

Fluent-Python-Calculator A simple Python calculator with Sun-Valley-ttk-theme About Fluent-Python-Calculator: A very simple calculator with a modern U

59 Dec 06, 2022
Turn (almost) any Python command line program into a full GUI application with one line

Gooey Turn (almost) any Python 2 or 3 Console Program into a GUI application with one line Support this project Table of Contents Gooey Table of conte

Chris 17k Jan 09, 2023
Rich.tui is a TUI (Text User Interface) framework for Python using Rich as a renderer.

rich.tui Rich.tui is a TUI (Text User Interface) framework for Python using Rich as a renderer. The end goal is to be able to rapidly create rich term

Will McGugan 17.1k Jan 04, 2023
Uma interfáce de usuário relativamente simples em pyqt5 + escolha de dispositivos

Interface para Scrcpy Uma interfáce de usuário relativamente simples em pyqt5 para sistemas UNIX Requerimentos: Python3 PyQt5 adb scrcpy Você pode ins

hayukimori 10 Dec 16, 2022
A Windows Dock Widget Written In Pure Python

VEПUS A Windows Dock Widget Written In Pure Python What is Venus? Venus is a Dock Widget for your desktops interface. It adds a couple of really cool

Secrets 18 Dec 30, 2022