Buttle UI

This is an overview of the future UI we are currently working on


Fourth meeting

During the past days, we’ve been working on the scope statement, trying to define every part of the future UI more precisely. We’ve agreed on the following :


In the viewer we will be able to display images and videos. Many tools will allow the user to zoom in and out, drag an image, play and stop a video.

The user will have the possibility to assign 9 nodes to the viewer (with the mosquito tool) and switch beteween the 9 corresponding views.

If everything goes well, we will add an option so the user can use many viewers at the same time.

Graph editor

In the graph editor, the user can add or remove nodes. A list menu will allow the user to choose the type of node and every node will have a specific color according to his type.

The nodes can be connected to each other : they can have many inputs, but only one output. When the user clicks on a node’s output/input, a curve appears and he can drag it to another node’s input/output to create a connexion.

Every node contains a vignette of the project with the applied effects at the current node’s step, and the user can show or hide it.

In the right bottom corner, a miniature of the graph will make the navigation easier and let the user know which part of the graph he is viewing.

Parameters editor

This module will give access to the current node’s parameters. We will use different components depending on the type of the parameter so the user can set everyone of them :

  • boolean : checkbox
  • int : input or slider
  • choice : list menu

The parameters of a node are grouped according to certain features. Each group will be displayed in a separate widget. The user will be able to show or hide the details of any widget.

All the modules (viewers, graph editor and parameters editos) will be resizable so the user can adjust the interface to his preferences. We might also have a “full screen” option combining the viewer and the graph editor in a single widget.

Third meeting

Remember last week, we had to do a prototype for every module of the application.So, for the first time, we had stuff to show to Fabien. And this meeting was a way to know what was good, what wasn’t and how to improve it.

We have 3 prototypes : the undo/redo, a viewer, a graph node and also a first design of the application to show (we didn’t find the time to do the parameters editor prototype).

Clément and Aurélien have worked on the undo/redo and have improved it during the week thanks to Fabien’s advice. They had to transform the code which was too specific in something more general. Now we have to improve the tests of the undo/redo to simplify the error detection in the future.

We worked on the graph nodes too. We used QML for the appearance and Python for the motor. The link between Python and QML is assured by Pyside.

The main problem for our first prototype is that when a new node is created, the other ones turn back to their initial position even if they have been moved before. So the objective is to find the appropriate tool to solve the problem.

In fact, we have many problems with QML for handling lists of elements because the tools proposed have often many constraints. Fabien gave us new ideas but nothing is definitive for the time being and we have to work on it.

The third prototype, the viewer, was efficient and no big problems were encountered. Fabien gave us some ideas to improve it.

Finally, the presentation of the first design of the application (a Xochitl creation) was the occasion for thinking about what we want to implement in the application, considering our desires and the difficulties.

So for the next meeting, first thing is to think about the code organisation and to begin to use git to share it. We also have to improve the existing modules and to link them. And we have to decide which features we want to implement and clearly define what we display, how and when. See you soon !