I use a linear gradient to colorize a rectangle. On my Display (480px, EGLFS) i can clearly see 16 color-steps (see picture). Is there a way to increase the number of steps to have a more fluid gradient.
bad gradient
Rectangle {
width: 800
height: 480
gradient: Gradient{
GradientStop{position: 1.0; color: "#404040"}
GradientStop{position: 0.0; color: "black"}
}
}
The problem was, that the gradient has more colors than the display can show (850 for 256). This is called colour banding (https://en.wikipedia.org/wiki/Colour_banding).
After reducing the colors by using an indicated .png instead of the gradient it looks ok.
Related
I want to modify the style of all the tool tip windows in my application.
Please help to make it
I think there's only a dirty hack for this: Set the background as transparent and duplicate the background then. E.g.
ToolTip{
background: Rectangle{id: bg; color: Qt.rgba(0,0,0,0); }
}
Rectangle{
id: realBg
x: bg.x
y: bg.y
width: bg.width
height: bg.height
color: Qt.rgba(1,1,1,1)
}
I know it's ugly, but it works.. I used this technique to make custom shadows using a Canvas element instead of a Rectangle as BG
I'm using vis.js timeline and I'm trying to find a way to mark workhours (give them a different background). Using the backgrundareas with groups example I have managed to get my workhours colored for specific dates.
I do not want to use the standard blue color for background, so in order to avoid this I add a class workhours. Then I can set my custom color, but then the borders of the cells are hidden unless I also set a opacity less than 1.
I have a color scheme which I'm using, so setting opacity changes the color and my workhours does not look the same in the whole application.
I'm using this code
.vis-item.vis-background.workhours {
background: ##AFD9FE;
opacity: 0.75;
}
and where filterFromdate is my start date, durationDay is numbers of days in my timeline and startHour and endHour defines my working hours
for (i=0; i<durationDays; i++) {
items.add([
{
id: "W"+i,
start: moment(filterFromdate).add(i, 'days').hour(startHour).valueOf(),
end: moment(filterFromdate).add(i, 'days').hour(dayEndHour).valueOf(),
className : 'workhours',
type: "background"
}
]);
}
this give me
Can anyone tell me how to either get my class workhours to behave like a standard vis background class (like vis-today)?
or if there is another approach to handle background on specific hours (or days)?
Thanks to Issue 3773 I reliased that I could set the z-index, which did the trick.
So my css ended up being
.vis-item.vis-background.workhours {
background: #AFD9FE;
z-index: -1;
}
I want to have an animated border over an Image. But to my surprise, only Rectangle is able to provide border. I want to have a dotted line moving round the Image. How to get such animation. This is my sample code which just provide a border to the Image.
Rectangle {
width: image.width + 5
height: image.height + 5
border.color: "yellow"
border.width: 5
color: "transparent"
Image {
id: image
anchor.centerIn: parent
source: ""
}
}
Because Canvas element in QML does not have the setLineDash() method as JavaScript canvas has (but you can still emulate it, see here), the easiest way (imho) is to use BorderImage with a custom image with dotted pattern. Please see example how to use BorderImage here.
Also you can write your own QML element derived from QQuickPaintedItem or QQuickItem in C++.
Take BorderImage instead of Rectangle:
Image {
BorderImage {
}
}
Is it possible to translate a QML Rectangle on the Z axis similar to how we can do in HTML with CSS transform:translateZ() and transform:translate3d()?
Applying transform: Translate {x: 0; y: 0; z: 100} on a Rectangle throws an error that the z property isn't defined.
I am able to apply transform: Rotation{} to a Rectangle with a z-axis rotation and it looks 3D. I was hoping I could translate things in 3D as well.
Is there a way to do it?
EDIT: I tried setting a Matrix4x4 like this:
transform: Matrix4x4 {
matrix: Qt.matrix4x4(
1,0,0,0,
0,1,0,0,
0,0,1,10,
0,0,0,1
)
}
I set the number 10 where I believe the Z translation is, but the Rectangle just disappears instead of getting a little closer to the camera.
Applying transform: Translate {x: 0; y: 0; z: 100} on a Rectangle throws an error as expected as Translate only has only x and y properties (See http://doc.qt.io/qt-5/qml-qtquick-translate.html).
The Transform does not correspond with how you are trying to use it as z is not the position along the z-axis. z is the "stacking order" which is used to control which items are drawn on top or below other items (http://doc.qt.io/qt-5/qml-qtquick-item.html#z-prop).
If you wanted to let your Rectangle appear "a little closer to the camera", Scale seems like a possible Transform to use (http://doc.qt.io/qt-5/qml-qtquick-scale.html) or just use the item's scale property (http://doc.qt.io/qt-5/qml-qtquick-item.html#scale-prop).
This answer might also be helpful to you as someone else had a similar question. It illustrates how you can rotate along different axis. For example, You could do something like: transform: Rotation { origin.x: 50; origin.y: 55; axis { x: 0; y: 1; z: 0 } angle: 60}.
Note though that it is not possible to actually translate a QML Rectangle along the "z-axis". So if your goal is to create a 3D scene in QML, two possible options are Qt Canvas3D or the Qt3D module. If you want to use three.js check out this post
I'm working currently on Qt, when i try to draw something (for e.x Rectangle) giving its x,y coordinates & its width & height Qt starts to draw the rectangle starting from its x, y coordinates to the right direction, to demonstrate what I'm talking about see the following picture:
and the following code:
Rectangle {
id: rectangle1
x: 257
y: 221
width: 50
height: 50
color: "#000000"
}
I would like to know if there is anyway i can start drawing to the left of x,y coordinates, it's like drawing giving the width & height negative values. see the following image for illustration:
I have tried drawing giving the width a negative value, it works fine on the design mode but when i run or debug my application the rectangle does not show up, any ideas on this would be appreciated
You can not use negative values for this purpose since negative width or height is not supported in QML. But you can use Scale type to accomplish this :
Rectangle {
id: rectangle1
x: 257
y: 221
width: 50
height: 50
color: "#000000"
transform: Scale { origin.x: 0; origin.y: 0; xScale: -1}
}
Scale allows you to scale your item relative to an arbitrary point. Here we scaled the X axis of the item relative to it's interior point (0, 0).
To draw rectangle 50px from the left parent area:
Rectangle {
id: rectangle1
x: parent.width - 50 // rectangle start 50px from the left
y: 221 // similar with y pos: parent.height - 50
width: 50
height: 50
color: "#000000"
}
But I am not sure If I understood your question properly.