I am trying to create a customizable Qt3D component by merging three ConeMeshes into a single entity. The user must be able to interact with the custom entity, so I have added an ObjectPicker to the file. Normally, I would use a predefined scaled .obj file, but my manager wants the objects to be drawn directly by Qt.
The two meshes I want to combine are defined in a seperate qml file, so I can call it within my Scene3D.
Entity {
ObjectPicker {
id: combinedPicker
}
ConeMesh {
id: conemesh1
...
}
ConeMesh {
id: conemesh2
...
}
Transform {
id: conetransform1
}
Transform {
id: conetransform2
}
Entity {
components: [conemesh1, conetransform1, conemesh2, conetransform2, combinedPicker]
}
}
My approach for putting the meshes together is to enclose them as components in a separate Entity scope, as shown in the last line. But this approach only renders the last entry in the components array. Above, that would be conemesh2.
Previously I tried to create multiple Entity instances, and pass each one the id of the ObjectPicker,
Entity {
components: [conemesh1, conetransform1, combinedPicker]
}
Entity {
components: [conemesh2, conetransform2, combinedPicker]
}
But as per the documentation of ObjectPicker, the object picker is not meant to be shared by multiple components.
So my question is this: What is the correct approach when merging multiple meshes into one single mesh in Qml?
I solved the problem by "factoring" out the ObjectPicker element, effectivly making it a sibling of the mesh entities.
Entity {
components:
[conePicker]
Entity {
id: pipeTopEntity
components: [coneMeshTop, coneTransformTop, floorMaterialTop]
}
Entity {
id: pipeBodyEntity
components: [coneMeshBody, coneTransformBody, floorMaterialBody]
}
Entity {
id: pipeBotEntity
components: [ coneMeshBot, coneTransformBot, floorMaterialBot]
}
}
Related
In my qml file i have a lot of uniform objects with few differencies (id for example).
I want to use "Don't Repeat Yourself" principle
So i want create custom local template, which i'll can append with unique properties on using.
I know about creating separate .qml file, but this templates are too small for this mechanism (It's seems wired for me to create separate .qml file for red squares with 2px border)
Is there any meachanism for small templates in qml?
Qt 5.15.0 adds support for inline components. Here's the example from the docs:
import QtQuick 2.15
Item {
component LabeledImage: Column {
property alias source: image.source
property alias caption: text.text
Image {
id: image
width: 50
height: 50
}
Text {
id: text
font.bold: true
}
}
Row {
LabeledImage {
id: before
source: "before.png"
caption: "Before"
}
LabeledImage {
id: after
source: "after.png"
caption: "After"
}
}
property LabeledImage selectedImage: before
}
I have particular state object which consist of state object which looks like this.
{
cards:[
{
id:'card01',
title:"My card 01",
category:[
{
id:1,
name:'cat1',
tags:[{id:11,name:'tag1'}]
},
{
id:2,
name:'cat2',
tags:[{id:11,name:'tag1'}]
}
]
},
{
id:'card01',
title:"My card 02",
category:[
{
id:11,
name:'cat11',
tags:[{id:111,name:'tag11'}]
},
{
id:22,
name:'cat22',
tags:[{id:111,name:'tag22'}]
}
]
}
]
}
This particular object is fetched from the backend and it is kept in the store. I need to filter out the categories when ever the user selects a card (when a card is selected it returns of gets the card id). and i need to display the category in a different component with the tags inside the category. Do i need to use reselect for this is there any advantage of using it?. I need to to do this filtration on the data in my store.
How to build a Redux selector for collection with global and local derived data?
I have some data that looks like:
{
palette: [1,0,1,1],
children: [
{
RootData: [...],
},
//more children...
]
}
There are some computed derived properties I need to add. DerivedRoot and ComputedFromPaletteAndDerivedRoot
{
palette: [1,0,1,1],
children: [
{
RootData: [...],
// Local data for this child derived from the RootData
DerivedRoot: [],
// Additional data derived from global `palette` and local `RootData`
ComputedFromPaletteAndDerivedRoot: []
},
//more children...
]
}
I've looked at reselect and I'm not sure if it's the right tool to utilize in this scenario.
Individual children's RootData values can change and I don't want the selector applied to the full children collection as that would re-memoize all the children anytime an individual child changes. Additionally any time palette changes the child selectors could recompute a new value for ComputedFromPaletteAndDerivedRoot
I have a project where when i click on a anchor on parent item-sorting-list a property of child item-card will change so it sort something out based on that property. However the data does not seem to pass to the child. I am wondering if there is anything wrong when i built up the parent child relationship in the meanwhile?
template (item-sorting-list)
<a :name="subcat.name" href="" #click.prevent="getSelectedSubcat(subcat.name)">{{subcat.name}}</a>
methods (item-sorting-list)
methods: {
getSelectedSubcat(subcat){
var vm = this;
vm.selectedSubcat = subcat
}
}
When I click on the subcat.name, it does actually store subcat.name into selectedSubcat (verified from Vue devtool) in the item-sorting-list component. The problem is item-card does not store it even though i put selectedSubcat as props
HTML (does this work as parent child relationship here?)
<item-sorting-list><item-card></item-card></item-sorting-list>
UPDATED item-card
export default {
props:[
'selectedSubcat'
],
data(){
return {
products:[],
}
},
mounted() {
this.getAllProducts()
},
methods: {
getAllProducts(){
var vm = this;
vm.$http.get('/getProducts').then((response)=>{
vm.products = response.data.data.products;
});
}
}
}
from Vue devtool, item-card is included in the item-sorting-list, I would say that means they are parent child relationship? but then when i click something in item-sorting-list and change selectedSubcat, selectedSubcat in item-sorting-list does change but the selectedSubcat in item-card remains undefined. Sorry for my bad English.
UPDATE2
I notice that every example that I found online is that they set selectedSubcat in the new Vue with el="#app" in it instead of any other component (in my case item-sorting-list). Does that matter? I feel like the :selected-subcat="selectedSubcat in
<item-sorting-list>
<item-card :selected-subcat="selectedSubcat"></item-card>
</item-sorting-list>
cannot read the selectedSubcat that I defined in the component item-sorting-list but instead if i set selectedSubcat in the following
const app = new Vue({
el: '#app',
data:{
selectedSubcat:1
}
});
it does read selectedSubcat as 1. So what I would say is that item-card does not consider item-sorting-list as its parent. But why and how can I make it to become item-card's parent? [NOTE: but in the Vue devtool the tree does show that item-sorting-list does consist of item-card, item-card does show after clicking the arrow on the left of item-sorting-list]
In VueJs, you have parent child relation, when you don't register a vue component globally, but you make a component available only in the scope of another instance/component by registering it with the components instance option, like following:
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> will only be available in parent's template
'my-component': Child
}
})
In your case, I dont see selectedSubcat being passed as dynamic props to child component item-card. Dynamic props to data on the parent ensures whenever the data is updated in the parent, it will also flow down to the child:
You probably have to pass it to child like following:
<item-sorting-list>
<item-card :selected-subcat="selectedSubcat"></item-card>
</item-sorting-list>
You also have to add props in your item-list like this:
var itemList = {
props: ["selectedSubcat"]
template: '<div>Yout component!</div>'
}
notice I have converted it to kebab-case, because HTML being case-insensitive, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents(Documentation).
I have just started playing with QML and have a view where I have a bunch of components as follows:
Window {
....
property Component dateTumbler: ControlView {
// Definition follows
}
property Component timeTumbler: ControlView {
// More definition follows
}
// More controls
}
This makes the main QML file very long and cumbersome to edit and maintain. I tried to separate this into different files as follows:
// DateTumblerView.qml
component: DateTumblerView { // Not sure how to inherit here..
// Definition here
}
I'm trying to use it like this:
property component dateTumbler: DateTumblerView {}
However, this never works and the DateTumblerView is never found. I am not sure if I am doing this correctly.
[EDIT]
ControlView is defined as follows:
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtMultimedia 5.5
Rectangle {
id: view
property bool darkBackground: false
Text {
id: textSingleton
}
SoundEffect {
id: playCalSound
source: "qrc:/sound/test.wav"
}
}
[END EDIT]
What is the proper way to split QML code into multiple files?
Your DateTumblerView.qml file should look like this:
ControlView {
// More definition follows
}
And you would use it like this:
property Component dateTumbler: DateTumblerView {}
Or:
Component {
id: dateTumbler
DateTumblerView {}
}
Or if you wanted to use it directly:
DateTumblerView {}
It's pretty much the same as when your code was just in one file. Anytime you do <Type> {}, you're inheriting that type and can set or add new properties, functions, and subcomponents. The difference is that it is in a separate file, has a specific name (the name of the file), and you can reuse that code as many times as you want.
For more details, see Defining Custom QML Types for Re-use.