How to add trajectory orientation to CZML file - cesiumjs

I have a czml file representing an aircraft flying a specified path. The file is constructed based on the Sancastle examples provided by Cesiusm (CZML Model + CZML Path).
Here is the CZML variable:
var czml = [{
"id" : "document",
"name" : "CZML Path",
"version" : "1.0",
"clock": {
"interval": "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
"currentTime": "2012-08-04T10:00:00Z",
"multiplier": 10
}
}, {
"id" : "path",
"name" : "path with GPS flight data",
"description" : "<p>Hang gliding flight log data from Daniel H. Friedman.<br>Icon created by Larisa Skosyrska from the Noun Project</p>",
"availability" : "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
"path" : {
"material" : {
"polylineOutline" : {
"color" : {
"rgba" : [255, 0, 255, 255]
},
"outlineColor" : {
"rgba" : [0, 255, 255, 255]
},
"outlineWidth" : 5
}
},
"width" : 8,
"leadTime" : 10,
"trailTime" : 1000,
"resolution" : 5
},
"model": {
"gltf" : "../../SampleData/models/CesiumAir/Cesium_Air.glb",
"scale" : 2.0,
"minimumPixelSize": 128
},
"position" : {
"epoch" : "2012-08-04T10:00:00Z",
"cartographicDegrees" : [
0,-122.93797,39.50935,1776,
10,-122.93822,39.50918,1773,
20,-122.9385,39.50883,1772,
30,-122.93855,39.50842,1770,
40,-122.93868,39.50792,1770,
50,-122.93877,39.50743,1767,
60,-122.93862,39.50697,1771,
70,-122.93828,39.50648,1765,
80,-122.93818,39.50608,1770,
90,-122.93783,39.5057,1754,
100,-122.93777,39.50513,1732,
110,-122.93793,39.50458,1727,
120,-122.93815,39.50415,1717,
130,-122.9382,39.50362,1713,
140,-122.93818,39.5031,1703,
150,-122.93812,39.50258,1706,
160,-122.93792,39.5022,1707,
170,-122.93775,39.50177,1698,
180,-122.93745,39.50125,1693,
190,-122.93723,39.50073,1694,
200,-122.9373,39.50023,1702
]
}
}];
In order to be able to run the the code I also add the following lines:
var terrainProvider = new Cesium.CesiumTerrainProvider({
url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
requestVertexNormals : true
});
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider : terrainProvider,
baseLayerPicker : false
});
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)).then(function(ds) {
viewer.trackedEntity = ds.entities.getById('path');
});
If you run the code you can see how the center point of the aircraft follows the trajectory, however its heading is not aligned with it thus giving a wrong rap presentation of what the flight should look like:
Would you be able to explain how to add the aircraft orientation to the the code without possible changing the initial czml file structure?
Note: I have found the answer to this question but I was not able to implemented to my problem.

I came up with an answer to the my question. Here there are the lines of codes that if placed in Sandcastle will allow to load the czml file and then add the orientation property through some type of interpolation:
//Sandcastle_Begin
var terrainProvider = new Cesium.CesiumTerrainProvider({
url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
requestVertexNormals : true
});
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider : terrainProvider,
baseLayerPicker : false
});
var options = {
camera : viewer.scene.camera,
canvas : viewer.scene.canvas
};
Sandcastle.addToolbarMenu([{
text : 'Lateral avoidance w. real Wx and waypoints (KJFK-LEBL)',
onselect : function() {
viewer.camera.flyHome(0);
viewer.dataSources.add(Cesium.CzmlDataSource.load('./SampleData/interp_turb_data_fromFede_avoid_realistic_w_waypoints.czml')).then(function(ds) {
var entity = ds.entities.getById('path');
// viewer.trackedEntity = entity;
entity.orientation = new Cesium.VelocityOrientationProperty(entity.position);
entity.position.setInterpolationOptions({
interpolationDegree : 1,
interpolationAlgorithm : Cesium.HermitePolynomialApproximation
});
});
}
}], 'toolbar');
Sandcastle.reset = function() {
viewer.dataSources.removeAll();
viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
};
//Sandcastle_End
In this way the aircraft will be aligned with the trajectory!

Related

