gimelstudio / gimelstudio Goto Github PK

Non-destructive, node based 2D image editor with an API for custom nodes

Home Page: https://gimelstudio.github.io

License: Apache License 2.0

Python 98.95% GLSL 1.05%

image-editor compositor non-destructive graphics gimel-studio design-tools photo-editor 2d-graphics photography node-editor

gimelstudio's Introduction

Gimel Studio

Non-destructive, node-based 2D graphics editor, focused on simplicity, speed, elegance, and usability
Official Website | Community Chat | Official Manual

About Gimel Studio

Note

10/30/2023 The Gimel Studio maintainers have decided to place the project on a temporary hiatus. Our dedication to Gimel Studio remains and we have some ideas we want to bring to the open-source community. We plan to pick back up on planning, design, and development sometime in 2024. Thanks for your support and understanding. -Noah, on behalf of the Gimel Studio maintainers

This repository tracks the next step of Gimel Studio to become a truly usable and serious non-destructive graphics editor. It is currently in initial planning/development stage, working towards a usable MVP application. Things will probably change a lot from what is currently here.

You’re always welcome to help out, ask questions, give feedback, and suggest ideas/improvements.

Join us in the Zulip chat organization here to give your feedback and stay in the loop!

Project Vision

The main goal is to expand on and greatly improve upon the concepts from the previous version of Gimel Studio to create a serious (yet fun!) 2D graphics editor.

This includes:

Re-designed UI (inspired by Blender and Sketch)
Improved file-type support (.tiff, .exr files, etc)
16-bit workflow support
CPU and GPU based processing
Highly improved node-graph and overall workflow for image editing
Greater emphasis on re-usabilty of node graph setups via templates, etc
User preferences for customizabilty
UI translations
Gizmos for the viewport to allow for WYSIWYG-like interaction for transforms, etc. (e.g. crop, rotate, etc)
Continued improvement and additions to the Python API for scripting custom nodes
And more...

Nodes can be used to composite, edit and create new effects and/or composite raster and vector graphics on-demand and visually with node thumbnails showing each step of the process (where applicable). Helpful gizmos in the interactive viewport can be used to do various editing tasks and speed up the workflow. Preset node graph templates can be created, used and re-used to save time setting up common node-setups.

Custom nodes can be scripted with the built-in Python API for maximum flexibility. Integrations with other software are planned.

With a fully non-destructive workflow that uses both GPU and CPU processing (via GLSL + OpenGL) while being seamlessly cross-platform on Windows, Linux and macOS (for 64-bit systems), Gimel Studio aims to be a simple, yet powerful 2D graphics editing tool for anyone with an image to edit.

Current Status

There are alpha pre-releases available for those wanting to test the current functionality.

The status of the next generation of Gimel Studio as of 1/10/2022

Contributing

Take a look at the GitHub Issues for details on immediate and future tasks to be done. Issues labeled “Good first issue” will be the best for new contributors. We are willing to mentor any contributors as needed.

Pull requests are always welcome! :)

Please see the CONTRIBUTING.md for some details on contributing.

Running the code

Please note: At this stage of development, the code is highly WIP and likely to change a lot. Many things are not implemented and not stable. Please don't expect too much at this point...

Windows

Make sure you have Python 3.9 or 3.10 installed on your system.
Run pip install -r requirements.txt
You can get an older release of OIIO (OpenImageIO) here and install it with pip install <the_path_to_the_whl_here>. Or, to use the latest version of OIIO, follow the build instructions here.
Run cd src then python main.py to navigate to the src directory and run Gimel Studio.
To build an executable, make sure you are in the root directory and run python build.py. The executable will be generated in the dist folder.

Linux

This has been tested on Debian-based systems (Ubuntu, Linux Mint). Other distros may require extra configuration.

Make sure you have Python 3.9 installed on your system.
Navigate to the root folder and in your terminal, run python3 build.py. This will begin a process to install all of the neccesary libraries and will give you the option to create a standalone executable or just run the code with Python.

macOS

Make sure you have Python 3.8 or 3.9 installed on your system.
Navigate to the root folder and in your terminal, run python3 build.py. This will install all of the neccesary libraries and will give you the option to create a standalone executable or just run the code with Python.

gimelstudio's People

Contributors

Stargazers

Watchers

gimelstudio's Issues

Implement UI translations support

