I don't know why, but sometimes when multiple users connected they spawn in a different position which I didn't specify anywhere in my code.
<a-entity >
<a-entity
id="avatar"
networked="template:#avatar-template;attachTemplateToLocal:false;"
movement-controls="constrainToNavMesh: true"
spawn-in-circle="radius:3"
position="-15 0.770 25"
>
<a-entity
class="cam"
networked="template:#head-template;attachTemplateToLocal:false;"
camera="active: true"
position="0 2.5 0"
look-controls
>
<a-sphere
class="head"
id="local-avatar"
visible="true"
random-color
></a-sphere>
</a-entity>
</a-entity>
</a-entity>
This is the code I've written for the networked entity. I've given position="-15 0.770 25", but camera is spawning in another position. Which ruins all the things like speed, constraints.
<script>
NAF.schemas.getComponentsOriginal = NAF.schemas.getComponents;
NAF.schemas.getComponents = (template) => {
if (!NAF.schemas.hasTemplate("#head-template")) {
NAF.schemas.add({
template: "#head-template",
components: [
"position",
"rotation",
{
selector: ".head",
component: "material",
property: "color",
},
],
});
}
const components = NAF.schemas.getComponentsOriginal(template);
return components;
};
</script>
This for registering the entity in a-frame.
Related
I'm trying to have different text colors for my breadcrumbs based on a property but I can't figure out how to apply those colors anywhere. Can't add a color or class in the items either.
breadcrumbItems() {
return [
{
text: this.$t("receiving.breadcrumbs.step1"),
disabled: this.item.Status !== "STEP1"
},
{
text: this.$t("receiving.breadcrumbs.step2"),
disabled: this.item.Status !== "STEP2"
},
{
text: this.$t("receiving.breadcrumbs.step3"),
disabled: this.item.Status !== "STEP3"
}
];
}
<v-breadcrumbs :items="breadcrumbItems" class="breadStyle">
<template v-slot:divider>
<v-icon size="25">mdi-forward</v-icon>
</template>
</v-breadcrumbs>
Looking at the API for v-breadcrumbs: https://vuetifyjs.com/en/api/v-breadcrumbs-item/ it doesn't provide a property "color" or something similar, but there is a slot, so you can pass any kind of components in it.
You can create a <span> and customize its color and its style depending on the items:
<template>
<v-breadcrumbs :items="items">
<template v-slot:divider>
<v-icon size="25">mdi-forward</v-icon>
</template>
<template v-slot:item="{ item }">
<v-breadcrumbs-item :disabled="item.disabled">
<span :style="`color: ${item.color}`">
{{ item.text.toUpperCase() }}
</span>
</v-breadcrumbs-item>
</template>
</v-breadcrumbs>
</template>
<script>
export default {
data: () => ({
items: [
{
text: "Dashboard",
disabled: false,
color: "green",
},
{
text: "Link 1",
disabled: false,
color: "blue",
},
{
text: "Link 2",
disabled: true,
color: "red",
},
],
}),
};
</script>
I've found that the deep selector (https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) often helps with styling Vuetify components. I added this to my components scoped CSS and the colours work just fine for links:
.v-breadcrumbs >>> a {
color: purple;
}
I found the relevant tag by looking through the Elements-tab under Inspect (in Chrome).
I don't know if this is the best solution for your specific situation, but figured I'd add this for anyone with a simpler use case.
I am trying to load topics (just string values) from a backend and display them in the ListPicker. However the ListPicker won't update it's items which should be displayed.
The code is as follows:
<template>
<Page>
<ActionBar title="Create Challenge" icon="">
<NavigationButton text="Back" android.systemIcon="ic_menu_back" #tap="goBack" />
</ActionBar>
<StackLayout>
<Label text="TOPIC" class="fab lblSubTitle"/>
<ListPicker :items="topics" v-model="selectedItem" />
<Button text="check" #tap="checkIt" />
</StackLayout>
</Page>
</template>
<script>
import {ObservableArray} from 'tns-core-modules/data/observable-array';
import {FirebaseService} from '../../services/firebase-service';
export default {
data() {
return {
selectedItem: 0,
topics: new ObservableArray(["some", "hardcoded", "items"])
};
},
methods: {
goBack() {
this.$navigateBack();
},
checkIt() {
this.topics.push("new item");
}
},
created() {
console.log("Create Challenge - Loading Topics")
// Fetch additional items from the Firebase DB
FirebaseService.fetchTopics().then(result => {
result.forEach(topic => {
this.topics.push(topic);
});
});
}
}
</script>
<style scoped>
.lblSubTitle {
font-size: 15;
margin: 10dp;
color: red;
}
</style>
So the FirebaseService.fetchTopics() returns an array of strings. This works perfektly fine and adds the received values to the ObserveableArray topics.
However the ListPicker only shows the hardcoded values. Not the dynamically added ones. Also the checkIt() method won't update the view.
I have tried to change topics to a conventional array with no effect.
Link to the Playground
NativeScript Version: 6.5.0
Android Device: Pixel 2 - Android 9
ListPicker doesn't listen to changes on ObservableArray. You must use a simple Array and mutate the changes
this.topics = [...this.topics, "new item"];
So I am setting the image source and width dynamically in my template. The problem I see is that it sets the width to 0.
The template looks like:
<img src="{{item.msg}}" width="{{item.width}}" style="float:right" *ngIf="item.templateType == 'image'" />{{item.width}}
The value is passed as below from .ts
this.items.push(new ImageMessage('http://someimage.png', '100%'));
What I see is that it does not display the image but prints the value of item.width correctly. Looking into inspector it shows the width is set to 0 which explains why image is not appearing.
However, I am failing to understand why the width is getting set to 0 in img tag.
Please help.
Thanks.
You can set the width as a percentage using one-way binding syntax [style.width.%] targeting the style attribute binding of an element like <img /> in your example. HTML5 does require that the width property is in pixels, so using the [style.width.%] attribute binding would allow you to set the width as a percentage.
You're ImageMssage object would need to have the percentage '%' character removed from the width value of the ImageMessage object to make this work. With this syntax, it's flexible to work with either strings or numbers. Either '100' or 100 would work.
import {Component, NgModule} from '#angular/core'
import {BrowserModule} from '#angular/platform-browser'
import {CommonModule} from '#angular/common';
#Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<div *ngFor="let item of items">
<img [src]="item.msg" [style.width.%]="item.width" style="float:right;" />
</div>
</div>
`,
})
export class App {
name:string;
items: any[];
constructor() {
this.items = [
{ msg: 'http://placehold.it/800', width: '100' },
{ msg: 'http://placehold.it/800', width: '75' },
{ msg: 'http://placehold.it/800', width: 50 },
{ msg: 'http://placehold.it/800', width: '25' }
];
}
}
#NgModule({
imports: [ BrowserModule, CommonModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
If you want to set the pixels, you can use the following:
<img [src]="item.msg" [style.width.px]="item.width" ... />{{item.width}}px
Here is a plunker demonstrating the functionality.
Hopefully this helps!
I think it may set the width to 0 because you have have 100% in single quotation marks. As in { width: '100%' } try removing the quotation marks to produce { width: 100% }. This may also explain why it prints the value of item.width.
I want to animate in and out my components when the active router link changes. How do I write the code the animation code so that when the router changes, a component fades out then another fades in?
The code that I've been trying is the following.
#Component({
selector: 'app-component',
templateUrl: './component.component.html',
animations: [trigger(
'openClose',
[
transition(":enter", [
style({ opacity: 0 }),
animate('2000ms', style({ opacity: 1 }))
]),
transition(":leave", [
animate('2000ms', style({ opacity: 0 }))
])
])]
})
But I think I got the concept wrong, as I'm trying to use that piece of code in at least 2 components but none of them is fading in or out.
Is this possible to do with this function or am i tackling the issue with a wrong manner?
Example with Angular 4
Here's how I implemented a fade in animation on my home component route
import { Component } from '#angular/core';
import { fadeInAnimation } from '../_animations/index';
#Component({
moduleId: module.id.toString(),
templateUrl: 'home.component.html',
animations: [fadeInAnimation],
host: { '[#fadeInAnimation]': '' }
})
export class HomeComponent {
}
This is the animation defined in a separate file
import { trigger, state, animate, transition, style } from '#angular/animations';
export const fadeInAnimation =
trigger('fadeInAnimation', [
// route 'enter' transition
transition(':enter', [
// styles at start of transition
style({ opacity: 0 }),
// animation and styles at end of transition
animate('.3s', style({ opacity: 1 }))
]),
]);
For other animations and a live demo you can check out this post
Your code seems correct to me, you just need to bind the animation to a component. There are two ways:
Add it to your template, for example to a div:
<div class="container" [#openClose]="'true'">
...
</div>
Or directly apply it to your host component (<app-component>):
#Component({
selector: 'app-component',
templateUrl: './component.component.html',
animations: [trigger(
'openClose',
[
transition(":enter", [
style({ opacity: 0 }),
animate('2000ms', style({ opacity: 1 }))
]),
transition(":leave", [
animate('2000ms', style({ opacity: 0 }))
])
])],
host: {
'[#openClose]': 'true',
'style': 'display: block;'
},
})
The animation works by component, so you need to declare the animation on both of them.
The leave animation may not be noticed on state change. The official documentation has an example on how to use animations in route components
Hope it helps!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm looking to build a moble app where the user can take an SVG image, manipulate it under a "recording", and then send the recording to a friend for them to "replay".
I have some experience with D3.js and have also looked at Snap.svg library for SVG manipulation but I'm not fully wrapping my head around how to implement this.
In particular, what's a good way to be able to save the manipulations the user is making and then "replay" them? For example, I can use D3.js to manipulate the SVG, but since this is code-based, I can't exactly "serialize" the animation in order to send to someone else and for them to be able to "replay" it. I don't want to go down the route of code generation..
Any ideas how to do this?
I am not sure how complex your application targets are. However, it is easy to serialise updates in an SVG as JSON array and replay them using d3. Here is a small example for the same.
Steps:
Update SVG by using update buttons.
Revert the chart by clicking on clear button.
Now click play button to replay the last updates.
var defaults = [{
key: "r",
val: 15,
type: "attr"
}, {
key: "fill",
val: "blue",
type: "style"
}];
var updates = [];
var c20 = d3.scale.category20();
var circles = d3.selectAll("circle");
d3.select("#increase_rad")
.on("click", function() {
var val = parseInt(d3.select("circle").attr("r")) + 1;
circles.attr("r", val);
updates.push({
"key": "r",
"val": val,
"type": "attr"
});
enableButton();
});
d3.select("#decrease_rad")
.on("click", function() {
var val = parseInt(d3.select("circle").attr("r")) - 1;
circles.attr("r", val);
updates.push({
"key": "r",
"val": val,
"type": "attr"
});
enableButton();
});
d3.select("#change_color")
.on("click", function() {
var val = c20(Math.floor(Math.random() * (18) + 1));
circles.style("fill", val);
updates.push({
"key": "fill",
"val": val,
"type": "style"
});
enableButton();
});
d3.select("#clear")
.on("click", function() {
applyEffects(defaults);
});
d3.select("#play")
.on("click", function() {
applyEffects(updates);
});
function applyEffects(effects, delay) {
var trans = circles.transition()
effects.forEach(function(update) {
if (update.type == "attr") {
trans = trans.attr(update.key, update.val).transition();
} else {
trans = trans.style(update.key, update.val).transition();
}
});
}
function enableButton() {
d3.select("#clear").attr("disabled", null);
d3.select("#play").attr("disabled", null);
}
svg {
background: white;
}
.link {
stroke: black;
}
.node {
fill: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div>
<input type="button" value="Clear" id="clear" disabled />
<input type="button" value="Play" id="play" disabled />
<br/>
<br/>
<input type="button" value="Increase Radius" id="increase_rad" />
<input type="button" value="Decrease Radius" id="decrease_rad" />
<input type="button" value="Change Color" id="change_color" />
</div>
<svg width="250" height="250">
<g id="links">
<line class="link" x1="138.0538594815113" y1="55.927846328346924" x2="58.77306466322782" y2="110.43892621419347"></line>
<line class="link" x1="138.0538594815113" y1="55.927846328346924" x2="195.04044384802015" y2="133.44259356292176"></line>
</g>
<g id="nodes">
<g class="node" transform="translate(138.0538594815113,55.927846328346924)">
<circle r=15></circle>
</g>
<g class="node" transform="translate(58.77306466322782,110.43892621419347)">
<circle r=15></circle>
</g>
<g class="node" transform="translate(195.04044384802015,133.44259356292176)">
<circle r=15></circle>
</g>
</g>
</svg>