diff --git a/qml/main.qml b/qml/main.qml index e676d0d0e..52000f63e 100755 --- a/qml/main.qml +++ b/qml/main.qml @@ -27,8 +27,15 @@ ApplicationWindow { //width: 850 //height: 480 - width: (settings.general_screen_rotation == 90 || settings.general_screen_rotation == 270) ? m_window_height : m_window_width - height: (settings.general_screen_rotation == 90 || settings.general_screen_rotation == 270) ? m_window_width : m_window_height + width: 1920 + height: 1080 + + onWidthChanged: { + _qrenderstats.set_window_width(width) + } + onHeightChanged: { + _qrenderstats.set_window_height(height) + } onWidthChanged: { _qrenderstats.set_window_width(width) diff --git a/qml/ui/HUDOverlayGrid.qml b/qml/ui/HUDOverlayGrid.qml index feeda9815..26c183e29 100644 --- a/qml/ui/HUDOverlayGrid.qml +++ b/qml/ui/HUDOverlayGrid.qml @@ -292,9 +292,6 @@ Item { LinkUpRSSIWidget { id: uplink } - Sidebar{ - id: sidebar - } // ---------------------------------------------------------------------------- // TODO SORT ME @@ -474,6 +471,9 @@ Item { UAVTimeWiget{ id: uavtimewidget } + Sidebar{ + id: sidebar + } } // Extra element - allows customizing the OSD color(s) and more diff --git a/qml/ui/widgets/Sidebar.qml b/qml/ui/widgets/Sidebar.qml index ff757fab2..5d4e9d97c 100644 --- a/qml/ui/widgets/Sidebar.qml +++ b/qml/ui/widgets/Sidebar.qml @@ -13,25 +13,32 @@ import "../elements" BaseWidget { id: sidebar - y: (applicationWindow.height/2) - (googleUI.height/2) + width: 64 + height: 24 visible: settings.show_sidebar - widgetIdentifier: "sidebar" - bw_verbose_name: "SIDEBAR" + defaultVCenter: true + widgetIdentifier: "sidebar_widget" + bw_verbose_name: "Menu" + defaultHCenter: false + hasWidgetDetail: false + property int secondaryUiWidth: 335 - property int secondaryUiHeight: 335 + property int secondaryUiHeight: 375 property string secondaryUiColor: "#000" - property real secondaryUiOpacity: 0.85 - property int secondaryUizPos: 999 - - + property real secondaryUiOpacity: 0.75 + property string mainDarkColor: "#302f30" + property string highlightColor: "#555" + property int m_control_yaw : settings.control_widget_use_fc_channels ? _rcchannelsmodelfc.control_yaw : _rcchannelsmodelground.control_yaw + property int m_control_roll: settings.control_widget_use_fc_channels ? _rcchannelsmodelfc.control_roll : _rcchannelsmodelground.control_roll + property int m_control_pitch: settings.control_widget_use_fc_channels ? _rcchannelsmodelfc.control_pitch : _rcchannelsmodelground.control_pitch + property int m_control_throttle: settings.control_widget_use_fc_channels ? _rcchannelsmodelfc.control_throttle : _rcchannelsmodelground.control_throttle property int selectedItemIndex: -1 ColumnLayout { id: uiButton width: 32 height: 32 - y: (googleUI.height/2)-(uiButton.height/2) - z: 99 + anchors.verticalCenter: parent.verticalCenter MouseArea { id: mouseArea1 @@ -42,13 +49,12 @@ BaseWidget { googleUI.visible = true linkUI.visible = true uiButton.visible = false - // Perform button action here or emit a signal } Rectangle { width: parent.width height: parent.height - color: "transparent" // Transparent background + color: "transparent" RowLayout { width: parent.width @@ -70,6 +76,8 @@ BaseWidget { ColumnLayout { spacing: 10 visible: true + anchors.verticalCenter: parent.verticalCenter + RowLayout { @@ -78,20 +86,25 @@ BaseWidget { Rectangle { id: googleUI - width: 32 - height: 335 - color: "#302f30" + width: secondaryUiHeight / 8 //number of items + height: secondaryUiHeight + color: highlightColor opacity: 0.7 visible: false - z: 99 + + // Add a property to track the selected item index + property int selectedItemIndex: 0 ListView { width: parent.width height: parent.height focus: true - //snapMode: ListView.SnapOneItem + keyNavigationEnabled: true + interactive: false + model: ListModel { ListElement { text: " \uf1eb"; subText: "link" } + ListElement { text: " \uf11b"; subText: "rc" } ListElement { text: " \uf03d"; subText: "video" } ListElement { text: " \uf030"; subText: "camera" } ListElement { text: " \uf0c7"; subText: "recording" } @@ -102,13 +115,15 @@ BaseWidget { delegate: Item { width: parent.width - height: 48 + height: secondaryUiHeight / 8 //number of items MouseArea { id: mouseArea anchors.fill: parent onClicked: { + // Update the selected item index + googleUI.selectedItemIndex = index; function hideElements() { linkUI.visible = false; @@ -117,45 +132,43 @@ BaseWidget { recordingUI.visible = false; displayUI.visible = false; miscUI.visible = false; + rcUI.visible = false; } - sidebar.selectedItemIndex = index; console.log("Item clicked: " + model.subText) var uiElementName = model.subText + "UI"; - if (model.subText==="back"){ - googleUI.visible=false - uiButton.visible=true + if (model.subText === "back") { + googleUI.visible = false; + uiButton.visible = true; hideElements(); - } - else if (model.subText==="link"){ + } else if (model.subText === "link") { hideElements(); linkUI.visible = true; - } - else if (model.subText==="video"){ + } else if (model.subText === "rc") { + hideElements(); + rcUI.visible = true; + } else if (model.subText === "video") { hideElements(); videoUI.visible = true; - } - else if (model.subText==="camera"){ + } else if (model.subText === "camera") { hideElements(); cameraUI.visible = true; - } - else if (model.subText==="recording"){ + } else if (model.subText === "recording") { hideElements(); recordingUI.visible = true; - } - else if (model.subText==="display"){ + } else if (model.subText === "display") { hideElements(); displayUI.visible = true; - } - else if (model.subText==="drone"){ + } else if (model.subText === "drone") { hideElements(); miscUI.visible = true; } } + Rectangle { width: parent.width height: parent.height - color: index === sidebar.selectedItemIndex ? "#555" : "#302f30" + color: index === googleUI.selectedItemIndex ? highlightColor : mainDarkColor } RowLayout { @@ -164,15 +177,17 @@ BaseWidget { Text { text: model.text - font.pixelSize: 16 + font.pixelSize: secondaryUiHeight / 16 opacity: 1.0 font.family: "Font Awesome 5 Free" color: "white" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter } Text { text: model.subText visible: false - font.pixelSize: 16 + font.pixelSize: secondaryUiHeight / 16 opacity: 1.0 color: "white" horizontalAlignment: Text.AlignHCenter @@ -194,8 +209,25 @@ BaseWidget { color: secondaryUiColor opacity: secondaryUiOpacity visible: false - z: secondaryUizPos + Rectangle { + id: linkUiHeader + width: secondaryUiWidth + height: secondaryUiHeight/8 + color: highlightColor + opacity: 1.0 + + Text { + anchors.centerIn: parent + text: "LINK" + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } Item { + anchors.top: parent.top + anchors.topMargin: linkUiHeader.height/2 width: parent.width height: parent.height @@ -204,7 +236,7 @@ BaseWidget { spacing: 5 Text{ - text: "Resilliancy -> Quality" + text: "Range -> Quality" + " (MCS" + _ohdSystemAir.curr_mcs_index + ")" font.pixelSize: 14 font.family: "AvantGarde-Medium" color: "#ffffff" @@ -224,7 +256,7 @@ BaseWidget { } } Text{ - text: "Frequency" + text: "Frequency" + " (" + _ohdSystemGround.curr_channel_mhz + ")" font.pixelSize: 14 font.family: "AvantGarde-Medium" color: "#ffffff" @@ -235,24 +267,24 @@ BaseWidget { model: [ "2312", "2332", "2352", "2372", "2392", "2412", "2432", "2452", "2472", "2492", "2512", "2532", "2572", "2592", "2612", "2632", "2652", "2672", "2692", "2712", "5180", "5200", "5220", "5240", "5260", "5280", "5300", "5320", "5500", "5520", "5540", "5560", "5580", "5600", "5620", "5640", "5660", "5680", "5700", "5745", "5765", "5785", "5805", "5825", "5845", "5865", "5885" ] } Text{ - text: "TX Power" - font.pixelSize: 14 - font.family: "AvantGarde-Medium" - color: "#ffffff" - smooth: true + text: "TX Power Air" + " (" + "TODO" + ")" + font.pixelSize: 14 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + Slider { + id: txPowerAirSlider + from: 22 + to: 58 + stepSize: 4 + //snapMode: Slider.SnapToStep + value: 22 // Initial value + Material.accent: Material.Grey + onValueChanged: { + // Handle the slider value change here + console.log("TX Power Air Slider:", value) } - Slider { - id: txPowerSlider - from: 22 - to: 58 - stepSize: 4 - //snapMode: Slider.SnapToStep - value: 22 // Initial value - Material.accent: Material.Grey - onValueChanged: { - // Handle the slider value change here - console.log("TX Power Slider:", value) - } } Text{ text: "Bandwith" @@ -279,6 +311,142 @@ BaseWidget { } } } + Rectangle { + id: linkUiFooter + anchors.top: parent.top + anchors.topMargin: secondaryUiHeight-saveText.height-10 + anchors.left: parent.left + anchors.leftMargin: secondaryUiWidth-saveText.width-10 + + + Text { + id: saveText + text: "\uf019" + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } + } + Rectangle { + id: rcUI + width: secondaryUiWidth + height: secondaryUiHeight + color: secondaryUiColor + opacity: secondaryUiOpacity + visible: false + Rectangle { + id: rcUiHeader + width: secondaryUiWidth + height: secondaryUiHeight/8 + color: highlightColor + opacity: 1.0 + + Text { + anchors.centerIn: parent + text: "OpenHD-RC" + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } + Item { + anchors.top: parent.top + anchors.topMargin: rcUiHeader.height/2 + width: parent.width + height: parent.height + + Column { + anchors.centerIn: parent + spacing: 5 + + Text{ + text: "Enable RC" + font.pixelSize: 14 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + Switch { + text: qsTr("") + } + Text{ + text: "Channel 1" + font.pixelSize: 14 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + ProgressBar { + id: progressBar1 + from: 1000 + to: 2000 + value: m_control_yaw + Material.accent: Material.Grey + } + Text{ + text: "Channel 2" + font.pixelSize: 14 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + ProgressBar { + id: progressBar2 + from: 1000 + to: 2000 + value: m_control_yaw + Material.accent: Material.Grey + } + Text{ + text: "Channel 3" + font.pixelSize: 14 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + ProgressBar { + id: progressBar3 + from: 1000 + to: 2000 + value: m_control_yaw + Material.accent: Material.Grey + } + Text{ + text: "Channel 4" + font.pixelSize: 14 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + ProgressBar { + id: progressBar4 + from: 1000 + to: 2000 + value: m_control_yaw + Material.accent: Material.Grey + } + } + } + Rectangle { + id: rcUiFooter + anchors.top: parent.top + anchors.topMargin: secondaryUiHeight-saveTextRC.height-10 + anchors.left: parent.left + anchors.leftMargin: secondaryUiWidth-saveTextRC.width-10 + + + Text { + id: saveTextRC + text: "\uf019" + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } } Rectangle { id: videoUI @@ -287,8 +455,25 @@ BaseWidget { color: secondaryUiColor opacity: secondaryUiOpacity visible: false - z: secondaryUizPos + Rectangle { + id: videoUiHeader + width: secondaryUiWidth + height: secondaryUiHeight/8 + color: highlightColor + opacity: 1.0 + + Text { + anchors.centerIn: parent + text: "Video" + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } Item { + anchors.top: parent.top + anchors.topMargin: videoUiHeader.height/2 width: parent.width height: parent.height @@ -297,26 +482,26 @@ BaseWidget { spacing: 5 ComboBox { - id:raspberryCams + id:raspberryCams3 visible: true width: 200 model: [ "IMX708","IMX462","IMX477" ] } ComboBox { - id:rock5Cams + id:rock5Cams3 visible: false width: 200 model: [ "IMX415","IMX462","IMX708" ] } Text{ - text: "Resolution 480p -> 1080p" + text: "Camera Mode"+ " (" + "1080p,60fps" + ")" font.pixelSize: 14 font.family: "AvantGarde-Medium" color: "#ffffff" smooth: true } Slider { - id: resolutionSlider + id: resolutionSlider3 from: 0 to: 2 stepSize: 1 @@ -328,45 +513,49 @@ BaseWidget { } } Text{ - text: "Framerate 30 -> 60" + text: "Switch Cameras" font.pixelSize: 14 font.family: "AvantGarde-Medium" color: "#ffffff" smooth: true } - Slider { - id: framerateSlider - from: 0 - to: 2 - stepSize: 1 - //snapMode: Slider.SnapToStep - value: 0 // Initial value - Material.accent: Material.Grey - onValueChanged: { - console.log("Framerate Slider:", value) - } - } - Text{ - text: "Bitrate" - font.pixelSize: 14 - font.family: "AvantGarde-Medium" - color: "#ffffff" - smooth: true + Switch { } - Slider { - id: bitrateSlider - from: 2 - to: 18 - stepSize: 2 - //snapMode: Slider.SnapToStep - value: 8 // Initial value - Material.accent: Material.Grey - onValueChanged: { - console.log("Birtate Slider:", value) + TabBar { + id: cameraSwitch + Material.accent: "#fff" + Material.foreground: "white" + background: Rectangle { + implicitWidth: 100 + implicitHeight: 40 + color: secondaryUiColor + } + TabButton { + text: qsTr("Cam1") + } + TabButton { + text: qsTr("Cam2") } } } } + Rectangle { + id: videoUiFooter + anchors.top: parent.top + anchors.topMargin: secondaryUiHeight-saveTextVid.height-10 + anchors.left: parent.left + anchors.leftMargin: secondaryUiWidth-saveTextVid.width-10 + + + Text { + id: saveTextVid + text: "\uf019" + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } } Rectangle { id: cameraUI @@ -375,9 +564,25 @@ BaseWidget { color: secondaryUiColor opacity: secondaryUiOpacity visible: false - z: secondaryUizPos + Rectangle { + id: cameraUiHeader + width: secondaryUiWidth + height: secondaryUiHeight/8 + color: highlightColor + opacity: 1.0 + Text { + anchors.centerIn: parent + text: "Camera" + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } Item { + anchors.top: parent.top + anchors.topMargin: cameraUiHeader.height/2 width: parent.width height: parent.height @@ -443,6 +648,23 @@ BaseWidget { } } } + Rectangle { + id: camUiFooter + anchors.top: parent.top + anchors.topMargin: secondaryUiHeight-saveTextCam.height-10 + anchors.left: parent.left + anchors.leftMargin: secondaryUiWidth-saveTextCam.width-10 + + + Text { + id: saveTextCam + text: "\uf019" + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } } Rectangle { id: recordingUI @@ -451,9 +673,25 @@ BaseWidget { color: secondaryUiColor opacity: secondaryUiOpacity visible: false - z: secondaryUizPos + Rectangle { + id: recordingUiHeader + width: secondaryUiWidth + height: secondaryUiHeight/8 + color: highlightColor + opacity: 1.0 + Text { + anchors.centerIn: parent + text: "Recording" + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } Item { + anchors.top: parent.top + anchors.topMargin: recordingUiHeader.height/2 width: parent.width height: parent.height @@ -525,11 +763,26 @@ BaseWidget { smooth: true } Switch { - text: qsTr("Enable Recording") } } } + Rectangle { + id: recUiFooter + anchors.top: parent.top + anchors.topMargin: secondaryUiHeight-saveTextRec.height-10 + anchors.left: parent.left + anchors.leftMargin: secondaryUiWidth-saveTextRec.width-10 + + Text { + id: saveTextRec + text: "\uf019" + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } } Rectangle { id: displayUI @@ -538,9 +791,25 @@ BaseWidget { color: secondaryUiColor opacity: secondaryUiOpacity visible: false - z: secondaryUizPos + Rectangle { + id: displayUiHeader + width: secondaryUiWidth + height: secondaryUiHeight/8 + color: highlightColor + opacity: 1.0 + Text { + anchors.centerIn: parent + text: "Misc" + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } Item { + anchors.top: parent.top + anchors.topMargin: displayUiHeader.height/2 width: parent.width height: parent.height @@ -595,8 +864,23 @@ BaseWidget { } } } + Rectangle { + id: miscUiFooter + anchors.top: parent.top + anchors.topMargin: secondaryUiHeight-saveTextMisc.height-10 + anchors.left: parent.left + anchors.leftMargin: secondaryUiWidth-saveTextMisc.width-10 + Text { + id: saveTextMisc + text: "\uf019" + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } } Rectangle { id: miscUI @@ -605,9 +889,25 @@ BaseWidget { color: secondaryUiColor opacity: secondaryUiOpacity visible: false - z: secondaryUizPos + Rectangle { + id: miscUiHeader + width: secondaryUiWidth + height: secondaryUiHeight/8 + color: highlightColor + opacity: 1.0 + Text { + anchors.centerIn: parent + text: "Status " + font.pixelSize: 21 + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + } Item { + anchors.top: parent.top + anchors.topMargin: miscUiHeader.height/2 width: parent.width height: parent.height @@ -636,7 +936,7 @@ BaseWidget { } RowLayout { Text { - text: "Frequency:" + text: "Screen:" font.pixelSize: 14 font.bold: true font.family: "AvantGarde-Medium" @@ -645,7 +945,7 @@ BaseWidget { } Text { - text: "5801" + text: applicationWindow.width + "x" + applicationWindow.height font.pixelSize: 14 font.family: "AvantGarde-Medium" color: "#ffffff" @@ -653,9 +953,10 @@ BaseWidget { } } + RowLayout { Text { - text: "Format:" + text: "Frequency:" font.pixelSize: 14 font.bold: true font.family: "AvantGarde-Medium" @@ -664,7 +965,7 @@ BaseWidget { } Text { - text: "1080p 60fps" + text: _ohdSystemGround.curr_channel_mhz + "Mhz" font.pixelSize: 14 font.family: "AvantGarde-Medium" color: "#ffffff" @@ -674,7 +975,7 @@ BaseWidget { } RowLayout { Text { - text: "Version:" + text: "Wifi-Adapter:" font.pixelSize: 14 font.bold: true font.family: "AvantGarde-Medium" @@ -683,7 +984,34 @@ BaseWidget { } Text { - text: "OpenHD 2.5 evo" + id: wifiMessage + property int wifiCode: _ohdSystemAir.ohd_wifi_type + + function wifiName(code) { + switch (code) { + case 11: return "Asus AC56"; + case 12: return "8812AU CUSTOM"; + case 21: return "88XXBU"; + default: return "unknown"; + } + } + + text: wifiName(wifiCode) + "("+_ohdSystemAir.ohd_wifi_type+")" + Layout.leftMargin: 12 + } + } + RowLayout { + Text { + text: "Format:" + font.pixelSize: 14 + font.bold: true + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + + Text { + text: "1080p 60fps" font.pixelSize: 14 font.family: "AvantGarde-Medium" color: "#ffffff" @@ -693,7 +1021,7 @@ BaseWidget { } RowLayout { Text { - text: "Hardware Ground:" + text: "Version:" font.pixelSize: 14 font.bold: true font.family: "AvantGarde-Medium" @@ -702,7 +1030,7 @@ BaseWidget { } Text { - text: "X86" + text: "OpenHD 2.5 evo" font.pixelSize: 14 font.family: "AvantGarde-Medium" color: "#ffffff" @@ -720,6 +1048,43 @@ BaseWidget { smooth: true } + Text { + id: platformMessage + property int platformCode: _ohdSystemAir.ohd_platform_type + + function platformName(code) { + switch (code) { + case 0: return "unknown"; + case 10: return "X20"; + case 20: return "x86"; + case 30: return "rpi"; + case 31: return "rpi 4"; + case 32: return "rpi 3"; + case 33: return "rpi 2"; + case 34: return "rpi 1"; + case 35: return "rpi 0"; + case 40: return "rock"; + case 41: return "rk3566"; + case 42: return "rock5a"; + case 43: return "rock5b"; + default: return "unknown"; + } + } + + text: platformName(platformCode) + "("+_ohdSystemAir.ohd_platform_type+")" + Layout.leftMargin: 12 + } + } + RowLayout { + Text { + text: "Hardware Ground:" + font.pixelSize: 14 + font.bold: true + font.family: "AvantGarde-Medium" + color: "#ffffff" + smooth: true + } + Text { text: "Core3566" font.pixelSize: 14 @@ -733,7 +1098,11 @@ BaseWidget { Button { id: button text: "Advanced Menu" + + onClicked: { + settings_panel.visible = true } + } } } }