Skip to content

Commit

Permalink
UI improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@emericg
emericg committed Apr 11, 2024
1 parent 363c6db commit 55f668c
Show file tree
Hide file tree
Showing 6 changed files with 100 additions and 21 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ Demo barcode & QR code scanner based on qzxing and zxing-cpp libraries to scan a

- UIs
- [x] Phone UI
- [ ] Tablet (WIP)
- [x] Desktop UI (WIP)
- [x] Tablet UI
- [x] Desktop UI
- General features
- [x] Barcode reader
- [x] Multi camera support
Expand Down
2 changes: 1 addition & 1 deletion qml/MobileApplication.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ ApplicationWindow {
visible: true

property bool isHdpi: (utilsScreen.screenDpi >= 128 || utilsScreen.screenPar >= 2.0)
property bool isDesktop: (Qt.platform.os !== "android" || Qt.platform.os !== "ios")
property bool isDesktop: (Qt.platform.os !== "android" && Qt.platform.os !== "ios")
property bool isMobile: (Qt.platform.os === "android" || Qt.platform.os === "ios")
property bool isPhone: ((Qt.platform.os === "android" || Qt.platform.os === "ios") && (utilsScreen.screenSize < 7.0))
property bool isTablet: ((Qt.platform.os === "android" || Qt.platform.os === "ios") && (utilsScreen.screenSize >= 7.0))
Expand Down
9 changes: 4 additions & 5 deletions qml/MobileHeader.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ Rectangle {
property string rightMenuMode: "off" // on / off
signal rightMenuClicked()

////////////////////////////////////////////////////////////////////////////

function rightMenuIsOpen() { return actionMenu.visible; }
function rightMenuClose() { actionMenu.close(); }

////////////////////////////////////////////////////////////////////////////

// prevent clicks below this area
MouseArea { anchors.fill: parent; acceptedButtons: Qt.AllButtons; }

Expand All @@ -46,8 +46,6 @@ Rectangle {
color: Theme.colorStatusbar
}

////////////////////////////////////////////////////////////////////////////

Item {
anchors.fill: parent
anchors.topMargin: Math.max(screenPaddingStatusbar, screenPaddingTop)
Expand Down Expand Up @@ -76,7 +74,7 @@ Rectangle {

pressed: parent.pressed
//active: enabled && parent.down
color: Qt.rgba(Theme.colorForeground.r, Theme.colorForeground.g, Theme.colorForeground.b, 0.1)
color: Qt.rgba(Theme.colorHeaderHighlight.r, Theme.colorHeaderHighlight.g, Theme.colorHeaderHighlight.b, 0.33)
}

IconSvg {
Expand Down Expand Up @@ -129,6 +127,7 @@ Rectangle {

height: 2
opacity: 0.66

color: Theme.colorHeaderHighlight
visible: (appContent.state !== "ScreenTutorial")
}
Expand Down
91 changes: 84 additions & 7 deletions qml/ScreenBarcodeReader.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,10 +141,12 @@ Loader {
focusMode: Camera.FocusModeAutoNear

cameraDevice: mediaDevices.videoInputs[mediaDevices.selectedDevice] ? mediaDevices.videoInputs[mediaDevices.selectedDevice] : mediaDevices.defaultVideoInput
//cameraFormat: utilsCamera.selectCameraFormat(mediaDevices.selectedDevice)
cameraFormat: utilsCamera.selectCameraFormat(mediaDevices.selectedDevice)

onCameraDeviceChanged: {
console.log("CaptureSession::onCameraDeviceChanged()")
console.log("- correctionAngle: " + cameraDevice.correctionAngle)
console.log("- cameraFormat: " + cameraFormat)
}
onErrorOccurred: (errorString) => {
console.log("CaptureSession::onErrorOccurred() " + errorString)
Expand Down Expand Up @@ -175,9 +177,57 @@ Loader {

// Capture rectangle
property double captureRectStartFactorX: 0.05
property double captureRectStartFactorY: 0.25
property double captureRectStartFactorY: 0.20
property double captureRectFactorWidth: 0.9
property double captureRectFactorHeight: 0.5
property double captureRectFactorHeight: 0.45

// Capture rectangles
property rect captureRect
property rect captureRect_full: Qt.rect(0, 0, videoOutput.sourceRect.width, videoOutput.sourceRect.height)
property rect captureRect_mapped
property rect captureRect_mapped_str

property rect captureRect_mobile_top: Qt.rect(0.05, 0.20, 0.9, 0.45) // default
property rect captureRect_mobile_mid: Qt.rect(0.05, 0.25, 0.9, 0.5)
property rect captureRect_wide_left: Qt.rect(0.10, 0.12, 0.5, 0.76)
property rect captureRect_wide_right: Qt.rect(0.4, 0.12, 0.5, 0.76)

// Select capture rectangle
onWidthChanged: {
if (isTablet) {
videoOutput.mapCaptureRect(videoOutput.captureRect_wide_left)
}
if (isPhone) {
videoOutput.mapCaptureRect(videoOutput.captureRect_mobile_top)
}
if (isDesktop) {
if (singleColumn) {
videoOutput.mapCaptureRect(videoOutput.captureRect_mobile_mid)
} else {
videoOutput.mapCaptureRect(videoOutput.captureRect_wide_left)
}
}
}

////

function mapCaptureRect(newrect) {
videoOutput.captureRect = newrect

videoOutput.captureRectStartFactorX = videoOutput.captureRect.x
videoOutput.captureRectStartFactorY = videoOutput.captureRect.y
videoOutput.captureRectFactorWidth = videoOutput.captureRect.width
videoOutput.captureRectFactorHeight = videoOutput.captureRect.height

captureRect_mapped = Qt.rect((videoOutput.sourceRect.width - videoOutput.contentRect.x) * videoOutput.captureRectStartFactorX,
(videoOutput.sourceRect.height - videoOutput.contentRect.y) * videoOutput.captureRectStartFactorY,
(videoOutput.sourceRect.width) * videoOutput.captureRectFactorWidth,
(videoOutput.sourceRect.height) * videoOutput.captureRectFactorHeight)

videoOutput.printInfos()
console.log(" >> captureRect_mapped >> " + captureRect_mapped)
console.log(" >> captureRect_full >> " + captureRect_full)
}

////

Expand All @@ -204,10 +254,12 @@ Loader {
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom

visible: !settingsManager.scan_fullscreen && !captureZone.visible
color: "black"
opacity: 0.4
visible: !settingsManager.scan_fullscreen && !captureZone.visible
}

Item {
id: captureZone
anchors.fill: parent
Expand Down Expand Up @@ -435,14 +487,13 @@ Loader {
anchors.topMargin: Theme.componentMargin + Math.max(screenPaddingTop, screenPaddingStatusbar)
anchors.left: parent.left
anchors.leftMargin: Theme.componentMargin
anchors.right: parent.right
anchors.rightMargin: Theme.componentMargin
height: 48

visible: settingsManager.showDebug

Column {
anchors.top: parent.top
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter

Text {
id: fpsCounter
Expand Down Expand Up @@ -668,7 +719,33 @@ Loader {

////
}
/*
Row { // debug row 2 (top/left)
anchors.top: toprightmenus.bottom
anchors.topMargin: 8
anchors.left: parent.left
anchors.leftMargin: Theme.componentMargin
visible: (currentMode === "video" && settingsManager.showDebug)
RoundButton {
text: "1"
onClicked: videoOutput.mapCaptureRect(videoOutput.captureRect_mobile_mid)
}
RoundButton {
text: "2"
onClicked: videoOutput.mapCaptureRect(videoOutput.captureRect_mobile_top)
}
RoundButton {
text: "3"
onClicked: videoOutput.mapCaptureRect(videoOutput.captureRect_wide_left)
}
RoundButton {
text: "4"
onClicked: videoOutput.mapCaptureRect(videoOutput.captureRect_wide_right)
}
}
*/
////////

MenuDebug {
Expand Down
13 changes: 8 additions & 5 deletions qml/ScreenBarcodeWriter.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,11 +324,14 @@ Loader {
onTextChanged: barcodeAdvanced.barcode_string = text

SelectorMenu {
id: barcodeEncodingSeclector
id: barcodeEncodingSelector
anchors.left: parent.left
anchors.leftMargin: 4
anchors.bottom: parent.bottom
height: 32
anchors.bottomMargin: 4

visible: isDesktop
height: 32
opacity: 0.66
currentSelection: 0
model: ListModel {
Expand Down Expand Up @@ -431,7 +434,7 @@ Loader {
anchors.left: parent.left
anchors.right: parent.right

visible: (barcodeEccSeclector.model !== null)
visible: (barcodeEccSelector.model !== null)
spacing: 16

Text {
Expand All @@ -442,7 +445,7 @@ Loader {
}

SelectorMenu {
id: barcodeEccSeclector
id: barcodeEccSelector
anchors.verticalCenter: parent.verticalCenter
height: 32

Expand Down Expand Up @@ -531,7 +534,7 @@ Loader {
}

SelectorMenu {
id: barcodeBorderSeclector
id: barcodeBorderSelector
anchors.verticalCenter: parent.verticalCenter
height: 32

Expand Down
2 changes: 1 addition & 1 deletion src/SettingsManager.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ class SettingsManager: public QObject
int m_appVisibility = 1; //!< QWindow::Visibility

// Application generic
QString m_appTheme = "light";
QString m_appTheme = "THEME_MOBILE_LIGHT";
bool m_appThemeAuto = false;

// Application specific
Expand Down

0 comments on commit 55f668c

Please sign in to comment.