Skip to content

Commit 1a708a2

Browse files
kamikazekamikaze
committed
added image viewer qml code
1 parent 1423d61 commit 1a708a2

File tree

6 files changed

+424
-3
lines changed

6 files changed

+424
-3
lines changed

‎src/dataset_image_annotator/Browser.qml

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import QtQuick
2+
import Qt.labs.folderlistmodel
3+
import QtQuick.Layouts
4+
import QtQuick.Controls
5+
6+
Rectangle {
7+
id: root
8+
9+
/*
10+
* `dir` holds directory being browsed
11+
* `activePath` holds currently opened dir **OR** file
12+
* `size` holds reference delegate width
13+
* it is only reference as it will be adjusted to fit the total width of the browser
14+
* `columns` holds the number of grid columns (calculated from total width and icon width, see `size`)
15+
*/
16+
17+
property string dir
18+
property string activePath: dir
19+
property int size: 100
20+
property int columns: Math.round(width / size)
21+
22+
anchors.fill: parent
23+
color: "black"
24+
25+
FolderListModel {
26+
id: folder
27+
showDotAndDotDot: true
28+
showDirsFirst: true
29+
folder: "file://" + dir
30+
}
31+
32+
Viewer {
33+
id: viewer
34+
onClosed: activePath = dir
35+
}
36+
37+
ScrollView {
38+
anchors.fill: parent
39+
ScrollBar.vertical.policy: ScrollBar.AsNeeded
40+
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
41+
clip: true
42+
43+
GridView {
44+
id: grid
45+
// list the entries
46+
anchors.fill: parent
47+
model: folder
48+
delegate: FileDelegate {
49+
onOpen: {
50+
if (isImage) {
51+
viewer.openFor(path)
52+
activePath = path
53+
} else if (isDir){
54+
dir = path
55+
grid.contentY = 0
56+
} else {
57+
}
58+
}
59+
}
60+
cellWidth: Math.floor(root.width / root.columns)
61+
cellHeight: cellWidth + 20
62+
boundsBehavior: Flickable.StopAtBounds
63+
}
64+
}
65+
66+
}

‎src/dataset_image_annotator/FileDelegate.qml

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import QtQuick
2+
import QtQuick.Controls
3+
4+
/*
5+
* FileDelegate
6+
* displays a single file/directory icon etc.
7+
*
8+
*/
9+
10+
Item {
11+
id: root
12+
signal open();
13+
14+
property string path: {
15+
if (fileName === ".") {
16+
return filePath.slice(0, -1)
17+
} else if (fileName === "..") {
18+
return filePath.split("/").slice(0, -2).join("/") + "/"
19+
} else if (isDir) {
20+
return filePath + "/"
21+
} else {
22+
return filePath
23+
}
24+
}
25+
26+
property bool isImage: {
27+
switch (fileSuffix) {
28+
case "png":
29+
case "jpg":
30+
case "jpeg":
31+
case "gif":
32+
return true
33+
default:
34+
return false
35+
}
36+
}
37+
38+
property bool isDir: fileIsDir
39+
40+
Rectangle {
41+
clip: true
42+
43+
// hover effect
44+
color: mouse.containsMouse ? "gray" : "transparent"
45+
46+
width: Math.floor(browser.width / browser.columns)
47+
height: width + text.height
48+
49+
Item {
50+
anchors.fill: parent
51+
anchors.margins: 10
52+
53+
Image {
54+
x: 0
55+
y: 0
56+
width: parent.width
57+
height: width
58+
fillMode: Image.PreserveAspectFit
59+
asynchronous: true
60+
source: {
61+
if (isDir) {
62+
"qrc:/icons/folder.png"
63+
} else if (isImage) {
64+
"file://" + filePath
65+
} else {
66+
"qrc:/icons/file.png"
67+
}
68+
}
69+
}
70+
71+
Text {
72+
id: text
73+
anchors.bottom: parent.bottom
74+
x: 10
75+
width: parent.width - 20
76+
color: "white"
77+
text: fileName
78+
elide: Text.ElideRight
79+
}
80+
}
81+
82+
MouseArea {
83+
id: mouse
84+
anchors.fill: parent
85+
acceptedButtons: Qt.LeftButton | Qt.RightButton
86+
onClicked: {
87+
if (mouse.button === Qt.RightButton) {
88+
if (!fileIsDir && !isImage)
89+
return;
90+
// just open the context menu
91+
contextMenu.x = mouseX
92+
contextMenu.y = mouseY
93+
contextMenu.open()
94+
} else {
95+
open()
96+
}
97+
}
98+
hoverEnabled: true
99+
100+
// context menu
101+
// dunno what to put there, but whatever
102+
Menu {
103+
id: contextMenu
104+
Action {
105+
text: "&Open"
106+
onTriggered: open()
107+
}
108+
}
109+
}
110+
111+
}
112+
}

