I'm making a vehicle's instrument cluster in QML and wanted to align the speed labels to the curve in such a way that they are all the same distance away from it. To do this, I used pathview to set up an arc, then used the text delegate to have the text appear in the right places. The reason it's not working exactly as intended is that some text is larger than other (for example '0' takes less space than '100') which causes some variability in distance between the text and the circle I'm trying to align it with. How can this be done better?
Here's the snippet of what I have got working so far:
Component {
id: spdLabel
Text {
font.weight: Font.Normal
font.pixelSize: 28
color: "white"
text: model.index
visible: model.index % spdMarkInterval == 0
}
}
PathView {
anchors.fill: parent
z: 0
model: topSpeed + 1
delegate: spdLabel
path: Path {
PathAngleArc {
centerX: (dialGauge.x + dialGauge.width)/2
centerY: (dialGauge.y + dialGauge.height)/2
radiusX: 140
radiusY: 140
sweepAngle: 270
startAngle: 135
}
}
}
Here's what the result looks like:
Since it is the center of text elements that's anchored a constant distance away from the arc, the distance between the text edge and arc varies.
Thanks for any help!
Related
I'm working on a plasmoid for KDE Plasma and can't figure out how to implement a scrolling header bar, similar to ones you see at the bottom of the screen on news channels. I want to have a line of text which horizontally scrolls inside a colored box at a fixed speed, looping forever and seamlessly starting over once it reaches the end. I figured out the basic part of the looping transition, allowing the text to move outside of its box then come out the other end:
Rectangle {
width: myItem.width
height: myItem.height
color: myColor
Text {
width: myItem.width
wrapMode: "NoWrap"
maximumLineCount: 1
color: theme.textColor
text: "Whatever goes here."
SequentialAnimation on x {
running: true
loops: Animation.Infinite
NumberAnimation { from: -myItem.width; to: myItem.width; duration: 1000; easing.type: Easing.InOutQuad }
PauseAnimation { duration: 250 }
}
}
}
But this doesn't take into account the length of the text string in order to adjust the start / end position and duration to its real width. It also requires moving the text completely out of bounds then back in, leaving the box empty for one frame... I wonder if there's a way to make it connect seamlessly. It also doesn't notice when I resize the plasmoid and adapt the animation range, only the scale detected at the start is taken into account. How do you suggest redoing that definition to work around scale issues and get consistent results with any box size and text length?
I've got 3 basic elements in a rectangle and I'd like to draw line separations between them.
I don't find an easy way to achieve that, as a border-left would do in CSS.
Text {
id : txtNote
text : (__notes.length>0)?__notes[0].extname.name:"--"
anchors.right: txtNoteAcc.left
leftPadding: 5
rightPadding: 0
}
Image {
id : txtNoteAcc
height : 20
width : 20
anchors.right: txtNoteHead.left
}
Image {
id : txtNoteHead
height : 20
width : 20
anchors.right: parent.right
}
Now laid out as:
And the goal is to have it a similar way (this example is a Java one):
I've found this approach, but I don't call it "simple" and it is 7 years old.
Rem: I'm working with QML 5.9 (so Shape is not available).
I want to design 3 dots in qml using Text and Rectangle as shown below;
... Hello World ...
But my requirement is 3 dots should lie at the middle of the rectangle and the text (Hello World) as shown in the image. How this can be achieved?
When I thought first time, 2 approaches came up in my mind:
1- Using the middle dot by the help of html code styles can achieve this. Here is the HTML codes which you can easiy use in qml.
Here is the example and output:
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
id:sample1
anchors.centerIn: parent
width: 200
height: 50
border.color: "black"
Text {
id: mytext
anchors.centerIn: parent
textFormat: Text.RichText
text: "·" + "·" + "·" + " Hello World " + "·" + "·" + "·"
}
}
}
Output:
2- You can put the "Hello world" text first then you can create another text for dots and put the dots in the mid coordinates beside the main text. This method is not a beautiful approach.
Note: When I dig into to other possible solutions, I couldn't see a proper solution to achieve this.
I cannot wrap my mind why boundaries of the Text do not change and still are as they were before rotation.
I do simply:
Text {
font.family: "Arial"
color: "#3ba3e4"
font.pixelSize: 12
font.letterSpacing: 2
text: "Vasya was here"
anchors.left: parent.left
rotation: -90
}
When you align with parent it shows gap, I would expect it to be rotated and placed all the way to left side of the parent, but now have gap of half of width of the previously unrotated element.
rotation property holds the rotation of the item in degrees clockwise around its transformOrigin. transformOrigin property holds the origin point around which scale and rotation transform. Nine transform origins are available, as shown in the image below. The default transform origin is Item.Center.
This example rotates an image around its bottom-right corner.
Image {
source: "myimage.png"
transformOrigin: Item.BottomRight
rotation: 45
}
An approach has already been provided in the comments.
Text {
font.family: "Arial"
color: "#3ba3e4"
font.pixelSize: 12
font.letterSpacing: 2
text: "Vasya was here"
transform: Rotation {
origin.x: 25;
origin.y: 25;
angle: -90
}
}
I'm trying to get something in a ScrollView to expand in width to fit the screen. The ScrollView is anchored to the main window.
For example purposes, a Rectangle:
ScrollView {
anchors.fill: parent //mainWindow
Rectangle {
color: "light grey"
height: 1000
width: mainWindow.width
}
}
But when the vertical scrollbar appears, it obscures the Rectangle. I can sort of fix it by using a magic constant:
width: mainWindow.width - 20
But what if somebody has bigger scrollbars on their computer? Also it leaves an ugly empty space on the right when the vertical scrollbar is invisible.
Is there a way to automatically learn what the available space is inside of a ScrollView?
There is no need to explicitly adjust to scroll bar. You can just make it to fill the entire available parent space or so. And if you want specify margins:
ScrollView {
id: scrollView
anchors.fill: parent // mainWindow ?
anchors.centerIn: parent // anchoring as asked
anchors.margins: 20
contentItem:
Rectangle {
id: rectScroll
width: scrollView.viewport.width // set as viewport
height: 1000 // set to what you need
}
}
The original issue was solved mainly due to the width property of Rectangle set to parent.parent.width or scrollView.viewport.width as it is more adequate. The latter is definitely better, as long as the width of precisely viewport of scroll area and not the parent width (which in general not guaranteed to contain only this ScrollView).