Thursday, December 20, 2012

Krita Sketch is: Colourful

A quick recap of the main topic: My employer, KO GmbH, has been working on a touch version of Krita, called Krita Sketch, over the last few months, and has finally made the first release! So, i'm doing a bit of writing, talking about some of the work i've been doing as a part of this project. (you should also read the dot article, because it's good and has shiny ;) )

In the previous instalment i wrote about rounded corners, and mentioned there was something else in Krita Sketch which was round. Those who use Krita will have already encountered the colour wheel that's used to select colours in the application, and this is a very popular feature with the target audience, so of course we need it in Krita Sketch as well. This entry discusses the implementation of that element

An important point to be made here is that this will not be possible in Qt 5 (which is now finally out of the door, putting to shame all the snarky predictions of postponings  great work people!), and as such this point will need to be revisited once that comes around. However, as with all such things, there was a deadline so some shortcuts had to be made. This was one of those places where we felt it was more prudent to get it working right away, and then make it "correctly" later on. If you run into a similar situation, this will show you how. If you want to do it "the right way", there's comments on the topic here (you can still use the QQuickPaintedItem, but it is not recommended due to its inherent speed penalties - but if you have time constraints on your project, it's a straight forward way to reuse your existing work).

So, what we are talking about here is, of course, the colour selector item that you see a screenshot of above as it looks inside Krita Sketch. Under here you can see what it looks like inside Krita Desktop.

What you can see here is that there is, for all practical intentes and purposes, no difference between the two. The way this was done was, quite simply, to reuse the painting code from the widget without change.

Inside the declarative item there are a couple of bits of code which were unfortunately copied over from the widget version, but the code is reasonably small, so it's not all that much of an issue, to be fair. The code is based around the idea that you have two colour selection parts, the main part, and the sub part. For now we have only got a triangle with a circle around it, but we will be introducing the same modes as found in the desktop version at a later point in time (the code is already there, it simply is not exposed in the user interface yet). This means the paint method is really quite simple: Since the sub-parts already know how to paint themselves using QPainter, we can simply tell them to be painted in the area we have available.

Mouse events are handled very simply and similarly as well (just continue scrolling in that code there ;) ). First, on mouse down, we check whether we're handling foreground or background colours (left or right mouse button), and then we ask the main and sub components which of the two, if any, wants the input. When you then move the mouse, that component is passed the data, and that means you don't accidentally get something picked up elsewhere. As you drag the mouse around on the component, the colour is set, and Calligra's resource system is asked to handle this.

So, very simple approach as you can tell, but one which really does work, and provided some decidedly pleasant and rapid development.

To recap, if you are developing something from new, use the scene graph based drawing methods in Qt Quick 2, but if you have some existing code, you can use this method to produce a nice level of code reuse.

The word of the day is: Reusable

Labels: , ,


Anonymous Anonymous said...

Looks really nice!
One question though: How is the right-click feature supposed to work on a touchscreen?

20 December 2012 at 17:35  
Blogger sebas said...

How well does this widget work for fat fingers? This is one of those elements which are fine for mouse /pen usage, but suck for fingers since one covers the most interesting part and really needs pixel perfect selection...?

21 December 2012 at 10:35  
Blogger leinir said...

@sessellift Thanks! :) Well, as this is not just for pure touch devices, but also available on e.g. Ultrabooks (which have both keyboard and a normal mouse pad), we thought it would be sensible to just not limit ourselves there, and give people the option since it's so cheap for us to do. So, the app /is/ designed to work without that second mouse button (setting the background colour is doable just by tapping that area of the swatch), it's just also possible to do the "old" thing :)

21 December 2012 at 15:16  
Blogger leinir said...

@sebas A good question - basically, this is a case of indirection. It isn't unlike how you might think of a colour dropper (you know, click somewhere on an image to pick the colour from that point).

The current colour is always shown in the colour swatch, and you don't have to just keep tapping randomly until you hit the right one, you can drag as well (which also works with the colour picker, you can see the button to activate that in the toolbar), which will continuously update the current colour.

In short, i did worry about it at the beginning (oh no, you can't see what you're tapping on!), but it has turned out to simply not be an issue :)

21 December 2012 at 15:20  

Post a Comment

<< Home