Hi everyone,
I've been working on the UX/UI of a timeline custom node system for ComfyUI over the past two weeks. The goal is to create a timeline similar to video/animation editing tools, without relying on traditional timeframe code. You can effortlessly add, delete, or rearrange rows, providing a streamlined user experience.
TimeUI_global.mp4
Users can upload images directly into the nodes or attach other "upload image" nodes, simplifying the workflow. You can also add a second instance of the timeline within the same row, allowing you to loop images for easier management of complex animations. For example, seamlessly loop a repeating background or sequence within your animation.
TimeUI_Img_management.mp4
Each row in the timeline includes various settings for customization. Toggle the visibility of image masks with a click, enhancing control over image adjustments. Nodes can work independently or with other external nodes. Easily toggle settings like IP adapter, Image Negative, Attn Mask, Clip vision, Mask, and more to fine-tune outputs.
TimeUI_Settings.mp4
You can change the time format of the timeline and the animation duration, in frames or seconds. The nodes will update the time formats in the timeline ruler, displaying the number of frames or seconds that each image takes on the timeline handler.
TimeUI_time_format.mp4
At the bottom of the nodes, there is a button to view the Bezier curve result of the current timeline, similar to the "KfCurveDraw" nodes. This feature is still under design.
TimeUI_curves.mp4
This project is a work in progress, and I welcome any suggestions or contributions from the community. Let's collaborate to make this a powerful tool for everyone!
I have created a GitHub repository for this. Since I am not a professional developer, I developed this in HTML, JS, and CSS with the help of ChatGPT for the purpose of the video presentation. I really want to find the right community ready to create this with me.
I know these are not the right languages to code a node, which is why I need the community to build this with me as an open-source node.
I am not very familiar with common GitHub practices, so if someone has experience in ComfyUI node development and can become my sidekick on this project, please send me a message.
I believe these nodes can bridge complex node setups and a full web UI, making it easier for less experienced users to get started before moving on to more advanced solutions. This idea came from using workflows by various developers over the last two months.
Feel free to contact me! Don't hesitate to reach out and tell me if I am doing something wrong with this platform's habits. Let's make something amazing together!
The goal of the TimeUI project is to create an intuitive, user-friendly timeline node system for ComfyUI. This system will streamline the process of creating animations, allowing users to effortlessly add, delete, or rearrange nodes. Below is a detailed roadmap based on feedback and discussions with the community.
- Create Node System: Develop the basic structure of the timeline node system.
- Timeframe Integration: Enable integration of timeframe values into other nodes.
- UI/UX Design: Focus on creating a user-friendly interface with drag-and-drop functionality.
- Image Upload and Management: Implement features for uploading images directly into nodes or attaching other "upload image" nodes.
- Row Settings: Allow customization of each row in the timeline, including visibility toggles for image masks and other settings.
- Node Independence: Ensure nodes can work independently or with external nodes.
- Time Format Options: Provide options to change the time format and animation duration in frames or seconds.
- Timeline Ruler Update: Update the timeline ruler to display the number of frames or seconds each image occupies.
- Bezier Curve Button: Add a button to view the Bezier curve result of the current timeline.
- Design and Integration: Continue designing and integrating the Bezier curve feature.
- Gather Feedback: Collect feedback from the community to identify areas of improvement.
- Testing: Conduct thorough testing to ensure stability and usability.
- Example Workflows: Create and share example workflows demonstrating how to use the timeline node system.
- Documentation: Develop comprehensive documentation to assist users in understanding and utilizing the system.
- AnimateDiff Workflows: Integrate the timeline node system with AnimateDiff workflows.
- Toggle Settings: Enable settings like IP adapter, Image Negative, Attn Mask, Clip vision, Mask, and more.
- Settings Integration: Integrate these settings directly into the timeline node system for seamless customization.
- CNet Weight Integration: Explore adding features like CNet weight integration based on community demand.
- Global Settings: Transition from setting configurations for each image to global settings applicable to the entire timeline.
- Advanced Customization: Enhance the system with advanced customization options.
- Optimization: Optimize the node system for performance and efficiency.
- Final Testing: Conduct final rounds of testing to ensure all features are functioning as expected.
- Release Preparation: Prepare for the official release of the TimeUI system.
- Launch: Launch the TimeUI system and make it available for the community.
- Community Support: Continue to engage with the community for feedback and support.
- Regular Updates: Provide regular updates and enhancements based on user feedback and emerging needs.
The TimeUI project aims to simplify the animation creation process within ComfyUI, making it accessible and efficient for all users. Through collaborative efforts and continuous improvement, we can create a powerful tool that meets the diverse needs of the community.