i found this nice Car Seat for Blender, then exported the whole scene as GTLF2.0 and imported through Qt Design Studio as QML Asset.
I had some Timeline issue and I fixed this by hand, but one Material looks wrong as shown in the image.
I checked same GLTF2.0 File with a GLTF Onlineviewer Link and is looks equal to Blender.
Afterwards I checked with other GLTF Onlineviewer Link and here I have the same issue.
Questions:
Does somebody know or give me hints which value could be the trouble
maker?
Is not a lightning issue?
The Generated Qml File:
import QtQuick3D 1.15
import QtQuick 2.15
import QtQuick.Timeline 1.0
Node {
id: rOOT
property alias currentFrame: timeline0.currentFrame
Node {
id: light
x: 407.625
y: 590.386
z: -100.545
eulerRotation.x: -132.466
eulerRotation.y: 72.7792
eulerRotation.z: -169.256
scale.x: 1
scale.y: 1
scale.z: 1
PointLight {
id: light_Orientation
eulerRotation.x: -90
color: "#ffffffff"
brightness: 10000
quadraticFade: 1
}
}
Node {
id: camera
x: 524.195
y: 308.297
z: -485.887
eulerRotation.x: -105.604
eulerRotation.y: 44.346
eulerRotation.z: -179.999
PerspectiveCamera {
id: camera_Orientation
eulerRotation.x: -90
clipNear: 0.1
clipFar: 100
fieldOfView: 39.5978
fieldOfViewOrientation: Camera.Horizontal
}
}
Node {
id: empty_002
Model {
id: node01_Base
y: 3.23133
z: 21.8115
source: "meshes/node01_Base.mesh"
PrincipledMaterial {
id: plastico_Negro_material
baseColor: "#ff010101"
metalness: 0
roughness: 0.8
normalMap: Texture {
source: "maps/0.png"
}
cullMode: Material.NoCulling
}
materials: [
plastico_Negro_material
]
}
Model {
id: node02_Base_rim
y: 3.23133
z: 21.8115
eulerRotation.z: 180
scale.x: 0.121224
scale.y: 0.361819
scale.z: 1.3171
source: "meshes/node02_Base_rim.mesh"
PrincipledMaterial {
id: aluminio_galvanizado_material
baseColor: "#ff383838"
roughness: 0.5
cullMode: Material.NoCulling
}
materials: [
aluminio_galvanizado_material
]
}
Model {
id: node03_Base_controls
eulerRotation.x: 8.46812
scale.x: 0.0367964
scale.y: 0.271225
scale.z: 0.271225
source: "meshes/node03_Base_controls.mesh"
PrincipledMaterial {
id: aluminio_negro_material
baseColor: "#ff080808"
roughness: 0.5
cullMode: Material.NoCulling
}
materials: [
aluminio_galvanizado_material,
aluminio_negro_material
]
}
Model {
id: node04_Bottom_seat
y: 32.6284
tessellationMode: Model.NPatch
receivesShadows: false
isWireframeMode: false
source: "meshes/node04_Bottom_seat.mesh"
PrincipledMaterial {
id: cUERO_NEGRO_material
baseColor: "#ff534d30"
metalness: 0
roughness: 0.389465
normalMap: Texture {
source: "maps/0.png"
tilingModeHorizontal: Texture.Repeat
tilingModeVertical: Texture.Repeat
}
cullMode: Material.NoCulling
}
materials: cUERO_NEGRO_material
}
Model {
id: node05_Bottom_sides
source: "meshes/node05_Bottom_sides.mesh"
materials: cUERO_NEGRO_material
}
Model {
id: node06_Back_seat
y: -7.04048
z: 6.17094
eulerRotation.x: -1.59834
source: "meshes/node06_Back_seat.mesh"
materials: cUERO_NEGRO_material
}
Model {
id: node07_Seat_back_sides
source: "meshes/node07_Seat_back_sides.mesh"
materials: cUERO_NEGRO_material
}
Model {
id: node08_Upper_neck
y: 222.546
z: 199.645
source: "meshes/node08_Upper_neck.mesh"
materials: cUERO_NEGRO_material
}
Model {
id: node09_Header
isWireframeMode: true
source: "meshes/node09_Header.mesh"
materials: cUERO_NEGRO_material
}
}
Timeline {
id: timeline0
startFrame: 0
endFrame: 30
currentFrame: 0
enabled: true
animations: [
TimelineAnimation {
duration: 30
from: 0
to: 30
running: true
}
]
KeyframeGroup {
target: empty_002
property: "position"
Keyframe {
frame: 0
value: Qt.vector3d(0, 0, 0)
}
}
KeyframeGroup {
target: empty_002
property: "eulerRotation"
Keyframe {
frame: 0
value: Qt.vector3d(0, 0, 0)
}
Keyframe {
frame: 1
value: Qt.vector3d(0, 6, 0)
}
Keyframe {
frame: 2
value: Qt.vector3d(0, 12, 0)
}
Keyframe {
frame: 3
value: Qt.vector3d(0, 18, 0)
}
Keyframe {
frame: 4
value: Qt.vector3d(0, 24, 0)
}
Keyframe {
frame: 5
value: Qt.vector3d(0, 30, 0)
}
Keyframe {
frame: 291.667
value: Qt.vector3d(0, 36, 0)
}
Keyframe {
frame: 6
value: Qt.vector3d(0, 42, 0)
}
Keyframe {
frame: 7
value: Qt.vector3d(0, 48, 0)
}
Keyframe {
frame: 8
value: Qt.vector3d(0, 54, 0)
}
Keyframe {
frame: 9
value: Qt.vector3d(0, 60, 0)
}
Keyframe {
frame: 10
value: Qt.vector3d(0, 66, 0)
}
Keyframe {
frame: 11
value: Qt.vector3d(0, 72, 0)
}
Keyframe {
frame: 12
value: Qt.vector3d(0, 78, 0)
}
Keyframe {
frame: 13
value: Qt.vector3d(0, 84, 0)
}
Keyframe {
frame: 14
value: Qt.vector3d(0, 90, 0)
}
Keyframe {
frame: 15
value: Qt.vector3d(0, 96, 0)
}
Keyframe {
frame: 16
value: Qt.vector3d(0, 102, 0)
}
Keyframe {
frame: 17
value: Qt.vector3d(0, 108, 0)
}
Keyframe {
frame: 18
value: Qt.vector3d(0, 114, 0)
}
Keyframe {
frame: 19
value: Qt.vector3d(0, 120, 0)
}
Keyframe {
frame: 20
value: Qt.vector3d(0, 126, 0)
}
Keyframe {
frame: 21
value: Qt.vector3d(0, 132, 0)
}
Keyframe {
frame: 22
value: Qt.vector3d(0, 138, 0)
}
Keyframe {
frame: 23
value: Qt.vector3d(0, 144, 0)
}
Keyframe {
frame: 24
value: Qt.vector3d(0, 150, 0)
}
Keyframe {
frame: 25
value: Qt.vector3d(0, 156, 0)
}
Keyframe {
frame: 26
value: Qt.vector3d(0, 162, 0)
}
Keyframe {
frame: 27
value: Qt.vector3d(0, 168, 0)
}
Keyframe {
frame: 28
value: Qt.vector3d(0, 174, 0)
}
Keyframe {
frame: 29
value: Qt.vector3d(0, 182, 0)
}
Keyframe {
frame: 30
value: Qt.vector3d(0, 190, 0)
}
}
KeyframeGroup {
target: empty_002
property: "scale"
Keyframe {
frame: 0
value: Qt.vector3d(1, 1, 1)
}
}
}
}
The issue was in the PrincipledMaterial under Texture Mapping the properties
U Scale = 1
V Scale = 1
I changed both to 0, but nothing changed. I had to reload the Scene in the 3D Editor again.
The color difference is not a issue. I have to adapt a bit the light etc.
Here a extraction of the corrected PrincipledMaterial.
PrincipledMaterial {
id: cUERO_NEGRO_material
baseColor: "#ff534d30"
metalness: 0
roughness: 0.389465
normalMap: Texture {
scaleV: 0
scaleU: 0
source: "maps/0.png"
tilingModeHorizontal: Texture.Repeat
tilingModeVertical: Texture.Repeat
}
cullMode: Material.NoCulling
}
materials: cUERO_NEGRO_material
}
Related
I need scale and rotate a Rectangle around mouse point. When the Rectangle is not rotated my solution works fine, but if I apply Rotation transform I face the problem - my Rectangle move to an unexpected point. In my solution I use a MouseArea for drag the Rectangle, Scale and Rotation transforms for scale and rotate.
import QtQuick 2.0
Rectangle {
id: root
color: "gray"
Rectangle {
color: "black"
width: 360
height: 200
opacity: 0.5
x: 500
y: 350
}
Rectangle {
id: sample
color: "green"
width: 360
height: 200
opacity: 0.5
x: 500
y: 350
property real currX: 0
property real currY: 0
property real currZoom: 1
property real maxZoom: 5
property real minZoom: 0.5
transform: [
Scale {
id: scaler
origin.x: sample.currX
origin.y: sample.currY
xScale: sample.currZoom
yScale: sample.currZoom
},
Rotation{
id: rotation
origin.x: 180
origin.y: 100
angle: 30
}
]
MouseArea{
id: mouseArea
anchors.fill: parent
drag.target: sample
onClicked: mouse => {
zoom(true, mouse.x, mouse.y)
}
onWheel: (wheel) => {
var isIn = wheel.angleDelta.y > 0
zoom(isIn, wheel.x, wheel.y)
}
function zoom(isIn, x, y) {
var prevZoom = sample.currZoom
var prevX = sample.currX
var prevY = sample.currY
sample.currX = x
sample.currY = y
sample.currZoom = calculateZoom(isIn, prevZoom)
sample.x = sample.x + (prevX - sample.currX) * (1 - prevZoom)
sample.y = sample.y + (prevY - sample.currY) * (1 - prevZoom)
printSamplePostion()
}
function calculateZoom(isIn, prevZoom) {
var newZoom = isIn ? prevZoom + 0.1 : prevZoom - 0.1
if (newZoom > mouseArea.maxZoom)
newZoom = mouseArea.maxZoom
if (newZoom < mouseArea.minZoom)
newZoom = mouseArea.minZoom
return newZoom
}
function printSamplePostion() {
console.log("== x: 500 y: 350 ======")
console.log("-- x: " + sample.x)
console.log("-- y: " + sample.y)
console.log("=======================")
}
}
}
}
Thanks in advance
I am trying to know how PathView works. I follow the official doc to write some sample code, the code work well but the final result is not what I wanted?
The Code
import QtQuick
Rectangle {
id: root
border.color: "blue"
Component {
id: theDele
Rectangle {
id: rect
color: Qt.rgba(Math.random(), Math.random(),Math.random(), 1)
visible: PathView.onPath
width: 50; height: 50
scale: PathView.itemScale
rotation: PathView.itemAngle
property var rotX: PathView.itemAngle
transform: [
Translate {x: 25; y: 25}
]
Text {
anchors.centerIn: parent
text: index + "ABC"
}
}
}
PathView {
anchors.fill: parent
model: 100
pathItemCount: 10
delegate: theDele
path: Path {
startX: 0; startY: 100
PathAttribute {name: "itemAngle"; value: -90}
PathAttribute {name: "itemScale"; value: 0.5}
PathLine {x: 300; y: 100}
PathPercent {value: 0.2}
PathAttribute {name: "itemAngle"; value: 0}
PathAttribute {name: "itemScale"; value: 1}
PathLine {x: 300; y: 500}
PathPercent {value: 0.8}
PathAttribute {name: "itemAngle"; value: 90}
PathAttribute {name: "itemScale"; value: 0.5}
PathLine {x: 600; y: 500}
PathPercent { value: 1 }
}
}
}
I want work like this
In this demo, I try to draw three PathLine; 1st Line proportion is
0.2; 2nd Line proportion is 0.8；3rd Line proportion is 0.2.
So 1st Line should have 2 Items; 2nd Line should have 6 Items, and 3rd Line should have 2 Items. But This demo 2nd Line has 7 Items?
And 1st Line of all Items should scale 0.5, and rotate -90, And 2nd Line of all Items should scale 1, and rotate 0, And 3rd Line of all Items should scale 0.5, and rotate 90, But the demo items seem to scale and rotate linearly ?
I'm using Qt Design Studio to define a ArcItem for a Gauge. The ArcItem needs a big Stroke Width to fill correct some background images later. The ArcItem is animated with the Timeline-Module, but when begin and end is same then I have this behavior shown in the image.
I tried then to change the Stroke Width through the Timeline by changing the Stroke Width to -1, if Begin (-125) and End (-125) are equal, but if I'm selecting frame 1, then the ArcItem is out of position.
This is frame 2
Question
How I can solve this issue and keep the Stroke Width?
Code
import QtQuick 2.12
import maskpietest 1.0
import QtQuick.Studio.Components 1.0
import QtQuick.Studio.Effects 1.0
import QtQuick.Controls 2.15
import QtQuick.Shapes 1.0
import QtQuick.Timeline 1.0
Rectangle {
id: rectangle
width: Constants.width
height: Constants.height
color: "#00000000"
layer.enabled: true
Slider {
id: slider
x: 0
y: 0
width: 791
height: 40
from: 0
to: 280
stepSize: 1
}
Label{
id: label
text: slider.value
x:8
y: 46
font.pointSize: 24
}
Rectangle {
width: 560
height: 560
color: "#00000000"
ArcItem {
id: arc
x: 274
y: 73
width: 520
height: 520
anchors.centerIn: parent
outlineArc: false
begin: -125
fillColor: "#00000000"
capStyle: 0
end: -125
strokeWidth: 100
strokeColor: "#37c1ff"
antialiasing: true
}
}
Timeline {
id: timeline
currentFrame: slider.value
animations: [
TimelineAnimation {
id: timelineAnimation
running: false
duration: 280
loops: 1
to: 280
from: 0
}
]
endFrame: 280
enabled: true
startFrame: 0
KeyframeGroup {
target: arc
property: "end"
Keyframe {
frame: 280
value: 125
}
}
KeyframeGroup {
target: arc
property: "strokeWidth"
Keyframe {
frame: 0
value: -1
}
Keyframe {
frame: 1
value: 100
}
}
}
}
Instead of changing the ArcItem strokeWidth you could just make it invisible on frame 0 and visible at frame 1:
KeyframeGroup {
target: arc
property: "visible"
Keyframe {
frame: 0
value: false
}
Keyframe {
frame: 1
value: true
}
}
Another solution (and probably the better one) is to set a specific Keyframe for the end property for frame 0:
KeyframeGroup {
target: arc
property: "end"
Keyframe {
frame: 0
value: -125
}
Keyframe {
frame: 280
value: 125
}
}
UPDATE 1 - i can get it to work using Javascript - but that seems to be a little bit unoptimized (from 2-3% to 30% load with qmlscene.exe when activated) - complete recreation when the model changes (its not ever growing), is that the only way or is there a more "declarative" style available?
How can i add a PathLine to a ShapePath based on a Model?
i know how to use a Repeater from outside of Items but not how to implode them inside of Items
do i need some sort of Repeater-Delegate on pathElements?
and i don't want to use the LineSeries component
import QtQuick.Shapes 1.15
import QtQuick 2.15
Shape {
ListModel {
id: myPositions
ListElement { x: 0; y:38 }
ListElement { x: 10; y: 28 }
ListElement { x: 20; y: 30 }
ListElement { x: 30; y: 14 }
}
ShapePath {
strokeColor: "black"
strokeWidth: 1
fillColor: "transparent"
startX: 0
startY: 0
PathLine { x: 0; y: 38 }
PathLine { x: 10; y: 28 }
PathLine { x: 20; y: 30 }
PathLine { x: 30; y: 14 }
// Repeater {
// model: myPositions
// PathLine { x: model.x; y: model.y }
// }
}
}
UPDATE 1
import QtQuick.Shapes 1.15
import QtQuick 2.15
Shape {
ListModel {
id: myPositions
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Timer
{
interval: 100
running: true
repeat: true
property real myX: 0
onTriggered: {
myPositions.append({"x":myX, "y":getRandomInt(0,30)})
myX = myX + 10
}
}
function createPathLineElements(positionsModel, shapePath)
{
var pathElements = []
for (var i = 0; i < positionsModel.count; i++)
{
var pos = myPositions.get(i)
var pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}',
shapePath);
pathLine.x = pos.x
pathLine.y = pos.y
pathElements.push(pathLine)
}
return pathElements
}
ShapePath {
id: myPath
strokeColor: "black"
strokeWidth: 1
fillColor: "transparent"
startX: 0
startY: 0
pathElements: createPathLineElements(myPositions, myPath)
}
}
Use an Instantiator:
Shape {
ListModel {
id: myPositions
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Timer {
interval: 100
running: true
repeat: true
property real myX: 0
onTriggered: {
myPositions.append({"x":myX, "y":getRandomInt(0,30)})
myX = myX + 10
}
}
ShapePath {
id: myPath
fillColor: "transparent"
strokeColor: "red"
capStyle: ShapePath.RoundCap
joinStyle: ShapePath.RoundJoin
strokeWidth: 3
strokeStyle: ShapePath.SolidLine
}
Instantiator {
model: myPositions
onObjectAdded: myPath.pathElements.push(object)
PathLine {
x: model.x
y: model.y
}
}
}
You can't use repeater in that element.
The most performant way is to use QQuickItem in order to create a custom Item which draws incremental path.
Yet another simpler ways are:
1- Use PathSvg element and set its path runtime like below:
ShapePath {
fillColor: "transparent"
strokeColor: "red"
capStyle: ShapePath.RoundCap
joinStyle: ShapePath.RoundJoin
strokeWidth: 3
strokeStyle: ShapePath.SolidLine
PathSvg { id: ps; path: parent.p } //<== fill path property using js
property string p: ""
Component.onCompleted: {
for ( var i = 0; i < myModel.count; i++) {
p += "L %1 %2".arg(myModel.get(i).x).arg(myModel.get(i).y);
}
ps.path = p;
}
}
2- If you know steps, so you can pre-declare all PathLines and then set their values runtime. Just like a heart rate line on a health care monitor.
I have set a custom tooltip using the code
ChartView {
id: chart
anchors.fill: parent
antialiasing: true
ValueAxis {
id: axisY
tickCount: 3
}
DateTimeAxis{
id: xTime
gridVisible: false
}
ToolTip {
id: id_toolTip
contentItem: Text{
color: "#21be2b"
}
background: Rectangle {
border.color: "#21be2b"
}
}
SplineSeries{
id: chartseries
pointsVisible: true
pointLabelsVisible: false
useOpenGL: true
axisX: xTime
axisY: axisY
onClicked: {
id_toolTip.show("dd")
}
}
}
It gives an error when I click on the graph ..
TypeError: Property 'show' of object QQuickToolTip(0x37275d0) is not a function"
But below mentioned code will work.
chart.ToolTip.show("dd")
But I need custom tooltip
You can use the other properties as I show below:
ChartView {
id: chart
anchors.fill: parent
antialiasing: true
ValueAxis {
id: axisY
tickCount: 3
max: 4
min: 0
}
DateTimeAxis{
id: xTime
gridVisible: false
}
ToolTip {
id: id_tooltip
contentItem: Text{
color: "#21be2b"
text: id_tooltip.text
}
background: Rectangle {
border.color: "#21be2b"
}
}
SplineSeries{
id: chartseries
XYPoint { x: new Date('December 17, 1995 03:24:00').getTime() ; y: 0.0 }
XYPoint { x: new Date('December 18, 1995 04:25:00').getTime() ; y: 3.2 }
XYPoint { x: new Date('December 19, 1995 05:26:00').getTime() ; y: 2.4 }
XYPoint { x: new Date('December 20, 1995 06:27:00').getTime() ; y: 2.1 }
XYPoint { x: new Date('December 21, 1995 07:24:00').getTime() ; y: 0.0 }
XYPoint { x: new Date('December 22, 1995 08:25:00').getTime() ; y: 3.2 }
XYPoint { x: new Date('December 23, 1995 09:26:00').getTime() ; y: 2.4 }
XYPoint { x: new Date('December 24, 1995 10:27:00').getTime() ; y: 2.1 }
pointsVisible: true
pointLabelsVisible: false
useOpenGL: true
axisX: xTime
axisY: axisY
onClicked: {
var p = chart.mapToPosition(point)
var text = qsTr("x: %1, y: %2").arg(new Date(point.x).toLocaleDateString(Qt.locale("en_US"))).arg(point.y)
id_tooltip.x = p.x
id_tooltip.y = p.y - id_tooltip.height
id_tooltip.text = text
//id_tooltip.timeout = 1000
id_tooltip.visible = true
}
}
}
In the first case, id_toolTip.show("dd") , you try to call the show func of the instantiated version of QML::Tooltip whereas at the second case, chart.ToolTip.show("dd") you call the show function of the attached property Tooltip which exists for all the qml controls.
Acccording to the docs, if you don't provide a second parameter, then this means that show() is the func of the shared tooltip and not the one you instantiate. That might be the reason your code does not work.