I registered an AFRAME component called mycomponent which simply points the camera towards a target and changes position on click. To do that the component has two propriety types which are target and position.
I created a pen where you can see the behaviour.
Now if I call setAttribute to update the position, it changes position but the target propriety is reset to default. Furthermore the entity attribute remains the same. Why is that?
The method setAttribute is overridden for A-Frame primitives. When calling the method to append a component as attribute to the node which already exists, it overrides the existing component attribute. Thus target is reset. Seeing you are using an AEntity, you may set an attribute of a component to a certain value.
Check the js docs of the setAttribute method in aframe/core/a-entity.js
To solve the problem, simply call:
let camera = document.getElementById('camera')
camera.setAttribute('mycomponent', 'position', '-10 0 10')
Or...
let camera = document.getElementById('camera')
AFRAME.utils.entity.setComponentProperty(camera, 'mycomponent', 'position', '-10 0 10')
...which gives you the option to use (custom) delimiters (default is ".") for the first parameter as wel AFRAME.utils.entity.setComponentProperty(camera, 'mycomponent.position', '-10 0 10' [, delimiter]).
** Important to note ANode, which is inherited by AEntity, has a different implementation for the setAttribute method.
That may be a bug if you pass a string form into .setAttribute.
Try:
el.setAttribute('component', {position: '-10 10 10'});
Or:
el.setAttribute('component', 'position', '-10 10 10');
Related
I have the following code snippet (just to illustrate the question, it is not full production code) for the CkEditor plugin:
onOk: function() {
var dialog = this,
element = dialog.element;
.........
element.setStyle('width', width+'%');
element.setStyle('text-align', align)
dialog.commitContent(element);
}
In this small code snippet a modification of one dialog element occurs using setStyle() method, after which commitContent is triggered.
So, the questions are:
Do I understand correctly, that each setStyle call here triggers
element rerender (repaint) since this element already exists in
DOM?
What is the purpose of commitContent() ckEditor method? Just an event for dialog elements to store some data?
setStyle
I belive that setStyle repaints the components already existing in the DOM, have a look at this example (that I have taken from the official documentation):
var element = CKEDITOR.document.getById( 'myElement' );
element.setStyle( 'background-color', '#ff0000' );
element.setStyle( 'margin-top', '10px' );
element.setStyle( 'float', 'right' );
It first gets the element from the doc and Then sets the style, so basically it is repaiting it triggering events.
commitContent
From the official documentation:
Calls the CKEDITOR.dialog.definition.uiElement.commit method of each
of the UI elements, with the arguments passed through it. It is
usually being called when the user confirms the dialog, to process the
values.
Hope this helped you!
I found this function to remove a gui element but i think it is outdated. So far I haven't been able to find anyone else who knows how to remove any part of a gui, whether its an entire dat.GUI() or just an added element to a dat.GUI(). The first would probably be enough for what i need (just removing the dat.GUI() all together) but either one would be super helpful!
supposed to remove a dat.GUI()
gui = new dat.GUI();
...
removeGui(gui);
function removeGui(gui, parent)
{
if(!parent)
{
parent = dat.GUI.autoPlaceContainer;
}
parent.removeChild(gui.domElement);
}
But gives back the error: cannot call method 'removeChild' of undefined, so i am guessing that autoPlaceContainer is wrong.
The original author of this function left these notes:
where the parameters gui represents the DAT.GUI you want to remove and parent is the parent container where if you didn't specify a domElement when instantiating DAT.GUI then you don't need to pass a parent.
var gui = new dat.GUI();
item = gui.add(text, 'message');
To delete:
gui.remove(item);
If your item is inside a folder, you have to do:
folder.remove(item);
If you want to remove the entire dat.GUI element along with all of its listeners, you can use gui.destroy()
If you want to reset the dat.GUI's values, you can use datGUI.__controllers.forEach(controller => controller.setValue(controller.initialValue));
You can delete dat.GUI element like this:
gui.remove()
You can try hiding it using:
gui.hide()
Change the remove function in the dat.gui.js file: "slice" wants to be "splice".
The answer can be found here: https://github.com/ulyssesp/dat.gui/commit/86f43c0be5db08c9a6d7339aa8287620306fb0b5
If I wanted to have an invisible box, for example, how could I get touch events if it has an alpha of 0? Or is there another way to make an invisible box.
local function invisiblebuttontouch(event)
if event.phase == 'began' then
print (event.x..","..event.y)
end
end
button = display.newRect(1,1,300,300)
button:addEventListener("touch",invisiblebuttontouch)
button.alpha = 0
It never prints out the x and y, however if I don't set the alpha to 0, then it works fine.
You need to add this line to your code:
button.isHitTestable = true
Source: http://docs.coronalabs.com/api/type/DisplayObject/isHitTestable.html
it should be noted that no callback for a target will be fired if one of the parent groups are invisible disregarding isHittestable. Also setting isHittestable of the mother group won't change that.
I have designed a group of three uitabpanels objects.
htab = uitabgroup('v0');
th1 = uitab('v0',htab,'title','Panel 1','ButtonDownFcn',...
#th1_ButtonDownFcn);
th2 = uitab('v0',htab,'title','Panel 2','ButtonDownFcn',...
#th2_ButtonDownFcn);
th3 = uitab('v0',htab,'title','Panel 3','ButtonDownFcn',...
#th3_ButtonDownFcn);
My intention is having a smooth transition between them when I change the selected uipanel through the mouse click. I pretend to achieve it changing the 'Visible' property of the elements contained inside them using the ButtonDownFcn function ( I got this idea based on the description section of this page).
set(handles.th2,'Visible','off');
set(handles.th3,'Visible','off');
...
function th1_ButtonDownFcn(hObject, eventdata)
handles = guidata(fh);
set(handles.th1,'Visible','on');
set(handles.th2,'Visible','off');
set(handles.th3,'Visible','off');
guidata(fh,handles);
end
function th2_ButtonDownFcn(hObject, eventdata)
handles = guidata(fh);
set(handles.th1,'Visible','off');
set(handles.th2,'Visible','on');
set(handles.th3,'Visible','off');
guidata(fh,handles);
end
function th3_ButtonDownFcn(hObject, eventdata)
handles = guidata(fh);
set(handles.th1,'Visible','off');
set(handles.th2,'Visible','off');
set(handles.th3,'Visible','on');
guidata(fh,handles);
end
where
fh: handle of the figure where they are contained the uitabpanels.
handles.th1, handles.th2, handles.th3: handles of the elements contained into each uitabpanel respectively.
However, it has not worked (I click on each one of uitabpanel's tabs and the visibility of them do not change) and I do not understand why.
In conclusion, the ButtonDownFcn and SelectionChangeFcn functions of an UITAB are already active when you click in the tab´s label. So it is not possible to achieve the desired target (smooth optical transition) because the obtained result (modifying the mentioned functions) is the same that doing nothing.
I was wondering if anyone has found a solution or example to actually populating the input box of a slider and having it slide to the appropriate position onBlur() .. Currently, as we all know, it just updates this value with the position you are at. So in some regards, I am trying to reverse the functionality of this amazing slider.
One link I found: http://www.webdeveloper.com/forum/archive/index.php/t-177578.html is a bit outdated, but looks like they made an attempt. However, the links to the results do not exist. I am hoping that there may be a solution out there.
I know Filament has re-engineered the slider to handle select (drop down) values, and it works flawlessly.. So the goal would be to do the same, but with an input text box.
Will this do what you want?
$("#slider-text-box").blur(function() {
$("#slider").slider('option', 'value', parseInt($(this).val()));
});
Each option on the slider has a setter as well as a getter, so you can set the value with that, as in the example above. From the documentation:
//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);
UPDATE:
For dual sliders you'll need to use:
$("#amount").blur(function () {
$("#slider-range").slider("values", 0, parseInt($(this).val()));
});
$("#amount2").blur(function () {
$("#slider-range").slider("values", 1, parseInt($(this).val()));
});
You'll need to use Math.min/max to make sure that one value doesn't pass the other, as the setter doesn't seem to prevent this.
You were almost there when you were using the $("#slider-range").slider("values", 0) to get each value. A lot of jQuery has that kind of get/set convention in which the extra parameter is used to set the value.
I've done some work around the jQuery UI slider to make it accept values from a textbox, it may not be exactly what you were after but could help:
http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html
$slider = $("#slider");
$("#amountMin").blur(function () {
$slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()) ) );
$(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val())));
});
$("#amountMax").blur(function () {
$slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val()) ) );
$(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val())));
});
I just used martin's code and updated the id to #slider also added the math.max as he suggested so the sliders won't overlap.