See https://wxpython.org/Phoenix/docs/html/internationalization.html and https://wiki.wxpython.org/Internationalization

Bind tooltips to node help buttons, etc

Add tooltips describing about each node.

Take the description from the node meta and display it in a gswidgetkit tooltip when the mouse is hovered over the help button in the Node Properties Panel.

Add a tooltip with the short node description and implement the button to link to manual/docs online for each node in Node Properties panel.

Should use the tooltip widget from gswidgetkit.

Add tooltip with short node description
Implement the button to link

Fix menu separators not showing

The styling needs to be adjusted so that the separators in the menus show up with the dark bg. Just ping me for details. ;)

Updated UI Mockup

We need an updated UI mockup as the one on the README is severely outdated now.

Add Export image functionality to core and UI

Re-implement the export image functionality and hook it to the already existing menu item.

Create Github Actions script to build executables

Windows
Linux
MacOs

Adapt from: https://github.com/GimelStudio/Gimel-Studio/blob/master/.github/workflows/build.yml

About Dialog

Implement the About Dialog and add it to the menu.

Mockup
Implementation

WIP mockup

Test and make tweaks/fixes for Linux

The new version of Gimel Studio has not been properly tested on Linux systems. This is mainly because we need the OIIO package built for Python in order to run the application.

There is likely a lot of tweaks and fixes to be made specifically for Linux and that is what this issue will resolve.

Initially, the focus will be on supporting Ubunutu/Debian and the derivatives since that is what we will likely provide an installer/executable for.

Depends on blocker #1

Implement Node Registry

The Node Registry handles everything with keeping track of what nodes are currently installed, etc and is responsible for talking between parts of the api and the core for initialization of a new node.

Currently, only pieces of this are implemented.

This is a blocker to truly implementing the Add Node Menu #25 and Node Manager #2. (This would be the backend of the Node Manager)

Term definitions:

INSTALLED means that the node script has been installed through the node manager and has been programmatically moved to the nodescripts directory to be registered on application startup
REGISTERED/ENABLED means the node is available and usable in the application (i.e can be used in the nodegraph).

Viewport Gizmos

This is the "master" issue for figuring out the Viewport Gizmos.

e.g: when cropping, the gizmo would be an "overlay" and adjustable rectangle to show where the image is to be cropped.

Gizmos need to be accessible (create-able) via the nodes api so it must not be too integrated into the core.

        # Draw the gizmo
        dc.SetPen(wx.Pen(wx.Colour("#000"), 2))
        dc.SetBrush(wx.TRANSPARENT_BRUSH)
        dc.DrawCircle(x+int(image.Width)/2, y+int(image.Height)/2, 160)
        dc.SetBrush(wx.Brush("#000"))
        dc.DrawCircle(x+int(image.Width)/2, y+int(image.Height)/2, 2)

        #self.previous_position = wx.Point(0, 0)
        dc.SetPen(wx.Pen(wx.Colour("#000"), 2, wx.PENSTYLE_SHORT_DASH))
        #dc.DrawLine(wx.Point(x+int(image.Width)/2, y+int(image.Height)/2), self.previous_position)

Support Image Sequences / Batch rendering

Even a simple implementation of rendering batch images and/or image sequences would be very nice.

Something to look into.

Persist FoldPanelBar toggled state

When a node is selected and the properties show up, there are toggle-able FoldPanelBars which can be opened and closed to hide the widgets inside:

The issue is that the toggle state (opened or closed) does not persist, but always resets to all of them being open.

Ideas on how this could be implemented:

Store the toggled state within the property itself on toggle, then read it back when the FoldPanel needs to be shown again.
Use https://wxpython.org/Phoenix/docs/html/wx.lib.agw.persist.html

Improve nodegraph UI performance

Selecting a node in the nodegraph with more than 5 nodes is noticeably slow, among other things. Though, this is to be expected since the nodegraph is not yet ready for production and has not been optimized yet.

Developer log

Implement a developer log/console area, similar to the one in v0.5.3 beta.

This is helpful for debugging node scripts and goes hand-in-hand with #3 to provide a built in, simple IDE for developing custom nodes with the API. This would also aid in creating core nodes.

API: Implement GLSL shader support for image manipulation

Re-implement/implement in a better way support for image manipulation via GLSL shaders from https://github.com/GimelStudio/Gimel-Studio/tree/gpu-engine-oiio

