when i enter the Vr-Mode on mobile you get an cursor to interact. Now my Problem the cursor is disorted. When i move the lenses of my vr-glasses i can get the cursor to be one but then my scene isn´t right anymore. Here my camera with my cursor:
<!--------camera---------->
<a-entity rotation="0 90 0">
<a-camera user-height="0" wasd-controls-enabled="false" look-controls>
<a-cursor id="curseid" visible="false" opacity="0" fuse="true" fusetimeout="4000"
position="0 0 -0.1"
raycaster="objects: .clickable"
geometry="primitive: ring;
radiusInner: 0.002;
radiusOuter: 0.003"
material="color: red; shader: flat">
<a-animation attribute="scale"
to="3 3 3"
dur="2000"
begin="cursor-fusing"
fill="backwards"
easing="linear">
</a-animation>
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
<a-animation attribute="material.opacity" begin="fade_cursor" dur="2000" from="0" to="1"></a-animation>
</a-cursor>
<a-entity id="redcircle" visible="false" position="0 0 -0.1"
geometry="primitive: ring;
radiusInner: 0.007;
radiusOuter: 0.0077"
material="color: red; opacity: 0; shader: flat">
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
<a-animation attribute="material.opacity" begin="fade_circle" dur="2000" from="0" to="0.25"></a-animation></a-entity>
</a-camera>
</a-entity>
cursor is way to close on the camera i set it on z: -1 and now its fine
Related
I have the next error on my component
SassError: Invalid CSS after "... $color in meta": expected expression (e.g. 1px, bold), was ".keywords($args) {"
on line 5 of src/assets/scss/components/_dMetricCircle.scss
from line 101 of src/components/UI/DMetricCircle.vue
#each $name, $color in meta.keywords($args) {
and this is my _dMetricCircle.scss
#use "sass:meta";
#mixin test-mixin($args...){
#each $name, $color in meta.keywords($args) {
.#{$name} {
background-color: map-get($color, "bgcolor");
border: 1px solid map-get($color, "border");
#if map-has-key($color, "pcolor") {
&.percent{
background: linear-gradient(var(--v), map-get($color, "pcolor") 50%, transparent 0) center/calc(var(--s) * 100%) border-box,
linear-gradient(var(--v), map-get($color, "bgcolor") 50%, transparent 0) center/calc(100% - var(--s) * 100%) border-box,
linear-gradient(to right, map-get($color, "pcolor") 50%, map-get($color, "bgcolor") 0) border-box;
}
}
}
}
}
and on my DMetricCircle component, I import and use the mixin like this
#include test-mixin(
$default: ("bgcolor": $gray-lighten-45, "border": $gray-lighten-30),
$success: ("bgcolor": $success-lighten-50, "border": $success-lighten-20, "pcolor": $gray-lighten-45),)
So, I don't know if sass-loader doesn't supper the use of meta or I'm doing a wrong use of sass compiler
"node-sass": "4.14.1","sass-loader": "10.0.2"
I have this css rule. And I generate PDF from html via puppeteer or jsreports.
div {
-webkit-box-shadow: 0 0 0 0.1rem #f1f2f9;
box-shadow: 0 0 0 0.1rem #f1f2f9;
}
And for some elements box-shadow not seen correct.
How can I solve this?
When you add filter opacity 1, it fixes that problem.
div {
-webkit-box-shadow: 0 0 0 0.1rem #f1f2f9;
box-shadow: 0 0 0 0.1rem #f1f2f9;
-webkit-filter: opacity(1);
}
if it hides your inner elements, add filter opacity 1 to them too.
I am trying to make a dial control by following Jerry's tutorial. Because the method GetAngle is based on the position of the touch point, the calculated angle is always going to be equal or less than 360°. But what I need is if I spin the knot two and a half circles, I want to get 900° (360°*2 + 180°).
I know that the e.Cumulative.Rotation (e is ManipulationDeltaRoutedEventArgs) can give me the total rotation angle, but looks like the rotation can only be triggered by two fingers.
Am I missing some easy solution here??
I've spend a while on this and it turned out to be a nice program to play with (thanks to Jerry for great blog post). At the end I've ended with little different solution - little below.
If you need to count the whole circles, then you need to remember the moment when the angle changes from 360 to 0 and remember that there was a full circle. In my example I'm remembering last quadrant and this helps me to handle the issue. The main code looks like this:
private Quadrants currentQuadrant = Quadrants.I;
private Quadrants lastQuadrant = Quadrants.I;
private double lastAngle = 0;
public enum Quadrants { I, IV, III, II } // counterclockwise quadrants
private double CheckAngle(Point touchPoint, Size bounds)
{
// find point position relative to bounds
double valX = touchPoint.X - (bounds.Width / 2d);
double valY = (bounds.Height / 2d) - touchPoint.Y;
// determine the quadrant and save it
currentQuadrant = (valX >= 0) ?
(valY >= 0) ? Quadrants.I : Quadrants.IV :
(valY >= 0) ? Quadrants.II : Quadrants.III;
double quadrantAngle = Math.Atan(valX / valY) * (180 / Math.PI); // calculate angle within quadrant
return currentQuadrant == Quadrants.II ? 360 + quadrantAngle :
currentQuadrant != Quadrants.I ? 180 + quadrantAngle : quadrantAngle;
}
private void Grid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
double currentAngle = CheckAngle(e.Position, this.RenderSize);
if (Math.Abs(lastAngle - currentAngle) < 1) return; // don't update UI always - performance
if (currentQuadrant == Quadrants.I && lastQuadrant == Quadrants.II) // check for full circle
{ spinNumber++; RaiseProperty("SpinNumber"); }
else if ((currentQuadrant > lastQuadrant + 1)) return; // check if proper movement
// update quadrants and Angle
lastQuadrant = currentQuadrant;
Angle = lastAngle = currentAngle;
}
private void Grid_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
// reset all things
Angle = lastAngle = spinNumber =0;
currentQuadrant = lastQuadrant = Quadrants.I;
}
and some XAML part:
<Grid>
<Grid ManipulationMode="All" ManipulationDelta="Grid_ManipulationDelta" ManipulationCompleted="Grid_ManipulationCompleted">
<Ellipse Width="300" Height="300" Fill="Red"/>
<Path Fill="Green" Data="M 0 0 L 50 0 L 100 150 L 0 150 L 50 0 Z" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<RotateTransform Angle="{Binding Angle}"/>
</Path.RenderTransform>
</Path>
</Grid>
<TextBlock Text="{Binding AngleTxt}" VerticalAlignment="Bottom" Margin="0,0,0,50" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding SpinNumber}" VerticalAlignment="Bottom" Margin="0,0,0,25" HorizontalAlignment="Center"/>
</Grid>
Note that this will work if you move your finger starting from first quadrant in clockwise direction. It also needs some more improvements, like handling the case when you move counterclockwise, especially change from 0 to 360 degrees.
I've created a .smartMargin() mixin for LESS CSS to be used in responsive design LESS.
I'm sharing it here for the benefit of others and also because I'm curious if there's any way to make it more efficient.
Idea
The mixin is designed to be called from within another mixin that represents a responsive design breakpoint. The idea is that you may want to override top, left, bottom, right margins individually by overriding one or more margins in each successive breakpoint.
In main mixin I just want one parameter for #videoMargin as opposed to #videoMarginLeft, #videoMarginRight etc so that's why I've called it 'smartMargin'.
Usage
In my main file I define a breakpoint like this, and then call this mixin several times:
.breakpoint(#width, #color, #labelsSize, #videoMargin)
{
video
{
.smartMargin(#videoMargin);
}
}
.breakPoint(10em, red, 3em, 1em auto 1em auto);
.breakPoint(10em, green, 3em, 2em unset unset unset);
.breakPoint(20em, blue, 3em, unset 3em unset unset);
Output css
So for a given value of #videoMargin here's the output css generated
generated css
-------------
.smartMargin(3em); margin: 3em;
.smartMargin(3em 1em 2em 4em); margin: 3em 1em 2em 4em;
.smartMargin(3em unset unset unset); margin-top: 3em;
.smartMargin(3em unset unset 4em); margin-top: 3em;
margin-right: 3em;
Implementation
The mixin is as follows. It works well but it just seems a little clumsy in places and you need to provide either 4 or 1 parameters. If anybody can optimize this I'd be very interested to see.
.smartMargin(#margin) when (length(#margin) = 4)
{
._smartMargin() when (extract(#margin, 4) = unset), (extract(#margin, 3) = unset), (extract(#margin, 2) = unset), (extract(#margin, 1) = unset)
{
.marginComponent(#name, #value)
{
& when not (#value = unset)
{
#{name}: #value;
}
}
.marginComponent(margin-top, extract(#margin, 1));
.marginComponent(margin-right, extract(#margin, 2));
.marginComponent(margin-bottom, extract(#margin, 3));
.marginComponent(margin-left, extract(#margin, 4));
}
._smartMargin() when (default())
{
margin: #margin;
}
._smartMargin();
}
.smartMargin(#margin) when (default())
{
& when not (#margin = ~'') and not (#margin = unset)
{
margin: #margin;
}
}
You could possibly rewrite it to something like:
.smartMargin(#margin) when (isem(#margin)),(isem(extract(#margin,1))) and (isem(extract(#margin,2))) and (isem(extract(#margin,3))) and (isem(extract(#margin,4))) {
margin: #margin;
}
.smartMargin(#margin) when (default()) and (4 = length(#margin)) {
#positions: top, right, bottom, left;
.setmargin(#position,#margin) when (isem(#margin)){
margin-#{position}: #margin;
}
.setmargins(#i:1) when (#i <= 4){
.setmargin(extract(#positions,#i);extract(#margin,#i));
.setmargins((#i + 1));
}
.setmargins();
}
But in the first place i don't think there is something wrong with your code. Personally is should consider the use of unset. I think you should use the initial keyword or even 0 in stead of unset. This enables you to do the following:
.smartMargin(#margin){
margin: #margin;
}
.one{
.smartMargin(3em);
}
.two{
.smartMargin(3em 1em 2em 4em);
}
.three{
.smartMargin(3em 0 0 0);
}
.four{
.smartMargin(3em 0 0 4em);
}
Or consider to use Passing Rulesets to Mixins, than you can use something like that shown below:
.breakPoint(#width, #color, #labelsSize, #videoMargin)
{
video
{
#videoMargin();
}
}
.breakPoint(10em, red, 3em, {margin: 1em auto 1em auto;});
.breakPoint(10em, red, 3em, {margin: 1em auto;});
.breakPoint(10em, green, 3em, {margin: 2em 0 0 0;});
.breakPoint(10em, green, 3em, {margin: 2em 0 0;});
.breakPoint(10em, green, 3em, {margin-top: 2em;});
.breakPoint(20em, blue, 3em, {margin: 0 3em 0 0;});
.breakPoint(20em, blue, 3em, {margin-right: 3em;});
I'm trying to use CSS3 border-image for a simple button design: the left slice of the image should be the left border of the text, the right slice the right border, and the middle slice should be repeated (or stretched - it does not matter) as background. I need a fallback for browsers not supporting border-image - just using the middle slice as a background, without edges would be acceptable. The problem is, if I do this:
.button {
border: solid 1px white;
border-size: 0 5px;
background: ('button-slice.png') repeat;
border-image: url('button.png') 0 5 0 5 fill;
-moz-border-image: url('button.png') 0 5 0 5;
/* repeat for other vendor prefixes */
}
the image from the background property will overlap the borders and mess up the button for browsers which support border-image.
Is there a lightweight way of solving this problem (whithout introducing modernizr or similar javascript checks)?
change the border-image 0 5 0 5 to 1 1 5 1 :
border-image: url('button.png') 1 1 5 1 fill;
-moz-border-image: url('button.png') 1 1 5 1;
border-image generator online
border-image is tricky for fallbacks. Doing...
.button {
border: solid 1px white;
border-size: 0 5px;
background: ('button-slice.png') repeat;
background: rgba(0,0,0,0);
border-image: url('button.png') 0 5 0 5 fill;
-moz-border-image: url('button.png') 0 5 0 5;
/* repeat for other vendor prefixes */
}
Should work for all browsers except IE9.
Since you only have a left and right border, I would suggest using pseudo-elements...
.button {
border: solid 1px white;
background: ('button-slice.png') repeat;
position: relative;
}
.button:before, .button:after {
content: '';
width: 5px;
position: absolute;
height: 100%;
background: transparent url('button.png') 0 0 no-repeat;
top: 0;
}
.button:before {left: -5px;}
.button:after {right: -5px;}
This technique should show nice buttons in all modern browsers plus IE8. Older browsers fallback without the edges.
It seems that new versions of FF support both border-image parameters and one override another.
Try reversing the order of those lines as so:
-moz-border-image: url('button.png') 0 5 0 5;
border-image: url('button.png') 0 5 0 5 fill;
In this way, browsers that support both parameters and override one with the later will take the version with the fill.