Difference between revisions of "Development/Tutorials/Qt4 Ruby Tutorial/Chapter 12"

Jump to: navigation, search
m (Text replace - "<code ruby>" to "<syntaxhighlight lang="ruby">")
Line 24: Line 24:
 
'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t12/lcdrange.rb lcdrange.rb]'''
 
'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t12/lcdrange.rb lcdrange.rb]'''
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
def initialize(s, parent = nil)
 
def initialize(s, parent = nil)
 
   super(parent)
 
   super(parent)
Line 34: Line 34:
 
This constructor first calls '''<tt>init()</tt>''' and then sets the label text. '''<tt>init()</tt>''' is a separate function performing initialization mosty because of function overloading matters in the original C++ version.
 
This constructor first calls '''<tt>init()</tt>''' and then sets the label text. '''<tt>init()</tt>''' is a separate function performing initialization mosty because of function overloading matters in the original C++ version.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
def init()
 
def init()
 
   lcd = Qt::LCDNumber.new(2)
 
   lcd = Qt::LCDNumber.new(2)
Line 63: Line 63:
 
The setup of '''<tt>lcd</tt>''' and '''<tt>slider</tt>''' is the same as in the previous chapter. Next we create a [http://doc.qt.nokia.com/latest/qlabel.html Qt::Label] and tell it to align the contents centered horizontally and to the top vertically. The [http://doc.qt.nokia.com/latest/qobject.html#connect Qt::Object::connect()] calls have also been taken from the previous chapter.
 
The setup of '''<tt>lcd</tt>''' and '''<tt>slider</tt>''' is the same as in the previous chapter. Next we create a [http://doc.qt.nokia.com/latest/qlabel.html Qt::Label] and tell it to align the contents centered horizontally and to the top vertically. The [http://doc.qt.nokia.com/latest/qobject.html#connect Qt::Object::connect()] calls have also been taken from the previous chapter.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
def setText(s)
 
def setText(s)
 
   @label.setText(s)
 
   @label.setText(s)
Line 75: Line 75:
 
The '''<tt>CannonField</tt>''' now has two new signals: '''<tt>hit()</tt>''' and '''<tt>missed()</tt>'''. In addition, it contains a target.
 
The '''<tt>CannonField</tt>''' now has two new signals: '''<tt>hit()</tt>''' and '''<tt>missed()</tt>'''. In addition, it contains a target.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
   signals 'hit()', 'missed()' #...
 
   signals 'hit()', 'missed()' #...
 
</code>
 
</code>
Line 81: Line 81:
 
The '''<tt>hit()</tt>''' signal is emitted when a shot hits the target. The '''<tt>missed()</tt>''' signal is emitted when the shot moves beyond the right or bottom edge of the widget (i.e., it is certain that it has not and will not hit the target).
 
The '''<tt>hit()</tt>''' signal is emitted when a shot hits the target. The '''<tt>missed()</tt>''' signal is emitted when the shot moves beyond the right or bottom edge of the widget (i.e., it is certain that it has not and will not hit the target).
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
     newTarget()
 
     newTarget()
 
</code>
 
</code>
Line 87: Line 87:
 
This line has been added to the constructor. It creates a "random" position for the target. In fact, the '''<tt>newTarget()</tt>''' function will try to paint the target. Because we are in a constructor, the '''<tt>CannonField</tt>''' widget is invisible. Qt guarantees that no harm is done when calling [http://doc.qt.nokia.com/latest/qwidget.html#update Qt::Widget::update()] on a hidden widget.
 
This line has been added to the constructor. It creates a "random" position for the target. In fact, the '''<tt>newTarget()</tt>''' function will try to paint the target. Because we are in a constructor, the '''<tt>CannonField</tt>''' widget is invisible. Qt guarantees that no harm is done when calling [http://doc.qt.nokia.com/latest/qwidget.html#update Qt::Widget::update()] on a hidden widget.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
@@first_time = true
 
@@first_time = true
  
Line 110: Line 110:
 
By experimentation we have found this to always be in reach of the shot.
 
By experimentation we have found this to always be in reach of the shot.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
def moveShot()
 
def moveShot()
 
   region = Qt::Region.new(shotRect())
 
   region = Qt::Region.new(shotRect())
Line 120: Line 120:
 
This part of the timer event has not changed from the previous chapter.
 
This part of the timer event has not changed from the previous chapter.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
if shotR.intersects(targetRect())  
 
if shotR.intersects(targetRect())  
 
   @autoShootTimer.stop()
 
   @autoShootTimer.stop()
Line 128: Line 128:
 
This '''<tt>if</tt>''' statement checks whether the shot rectangle intersects the target rectangle. If it does, the shot has hit the target (ouch!). We stop the shoot timer and emit the '''<tt>hit()</tt>''' signal to tell the outside world that a target was destroyed, and return. Note that we could have created a new target on the spot, but because the '''<tt>CannonField</tt>''' is a component we leave such decisions to the user of the component.
 
This '''<tt>if</tt>''' statement checks whether the shot rectangle intersects the target rectangle. If it does, the shot has hit the target (ouch!). We stop the shoot timer and emit the '''<tt>hit()</tt>''' signal to tell the outside world that a target was destroyed, and return. Note that we could have created a new target on the spot, but because the '''<tt>CannonField</tt>''' is a component we leave such decisions to the user of the component.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
elsif shotR.x() > width() || shotR.y() > height()
 
elsif shotR.x() > width() || shotR.y() > height()
 
   @autoShootTimer.stop()
 
   @autoShootTimer.stop()
Line 136: Line 136:
 
This is the same as in the previous chapter, except that it now emits the '''<tt>missed()</tt>''' signal to tell the outside world about the failure.
 
This is the same as in the previous chapter, except that it now emits the '''<tt>missed()</tt>''' signal to tell the outside world about the failure.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
   else
 
   else
 
     region = region.unite(Qt::Region.new(shotR))
 
     region = region.unite(Qt::Region.new(shotR))
Line 149: Line 149:
 
'''<tt>CannonField::paintEvent()</tt>''' is as before, except that this has been added:
 
'''<tt>CannonField::paintEvent()</tt>''' is as before, except that this has been added:
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
     paintTarget(painter)
 
     paintTarget(painter)
 
</code>
 
</code>
 
This line makes sure that the target is also painted when necessary.
 
This line makes sure that the target is also painted when necessary.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
def paintTarget(painter)
 
def paintTarget(painter)
 
   painter.setBrush(Qt::Brush.new(Qt::red))
 
   painter.setBrush(Qt::Brush.new(Qt::red))
Line 164: Line 164:
 
This function paints the target; a rectangle filled with red and with a black outline.
 
This function paints the target; a rectangle filled with red and with a black outline.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
def targetRect()
 
def targetRect()
 
   result = Qt::Rect.new(0, 0, 20, 10)
 
   result = Qt::Rect.new(0, 0, 20, 10)
Line 180: Line 180:
 
There are no new members in the '''<tt>MyWidget</tt>''' class, but we have slightly changed the constructor to set the new '''<tt>LCDRange</tt>''' text labels.
 
There are no new members in the '''<tt>MyWidget</tt>''' class, but we have slightly changed the constructor to set the new '''<tt>LCDRange</tt>''' text labels.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
     angle = LCDRange.new(tr('ANGLE'))
 
     angle = LCDRange.new(tr('ANGLE'))
 
</code>
 
</code>
Line 186: Line 186:
 
We set the angle text label to "ANGLE".
 
We set the angle text label to "ANGLE".
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
     force  = LCDRange.new(tr('FORCE'))
 
     force  = LCDRange.new(tr('FORCE'))
 
</code>
 
</code>

Revision as of 20:43, 29 June 2011


Contents

Development/Tutorials/Qt4 Ruby Tutorial/Chapter 12


Hanging in the Air the Way Bricks Don't
Tutorial Series   Qt4 Ruby Tutorial
Previous   Tutorial 11 - Giving It a Shot
What's Next   Tutorial 13 - Game Over
Further Reading   n/a

Hanging in the Air the Way Bricks Don't

Qt4 Ruby Tutorial Screenshot 12.png

Files:

Overview

In this example, we extend our LCDRange class to include a text label. We also provide something to shoot at.

Line by Line Walkthrough

lcdrange.rb

def initialize(s, parent = nil)
  super(parent)
  init()
  setText(s)
end
</code>
 
This constructor first calls '''<tt>init()</tt>''' and then sets the label text. '''<tt>init()</tt>''' is a separate function performing initialization mosty because of function overloading matters in the original C++ version.
 
<syntaxhighlight lang="ruby">
def init()
  lcd = Qt::LCDNumber.new(2)
  lcd.setSegmentStyle(Qt::LCDNumber::Filled)
 
  @slider = Qt::Slider.new(Qt::Horizontal)
  @slider.setRange(0, 99)
  @slider.setValue(0)
 
  @label = Qt::Label.new()
  @label.setAlignment(Qt::AlignHCenter.to_i | Qt::AlignTop.to_i)
 
  connect(@slider, SIGNAL('valueChanged(int)'),
  lcd, SLOT('display(int)'))
  connect(@slider, SIGNAL('valueChanged(int)'),
  self, SIGNAL('valueChanged(int)'))
 
  layout = Qt::VBoxLayout.new()
  layout.addWidget(lcd)
  layout.addWidget(@slider)
  layout.addWidget(@label)
  setLayout(layout)
 
  setFocusProxy(@slider)
end
</code>
 
The setup of '''<tt>lcd</tt>''' and '''<tt>slider</tt>''' is the same as in the previous chapter. Next we create a [http://doc.qt.nokia.com/latest/qlabel.html Qt::Label] and tell it to align the contents centered horizontally and to the top vertically. The [http://doc.qt.nokia.com/latest/qobject.html#connect Qt::Object::connect()] calls have also been taken from the previous chapter.
 
<syntaxhighlight lang="ruby">
def setText(s)
  @label.setText(s)
end
</code>
 
This function sets the label text.
 
'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t12/cannon.rb cannon.rb]'''
 
The '''<tt>CannonField</tt>''' now has two new signals: '''<tt>hit()</tt>''' and '''<tt>missed()</tt>'''. In addition, it contains a target.
 
<syntaxhighlight lang="ruby">
  signals 'hit()', 'missed()' #...
</code>
 
The '''<tt>hit()</tt>''' signal is emitted when a shot hits the target. The '''<tt>missed()</tt>''' signal is emitted when the shot moves beyond the right or bottom edge of the widget (i.e., it is certain that it has not and will not hit the target).
 
<syntaxhighlight lang="ruby">
    newTarget()
</code>
 
This line has been added to the constructor. It creates a "random" position for the target. In fact, the '''<tt>newTarget()</tt>''' function will try to paint the target. Because we are in a constructor, the '''<tt>CannonField</tt>''' widget is invisible. Qt guarantees that no harm is done when calling [http://doc.qt.nokia.com/latest/qwidget.html#update Qt::Widget::update()] on a hidden widget.
 
<syntaxhighlight lang="ruby">
@@first_time = true
 
def newTarget()
  if @@first_time
    @@first_time = false
    midnight = Qt::Time.new(0, 0, 0)
    srand(midnight.secsTo(Qt::Time.currentTime()))
  end
 
  @target = Qt::Point.new(200 + rand(190), 10 + rand(255))
  update()
end
</code>
 
This function creates a target center point at a new random position.
 
We create the [http://doc.qt.nokia.com/latest/qtime.html Qt::Time] object '''<tt>midnight</tt>''', which represents the time 00:00:00. Next we fetch the number of seconds from midnight until now and use it as a random seed. See the documentation for [http://doc.qt.nokia.com/latest/qdate.html Qt::Date], [http://doc.qt.nokia.com/latest/qtime.html Qt::Time], and [http://doc.qt.nokia.com/latest/qdatetime.html Qt::DateTime] for more information.
 
Finally we calculate the target's center point. We keep it within the rectangle (x = 200, y = 35, width = 190, height = 255), i.e., the possible x and y values are 200 to 389 and 35 to 289, respectively) in a coordinate system where we put y position 0 at the bottom edge of the widget and let y values increase upwards x is as normal, with 0 at the left edge and with x values increasing to the right.
 
By experimentation we have found this to always be in reach of the shot.
 
<syntaxhighlight lang="ruby">
def moveShot()
  region = Qt::Region.new(shotRect())
  @timerCount += 1
 
  shotR = shotRect()
</code>
 
This part of the timer event has not changed from the previous chapter.
 
<syntaxhighlight lang="ruby">
if shotR.intersects(targetRect()) 
  @autoShootTimer.stop()
  emit hit()
</code>
 
This '''<tt>if</tt>''' statement checks whether the shot rectangle intersects the target rectangle. If it does, the shot has hit the target (ouch!). We stop the shoot timer and emit the '''<tt>hit()</tt>''' signal to tell the outside world that a target was destroyed, and return. Note that we could have created a new target on the spot, but because the '''<tt>CannonField</tt>''' is a component we leave such decisions to the user of the component.
 
<syntaxhighlight lang="ruby">
elsif shotR.x() > width() || shotR.y() > height()
  @autoShootTimer.stop()
  emit missed()
</code>
 
This is the same as in the previous chapter, except that it now emits the '''<tt>missed()</tt>''' signal to tell the outside world about the failure.
 
<syntaxhighlight lang="ruby">
  else
    region = region.unite(Qt::Region.new(shotR))
  end
 
  update(region)
end
</code>
 
And the rest of the function is as before.
 
'''<tt>CannonField::paintEvent()</tt>''' is as before, except that this has been added:
 
<syntaxhighlight lang="ruby">
    paintTarget(painter)
</code>
This line makes sure that the target is also painted when necessary.
 
<syntaxhighlight lang="ruby">
def paintTarget(painter)
  painter.setBrush(Qt::Brush.new(Qt::red))
  painter.setPen(Qt::Pen.new(Qt::Color.new(Qt::black)))
  painter.drawRect(targetRect())
end
</code>
 
This function paints the target; a rectangle filled with red and with a black outline.
 
<syntaxhighlight lang="ruby">
def targetRect()
  result = Qt::Rect.new(0, 0, 20, 10)
  result.moveCenter(Qt::Point.new(@target.x(), height() - 1 - @target.y()))
  return result
end
</code>
 
This private function returns the enclosing rectangle of the target. Remember from '''<tt>newTarget()</tt>''' that the '''<tt>target</tt>''' point uses y coordinate 0 at the bottom of the widget. We calculate the point in widget coordinates before we call [http://doc.qt.nokia.com/latest/qrect.html#moveCenter Qt::Rect::moveCenter()].
 
The reason we have chosen this coordinate mapping is to fix the distance between the target and the bottom of the widget. Remember that the widget can be resized by the user or the program at any time.
 
'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t12/t12.rb t12.rb]'''
 
There are no new members in the '''<tt>MyWidget</tt>''' class, but we have slightly changed the constructor to set the new '''<tt>LCDRange</tt>''' text labels.
 
<syntaxhighlight lang="ruby">
    angle = LCDRange.new(tr('ANGLE'))
</code>
 
We set the angle text label to "ANGLE".
 
<syntaxhighlight lang="ruby">
    force  = LCDRange.new(tr('FORCE'))
</code>
 
We set the force text label to "FORCE".
 
=== Running the Application ===
The '''<tt>LCDRange</tt>''' widgets look a bit strange: When resizing '''<tt>MyWidget</tt>''', the built-in layout management in [http://doc.qt.nokia.com/latest/qvboxlayout.html Qt::VBoxLayout] gives the labels too much space and the rest not enough; making the space between the two '''<tt>LCDRange</tt>''' widgets change size. We'll fix that in the next chapter
 
=== Exercises ===
Make a cheat button that, when pressed, makes the '''<tt>CannonField</tt>''' display the shot trajectory for five seconds.
 
If you did the "round shot" exercise from the previous chapter, try changing the '''<tt>shotRect()</tt>''' to a '''<tt>shotRegion()</tt>''' that returns a [http://doc.qt.nokia.com/latest/qregion.html Qt::Region] so you can have really accurate collision detection.
 
Make a moving target.
 
Make sure that the target is always created entirely on-screen.
 
Make sure that the widget cannot be resized so that the target isn't visible. [Hint: [http://doc.qt.nokia.com/latest/qwidget.html#minimumSize-prop Qt::Widget::setMinimumSize()] is your friend.]
 
Not easy; make it possible to have several shots in the air at the same time. [Hint: Make a '''<tt>Shot</tt>''' class.]
 
[[Category:Ruby]]

KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal