So we will need to add variables to our Tutorial class to keep track of these. So change tutorial.h to look like the following:

So we will need to add variables to our Tutorial class to keep track of these. So change tutorial.h to look like the following:

−

<code cppqt>

+

<syntaxhighlight lang="cpp-qt">

#ifndef PLASMA_WALLPAPER_TUTORIAL

#ifndef PLASMA_WALLPAPER_TUTORIAL

#define PLASMA_WALLPAPER_TUTORIAL

#define PLASMA_WALLPAPER_TUTORIAL

Line 50:

Line 50:

#endif

#endif

−

</code>

+

</syntaxhighlight>

We will also need to change our paint() function in tutorial.cpp so that it uses these variables now:

We will also need to change our paint() function in tutorial.cpp so that it uses these variables now:

−

<code cppqt>

+

<syntaxhighlight lang="cpp-qt">

void Tutorial::paint(QPainter *painter, const QRectF& exposedRect)

void Tutorial::paint(QPainter *painter, const QRectF& exposedRect)

Line 67:

Line 67:

}

}

−

</code>

+

</syntaxhighlight>

=== Step 2: Add code to load and save configurations ===

=== Step 2: Add code to load and save configurations ===

Line 73:

Line 73:

To load and save our configurations we need 2 functions called init() and save(). Add the following lines to our tutorial.h:

To load and save our configurations we need 2 functions called init() and save(). Add the following lines to our tutorial.h:

−

<code cppqt>

+

<syntaxhighlight lang="cpp-qt">

class Tutorial : public Plasma::Wallpaper

class Tutorial : public Plasma::Wallpaper

{

{

Line 92:

Line 92:

QString textString;

QString textString;

};

};

−

</code>

+

</syntaxhighlight>

Now we need to implement these functions in tutorial.cpp:

Now we need to implement these functions in tutorial.cpp:

−

<code cppqt>

+

<syntaxhighlight lang="cpp-qt">

void Tutorial::init(const KConfigGroup &config)

void Tutorial::init(const KConfigGroup &config)

Line 116:

Line 116:

}

}

−

</code>

+

</syntaxhighlight>

Tutorial::init(), gets called whenever the wallpaper needs to reload it's configurations. In there we use config.readEntry() to read each entry from our configuration file. The first argument of config.readEntry() is the name of the configuration entry. The second argument is the initial value for when we do not have that entry. config.readEntry() will try to read the value for the entry in our config file, if it can't it will use the initial value, and return it.

Tutorial::init(), gets called whenever the wallpaper needs to reload it's configurations. In there we use config.readEntry() to read each entry from our configuration file. The first argument of config.readEntry() is the name of the configuration entry. The second argument is the initial value for when we do not have that entry. config.readEntry() will try to read the value for the entry in our config file, if it can't it will use the initial value, and return it.

Line 140:

Line 140:

We also need to add our config file to our CMakeLists.txt. Add the following line to CMakeLists.txt:

We also need to add our config file to our CMakeLists.txt. Add the following line to CMakeLists.txt:

