I have a parent aframe component. It creates some child aframe component. So the parent aframe component's position is setting static in world hub, but child's position is dynamic. They are moving with camera move/or when on fly mode is on. I don't know how to fix it. If I append the child component directly to the "a-scene" Position will become static. Why the child append has dynamic position, I don't know(
AFRAME.registerComponent("parent-element", {
init(){
this.el.object3D.position.set(x, y, z)
const childeEL= document.createElement("a-entity");
childeEL.setAttribute("id", "child-id")
childeEL.setAttribute("is-remote-hover-target", "");
childeEL.setAttribute("tags", "singleActionButton:true");
childeEL.setAttribute("sprite", "name: child.png");
childeEL.setAttribute("scale", "3 3 3");
childeEL.setAttribute("billboard", "onlyY: false");
childeEL.setAttribute("child-component", {
position: this.data.position
})
this.el.appendChild(childeEL)
}
)}
AFRAME.registerComponent("child-element", {
schema: {
position: { vec: "" }
},
init(){
this.el.object3D.position.set(this.data.x, this.data.y, this.data.z)
}
)}
I tried to append the child element to directly a-scen. It worked, but it is not a solution what I am trying to find
Related
I am having issues with react Plotly displaying correctly when a graph loaded in a hidden tab is selected. It seems this is a known issue where every tab but the default tab will not resize appropriately because it doesn't know the hidden graph's dimensions.
To get around this I would like to dynamically update the tab height to be equal to the height of the default tab. Something like this: Change div height when tab is selected.
The issue is, I am unable to select the tab height value on DOM load. I thought I could add a componentDidMount function with an evenlistener for window load like such:
constructor(props) {
super(props)
this.state = {
value: 0
};
this.handleLoad = this.handleLoad.bind(this);
}
componentDidMount() {
window.addEventListener('load', this.handleLoad);
}
handleLoad() {
console.log("firstTab height: " + $('#firstTab').offsetHeight)
}
This issue is, the console log is outputting firstTab height: undefined.
When i inspect the web page and put the command $('#firstTab').offsetHeight into the console I am able to come up with a height of 697 px.
I don't want to hardcode the tab pixel size. Can anyone guide me as to why I am failing to grab the element height on window load?
Try using clientHeight property.
componentDidMount() {
const height = document.getElementById('firstTab').clientHeight;
}
I think instead of using event listener, you can do something like this.
componentDidMount() {
const height = this.firstTab.clientHeight;
console.log(height) // => gives you height
}
render() {
return (
<div
id="firstTab"
ref={ (firsTabElement) => { this.divElement = firstTabElement } }
>
Tab Content
</div>
)
}
After the first render if you are not hiding or putting any condition to remove the firstTab from the DOM. It will be available to you in componentDidMount lifecycle.
I have defined a MyElement element (in the MyElement.qml file) as the following:
Rectangle {
Item {
}
Component.onCompleted: {
console.warn(children.length)
}
}
Let's call the Item element defined within MyElement the internal child. Now, I'm using the MyElement element in the following way:
MyElement {
Item {
}
}
Here another one Item element is used as a child of MyElement. Let's call this Item element the external child. To understand my question below one should clearly understand the difference between internal and external children.
The output for the presented code will be 2, i.e. both Item elements are calculated as children.
In the future I want to iterate in the block Component.onCompleted only over external children, not over internal (external children go after internal). But for this I have to know a children index from which I have to start (in the given example this index is 1). Is there a way to get this index or, in other words, the number of internal children? Thanks.
There is no internal mechanism in Qt to distinguish internal children from those which are defined outside of the own QML definition.
My workaround is as follow
//MyElement.qml
Rectangle {
id: root
readonly property Item last_item: lastone
Item {
id: someitem
}
Item {
id: lastone
}
Component.onCompleted: {
var external_started = false;
for(var i = 0 ; i < root.children.length ; ++i)
{
if(external_started)
console.log(root.children[i].toString(), 'is external');
else if(root.children[i]===last_item)
external_started = true;
}
}
}
and
MyElement {
Item {
objectName: 'I am external'
}
}
It's a dirty hack but it works.
I'm saving a reference to the last item in a readonly property called last_item and that will distinguish my last item in qml definition.
Other items which are added outside of the qml file, will be placed after this item in the children list.
In the following TornadoFX/Kotlin code
import javafx.scene.control.TreeItem
import javafx.scene.control.TreeView
import tornadofx.*
class MyObj {
var type : Int = 0
constructor(type : Int) {
this.type = type
}
}
class MainView: View("Minimal TV demo") {
var treeRoot : TreeItem<MyObj> = TreeItem()
var objectsTreeView : TreeView<MyObj>? = null
override val root = vbox {
objectsTreeView = treeview(treeRoot) {
showRootProperty().value = false
cellFormat {
if(it.type == 0) {
text = "Test"
graphic = null
}
else {
text = null
graphic = vbox {
label("Label 1")
button("123")
textarea {
prefWidth = 100.0
prefHeight = 125.0
}
}
}
}
}
}
init {
with (root) {
for(i in 1..10) {
val x = TreeItem(MyObj(0))
treeRoot.children.add(x)
x.children.add(TreeItem(MyObj(1)))
}
}
}
}
when opening a few of the tree items and scrolling the tree view, the tree view contents and slider seems to act rather "jumpy", i.e. when I move the slider down, the mouse moves but the slider and content stay where it is, until the mouse gets so far down, then the content jumps. It just doesn't feel or look good.
I believe I could get around this by adding separate TreeItem's for each UI element row, but is there a way to achieve a smooth scroll without doing this? I tried suing a fixed cell height, which seems to work, but of course this doesn't look right at all given that some rows a shorter than others.
Don't use cellFormat for complex tree UIs, since the elements will be recreated very rapidly and most probably cause flicker. Your best bet is to create a subclass of TreeCellFragment and configured it using the cellFragment call.
Now you can create the UI only once per Tree cell, and reuse it when the data it represents changes. This is much more performant.
I have been working on this for hours(today)/months. I just want my BG to stay permanent in all view controllers as well as the same buttons with the same commands for all of them.
It is only the foreground element that is transitioning around in the center of the viewfinder, from side to side.
I tried using a subclass, it did not effect my view controller at all. When it came to trying to get my buttons to stay, i tried to cheat and use a tab bar, but the tab bar controller is locked at the bottom and I can't move it up the y axis.
Is there an easier way? Is there a way to make a view controller have the main components and every other view controller has sub components that transitions, one from another using the main components controller.
When attempting to make a subclass, I made a touch class file and put..
import UIKit
class WallpaperWindow: UIWindow {
var wallpaper: UIImage? = UIImage(named: "BG.png") {
didSet {
// refresh if the image changed
setNeedsDisplay()
}
}
init() {
super.init(frame: UIScreen.main.bounds)
//clear the background color of all table views, so we can see the background
UITableView.appearance().backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func draw(_ rect: CGRect) {
// draw the wallper if set, otherwise default behaviour
if let wallpaper = wallpaper {
wallpaper.draw(in: self.bounds);
} else {
super.draw(rect)
}
}
and then put
var window: UIWindow? = WallpaperWindow()
into my AppDelegate...
the code was working find, just my background did not change at all...
Related in making the tab bar move up the y axis I had no luck, it was locked....counting even tough the UIcoding..
Let me explain what I'm trying to achieve. Currently, I have button and want to add image and add text. I have parent div container in which all child div adds dynamically.
Add image button adds img tag with image inside the parent div and add text button adds div containing text inside parent by using append method.
But what I want that when ever I create them, they should place in a specific position which will be common to all. Lets take center of the parent so when ever I add image or text it should create at the center of the parent
Code for adding dynamic image
$(document).ready(function () {
$('#addImage').click(function () {
var url = 'Default.aspx';
var dialog = $('<iframe"></iframe>').appendTo('body');
dialog.load(url).dialog('open').dialog({ modal: true, width: 480,resizable: false ,open: function (type, data) { $(this).parent().appendTo("form"); },
buttons: {
'OK': function() {
var img = document.createElement('img');
$(img).attr("id", "dyndiv" + count);
$(img).attr("width", 60);
$(img).attr("height", 140);
$(img).attr("src", 'Uploads/'+ $get('dvFileName').innerHTML) ;
var $ctrl = $(img).addClass("draggable ui-widget-content").draggable({ containment: '#containment-wrapper', cursor: 'move', snap: '#containment-wrapper' });
objid = "dyndiv" + count ;
count++;
$("#containment-wrapper").append($ctrl);
$(this).dialog('destroy');
},
'Cancel': function() {
$(this).dialog('destroy');
// I'm sorry, I changed my mind
}
}
});
return false;
});
});
At last i got the solution. In the above question I am appending the div, now i am also explicitly defining the position of the div after the append statement above.