I am using Mapbox to work with maps in *.qml. I wanna know if there is any 3D terrain real option like the one that works in iOS maps. The code part I have is,
id: map
plugin: Plugin {
name: "mapboxgl"
PluginParameter {
name: "mapboxgl.access_token";
value: "pk.eyJ1IjoidGFudHJpZG8iLCJhIjoiY2tlYnB0YWo0MGFpczJzcnZubHRlNTAwbiJ9.6QG-4BeuCpUjaawDiyyfVg"
}
PluginParameter {
name: "mapboxgl.mapping.additional_style_urls";
value: "mapbox://styles/tantrido/ckyuch3ub001q16ofjwsxnlz6"
}
}
MapParameter {
type: "layer"
property var name: "3d-buildings"
property var source: "composite"
property var sourceLayer: "building"
property var layerType: "fill-extrusion"
property var minzoom: 15.0
}
MapParameter {
type: "filter"
property var layer: "3d-buildings"
property var filter: [ "==", "extrude", "true" ]
}
MapParameter {
type: "paint"
property var layer: "3d-buildings"
property var fillExtrusionColor: "#f2bc68"
property var fillExtrusionOpacity: 0.6
property var fillExtrusionHeight: { return { type: "identity", property: "height" } }
property var fillExtrusionBase: { return { type: "identity", property: "min_height" } }
}
anchors.fill: parent
center: QtPositioning.coordinate(homeLat.text, homeLng.text)
tilt: 80
zoomLevel: 18
}
This, however, is only a 3D object on any building, not the real one, and the result is like this,
the current QML result
And the one, I am looking for is like this,
Apple 3D map that I am trying to implement in QML
Related
I have a ListView, where the currently displayed modelData changes as a button cycles through several department options. If one of these departments has no data, my delegate continues showing the previous list data until it reaches a new section of modelData with data.
What I want to do, is when the model is 'empty' (being undefined, which may happen when the key it's looking for is yet to be created in my Firebase Database, or no items are currently visible), text/image is shown instead; i.e, "Move along now, nothing to see here".
My model is drawn from JSON, an example is below. and my calendarUserItems is the root node of multiple children within my Firebase Database, the aim of my AppButton.groupCycle was too add a further direction to each child node, filtering the data by this to view and edit within the page.
A sample of my code is:
Page {
id: adminPage
property var departments: [1,2,3,4]
property int currGroupIndex: 0
AppButton {
id: groupCycle
text: "Viewing: " + departments[currGroupIndex]
onClicked: {
if (currGroupIndex == departments.length - 1)
currGroupIndex = 0;
else
currGroupIndex++;
}
}
ListView {
model: Object.keys(dataModel.calendarUserItems[departments[currGroupIndex]])
delegate: modelData.visible ? currentGroupList : emptyHol
Component {
id: emptyHol
AppText {
text: "nothing to see here move along now!"
}
}
Component {
id: currentGroupList
SimpleRow {
id: container
readonly property var calendarUserItem: dataModel.calendarUserItems[departments[currGroupIndex]][modelData] || {}
visible: container.calendarUserItem.status === "pending" ? true : false
// only pending items visible
// remaining code for simple row
}
}
}
}
an example of JSON within my dataModel.calendarUserItems is:
"groupName": [
{ "department1":
{ "1555111624727" : {
"creationDate" : 1555111624727,
"date" : "2019-03-15T12:00:00.000",
"name" : "Edward Lawrence",
"status": "pending"
},
//several of these entries within department1
},
},
{ "department2":
{ "1555111624727" : {
"creationDate" : 1555111624456,
"date" : "2019-05-1T12:00:00.000",
"name" : "Katie P",
"status": 1
},
//several of these entries within department2
},
}
//departments 3 & 4 as the same
]
If departments 2 and 3 have modelData, yet 1 and 4 do not, I want the text to display instead, and the ListView emptied, instead of showing the previous modelData.
I have tried playing with the image/text visibility but the issue lays more with clearing the modelData and I'm unsure where to begin?
Any help is greatly appreciated!
I have achieved the display by using the following as my delegate:
delegate: {
if (!(departments[currGroupIndex] in dataModel.calendarUserItems) ) {
return emptyHol;
}
var subgroups = Object.keys(dataModel.calendarUserItems[departments[currGroupIndex]]);
for (var i in subgroups) {
var subgroup = dataModel.calendarUserItems[departments[currGroupIndex]][subgroups[i]];
modelArr.push(subgroup);
}
var modelObect = modelArr.find( function(obj) { return obj.status === "pending"; } );
if (modelObect === undefined) {
return emptyHol;
}
return currentGroupList;
}
Then when my AppButton.groupCycle is pressed, I have added modelArr = [] to clear the array on each press, this works as intended.
Thanks!
My component is meant to create a new entity on check, which it does, and it adds MOST of the attributes but not rotation and position. I see that this appeared to be a problem is versions before 0.5.0 but I am using 0.8.0 and it is still not updating. Any ideas?
AFRAME.registerComponent('new-room', {
schema: {
on: {type: 'string'},
rotation: {type: 'string'},
target: {type: 'selector'},
iconposition: {type: 'string'},
iconrotation: {type: 'string'}
},
init: function () {
// Do something when component first attached.
var data = this.data;
var el = this.el;
el.addEventListener(data.on, function () {
// Set image.
data.target.setAttribute('rotation', data.rotation);
// Remove all room icons
var entityEl = document.querySelector('.icons');
entityEl.parentNode.removeChild(entityEl);
// Adjust room icons
var entityEl = document.createElement('a-entity');
document.querySelector('a-scene').appendChild(entityEl);
entityEl.setAttribute('geometry', {primitive: 'plane', height: '1', width: '1'});
entityEl.setAttribute('material', {shader: 'flat', src: '#thumb', transparent: 'true', opacity: '.3'});
entityEl.setAttribute('class','icons');
entityEl.setAttribute('position',data.iconposition);
document.querySelector('a-scene').flushToDOM(true);
});
}
});
Where is data.rotation being set? Because you are passing in the same object, it does not recognize it as an update. We prescribe to update rotation in the docs using object3D.rotation like el.object3D.rotation.set(x, y, z) or el.object3D.rotation.copy(vec3).
I am trying to implement a keyClick with a shift modifier but it doesn't work. Below is a basic setup of what I am trying to do. The first test_case1 can perform what I am doing but I'd like the second test_case2 to work as well but with using the Qt.ShiftModifier.
../MyTextBox.qml
Page {
id: page1
objectName: "page1"
TextField {
id: lastNameField
objectName: "lastNameField"
text: qsTr("")
}
}
tst_page.qml
import "../"
Item {
width: 800
height: 600
MyTextBox {
id: page1
}
TestCase {
id: "txtBox"
when: windowShown
function test_case1 () {
//var qmlObj = findChild(page1, "lastNameField")
var qmlObj = page1.lastNameField
// Bring to focus
mouseClick(qmlObj, Qt.LeftButton, Qt.NoModifier)
// Keypress
keyPress("Y")
keyPress("e")
keyPress("s")
tryCompare(qmlObj, "text", "Yes") // pass
}
function test_case2 () {
var qmlObj = page1.lastNameField
// Bring to focus
mouseClick(qmlObj, Qt.LeftButton, Qt.NoModifier)
// Keypress
keyClick(QT.Key_Y, Qt.ShiftModifier)
keyClick(QT.Key_E)
keyClick(QT.Key_S)
tryCompare(qmlObj, "text", "Yes") // fail
}
}
}
test output
PASS : test_case1()
FAIL! : test_case2()
Actual (): yes
Expected (): Yes
Edit: Added a simple project to github for testing.
My rest service expose me a group of fields: each filed has a value and a list of attributes: enabled, maxLength (in case of string), minLength (in case of string), decimals (number of decimal digits - in case of float).
In OpenUi5 I have:
value and enabled are properties of Input control Link (Good!! I can bind properties with model contains the attributes)
maxLength and decimals are optionsof String type and Float type (Link) but I can't bind options with a model :-/
minLength I can't find a property/option
I would like map (bind) each attribute with component so that automatically the library control for me without writing more code.
there is a property called maxLength for Input Control.
So the only problem I see is binding minLength and decimals for which there is little bit effort is needed.
Solution
Create your own input control by extending the existing Input
Control.How to achieve it?
Sample Code Structure:
jQuery.sap.require("sap.m.Input");
jQuery.sap.declare("sap.m.ComplexInput");
sap.m.Input.extend("sap.m.ComplexInput", {
metadata: {
properties: {
minLength: {
type: "int"
},
decimals: {
type: "int"
},
events: {
//define your own events like checkMinLength,checkDecimals
}
},
onInit: function () {
//on init do something
},
onAfterRendering: function () {
//called after instance has been rendered (it's in the DOM)
},
_somePrivateMethod: function () {
/*do someting...*/
},
somePublicMethod: function () {
/*do someting...*/
},
}
});
sap.m.ComplexInput.prototype.exit = function () {
/* release resources that are not released by the SAPUI5 framework */
//do something
};
Adding CustomData and using wherever you want to.
Then you can access custom data in validation process or on liveChange or so..
Bind the other properties to the value of customData
var input = new sap.m.Input({
value: '{value}',
enabled: '{enabled}',
maxLength: '{maxLength}',
customData: [
new sap.ui.core.CustomData({
key: 'minLength',
value: '{minLength}'
}),
new sap.ui.core.CustomData({
key: 'decimals ',
value: '{decimals}'
})
],
change: function(oEvent) {
var src = oEvent.getSource();
var minLen = src.getCustomData()[0].getValue();
var decimals = src.getCustomData()[1].getValue();
if (src.getValue() && src.getValue().length > minLen) {
src.setValueState('Success');
} else {
src.setValueState('Error');
}
}
});
In my project having same data-source for grid and chart, but need to display all the data on the chart in page load and Display the grid data in button click.
But previously we used shared data-source so can easily apply the grid changes in the chart.
Now used separate variable for grid and chart and apply the "AutoBind=true" for chart and "AutoBind=false" both are not working and grid changes has to apply to chart.
how to give relation for both grid and chart?
Here is the fiddle:
var sharedDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderDate: { type: "date" }
}
}
}
});
var DataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderDate: { type: "date" }
}
}
}
});
Using shared datasource is correct approach. Here is fiddle with fixed code meeting your requirements : http://jsfiddle.net/vojtiik/kappG/2/.
The autoBind property expects boolean not string (eg.: true not "true").
autoBind: true,