Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10: Difference between revisions
Neverendingo (talk | contribs) m (Text replace - "<code ruby>" to "<syntaxhighlight lang="ruby">") |
Neverendingo (talk | contribs) m (Text replace - "</code>" to "</syntaxhighlight>") |
||
Line 29: | Line 29: | ||
signals 'angleChanged(int)', 'forceChanged(int)' | signals 'angleChanged(int)', 'forceChanged(int)' | ||
slots 'setAngle(int)', 'setForce(int)' | slots 'setAngle(int)', 'setForce(int)' | ||
</ | </syntaxhighlight> | ||
The interface to the force follows the same practice as for the angle. | The interface to the force follows the same practice as for the angle. | ||
Line 43: | Line 43: | ||
setAutoFillBackground(true) | setAutoFillBackground(true) | ||
end | end | ||
</ | </syntaxhighlight> | ||
The force '''<tt>@currentForce</tt>''' is initialized to zero. | The force '''<tt>@currentForce</tt>''' is initialized to zero. | ||
Line 63: | Line 63: | ||
emit angleChanged(@currentAngle) | emit angleChanged(@currentAngle) | ||
end | end | ||
</ | </syntaxhighlight> | ||
We have made a slight change in the '''<tt>setAngle()</tt>''' function. It repaints only the portion of the widget that contains the cannon. | We have made a slight change in the '''<tt>setAngle()</tt>''' function. It repaints only the portion of the widget that contains the cannon. | ||
Line 79: | Line 79: | ||
emit forceChanged(@currentForce) | emit forceChanged(@currentForce) | ||
end | end | ||
</ | </syntaxhighlight> | ||
The implementation of '''<tt>setForce()</tt>''' is quite similar to that of '''<tt>setAngle()</tt>'''. The only difference is that because we don't show the force value, we don't need to repaint the widget. | The implementation of '''<tt>setForce()</tt>''' is quite similar to that of '''<tt>setAngle()</tt>'''. The only difference is that because we don't show the force value, we don't need to repaint the widget. | ||
Line 96: | Line 96: | ||
painter.end() | painter.end() | ||
end | end | ||
</ | </syntaxhighlight> | ||
We paint as in Chapter 9. | We paint as in Chapter 9. | ||
Line 106: | Line 106: | ||
return result | return result | ||
end | end | ||
</ | </syntaxhighlight> | ||
The '''<tt>cannonRect()</tt>''' function returns the rectangle enclosing the cannon in widget coordinates. First we create a rectangle with the size 50 x 50 and then move it so its bottom-left corner is equal to the widget's own bottom-left corner. | The '''<tt>cannonRect()</tt>''' function returns the rectangle enclosing the cannon in widget coordinates. First we create a rectangle with the size 50 x 50 and then move it so its bottom-left corner is equal to the widget's own bottom-left corner. | ||
Line 119: | Line 119: | ||
force = LCDRange.new() | force = LCDRange.new() | ||
force.setRange(10, 50) | force.setRange(10, 50) | ||
</ | </syntaxhighlight> | ||
We add a second '''<tt>LCDRange</tt>''', which will be used to set the force. | We add a second '''<tt>LCDRange</tt>''', which will be used to set the force. | ||
Line 128: | Line 128: | ||
connect(cannonField, SIGNAL('forceChanged(int)'), | connect(cannonField, SIGNAL('forceChanged(int)'), | ||
force, SLOT('setValue(int)')) | force, SLOT('setValue(int)')) | ||
</ | </syntaxhighlight> | ||
We connect the '''<tt>force</tt>''' widget and the '''<tt>cannonField</tt>''' widget, just like we did for the '''<tt>angle</tt>''' widget. | We connect the '''<tt>force</tt>''' widget and the '''<tt>cannonField</tt>''' widget, just like we did for the '''<tt>angle</tt>''' widget. | ||
Line 142: | Line 142: | ||
gridLayout.addWidget(cannonField, 1, 1, 2, 1) | gridLayout.addWidget(cannonField, 1, 1, 2, 1) | ||
gridLayout.setColumnStretch(1, 10) | gridLayout.setColumnStretch(1, 10) | ||
</ | </syntaxhighlight> | ||
In Chapter 9, we put '''<tt>angle</tt>''' in the lower-left cell of the layout. Now we want to have two widgets in that cell, so we make a vertical box, put the vertical box in the grid cell, and put each of '''<tt>angle</tt>''' and '''<tt>range</tt>''' in the vertical box. | In Chapter 9, we put '''<tt>angle</tt>''' in the lower-left cell of the layout. Now we want to have two widgets in that cell, so we make a vertical box, put the vertical box in the grid cell, and put each of '''<tt>angle</tt>''' and '''<tt>range</tt>''' in the vertical box. | ||
Line 148: | Line 148: | ||
<syntaxhighlight lang="ruby"> | <syntaxhighlight lang="ruby"> | ||
force.setValue(25) | force.setValue(25) | ||
</ | </syntaxhighlight> | ||
We initialize the force value to 25. | We initialize the force value to 25. |
Revision as of 20:55, 29 June 2011
Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10
Languages: عربي | Asturianu | Català | Česky | Kaszëbsczi | Dansk | Deutsch | English | Esperanto | Español | Eesti | فارسی | Suomi | Français | Galego | Italiano | 日本語 | 한국어 | Norwegian | Polski | Português Brasileiro | Română | Русский | Svenska | Slovenčina | Slovenščina | српски | Türkçe | Tiếng Việt | Українська | 简体中文 | 繁體中文
Tutorial Series | Qt4 Ruby Tutorial |
Previous | Tutorial 9 - With Cannon You Can |
What's Next | Tutorial 11 - Giving It a Shot |
Further Reading | n/a |
Smooth as Silk
Files:
Overview
In this example, we add a force control.
Line by Line Walkthrough
The CannonField now has a force value in addition to the angle.
signals 'angleChanged(int)', 'forceChanged(int)'
slots 'setAngle(int)', 'setForce(int)'
The interface to the force follows the same practice as for the angle.
def initialize(parent = nil)
super()
@currentAngle = 45
@currentForce = 0
setPalette(Qt::Palette.new(Qt::Color.new(250, 250, 200)))
setAutoFillBackground(true)
end
The force @currentForce is initialized to zero.
def setAngle(angle)
if angle < 5
angle = 5
elsif angle > 70
angle = 70
end
if @currentAngle == angle
return
end
@currentAngle = angle
update(cannonRect())
emit angleChanged(@currentAngle)
end
We have made a slight change in the setAngle() function. It repaints only the portion of the widget that contains the cannon.
def setForce(force)
if force < 0
force = 0
end
if @currentForce == force
return
end
@currentForce = force
emit forceChanged(@currentForce)
end
The implementation of setForce() is quite similar to that of setAngle(). The only difference is that because we don't show the force value, we don't need to repaint the widget.
def paintEvent(event)
painter = Qt::Painter.new(self)
painter.setPen(Qt::NoPen)
painter.setBrush(Qt::Brush.new(Qt::blue))
painter.translate(0, height())
painter.drawPie(Qt::Rect.new(-35, -35, 70, 70), 0, 90 * 16)
painter.rotate(-@currentAngle)
painter.drawRect(Qt::Rect.new(30, -5, 20, 10))
painter.end()
end
We paint as in Chapter 9.
def cannonRect()
result = Qt::Rect.new(0, 0, 50, 50)
result.moveBottomLeft(rect().bottomLeft())
return result
end
The cannonRect() function returns the rectangle enclosing the cannon in widget coordinates. First we create a rectangle with the size 50 x 50 and then move it so its bottom-left corner is equal to the widget's own bottom-left corner.
The Qt::Widget::rect() function returns the widget's enclosing rectangle in the widget's own coordinates. The top-left corner of the rectangle is always (0, 0).
The constructor is mostly the same, but some new bits have been added.
force = LCDRange.new()
force.setRange(10, 50)
We add a second LCDRange, which will be used to set the force.
connect(force, SIGNAL('valueChanged(int)'),
cannonField, SLOT('setForce(int)'))
connect(cannonField, SIGNAL('forceChanged(int)'),
force, SLOT('setValue(int)'))
We connect the force widget and the cannonField widget, just like we did for the angle widget.
leftLayout = Qt::VBoxLayout.new()
leftLayout.addWidget(angle)
leftLayout.addWidget(force)
gridLayout = Qt::GridLayout.new()
gridLayout.addWidget(quit, 0, 0)
gridLayout.addLayout(leftLayout, 1, 0)
gridLayout.addWidget(cannonField, 1, 1, 2, 1)
gridLayout.setColumnStretch(1, 10)
In Chapter 9, we put angle in the lower-left cell of the layout. Now we want to have two widgets in that cell, so we make a vertical box, put the vertical box in the grid cell, and put each of angle and range in the vertical box.
force.setValue(25)
We initialize the force value to 25.
Running the Application
We now have a force control.
Exercises
Make the size of the cannon barrel be dependent on the force.
Put the cannon in the bottom-right corner.
Try adding a better keyboard interface. For example, make + and - increase and decrease the force and enter shoot. If you're bothered by the way the Left and Right keys work, change that too. [Hint: Reimplement Qt::Widget::keyPressEvent().]