I am trying to show simple 3D car using following QML:
import QtQuick 2.2 as QQ2
import Qt3D.Core 2.0
import Qt3D.Render 2.0
import Qt3D.Input 2.0
import Qt3D.Extras 2.0
Entity {
id: sceneRoot
Camera {
id: camera
projectionType: CameraLens.PerspectiveProjection
fieldOfView: 45
aspectRatio: 16/9
nearPlane : 0.1
farPlane : 500.0
position: Qt.vector3d( 0.0, 0.0, -40.0 )
upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
viewCenter: Qt.vector3d( 0.0, 0.0, 0.0 )
}
OrbitCameraController {
camera: camera
}
components: [
RenderSettings {
activeFrameGraph: ForwardRenderer {
clearColor: Qt.rgba(0, 0.5, 1, 1)
camera: camera
}
},
// Event Source will be set by the Qt3DQuickWindow
InputSettings { }
]
Mesh{
id: sphereMesh
source: "qrc:/../../../../../Desktop/Qt-3d/assets/55z27frcahz4P911GT/Porsche_911_GT2.obj"
}
PhongMaterial {
id : spherematerial
shininess: 1
}
Transform {
id: sphereTransform
property real userAngle: 0.0
scale: sceneRoot.scale
rotation: fromAxisAndAngle(Qt.vector3d(0, 1, 0), 45)
matrix: {
var m = Qt.matrix4x4();
m.rotate(userAngle, Qt.vector3d(0, 1, 0));
// m.translate(Qt.vector3d(0, 0, 20));
return m;
}
}
QQ2.NumberAnimation {
target: sphereTransform
property: "userAngle"
duration: 10000
from: 0
to: 360
loops: QQ2.Animation.Infinite
running: true
}
Entity {
id: sphereEntity
components: [ sphereMesh, spherematerial, sphereTransform ]
}
}
However, when exeucuted this code, I can see the 3D car rotating. But it does not contain the original colors from the 3D object. It is showing the default colors for the 3D car. How can I get the original colors?
Do I need to use Texture with the material? If Yes, how to do that?
Do I need to use mtl file in QML? If yes, how to do that
Note that,
I do not want to use Qt Quick 3D module for some reasons.
Also, I not want to use Qt3DStudio
Loading a mesh using Qt3D::QMesh only loads the vertex data (vertices, normals, texture coordinates) but no textures and it doesn't add any Qt3DRender::QMaterials. You're adding a simple Qt3DExtras::QPhongMaterial which simply applies one color to the whole object.
If your object provides per-vertex-color-information you could try Qt3DExtras::QPerVertexColorMaterial.
If it doesn't work try Qt3DRender::QSceneLoader: there you set the URL to the model and it loads everything automatically and tries to apply the correct materials. Create it in place of the QMesh and also add it as a component.
Related
I want to show a square box on my camera screen and I want to capture the area within that square box how I can achieve that?
It will not scan any bar code or QR code it will simply capture the area within a square box and skip all the rest.
this is the image of the view
You can not achieve directly. Follow the step as :
Snap : this.camera.takePictureAsync({ fixOrientation: true, mirrorImage: true })
Crop with ImageEditor by setting cropData as
const { uri, width, height } = capturedImg;
{
offset: { x: 0, y: 0 },
size: { imagewidth, height }, displaySize: { width: cameraSize.width, height: cameraSize.height }
}
Now crop your camera size photo with box origin and size
I'm using a XAML-MapControl in a UWP-project.
When you create a MapIcon, the image is floating a fixed offset above the desired location on the map, instead of directly on the map, with a black line connecting the icon with the map, as you can see in this image:
I can't find a way to remove this line, or reduce its size.
And none of the other MapElement-types seem to do what I want, I want the exact behavior of the MapIcon, but without this line.
Is there a way to do that?
Edit:
Here's how I create the MapIcons:
var icon = new MapIcon
{
NormalizedAnchorPoint = new Point(0.5, 1),
Image = image,
Visible = true,
};
MapControl.MapElements.Add(icon);
Edit2:
I tried to set the stylysheet, but it does not work for me, probably because it's only supported in a version newer than the one I target:
MapControl.StyleSheet = MapStyleSheet.ParseFromJson("{ \"version\": \"1.*\", \"settings\": { }, \"elements\": { \"userPoint\": { \"stemAnchorRadiusScale\": 0, \"stemHeightScale\": 0 }}}");
You need to set the stemAnchorRadiusScale and stemHeightScale properties of userPoint to 0 in the map style sheet. See this topic for how to work with style sheets:
https://learn.microsoft.com/en-us/windows/uwp/maps-and-location/elements-of-map-style-sheet.
For example:
{
"version": "1.*",
"settings": {
},
"elements": {
"userPoint": {
"stemAnchorRadiusScale": 0,
"stemHeightScale": 0
}
}
}
I am trying to create a TabBar has preview images of the connected layout's children. However after adding several tabs (the exact number depends on the number of elements within the tabs) QML throws an error and the PreviewTabBar loses all its content children.
The following is a minimal working example:
My main.qml:
import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
StackLayout {
id: swipeView
anchors.fill: parent
currentIndex: tabBar.currentIndex
}
Timer {
interval: 50; running: true; repeat: true
onTriggered: addTab()
}
function addTab() {
console.log("add Tab")
var component = Qt.createComponent("qrc:/TabContent.qml")
if(component.status !== Component.Ready)
console.log("component not ready")
var item = component.createObject(swipeView)
tabBar.addTab(item)
tabBar.currentIndex = tabBar.contentChildren.length - 1
console.log("current index " + tabBar.currentIndex)
}
header: PreviewTabBar {
id: tabBar
currentIndex: swipeView.currentIndex
}
}
The PreviewTabBar.qml containing previews of the content:
import QtQuick 2.8
import QtQuick.Controls 2.1
TabBar {
signal closeCurrentTab
clip: true
background: Rectangle {
color: "white"
}
function addTab(imageSource) {
var component = Qt.createComponent("PreviewTabButton.qml")
if(component.status !== Component.Ready)
console.log("component not ready")
else {
var item = component.createObject()
item.setSource(imageSource)
addItem(item)
}
}
function closeTab() {
console.log("closeTab")
closeCurrentTab()
}
}
and last but not least the PreviewButton.qml using a ShaderEffectSource to render the preview:
import QtQuick 2.8
import QtQuick.Controls 2.1
TabButton {
height: 80
width: 140
function setSource(source) {
preview.sourceItem = source
}
contentItem: ShaderEffectSource {
id: preview
}
}
This example gets to about 80 tabs on my machine, after that the PreviewTabBar loses all its children (not so the StackLayout). However in the real life example with more complicated tab contents I only get up to around 8 tabs. What could I be doing wrong?
Here is the relevant part of the application output:
qml: current index 99
qml: add Tab
file:///usr/lib/qt/qml/QtQuick/Controls.2/TabButton.qml:65: TypeError: Cannot read property of null
qml: current index 100
qml: add Tab
qml: current index 1
I tried finishing the dynamic component creation in a callback as described here:
http://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html#creating-a-component-dynamically
however that brough no improvement.
Here is a link to the example project:
https://www.file-upload.net/download-12341284/tabtestshader.zip.html
The most probable cause is line 17 in PreviewTabBar.qml which reads:
var item = component.createObject()
As you have no parent set in the createObject()-function the GarbageCollector tends to run wild, and delete your object, even if it is still referenced.
Though not documented that way, you should always pass a parent object, to make sure it survives the GC.
A more stable way would be to generate the Tabs from a model, and add the according model entries in the addTab-functions.
As a little remark on the side: You create a new component everytime you call one of your addTab-functions. Why don't you declare it once like
Component {
id: myComp1
...
}
and create the objects from that?
Im starting to work with qtquick 1.1. And i have designed a component consisting mainly out of a pathview.
Rectangle {
id: pathViewElement
PathView {
id: pathView
pathItemCount: 4
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
highlightRangeMode: PathView.StrictlyEnforceRange
model: myModel
delegate: Item {
width: valueText.width
height: 50
scale: 1.0-2*Math.abs(pathViewElement.width/2-(x+width/2)) / pathViewElement.width
opacity: scale
smooth: true
Text {
id: valueText
anchors.centerIn: parent
text: myModel.value
font.pointSize: 35
}
}
path: Path {
startX: 0; startY: 25
PathLine { x: pathViewElement.width; y: 25;}
}
}
}
This PathView is using a model called myModel. Which might be located in any other file.
The question now is the following:
I'm using the same component to be able to change different values. Each of these values is coming with another QML ListModel.
So how can i dynamically change the model used in the PathView (myModel)?
Also, while creating the PathView i can statically set the model using
model: MyListModel{}
where MyListModel is a qmlFile consisting only of a ListModel {} declaration. But when i dynamically create the PathView from within a third file, say MyApplication.qml I cannot set pathViewElement.model: MyListModel{} as the compiler is expecting a ";" instead of {}. Why is this?
So how can i dynamically change the model used in the PathView
(myModel)?
On the occurrence of respective event, you can directly change the model assigned for your view.
eg. Assuming you want this change to be done on click of some mouse button:
onClicked:
{
pathView.model = myNewModel
}
Here, myNewModel is the id for your new model to replace with.
But when i dynamically create the PathView from within a third file,
say MyApplication.qml I cannot set pathViewElement.model:
MyListModel{} as the compiler is expecting a ";" instead of {}. Why is
this?
Can you state this part more clearly ?
I test the following code posted at 1
The qml viewer cannot open the new window and its progress is always 0.1 , what is the problem?
import QtQuick 1.0
import QtWebKit 1.0
Grid {
columns: 3
id: pages
height: 300; width: 600
Component {
id: webViewPage
WebView {
id: webView
height: 300; width: 600
newWindowComponent: webViewPage
newWindowParent: pages
url: "newwindows.html"
onLoadStarted: console.log("Started"+url)
onLoadFinished: console.log("Finished"+url)
onLoadFailed: console.log("Failed")
onProgressChanged: console.log(progress)
onUrlChanged: console.log("Changed"+progress+url)
}
}
Loader { sourceComponent: webViewPage }
}
Worth trying to actually create a new window using the Window element to see if you have any luck. I'd expect the window to launch whether or not the data is coming through. See here:
https://www.qt.io/blog/2011/08/26/toplevel-windows-and-menus-with-qt-quick