← Development/Tutorials/Plasma4/Ruby/Blinker You do not have permission to edit this page, for the following reason: The action you have requested is limited to users in one of the groups: Users, Administrators, trusted, KDEDevelopers. You can view and copy the source of this page. == 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 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 [http://techbase.kde.org/Development/Tutorials/Plasma/Ruby/SimplePasteApplet Simple Paste Applet]. == Layout == We'll be reusing some simple number display from the C++ coded plasma [http://websvn.kde.org/trunk/KDE/kdeplasma-addons/applets/weatherstation/ Weather Station], more specifically the [http://websvn.kde.org/trunk/KDE/kdeplasma-addons/applets/weatherstation/lcd_panel.svgz?view=log 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 [http://techbase.kde.org/Projects/Plasma/Package 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 <tt>metadata.desktop</tt> file looks like this: <code ini> [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 X-KDE-PluginInfo-Emailemail@example.com 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 </code> The <tt>main.rb</tt> initially looks like this: <code ruby> require 'plasma_applet' module Blinker class Main < PlasmaScripting::Applet def initialize parent super parent end def init set_minimum_size 128, 128 end end end </code> == A working monochrome LCD plasmoid == The naming convention for the SVG elements is similar to that of the Qt API, but still each element has a unique ID. The three digits grouped as one is named: <code ruby> temperature </code> And the ID of the three digits are, from left to right: <code ruby> temperature:2 temperature:1 temperature:0 </code> To create three zeros we use the elements named: <code ruby> temperature:2:A temperature:1:A temperature:0:A temperature:2:B temperature:1:B temperature:0:B temperature:2:C temperature:1:C temperature:0:C temperature:2:D temperature:1:D temperature:0:D temperature:2:E temperature:1:E temperature:0:E temperature:2:F temperature:1:F temperature:0:F </code> The list starts with the top one named A and goes clockwise. The elements we don't use, because that would create the figure eight, are the ones in the middle which are named: <code ruby> temperature:2:G temperature:1:G temperature:0:G </code> There are also two usable decimal points in this SVG, which we don't use in this tutorial named: <code ruby> temperature:2:DP temperature:1:DP </code> But we start by importing the grey background with the rounded corners and using that as the shape of our plasmoid, it's ID has the name: <code ruby> lcd_background </code> Wait a minute, we could place our finished [http://techbase.kde.org/Development/Tutorials/Plasma/Ruby/SimplePasteApplet Simple Paste Applet], as seen [http://techbase.kde.org/Development/Tutorials/Plasma/Ruby/SimplePasteAppletCompleted on this page], onto this SVG background. [http://techbase.kde.org/Development/Tutorials/Plasma/Ruby/SimplePasteAppletCompletedSVG Click this sentence to see the what the codebase of it would look like]. (Refers to an empty page as I don't have a clue how to import and set an SVG) Hey don't stray, we have much to learn about SVG. The idea for our plasmoid is as follows: once created we repeat the following steps: * clear the screen by drawing lcd_background again. * wait 0.5 second * draw the elements for three zeros * wait 0.5 second We don't use any bitmap buffering unless required to do so, this way we can see if tracing simple SVG elements has any impact on the CPU. The widget in the C++ Weather Station plasmoid was custom created in the KDE 4.0 days, I don't know why (perhaps to optimize bitmap buffering) nor do I know if plasma has further improved SVG support since 4.0. I just picked the Weather Station plasmoid because if has a nice, clean and clear named SVG (notice that the Weather Station has two interfaces and two SVGs, one huge and complex one and the minimized one used here). 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: <code ruby> require 'plasma_applet' module Blinker class Main < PlasmaScripting::Applet def initialize parent super parent end def init set_minimum_size 128, 128 end def init @svg = Plasma::Svg.new(self) @svg.imagePath = package.filePath("images", "lcd_panel.svgz") end def paintInterface(painter, option, contentsRect) @svg.resize(size()) # @svg.set_svg = package.filePath("images/lcd_panel.svgz", "temperature:1") @svg.paint(painter, 0, 0) end end end </code> 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. == Interaction == Perhaps the experienced 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: ? == 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? ? Don't forget that I'm not asking you to write the tutorial, commenting your code should be sufficient for me to write a story about it. Return to Development/Tutorials/Plasma4/Ruby/Blinker. Retrieved from "https://techbase.kde.org/Development/Tutorials/Plasma4/Ruby/Blinker"