diff --git a/CMakeLists.txt b/CMakeLists.txt index 07b4a05..0ece2c2 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -30,6 +30,9 @@ qt_add_qml_module(appESP32_upper QML_FILES QML/pages/CmdPage.qml QML_FILES QML/pages/PlotPage.qml QML_FILES QML/pages/OTAPage.qml + QML_FILES QML/components/IconInfoLabel.qml + QML_FILES QML/components/HomePageConnectStateInfo.qml + QML_FILES ) # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1. diff --git a/Main.qml b/Main.qml index a36f189..a7f0076 100644 --- a/Main.qml +++ b/Main.qml @@ -10,6 +10,9 @@ Window { minimumHeight: 600 minimumWidth: 800 // color: "green" + GlobalProperties { + id: id_gp + } MainPage { id: id_home_page diff --git a/QML/components/HomePageConnectStateInfo.qml b/QML/components/HomePageConnectStateInfo.qml new file mode 100644 index 0000000..369b5d1 --- /dev/null +++ b/QML/components/HomePageConnectStateInfo.qml @@ -0,0 +1,57 @@ +import QtQuick 2.15 +import QtQuick.Layouts +import QtQuick.Controls +import ESP32_upper + +Item { + anchors.fill: parent + Rectangle{ + id: id_home_page_csi_root + height: parent.height + width: parent.width + RowLayout { + spacing : 2 + height: parent.height + width: parent.width + Text { + Layout.preferredWidth: 100 + text: "连接状态:" + font.pixelSize: id_gp.font_info_pixel_size + } + + + Text { + Layout.preferredWidth: 100 + id: id_text_home_page_connet_state + text: "未连接" + font.pixelSize: id_gp.font_info_pixel_size + } + + Rectangle { + Layout.fillWidth: true + opacity: 0 + } + + Button { + Layout.preferredWidth: 100 + text: "重新连接" + hoverEnabled: false + font.pixelSize: id_gp.font_info_pixel_size + background: Rectangle { // 自定义背景 + color: control.pressed ? "lightblue" : "blue" + border.color: "black" + radius: 10 + } + onClicked: { + console.log("press butn") + } + } + + Rectangle { + Layout.preferredWidth: 10 + opacity: 0 + } + + } + } +} diff --git a/QML/components/IconInfoLabel.qml b/QML/components/IconInfoLabel.qml new file mode 100644 index 0000000..868bf0a --- /dev/null +++ b/QML/components/IconInfoLabel.qml @@ -0,0 +1,44 @@ +import QtQuick 2.15 +import QtQuick.Controls +import QtQuick.Layouts +import Qt5Compat.GraphicalEffects +import ESP32_upper + +Item { + anchors.fill: parent + Rectangle { + color: "#F00000" + radius: 5 + height: parent.height + RowLayout { + spacing: 20 + height: parent.height + Image { + Layout.preferredWidth: parent.height + Layout.preferredHeight: parent.height + id:id_svg_icon_info_lb + source: "qrc:/assets/img/terminal-box-fill.svg" + smooth: true // 使图片平滑缩放 + asynchronous: true // 异步加载图片 + } + + // 使用 ColorOverlay 修改 SVG 颜色 + ColorOverlay { + anchors.fill: id_svg_icon_info_lb + source: id_svg_icon_info_lb + color: id_gp.left_menu_non_lighlight_color // 修改后的 SVG 图片颜色 + } + + Text { + text: "芯片类型:" + font.pixelSize: id_gp.font_info_pixel_size + } + + Text { + id: id_comp_ico_info_lb + text: "未确认" + font.pixelSize: id_gp.font_info_pixel_size + } + } + } +} diff --git a/QML/components/LeftMenu.qml b/QML/components/LeftMenu.qml index c5ba362..0aa7ff4 100644 --- a/QML/components/LeftMenu.qml +++ b/QML/components/LeftMenu.qml @@ -5,9 +5,6 @@ import Qt5Compat.GraphicalEffects import ESP32_upper 1.0 Item { - GlobalProperties { - id: global_properties - } Component { id: contactDelegate @@ -17,31 +14,31 @@ Item { anchors.left: parent.left // 靠父组件左边 anchors.leftMargin: 10 // 左边距20像素 radius: 5 - color: global_properties.left_menu_non_lighlight_color + color: id_gp.left_menu_non_lighlight_color MouseArea { id: mouseArea anchors.fill: parent hoverEnabled: true onClicked: { // id_view.view.currentIndex = index - global_properties.left_menu_index_last = global_properties.left_menu_index_now - global_properties.left_menu_index_now = index + id_gp.left_menu_index_last = id_gp.left_menu_index_now + id_gp.left_menu_index_now = index id_view.currentIndex = index id_layout_right_panel.currentIndex = index - // console.log("left_menu_index", global_properties.left_menu_index_now) + // console.log("left_menu_index", id_gp.left_menu_index_now) } onEntered: { - if (index != global_properties.left_menu_index_now) { - id_view.itemAtIndex(index).color = global_properties.left_menu_focus_color + if (index != id_gp.left_menu_index_now) { + id_view.itemAtIndex(index).color = id_gp.left_menu_focus_color } id_lm_tooltip_text.text = name; id_lm_tooltip.visible = true; } onExited: { - if (index != global_properties.left_menu_index_now) { - id_view.itemAtIndex(index).color = global_properties.left_menu_non_lighlight_color + if (index != id_gp.left_menu_index_now) { + id_view.itemAtIndex(index).color = id_gp.left_menu_non_lighlight_color } id_lm_tooltip.visible = false; } @@ -63,7 +60,7 @@ Item { ColorOverlay { anchors.fill: svgIMG source: svgIMG - color: global_properties.left_menu_icon_color // 修改后的 SVG 图片颜色 + color: id_gp.left_menu_icon_color // 修改后的 SVG 图片颜色 } } @@ -110,17 +107,17 @@ Item { clip : true snapMode: ListView.SnapToItem onCurrentIndexChanged: { - // console.log("2 left_menu_index", global_properties.left_menu_index_now) - itemAtIndex(global_properties.left_menu_index_now).color = global_properties.left_menu_lighlight_color - itemAtIndex(global_properties.left_menu_index_last).color = global_properties.left_menu_non_lighlight_color + // console.log("2 left_menu_index", id_gp.left_menu_index_now) + itemAtIndex(id_gp.left_menu_index_now).color = id_gp.left_menu_lighlight_color + itemAtIndex(id_gp.left_menu_index_last).color = id_gp.left_menu_non_lighlight_color } Component.onCompleted: { id_view.currentIndex = id_view.count - global_properties.left_menu_index_last = id_view.count - global_properties.left_menu_index_now = 0 + id_gp.left_menu_index_last = id_view.count + id_gp.left_menu_index_now = 0 id_view.currentIndex = 0 - console.log("complete at ", global_properties.left_menu_index_now) + console.log("complete at ", id_gp.left_menu_index_now) } } diff --git a/QML/models/GlobalProperties.qml b/QML/models/GlobalProperties.qml index 29663f8..e91f622 100644 --- a/QML/models/GlobalProperties.qml +++ b/QML/models/GlobalProperties.qml @@ -5,8 +5,9 @@ Item { property int left_menu_index_now: 0 property int left_menu_index_last: 0 property string left_menu_lighlight_color: "#FF00FF" - property string left_menu_non_lighlight_color: "#FFFFFF" + property string left_menu_non_lighlight_color: "#00FF00" property string left_menu_focus_color: "#FAFA00" property string left_menu_icon_color: "#0d4e8b" + property int font_info_pixel_size: 20 } diff --git a/QML/pages/HomePage.qml b/QML/pages/HomePage.qml index 9f1a7d6..8896abb 100644 --- a/QML/pages/HomePage.qml +++ b/QML/pages/HomePage.qml @@ -1,12 +1,86 @@ import QtQuick 2.15 +import QtQuick.Layouts +import ESP32_upper 1.0 Item { - Text { - anchors.centerIn: parent - id: id_lm_tooltip_text - text: "Home Page" - font.pixelSize: 20 - color: "#0e0606" + anchors.fill: parent + ColumnLayout { + width: parent.width + height: parent.height + spacing: 2 + Rectangle { + // chip type + Layout.preferredWidth: id_right_panel.width + Layout.preferredHeight: 60 + color: "red" + // 主要的窗口内容容器 + IconInfoLabel{ } + } + Rectangle { + // version info + Layout.preferredWidth: id_right_panel.width + Layout.preferredHeight: 60 + color: "yellow" + RowLayout { + height: parent.height + spacing: 10 + Text { + text: "版本号: 软件版本->" + font.pixelSize: id_gp.font_info_pixel_size + } + Text { + id: id_text_soft_ver + text: "未获取" + font.pixelSize: id_gp.font_info_pixel_size + } + Text { + text: " 硬件版本->" + font.pixelSize: id_gp.font_info_pixel_size + } + Text { + id: id_text_hard_ver + text: "未获取" + font.pixelSize: id_gp.font_info_pixel_size + } + } + } + + Rectangle { + // software build time + Layout.preferredWidth: id_right_panel.width + Layout.preferredHeight: 60 + color: "green" + RowLayout { + height: parent.height + spacing: 10 + Text { + text: "固件编译时间:" + font.pixelSize: id_gp.font_info_pixel_size + } + Text { + id: id_text_firm_build_time + text: "未获取" + font.pixelSize: id_gp.font_info_pixel_size + } + } + } + + Rectangle { + Layout.preferredWidth: id_right_panel.width + Layout.preferredHeight: 60 + Layout.fillHeight: true + opacity: 0 + } + + Rectangle { + // connect state + Layout.preferredWidth: id_right_panel.width + Layout.preferredHeight: 60 + color: "brown" + // 主要的窗口内容容器 + HomePageConnectStateInfo{ } + } + } } diff --git a/QML/pages/MainPage.qml b/QML/pages/MainPage.qml index 73dd5aa..d11f601 100644 --- a/QML/pages/MainPage.qml +++ b/QML/pages/MainPage.qml @@ -21,6 +21,7 @@ Item { } Rectangle { + id: id_right_panel width: Window.width - id_left_panel.width height: Window.height color: "#0000FF"