Category Archives: Graphics

Choose Your Own Experience in Plasma 5.8 and beyond

GraphicsSoftware

One of the key points of Plasma is while giving a simple default desktop experience, not limiting the user to that single, pre-packed one size fits all UI.
Its strength is to be flexible to greatly different user needs, “Simple by default, powerful when needed”.
Several years ago, the Visual Design Group had the idea of making easy to build and share desktop layouts to make easy to test wildly different user interfaces, see this old post by Thomas on the topic.
Since then, work on it has been going on, mostly on the infrastructure needed to make it a reality, and in Plasma 5.8 the first pieces are there, tough still far from the complete experience we want to offer.

The support for Look and Feel packages is there since a while (5.3 or so) that’s what one of those package can do:

  • Provide a default layout for when Plasma starts for the first time, it was used for distributions to personalise their UI, but now is easier for users as well.
  • Provide some default look options, like what color scheme to use, what icon theme etc
  • (advanced) provide the actual implementation of some UI, such as KRunner, the Alt+Tab window switcher dialog, the lock screen

So far the default Plasma layout provided by the Look and Feel theme was used only when starting up for the first time, on a clean user home (therefore very useful for distributions) but sice Plasma 5.8, in the Workspace theme -> Look & Feel section of system settings there is an option to load the new layout when switching the look and feel theme. Not as default as is a destructive action that will remove your current Desktop setup.

desk

The other component is a tiny little application shipped in the “Plasma Sdk” package that’s called lookandfeelexplorer.
lookandfeelexplorer
With this applciation you can:

  • Create a new Look and Feel theme
  • Edit the metadata and thumbnail of a locally created/installed theme
  • Create a default javascript desktop layout based upon your current Plasma setup
  • Create a defaults file based upon your current setup as well, such as color scheme and icon theme

The last two are the central part of sharing your idea of “the perfect desktop” with others, linked with the integration between the Look & Feel systemsetting module and the KDE store, also new in Plasma 5.8.

It’s still a preliminary feature, as ideally in the future if your shared Look & Feel theme depends for instance from a particular icon theme or a particular 3rd party plasmoid, the store integration will download those dependencies as well.

QtQuickControls2 and Desktop apps

GraphicsSoftware

In the screenshot below, the desktop/Breeze-looking scrollbar it’s actually a control coming from QtQuickControls2.
spectacle-c13179

Since one of the goals of Kirigami is to support also desktop applications, while working on Kirigami 2 (that is mostly porting it to be based on top of QtQuickControls2) I had the need for it to continue to integrate with desktop applications as well.
Unfortunately, desktops are not the primary target for QtQuickcontrls2, and while in Qt 5.9 some much needed desktop-related features, such as mouseover effects are getting back in, being as unrecognizable as possible with QWidget-based applications is definitely not in the roadmap.

Luckily, theming QQC2 is easy, so I’ve started a QtQuickControls2 style that integrates with desktop QStyle-based widgets (actually, based upon the QtQuickControls1 QStyle painter machinery).

If we are serious in using QtQuickControls2 in applications shipped together Plasma, we also must make sure they integrate well with the Plasma desktop’s Breeze look and feel.

I started by theming the scrollbar because I felt it was one of the hardest controls to do.
in QtQuickControls2 the scrollbars are supposed to be an attached property of flickables..
This is pretty simple for the mobile use case, turns out it’s a nightmare to create scrollbars that behave like we are used to in the desktop (unless you’re on mac, which insists to look more and more like iOS), which need to be

  • always visible
  • have optional little arrow buttons for increment/decrenent
  • be besides the flickable, not overlapping the contents, because again, they’re always visible
  • use the global desktop theme

I’ve been able to do all of the following, tough it’s necessary to reintroduce the QtQuickcontrols1 component called ScrollView (which imo was a mistake to remove in QtQuickControls2) which can correctly lay out and size the Flickable relative to its ScrollBar.
Hopefully, you’ll be soon able to build an application with QtQuickcontrols2 and Kirigami2 that feels right at home in a Plasma desktop.
What about Plasma-themed QQC2 controls for plasmoids? that will come too, of course!