Implement minimal amount of widgets for Application

The widgets are to be implemented in the gswidgetkit package at https://github.com/GimelStudio/gswidgetkit.

UI Design Style Guide:

Implement Add Text node

Implement an Add Text node. This would give us something useful to test the Image viewport with, etc. Probably, implement with vector rather than raster for portability, etc.

Panel Zoom Fields miscalculate zoom

The node graph zoom field should adjust the zoom in the same way as the mouse wheel. Currently, there is a workaround implemented but it miscalculates the zoom when translating from the field value to the value the panel accepts to set the zoom.

Preferences/Configuration Dialog

Settings/tabs I am thinking we are going to include in the dialog, so far:

Node wire curvature (e.g: 0 is straight, 8 is curved, etc)
Maybe some settings for enabling/disabling node cache as it may not always be needed/wanted
Node Manager (add/remove enable/disable available nodes)
Enable/disable "experimental" features
Toggle showing image thumbnails on nodes by default
Fonts path (default could be the system font folder)
Default output folder (default could be the home folder of the users computer)
Whether to position the Add Node menu based on the cursor location or just have it static (placed at the bottom corner)
Toggle showing the statusbar by default

Project File Open/Save for nodegraph

Implement project file open/save.

Spec:

JSON based format -possibly use the pickle module for non-human readable (packed) files.
Normal files will have the .gimel extension
Project files with "packed" image data will have the .packed.gimel extension. This is to differentiate between packed and normal files.

Requirements:

Implement interfaces to nodegraph, etc to save/load state
Implement #10

Please note this issue does not have to do with the UI side of things.

Confirm how Contributors want to be credited

Confirm with all the current (and past) contributors how they want to credited in the About dialog, possibly on the site, etc

Here's what I have so far:

@BlenderBoi * (Ideas/planning, UI/UX design, Testing)
@iwoithe Ilias Woithe (Code contributor, Ideas/planning, UI/UX design)
@JohJakob Johannes Jakob (Code contributor, Docs contributor, Translations contributor, Ideas/planning, UI/UX design)
@jumaxotl Julien (Ideas/planning, UI/UX design, Translations contributor)
@yasuomaidana * (Code contributor, Testing)

Past contributors from the v0.5.x series who haven't contributed to the current version (yet):

@josephclaytonhansen Joseph Hansen (Testing, Ideas/planning)
@Metallicow * (Code contributor, Ideas/planning, Testing)

...and others who have provided feedback.

Please comment in this issue with any corrections you have.

An asterisk after your username means that I don't know if you want your name there or not. If you do, let me know what it is.

Thanks to everyone who has been a part of this so far. 😄 🎉

Implement main window & panels

Follow the mockup and create the scaffolding of the UI with wxpython, gsnodegraph and gswidgetkit.

Add dropdown menu for panel (area) settings

Panel topbar menu (three dots icon button) at far right shows:

Undock panel (float the panel so it can be re-arranged)
Hide panel (hide the panel, can be re-shown using the View > Toggle the_panel menu or a shortcut)
Open panel as new window (opens the panel as a new window, useful for multi-monitor setups)

Initial UI translations

UI translations we can support initially:

English (default)
French (@jumaxotl)
German (@JohJakob)

Depends on implementing #6

Mac: Provide @2x assets

Macs with a Retina Display require image assets in 2x resolution. They should be provided with an @2x suffix next to the 1x assets.

Edit app startup to avoid locale wxAssertionError for OS locales

Application sometimes won't startup due to a conflict between wxpython and OS locale settings. This needs to be fixed.

Ref:
https://discuss.wxpython.org/t/wxpython4-1-1-python3-8-locale-wxassertionerror/35168

Add initial Menu items

File
- New Project
  - Blank (Default)
  - From Template
- Open Project
- Open Recent Project
- Save Project
- Save Project As
- Save As Template
- Quit
Edit
- Copy Image to Clipboard
- Preferences
Render
- Render Image
- Auto Render Image
View
- Toggle Window Fullscreen
- Maximize Window
- Show Statusbar
Help
- Online Manual
- Visit Website
- Report a Bug
- About Gimel Studio

Wheel / Pie Menu for adding nodes

WIP idea for an intuitive menu to add nodes.

Reference (taken from the Gimel Studio Discord):

Nodegraph Nodes context menu

Context menu for the nodegraph right-click menu.