‎src/dataset_image_annotator/Map.qml

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import QtQuick
2+
3+
/*
4+
* This object displays a "map" of the image as it is currently viewed
5+
* ona can click/drag the inner rectangle to navigate through the image being viewed
6+
*
7+
* `outer` represents the image (and should have appropriate aspect ratio)
8+
* `inner` represents the viewing screen (-//-)
9+
*/
10+
11+
Rectangle {
12+
id: outer
13+
14+
required property Flickable container
15+
16+
// position and size the map
17+
anchors.bottom: parent.bottom
18+
anchors.right: parent.right
19+
anchors.bottomMargin: 10
20+
anchors.rightMargin: 10
21+
height: container.height / 5
22+
width: height * container.imageAspectRatio
23+
24+
// some theming
25+
radius: 8
26+
color: "#aa444444"
27+
28+
states: [
29+
State {
30+
name: "hover"
31+
when: mouse.containsMouse || mouse.pressed
32+
PropertyChanges {
33+
target: outer
34+
color: "#dd444444"
35+
}
36+
}
37+
]
38+
39+
transitions: [
40+
Transition {
41+
to: "*"
42+
ColorAnimation { target: outer; duration: 100 }
43+
}
44+
45+
]
46+
47+
// </theming>
48+
49+
Rectangle {
50+
id: inner
51+
color: "#bb777777"
52+
radius: 8
53+
54+
// mafs
55+
x: parent.width * container.contentX / container.contentWidth
56+
width: Math.min(parent.width * container.width / container.contentWidth, parent.width)
57+
y: parent.height * container.contentY / container.contentHeight
58+
height: Math.min(parent.height * container.height / container.contentHeight, parent.height)
59+
onXChanged: container.contentX = x * container.contentWidth / parent.width
60+
onYChanged: container.contentY = y * container.contentHeight / parent.height
61+
}
62+
63+
MouseArea {
64+
id: mouse
65+
anchors.fill: parent
66+
hoverEnabled: true
67+
68+
// dragging is annoying
69+
// this works just with clicking and/or holding:
70+
onMouseXChanged: {
71+
if (!pressed) return
72+
73+
let tmp = (mouseX - inner.width / 2) / outer.width * container.contentWidth
74+
75+
if (tmp < 0)
76+
tmp = 0
77+
else if (tmp > container.contentWidth - container.width)
78+
tmp = container.contentWidth - container.width
79+
80+
container.contentX = tmp
81+
}
82+
onMouseYChanged: {
83+
if (!pressed) return
84+
85+
let tmp = (mouseY - inner.height / 2) / outer.height * container.contentHeight
86+
87+
if (tmp < 0)
88+
tmp = 0
89+
else if (tmp > container.contentHeight - container.height)
90+
tmp = container.contentHeight - container.height
91+
92+
container.contentY = tmp
93+
}
94+
}
95+
96+
}

‎src/dataset_image_annotator/Status.qml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import QtQuick
2+
import QtQuick.Controls
3+
4+
StatusBar {
5+
id: statusbar
6+
property alias activePath: text.text
7+
8+
// just display the active path, idk what else
9+
Text {
10+
id: text
11+
}
12+
}

0 commit comments

Comments
 (0)