Changing color of a linestring (json) in Leaflet

The problem is that I see only 1 color (blue) in the map but I want to give a specific color for my levee json file. Could someone give me advice how I can change the color of the linestring?
var geojson = L.geoJson(null,{
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
}).addTo(map);
var xhttp = new XMLHttpRequest();
xhttp.open('GET', encodeURI("NA.json"));
geojson data to the layer when request is succesfull
xhttp.onload = function() {
if (xhttp.readyState === 4) {
geojson.addData(JSON.parse(xhttp.responseText));
} else {
alert('Request failed. Returned status of ' + xhttp.status);
}
};
xhttp.send();
The json file
"type" : "FeatureCollection",
"crs" : {
"type" : "name",
"properties" : {
"name" : "EPSG:4326"
}
},
"features" : [
{
"type" : "Feature",
"id" : 122,
"geometry" : {
"type" : "LineString",
"coordinates" :
Use the style option of L.GeoJSON. Let me quote the documentation:
A Function defining the Path options for styling GeoJSON lines and polygons, called internally when data is added. The default value is to not override any defaults:
function (geoJsonFeature) {
return {}
}
You can apply colours to a path (a L.Polyline or a L.Circle or a L.Polygon) by providing a value for the color option. Therefore, you should provide a style callback function which returns a set of options including color:
var geojson = L.geoJson(null,{
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
},
style: function(){
return { color: 'pink' }
}
}).addTo(map);
Please note there are further examples in the Leaflet GeoJSON tutorial.

50053 incomplete dimension binding

Hello guys i have a problem with displaying my pie chart, when i try to add more data into the pie chart this error occurs, i need your expertise on this matter
this is my controller code. and the error message is
[50053] - Incomplete dimensions binding
onInit: function() {
this._setupSelectionList();
// 2.Create a JSON Model and set the data
var oModel = new sap.ui.model.json.JSONModel("http://lssinh000.sin3.sap.corp:8000/SAP_LE/lionExpress/Volunteer/Services/request.xsjs");
var oVizFrame = this.getView().byId("idpiechart");
// 3. Create Viz dataset to feed to the data to the graph
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{
name : 'Status',
value : "{Status}",
name : 'StartDate',
value : '{StartDate}'
}],
measures : [{
name : 'reqID',
value : '{reqID}',
},],
data : {
path : "/Status"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
// 4.Set Viz properties
oVizFrame.setVizProperties({
title:{
text : "Delivery Summary"
},
plotArea: {
colorPalette : d3.scale.category20().range(),
drawingEffect: "glossy"
}});
var feedSize = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "size",
'type': "Measure",
'values': ["reqID"]
}),
feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "color",
'type': "Dimension",
'values': ["Status"]
}),
feedValue = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "value",
'type': "Dimension",
'values': ["StartDate"]
});
oVizFrame.addFeed(feedSize);
oVizFrame.addFeed(feedColor);
oVizFrame.addFeed(feedValue);
//this.getView().byId("idPopOver").connect(oVizFrame.getVizUid());
},
In the dataset, the name attribute has to be same as in the values arrays of the feeds.

Highcharts dynamically change bar color based on value

