Qt編寫安防視頻監控系統11-動態換膚

時間 2019-12-08

標籤編寫視頻監控系統動態欄目 Android 简体版

原文原文鏈接

1、前言

Qt中的動態換膚技術是很是一流的，直接調用qApp->setStyleSheet(qss);就能夠對整個應用程序進行換膚，若是樣式表內容很少，或者對應的貼圖不對，效率仍是蠻好的，不過聽說有些人寫了幾千行的樣式表，加載起來可以明顯感受卡頓，畢竟此時所有刷新加載重繪，是很是耗CPU的，這種狀況就須要避免儘可能統同樣式表，能合併的就合併，固然，在性能比較好的電腦上，這個基本上遇不到的，也感受不到的，比如如今的手機相比於十年前的手機，如今動不動都6GB內存了，比起之前256MB內存的時候，不知道爽了多少倍，軟件上已經優化不了的事情，靠硬件升級到來的優化體驗仍是很是棒的。
在設置樣式表的過程當中，有時候會忘記對某些控件進行背景顏色的設置，我通常喜歡採用qApp->setPalette();來彌補這個缺陷，調用此方法之後，總體的背景顏色被統一設置成了同樣的，統一美觀。css

體驗地址：https://pan.baidu.com/s/1bbL2ZughZAgfIGrexyN-9g 提取碼：zkeh 。linux

2、系統介紹

監控系統是由攝像、傳輸、控制、顯示、記錄登記5大部分組成。攝像機經過同軸視頻電纜將視頻圖像傳輸到控制主機，控制主機再將視頻信號分配到各監視器及錄像設備，同時可將須要傳輸的語音信號同步錄入到錄像機內。經過控制主機，操做人員可發出指令，對雲臺的上、下、左、右的動做進行控制及對鏡頭進行調焦變倍的操做，並可經過控制主機實如今多路攝像機及雲臺之間的切換。利用特殊的錄像處理模式，可對圖像進行錄入、回放、處理等操做，使錄像效果達到最佳。安全

視頻監控系統由實時控制系統、監視系統及管理信息系統組成。實時控制系統完成實時數據採集處理、存儲、反饋的功能；監視系統完成對各個監控點的全天候的監視，能在多操做控制點上切換多路圖像；管理信息系統完成各種所需信息的採集、接收、傳輸、加工、處理，是整個系統的控制核心。視頻監控系統是安全防範系統的組成部分，它是一種防範能力較強的綜合系統。視頻監控以其直觀、方便、信息內容豐富而普遍應用於許多場合。app

3、功能特色

支持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系統。

4、效果圖

5、核心代碼

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";
        }
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。