Qt編寫安防視訊監控系統11-動態換膚
阿新 • • 發佈：2019-06-03
一、前言
Qt中的動態換膚技術是非常一流的，直接呼叫qApp->setStyleSheet(qss);就可以對整個應用程式進行換膚，如果樣式表內容不多，或者對應的貼圖不對，效率還是蠻好的，不過據說有些人寫了幾千行的樣式表，載入起來能夠明顯感覺卡頓，畢竟此時全部重新整理載入重繪，是非常耗CPU的，這種情況就需要避免儘量統一樣式表，能合併的就合併，當然，在效能比較好的電腦上，這個基本上遇不到的，也感覺不到的，好比現在的手機相比於十年前的手機，現在動不動都6GB記憶體了，比起以前256MB記憶體的時候，不知道爽了多少倍，軟體上已經優化不了的事情，靠硬體升級到來的優化體驗還是非常棒的。 在設定樣式表的過程中，有時候會忘記對某些控制元件進行背景顏色的設定，我一般喜歡採用qApp->setPalette();來彌補這個缺陷，呼叫此方法以後，整體的背景顏色被統一設定成了一樣的，統一美觀。
體驗地址：https://pan.baidu.com/s/1bbL2ZughZAgfIGrexyN-9g 提取碼：zkeh 。
二、系統介紹
監控系統是由攝像、傳輸、控制、顯示、記錄登記5大部分組成。攝像機通過同軸視訊電纜將視訊影象傳輸到控制主機，控制主機再將視訊訊號分配到各監視器及錄影裝置，同時可將需要傳輸的語音訊號同步錄入到錄影機內。 通過控制主機，操作人員可發出指令，對雲臺的上、下、左、右的動作進行控制及對鏡頭進行調焦變倍的操作，並可通過控制主機實現在多路攝像機及雲臺之間的切換。利用特殊的錄影處理模式，可對影象進行錄入、回放、處理等操作，使錄影效果達到最佳。
視訊監控系統由實時控制系統、監視系統及管理資訊系統組成。實時控制系統完成實時資料採集處理、儲存、反饋的功能；監視系統完成對各個監控點的全天候的監視，能在多操作控制點上切換多路影象；管理資訊系統完成各類所需資訊的採集、接收、傳輸、加工、處理，是整個系統的控制核心。視訊監控系統是安全防範系統的組成部分，它是一種防範能力較強的綜合系統。視訊監控以其直觀、方便、資訊內容豐富而廣泛應用於許多場合。
三、功能特點
- 支援16畫面切換，全屏切換等，包括1+4+6+8+9+13+16畫面切換。
- 支援alt+enter全屏，esc退出全屏。
- 自定義資訊框+錯誤框+詢問框+右下角提示框。
- 17套面板樣式隨意更換，所有樣式全部統一，包括選單等。
- 雲臺儀表盤滑鼠移上去高亮，八個方位精準識別。
- 底部畫面工具欄（畫面分割切換+截圖聲音等設定）移上去高亮。
- 可在配置檔案更改左上角logo+中文軟體名稱+英文軟體名稱。
- 封裝了百度地圖，三維切換，裝置點位，滑鼠按下獲取經緯度等。
- 堆疊窗體，每個窗體都是個單獨的qwidget，方便編寫自己的程式碼。
- 頂部滑鼠右鍵選單，可動態控制時間CPU+左上角面板+左下角面板+右上角面板+右下角面板的顯示和隱藏，支援恢復預設佈局。
- 工具欄可以放置多個小圖示和關閉圖示。
- 左側右側可拖動拉伸，並自動記憶寬高位置，重啟後恢復。
- 雙擊攝像機節點自動播放視訊，雙擊節點自動依次新增視訊，會自動跳到下一個，雙擊父節點自動新增該節點下的所有視訊。
- 攝像機節點拖曳到對應窗體播放視訊，同時支援拖曳本地檔案直接播放。
- 視訊畫面窗體支援拖曳交換，瞬間響應。
- 雙擊節點+拖曳節點+拖曳窗體交換位置，均自動更新url.txt。
- 支援從url.txt中載入16通道視訊播放，自動記憶最後通道對應的視訊，軟體啟動後自動開啟播放。
- 右下角音量條控制元件，失去焦點自動隱藏，音量條帶靜音圖示。
- 整合百度地圖，可以新增裝置對應位置，自動生成地圖，支援縮放和三維地圖，提供地圖風格選擇，共12種風格。
- 視訊拖動到通道窗體外自動刪除視訊。
- 滑鼠右鍵可刪除當前+所有視訊，截圖當前+所有視訊。
- 錄影機管理、攝像機管理，可新增刪除修改匯入匯出列印資訊，立即應用新的裝置資訊生成樹狀列表，不需重啟。
- 在pro檔案中可以自由開啟是否載入地圖。
- 視訊播放可選四種核心自由切換，vlc+ffmpeg+easyplayer+海康sdk，均可在pro中設定。
- 可設定1+4+9+16畫面輪詢，可設定輪詢間隔以及輪詢碼流型別等，直接在主介面底部工具欄右側單擊啟動輪詢按鈕即可，再次單擊停止輪詢。
- 預設超過10秒鐘未操作自動隱藏滑鼠指標。
- 高度可定製化，使用者可以很方便的在此基礎上衍生自己的功能，支援linux系統。
四、效果圖
五、核心程式碼
void AppInit::initStyle()
{
QFile file(App::StyleName);
if (file.open(QFile::ReadOnly)) {
QString qss = QLatin1String(file.readAll());
file.close();
QUIHelper::getQssColor(qss, QUIConfig::TextColor, QUIConfig::PanelColor, QUIConfig::BorderColor, QUIConfig::NormalColorStart,
QUIConfig::NormalColorEnd, QUIConfig::DarkColorStart, QUIConfig::DarkColorEnd, QUIConfig::HighColor);
//追加樣式
QStringList list;
//主背景
list.append(QString("QWidget#widgetMain{background:%1;}").arg(QUIConfig::BorderColor));
//logo
list.append(QString("#labLogoCn{font-size:%1px;}#labLogoEn{font-size:%2px;}")
.arg(QUIConfig::FontSize + 13).arg(QUIConfig::FontSize + 2));
//右上角選單
list.append(QString("QWidget#widgetMenu>QPushButton{border-radius:0px;padding:0px;margin:1px 1px 2px 1px;}"));
//視訊畫面
list.append(QString("VlcWidget,FFmpegWidget,EasyPlayerWidget,VideoWidget{font-size:%1px;qproperty-borderWidth:%2;qproperty-borderColor:%3;qproperty-focusColor:%4;}")
.arg(QUIConfig::FontSize + 10).arg(App::VideoBorder * 2).arg(QUIConfig::BorderColor).arg(QUIConfig::HighColor));
//畫面分割欄
list.append(QString("QWidget#widgetTool>QPushButton{background:transparent;border:none;}"));
list.append(QString("QWidget#widgetTool>QPushButton:hover{color:%1;}").arg(QUIConfig::HighColor));
list.append(QString("QWidget#widgetTool>QPushButton:pressed{color:%1;}").arg(QUIConfig::TextColor));
list.append(QString("QWidget#widgetTool>QPushButton:checked{color:%1;}").arg(QUIConfig::HighColor));
//頂部導航按鈕,可以自行修改圓角角度
int topBtnRadius = 20;
list.append(QString("QWidget#widgetBtn>QPushButton{font-size:%1px;background:transparent;border:none;border-radius:%2px;}")
.arg(QUIConfig::FontSize + 3).arg(topBtnRadius));
list.append(QString("QWidget#widgetBtn>QPushButton:checked,QWidget#widgetBtn>QPushButton:hover{background:%1;border:2px solid %2;}")
.arg(QUIConfig::DarkColorEnd).arg(QUIConfig::BorderColor));
//左側導航按鈕,可以自行修改圓角角度
int leftBtnRadius = 5;
list.append(QString("QWidget[flag=\"btn\"]>QPushButton{min-height:%1px;max-height:%1px;}").arg(30));
list.append(QString("QWidget[flag=\"btn\"]>QPushButton{font-size:%1px;background:transparent;border:none;border-radius:%2px;}")
.arg(QUIConfig::FontSize + 3).arg(leftBtnRadius));
list.append(QString("QWidget[flag=\"btn\"]>QPushButton:checked,QWidget[flag=\"btn\"]>QPushButton:hover{background:%1;border:2px solid %2;}")
.arg(QUIConfig::DarkColorEnd).arg(QUIConfig::BorderColor));
//面板框
list.append(QString("QFrame[flag=\"btn\"]{background:%1;}").arg(QUIConfig::BorderColor));
list.append(QString("QFrame[flag=\"btn\"]>QPushButton{font-size:%1px;font-weight:bold;}")
.arg(QUIConfig::FontSize + 3));
//雲臺圓形按鈕
list.append(QString("#widgetAB>QPushButton{border-width:2px;border-radius:%1px;min-width:%2px;max-width:%2px;min-height:%2px;max-height:%2px;}").arg(17).arg(20));
//左側導航欄及按鈕圖示大小
list.append(QString("QLineEdit#txtCard,QLabel#labTip,QLabel#labCard,QLabel#labTime{font-weight:bold;font-size:%1px;min-height:%2px;qproperty-alignment:AlignCenter;}").arg(QUIConfig::FontSize + 2).arg(28));
list.append(QString("QWidget[flag=\"navbtn\"] QPushButton,QFrame[flag=\"navbtn\"] QPushButton{qproperty-iconSize:%1px;min-width:%2px;}").arg(App::BtnIconSize).arg(App::BtnMinWidth));
//選項卡
list.append(QString("QTabWidget::pane{border:0px;}QTabBar::tab{min-width:%1px;min-height:%2px;}").arg(48).arg(20));
//樹狀控制元件
list.append(QString("QTreeView{padding:5px 0px 5px 10px;border-width:0px;}"));
//文字框控制元件
list.append(QString("QTextEdit,QTextEdit:hover,QTextEdit:focus{border-width:0px;border-radius:0px;}"));
//分隔條背景顏色
list.append(QString("QSplitter{qproperty-handleWidth:1px;}QSplitter::handle{background:%1;}").arg(QUIConfig::BorderColor));
//根據不同的樣式設定不同,雲臺控制元件
if (App::StyleName == ":/qss/blackblue.css") {
list.append(QString("GaugeCloud{qproperty-cloudStyle:CloudStyle_Blue;}"));
} else if (App::StyleName.contains("black")) {
list.append(QString("GaugeCloud{qproperty-cloudStyle:CloudStyle_Black;}"));
} else if (App::StyleName == ":/qss/blackblue.css") {
list.append(QString("GaugeCloud{qproperty-cloudStyle:CloudStyle_Blue;}"));
} else if (App::StyleName == ":/qss/darkblue.css") {
list.append(QString("GaugeCloud{qproperty-cloudStyle:CloudStyle_Blue;}"));
} else if (App::StyleName == ":/qss/purple.css") {
list.append(QString("GaugeCloud{qproperty-cloudStyle:CloudStyle_Purple;}"));
} else {
list.append(QString("GaugeCloud{qproperty-cloudStyle:CloudStyle_White;}"));
}
//雲臺控制元件滑鼠進入+按下顏色設定
list.append(QString("GaugeCloud{qproperty-pressColor:%1;qproperty-enterColor:%2;}")
.arg(QUIConfig::HighColor).arg("#47CAF6"));
//視訊回放控制元件
list.append(QString("VideoPlayback{qproperty-bgColor:%1;qproperty-videoBgColor:%1;"
"qproperty-textColor:%2;qproperty-videoTextColor:%2;qproperty-videoDataColor:%3;}")
.arg(QUIConfig::PanelColor).arg(QUIConfig::TextColor).arg(QUIConfig::HighColor));
//開關按鈕
bool black = (App::StyleName.contains("black") || App::StyleName.contains("darkblue") || App::StyleName.contains("purple"));
if (App::StyleName.contains("darkblue") || App::StyleName.contains("darkblack") || App::StyleName.contains("purple") || App::StyleName.contains("blackblue") || App::StyleName.contains("blackvideo")) {
list.append(QString("SwitchButton{min-width:%1px;max-width:%1px;min-height:%2px;max-height:%2px;"
"qproperty-bgColorOn:%3;qproperty-bgColorOff:%4;"
"qproperty-textColorOn:%5;qproperty-textColorOff:%5;"
"qproperty-sliderColorOn:%6;qproperty-sliderColorOff:%6;}")
.arg(App::SwitchBtnWidth).arg(App::SwitchBtnHeight)
.arg(black ? QUIConfig::DarkColorEnd : QUIConfig::NormalColorEnd)
.arg(black ? QUIConfig::NormalColorEnd : QUIConfig::DarkColorEnd)
.arg(QUIConfig::TextColor).arg(QUIConfig::PanelColor));
} else {
list.append(QString("SwitchButton{min-width:%1px;max-width:%1px;min-height:%2px;max-height:%2px;"
"qproperty-bgColorOn:%3;qproperty-bgColorOff:%4;"
"qproperty-textColorOn:%5;qproperty-textColorOff:%5;"
"qproperty-sliderColorOn:%6;qproperty-sliderColorOff:%6;}")
.arg(App::SwitchBtnWidth).arg(App::SwitchBtnHeight)
.arg(QColor(21, 156, 119).name()).arg(QColor(111, 122, 126).name())
.arg(QColor(250, 250, 250).name()).arg(QColor(255, 255, 255).name()));
}
//導航標題欄
list.append(QString("NavTitle{qproperty-bgColor:%1;qproperty-textColor:%2;qproperty-borderColor:%3;min-height:%4px;}")
.arg(QUIConfig::NormalColorStart).arg(QUIConfig::TextColor).arg(QUIConfig::BorderColor).arg(32));
list.append(QString("NavTitle{qproperty-iconNormalColor:%1;qproperty-iconHoverColor:%2;qproperty-iconPressColor:%3;}")
.arg(QUIConfig::TextColor).arg(QUIConfig::HighColor).arg(QUIConfig::TextColor));
//將新增的樣式加到統一樣式表中
qss += list.join("");
qApp->setPalette(QPalette(QUIConfig::PanelColor));
qApp->setStyleSheet(qss);
if (App::StyleName.contains("gray")) {
App::LogoBg = "config/logo_black.png";
} else if (App::StyleName.contains("blue") || App::StyleName.contains("flatblack")) {
App::LogoBg = "logo.png";
} else if (App::StyleName.contains("black") || App::StyleName.contains("dark")) {
App::LogoBg = "config/logo_white.png";
} else if (App::StyleName.contains("light") || App::StyleName.contains("flat")) {
App::LogoBg = "config/logo_black.png";
} else {
App::LogoBg = "logo.png";