In Qt5, I frequently used DropShadow (from QtGraphicalEffects) like in
DropShadow {
anchors.fill: button_layer
source: button_layer
visible: button_layer.visible
verticalOffset: 3
radius: 6
samples: 13
color: app.colorScheme.dropShadow
}
but QtGraphicalEffects does not seem to exist in Qt6 anymore.
What can I use in Qt6 to replace DropShadow (and FastBlur, ColorOverlay, LinearGradient)?
I understand there is a import Qt5Compat.GraphicalEffects, which works fine, but it doesn't feel like a longterm solution.
Related
I am using QML to design a small user interface.
The problem I have is that I need to select an image if a certain conditions happens or not, and nothing happens because I may have something wrong in the contentItem below, I set a simple a if loop that replicates exactly the problem I have:
main.qml
// operations ....
Row {
anchors.fill: parent
anchors.leftMargin: 20
anchors.topMargin: 20
Button {
id: button
width: 90
height: 270
contentItem: Item {
Image {
source: root.selected === 0 ?
source: "qrc:/images/btn-Modes-on.png" :
source: "qrc:/images/btn-modes-normal.png"
}
}
// operations ....
}
I believe the problem is where I set the if loop for the images. I can confirm that the path of the images is correct and double checked.
I also used according to the documentation the proper notation of the images, and the property I am using is source: "path to your image".
However after checking that I still also have no return.
Thanks for pointing in the right direction to solve this problem.
There's a typo in your code. The Image source should look like this:
source: root.selected === 0 ?
"qrc:/images/btn-Modes-on.png" :
"qrc:/images/btn-modes-normal.png"
I implemented QAbstractTableModel + TableView with QtQuick 2.12 as described in the official QT docs.
my QML code:
import QtQuick 2.12
import TableModel 0.1
TableView {
anchors.fill: parent
columnSpacing: 1
rowSpacing: 1
clip: true
model: TableModel {}
delegate: Rectangle {
implicitWidth: 100
implicitHeight: 50
Text {
text: display
}
}
}
QAbstractTableModel implemented in C++ as described in docs.
Now my app displays a table that can be scrolled.
How to (or is it possible to)
add header that stays visible when the table is
scrolled vertically.
make table rows selectable
use different delegates for different columns
?
In terms of official Qt API, most of it is in the process of being written:
HeaderView is currently being developed: https://codereview.qt-project.org/#/c/255424/
Item selections are currently being developed.
https://stackoverflow.com/a/55517337/904422
Someone else might have answers about how to do this from scratch/manually.
When developing a QML application I think it can sometime be useful if I was able to set some setting to outline all visual elements boundaries. For instance a control in Qt Quick Controls 2.x might consist of several parts like background, contentItem, indicators etc. When tweaking on the size of these I would like to see the boundaries of each of these parts.
Is there any functionality like this in Qt/QML?
Three years later, and folks (specifically: me) are still doing web searches about this :)
Just like commenter #DuKes0mE suggested, I have "made do" by adding borders to things on-the-fly and then removing them from the final code.
Like the OP, I am now tired of doing that.
A tactic I arrived at recently is to add a DebugRectangle.qml custom element to my project:
import QtQuick 2.12
Rectangle {
property var toFill: parent // instantiation site "can" (optionally) override
property color customColor: 'yellow' // instantiation site "can" (optionally) override
property int customThickness: 1 // instantiation site "can" (optionally) override
anchors.fill: toFill
z: 200
color: 'transparent'
border.color: customColor
border.width: customThickness
}
Then I can add it to existing elements like so, to debug them:
Label {
text: 'Lorem ipsum dolor sit amet'
}
Label {
text: 'quis nostrud exercitation'
DebugRectangle {} // Adds "debug border" to this Label
}
And when I am finished, I can even leave the nested DebugRectangle in the code, but toggle its visibility like so:
Label {
text: 'quis nostrud exercitation'
DebugRectangle {
visible: false
}
}
Complete sample project shared on GitHub.
There's a tool called GammaRay which (amongst other things) allows investigating QtQuick 2 applications, see:
http://doc.qt.io/GammaRay/gammaray-qtquick2-inspector.html
Setup instructions are here:
https://github.com/KDAB/GammaRay
If you're running Linux, it is quite likely your distribution already ships a GammaRay package.
Created a graph using cytoscape.js. Need to add image as a label on edge.
After examination of
CanvasRenderer.drawElements in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-redraw.js#L406-L412
CanvasRenderer.drawEdgeText in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-label-text.js#L6-L31
CanvasRenderer.drawEdge in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-edges.js
it seems that image label on edge is not supported right now.
One candidate where this feature might be added seems to be the CanvasRenderer.drawEdgeText function. The implementation might examine the text contained in the edge's content and if it looks like reference to an image (e.g. url) then draw it as image...
https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/README.md
Contributing to Cytoscape.js
Cytoscape.js is an open source project, and anyone interested is encouraged to contribute to Cytoscape.js. We gladly accept pull requests. If you are interested in regular contributions to Cytoscape.js, then we can arrange granting you permission to the repository by contacting us.
If your pull request is a bugfix, please make changes to the master branch. Otherwise, please make changes to the next version's branch (i.e. unstable).
I know this is a late answer. but this will help somebody who looks for an answer as like me.
We can use icon fonts or fontawesome for this.
set the edges data as
edges = {
data:
id: "3f5cb5c4-43aa-4f4d-b816-fb4f279585c7"
label: "1 A \uf023 \uf022" //this is the fontawesome unicode chars for lock and notes icons
source: "1"
sourceName: "shipping"
target: "4"
targetName: "twilio.com"
value: 2
}
next in your cytoscape style, mention the font as fontawesome
{
selector: '.autorotate',
style: {
'edge-text-rotation': 'autorotate',
'font-size': '8px',
// 'color': '#000000',
'color': '#333333',
'font-family': 'FontAwesome, helvetica neue Cantarell',
'text-margin-x':'5px',
'text-margin-y':'5px',
// 'source-text-margin-x':'5px',
// 'source-text-margin-y':'5px'
}
}
Now your cytoscape graph will show edges with images as like this
I'm trying to use Qt 5 with QtDesktop components in Windows 8 x64 and when I build and run app and move mouse, app is crashing with this message in log:
QPainter::begin: A paint device can only be painted by one painter at a time.
It happens only if mouse move in any component, if i have qml like this:
import QtQuick 2.0
import QtDesktop 1.0
Rectangle {
width: 360
height: 360
Button {
text: "testButton"
}
Text {
text: qsTr("Hello World")
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
everything will be ok before I move cursor into button. Somebody have any ideas what is it and how i can fix this? It isn't the error in my code because building tests/tableviewmodels and examples/ApplicationTemplate gives the same result
If it important, I use Visual Studio 2010 Express + Qt Creator 2.6.1
PS not sure, but I think I build and run QtDesktopComponents on this PC about two weeks ago and there wasn't this error, and it was windows update after that
UPD
It was Qt Quick Components bug, fixed in https://bugreports.qt-project.org/browse/QTCOMPONENTS-1287