We Keep Coding

Cesium Earth entity path quality

I have developed an application, using the Cesium Earth library.
The problem is, the drawn line (entity path) has very low quality, it's not smooth. How to make it better?
viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: false,
shadows:true,
skyAtmosphere: false,
geocoder: false,
shouldAnimate:true,
clockViewModel: new Cesium.ClockViewModel(clock),
imageryProviderViewModels: imageryViewModels,
requestRenderMode : true
});
entity[i] = viewer.entities.add({
path:{
leadTime:leadTime,
trailTime:trailTime,
width:1.5,
material: color,
resolution:10
}
});
satellite[id].position.setInterpolationOptions({
interpolationDegree : 10,
interpolationAlgorithm : Cesium.HermitePolynomialApproximation
});

Look into adding an anti-aliasing pass to your view, and possibly making the dimensions of your container div double what they actually are on the screen (scale it to half size with CSS). I have a similar scene, but it's in three.js, here: https://ccnmtl.github.io/astro-interactives/sun-motion-simulator/ source code is here: https://github.com/ccnmtl/astro-interactives/blob/master/sun-motion-simulator/src/HorizonView.jsx

Responsive joint js diagram

Im using joint js library to create a diagram inside html, but i need it to be responsive as mi site.Thing is, i have it inside a div with a java class that open down and closes up with this code :
$('.open-down-up').click(function(){
var nameMore = $(this).attr("name");
var valMore = $(this).attr("value");
if(valMore == 0){
$(this).find('span').empty();
$(this).find('span').append("▼");
$('div[id='+nameMore+']').slideDown("normal");
$(this).attr("value","1");
}else if(valMore == 1){
$(this).find('span').empty();
$(this).find('span').append("►");
var n = nameMore.indexOf("process_process");
$('div[id='+nameMore+']').slideUp("normal", function(){
var n = nameMore.indexOf("process_process");
if(n > -1){
hide_panel_all();
}
});
$(this).attr("value","0");
}
});
SO, i already tried things like :
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#modelCanvas'),
gridSize: 10,
height: $('#modelCanvas').height(),
width: $('#modelCanvas').width(),
gridSize: 1,
model: graph,
});
But it doesn't work...any idea or approach i can apply ??
Thanks in advance.

I found a way so it may be helpfull for someone who need it (for a resizing responsive):
It's necessary to scale the entire paper along with the window, so, we create a javascript event on it:
window.onresize = function(event) {
paper.setDimensions($('#your_div_id').width());
paper.scaleContentToFit({minScaleX: 0.3, minScaleY: 0.3, maxScaleX: 1 , maxScaleY: 1});
};
Using joint js properties whe resize the canvas along with the div based on that event but only affecting width, then set a max scale for X and Y axis. You can of course, adapt it of make conditions on it as you may need.
Hope it helps as for me !

dat.GUI custom placement not showing

So I am trying to get a dat.GUI placed on the upper right corner of the canvas using the custom placement tutorial:
Here is a codepen showing the not working custom placement:
http://codepen.io/eternalminerals/pen/avZBOr
I am trying to use the custom placement property because the autoplaced dai.GUI on this page http://eternalminerals.com/testa/ is un-clickable. I think if I custom placed it to the canvas instead of the page it should work.
I tried:
var gui = new dat.GUI({ autoPlace: false });
var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(gui.domElement);
on both the codepen and the live site, where 'my-gui-container' is 'canvas', but whenever I do this, the dat.GUI disappears completely. Maybe I have to wrap the canvas in a div? I will continue to tinker with this dat.GUI and keep you posted.
Thanks.

So this is a duplicate question: How do I change the location of the dat.gui dropdown?
I simply used the moveGui div and attached the dat.GUI to the moveGui div and used CSS to move it around. The codepen is now working!! http://codepen.io/eternalminerals/pen/avZBOr
html:
<canvas id="canvas"></canvas>
<div class = 'moveGUI'>
</div>
css:
.moveGUI{
position: absolute;
top: 13.1em;
right: -1em;
}
js:
var FizzyText = function() {
this.message = 'dat.gui';
this.speed = 0.8;
this.displayOutline = false;
this.explode = function() { console.log('test'); };
// Define render logic ...
};
$(document).ready(function( $ ) {
var text = new FizzyText();
var gui = new dat.GUI({ autoPlace: false });
gui.add(text, 'message');
gui.add(text, 'speed', -5, 5);
gui.add(text, 'displayOutline');
gui.add(text, 'explode');
gui.domElement.id = 'canvas';
var customContainer = $('.moveGUI').append($(gui.domElement));
});

jQuery - Automatic change values after resizing the browser window

We have following code (addition, the presence of the plugin DataTables)
$('#myTable').dataTable( {
"scrollY": height, <-- auto height here
"scrollCollapse": true,
} );
I dont' know so well jquery and I have a problem with the automatic changing values.
I have a div element where the height is a percentage (for example: 50%) and
and I want to get this height in pixels. Ofcourse the height is changing as many times as the browser window is changed.
Unfortunately, I don't know how to do, Someone here can help? (preferably an example)
Update 1:
I tried so like that
var ch = $('#dataTableWrapper').height() - 110; // I subtracted the value of the height of my static elements in a div
$('#dataTableID').dataTable( {
"scrollY": ch,
"scrollCollapse": true,
} );
$(window).resize(function(){
ch = $('#dataTableWrapper').height() - 110; // same as above
$('.dataTables_scrollBody').css('height', ch);
});
Apparently it works, but if anyone had a more elegant solution I would ask about throwing code.

You can do like this:
$( window ).resize(function() {
var scroll = $("#yourDiv").height();
});

This might be a dumb thing to suggest, but are you just looking for a simple refactoring?
function getTableHeight() {
return $('#dataTableWrapper').height() - 110;
}
$('#dataTableID').dataTable( {
"scrollY": getTableHeight(),
"scrollCollapse": true,
} );
$(window).resize(function(){
$('.dataTables_scrollBody').css('height', getTableHeight());
});

Titanium.Media.showCamera with overlay, pass through events

I am writing an iOS application that utilizes the camera. I want an image (and ultimately a control element or two) overlayed over the camera picture.
This already works. However the overlay prevents the default control elements for Flash, HDR and camera selection from receiving touch events.
Below is my code. Is there a way to make myOverlay pass through or ignore events?
var overlayImage = Titanium.UI.createImageView({
width: 100,
height: 100,
backgroundImage: 'img/picture.png'
});
var myOverlay = Titanium.UI.createView();
myOverlay.add(overlayImage);
Titanium.Media.showCamera({
success: successMethod,
error: errorMethod,
cancel: function(e) {},
overlay: myOverlay,
saveToPhotoGallery: true,
allowEditing: false,
mediaTypes: ['public.image']
});

You can try var myOverlay = Titanium.UI.createView({touchEnabled: false}); and it should pass events according to the Appcelerator docs.