still.alive()

It has been a long time since my last blog; luckily, a couple of days ago, I noted down my last exam session result, so now I’m ready to come back to KDEv-Land

I’ve started working with a new sparkling interface for the PlasMate TimeLine ( a concept that came up in my mind since Christmas holidays, after thinking to the actual limitations it has ), and I discovered how the Javascript API for Plasma is awesome and extremely fast to build my PoC, in order to see in a very little time how things will look like

So, stay tuned guys, cheers !

The PlasMate TimeLine refactored

After a looooong time since my last commit in PlasMate ( damn university duties ), in this last week I started modifying the TimeLine code in order to allow its placement in every edge of the app. Indeed, until my today’s commit, the TimeLine was implemented with a QListWidget, so you can display your items only in a vertical layout; if you tried to move the TimeLine on the top or the bottom edge, the ugly result is shown in the screenshot below:

At a first sight, it seems to be placed in the left edge of the screen, but if you pay more attention, you can see that the TimeLine widget is placed in the bottom edge (see the size grip under the red “??”  for comparison), which is not how it should be shown !!!

So, I started rewriting the TimeLine using now a QTableWidget to display the elements, but during this improvement I remembered where the TimeLine came from. The TimeLine i wrote for the GSoC is similar to the Workflow widget, and that widget was taken from the Okular sidebar by Ruphy when he started the very first basis of PlasMate. And, as you know, Okular’s Sidebar does a lot of things we don’t actually need, so I came up with a deep refactoring of the whole TimeLine source code.

So, after few days gone-by refactoring and fixing some bothersome bugs (the worse of them appeared when down-sizing the window, which causes the scrollbar to be show and partially cover the icons or the text, depending on the widget orientation), the result is a fully placeable TimeLine, with a source code reduced of by a 20% factor

Below, here it is a short video about how it behaves now.

It still has some ugly behaviours, but i hope to fix them in the next few days !

Coming soon: same diet for the workflow dockwidget

Some improvements on PlasMate TimeLine

These days I focused my efforts on some usability aspects regarding the TimeLine.

In the previous implementation, the TimeLine showed all the buttons needed to manage it in the same dock widget; thus enforcing the belief of a minor component that is not our goal.

With the commit I performed today, the “New SavePoint” button is placed now in the Workflow dock widget; so the user now consider SavePoints ( and the TimeLine ) as a key component. When creating a new project, the TimeLine will show only a disabled button, which suggests the developer to click on “New SavePoint” to init the TimeLine. This is how the interface looks now:

Moreover, the “Section” button, used to perform some important operation, has been moved from the bottom, to the top of the dock widget; that’s because its related actions are frequently performed and, if there are lots of SavePoints, the developer is forced to scroll down the TimeLine until reach that button. So it’s more useful to place it on the top.

Understanding and Using the TimeLine

As promised before, today I’m going to describe the basical concepts about the TimeLine, and how use it for the best developing experience, by giving you some examples.

The TimeLine is a powerful tool which allows you, as the name suggests, to “travel” into various states of your project called SavePoints. Let’s say that, during the developing process of an application, you are writing a method/feature and then you find out a new API which does that dirty work for you: so you need to cleanup your code and simply invoke that API. If the amount of new code you just wrote is small, you can simply Undo for each source file or, if you can’t, delete each related line of code, and then continue programming using the new API. But these operations are not trivial if that feature is deeply mixed in the code, or the number of files affected is high. It would be nice if you could revert your sourcecode in a previous state with one single mouse click. Of course the TimeLine can do that, by setting/deleting SavePoints.

What is a SavePoint and how to create it

You can think about it as a “photo” of the current state of your project: you can save as much states as you want, comment it for a later review, and also delete it. A TimeLine is simply a collection of these SavePoint, ordered in a chronological way.

When a new project is started within PlasMate, the TimeLine will look like the figure below:

Since the TimeLine is not created yet, the only entry displayed is “Not a SavePoint”, so let’s create our first SavePoint by clicking on it!

Here it is my example:

Every time you store a Savepoint, you have add at least a brief comment, so you can keep track of changes in your project.

After pressing Apply button, the TimeLine is initialized and your first SavePoint is saved; then, the TimeLine widget is updated and now displays with new info. If you move your mouse over the SavePoint, a popup will show you all the infos you need:

• Date and time of its creation;
• Author who created the SavePoint;
• Comments.

Certainly you noticed also a new item named “On Section: master”; don’t worry, I’ll talk about Sections later in this article

