Is there a component can toggle the gyroscope? I want to make a button to enable or disable the usage of the gyroscope. I've read the official documentation but find nothing about this.
I do not want to close it in WebVR mode. I want to set a button toggle gyroscope. When I close mobile sensor, I can use finger slide screen to change the perspective.
There was a pull request to A-Frame core to enable this feature, and I believe they determined to not add it. Instead it is best practice to enable this feature using a custom component.
Here is the pull request including commentary:
https://github.com/aframevr/aframe/pull/2585
Here is the code that accomplishes what you are looking for, you can use it to make a custom component in your project:
https://github.com/aframevr/aframe/pull/2585/files
Related
Is it possible to handle touchEvents with Vue3 without external library?
My need is that the element can be moved (drag and drop in another place) by touch. The elements themselves are rendered using v-for. I implemented mouse control without problems, but with touch I got stuck for a day!
I've found only one library for that: https://github.com/robinrodricks/vue3-touch-events
But I really can't understand where I have to put UDM module and how to execute installation steps like that: "You need to include the UMD script of this plugin and you do not need to register this plugin with vue.js."
I can't believe that such popular framework as Vue3 haven't native touch handlers, so I want to ask an advice.
Touch events are supported natively in Vue, in the same way that they are in JavaScript. But the dragging or swiping functionality, you will need to either build yourself, or use a third-party plugin (like hammer.js).
You can use touch events in a similar way to mouse up/ down. For example:
<MyComponent
#mousedown="startDrag(item)"
#mouseup="endDrag(item)"
#mousemove="startDrag(item)"
#touchstart="startDrag(item)"
#touchend="endDrag(item)"
#touchmove="endDrag(item)"
/>
I'm trying to access the refresh button in react-admin project. I tried using getElementsbyClassName it returns HTMLComponents Object but it isn't accessible i.e I can see the component on printing it to console but isn't accessible by code. Is there a way for me to disable this refresh button wherever I want?
I'm not sure the exact use case here, but you can create your own custom AppBar that renders essentially whatever you want: https://marmelab.com/react-admin/Theming.html#replacing-the-appbar.
also see this GitHub issue that mentions removing it entirely: https://github.com/marmelab/react-admin/issues/3383
Within your custom AppBar you could have some logic checks within your custom AppBar if you know ahead of time when you'll want it disabled (like on a certain page/component).
If you need it to be more dyanimcally disabled, you could probably have a very high-level context/state to control that as well..
**NOTE: I have built a custom AppBar before, but I haven't done any selective rendering or disabling within it. So, I can't guarantee that this is exactly correct, but it fits with other custom components I've built.
I have been developing a Vue project and something caught my attention today. I used checkboxes with some sytling (I use them as toggle switches) throughout the project and thanks to these elements, I show or hide some elements and components. Toggle elements control specific data within each component. When the data istrue, some elements are displayed on the page and when false, they are hidden. What I noticed today is a little interesting. There is probably a simple solution, but although I have been searching the internet for a while, I haven't found a solution yet.
Here is the thing;
Let's say I am at the About page of my project. I used my toggle switches and now some of my elements and some sub components are displaying in the About.vue. Then I go and visit my Services.vue page and showing and hiding some elements and sub components as well. By the way, almost all of these pages have forms and I save these forms to local storage. When I return to My About page from my Services page, I see that the elements I activated have been restored. In other words, each component welcomes me with its default state when it is returned from another component. What I want to see is, If I go and check some checkboxes to show some element, No matter how long I roam between other routes, I want those elements to remain visible or hidden when I come back. For example, a toggle element must be activated to write a username and password on a component. After activating the toggle element, the user types the username and password and clicks the Save button. Then he continues to browse many areas of the project and when he returns, he sees that the toggle element is inactive and the username and password are not entered. I don't want it to be that way. How do I fix this?
you can use vuex for solved this problem.
https://vuex.vuejs.org/
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension (opens new window)to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
I am currently using swiper wrapper for angular https://www.npmjs.com/package/ngx-swiper-wrapper,
so basically I want to differentiate between manual slide that user performed and my own app pre-selecting active slide.
Whenever i use setIndex method (presumably equivalent to goToSlide at swiper js),it trigger all kind of changeEvent which manual slide change would also trigger(transitionEnd, slideChange, etc).
Is there any way to change active slide without trigerring those event?
managed to do that by using function
setIndex(index, speed?, silent?) // Runs transition to slide with given index.
by setting silent to true (slideChangeTransitionENd) event wont be called.
There should be better documentation about this.
I am new to cesium so need some very basic help.
How can we swap the behavior of the mouse left button and right button without having to code the behavior ourselves?
Moreover, can someone give me a basic coding example to define our own mouse button event? I have tried to run the one from Sandcastle but it is not working at the moment, can't figure out the problem for now.
You don't need to use Cesium's mouse event system, you can just listen to the normal JavaScript mouse events outside of Cesium and react to them. The DOM element to listen to is the canvas, typically viewer.cesiumWidget.canvas.
Cesium's built-in event system is not easily configurable for now, that's an item on the wishlist. Part of the problem here is that the default behavior changes at runtime. For example, when the camera tracks or un-tracks an entity, the input event wiring gets rearranged on the fly, and customizations may be overwritten. Someday Cesium's event handlers will need to be rewritten to be configurable.
To extend what #emackey stated:
The general recommendation from the Cesium team is to use native JS events whenever possible. The event handlers within the Cesium library are there more for internal library use and plugin modules.
As for how to capture the mouse click/scroll/move events otherwise it would be helpful to have an example of what you tried so far. Though this is a good reference to read http://www.html5rocks.com/en/mobile/touchandmouse/