A-sky a-frame rounded borders - aframe

I'm setting an a-sky element with an image 360:
<a-sky id="sky_salon_izq" src="#salon_izq"></a-sky>
The img show cool in normal mode:
normal mode img
But i have problems when enter in vr mode, the walls appears rounded in extremes:
vr mode img
In vr mode, if i see to the top, the rounded walls are seeing well, but they rounded when i see from top to bottom.
i'm playing with the options in aframe sky, with no results:
aframe sky component
¿any suggestions?
thanks.

That's expected image distortion. It should look straight when viewed through the lenses of a headset (Cardboard, Rift, Quest...)

Related

A-Frame Canvas texture default color white in VR-mode

I am applying a canvas as a texture to a plane. And it looks fine (The background is white by default) if I am displaying it within a browser itself.
But as I change to Virtual Reality Mode the background of the canvas is changing to black.
I know that i can place a white rect to have a white background, but this is not feasible due to performance issues.
Are there any other solutions to tackle this problems?
Thanks!
Try filling in the canvas as white (fillRect), or adding a background to the scene itself (<a-sky color="#FFF">). Let me know if that works, or provide a JSFiddle for us to play around.

Inkscape Icon view: half pixel issue

I made a 24×24px square in Inkscape. I don’t understand why does the 24×24 icon view shows me a square with a gray pixel at its bottom? Any idea?
I found the solution: My page’s size was the default A4 and was in millimetres. It should be set in pixels!

How to make a round WKInterfaceButton in watchkit?

iOS can use layer.cornerRadius to make a round UIButton.
Does WKInterfaceButton have this property?
If not, how can I make a round WKInterfaceButton in WatchKit.
If you put an image inside a group, you can then set the radius of the group. This crops the image into a circle. In the picture below, I have:
Group (radius 56)
Group (radius 52)
Image (a square image)
While this example is with an image, you can use the same technique for a button. Previously the dog was clickable as a button so this is doable.
WKInterfaceButton does not have a corner radius property. You can make a circular button by setting a circular image as the button's background image. You can generate the image in code doing something like this: Draw a simple circle uiimage
You don't need an image to make WKInterfaceButton rounded. Instead:
Go to Attributes inspector for the button, and select content type: Group
Inside the button find the group and set its corner radius to whatever you need.
Scroll down the inspector and set both fixed Width and Height to the value equal to the radius doubled. Here you go
You can put whatever you want inside the button, for example a text label. This way you also can make oval buttons.

Creating alert icon with shadow in CSS

i am trying to create the following image using css.... so far i've got this after googling a bit http://jsfiddle.net/w9Zgc/ and i want to make the following shape..
is there any way this can be done... any help would be appreciated.. oh and i would like the shadow to be like the one here... http://jsfiddle.net/w9Zgc/
So I managed to create an icon that renders more or less the same in all current browsers. I had to use an extra useless span, unfortunately.
http://codepen.io/myajouri/full/nJDzl
The triangle is made of two parts:
the upper (triangular) part is a transformed (skewed and rotated) square with rounded corners.
the bottom of the triangle is the bottom part of a rectangle with rounded corners.
Both parts are cut and joint at certain places to form the triangular shape with rounded corners and shadows.

Removing the gap between a firefox toolbarbutton and the dropdown marker

I have a toolbarbutton of type menu-button which is working perfectly in my Firefox extension, however it's not styled quiet as I'd like.
There is a gap with an outline between the buttpon image and the dropdown marker arrow (the red arrow shows the outlined gap I'm referring to - the outline is part of the problem - and you can also see the AdBlock Plus button which does not have this problem).
Also, when you hover over the image/button a shaded grey background appears.
I'd like to remove the gap (AdBlock Plus manages this with their toolbar button but I haven't figured out how) and also remove the shading (I hava hover image defined for the button which should be sufficient to indicate that you are in the click-zone).
Can anyone give me any pointers? It seems to be something to do with the following two classes: toolbarbutton-1 and chromeclass-toolbar-additional
Thanks,
FM
The gap is because the type is "menu-button", and ADP button type is "menu". The gap style is depend on the theme you are using.
The image problem, how do you setup the image? In my case, it work fine to setup with
button.style.listStyleImage = 'url("chrome://referrercontrol/skin/icon24.png");'

Resources