I am creating a column type graph using json data. Here is the JS function i call to get the data using ajax call and plot the chart.
function getChart(){
var categorySeries = [];
var dataSeries = [];
var url = "CallToControllerURL";
$.getJSON(url, function(response) {
$.each(response, function(i, item) {
categorySeries .push(response[i].dateVal);
dataSeries.push(response[i].count);
});
$('#chartDiv').highcharts({
chart : {type : 'column'},
title : {text : 'Date vs Count'},
xAxis : {categories : categorySeries, crosshair : true},
yAxis : {allowDecimals: false, min : 0, title : { text : 'Count'}},
plotOptions : { column : { pointPadding : 0.2, borderWidth : 0, allowPointSelect: true } },
series : [ {name : 'Nbr of Records',data : dataSeries } ]
});
});
}
I want to be able to modify the color of bar for any day if the count is greater than a particular value, say 10.
This is how the json input to the function.
[{"id":3,"dateVal":"2015-11-12","count":6},{"id":2,"dateVal":"2015-11-11","count":8},{"id":1,"dateVal":"2015-11-10","count":5}]
Any suggestions how i can do this?
You can use color zones (API) to have different colors based on the value of a column.
An example with values below/above the value 10 having different colors (JSFiddle):
plotOptions: {
column: {
zones: [{
value: 10, // Values up to 10 (not including) ...
color: 'blue' // ... have the color blue.
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
In the parser you can replace that:
$.each(response, function(i, item) {
categorySeries .push(response[i].dateVal);
dataSeries.push(response[i].count);
});
with
$.each(response, function(i, item) {
categorySeries.push(response[i].dateVal);
if(response[i].count >= 10) {
dataSeries.push({
y: response[i].count,
color: 'red'
});
}
else {
dataSeries.push(response[i].count);
}
});
or use zones.
plotOptions: {
column: {
zones: [
{
value: -1,
color: 'red',
},
{
color: 'green'//default color
},
],
},
}

RKEntityMapping JSON array RKResponseDescriptor keypath issue possibly

I am attempting to map my Core Data "Component" Entity to the "hotspots" keypath in this response JSON, but it only gets to the array object so it will not map. I can't tell if my problem is the mapping or the response descriptor or a combination of the two.
"result" : {
"type" : "Slidedeck",
"id" : 81,
"name" : "Brendantest",
"slides" : [
{
"thumb" : "http:\/\/api.idetailapp.review.thingee.com\/v4\/resources\/1294\/download\/slide?thumb=true",
"id" : 1294,
"notes" : "",
"label" : "",
"order" : 1,
"parent_id" : 81,
"file" : "slide-20.jpg",
"components" : {
"hotspots" : [
{
"x" : 205,
"options" : "embedded",
"type" : "video",
"id" : 6082,
"y" : 453,
"assets" : [
{
"thumb" : "\/system\/asset_objects\/14\/original_thumb\/14.png",
"id" : 14,
"parent_id" : 6082,
"file" : "slide_15_chart_animation_ipad_r03.mov",
"url" : "http:\/\/api.idetailapp.review.thingee.com\/v4\/resources\/14\/download\/asset"
}
],
"parent_id" : 1294,
"width" : 320,
"height" : 246
}
]
},
"url" : "http:\/\/api.idetailapp.review.thingee.com\/v4\/resources\/1294\/download\/slide"
}
],
"version" : "0.43"
}
}
Here is my RKEntityMapping:
RKEntityMapping *mapping = [RKEntityMapping mappingForEntityForName:#"Component"
inManagedObjectStore:[RKManagedObjectStore defaultStore]];
mapping.identificationAttributes = #[ #"componentID" ];
[mapping addAttributeMappingsFromDictionary:#{#"id": #"componentID",
#"parent_id": #"parentID"
}];
[mapping addAttributeMappingsFromArray:#[#"x", #"y", #"width", #"height", #"type", #"options"]];
Here is my Responsedescriptor:
componentResponseDescriptor = [RKResponseDescriptor responseDescriptorWithMapping:componentEntityMapping
method:RKRequestMethodAny pathPattern:nil
keyPath:#"result.slides.components.hotspots" statusCodes:RKStatusCodeIndexSetForClass(RKStatusCodeClassSuccessful)];
I put in a RestKit/ObjectMapping debug trace and get to the following output:
Asked to map source object (
{
assets = (
{
file = "slide_15_chart_animation_ipad_r03.mov";
id = 14;
"parent_id" = 6082;
thumb = "/system/asset_objects/14/original_thumb/14.png";
url = "http://api.idetailapp.review.thingee.com/v4/resources/14/download/asset";
}
);
height = 246;
id = 6082;
options = embedded;
"parent_id" = 1294;
type = video;
width = 320;
x = 205;
y = 453;
}
And further debug message of:
Failed transformation of value at keyPath 'id' to representation of type 'NSNumber': Error Domain=org.restkit.RKValueTransformers.ErrorDomain Code=3002 "Failed transformation of value '(
6082
)UserInfo=0x12479350 {NSLocalizedDescription=Expected an inputValue of type NSNull, but got a __NSArrayI.}"
),
Your problem is keyPath:#"result.slides.components.hotspots".
Specifically, the fact that slides is an array.
The result is that RestKit is asked to map an array of objects into your mapping. So, when it tries to get the id (which should be a number), it gets an array (hence your error). This is because calling valueForKey: on an array returns an array...
So, basically, you can't do it the way you're trying to because of the array in the middle of the JSON.
If you can get the JSON changed, do that. If you can't, you need to change your mapping to map the slides first and then the nested components (then you can discard the slides afterwards if you want).

ExtJS AJAX returned JSON object

I have an AJAX call inside an ExtJS script, but I'm not sure how to take the returned JSON object and assign it to a variable for use on the page. I'm basically taking a hardcoded extJS script and puting in JSON from database. Here is what I need to do
Get a variable from this AJAX call:
Ext.onReady(function () {
Ext.Ajax.request({
url: '/xxx/clienttool/components/Client-Tool.cfc?method=getResources&returnformat=json',
params: {
accountID: 463
},
success: function(response){
var text = response.responseText;
// process server response here
}
});
and assign it so these values aren't hardcoded:
// Store holding all the resources
resourceStore : Ext.create("Sch.data.ResourceStore", {
model : 'Sch.model.Resource',
data : [
{Id : 'MadMike', Name : 'Mike'},
{Id : 'JakeTheSnake', Name : 'Jake'},
{Id : 'KingFu', Name : 'King'},
{Id : 'BeerBrian', Name : 'Brian'},
{Id : 'LindaAnderson', Name : 'Linda'},
{Id : 'DonJohnson', Name : 'Don'},
{Id : 'KarenJohnson', Name : 'Karen'},
{Id : 'DougHendricks', Name : 'Doug'},
{Id : 'PeterPan', Name : 'Peter'}
]
}),
Here's the whole thing:
Ext.onReady(function () {
App.SchedulerDemo.init();
});
App.SchedulerDemo = {
// Initialize application
init : function () {
Ext.define('Event', {
extend : 'Sch.model.Event',
fields : [
{name : 'Title'},
{name : 'Type'}
]
});
//ajax call to get resources for this accountID
Ext.Ajax.request({
url: '/xxxx/clienttool/components/Client-Tool.cfc?method=getResources&returnformat=json',
params: {
accountID: 463
},
success: function(response){
getResources = response.responseText;
// process server response here
}
});
//alert(getResources);
var zoneStore = Ext.create('Ext.data.JsonStore', {
model : 'Sch.model.Range',
data : [
{
// Nice 2 hour lunch
StartDate : new Date(2011, 11, 9, 12),
EndDate : new Date(2011, 11, 9, 14),
Cls : 'lunch-style'
}
]
});
var sched = Ext.create("Sch.panel.SchedulerGrid", {
height : ExampleDefaults.height,
width : ExampleDefaults.width,
rowHeight : 40,
eventBarTextField : 'Title',
viewPreset : 'hourAndDay',
startDate : new Date(2011, 11, 9, 7),
endDate : new Date(2011, 11, 9, 20),
orientation : 'vertical',
constrainDragToResource : false,
eventBarIconClsField : 'Type',
snapToIncrement : true,
//constrainDragToResource : true,
eventResizeHandles : 'end',
viewConfig : {
// Experimental for CSS3 enabled browsers only
eventAnimations : true
},
// Store holding all the resources
resourceStore : Ext.create("Sch.data.ResourceStore", {
model : 'Sch.model.Resource',
data :
[
{Id : 'MadMike', Name : 'Mike'},
{Id : 'JakeTheSnake', Name : 'Jake'},
{Id : 'KingFu', Name : 'King'},
{Id : 'BeerBrian', Name : 'Brian'},
{Id : 'LindaAnderson', Name : 'Linda'},
{Id : 'DonJohnson', Name : 'Don'},
{Id : 'KarenJohnson', Name : 'Karen'},
{Id : 'DougHendricks', Name : 'Doug'},
{Id : 'PeterPan', Name : 'Peter'}
]
}),
If the only purpose of the AJAX request is to retrieve data for your grid's store, I would ditch it altogether and simply define an AJAX proxy on your store. It will not only accomplish the same initial objective (e.g., getting data for your store), but will also handle creating model instances of your data and binding the store to your grid.
I would suggest checking out the docs for the Store, as well as the grid examples in the documentation.