impressionyang/ESP32_upper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat✨: 增加HomePage的页面内容

Browse Source
This commit is contained in:
Alvin Young 2024-11-29 16:35:10 +08:00
parent ae221bb54c
commit e4b0551e59
8 changed files with 205 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CMakeLists.txt
View File

@ -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.

3
Main.qml
View File

@ -10,6 +10,9 @@ Window {
minimumHeight: 600
minimumWidth: 800
// color: "green"
GlobalProperties {
id: id_gp
}
MainPage {
id: id_home_page

57
QML/components/HomePageConnectStateInfo.qml Normal file
View File

@ -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
}
}
}
}

44
QML/components/IconInfoLabel.qml Normal file
View File

@ -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
}
}
}
}

33
QML/components/LeftMenu.qml
View File

@ -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)
}
}

3
QML/models/GlobalProperties.qml
View File

@ -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
}

84
QML/pages/HomePage.qml
View File

@ -1,12 +1,86 @@
import QtQuick 2.15
import QtQuick.Layouts
import ESP32_upper 1.0
Item {
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 {
anchors.centerIn: parent
id: id_lm_tooltip_text
text: "Home Page"
font.pixelSize: 20
color: "#0e0606"
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{ }
}
}
}

1
QML/pages/MainPage.qml
View File

@ -21,6 +21,7 @@ Item {
}
Rectangle {
id: id_right_panel
width: Window.width - id_left_panel.width
height: Window.height
color: "#0000FF"