I'm taking a screenshot as such
scene.setAttribute('screenshot',{width: 1024, height: 1024})
const imgData = scene.components.screenshot.getCanvas('perspective')
This works, but aftwards the scene is unresponsive and look controls no longer work on the camera.
Is there something that needs to be done to restore the camera?
Related
I am aware that aframe commonly uses one single scene only (except when using iframe) - However, I was wondering if it would be possible to have it show two different scenes and a slider that could show one scene on the left of the slider and the other scene in the right.
This is an example using ThreeJS:
https://codepen.io/looeee/pen/jpebjN
This code uses multiple scenes like this:
function render() {
renderer.setScissor( 0, 0, sliderPos, window.innerHeight );
renderer.render( sceneL, camera );
renderer.setScissor( sliderPos, 0, window.innerWidth, window.innerHeight );
renderer.render( sceneR, camera );
}
I have been trying to figure out solutions that could use aframe to make this happen, but I hit roadblocks every time... Before I go a full threejs route I thought I'd ask here and see if anyone has other ideas.
Thanks!
It can be done in THREEjs and Aframe is built on top, so the answer is that it can be done.
Here is the example for how it is done in THREEjs.
https://threejs.org/examples/webgl_multiple_views.html
I am looking for a way to load an AFrame Scene through the click on a thumb.
I am trying to use a picture slider, and every picture should have a 3d scene behind it. So if i click a picture in the slider, the aframe scene should pop up in the foreground, with a different sky texture for example.
I tried multiple ways, but nothing really works. I can load a new scene through a new window, but that's not a good way.
I would appreciate any help that could lead me on the right path. :) :D
Cheers, Max
Have an A-Frame scene in the background (or somewhere on the page) <a-scene embedded style="z-index: -1"></a-scene>. On the click of the picture, set the scene's z-index to the foreground and change whatever else you need in the scene to match the picture.
var aframeScene = AFRAME.scenes[0];
yourPic.addEventListener('click', function () {
aframeScene.style.zIndex = 9999;
aframeScene.querySelector('a-sky').setAttribute('src', 'newImage.jpg');
});
Create Spin Progress bar in Qt, I want to show progress bar like the one which appears while loading. Please Find Image
My code goes like this
QProgressBar *pgbar = new QProgressBar();
pgbar->resize(500,25);
pgbar->setOrientation(Qt::Horizontal);
pgbar->setRange(0,99);
pgbar->setValue(10);
pgbar->show();
installOnDevice(destinationSavePath);
pgbar->hide();
here installOnDevice(destinationSavePath); takes time to process. Currently I am showing Processbar, I dont want to show processbar. Can't I replace with some progress which shows loading image (Rotating) or something similar to that
Have a look at the Twitter Mobile example application. In the file demos/declarative/twitter/qml/twitter/TwitterCore/Loading.qml there is an implementation in QML of the exact thing you want to achieve:
import QtQuick 1.0
Image {
id: loading
source: "images/loading.png"
NumberAnimation on rotation {
from: 0
to: 360
running: loading.visible == true
loops: Animation.Infinite
duration: 900
}
}
Update 1 (reflecting the newly posted code):
Employing QML just for a spinning load indicator in your otherwise Qt Widgets based application seems overkill to me. I would use a QMovie in conjunction with a QLabel to display an animated GIF image containing the spinner:
QMovie* spinnerMovie = new QMovie(":/spinner.gif");
QLabel *spinnerLabel = new QLabel(this);
spinnerLabel->setMovie(spinnerMovie);
spinnerMovie->start();
You should also have a look at the documentation for the Qt Resource System to learn how to bundle images with your application and how to load them.
In order to change the cursor wou have to use the setCursor function or the setOverrideCursor in order to apply it to the application. You can construct any cursor you want using a QPixmap as constructor argument.
In order to achieve an animation effect you will need a QTimer. At every timer event you have to change the cursor's pixmap in order give the feel of animation.
Try Qml Busy Indicator, implemented in pure C++:
http://qt-project.org/wiki/Busy-Indicator-for-QML
I am using QGraphicsScene and View in Qt/PySide and have troubles using scaling the view - zoomin in.
I have a very simple scene:
scene = QtGui.QGraphicsScene()
scene.addText("hello!")
scene.addRect(0, 0, 50, 20)
view = QtGui.QGraphicsView(parent)
view.setScene(scene)
What I see is OK. When I zoom in using view.scale(factor, factor) and look at the lower left corner, it still is OK.
... but when I zoom even closer, it gets broken. Rectangle is no more rectangle and I can see a diagonal line while the bottom line is missing.
What is wrong with my code? Or is it error in Qt library? Does it happen also in Qt with C++.
Hi am making a small HTML5 canvas demo.
I initiated the canvas using modernizer from O'Reilly's HTML5 text.
This is for iPad so my canvas is 1024 by 768.
I then load in a background image in my DrawScreen function.
var backgroundImage = new Image();
backgroundImage.src = "images/background.jpg";
backgroundImage.onload = function(){
context.drawImage(backgroundImage,0,0);
}
I want to add text to this then. So I do:
function drawText(){
context.fillStyle ="gray";
context.font = "28px Helvetica";
context.fillText(message, 260, 700);
}
I then call both functions:
DrawScreen();
DrawText();
However my background image totally over writes my text. Or is on top of it. If I disable DrawScreen(); I can see the text. Changing the function order doesn't make a differnce...
How to do this? I feel so stupid that am stuck on something that seems so elementary.
Thanks
The problem is that your image is being drawn after -- and therefore on top of -- your text. This is because of the time it takes the image to load. Basically, what's happening is this:
You call your DrawScreen function
You start loading your background image by assigning the src attribute
You assign the onload() handler to fire once the image has finished loading.
DrawScreen exits, having completed all its work
You call DrawText, which immediately draws the text
At some point later, the image finishes loading, fires the onload() event, and you draw the background image.
I'd suggest restructuring your code so that all the drawing is kicked off by the successful loading of the image. That way, nothing asynchronous will be going on, and the image will be drawn, followed by the text.
Here's a quick example, on jsFiddle.