Rotation on mobile - aframe

I am trying to find a way to rotate around my own axis on mobile with A-frame. Maybe I am asking something complete strange or it should work from default?
Using the default demo # https://aframe.io/examples/showcase/helloworld/ I expect that I can change my looking angle horizontally ( left right ) and Vertically ( up down). For me only top down works, and have to drag left and right with my finger.

Related

how to enable horizontal scrolling in atom editor using keystrokes?

I have long lines of code. But i don't want to use soft wraps because it breaks the nice formatting - and there isn't enough space on my screen anyway.
I want to scroll horizontally - left or right based on keystrokes for example:
ctrl + right arrow/ ctrl + left arrow
What is the command for horizontal scrolling?
Or at least be able to press the scroll wheel of the mouse and drag left or right.. like it's possible in the browser sometimes.
Right now i do it with the horizontal bar from the bottom of the editor. It's soo time consuming. Thank you:)
Found it! It's actually very simple: use shift + scroll wheel.
Couldn't find a keyboard-only solution yet.

How do you calculate what side of the screen a div is pointing to when 3D transforms are used?

I have asked this before but my math is so bad I still don't understand. I need to know what side of the screen* (top, left, bottom, right) the arrow is pointing to so I can handle dragging activity inside the divs.
This fiddle (code is a mess and it only works in safari/chrome) illustrates the problem. To be clear, the calculation for where the arrow points should come from the exact center of the cube, not the arrow itself. If you can offer some clues about the math I'll do the work and post it here.
*"Side of the screen" means, what angle it is or what hour it would be pointing to if the screen is a clock.
transform: rotateX(ndeg) rotateY(ndeg) rotateZ(ndeg);
In this example, the arrow is pointing between 4 o'clock and 5 o'clock.

Resizing main window: how do I know which side is used for resizing?

When I resize a window, I can do so using the top,bottom,left or right sides or top-right,top-left,bottom-right or bottom-left corners.
Is there a way to know which one is used when I'm resizing?
I don't know if there is an elegant solution because different operating systems handle borders differently.
My suggestion is
to compute the difference between the current and previous window size each time it is drawn
Get the mouse cursor's position.
If the window X changes, the border used is probably the left or right -- whichever the mouse cursor is closest to. If the Y changes, probably the top or bottom border the cursor is closest to.
If both change, the corner the mouse cursor is closest to is probably it.
A few corner cases may come up. For example, a window can be resized on some systems using the keyboard. It can potentially also be resized programatically, like when the user changes to a resolution too low to contain your window. These things can be handled in most cases by detecting of the mouse button is clicked while the resize is taking place.
Also, it is possible to resize just the width or height from the corner. In these cases, you may have to choose a threshold for mouse distance from corner that would decide whether it is actually at a corner.

how to make a DIV snapping to a grid, via CSS?

I'm trying to figure out how to have a DIV column snapping to some fixed-size grid, via CSS.
Here's the test page I'm working on: http://mapofemergence.com/test/MoEv2/
What I'm trying to get, is the right div (the green one) someway snapping to the background grid quads: when resizing the browser window, the red quads should distribute in the middle area, while the green column should "fill" the remaining area on the right side of the page, and yet remaining always aligned (on the left) with the grid.
Basically, being a the grid's quad size, the right green div should have a variable width, equal to or greater than a, and anyway minor than 2a (in which case it should set back to a width of a, while having one more red quad moving from the lower row to the upper one).
here's an image to get a better idea:
(sorry, my reputation doesn't allow to hyperlink)
I'm not really sure this can be done via CSS, but I'm sure that some of you can help finding some solution or workaround. I wouldn't use javascript, if possible.
Thanks for your help,
s
Unfortunately HTML/CSS don't have features necessary to do what you want. You can only achieve it by using JavaScript.
You should bind a function to window resize event which will set green's div width to desirable value. In jQuery it should look something like that:
$(window).resize(function() {
$("#rx").width(
parseInt($("#rx").css("min-width").slice(0, -2)) + (
($(window).width() - $("#lx").width() - $("#rx").css("min-width").slice(0, -2)) % $(".module:first").outerWidth(true)
)
);
});
Note that this code can be easily optimised but I wanted to make it as simple as possible.

How to scale an widget in specified in qt

I have divided my main screen in 4 areas as border-layout as center,right,left and bottom. The right, left and bottom areas are small and contain only buttons. My center area has to display the different widgets and forms depending on the buttons pressed in right/left/bottom areas.
Can anybody suggest how I can design my forms or widgets so that when I show the widget in the center area, it will fit into the center area and all the items inside this will be scaled rationally.
Please refer to the attached image file for a better idea.
If my explanation is not clear please let me know I will try better.
Looks like you already have a decent start. If you only have icons, typically icons won't be able to expand much so you will want your left,bottom and right containers to be non-expanding.
The center container (most likely a QStackedWidget in your case) will be expanding both horizontally and vertically.
You will also need to add spacers at the bottom of left area and right area.
The bottom area can also use spacers on both sides.
In short
Bottom area: sizePolicy: Preferred/Minimum, maximumSize: inf/40
Left area: sizePolicy: Minimum/Preferred, maximumSize: 40/inf
Right area: sizePolicy: Minimum/Preferred, maximumSize: 40/inf
Center area: sizePolicy: Preferred/Preferred, maximumSize: inf/inf
Here is what you can do with drag and drop within QtDesigner
Here is what it looks like
Here is what it will look like expanded. Notice that although the main area is bigger, the buttons sides remain the same.

Resources