Duplicate
Delete
Select All
Deselect All

Relies on implementing these functions in the gsnodegraph library upstream.

Image thumbnails on nodes

This is upstream via gsnodegraph.

Dragging panels causes crash (Python 3.9 only)

This could be an upstream issue with wxpython.

Pre-built Python wheels for OpenImageIO

Create pre-built Python wheels for the OpenImageIO package so that users and contributors don't need to build it from source themselves.

Windows (can use https://www.lfd.uci.edu/~gohlke/pythonlibs/#openimageio but we need an updated version built with RAW and OpenColorIO extenstions)
Linux
MacOs

DND from file browser to Nodegraph to add Image node

Re-implement functionality: dnd from os filebrowser into nodegraph to automatically add a new Image node with the image loaded. One of my personal favorite features to have in any node graph. ;)

Node setup Templates

Pre-defined node setups which can be loaded, created and shared with others.

Preset node graph templates can be created, used and shared with others to save time setting up common node-setups for various editing tasks. These would be select-able on program launch and when creating a new project. These are different than the normal Gimel Studio Project file in that they only include the nodes pre-setup as a starting point for a project.

Examples: Resize, Crop, PBR texture gen workflow

App configuration backend

Implementing the backend for #2. Mainly just reading/saving a .config file in the users home directory with the configuration settings stored in JSON. Also, creating an interface for the Preference dialog to edit the values on-the-fly.

Test and make fixes for MacOs

Just as simple as that: just build and test on a MacOs system to see what needs to be fixed, etc. The current developers do not have access to a Mac so we need someone else to do this.

Implement statusbar

Statusbar should have contextual mouse and keyboard shortcuts displayed and well as info messages.

Color management via OpenColorIO

Requires:

Looking into how exactly this is done....
Building OpenImageIO (see #1) with OpenColorIO support
Implementing it into the core

Reference: https://openimageio.readthedocs.io/en/latest/imagebufalgo.html?highlight=opencolorio#color-space-conversion

Implement OpenImageIO IO into core

This partially depends on #1

Add Nodes Menu

Re-implement the menu to add nodes to the node graph. Ideally, this would be searchable, like the last one.

Ideas: have it sort-able based on category

Mockups

Proposal: Use user-friendly labels for toggles

Toggles like “Toggle Status Bar” should have a different label based on their state to better indicate what they will do when clicked. For the status bar, this could be “Show Status Bar” and “Hide Status Bar” or it could be replaced with a checkbox toggle like “Auto Render”.

This would also make translations in certain languages (like German) easier because they do not have a convenient term like “toggle” (in German, the only fitting translation is “umschalten”, but it is a bit ambiguous). The same would apply to the help texts.

Image Viewport/Nodegraph view modes

Output Mode / Selected Mode / Viewer mode??

Output Mode - Show the result of the Output node
Selected Mode - Show result of selected node

For Viewer mode we could have a dropdown listing all the viewer nodes in the node editor

Proposal: Rename “User Preferences” to “Preferences…”

There is no real difference between user preferences and settings in Gimel Studio. It would make sense to simplify the term “User Preferences” and just call it “Preferences”. This would also shorten the term in German from “Benutzereinstellungen” to “Einstellungen” which is more desirable.

I would also append an ellipsis (…) to the menu item to let the user know that the action requires more actions/opens a dialogue. Both macOS and Blender use “Preferences…”.

Startup splashscreen

On startup a window that pops up and shows:

Option for opening a recent project
Option for creating a new blank project
Option for creating a new project from a template

This also be shown for when "New project" in the menu is selected.

Support panel and area "Instances"

Currently, there can only be 1 instance of each panel or area. It would be nice to be able to have as many instances of the panel or area as the user wants.

This mainly involves keeping the instances in a python dictionary and keeping track of what events happen in each instance and funnel it back to the main app.

Built-in, Simple code editor (for scripting custom nodes)

One of the core features of Gimel Studio is the ability to script custom nodes in Python (+ GLSL), so I think a simple, built-in code editor is a good thing to have. With hot-reload of scripts, editing the code within Gimel Studio makes sense.

Code editor with minimap for wxpython, etc is at https://github.com/TSN-ADMIN/wxPySTC_DocMap. Could use it after some fixing. 😄

This is a good issue for someone new to wxpython as it shouldn't require as much knowledge of wxpython -unlike other parts of the GUI.