Skip to content

Home

Jump to bottom
Dev_ edited this page Jan 17, 2025 · 2 revisions

Home

Bienvenido a la documentación de CTkDesigner

CTkDesigner es una herramienta avanzada para el diseño de interfaces gráficas de usuario (GUI) creada con Python y CustomTkinter. Su objetivo es facilitar el diseño visual y la exportación de proyectos CustomTkinter, eliminando la necesidad de escribir código desde cero.

CTkDesigner

Características principales

  • Interfaz visual intuitiva: Diseña GUIs de forma gráfica sin escribir código.
  • Widgets arrastrables: Posiciona widgets fácilmente mediante la funcionalidad de "arrastrar y soltar".
  • Edición en tiempo real: Ajusta propiedades como colores, dimensiones y posiciones dinámicamente.
  • Vista jerárquica: Organiza y visualiza la estructura de tus widgets.
  • Exportación de código: Genera scripts .py compatibles con CustomTkinter.
  • Importación y exportación de proyectos: Guarda y reanuda proyectos fácilmente.

Guía rápida: Cómo empezar

1. Clona el repositorio:

git clone https://github.com/yourusername/CTkDesigner.git
cd CTkDesigner

2. Instala las dependencias:

pip install -r requirements.txt

3. Ejecuta la aplicación:

python main.py

Uso

  1. Lanza la aplicación para abrir el diseñador de interfaces.
  2. Configura las propiedades iniciales de la ventana (tamaño, colores, etc.).
  3. Arrastra y coloca widgets en el área de diseño.
  4. Edita las propiedades de los widgets desde el panel de configuración.
  5. Previsualiza o exporta tu diseño con un solo clic.

Dependencias

Para instalar los paquetes necesarios, ejecuta:

pip install customtkinter

Documentación del Código

Estructura del Proyecto

El proyecto está organizado en los siguientes directorios y archivos:

CTkDesigner/
├── data/
│   └── variable.py
├── functions/
│   ├── create_widget_animation.py
│   └── import_widget.py
├── objects/
│   ├── animationMixin.py
│   ├── codeBox.py
│   ├── text_menu.py
│   ├── tooltip.py
│   └── virtualWindow.py
├── translations/
│   ├── translations.py
│   └── translator.py
├── [main.py](https://chatgpt.com/c/main.py)
├── README.md
└── debug.log

Descripción de Archivos y Clases

main.py

  • App: Clase principal de la aplicación.

    • create_ui(vw_height, vw_width, bools): Configura la interfaz de usuario.
    • create_project(import_proyect=False): Crea un nuevo proyecto.
    • clear_virtual_window(h, w, bools): Limpia la ventana virtual.
    • view_code(): Alterna la vista del código.
    • update_virtual_window(event): Actualiza la ventana virtual con el código actual.
    • cross_update_treeview(): Actualiza el esquema del TreeView.

  • LeftSidebar: Barra lateral izquierda.

    • create_scrollable_frame(): Crea un marco desplazable.
    • create_label(parent, text): Crea y configura un widget CTkLabel.

  • RightSidebar: Barra lateral derecha.

    • configure_treeview_style(): Configura el estilo del TreeView.
    • create_widgets_section(): Crea la sección de widgets.
    • create_treeview_section(): Crea la sección del TreeView.
    • add_widget(widget): Añade un widget a la ventana virtual.
    • update_treeview(): Actualiza el esquema del TreeView.

  • Toolbar: Barra de herramientas.

    • create_buttons(): Crea y empaqueta los botones de la barra de herramientas.
    • export_to_file(): Exporta el contenido de la ventana virtual a un archivo Python.
    • import_from_file(): Importa contenido desde un archivo Python a la ventana virtual.

[objects/virtualWindow.py](objects/virtualWindow.py)

  • VirtualWindow: Clase que representa la ventana virtual.
    • create_footer_lines(): Crea las líneas de pie de página para el código exportado.
    • write_to_file(file_path, lines): Escribe las líneas generadas en el archivo especificado.
    • add_widget(widget_type): Agrega un widget al VirtualWindow.
    • previsualize_code(): Genera las líneas de código para la previsualización.
    • export_to_file(file_path): Exporta la configuración actual de la ventana virtual a un archivo.
    • import_from_file(file_path): Importa widgets desde un archivo Python exportado.
    • clean_virtual_window(): Limpia el contenido del VirtualWindow.
    • read_file(file_path): Lee el contenido del archivo especificado.
    • find_app_class(tree): Encuentra la clase 'App' en el AST.
    • find_generic_widget_creator(app_class): Encuentra la función 'generic_widget_creator' en la clase 'App'.

[objects/codeBox.py](objects/codeBox.py)

  • AddLineNums: Clase para agregar números de línea a un widget de texto.
    • __init__(master, text_color=None, justify="left", padx=30, **kwargs): Inicializa la clase.
    • set_scrollbar(x, y): Configura la barra de desplazamiento.
    • _set_appearance_mode(mode_string): Configura el modo de apariencia.

[functions/import_widget.py](functions/import_widget.py)

  • load_classes_from_file(file_path): Carga clases desde un archivo.
  • get_class_parameters(cls): Obtiene los parámetros del constructor de una clase.

Ejemplos de Uso

Crear un Proyecto

app = App()
app.create_project()

Agregar un Widget

virtual_window = VirtualWindow(parent, left_sidebar, app, parameters_dict, width=800, height=500)
virtual_window.add_widget('CTkButton')

Exportar a Archivo

toolbar = Toolbar(parent, virtual_window, rightbar)
toolbar.export_to_file()

Para más detalles, consulta los archivos fuente en el repositorio.

Contribuciones

Las contribuciones son bienvenidas. Si tienes ideas o mejoras, sigue estos pasos:

  1. Realiza un fork del repositorio.
  2. Crea una nueva rama para tu funcionalidad o corrección: 
    git checkout -b feature/nueva-funcionalidad
  3. Envía un Pull Request explicando los cambios.

Licencia

Este proyecto está bajo la Licencia MIT. Consulta el archivo [LICENSE](https://github.com/yourusername/CTkDesigner/blob/main/LICENSE) para más información.
Clone this wiki locally