Icon colors

GraphicsSoftware

Breeze icons are very simple SVG files, especially the ones used for actions that are mostly monochromatic are very simple, and that’s part of their appeal.
Since some time, Plasma themes that are SVG files as well have the capability of being colored with system themes.
So, why not doing this for every icon as well?
One problem with monochromatic icons is that they can lose contrast in particular situation: when the application uses another color scheme or in places such as in menu items uder the mouse, that get a blue background, giving a not too visible dark gray on dark blue.
That’s one of those “last mile” polishing issues that may be small, but have quite a big impact on the perceived quality of the finished product.

Starting with Plasma 5.7 Icons will behave the same way as Plasma themes: they can have an internal stylesheet which colors will be replaced at runtime with the colors from the system theme.

Here, Dolphin with the colors theme “Wonton Soup” and all the breeze icons following the text color of the theme:
dadel1

Some applications, like Gwenview can use a completely custom color scheme, in the case of GwenView, it switches to a dark color scheme when fullscreen, regardless of the normal system color theme:
colors2

Icons that are in a “selected” state such as the menu item under the mouse or the current dolphin sidebar item change their color, just like the text does too:
colors1
Here with some custom colors for the highlight areas:
colors3

How to create a compatible icon?

First of all, Big kudos to Andreas for updating the whole breeze theme to the standard described below πŸ˜€
This is a quite minimal SVG file that supports colors from the system theme (Plasma Svg themes follow the same convention):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="22"
   height="22"
   id="svg3049"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="coloredsvgicon.svg">
  <defs
     id="defs3051">
    <style
       type="text/css"
       id="current-color-scheme">
      .ColorScheme-Text {
        color:#4d4d4d;
      }
      .ColorScheme-Background {
        color:#eff0f1;
      }
      .ColorScheme-Highlight {
        color:#3daee9;
      }
      .ColorScheme-HighlightedText {
        color:#eff0f1;
      }
      .ColorScheme-PositiveText {
        color:#27ae60;
      }
      .ColorScheme-NeutralText {
        color:#f67400;
      }
      .ColorScheme-NegativeText {
        color:#da4453;
      }
      </style>
  </defs>
  <metadata
     id="metadata3054">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Capa 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-421.71429,-525.79074)">
    <rect
       y="525.79071"
       x="421.71429"
       height="22"
       width="22"
       id="rect4102"
       style="fill:currentColor;fill-opacity:1;stroke:none"
       class="ColorScheme-Text" />
  </g>
</svg>

Here there are two important parts.
The first is the definition of the actual CSS stylesheet:

<style
       type="text/css"
       id="current-color-scheme">
      .ColorScheme-Text {
        color:#4d4d4d;
      }
      .ColorScheme-Background {
        color:#eff0f1;
      }
      .ColorScheme-Highlight {
        color:#3daee9;
      }
      .ColorScheme-HighlightedText {
        color:#eff0f1;
      }
      .ColorScheme-PositiveText {
        color:#27ae60;
      }
      .ColorScheme-NeutralText {
        color:#f67400;
      }
      .ColorScheme-NegativeText {
        color:#da4453;
      }
      </style>

The colors defined in Text, Background, Highlight etc will be replaced with the corresponding colors from the system theme (look at the Systemsettings module to configure colors to see what colors they actually are)
This also defines a very minimal palette of “semantic” colors: you have the foreground and background colors for purely monochromatic shapes, and other colors for small accents that make the icon slightly more expressive than purely monochromatic such as Highlight, positive, negative (an “x” icon to close will be usually of “negative” color)

The other important part is the actual definition of the shape:

<rect
       y="525.79071"
       x="421.71429"
       height="22"
       width="22"
       id="rect4102"
       style="fill:currentColor;fill-opacity:1;stroke:none"
       class="ColorScheme-Text" />
  </g>

The rectangle has class=”ColorScheme-Text” that will make the stylesheet match to the class definition of ColorScheme-Text, that defines a color.
In order to actually apply that color, you can see the attribute style=”fill:currentColor”. It’s important no other colors are defined in the style attribute.

Tooltip handling

GraphicsSoftware

An informational tooltip in Plasma is an item that shows extra informations for items such as task items, and is a single entity, moving along what you want to know more of, rather than magically appear out of nowhere (that’s the kind of “magic” the human brain doesn’t like).
A problem with Plasma tooltips was that they tried to animate themselves, that is usually not a good idea on X11, due to its old async architecture.
But KWin to the rescue! if we want a smooth animation of both the position and the size of the tooltip, the compositor is the place where to do it.
With its scripting user interface, it was even possible to implement it completely in JavaScript.
You can see it in this video taskbar tooltips animating and resizing/morphing in a similar way Windows 7 does.

Btw, the animations in he video looks way less smooth than are in reality, due how terrible screencasting is under X11, but for that:

Wayland will fix it!

Wayland will fix it!

Plasma in all colors you like

GraphicsSoftware

The Plasma theme system had a feature (since many years, actually) in which SVG elements done in a certain way can be recolored with colors coming from a theme file.
The Breeze Plasma theme (and now all the monochrome Breeze icons too) was all done in this way, in part to prepare what I’m, presenting today:

If the colors in the SVG can follow a color scheme defined in the theme, they can follow also a system wide color theme no?
For Plasma 5.6, (as a feature that was requested really a lot) the default Breeze theme, while by looking familiar, it will change color following the applications scheme.

However, if you prefer to maintain a clear distinction between the workspace and the applications (And I’m definitely among them), there are still available the themes “Breeze Light” and “Breeze Dark”, just as before (Oxygen and Air also received some nice visual updates).

Let’s look at some screenshot:

So far so normal, typical Breeze theme we had so far.
dynamictheme1

Let’s try with a different color set:
dynamictheme2

Or another one, this time darker.
dynamictheme3

Some Neon Artwork

BlaBlaGraphicsSoftware

Quoting from the announcement:
“KDE Neon is the intersection of these needs using a stable Ubuntu long-term release as its core, packaging the hottest software fresh from the KDE Community ovens. Compute knowing you have a solid foundation and enjoy the features you experience in the world’s most customisable desktop.”

This is pretty exciting for anyone who wants a stable core system with a setup of KDE Plasma software on to as recent as possible, setted-up and configured as good as possible, with hopefully less issues like “distro X has a slightly outdated version of kibrary Y which is know that makes app Z crash”.

Hell, I was so excited that during a sleepless night, I has been completely possessed by the Muse and I had to do this artwork based on a riff of its logo:
NEON by KDE

NEON written as a neon sign, how original :p It’s pretty tacky but it’s intended to be, here for your viewing pleasure at a typical wallpaper resolution.

Choose your Look and Feel experience

GraphicsSoftware

Plasma 5.1 will make way easier to fine-tune their workspace to their needs.While already very powerful, it was not always trivial, so now on one hand it will be possible choose between plasmoids that offer the same feature with a very simple UI.
On the other hand, ever wanted to set themes, look and feel of your desktop, but was discouraged by how many places you had to change themes to make the experience as you wanted? being icon theme, widget style, plasma theme, cursors etc…
Plasma 5.1 will support the concept of Look and Feel packages (or “mega themes” if you like) Basically an one stop place to set the look and feel of the whole desktop.
lookandfeel
To start, there will be a “Breeze” and an “Oxygen” experience, and in the future, let’s hope yours too πŸ˜‰

In the first release it will be very basic, but in the future it will grow more complete, allowing to more fine-tune individual components, downloading new “look and feels” from the internet etc.

