Development/Tutorials/Plasma4/Ruby/Blinker

Abstract

This tutorial explains how to use SVG artwork in a Ruby plasmoid and how to interact with it in the simplest way possible.

Introduction

Perhaps the simplest SVG animation in Plasma is the visual emulation of a monochrome LCD panel as its elements do not move but are simply turned on and off to compose an understandable visual effect. And the simplest effect is blinking.

As we both do not yet know how to import and use an SVG picture we are going to build a very simple plasmoid and reuse an SVG from a non Ruby plasmoid. Then we'll ask a more experienced Ruby user on irc to fill in the blanks, without forcing them to write a time consuming complete Plasma Ruby SVG tutorial.

To understand the initial set-up you should read an introductory tutorial like Simple Paste Applet.

Layout

We'll be reusing some simple number display from the C++ coded plasma Weather Station, more specifically the SVGZ LCD temp. panel. And the plain plasma lay-out from the Simple Paste Applet:

• contents/
  • code/
    • main.rb
  • images/
    • lcd_panel.svgz
• metadata.desktop

Notice that we downloaded the zipped svg file and placed it in the contents/images folder as described on the Plasma Package convention, to make sure we also (double) click the svgz file and see an actual picture, if you see semi random text you mistakenly downloaded a web page of the KDE archive instead of the picture file.

The metadata.desktop file looks like this:

[Desktop Entry] Name=Monochrome LCD demo Comment=This is a very simplified applet written in Ruby Icon=chronometer Type=Service ServiceTypes=Plasma/Applet

X-Plasma-API=ruby-script X-Plasma-MainScript=code/main.rb

X-KDE-PluginInfo-Author=Me [email protected] X-KDE-PluginInfo-Name=blinker X-KDE-PluginInfo-Version=0.1 X-KDE-PluginInfo-Website=http://plasma.kde.org/ X-KDE-PluginInfo-Category=Examples X-KDE-PluginInfo-Depends= X-KDE-PluginInfo-License=GPL X-KDE-PluginInfo-EnabledByDefault=true

The main.rb initially looks like this:

require 'plasma_applet'

module Blinker

 class Main < PlasmaScripting::Applet
   def initialize parent
     super parent
   end

   def init
     set_minimum_size 150, 150
   end
 end

end

A working monochrome LCD plasmoid

After a more experienced Ruby programmer has expanded the code to include the SVG and to make the three zero digits blink on for half a second and then off for half a second, like an unset alarm clock, the code looks like this:

?

This is all we need to program our own monochrome LCD plasmoids. In a next tutorial I'll explain how to create them with an SVG drawing application, as I've already played with SVG drawing.

The C++ SVG code

(this chapter will be removed later, but will remain accessible in the page history)

Indeed the Ruby coders have an overflowing KDE agenda and no time to dissect the C++ code, they do have some time to translate a simple C++ plasmoid into Ruby as that is apparently a quick job when it's straight forward. So I am going to ask a C++ Weather Station coder to strip their plasmoid into the blinking display which works as in the chapter above and to post the C++ code right below here:

// Place your code here.

Interaction

Perhaps our C++ programmer has some more time to spare and can show us how our plasmoid can be made to respond to mouse clicks on the SVG elements. Well only if such interactions are even possible in a plain plasmoid. For our second applet we want to know how to interact with SVG so we want the blinker to blink only the most right digit when we click on any element of the last digit. And to blink the right two digits when we click the middle one and again all three digits when we press the left one. The code now looks like this:

// Place your code here.

Speed optimization

SVG rendering is considered slow when compared to rendering PNG's. That is why during initiation or resizing of an SVG application the rendered SVG is sometimes cached as a bitmap or as multiple bitmaps, or sprites, which contains rendered elements as plain pixels which are kept and copied to a canvas which, once composition is complete, is painted over the bitmap being displayed in one go, making for an instant looking update of everything on the screen. Does plasma require some sort of canvas to compose elements on? And if so. Can you show us one or some versions of the blinking applet which uses bitmap caching?

// Place your code here.

Three times almost the same example may seem over the top for you but remember that this tutorial is being written by a novice for novices, and I simply need to see the changes to understand the steps taken and their logic.