Use Qt to develop a traffic graph for multiple devices (with a project diagram ),

Use Qt to develop a traffic graph for multiple devices (with a project diagram ),

I. Description:

In actual projects, we mainly use Qt to develop CS programs, of course, mainly clients. In the company project, this requirement is to display the traffic curves of multiple devices in real time. The devices send the traffic information to the server, and the server sends the information to the Qt client through Socket, after receiving the data through the Socket, the Qt client displays the data in a window of the program in real time. The data is displayed as a graph.

Ii. Interface Model
After receiving this functional requirement, the interface model used is shown in. The illustration is clearly marked and I will not describe it in detail:

Iii. Function Analysis

1. Because there are many devices and more than 100 devices, it is impossible to use a color for the traffic curve of each device. Therefore, select only several obvious colors as the traffic curve color of the device, each time a device comes up, a curve is drawn using one of the colors.

2. Use QSS to set the style information of a widget, such as foreground, background, selected time, and mouse movement.

3. Use a part as a special drawing part, which is placed in a window. Therefore, install the Event Filter to re-draw the child part information and draw a graph.

4. process online/offline network messages and Dynamic Traffic Information actively sent by the device; process connection/disconnection between the Qt client and the server.

Iv. Interface Effects

The development result is as follows:

The initial traffic diagram of all devices is shown in figure

Select a traffic diagram named a5. The traffic curve of the a5 device is bold and the background is translucent.

Select a traffic diagram named a7. The traffic curve of the a7 device is bold and the background is translucent.

V. Main Code

1 // message filtering, mainly used to repaint the child control and filter the Paint event 2 bool QAPRTCurWidget: eventFilter (QObject * watched, QEvent * event) 3 {4 if (watched = ui-> widget_rxtx & event-> type () = QEvent: Paint) 5 {6 updateWidgetRTX (); 7} 8 return QFrame:: eventFilter (watched, event); 9}

 

1 // Drawing operation 2 void QAPRTCurWidget: updateWidgetRTX () 3 {4 QPainter painter (ui-> widget_rxtx); 5 painter. setFont (QFont ("Times", 12, QFont: Bold); 6 // draw the background color 7 painterBackground (painter); 8 // draw the leftmost line, 9 painterLeftDashLine (painter) separated from List; 10 // draw ordinate text mark 11 updateVTextID (painter); 12 // draw ordinate text scale and Y axis 13 updateVTextMarkAndCoord (painter ); 14 // draw the RX curve 15 paintRXLineInfo (painter); 16 // draw the TX curve 17 paintTXLineInfo (painter); 18}

 

1 // draw the ordinate text scale and the horizontal and vertical axes. 2 void QAPRTCurWidget: updateVTextMarkAndCoord (QPainter & painter) 3 {4 painter. save (); 5 // The actual height of the drawing interval (Part height-top interval-bottom interval) 6 int nActPaintHeight = ui-> widget_rxtx-> height ()-INTERVAL_WIDGET_TOP-INTERVAL_WIDGET_BOTTOM; 7 // every interval height 8 float fIntervalHeight = (float) nActPaintHeight)/(m_nVSingleLinePointCount-1); 9 float fYPointForZero = ui-> widget_rxtx-> height ()-INTERVAL_WIDGET_BOTTOM; 10 double dDivideValue = 0; 11 if (ui-> toolButton_rxflow-> isChecked () 12 {13 dDivideValue = (double) nRXMaxValue)/(m_nVSingleLinePointCount-1 ); 14} 15 if (ui-> toolButton_txflow-> isChecked () 16 {17 dDivideValue = (double) nTXMaxValue)/(m_nVSingleLinePointCount-1 ); 18} 19 for (int nIndex = 0; nIndex <m_nVSingleLinePointCount; ++ nIndex) 20 {21 // set the text color 22 painter. setPen (TEXTCOLOR_WIDGET_PAINT); 23 // reduce the original font and set it to 824 QFont objFont = painter. font (); 25 objFont. setPointSize (8); 26 painter. setFont (objFont); 27 // draw text. The purpose of adding 3 is to keep the center unchanged with the horizontal line 28 painter. drawText (INTERVAL_VMARK_LEFT, fYPointForZero-nIndex * fIntervalHeight + 3, QCommonOP: getKMStrForBit (dDivideValue * nIndex); 29 // set the horizontal line color to 30 painter. setPen (COORDCOLOR_WIDGET_PAINT); 31 // draw a horizontal line (the first and last lines are solid lines and the middle are dotted lines) 32 QPen objPen = painter. pen (); 33 if (0 = nIndex | (m_nVSingleLinePointCount-1) = nIndex) 34 {35 objPen. setStyle (Qt: SolidLine); 36} 37 else38 {39 objPen. setStyle (Qt: DashLine); 40} 41 painter. setPen (objPen); 42 float x1 = ui-> widget_rxtx-> width ()-INTERVAL_WIDGET_RIGHT; 43 float y1 = fYPointForZero-nIndex * fIntervalHeight; 44 painter. drawLine (INTERVAL_HCOORD_LEFT, fYPointForZero-nIndex * fIntervalHeight, x1, y1); 45} 46 int nActPaintWidth = ui-> widget_rxtx-> width ()-INTERVAL_HCOORD_LEFT-INTERVAL_WIDGET_RIGHT; 47 // interval height at intervals-transverse: Pay attention to using (float) nActPaintWidth) as the molecule, I .e., floating point 48 float fIntervalWidth = (float) nActPaintWidth)/(m_nHSingleLinePointCount-1 ); 49 for (int nIndex = 0; nIndex <m_nHSingleLinePointCount; ++ nIndex) 50 {51 QPen objPen = painter. pen (); 52 if (0 = nIndex | (m_nHSingleLinePointCount-1) = nIndex) 53 {54 objPen. setStyle (Qt: SolidLine); 55} 56 else57 {58 objPen. setStyle (Qt: DashLine); 59} 60 painter. setPen (objPen); 61 int nXPoint = INTERVAL_HCOORD_LEFT + nIndex * fIntervalWidth; 62 painter. drawLine (nXPoint, INTERVAL_WIDGET_TOP, nXPoint, ui-> widget_rxtx-> height ()-INTERVAL_WIDGET_BOTTOM); 63} 64 painter. restore (); 65}