×
Namespaces

Variants
Actions
(Difference between revisions)

HttpRemote

From Nokia Developer Wiki
Jump to: navigation, search
axeljaeger (Talk | contribs)
m (Make link work)
hamishwillee (Talk | contribs)
m (Text replace - "<code cpp>" to "<code cpp-qt>")
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{CodeSnippet
+
[[Category:Qt]][[Category:Qt Mobility]]
|id=...
+
{{ArticleMetaData <!-- v1.2 -->
|platform=S60 5th Edition
+
|sourcecode= [[Media:Httpremote.zip]]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices= Nokia 5800 XpressMusic, Nokia N97 mini
 
|devices= Nokia 5800 XpressMusic, Nokia N97 mini
|category=Qt for Symbian
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= Qt
 +
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= QPainter
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20100330
 +
|author= [[User:Axeljaeger]]
 +
<!-- The following are not in current metadata -->
 
|subcategory= Qt Mobility API
 
|subcategory= Qt Mobility API
|creationdate=March 30, 2010
 
|keywords=QPainter
 
 
}}
 
}}
  
 
=Overview=
 
=Overview=
This example show how to implement a custom QGraphicsWidget that uses not so common graphics operations. This widget is then used to trigger custom http-get-requests. Such GET-requests are commonly used by cheap embedded hardware to trigger a certain action. The usecase for this example is to remote control a media player by sending those requests when pressing on of the buttons.
+
This example show how to implement a custom QGraphicsWidget that uses not so common graphics operations. This widget is then used to trigger custom http-get-requests. Such GET-requests are commonly used by cheap embedded hardware to trigger a certain action. The use case for this example is to remote control a media player by sending those requests when pressing on of the buttons.
 
=Graphics=
 
=Graphics=
The idea behind the graphics is to show a remote that reminds the user of a situation related to media playback. Digital pictures are usually composed of three color channels: Red, Blue and Green. Other colors are mixed from these channels. If these channels are shifted in position, the user will see the three seperate channels. This UI is composed of white controlls on a dark background. But whenever the user presses a control, the color channels seperate, orbit around the center of the control and the vibra goes on to simulate the effect of a motor or other device.
+
The idea behind the graphics is to show a remote that reminds the user of a situation related to media playback. Digital pictures are usually composed of three color channels: Red, Blue and Green. Other colors are mixed from these channels. If these channels are shifted in position, the user will see the three separate channels. This UI is composed of white controls on a dark background. But whenever the user presses a control, the color channels separate, orbit around the center of the control and the vibra goes on to simulate the effect of a motor or other device.
  
 
To be able to draw the three channels above each other and mix the colors, a special composition mode has to be set in QPainter: QPainter::CompositionMode_Plus.  
 
To be able to draw the three channels above each other and mix the colors, a special composition mode has to be set in QPainter: QPainter::CompositionMode_Plus.  
<code cpp>
+
<code cpp-qt>
 
void ChannelButton::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
 
void ChannelButton::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
 
{
 
{
Line 64: Line 80:
 
=Network handling=
 
=Network handling=
 
Originally developed to showcase the Qt Bearer Management Library, the example is meant to connect to a local network. To my surprise, I did not had to do anything but my phone automatically connected to the local network. Now the only thing that was needed was to issue QNetworkManager for the http-requests.  
 
Originally developed to showcase the Qt Bearer Management Library, the example is meant to connect to a local network. To my surprise, I did not had to do anything but my phone automatically connected to the local network. Now the only thing that was needed was to issue QNetworkManager for the http-requests.  
 +
 
=Screenshots=
 
=Screenshots=
 
<gallery widths=300px heights=400px>
 
<gallery widths=300px heights=400px>
Line 74: Line 91:
 
=Download Code Example=
 
=Download Code Example=
 
[[File:Httpremote.zip]]
 
[[File:Httpremote.zip]]
[[Category:Qt]][[Category:Qt for Symbian]][[Category:Code Examples]]
+
[[Category:Code Examples]][[Category:MeeGo Harmattan]] [[Category:Symbian]]

Latest revision as of 04:17, 11 October 2012

Article Metadata
Code ExampleTested with
Devices(s): Nokia 5800 XpressMusic, Nokia N97 mini
Compatibility
Platform(s): Qt
Symbian
Article
Keywords: QPainter
Created: axeljaeger (30 Mar 2010)
Last edited: hamishwillee (11 Oct 2012)

Contents

[edit] Overview

This example show how to implement a custom QGraphicsWidget that uses not so common graphics operations. This widget is then used to trigger custom http-get-requests. Such GET-requests are commonly used by cheap embedded hardware to trigger a certain action. The use case for this example is to remote control a media player by sending those requests when pressing on of the buttons.

[edit] Graphics

The idea behind the graphics is to show a remote that reminds the user of a situation related to media playback. Digital pictures are usually composed of three color channels: Red, Blue and Green. Other colors are mixed from these channels. If these channels are shifted in position, the user will see the three separate channels. This UI is composed of white controls on a dark background. But whenever the user presses a control, the color channels separate, orbit around the center of the control and the vibra goes on to simulate the effect of a motor or other device.

To be able to draw the three channels above each other and mix the colors, a special composition mode has to be set in QPainter: QPainter::CompositionMode_Plus.

void ChannelButton::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
// Store current composition mode, brush and pen to be able to restore them. QPainter's native
// save/restore seem not to work for composition mode.
QPainter::CompositionMode old_mode(painter->compositionMode());
QPen old_pen(painter->pen());
QBrush old_brush(painter->brush());
 
// Set special composition mode
painter->setCompositionMode(QPainter::CompositionMode_Plus);
 
double offset(m_phase * 5);
 
painter->setPen(QPen(Qt::NoPen));
 
// Draw red channel
painter->save();
painter->setBrush(Qt::red);
painter->translate(QPointF(cos(M_PI * (m_angle + 15.0) / 180.0),
sin(M_PI * (m_angle + 15.0) / 180.0)) * offset);
painter->drawPath(m_path);
painter->restore();
 
// Draw green channel
painter->save();
painter->setBrush(Qt::green);
painter->translate(QPointF(cos(M_PI * (m_angle + 135.0) / 180.0),
sin(M_PI * (m_angle + 135.0) / 180.0)) * offset);
painter->drawPath(m_path);
painter->restore();
 
// Draw blue channel
painter->save();
painter->setBrush(Qt::blue);
painter->translate(QPointF(cos(M_PI * (m_angle + 285.0) / 180.0),
sin(M_PI * (m_angle + 285.0) / 180.0)) * offset);
painter->drawPath(m_path);
painter->restore();
 
// Restore previos painter configuration
painter->setPen(old_pen);
painter->setBrush(old_brush);
painter->setCompositionMode(old_mode);
}

[edit] Network handling

Originally developed to showcase the Qt Bearer Management Library, the example is meant to connect to a local network. To my surprise, I did not had to do anything but my phone automatically connected to the local network. Now the only thing that was needed was to issue QNetworkManager for the http-requests.

[edit] Screenshots

Keep in mind that the screenshot shows only one frame of the animation of the actual running application.

[edit] Testing the application

The example is either be meant to be compiled directly for the device or as a desktop application.

[edit] Download Code Example

File:Httpremote.zip

This page was last modified on 11 October 2012, at 04:17.
78 page views in the last 30 days.
×