Development/Tutorials/Plasma/Ruby/Blinker - Revision history

Neverendingo: Text replace - "" to ""

2011-06-29T20:54:21Z

Text replace - "</code>" to "</syntaxhighlight>"

Neverendingo: Text replace - "`" to ""`


2011-06-29T20:42:32Z
Text replace - "<code ruby>" to "<syntaxhighlight lang="ruby">"

				
				
				
				
			
			← Older revision
			Revision as of 20:42, 29 June 2011
			
Line 50:
Line 50:
  The <tt>main.rb</tt> initially looks like this:   The <tt>main.rb</tt> initially looks like this:
    
− <code ruby> + <syntaxhighlight lang="ruby">
  require 'plasma_applet'   require 'plasma_applet'
    
Line 69:
Line 69:
  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:   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> + <syntaxhighlight lang="ruby">
  temperature   temperature
  </code>   </code>
Line 75:
Line 75:
  And the ID of the three digits are, from left to right:   And the ID of the three digits are, from left to right:
    
− <code ruby> + <syntaxhighlight lang="ruby">
  temperature:2   temperature:2
  temperature:1   temperature:1
Line 82:
Line 82:
    
  To create three zeros we use the elements named:   To create three zeros we use the elements named:
− <code ruby> + <syntaxhighlight lang="ruby">
  temperature:2:A        temperature:1:A        temperature:0:A   temperature:2:A        temperature:1:A        temperature:0:A
  temperature:2:B        temperature:1:B        temperature:0:B   temperature:2:B        temperature:1:B        temperature:0:B
Line 92:
Line 92:
    
  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:   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> + <syntaxhighlight lang="ruby">
  temperature:2:G   temperature:2:G
  temperature:1:G   temperature:1:G
Line 99:
Line 99:
    
  There are also two usable decimal points in this SVG, which we don't use in this tutorial named:   There are also two usable decimal points in this SVG, which we don't use in this tutorial named:
− <code ruby> + <syntaxhighlight lang="ruby">
  temperature:2:DP   temperature:2:DP
  temperature:1:DP   temperature:1:DP
Line 105:
Line 105:
    
  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:   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> + <syntaxhighlight lang="ruby">
  lcd_background   lcd_background
  </code>   </code>
Line 121:
Line 121:
  Now download [[Media:Lcd_panel_08.svg‎]], the new svg, and place it inside the images folder of your plasma directory. The render engine will now render each element at its original location and the paint instructions are simple and reliable. In fact the following code looks a lot like the ruby-tiger example code, only now we paint multiple times to compose the wanted result:   Now download [[Media:Lcd_panel_08.svg‎]], the new svg, and place it inside the images folder of your plasma directory. The render engine will now render each element at its original location and the paint instructions are simple and reliable. In fact the following code looks a lot like the ruby-tiger example code, only now we paint multiple times to compose the wanted result:
    
− <code ruby> + <syntaxhighlight lang="ruby">
  require 'plasma_applet'   require 'plasma_applet'
    
Line 187:
Line 187:
  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:   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> + <syntaxhighlight lang="ruby">
  require 'plasma_applet'   require 'plasma_applet'
    
Line 254:
Line 254:
  Copy this piece of code and see that it works. Now resize your plasmoid while it runs (ouch) and play with other multiplication values to get to @y to see how that affects the code. Let's review the code in detail:   Copy this piece of code and see that it works. Now resize your plasmoid while it runs (ouch) and play with other multiplication values to get to @y to see how that affects the code. Let's review the code in detail:
    
− <code ruby> + <syntaxhighlight lang="ruby">
  slots 'dataUpdated(QString, Plasma::DataEngine::Data)'   slots 'dataUpdated(QString, Plasma::DataEngine::Data)'
  </code>   </code>
  * Line 1: First we declare we want another slot that pokes our sleepy plasmoid awake. Another one, do we already have some? Yes, some slots are a given in plasma, like how our code gets a signal when the plasmoid is being resized.   * Line 1: First we declare we want another slot that pokes our sleepy plasmoid awake. Another one, do we already have some? Yes, some slots are a given in plasma, like how our code gets a signal when the plasmoid is being resized.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  def init   def init
     @counter = -1      @counter = -1
Line 275:
Line 275:
  * Line 5: To include the connectToEngine() defintition in our plasmoid initialization we call it here with nothing between the brackets as we have no values to pass along. It's a nice way to keep our init definition clean looking. Since it does not call to a Qt API we could rename it to anything, connect_to_engine() would be more readable.   * Line 5: To include the connectToEngine() defintition in our plasmoid initialization we call it here with nothing between the brackets as we have no values to pass along. It's a nice way to keep our init definition clean looking. Since it does not call to a Qt API we could rename it to anything, connect_to_engine() would be more readable.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  def connectToEngine   def connectToEngine
     # Use 'dataEngine("ruby-time")' for the ruby version of the engine      # Use 'dataEngine("ruby-time")' for the ruby version of the engine
Line 289:
Line 289:
  * Line 5: But for our fast blinking to work we need to ask for an unaligned signal every 500 milliseconds (equals half a second) or whenever plasma is able under stress. The method connect_source is also an API call not be renamed.   * Line 5: But for our fast blinking to work we need to ask for an unaligned signal every 500 milliseconds (equals half a second) or whenever plasma is able under stress. The method connect_source is also an API call not be renamed.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  def dataUpdated(source, data)   def dataUpdated(source, data)
     update()      update()
Line 308:
Line 308:
  * Line 5: With the @y variable we will set the paint height of the digits. By painting them visibly at zero and in the next round outside the visible part of the plasmoid at 200 they will appear to blink as we move them around. Plasma however does not cache the rendered SVGs yet so we are still rendering and repainting each round. This is why many plasmoids get slow when you make them really large, this situation can of course improve in the future.   * Line 5: With the @y variable we will set the paint height of the digits. By painting them visibly at zero and in the next round outside the visible part of the plasmoid at 200 they will appear to blink as we move them around. Plasma however does not cache the rendered SVGs yet so we are still rendering and repainting each round. This is why many plasmoids get slow when you make them really large, this situation can of course improve in the future.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  def paintInterface(painter, option, contentsRect)   def paintInterface(painter, option, contentsRect)
         puts "ENTER paintInterface, paint height is " + @y.to_s          puts "ENTER paintInterface, paint height is " + @y.to_s



Neverendingo: Text replace - "" to ""

2011-06-29T20:37:13Z
Text replace - "<code ini>" to "<syntaxhighlight lang="ini">"

				
				
				
				
			
			← Older revision
			Revision as of 20:37, 29 June 2011
			
Line 26:
Line 26:
  The <tt>metadata.desktop</tt> file looks like this:   The <tt>metadata.desktop</tt> file looks like this:
    
− <code ini> + <syntaxhighlight lang="ini">
  [Desktop Entry]   [Desktop Entry]
  Name=Monochrome LCD demo   Name=Monochrome LCD demo



Dennis p: Clean up
2010-02-27T14:54:05Z
Clean up

				
				
				
				
			
			← Older revision
			Revision as of 14:54, 27 February 2010
			
Line 5:
Line 5:
  == Introduction ==   == 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. + 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. In a racing game your car would have multiple positions at the base of the screen to give the effect of moving from one side of the road to the other, a traffic jam of cars into the distance shows up as a single car jumping around the road, giving you the idea that you can pass it if you race well. The simplest effect hower 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.   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.
Line 188:
Line 188:
    
  <code ruby>   <code ruby>
  + require 'plasma_applet'
  + 
  module Blinker   module Blinker
     class Main < PlasmaScripting::Applet      class Main < PlasmaScripting::Applet
Line 255:
Line 257:
  slots 'dataUpdated(QString, Plasma::DataEngine::Data)'   slots 'dataUpdated(QString, Plasma::DataEngine::Data)'
  </code>   </code>
− First we declare we want another slot that pokes our sleepy plasmoid awake. Another one, do we already have some? Yes, some slots are a given in plasma, like how our code gets a signal when the plasmoid is being resized. + * Line 1: First we declare we want another slot that pokes our sleepy plasmoid awake. Another one, do we already have some? Yes, some slots are a given in plasma, like how our code gets a signal when the plasmoid is being resized.
    
  <code ruby>   <code ruby>
Line 265:
Line 267:
  end   end
  </code>   </code>
− Before our plasmoid is created we set our basic counter to -1, in Ruby this automatically means it is created as an integer type variable which can have negative values. The value -1.0 would have created a floating point variable instead. The @ sign in front makes it available outside this init definition. + * Line 2: Before our plasmoid is created we set our basic counter to -1, in Ruby this automatically means it is created as an integer type variable which can have negative values. The value -1.0 would have created a floating point variable instead. The @ sign in front makes it available outside this init definition.
    
− The @svg variable for the SVG has to have its type specified, you should call it something more specific than just @svg if you use multiple svg files. + * Line 3: The @svg variable for the SVG has to have its type specified, you should call it something more specific than just @svg if you use multiple svg files.
    
− @svg has its 'value' filled with the SVG data. The file path is given as multiple values, you could use a terminal path description ("images/Lcd_panel_08.svg") as well but this way you'll never have to escape spaces in names. + * Line 4: @svg has its 'value' filled with the SVG data. The file path is given as multiple values, you could use a terminal path description ("images/Lcd_panel_08.svg") as well but this way you'll never have to escape spaces in names.
    
− To include the connectToEngine() defintition in our plasmoid initialization we call it here with nothing between the brackets as we have no values to pass along. It's a nice way to keep our init definition clean looking. Since it does not call to a Qt API we could rename it to anything, connect_to_engine() would be more readable. + * Line 5: To include the connectToEngine() defintition in our plasmoid initialization we call it here with nothing between the brackets as we have no values to pass along. It's a nice way to keep our init definition clean looking. Since it does not call to a Qt API we could rename it to anything, connect_to_engine() would be more readable.
    
  <code ruby>   <code ruby>
Line 281:
Line 283:
  end   end
  </code>   </code>
− The idea of us pauzing our code is a bad one, we should always ask plasma to give us an update (by using Qt::Timer), it even has a ruby specific engine so that we can import our basic Ruby tutorials. This way we avoid blocking user interactions, even when we want total control over a game the user should be able to switch to a phone call and the plasma team should be able to improve the perceived speed of plasmoids. + The idea of us pauzing our code is a bad one, we should always ask plasma to give us a signal to move on (by using Qt::Timer), it even has a ruby specific engine so that we can import our basic Ruby tutorials. This way we avoid blocking user interactions, even when we want total control over a game the user should be able to resize all things plasma to switch to a phone call and the plasma team should be able to improve the perceived speed of plasmoids.
    
− We use the data engine time so we can work towards a clock, this is an API call so it must be named dataEngine("time") or data_engine("time"). Align to minute would give us a clock which would change each time we see other clocks change. But for our fast blinking to work we need to ask for an unaligned signal every 500 milliseconds (equals half a second) or whenever plasma is able under stress. The method connect_source is also an API call not be renamed. + * Line 3: We use the data engine time so we can work towards a clock, this is an API call so it must be named dataEngine("time") or data_engine("time").  
  + * Line 4: Align to minute would give us a clock which would change each time we see other clocks change.
  + * Line 5: But for our fast blinking to work we need to ask for an unaligned signal every 500 milliseconds (equals half a second) or whenever plasma is able under stress. The method connect_source is also an API call not be renamed.
    
  <code ruby>   <code ruby>
Line 294:
Line 298:
  </code>   </code>
    
− The dataUpdated definition is an API call so we can't rename it at all, this definition gets run whenever the data engine updates the data in the slot. The text between brackets (source, data) is just a helpful reminder on usage you can rename to anything informative, but the single comma must remain as it signifies that their two arguments are to be given. + * Line 1: The dataUpdated definition is an API call so we can't rename it at all, this definition gets run whenever the data engine updates the data in the slot. The text between brackets (source, data) is just a helpful reminder on usage, you could rename to anything informative, but the single comma must remain as it signifies that there are two arguments to be given.
    
− The update() is the plasma API call to repaint the plasmoid content, it makes the code jump to paintInterface. We can copy and paste this whole definition thus far into most plasmoids. + * Line 2: The update() is the plasma API call to repaint the plasmoid content, it makes the code jump to paintInterface. We can copy and paste this whole definition thus far into most plasmoids.
    
− The @counter variable is what we added to get our plasmoid to do something different on each 'go do something' signal. + * Line 3: The @counter variable is what we added to get our plasmoid to do something different on each 'go do something' signal.
    
− When @counter goes below zero we make the negative number positive again with the 'get the absolute value' function of Ruby. This makes sure that the next round it will go from 1 to zero. + * Line 4: When @counter goes below zero we make the negative number positive again with the 'get the absolute value' function of Ruby. This makes sure that the next round it will go from 1 to zero.
    
− With the @y variable we will set the paint height of the digits. By painting them visibly at zero and in the next round outside the visible part of the plasmoid at 200 they will appear to blink as we move them around. Plasma however does not cache the rendered SVGs yet so we are still rendering and repainting each round. This is why many plasmoids get slow when you make them really large, this situation can of course improve in the future. + * Line 5: With the @y variable we will set the paint height of the digits. By painting them visibly at zero and in the next round outside the visible part of the plasmoid at 200 they will appear to blink as we move them around. Plasma however does not cache the rendered SVGs yet so we are still rendering and repainting each round. This is why many plasmoids get slow when you make them really large, this situation can of course improve in the future.
    
  <code ruby>   <code ruby>
Line 313:
Line 317:
  The paintInterface is another API call.   The paintInterface is another API call.
    
− To see if and when our refresh is actually working we put a string on the terminal output, we also want to know if our counter logic actually works so we tell that to ourselves as well. The puts function is a useful tool to see how well your code is running whenever looking at the plasma repainting is unhelpful. This puts is so fast paced that you may want to comment out the code with a #. Other puts may be kept alive in your own code as it shows you after what point the plasmoid stalls when it unexpectedly does. + * Line 2: To see if and when our refresh is actually working we put a string on the terminal output, we also want to know if our counter logic actually works so we tell that to ourselves as well. The puts function is a useful tool to see how well your code is running whenever looking at the plasma repainting is unhelpful. This puts is so fast paced that you may want to comment out the code with a #. Other puts may be kept alive in your own code as it shows you after what point the plasmoid stalls when it unexpectedly does.
−   + 
− The resize function is the signal part of a slot belonging to paintInterface which gets signaled when the plasmoid is being resized. It states "@svg you should resize yourself to the current values of size". No values of size are given as plasma itself updates that variable while the plasmoid is being resized. As we used proper plasma dataEngines our plasmoid gets repainted live while being resized, on decently fast computers that is. + 
−   + 
− The elements are rendered on top of each other in the listed order and when all are done they are painted as one to the screenbuffer. Try out moving the line of lcd_background further down the list. + 
−   + 
− ... + 
−   + 
− 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: + 
    
− ? + * Line 3: The resize function is the signal part of a slot belonging to paintInterface which gets signaled when the plasmoid is being resized. It states "@svg you should resize yourself to the current values of size". No values of size are given as plasma itself updates that variable while the plasmoid is being resized. As we used proper plasma dataEngines our plasmoid gets repainted live while being resized, on decently fast computers that is. Again we explain that on slow computers the live repainting doesn't slow or stall the resizing, it just skips some repaints and everything remains usable from the user perspective, that is why we never try to hardlock or pause our code ourselves in plasma.
    
− == Speed optimization == + * Line 5: The elements are rendered on top of each other in the listed order and when all are done they are painted as one to the screenbuffer. Try out moving the line of lcd_background further down the list to see how it affects the plasmoid.
− 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? + 
    
− ? + == Getting the data from a data engine signal ==
  + ...To be completed...
    
− 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. + This is the base 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. If you've made a nice LCD wristwatch or LCD game simulation based on this codebase yourself, why not log in and place a link to it here below. Don't forget to upload it to kde-look.org so others can download it with plasma's build-in add widgets function.



Dennis p: Working blinker code explained
2010-02-23T19:13:57Z
Working blinker code explained

				
				
				
				
			
			← Older revision
			Revision as of 19:13, 23 February 2010
			
Line 184:
Line 184:
  * wait 0.5 second   * wait 0.5 second
    
  + == A blinking 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:   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:
    
Line 218:
Line 219:
           
       def paintInterface(painter, option, contentsRect)        def paintInterface(painter, option, contentsRect)
−            puts "ENTER paintInterface, painthight is " + @y.to_s +            puts "ENTER paintInterface, paint height is " + @y.to_s
         @svg.resize(size())          @svg.resize(size())
           
Line 249:
Line 250:
  </code>   </code>
    
− Yeah it works. In the next update of this page I'll explain the what and why for this code. In the mean time resize your plasmoid to huge while it runs (ouch) and play with other multiplication values to get to @y to see how that affects the code. + Copy this piece of code and see that it works. Now resize your plasmoid while it runs (ouch) and play with other multiplication values to get to @y to see how that affects the code. Let's review the code in detail:
  +  
  + <code ruby>
  + slots 'dataUpdated(QString, Plasma::DataEngine::Data)'
  + </code>
  + First we declare we want another slot that pokes our sleepy plasmoid awake. Another one, do we already have some? Yes, some slots are a given in plasma, like how our code gets a signal when the plasmoid is being resized.
  +  
  + <code ruby>
  + def init
  +   @counter = -1
  +   @svg = Plasma::Svg.new(self)
  +   @svg.imagePath = package.filePath("images", "Lcd_panel_08.svg")
  +       connectToEngine()
  + end
  + </code>
  + Before our plasmoid is created we set our basic counter to -1, in Ruby this automatically means it is created as an integer type variable which can have negative values. The value -1.0 would have created a floating point variable instead. The @ sign in front makes it available outside this init definition.
  +  
  + The @svg variable for the SVG has to have its type specified, you should call it something more specific than just @svg if you use multiple svg files.
  +  
  + @svg has its 'value' filled with the SVG data. The file path is given as multiple values, you could use a terminal path description ("images/Lcd_panel_08.svg") as well but this way you'll never have to escape spaces in names.
  +  
  + To include the connectToEngine() defintition in our plasmoid initialization we call it here with nothing between the brackets as we have no values to pass along. It's a nice way to keep our init definition clean looking. Since it does not call to a Qt API we could rename it to anything, connect_to_engine() would be more readable.
  +  
  + <code ruby>
  + def connectToEngine
  +   # Use 'dataEngine("ruby-time")' for the ruby version of the engine
  +   timeEngine = dataEngine("time")
  +   # timeEngine.connectSource("Local", self, 500, Plasma::AlignToMinute)
  +   timeEngine.connectSource("Local", self, 500, Plasma::NoAlignment)
  + end
  + </code>
  + The idea of us pauzing our code is a bad one, we should always ask plasma to give us an update (by using Qt::Timer), it even has a ruby specific engine so that we can import our basic Ruby tutorials. This way we avoid blocking user interactions, even when we want total control over a game the user should be able to switch to a phone call and the plasma team should be able to improve the perceived speed of plasmoids.
  +  
  + We use the data engine time so we can work towards a clock, this is an API call so it must be named dataEngine("time") or data_engine("time"). Align to minute would give us a clock which would change each time we see other clocks change. But for our fast blinking to work we need to ask for an unaligned signal every 500 milliseconds (equals half a second) or whenever plasma is able under stress. The method connect_source is also an API call not be renamed.
  +  
  + <code ruby>
  + def dataUpdated(source, data)
  +   update()
  +   @counter = @counter - 1
  +   @counter = @counter.abs
  +   @y = @counter * 200
  + end
  + </code>
  +  
  + The dataUpdated definition is an API call so we can't rename it at all, this definition gets run whenever the data engine updates the data in the slot. The text between brackets (source, data) is just a helpful reminder on usage you can rename to anything informative, but the single comma must remain as it signifies that their two arguments are to be given.
  +  
  + The update() is the plasma API call to repaint the plasmoid content, it makes the code jump to paintInterface. We can copy and paste this whole definition thus far into most plasmoids.
  +  
  + The @counter variable is what we added to get our plasmoid to do something different on each 'go do something' signal.
  +  
  + When @counter goes below zero we make the negative number positive again with the 'get the absolute value' function of Ruby. This makes sure that the next round it will go from 1 to zero.
  +  
  + With the @y variable we will set the paint height of the digits. By painting them visibly at zero and in the next round outside the visible part of the plasmoid at 200 they will appear to blink as we move them around. Plasma however does not cache the rendered SVGs yet so we are still rendering and repainting each round. This is why many plasmoids get slow when you make them really large, this situation can of course improve in the future.
  +  
  + <code ruby>
  + def paintInterface(painter, option, contentsRect)
  +       puts "ENTER paintInterface, paint height is " + @y.to_s
  +   @svg.resize(size())
  +   
  +   @svg.paint(painter, 0, 0, "lcd_background")
  + </code>
  + The paintInterface is another API call.
  +  
  + To see if and when our refresh is actually working we put a string on the terminal output, we also want to know if our counter logic actually works so we tell that to ourselves as well. The puts function is a useful tool to see how well your code is running whenever looking at the plasma repainting is unhelpful. This puts is so fast paced that you may want to comment out the code with a #. Other puts may be kept alive in your own code as it shows you after what point the plasmoid stalls when it unexpectedly does.
  +  
  + The resize function is the signal part of a slot belonging to paintInterface which gets signaled when the plasmoid is being resized. It states "@svg you should resize yourself to the current values of size". No values of size are given as plasma itself updates that variable while the plasmoid is being resized. As we used proper plasma dataEngines our plasmoid gets repainted live while being resized, on decently fast computers that is.
  +  
  + The elements are rendered on top of each other in the listed order and when all are done they are painted as one to the screenbuffer. Try out moving the line of lcd_background further down the list.
    
  ...   ...



Dennis p: Added a fully working example of a plasmoid with blinking digits
2010-02-22T22:35:46Z
Added a fully working example of a plasmoid with blinking digits

				
				
				
				
			
			← Older revision
			Revision as of 22:35, 22 February 2010
			
Line 108:
Line 108:
  lcd_background   lcd_background
  </code>   </code>
−  
    
  == A messed up monochrome LCD plasmoid ==   == A messed up monochrome LCD plasmoid ==
Line 188:
Line 187:
    
  <code ruby>   <code ruby>
− # ? + module Blinker
  +   class Main < PlasmaScripting::Applet
  +  
  +   slots 'dataUpdated(QString, Plasma::DataEngine::Data)'
  +   
  +   def initialize parent
  +       super parent
  +     end
  +   
  +     def init
  +       @counter = -1
  +       @svg = Plasma::Svg.new(self)
  +       @svg.imagePath = package.filePath("images", "Lcd_panel_08.svg")
  +           connectToEngine()
  +     end
  +         
  +     def connectToEngine
  +       # Use 'dataEngine("ruby-time")' for the ruby version of the engine
  +       timeEngine = dataEngine("time")
  +       # timeEngine.connectSource("Local", self, 500, Plasma::AlignToMinute)
  +       timeEngine.connectSource("Local", self, 500, Plasma::NoAlignment)
  +     end
  +         
  +     def dataUpdated(source, data)
  +       update()
  +       @counter = @counter - 1
  +       @counter = @counter.abs
  +       @y = @counter * 200
  +     end
  +  
  +     def paintInterface(painter, option, contentsRect)
  +           puts "ENTER paintInterface, painthight is " + @y.to_s
  +       @svg.resize(size())
  +  
  +       @svg.paint(painter, 0, 0, "lcd_background")
  +       
  +       @svg.paint(painter, 0, @y, "temperature:0:A")
  +       @svg.paint(painter, 0, @y, "temperature:0:B")
  +       @svg.paint(painter, 0, @y, "temperature:0:C")
  +       @svg.paint(painter, 0, @y, "temperature:0:D")
  +       @svg.paint(painter, 0, @y, "temperature:0:E")
  +       @svg.paint(painter, 0, @y, "temperature:0:F")
  +  
  +       @svg.paint(painter, 0, @y, "temperature:1:A")
  +       @svg.paint(painter, 0, @y, "temperature:1:B")
  +       @svg.paint(painter, 0, @y, "temperature:1:C")
  +       @svg.paint(painter, 0, @y, "temperature:1:D")
  +       @svg.paint(painter, 0, @y, "temperature:1:E")
  +       @svg.paint(painter, 0, @y, "temperature:1:F")
  +  
  +       @svg.paint(painter, 0, @y, "temperature:2:A")
  +       @svg.paint(painter, 0, @y, "temperature:2:B")
  +       @svg.paint(painter, 0, @y, "temperature:2:C")
  +       @svg.paint(painter, 0, @y, "temperature:2:D")
  +       @svg.paint(painter, 0, @y, "temperature:2:E")
  +       @svg.paint(painter, 0, @y, "temperature:2:F")
  +     end
  +     
  +   end
  + end
  </code>   </code>
  + 
  + Yeah it works. In the next update of this page I'll explain the what and why for this code. In the mean time resize your plasmoid to huge while it runs (ouch) and play with other multiplication values to get to @y to see how that affects the 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.   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.



Dennis p: Drawing the intial digits in the new plasmoid
2010-02-20T21:58:57Z
Drawing the intial digits in the new plasmoid

				
				
				
				
			
			← Older revision
			Revision as of 21:58, 20 February 2010
			
Line 66:
Line 66:
  </code>   </code>
    
− == A working monochrome LCD plasmoid == + == Inside the svg ==
  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:   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:
    
Line 109:
Line 109:
  </code>   </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: + == A messed up monochrome LCD plasmoid ==
− * clear the screen by drawing lcd_background again. + When we ask Qt to paint the entire svg things would look quite right, but when we try to paint a number zero all the elements are painted on top of each other at the same location, oops what a mess. Qt sees each IDed element as a tiny svg to be drawn at our specified location, so all start at location 0, 0. Perhaps we could look up the location of a full digit 8 and tell Qt were to draw it, but then whenever an artists redesigns the elements they would have to change the codebase. Besides the individual elements don't have logically picked locations, they are cut from the digit at good looking locations. And when we resize the plasmoid we find out that the SVG rendering engine is not the same as the painting engine and digits move apart or together. Solving this would require lots of code.  
− * 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). + So we conclude the SVG itself is only usable as a complete image stamp (like an icon or a picture button) but the SVG is laid out wrong for easy Qt painting. So before we move on we first go back one hundred years in the history of animation and place each element we want to paint on its own transparent sheet, each sheet starts at 0, 0 and all are the same size as the entire svg.
    
− 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: + In this example I use the application in which the SVG was designed, Inkscape. I resize the contents of the SVG to make it fit on a plasmoid on its own, then I duplicate as many transparent fullframe rectangles as needed. 
  +  
  + Then I open it in Karbon, as it has a nice hierarchy list, and place each rectangle next to each named ID, and join each into a group. This breaks up the existing hierarchy, as the new shape is larger then the old shape and so does no longer fit inside it anymore. I add _i to each individual ID name and give the new groups the old ID names.
  +  
  + == A working monochrome LCD plasmoid ==
  + Now download [[Media:Lcd_panel_08.svg‎]], the new svg, and place it inside the images folder of your plasma directory. The render engine will now render each element at its original location and the paint instructions are simple and reliable. In fact the following code looks a lot like the ruby-tiger example code, only now we paint multiple times to compose the wanted result:
    
  <code ruby>   <code ruby>
Line 137:
Line 138:
       def init        def init
         @svg = Plasma::Svg.new(self)          @svg = Plasma::Svg.new(self)
−        @svg.imagePath = package.filePath("images", "lcd_panel.svgz") +        @svg.imagePath = package.filePath("images", "Lcd_panel_08.svg")
       end        end
    
       def paintInterface(painter, option, contentsRect)        def paintInterface(painter, option, contentsRect)
         @svg.resize(size())          @svg.resize(size())
−        # @svg.set_svg = package.filePath("images/lcd_panel.svgz", "temperature:1") +         
−        @svg.paint(painter, 0, 0) +       @svg.paint(painter, 0, 0, "lcd_background")
  +       sleep 0.5
  +       
  +       @svg.paint(painter, 0, 0, "temperature:0:A")
  +       @svg.paint(painter, 0, 0, "temperature:0:B")
  +       @svg.paint(painter, 0, 0, "temperature:0:C")
  +       @svg.paint(painter, 0, 0, "temperature:0:D")
  +       @svg.paint(painter, 0, 0, "temperature:0:E")
  +       @svg.paint(painter, 0, 0, "temperature:0:F")
  +       
  +       @svg.paint(painter, 0, 0, "temperature:1:A")
  +        @svg.paint(painter, 0, 0, "temperature:1:B")
  +       @svg.paint(painter, 0, 0, "temperature:1:C")
  +       @svg.paint(painter, 0, 0, "temperature:1:D")
  +       @svg.paint(painter, 0, 0, "temperature:1:E")
  +       @svg.paint(painter, 0, 0, "temperature:1:F")
  +       
  +       @svg.paint(painter, 0, 0, "temperature:2:A")
  +       @svg.paint(painter, 0, 0, "temperature:2:B")
  +       @svg.paint(painter, 0, 0, "temperature:2:C")
  +       @svg.paint(painter, 0, 0, "temperature:2:D")
  +       @svg.paint(painter, 0, 0, "temperature:2:E")
  +       @svg.paint(painter, 0, 0, "temperature:2:F")      
       end        end
                 
Line 150:
Line 173:
  </code>   </code>
    
  + That looks nice, but did you notice the plasmoid did not update the graphics after half a second? It seems all the code we write is part of the initialization of the plasmoid. The paint engine renders the lcd background, waits half a second, renders the 3 digits and only when completely finished does it paint everything onto the screen.
  + 
  + Rewriting this into a looping animation would only cause a never ending loop which makes sure our plasmoid never gets painted at all.
  + 
  + So how do we paint after the creation of the plasmoid?
  + 
  + 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
  + 
  + 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>
  + # ?
  + </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.   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.



Dennis p: added svg import like ruby-tiger with no animation
2010-02-14T20:18:08Z
added svg import like ruby-tiger with no animation

				
				
				
				
			
			← Older revision
			Revision as of 20:18, 14 February 2010
			
Line 121:
Line 121:
  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:   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.   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.



Dennis p: Added SVG ID details, removed C++ request
2010-02-06T13:36:01Z
Added SVG ID details, removed C++ request

				
				
				
				
			
			← Older revision
			Revision as of 13:36, 6 February 2010
			
Line 7:
Line 7:
  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.   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. + 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].   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].
Line 60:
Line 60:
    
       def init        def init
−        set_minimum_size 150, 150 +        set_minimum_size 128, 128
       end        end
     end      end
Line 67:
Line 67:
    
  == A working monochrome LCD plasmoid ==   == 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: + 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>
    
− 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. + And the ID of the three digits are, from left to right:
    
− == The C++ SVG code == + <code ruby>
− (this chapter will be removed later, but will remain accessible in the page history) + temperature:2
  + temperature:1
  + temperature:0
  + </code>
    
− 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: + 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>
    
− <code cppqt> + 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:
− // Place your code here. + <code ruby>
  + temperature:2:G
  + temperature:1:G
  + temperature:0:G
  </code>   </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>
    
− == Interaction == + 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:
− 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: + <code ruby>
−   + lcd_background
− <code cppqt> + 
− // Place your code here. + 
  </code>   </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:
  + 
  + ?
  + 
  + 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 ==   == Speed optimization ==
Line 95:
Line 135:
  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?   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?
    
− <code cppqt> + ?
− // Place your code here. + 
− </code> + 
    
− 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. + 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.



Dennis p: Can't find Ruby programmers with lots of time so a rewrite for C++ aid
2010-01-30T16:11:20Z
Can't find Ruby programmers with lots of time so a rewrite for C++ aid

				
				
				
				
			
			← Older revision
			Revision as of 16:11, 30 January 2010
			
Line 16:
Line 16:
    
  * contents/   * contents/
− ** lcd_panel.svgz  
  ** code/   ** code/
  *** main.rb   *** main.rb
  + ** images/
  + *** lcd_panel.svgz
  * metadata.desktop   * metadata.desktop
    
− Notice that we downloaded the zipped svg file and placed it in the contents folder, 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: + 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>   <code ini>
Line 68:
Line 71:
  ?   ?
    
− The homework assignment for us novice programmers is to compose the digits with different numbers, ok it's more or less a copy and paste job, but try to make your display display some fun stuff. 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. + 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:
  +  
  + <code cppqt>
  + // Place your code here.
  + </code>
    
    
  == Interaction ==   == 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: + 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:
  +  
  + <code cppqt>
  + // Place your code here.
  + </code>
    
− ?  
    
  == Speed optimization ==   == Speed optimization ==
Line 80:
Line 95:
  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?   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?
    
− ? + <code cppqt>
  + // Place your code here.
  + </code>
    
− 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. + 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.