Technically, Look And Feel themes are plasma packages, that contain two things: configuration files for defaults such as icons, colors, cursors etc
and QML files for certain parts of the workspace ui, such as the splashscreen, the lockscreen etc, allowing from very simple things (like a theme that just sets icon theme, widget style etc) to very comprehensive ones, that change completely the logout dialog, lockscreen etc.

Now it’s polishing time

BlaBlaGraphicsSoftware

Work in Plasma Next is proceeding frantic as usual.
We are around a week from the release of the first Alpha (mark your calendard from a week from now), and the feature count is getting close the current release of KDE Plasma Desktop, in order to get the transition as smooth as possible.

Of course we aren’t trying to just do a carbon copy port, but to give some nice new features and improvements, such as a dramatically better behavior of the system tray (no more weird popups-from popups!), waay better support for high DPI screens and a nice new rewamped notifications system and UI.

The big thing tough is the new capabilities of the frameworks: KDE Frameworks 5 and the new Plasma Framework, with a desktop shell all based on QML2: so many things that in the past we couldn’t do, now will be possible.

And now as usual, a sneak peek of something that will not be in the alpha release yet.
sneak peek
The KDE Visual Design Group is doing a terrific job across very different areas of Plasma Next, the little area I’m collaborating with is the Plasma theme itself (a lot more nice stuff in many different areas will arrive from them in the future). I must say I’m impressed by their work.

But what if I have a screen with a ludicrous amount of DPI?
sneakhidpi

All of this is heavy under construction, so is still subject to a *lot* of changes until the final version πŸ˜‰

Plasma2: all about elegance

BlaBlaGraphicsSoftware

Ok, I lied: it’s about elegance, performance, simple and great API, better user experience, more cross-device compatibility, in the end about improvement on all fronts.

And a very important thing is to gove an user interface more beautiful, tidier, more elegant.
One example is what Sebas talked about yesterday.
That new calendar is kindof a blueprint of how the UI of the Plasma workspace is being reworked: no huge and breaking changes, but fixing small layout problems, paying attention to the visual balance of the elements, and way better typography.
One thing that was pointed out is that its contrast or readability it was still dependent on what kind of wallpaper or windows you have behind it.

That’s what we came up with:
dadel2
(Note, the panel is from Plasma1, the systemtray and clock area will look much better πŸ˜‰

Here what it’s changed: contrary to what it seems, the window is *not* more opaque than the screenshots of yesterday, but it’s a modification of the blur effect in KWin.

What it does, it reproduces the effect of seeing something trough a frosted glass: what do you see is a combination of what’s behind the glass, the color of the glass, and the reflection of light reflected by the glass.
This last part is what has been added: it adds a bit of light to the color, but unlike a semi-transparent white window in front, it conserves all the information about colors.
So while being almost white, therefore very contrasted with the text, but still looking happy and colorful, instead of more dull and opaque if the theme was white, 95% opaque.

Time to refresh some air

Graphics

In the last entries I posted some screenshots of some upcoming features in the Plasma Workspace in 4.10, and they shown also a glimpse of another thing: a new default theme, on which I was working on since a while together with Nuno.

The new default theme landed today in git and it will be in the Plasma Workspace 4.10 release (disclaimer: the wallpaper is an old included one, the new default will be presented in a while ;)):

desktop

It’s the typical case of a radical redesign, in which everything changed, in order to seem that nothing has changed, just a general feeling of feeling more “right”.

The key design principle is to make the whole appearance “lighter”. Most graphical elements that didn’t have an actual “functional” meaning are now removed, as well as gradients (a pattern that says “3D”, usually reserved for indicating interactivity) on all elements that are not clickable.

Plasmoids looks completely flat now, the taskbar has now an element around only the active task, and the shadows of the items are different as well. On a related note, now all the popups will use KWin to draw their shadow, just like the panel. This means better layout and better integration with other windows.

widget gallery
widget gallery