We have predefined presets like this.
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
But I did not found a way to use my custom presets for example with linear type and 0.1s speed.
You can use it like this:
LayoutAnimation.configureNext(CustomAnimation)
with
var CustomAnimation = {
duration: 400,
create: {
type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleXY,
springDamping: 0.7
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 0.7
}
}
Related
I know this is probably super basic, but I am new to learning QML and have a question about transition between pages.
In this example I have a button with which I want to switch between my 3 pages.
the transition works, but the pages always move from the right-to-the-left-side of the window.
how can I change this? I need the new page to appear as a whole right away.
(e.g. when changing from firstPage to secondPage, for the user it looks like only the AppText changes, because the button is at the same position in both cases)
code example:
App {
id: app
width: px(250); height: px(250)
NavigationStack {
Page {
id: page
navigationBarHidden: true
AppText { text: "startpage" }
SimpleButton{
x: 220; y: 0
onClicked: page.navigationStack.push(firstPage)
}
}
}
Component {
id: firstPage
Page {
navigationBarHidden: true
AppText { text: qsTr("1st page") }
SimpleButton{
x: 220; y: 0
onClicked: page.navigationStack.push(secondPage)
}
}
}
Component {
id: secondPage
Page {
navigationBarHidden: true
AppText { text: qsTr("2nd page") }
SimpleButton{
x: 220; y: 0
onClicked: page.navigationStack.push(page)
}
}
}
}
Any help would be greatly appreciated!
It looks like you're using Felgo, which I think is an extra library on top of Qt. For instance, there is no built-in QML component called NavigationStack. That comes from Felgo. You should mention that in your question to get better help with it.
I've never used Felgo myself, but just looking at the documentation real quick, it looks like you need to define a new transitionDelegate for your needs. Here is the example they give where new pages fade in/fade out.
NavigationStack {
// custom transition delegate
transitionDelegate: StackViewDelegate {
pushTransition: StackViewTransition {
NumberAnimation {
target: enterItem
property: "opacity"
from: 0
to: 1
duration: 1000
}
}
popTransition: StackViewTransition {
NumberAnimation {
target: exitItem
property: "opacity"
from: 1
to: 0
duration: 1000
}
}
}
initialPage: pageComponent
}
I'm new to this, but I'm trying to make a 3D map of a street in a semi-obscure Pennsylvania town. I have a geojson file that specifies the real estate parcels and their data, but not heights or elevations of buildings. I'm using ArcGis developer. When the page renders, I get the parcels as seen from the angle I designated, but the buildings don't extrude properly. Since I am modifying code I found online, I have probably included some things that aren't applicable to my page. I've made a codepen, but it doesn't show the extrusion at all: https://codepen.io/lschneiderman/pen/mdVJbOm?editors=0011
I'm getting these error messages:
[esri.layers.graphics.sources.GeoJSONSource] Some fields types couldn't be inferred from the features and were dropped
dojo.js:253 [esri.views.3d.layers.graphics.Graphics3DCore] Graphic in layer 17285dfb501-layer-0 has no symbol and will not render
My HTML:
<div id="viewDiv"></div>
CSS:
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
JS:
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GeoJSONLayer",
"esri/layers/SceneLayer"
], function(Map, SceneView, GeoJSONLayer, SceneLayer) {
const geojsonLayer = new GeoJSONLayer({
url:
"https://newsinteractive.post-gazette.com/mckeesport-fifth-ave/data/parcels-fifth1922.geojson"
});
geojsonLayer.elevationInfo = {
mode: "relative-to-ground",
featureExpressionInfo: {
expression: "$feature.elevation"
},
unit: "feet"
};
const heightVV = {
type: "size",
valueExpression: "$feature.height",
valueUnit: "feet"
};
geojsonLayer.renderer = {
type: "unique-value",
field: "CLASSDESC__asmt",
uniqueValueInfos: [
{
value: "COMMERCIAL",
symbol: {
type: "polygon-3d",
symbolLayers: [
{
type: "extrude",
material: {
color: "#D06152"
}
}
]
}
},
{
value: "RESIDENTIAL",
symbol: {
type: "polygon-3d",
symbolLayers: [
{
type: "extrude",
material: {
color: "#4A9B89"
}
}
]
}
}
],
visualVariables: [heightVV]
};
const map = new Map({
basemap: "gray-vector",
ground: "world-elevation",
layers: [
geojsonLayer,
new SceneLayer({
url:
"https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Manhattan/SceneServer",
renderer: {
type: "simple",
symbol: {
type: "mesh-3d",
symbolLayers: [
{
type: "fill",
material: {
color: "white"
},
edges: {
type: "solid",
color: [100, 100, 100, 0.5],
size: 0.5
}
}
]
} //end symbol, line 93
} //end renderer
})//end SceneLayer
] //end layers
});
const view = new SceneView({
container: "viewDiv",
map: map
});
view.goTo({
target: [-79.869331, 40.350433], // coordinates of crossing
heading: 90,
tilt: 45,
zoom: 30 // instead of a z-value, we provide the zoom level
}, {
duration: 0 // tell view not to animate camera movement
});
});
Any help would be much appreciated!
The provided sample has the following issues:
Missing CORS headers
The API tries to load the GeoJSON but the browser denies it with the following error message:
Access to fetch at 'https://newsinteractive.post-gazette.com/mckeesport-fifth-ave/data/parcels-fifth1922.geojson' from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
You must either host the GeoJSON file on the same host the script is running or add CORS headers to the server hosting the GeoJSON file. For the CodePen below I downloaded the GeoJSON and uploaded it again as a CodePen asset, where CORS headers are properly set to make this work:
const geojsonLayer = new GeoJSONLayer({
url: "https://assets.codepen.io/2969649/parcels-fifth1922.geojson"
});
Missing height attribute for extrusion
The features (in this case parcels) listed in the GeoJSON have no height information. The provided sample uses a size visual variable to extrude the polygons by the height attribute:
const heightVV = {
type: "size",
valueExpression: "$feature.height",
valueUnit: "feet"
};
Because there is no attribute named height, all polygons are extruded 0 feet. You can either add a corresponding attribute to all the features in the GeoJSON or simply define a constant in the sample that will be applied to all extruded polygons:
geojsonLayer.renderer = {
type: "simple",
symbol: {
type: "polygon-3d",
symbolLayers: [{
type: "extrude",
size: 50, // extrude all buildings by 50 meters
material: {
color: "#D06152"
}
}]
}
}
See the following CodePen for a working version with the above parcels:
https://codepen.io/arnofiva/pen/474ecc855475ced8d50f3f121988649f?editors=0010
You might want to check out the following ArcGIS API for JavaScript resources:
Sample: extruding building footprints
Fundamentals for Building 3D Web Apps (Youtube)
Practical Guide for Building a 3D Web App from 2D Data (Youtube)
Wix React Native Navigation V2 Custom Navigation Transition
Content moderators like myself may get tripped up on this one and mark as duplicate as there are similarly named libraries like React Navigation which have nothing to do with this.
Is there a general way to customize transition animations for push/pop? The documentation seems to be sparse and incorrect after experimenting.
The default push animation moves from right-to-left. I would like to be able to override this in some cases to left-to-right or from top-to-bottom, etc.
Doing this per push/pop doesn't seem to work either when using "animations" and the "x" or "y" properties.
Here's an example of what I've tried.
class MyComponent extends React.PureComponent {
static options(passProps) {
return {
animations: {
push: {
content: {
x: {
from: -1000, to: 0, duration: 300
},
y: {
from: 0, to: 0, duration: 300
}
}
},
pop: {
content: {
x: {
from: 0, to: -1000, duration: 300
},
y: {
from: 0, to: 0, duration: 300
}
}
}
}
}
}
}
But I've tried also per actual command and globally as well with no effect, also tried using "_" in front as some random examples show this.
I'm generally confused on how to customize due to very poor docs on this.
You probably forget enabled: 'true'. I set it globally like:
Navigation.setDefaultOptions({
animations: {
push: {
enabled: 'true',
content: {
x: {
from: 2000,
to: 0,
duration: 200
}
}
},
pop: {
enabled: 'true',
content: {
x: {
from: 0,
to: 2000,
duration: 200
}
}
}
});
and works fine
Ok, so I would like to have a slider that looks like this one.
Just can't figure out where we can at least have these delimiter separators? So if you see there are 7 delimiters and we have large labels on the first 4-th and the last delimeter.
How would you approach this task?
This is a rather old question but I was faced with the very same need today. Building on GenieWanted's answer, I came to this:
...
{
xtype: 'sliderfield',
maxValue: 5,
label: 'Some data',
html: '<table width="100%" align="left"><tr><td width="25%">Min</td><td width="50%" align="center">Med</td><td width="25%" align="right">Max</td></tr></table>'
}
...
which works very well for me, and avoids messing around to find the correct number of needed. Also, I suspect that results would vary from device to device using .
There is no way of adding a label inside sliderfield. However, you can indeed add HTML to acheive the required output. On the config panel, go to HTML property, and add something like this:
<div style="padding-left:1em">| | |<div>Low Average High </div></div>
The output I have got:
You just need to playaround with the alignment of your text in the HTML. That will do!
Good Luck!
You can create Custom Slider like this
Ext.ns('Ext.ux');
Ext.ux.CustomSlider = Ext.extend(Object, {
valueTextClass: 'x-slider-value-text',
showSliderBothEndValue: true,
sliderEndValueStyle: 'color: black',
constructor: function(config){
Ext.apply(this, config);
Ext.ux.CustomSlider.superclass.constructor.apply(this, arguments);
},
init: function(parent) {
var me = this;
parent.on({
painted: {
fn: function(component) {
if (me.showSliderBothEndValue) me.showSliderEndValue(this);
if (!this.valueTextEl) {
this.valueTextEl = component.element.createChild({
cls: me.valueTextClass
});
}
}
}
});
},
showSliderEndValue: function(slider) {
var sliderPosX = slider.getComponent().getThumb().element.getX();
var thumbHeight = slider.getComponent().getThumb().element.getHeight();
var sliderLength = slider.getComponent().element.getWidth();
var minValueEl = slider.getComponent().element.createChild();
minValueEl.setHtml(slider.getComponent().getMinValue());
minValueEl.applyStyles('overflow:hidden;position:absolute');
minValueEl.applyStyles(this.sliderEndValueStyle);
minValueEl.setLeft(14);
minValueEl.setTop(thumbHeight -7);
var maxValueEl = slider.getComponent().element.createChild();
maxValueEl.setHtml(slider.getComponent().getMaxValue());
maxValueEl.applyStyles('overflow:hidden;position:absolute');
maxValueEl.applyStyles(this.sliderEndValueStyle);
maxValueEl.setLeft(sliderLength-45);
maxValueEl.setTop(thumbHeight - 7);
}
});
And create slider like this
var slider = {
xtype: 'sliderfield',
flex : 6,
label: "Percentage",
name: "Percentage",
value : 50,
minValue : 0,
maxValue : 100,
labelWrap : true,
labelAlign : 'left',
increment : 10,
plugins: [new Ext.ux.CustomSlider({
showSliderBothEndValue: true
})],
listeners: {
painted: function (slider) {
var sliderPanelItems = this.parent.getInnerItems();
sliderPanelItems[1].setValue(this.getValue());
},
change: function (me,slider, thumb, newVal, oldVal, opts) {
var sliderPanelItems = this.parent.getInnerItems();
sliderPanelItems[1].setValue(newVal);
}
}
};
Result will be like this
I did this using this link
This crashes:
var grdMakes = Ext.extend(Ext.grid.Panel, {
constructor: function(paConfig) {
}
}
This does not:
var grdMakes = Ext.extend(Ext.grid.Panel, {
}
The crash is:
Uncaught TypeError: Cannot read property 'added' of undefined
Why does adding a constructor cause it to crash? I can do it with other objects like:
var pnlMakesMaint = Ext.extend(Ext.Panel, {
constructor: function(paConfig) {
}
} // just fine
EDIT
To clarify what I want to do is that I want to be able to instantiate an object with the option to override the defaults.
var g = new grdMakes({}); // defaults used
var g = new grdMakes({renderTo: Ext.getBody()}); // renderTo overridden
This is working for everything except the Ext.grid.Panel
Also, I'm using ExtJS 4
SOLUTION
Turns out, extend is deprecated in ExtJS 4. So I used this and it works:
Ext.define('grdMakes', {
extend: 'Ext.grid.Panel',
constructor: function(paConfig) {
var paConfig = Ext.apply(paConfig || {}, {
columns: !paConfig.columns ? [{
header: 'Makes',
dataIndex: 'make'
}, {
header: 'Description',
dataIndex: 'description'
}]: paConfig.columns,
height: !paConfig.height ? 400 : paConfig.height,
renderTo: !paConfig.renderTo ? Ext.getBody() : paConfig.renderTo,
store: !paConfig.store ? stoMakes : paConfig.store,
title: !paConfig.title ? 'Makes' : paConfig.title,
width: !paConfig.width ? 600 : paConfig.width
});
grdMakes.superclass.constructor.call(this, paConfig);
}
}
Ok.But your code seems like ExtJS3.Because Ext.extend is depreceated in ExtJS4 version.Instead of extend you can use define.For reference you can check the following url:
http://docs.sencha.com/ext-js/4-0/#/api/Ext-method-extend
Afaik,for overriding default options,this is not the perfect way.You need to use Ext.override.
For example:
Ext.override(Ext.grid.Panel,{
lockable : true
});
Like above you have to override the default options.