I'm trying to swap entities in my single page app to emulate scene switching using some test buttons that I generated. It works correctly for the 'scene3DModel' but when switching over to 'scene360', the 360 image set to the src of won't render ??? 360 image renders correctly when other 'scenes' are commented out.
Markup for 'scene' entities:
<a-entity id="sceneHome" visible="true">
<a-sky color="#6EBAA7"></a-sky>
</a-entity>
<a-entity id="scene360" visible="false">
<a-sky src='url(/assets/360-photo.jpg)'></a-sky>
</a-entity>
<a-entity id="scene3DModel" visible="false" gltfpostprocessing gltf-opaque update-sun fog="density:1.3; near:4.0;">
<!-- procedural environment-->
<a-entity environment="preset: yavapai; seed: 5; skyColor: #cbdff7; horizonColor: #d8e0ae; shadow: true; shadowSize: 25.0; lightPosition: 10 40 30; fog: 0.91; playArea: 1; ground:hills; groundYScale: 4; groundColor: #c69c7b; groundColor2: #c1a582; dressingAmount: 0; dressingUniformScale: false; grid: crosses; gridColor: #bb9977"></a-entity>
<!-- scene lights-->
<a-entity light="type: ambient; color: #fffcf2; intensity: 0.6; "></a-entity>
<!--3D Models-->
<a-entity id="loaded-model" gltf-model="#temple-gltf" ></a-entity>
</a-entity>
Generated Markup for buttons -
Events are being emitted correctly
<a-entity view-toggle-test="" id="view-toggle" position="0 1 2" rotation="0 180 0" scale="0.2 0.2 0.2" visible="">
<a-triangle position="0 0" text="value:image;color:red;width:4;align:center" rotation="" scale="" visible="" material="" geometry="height:0.1846484165324745;width:4;primitive:triangle"></a-triangle>
<a-triangle position="0 1.5" text="value:home;color:red;width:4;align:center" rotation="" scale="" visible="" material="" geometry="height:0.1846484165324745;width:4;primitive:triangle"></a-triangle>
<a-plane position="0 3" text="value:model;color:red;width:4;align:center" rotation="" scale="" visible="" material="" geometry=""></a-plane>
</a-entity>
Scene manager component
AFRAME.registerComponent('scene-manager', {
schema: {
},
init: function (){
var self = this
var el = this.el;
window.addEventListener('activeSceneChanged',(e)=> {
nextScene = e.detail.activeScene;
self.setScene(nextScene)
});
},
setScene: function(nextScene){
var sceneHome = document.getElementById('sceneHome');
var scene360 = document.getElementById('scene360');
var scene3DModel = document.getElementById('scene3DModel');
//stupid version of swapping logic
if(nextScene == 'sceneHome'){
scene360.setAttribute('visible', 'false');
scene3DModel.setAttribute('visible', 'false');
sceneHome.setAttribute('visible', 'true');
}if(nextScene == 'scene360'){
sceneHome.setAttribute('visible', 'false');
scene3DModel.setAttribute('visible', 'false');
scene360.setAttribute('visible', 'true');
}if(nextScene == 'scene3DModel'){
sceneHome.setAttribute('visible', 'false');
scene360.setAttribute('visible', 'false');
scene3DModel.setAttribute('visible', 'true');
}
}
});
Environment settings from the environment component I'm using were overriding the a-sky 360. I switched to k-frame templates for scene management and am toggling attribute -- environment, {active:false}
Related
I have a component that is usually dormant (by which I simply mean it is of little interest to the user), but in a certain state this component becomes 'activated' and I want to put it in the exact center of the screen and enlarge it to grab the user's attention.
There are several of these components in the dormant state, but only ever 1 activated. The dormant components could be anywhere on the screen, so I wanted a solution that would translate the component from wherever it was originally to the middle of the screen while activated, and then return it back to its original dormant position when done.
Attempting to do this:
template:
<div #myElement [#isActivated]="activated">
Hello Stack Overflow
<button (click)="activated = activated === 'activated' ? 'dormant' : 'activated">
Toggle
</button>
</div>
typescript:
#Component({
// ...
animations: [
trigger('isActivated', [
state('dormant', style($transitionToActivated)),
state('activated', style({
transform: 'translateX(0%) translateY(0%) scale(1)'
})),
transition('dormant => activated', animate('1000ms ease')),
transition('activated => dormant', animate('1000ms ease'))
])
]
})
export class MyComponent implements OnInit {
#ViewChild('myElement') myElement: ElementRef;
activated = 'dormant';
transitionToActivated: any;
ngOnInit() {
let rect = this.myElement.nativeElement.getBoundingClinetRect();
this.transitionToActivated = {
transform: ''translateX(' + ((window.screen.width / 2) - (rect.right + rect.left) / 2) + ') translateY(' +
((window.screen.height / 2) - (rect.top + rect.bottom) / 2) + ') scale(1.5)'
}
}
}
My syntax here is off: the $transitionToActivated inside of the Component decorator is invalid. Is it possible to this kind of responsive animations with Angular Animations? Or will I need to look into a pure CSS solution?
[here's a plunker of what I'm trying... currently my attempt to put it in the exact center is commented out, and just some static animation instructions]
I figured out a couple things.
First, above I'm using window.screen for width and height of the 'screen.' This is actually giving me the resolution of the monitor (resizing the window doesn't affect it). I wanted document.documentElement to get the size of the viewport.
Second, I solved the issue of dynamic animations by using the AnimationPlayer to define the animations programmatically [rather than defining them in the Component decorator as I was trying to above].
I'm still curious as to whether the animations can be dynamically changed via the animation property inside the component decorator... I expect there must be a way, but I've been rather frustrated by the hand-wavy-ness of the Angular animations API and still can't figure it out.
Also, my solution acts funky when the viewport size is changed while in the 'activated state' (doesn't respond to resizing [as would be expected] and jumps at the start of its 'return' animation to the new middle of the viewport [again as expected].
Here's code and plunker to my solution:
export class App implements OnInit {
#ViewChild('myElement') myElement: ElementRef;
activated: BehaviorSubject<string> = new BehaviorSubject<string>('dormant');
transitionToActivated: any;
player: AnimationPlayer;
factory: any;
constructor(private builder: AnimationBuilder) {}
ngOnInit() {
console.log('viewport width: ' + document.documentElement.clientWidth);
console.log('viewport height: ' + document.documentElement.clientHeight);
let rect = this.myElement.nativeElement.getBoundingClientRect();
console.log('rect right: ' + rect.right);
console.log('rect left: ' + rect.left);
this.transitionToActivated = 'translateX(' + ((document.documentElement.clientWidth / 2) -
(rect.right + rect.left) / 2) + 'px) translateY(' +
((document.documentElement.clientHeight / 2) - (rect.top + rect.bottom) / 2) +
'px) scale(1)';
this.activated.subscribe(newValue => {
this.transitionToActivated = 'translateX(' + ((document.documentElement.clientWidth / 2) -
(rect.right + rect.left) / 2) + 'px) translateY(' +
((document.documentElement.clientHeight / 2) - (rect.top + rect.bottom) / 2) +
'px) scale(1)';
console.log(this.transitionToActivated);
if(newValue === 'activated'){
this.factory = this.builder.build([
style({ transform: 'translateX(0) translateY(0) scale(1)' }),
animate(
'1000ms',
style({ transform: this.transitionToActivated })
)
]);
this.player = this.factory.create(this.myElement.nativeElement, {});
this.player.play()
} else if(newValue === 'dormant'){
this.factory = this.builder.build([
style({ transform: this.transitionToActivated })
animate(
'1000ms',
style({ transform: 'translateX(0) translateY(0) scale(1)' }),
)
]);
this.player = this.factory.create(this.myElement.nativeElement, {});
this.player.play()
}
})
}
}
I wander if in foundation 6 sliders, it is possible to allow negative values e.g. swinging from -50 to 50.
Currently I have a slider in [0 100]:
<div class="row">
<div class="small-4 large-4 columns">
<label>Audio Volume</label>
</div>
<div class="small-6 large-6 columns">
<div class="slider" id="slidervol" data-slider data-end="100" display_selector: "#slidervol">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderVolOutput"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-2 large-2 columns">
<input name="AudioVolTxtbox" type="number" style="width: 4em;" tabindex="2" id="sliderVolOutput">
</div>
</div>
You can set a negative start value, but the behaviour is unpredictable when you do so. If you want to make use of negative values, you'll need logic to update the value in #sliderVolOutput after the handle has been moved.
The moved.zf.slider event is triggered every time the handle is moved and you can use that fact to update the textbox value. This event is fired quite a few times, so you'll need to add additional code to get rid of the flickering (if it's bothersome).
I've provided some basic code that should get you started. If you have any questions, please let me know.
var target = document.getElementById("slidervol");
var options = {
"start": 0,
"end": 100,
"decimal": 0
};
var elem = new Foundation.Slider($(target), options);
var offset = 50;
$(target).on('moved.zf.slider', function() {
$('#sliderVolOutput').val(Number($('.slider-handle').attr('aria-valuenow')) - offset);
});
Another approach would be to use the mousemove.zf.slider event. This gets rid of the flicker, but the textbox value is only updated once you've stopped manipulating the slider:
$(target).on('mousemove.zf.slider', function() {
$('#sliderVolOutput').val(Number($('.slider-handle').attr('aria-valuenow')) - offset);
});
UPDATE:
In response to your additional query, I've had time to implement the required functionality (editing the value in the text box causing the slider to update) using a hidden control.
The slider-handle now targets the hidden control (aria-controls), which will always contain a positive value. The text box will contain the negative (computed) value. This is what the updated html looks like for the slider-handle:
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderVolOutputHidden"></span>
And this is the additional hidden input I've used:
<input type="hidden" id="sliderVolOutputHidden" value="0">
I've also added an input event for #sliderVolOutput that updates the value of the hidden input and triggers the change event. The change event is important, as without it, the handle will not update:
$('#sliderVolOutput').on('input', function() {
$('#sliderVolOutputHidden').val(Number($('#sliderVolOutput').val()) + offset);
$('#sliderVolOutputHidden').trigger('change');
});
Fiddle Demo
I get quite a result patching as follows foundation.js.
I can change values smoothly with the slider (with no flickering) but I can not decrement the textbox (aria-controls) below 0 since he event handler does not fire.
## -6953,13 +6953,14 ##
'id': id,
'max': this.options.end,
'min': this.options.start,
+ 'offset': this.options.offset,
'step': this.options.step
});
this.handles.eq(idx).attr({
'role': 'slider',
'aria-controls': id,
- 'aria-valuemax': this.options.end,
- 'aria-valuemin': this.options.start,
+ 'aria-valuemax': this.options.end + this.options.offset,
+ 'aria-valuemin': this.options.start + this.options.offset,
'aria-valuenow': idx === 0 ? this.options.initialStart : this.options.initialEnd,
'aria-orientation': this.options.vertical ? 'vertical' : 'horizontal',
'tabindex': 0
## -6978,8 +6979,8 ##
key: '_setValues',
value: function _setValues($handle, val) {
var idx = this.options.doubleSided ? this.handles.index($handle) : 0;
- this.inputs.eq(idx).val(val);
- $handle.attr('aria-valuenow', val);
+ this.inputs.eq(idx).val(val+this.options.offset);
+ $handle.attr('aria-valuenow', val+this.options.offset);
}
/**
## -7033,7 +7034,8 ##
} else {
//change event on input
value = this._adjustValue(null, val);
- hasVal = true;
+ value = value - this.options.offset;
+ hasVal = true;
}
this._setHandlePos($handle, value, hasVal);
## -7286,7 +7288,13 ##
* #option
* #example false
*/
- invertVertical: false
+ invertVertical: false,
+ /**
+ *
+ * #option
+ * #example 0
+ */
+ offset: 0
};
function percent(frac, num) {
Then, for instance I want to change my parameter "Audio Volume" from -24 to 24 so in js:
// Audio Volume
vartxt = GetParameter("AudioVolume") // get the value in some way
tval = parseFloat(vartxt);
document.DeviceConfig.AudioVolTxtbox.value = tval - 24; //change the textbox
var target = document.getElementById("slidervol");
var options = {
"start": 0,
"end": 48,
"decimal": 0,
"step": 1,
"offset": -24,
"initialStart": tval
};
var elem = new Foundation.Slider($(target), options);
At the moment the only problem I get is that I have to configure the input box as 'text', since if I set it as 'number' the spinner does not allow to go below the 0.
I pared down some odd behavior I was experiencing in SVG and I came up with this test case:
<circle r="10" />
<rect width="18" height="18" />
<polygon points="10,20 30,30 40,15 25,10" />
<script>
var svg = document.querySelector('svg'),
els = document.querySelectorAll('svg *');
for (var i=els.length;i--;){
var el = els[i];
el._dragXForm = el.transform.baseVal.appendItem(svg.createSVGTransform());
setInterval((function(el){
return function(){
var tx = el._dragXForm.matrix;
tx.e += Math.random()*2-1;
tx.f += Math.random()*2-1;
}
})(el),50);
}
</script>
In Safariv5 and Chromev18 on OS X the circle and polygon both jitter, but the rect does not. It does nothing. The SVGMatrix is getting a new value, but the appearance on screen is not updated. (In Firefox, it works as expected.)
If I change the script to remove _dragXForm like so:
for (var i=draggables.length;i--;){
var el = draggables[i];
el.transform.baseVal.appendItem(svg.createSVGTransform());
setInterval((function(el){
return function(){
var tx = el.transform.baseVal.getItem(0).matrix;
tx.e += Math.random()*2-1;
tx.f += Math.random()*2-1;
}
})(el),50);
}
…then the <rect> moves along with the others.
Besides seeming like an insane bug (how can this only affect a <rect>?!) I feel that this has not yet isolated the source of the bug.
What's the simplest possible code that can reproduce this odd behavior? (And if there's already a bug filed for this, I'd love to know about it.)
This code appears to be getting closer to the heart of the matter:
var svg = document.querySelector('svg'),
els = document.querySelectorAll('svg *');
for (var i=els.length;i--;){
var el = els[i],
tx = el.transform.baseVal.appendItem(svg.createSVGTransform());
console.log( el.tagName, tx===el.transform.baseVal.getItem(0) );
setTimeout((function(el,tx){
return function(){
console.log( el.tagName, tx===el.transform.baseVal.getItem(0) );
}
})(el,tx),1);
}
Output:
polygon true // The return value of appendItem is the same as the first item
rect true // The return value of appendItem is the same as the first item
circle true // The return value of appendItem is the same as the first item
polygon true // The returned value is STILL the same as the first item
rect false // The returned value is NO LONGER the same as the first item
circle true // The returned value is STILL the same as the first item
I'm using dojo toolkit. (version 1.6)
I'm unable to stop the fading effect at certain opacity (say 0.5)
Here is the code I'm using
var fadeArgs = {node: "disabled_div", duration: 3000};
dojo.style("disabled_div", "opacity", "0");
dojo.fadeIn(fadeArgs).play();
But the above code is fading the element's opacity from 0 to 1.
My requirement is to stop fading effect at 0.5 opacity.
Please help me out
Thanks in advance!
SuryaPavan
you may try like this:
var w = dojo.animateProperty({
node:"disabled_div",
duration: 3000,
properties: {
opacity: 0
},
onAnimate:function(a){
if(a.opacity <= .5)
w.stop();
}
})
OR
dojo.style("disabled_div", "opacity", "1");
var fadeArgs = {node: "disabled_div", duration: 3000,onAnimate:function(o){
if(o.opacity <= .5){
anim.stop()
}
}};
anim = dojo.fadeOut(fadeArgs);
anim.play();
You could use fadeTo from the DojoX extensions
I have a very simple question, but I do not know how to do that i can handle in AS script object identifier.
For example, I have a few pictures:
<mx:Image x="125" y="262" source="card/1.jpg" width="98" height="165" id="card1"/>
<mx:Image x="247" y="262" source="card/1.jpg" width="98" height="165" id="card2"/>
<mx:Image x="379" y="262" source="card/1.jpg" width="98" height="165" id="card3"/>
I need to give them a variety of sources taken from the array:
card1.source = "http://***/gallery/7/"+String(arrayOfNumber[0])+".jpg";
card2.source = "http://***/gallery/7/"+String(arrayOfNumber[1])+".jpg";
card3.source = "http://***/gallery/7/"+String(arrayOfNumber[2])+".jpg";
But this is the wrong decision and need the cycle:
for (var i:uint=0; i<=arrayOfNumber.lenght; i++){
card[i].source = "http://***/gallery/7/"+String(arrayOfNumber[i])+".jpg";
}
But that i must use instead of card[i]?
If you place all the images inside a container such as Group (flex 4.x) or Box (Flex 3), you could cycle through the children / elements of that container:
<fx:Script>
<![CDATA[
private var arrayOfNumber:Array = []; // Place your image file names here
private function loopThroughImages():void
{
var n:int = imageContainer.numElements;
for (var i:int = 0; i < n; i++)
{
Image(imageContainer.getElementAt(i)).source = "http://***/gallery/7/"+arrayOfNumber[i]+".jpg";
}
}
]]>
</fx:Script>
<s:Group id="imageContainer">
<mx:Image x="125" y="262" width="98" height="165"/>
<mx:Image x="247" y="262" width="98" height="165"/>
<mx:Image x="379" y="262" width="98" height="165"/>
<s:Group />
[Edit: Wow just realized I'm a year too late.]