Well, now you know ho to create a SavePoint: usually, it’s a good practice to save it everytime you plan to start a new feature/add on.

So, a simple TimeLine layout could be something like this:

• SavePoint #0: added main script files;
• SavePoint #1: implemented settings interface;
• SavePoint #2: added resources files;
• SavePoint #3: implemente net services;
• …..

If you realize, as in the example i described in the beginning, that SavePoint #3 is useless because you discovered a function do_net_service(), you can delete your SavePoint in two different ways:

• Right click in the previous SavePoint: from the popup menu that will be showed, select “Restore SavePoint”; by doing this, all the subsequent SavePoint ( the one you want to delete, but also other saved after it, if present )will be deleted;
• Right click in the previous SavePoint: from the popup menu that will be showed, select “Move to this SavePoint”; with this command, you’re going back in the past: the wrong SavePoint, and a new Section is created.

Ok, now it’s time to introduce the concept of Section

What is a Section?

Do you remember the film Back to the Future ? When Martin travelled to the past and changed it, he discover that also the present has changed!

So, when a while ago you selected“Move to this SavePoint”, you made a trip back in time and PlasMate automatically asks you to create a new Section, in order to preserve the actual story ( saved in the Section called master ).

But the Sections are even more powerful! For example, you can use the master section to release the stable version of your app, and create a Section named devel used to develop more advanced ideas and not yet stable to be released. The interesting feature of Section is that they can me merged together; so, when your devel Section is stable enough, you can merge it with the “official” branch, and then you can delete it or continue with new cool ideas =)

Note that the TimeLine will show you only the current section, with its related commits !!

Example of a merge:

For any question or further explanations, feel free to ask me =)

News from the PlasMate team =)

Ok, it’s time to post some shots about the application we are developing.
But, first of all, I have to warn you that it’s still in an early stages, so you must be patient and wait an other couple of weeks to see PlasMate fully working =)

Well, let me show you our current PlasMate state.

The Welcome Screen

This is what you see when PlasMate is started:

Ok, we are still looking for a logo =P

By the way, the startup screen is pretty clean and simple, and this is the feeling we want the developer have when using PlasMate.

To start creating your own project, your choices are simply two:

• Resume a previous project, listed under the label “Continue working on …”;
• Start a new project by selecting the sought type from the “New Project” list.

Optionally, you can also import a project, but this function is not yet implemented.

If a new project is selected, it’s necessary to add other infos so a new page is shown.

New Project Page

As you can see, when a new project is selected, PlasMate automatically sets up some commons parameters. It detects your username, and put that

information in the “Author” field; then creates a fake email, and select Python as scripting language for that project. If the developer is satisfied of these default settings, the only action to perform is typing the project name and hit Enter key or “Create!”.

Otherwise, you can modify these parameters as you want and create the project:  in this case PlasMate will store the new parameters and, the next time you’ll start a new project, PlasMate will show the last username, email and scripting language selected instead of the default parameters. Cool feature, don’t you ? =)

The Main Window

After starting or resuming a project, the real working interface appears:

On the letf side, you can see a dock widget named “Workflow”. It’s purpose manage system-wide operation, such as show the startup page, the Edit page, allow the developer to pack and publish his project, and show the Documentation.

In the center is visible the Edit page, which shows the project structure splitted in categories, such as Executable Scripts, Images, User Interfaces.

Ops I forgot to tell you something important about PlasMate

When you start a new project, PlasMate takes charge to create the whole directory structure for a scripted plasmoid, as well creating its correspondig metadata.desktop file and filling with the information needed ( package name, language, main script location, author and email ). It also creates a default main script file, named as your project lowercase and, according with the language used,  this file is filled with a basical implementation

So no more getting crazy to setup the directories in the right way, writing .desktop files and importing/including the correct modules to get your app working: PlasMate will do all this boring stuff for you, letting you to focus only on one thing: coding

Ok, coming back to the Edit page, you can select one of the files created by default, or create a new one, and then click on it to start editing.

As regards the TimeLine, I’ll cover it’s usage later in an other post, because its usage is very important and powerful, so it will be described in a separate section.

At the bottom we can find the Previewer, used to display the project during the development process.

The Editor

What are you seeing right now is the default main file ( named feedreader.py ) opened with PlasMate editor. In the header appear the username and email previously defined, and also the date and time of creation of the file but, more important, the basical class structure ( class FeedReader ) and the needed module imported !

Soon I’ll write a deep article about the TimeLine, its usage and why you are encouraged on use and abuse it !!

Stay tuned