In createConfigurationInterface() we put our configuration interface on a new QWidget. Then we set each of the widgets in the interface to their appropriate values. Then we connect each widget's change signal to our settingsModified() slot. This will cause settingsModified() to be called whenever any widget's value is changed in our interface. Next we connect our settingsChanged(bool) signal to our parents settingsChanged(bool) so that the dialog containing our interface can react to the change (by enabling it's 'Apply' button for example). Finally we return the widget so that it can be displayed in the dialog.

In createConfigurationInterface() we put our configuration interface on a new QWidget. Then we set each of the widgets in the interface to their appropriate values. Then we connect each widget's change signal to our settingsModified() slot. This will cause settingsModified() to be called whenever any widget's value is changed in our interface. Next we connect our settingsChanged(bool) signal to our parents settingsChanged(bool) so that the dialog containing our interface can react to the change (by enabling it's 'Apply' button for example). Finally we return the widget so that it can be displayed in the dialog.

Line 258:

Line 259:

To compile we follow the same steps as last time:

To compile we follow the same steps as last time:

−

<code bash>

+

<syntaxhighlight lang="bash">

mkdir -p build

mkdir -p build

cd build

cd build

Line 264:

Line 265:

make

make

sudo make install

sudo make install

−

</code>

+

</syntaxhighlight>

== Testing ==

== Testing ==

Line 270:

Line 271:

Again we can test using the Plasma wallpaper viewer:

Again we can test using the Plasma wallpaper viewer:

−

<code bash>

+

<syntaxhighlight lang="bash">

plasmawallpaperviewer -p tutorial

plasmawallpaperviewer -p tutorial

−

</code>

+

</syntaxhighlight>

Or we can test it directly on our desktop. Restart plasma using:

Or we can test it directly on our desktop. Restart plasma using:

−

<code bash>

+

<syntaxhighlight lang="bash">

kquitapp plasma-desktop; sleep 1; plasma-desktop

kquitapp plasma-desktop; sleep 1; plasma-desktop

−

</code>

+

</syntaxhighlight>

Then right click on your desktop, go to Desktop Settings>Wallpaper>Type and select 'Tutorial'.

Then right click on your desktop, go to Desktop Settings>Wallpaper>Type and select 'Tutorial'.

Line 288:

Line 289:

If you want more practice, you can try adding a configurable background image to our wallpaper.

If you want more practice, you can try adding a configurable background image to our wallpaper.

−

In the next tutorial we will look at how we can use mouse input to interact with our wallpaper.

+

In the [[Development/Tutorials/Plasma/WallpaperDoubleBuffer|next tutorial]] we will look at how to make our wallpaper more efficient.

Plama Wallpaper Tutorial 2 - Configuration

Introduction

In the previous tutorial we made a simple wallpaper where we had some blue text saying 'Hello World'. In this tutorial we will add some configuration options to our wallpaper so that the user can change the colors, text and font of the wallpaper.

Adding Configuration Options

There are 4 steps to adding configuration options to our wallpaper:

Decide what should be configurable.

Add code to load and save configurations.

Design the interface of the configuration dialog.

Add code to show the configuration interface.

Step 1: Decide what should be configurable

As we said above we want the user to be able to change:

The text and background color

The font of the text

The text itself

So we will need to add variables to our Tutorial class to keep track of these. So change tutorial.h to look like the following:

Tutorial::init(), gets called whenever the wallpaper needs to reload it's configurations. In there we use config.readEntry() to read each entry from our configuration file. The first argument of config.readEntry() is the name of the configuration entry. The second argument is the initial value for when we do not have that entry. config.readEntry() will try to read the value for the entry in our config file, if it can't it will use the initial value, and return it.

After we finish loading our config options, we repaint the screen by emitting the update() signal on our entire wallpaper.

In Tutorial::save() we write our variables back into the config file.

Note that we did not have to specify a location or name for our config file. Plasma will automatically handle that for us. All we need to worry about is reading and writing the entries we are interested in. If you are curious you can see what these configuration files look like at $HOME/.kde4/share/config/plasma-desktop-appletsrc.

Step 3: Design the interface of the configuration dialog

We will now design the interface that will be presented to the user when they try to configure our wallpaper. We can do this using Qt Designer. I will not go into the details of how to make interfaces in this tutorial. For help you can refer to the Qt Designer Manual.

When creating a new form in Designer, choose the 'Widget' option. Change the name of the form/QWidget to 'Config'. Now we can make labels and widgets for each of our configuration options. Make sure to give meaningful names to the widgets, for example textString for the line edit.

Also we will need to lay it out nicely. The end result might look something like this:

Save the interface in our wallpaper directory as 'config.ui'.

We also need to add our config file to our CMakeLists.txt. Add the following line to CMakeLists.txt:

In createConfigurationInterface() we put our configuration interface on a new QWidget. Then we set each of the widgets in the interface to their appropriate values. Then we connect each widget's change signal to our settingsModified() slot. This will cause settingsModified() to be called whenever any widget's value is changed in our interface. Next we connect our settingsChanged(bool) signal to our parents settingsChanged(bool) so that the dialog containing our interface can react to the change (by enabling it's 'Apply' button for example). Finally we return the widget so that it can be displayed in the dialog.

In settingsModified() we get the values from our widgets and put them in our variables. We then call settingsChanged(bool) so that the parent dialog can react. Then we repaint our entire wallpaper.