In the following scene, I'm trying to understand why after clicking the sphere to switch cameras and cursors (via.removeAttribute/.setAttribute) still seems to swap back even if I click outside the sphere--even though the scene inspector shows no cursor or raycaster on firstCursorEl to cause the ghost click event. The test scene's at http://codepen.io/anon/pen/GWJrXe, let me know if I'm missing something important! (jhsu mentioned needing to bind render-target-loaded to wait for a loaded canvas element if .removeAttribute('cursor') was called on-init, but I'm assuming that doesn't need to happen on-click.) Here's what the entity HTML given by the inspector looks like after a swap, if it helps:
<a-entity print-onenter="" id="firstCursorEl" mixin="avatarCursor"></a-entity>
<a-entity print-onenter="" mixin="avatarCursor" id="secondCursorEl" raycaster="" cursor=""></a-entity>
Where firstCursorEl is a child of the starter camera, and secondCursorEl a child of the camera we swap to. Since secondCursorEl's cursor/raycaster are aimed away from the swap-button-sphere (unless they're somehow out of sync with the camera gaze's direction?), and firstCursorEl seems to have no such components, how does it still swap back?
This issue was fixed by Don McCurdy: https://github.com/aframevr/aframe/pull/2397 to implement cursor remove handlers.
You can use this build: <script src="https://rawgit.com/aframevr/aframe/84c6431/dist/aframe-master.min.js"></script> to pull it in until 0.5.1 or 0.6.0 is out.
Related
Question
I'm working with Adobe Scene7 BasicZoomViewer and I'm looking for a way to tell the ZoomViewer to reset the zoom so that the user is no longer zoomed in on an image but instead will show the default "zoom" level.
What I've found
The closest thing I found to what I need is this reset property ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".
This looks close to something I need but it states that it will reset or preserve the aspect ratio when a new image has been inserted but I am not inserting new images.
Demo from Adobe
There is a button on the image that the API inserts into the page that resets the zoom level. Adobe provides a demo page that shows what I'm working with. If you look at the bottom left, the right-most button is the reset button. When clicked, it has to make some kind of API call and I need to figure out which one it is.
Edit
I've been able to find a minified version of the BasicZoomViewer and I am currently attempting to make sense of the code.
There is an event listener placed on the "Zoom Reset Button" that just simply calls a reset() method on line 274 in the uglified version of the file. Currently, I am trying to make sense of the file and figure out how to access this method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
I will be answering my own question. If someone finds a better way please feel free to answer as well.
tldr;
Create a variable to hold the instance of your s7viewers.BasicZoomViewer() and inside of that you can access the event handlers and much more.
Example of calling the reset zoom handler
// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
containerId: 's7viewer',
params: {
asset: assetUrl,
serverurl: serverUrl
})
// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()
Explanation
After digging through the minified code that was uglified I found an event listener on the s7zoomresetbutton DOM class name, or perhaps it's watching for the ID of that DOM element which is the same ID as the container div for your S7 BasicZoom Viewer plus some added text to make this ID unique. For example, if the container div is s7viewer then the reset zoom button will have an ID of s7viewer_zoomresetbutton.
Now, going through the code I found this event listener which let me know there must be some way to call the zoomReset() method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
In the code above, the value of c is this or in other words it's the instance of your S7 BasicViewerZoom and in my case I have multiple depending on how many images I need to zoom on.
When instantiating the s7viewers class you can then reference that instance later and access the event handlers on each button and other properties and methods.
From there it was just looking through the object returned from the instance and calling the handler for the reset button.
My VR experiment's interaction is based on clicking on objects. I'd like it to work on the desktop (with the mouse), on a Cardboard (with a gaze cursor), or with a 3 or 6dof controller (like for example the Oculus Go).
How do I get it to switch based on what's available?
Here's what I have now:
<a-scene antialias="true" cursor="rayOrigin:mouse">
<a-entity laser-controls="hand: right"></a-entity>
...</a-scene>
This works for desktop and OGO, but not on Cardboard. I believe I can add an <a-cursor> for a gaze cursor, but then it's there all the time - I only want it to show up when the user is in Cardboard.
Is this possible? How would I go about doing this? Do I perhaps need to write some javascript to make it work?
If you can have a <a-camera> entity, you can create a custom component, which will add a fuse cursor only on mobile devices.
You could even have a setup like this:
<a-camera>
<a-entity cursor-check></a-entity>
</a-camera>
and add the cursor to the empty entity whenever its needed.
Check whether you're on a mobile device :
AFRAME.registerComponent("cursor-check", {
....
if(!AFRAME.utils.device.isMobile()) return;
and add the cursor component when necessary
this.el.setAttribute("cursor", {
"fuse": "true",
"fuse-timeout": "500"
})
...
Check it out here.
As Nick has noted, there also are two utils which can help distinguish whether you're on a oculus go, or gear vr:
AFRAME.utils.device.isOculusGo ()
AFRAME.utils.device.isGearVr ()
maybe even checkHeadsetConnected () could be of help
I've been working with Quill for a short time and have been focused on getting collaborative editing working. So far it's going well and I have a fully working collaborative editor!
I want to show the selection and cursor position of other users, but I can't think how to properly approach this problem with Quill.
I essentially want to add markup to the rendered document, without adding any content to the actual document model. Is this possible? Where should I start?
You need to use "quill-cursors" package and then listen to selection-change event:
editor.on("selection-change", function (range, oldRange, source) {
console.log("Local cursor change: ", range);
});
Then broadcast this data to other remote users, and then render the remote cursor:
const cursors = editor.getModule("cursors");
cursors.createCursor(id, user.name, userColor);
cursors.moveCursor(id, cursorRange); // <== cursor data from previous step
cursors.toggleFlag(id, true);
In Quill 0.20, there was an example with multiple cursors working. The approach was a sibling absolutely positioned <div> that contained the cursors and synchronized with selection-change information from the editor. To not delay the 1.0 release this demo and feature was not updated with the new API but support is planned. You can try a similar approach in the meantime and of course the code is still available. You can also track the feature on Github Issues.
I have an a-image entity.
When I set look-at="[camera]", it does not point to the active camera.
When I set look-at="#camera" (which is the id of the active camera), it works just fine.
Does anyone know why it might not be working for [camera]? I have multiple cameras, but only one active at a time.
[camera] is a querySelector so when you do [camera] (which means any element with the camera attribute, which every camera has), you don’t have control of which camera will be selected.
If you’re switching between cameras and want to grab the active camera, you’d need to set a class or attribute on the active camera.
You can listen to the camera-set-active event:
document.querySelector('a-scene').addEventListener('camera-set-active', function (evt) {
// 1. Remove active class from all cameras.
// ...
// 2. Add active class to camera.
evt.detail.cameraEl.classList.add('active-camera');
});
For look-at, you can do look-at=".active-camera". Unfortunately, since the component currently won't detect changes to class, you'll need to refresh it. Fastest way is to detach (removeAttribute) and re-attach the component (setAttribute).
I am able to render a google map on a flex canvas. I create the map using the code below and then place markers on it in the onMapReady method (not shown)
var map:com.google.maps.Map=new com.google.maps.Map();
map.id="map";
map.key="bla bla";
_mapCanvas.addChild(map);
map.addEventListener(MapEvent.MAP_READY,onMapReady);
It all works fine. However, if I remove the map and then set _mapCanvas to null, then run exactly the same code again, the onMapReady event does not fire. It is weird, but once a map has been created and deleted, the onMapReady event never seems to fire again.
Anyone got any ideas?
Thanks.
I still don't know why this was happening, but I worked around the issue by creating the map as an application-level variable, only instantiating it once, and then adding and removing it from canvases as required. Not ideal, but at least I can now display and remove a map dynamically, even if it exists in memory between invocations.