I'm looking for sliders examples without using the QML one. Just by using rectabgle but i dont really know how to handle it?
The QML one dont have so much properties:
Slider {
id: sliderHorizontal1
x: 69
y: 52
activeFocusOnPress: true
tickmarksEnabled: true
minimumValue: 0
}
Thanks,
I found answer by using QML slider.
Slider {
id: slider
x: 56
y: 53
width: 450
height: 30
tickmarksEnabled: true
activeFocusOnPress: true
updateValueWhileDragging: true
value: 10
maximumValue: 30
style: SliderStyle {
handle: Rectangle {
height: 40
width: height
radius: width/2
color: "#fff"
}
groove: Rectangle {
implicitHeight: 10
implicitWidth: 100
radius: height/2
border.color: "#333"
color: "#222"
Rectangle {
height: parent.height
width: styleData.handlePosition
implicitHeight: 6
implicitWidth: 100
radius: height/2
color: "red"
}
}
}
}
I can add modification inorder to match to my needs...
Thanks #Tarod
Related
I want to add a point on my map by typing in the coordinates. It's working fine, but I can't covert my input to actual map coordinates. It's taking the value of the screen and converting that to the coordinate.
For example, if I type in (0,0) it puts the point on the (0,0) screen position, which is the coordinate (78.46671909721232, -74.02100401110448). I check this with the console.log output. How do I ask it to put a point on (0,0) longitude/latitude?
I've added the code below for reference.
TextField {
id: xcoordtext
anchors.verticalCenter: parent.verticalCenter
validator: DoubleValidator {bottom: -90.00; top: 90.00;}
Layout.fillWidth: true
}
TextField {
id: ycoordtext
anchors.verticalCenter: parent.verticalCenter
validator: DoubleValidator {bottom: -90.00; top: 90.00;}
Layout.fillWidth: true
}
Button {
text: "POINT Confirmed"
Layout.fillWidth: true
onClicked: {
var waypointCoord = myMap.toCoordinate(Qt.point(xcoordtext.text,ycoordtext.text), false)
console.log(waypointCoord.longitude, waypointCoord.latitude)
}
}
The error and message that is coming in the console log is as follows:-
"Passing incompatible arguments to C++ functions from JavaScript is dangerous and deprecated."
"This will throw a JavaScript TypeError in future releases of Qt!"
qml: -106.9871520804946 79.58494957851264
Ignored NaN, Inf, or -Inf value.
Attempting to set invalid range for value axis: [ nan - nan ]
TerrainQueryLog: Error in fetching elevation tile. Empty response.
Ignored NaN, Inf, or -Inf value.
Attempting to set invalid range for value axis: [ nan - nan ]
Where qml: -106.9871520804946 79.58494957851264 are the coordinates I get when I type in 0 (xcoordtext.text) and 0(ycoord.text) in the TextField inputs.
I write this Example for you , as I understand from your question.
if you want that user adds lat and long in TextInput and then add a point on this coordinate you shouldn't convert anything.
I use TextInput instead of TextField to getting user input.
in this example, user add x and y number from -90 to 90 and in map add that point by red circle.
in the bottom right of the screen I put a white rect that shows mouse position in lat and long in this , I convert screen x and y to lat and long .
as you can see the differences, and also you can see that mouse that points to the red circle show exactly the point that the user adds from text input .
import QtQuick 2.0
import QtLocation 5.9
import QtPositioning 5.8
import QtQuick.Controls 2.12
Item {
Plugin
{
id: mapPlugin
name: "osm"
}
Map
{
id: map
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 0
anchors.topMargin: 0
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(29.7264175,55.99735)
zoomLevel: 5
copyrightsVisible: false
focus: true
MouseArea
{
anchors.fill: map
hoverEnabled: true
onPositionChanged: {
lat.text ="Lat :"+ map.toCoordinate(Qt.point(mouseX,mouseY)).latitude.toString()
lon.text ="Lon :"+ map.toCoordinate(Qt.point(mouseX,mouseY)).longitude.toString()
}
}
property Component itemDelegate: Component{
Rectangle {
width: 14
height: 14
radius: 7
color: "red"
}
}
MapItemView{
id: item_view
model: ListModel{
id: item_model
}
delegate: MapQuickItem{
id: ietm_delegate
zoomLevel: 0
sourceItem: Loader{
sourceComponent: map.itemDelegate
}
coordinate{
latitude: latitudeval
longitude: longitudeval
}
anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
}
}
Rectangle
{
width: 251
height: 163
color: "#ffffff"
border.color: "#000000"
border.width: 1
TextInput {
id: textInput_x
x: 68
y: 25
width: 175
height: 30
font.pixelSize: 16
validator: DoubleValidator {bottom: -90.00; top: 90.00;}
focus: true
}
TextInput {
id: textInput_y
x: 68
y: 60
width: 175
height: 24
font.pixelSize: 16
focus: true
validator: DoubleValidator {bottom: -90.00; top: 90.00;}
}
Label {
id: label
x: 20
y: 25
width: 53
height: 30
text: qsTr("x :")
horizontalAlignment: Text.AlignHCenter
}
Label {
id: label1
x: 20
y: 60
width: 53
height: 30
text: qsTr("Y :")
horizontalAlignment: Text.AlignHCenter
}
Button {
x: 8
y: 113
text: "POINT Confirmed"
Layout.fillWidth: true
onClicked: {
var waypointCoord = map.toCoordinate(Qt.point(textInput_x.text,textInput_y.text))
item_model.append({"latitudeval":textInput_y.text,"longitudeval":textInput_x.text});
console.log(waypointCoord.longitude, waypointCoord.latitude)
}
}
}
Rectangle {
width: 206
height: 50
color: "white"
anchors.top: parent.bottom
anchors.topMargin: -50
anchors.left: parent.right
anchors.leftMargin: -206
Text {
id: lat
width: 206
height: 24
}
Text {
id: lon
x: 0
y: 24
width: 206
height: 26
}
}
}
}
I wanted to create an UI similar to below images. I understand Qt Pathview helps me to move the items in an circular fashion. But I couldn't get how to create the background similar to the images with equal space between the text. I tried with rectangle (radius:360) to draw circle, but the pathview items doesn't move along the center of the rectangle-circle.
Maybe this simple example could help you with PathView:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 400
height: 400
Item {
id: container
width: 300
height: 300
anchors.centerIn: parent
Rectangle {
anchors.fill: parent
radius: width /2
color: "orange"
Rectangle {
x: 50
y: 50
width: 200
height: 200
radius: 100
color: "white"
}
}
PathView {
anchors.fill: parent
model: 10
delegate: Rectangle {
width: 50
height: 50
radius: 25
color: "green"
}
path: Path {
startX: 150; startY: 25
PathArc {
x: 150; y: 275
radiusX: 125; radiusY: 125
direction: PathArc.Clockwise
}
PathArc {
x: 150; y: 25
radiusX: 125; radiusY: 125
direction: PathArc.Clockwise
}
}
}
}
}
I have this Qt QML spinbox:
The problem is, it actually changes value only when up/down (+/-) indicators are clicked. When edited by entering numbers into spinbox, it does NOT change value. I have tried many things, but I cannot figure out why. Can anybody help?
QML code of the spinbox is this:
StyledSpinBox {
id: overhangAngleFactorSpinBox
implicitWidth: 120
implicitHeight: 30
to: 1 * 100
stepSize: 1
from: 0
Layout.leftMargin: 8
contentItem: StyledTextInput {
inputMethodHints: Qt.ImhFormattedNumbersOnly
}
value: 70
property int decimals: 2
property real realValue: value / 100.0
validator: DoubleValidator {
bottom: Math.min(overhangAngleFactorSpinBox.from, overhangAngleFactorSpinBox.to)
top: Math.max(overhangAngleFactorSpinBox.from, overhangAngleFactorSpinBox.to)
}
textFromValue: function(value, locale) {
return Number(value / 100.0).toLocaleString(locale, 'f', overhangAngleFactorSpinBox.decimals)
}
valueFromText: function(text, locale) {
return Number.fromLocaleString(locale, text) * 100.0
}
onValueChanged: {
editorScene.overhangAngleFactor = value / 100.0
}
}
StyledSpinBox.qml contains:
import QtQuick 2.5
import QtQuick.Controls 2.0 as QQC2
QQC2.SpinBox {
id: control
font.family: editorContent.labelFontFamily
font.weight: editorContent.labelFontWeight
font.pixelSize: editorContent.labelFontPixelSize
background: Rectangle {
border.color: editorContent.listHighlightColor
color: editorContent.paneBackgroundColor
}
down.indicator: Rectangle {
x: control.mirrored ? parent.width - width : 0
height: parent.height
implicitWidth: 40
implicitHeight: 40
border.color: editorContent.listHighlightColor
color: editorContent.listHighlightColor
Image {
anchors.centerIn: parent
source: "images/spinbox_down.png"
}
}
up.indicator: Rectangle {
x: control.mirrored ? 0 : parent.width - width
height: parent.height
implicitWidth: 40
implicitHeight: 40
border.color: editorContent.listHighlightColor
color: editorContent.listHighlightColor
Image {
anchors.centerIn: parent
source: "images/spinbox_up.png"
}
}
}
Problem solved by adding editable: true to spin box. According to documentation, the default value for editable is false:
editable : bool
This property holds whether the spinbox is editable. The default value is false.
I am having issues in moving a slider handle when I try to style "handle:Rectangle" ,Below is the code:
Slider {
id: slider
x: 372
y: 70
width: 33
height: 457
spacing: 0
anchors.rightMargin: 395
rotation: 0
orientation: Qt.Vertical
font.family: "Arial"
value: 0.5
anchors.right: parent.right
background: Rectangle {
anchors.centerIn: parent
x: slider.topPadding + slider.availableWidth / 2 - width / 2
y: slider.leftPadding
implicitWidth: 200
implicitHeight: 4
width: slider.availableHeight
height: implicitHeight
radius: 2
rotation: 90
color: "#bdbebf"
}
handle: Rectangle {
anchors.centerIn: parent
color: slider.pressed ? "white" : "red"
border.color: "gray"
//border.width: 2
width: 20
height: 20
radius: 6
}
}
I am able to move the slider if i am not styling handle:Rectangle.
please Suggest.
That is, because you can't anchor it to the center. You need to specify the x and y values in dependance of the visualPosition.
See the example on how to customize a slider.
Be aware, that the customization provided there does not account for vertical sliders, so you need to adapt it:
y: slider.topPadding + slider.visualPosition * (slider.availableHeight - height)
x: slider.leftPadding + slider.availableWidth / 2 - width / 2
should do it for you. Remove the anchoring of course!
I am trying to create perceptive image from a normal image
I need something like this
from something like this
I tried different ways like rotate and use a mask like this
Image {
id: bug
source: "./Graphics/sample.png"
width: 200
height: 200
anchors.centerIn: parent
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
transform: Rotation { origin.x: 30; origin.y: 30; axis { x: 0; y: 1; z: 0 } angle: 46 }
visible: true
layer.enabled: true
layer.effect: OpacityMask {
maskSource:
Image {
id: mask
source: "./mask.png"
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}
}
}
Is there any proper way to actually create an effect like this.
I am not sure, if I got it right, but is it something like this, you want to achive?
Item {
width: 1000
height: 500
anchors.centerIn: parent
RectangularGlow {
id: effect
anchors.fill: img
glowRadius: 25
spread: 0.2
color: "black"
cornerRadius: 50
}
Image {
id: img
anchors.centerIn: parent
width: 1000
height: 500
source: 'source.png'
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: 1000
height: 500
radius: 25
}
}
}
transform: Rotation { axis {x: 0.5; y: 1; z: 0} angle: 45 }
}
Or maybe it is a DropShadow you want to apply, instead of the RectangularGlow
DropShadow {
anchors.fill: img
horizontalOffset: -15
verticalOffset: 8
radius: 20
samples: 40
color: "#80000000"
source: Rectangle {
width: 1000
height: 500
radius: 25
}
}