Have simple app using Cesium. I have basic entity with ellipse graphics, moving around, and I need to display its path, using PathGraphics, but it doesn't seem to work for me.
Here's code sample.
const position = new SampledPositionProperty();
const start = [16.096912, 40.4100289];
const startTime = JulianDate.now();
position.addSample(startTime, Cartesian3.fromDegrees(...start));
const diff = 0.0002;
const [x, y] = start;
for (let i = 0; i < 10; i += 1) {
const d = JulianDate.addSeconds(startTime, i + 1, new JulianDate());
const newPos = [x + diff * (i + 1), y + diff * (i + 1)];
position.addSample(d, Cartesian3.fromDegrees(...newPos));
}
app.entities.add({
ellipse: {
semiMinorAxis: 10,
semiMajorAxis: 10,
material: Color.RED,
},
path: {
resolution: 1,
width: 5,
material: Color.YELLOW,
},
position,
});
But when I launch it all I see is moving ellipse, but no path is drawn. Everywhere I searched they say you just have to have position as SampledProperty and it will work, but it doesn't seem to work for me.
In this case, as you can see, I generate data beforehand, but I also tried adding it in runtime - same result. The only working examples i was able to find where using czml - but it doesn't fit my needs - it will be real-time app.
I found the solution by digging through Cesium Sandcastle - you have to set availability property to entity with time range you want path to be shown. Would be cool if it was covered in documentation at least in some way.
Related
I am using SVGs to draw lines between components that are related in my app. Currently I am grabbing those elements and getting their position info with document.getElementById() and then using getClientBoundingRect.
This generally works, but there is occasional render wonkiness.
Is there a better way to do this? Perhaps an already existing library that works with VueJs?
Changing the class puts a CSS filter on the shape because you have
.isSelected {
filter: brightness(50%);
}
Now the W3C Filter Effects spec says
The application of the ‘filter’ property to an element formatted with the CSS box model establishes a new stacking context the same way that CSS ‘opacity’ does, and all the element's descendants are rendered together as a group with the filter effect applied to the group as a whole.
So browsers are doing the correct thing per that specification. The new stacking context puts the shape in front of the line.
See also this wontfixed Chromium bug
The problem ended up being because of document.getElementById and z-order
I ended up changing my timer to get the element by ref, and iterate through the children of my component to find it.
Here is the code:
drawLines: function () {
let children = this.$children
let lines = this.lines
lines.splice(0, lines.length)
let scheduleContainer = this.$refs.scheduleContainer
let scheduleContainerRect = scheduleContainer.getBoundingClientRect();
for (let i = 0; i < children.length; i++) {
let child = children[i]
if (child.$props.assignment) {
if (child.$props.assignment.assignmentRequestId != "00000000-0000-0000-0000-000000000000") {
for (let ii = 0; ii < children.length; ii++) {
let child2 = children[ii]
if (child2.$props.assignmentRequest) {
if (child2.$props.assignmentRequest.id == child.$props.assignment.assignmentRequestId) {
let assignmentRect = child.$refs.theContainer.getBoundingClientRect()
let requestRect = child2.$refs.theContainer.getBoundingClientRect()
let x1 = ((assignmentRect.left - scheduleContainerRect.left) + 12.5) + 'px'
let y1 = ((assignmentRect.top - scheduleContainerRect.top) + 12.5) + 'px'
let x2 = ((requestRect.left - scheduleContainerRect.left) + 12.5) + 'px'
let y2 = ((requestRect.top - scheduleContainerRect.top) + 12.5) + 'px'
let line = { 'x1': x1, 'y1': y1, 'x2': x2, 'y2': y2 }
lines.push(line)
}
}
}
}
}
}
},
I have a game with a preloader in scene 1, with the following code on the time line.
stop();
loadingBar._xscale = 1;
var loadingCall:Number = setInterval(preloadSite, 50);
function preloadSite():Void {
var siteLoaded:Number = _root.getBytesLoaded();
var siteTotal:Number = _root.getBytesTotal();
var percentage:Number = Math.round(siteLoaded/siteTotal*100);
loadingBar._xscale = percentage;
bytesDisplay.text = percentage + "%";
if (siteLoaded >= siteTotal) {
clearInterval(loadingCall);
gotoAndPlay("StartMenu", 1);
}
}
The code works fine when there are no music files linked to frame 1. If there are music files linked, then everything loads before the preloader shows up.
I found this great webpage about preloaders, which speaks about the linkage issue, and suggests I put all the big files on frame 2, after the preloader, then skip them. I put my large files on frame 2 as suggested and the preloader worked again.
My question is, is there a better way to do this. This solution seems like a hack.
The only better option I can think of, is to NOT store the MP3 file in your Flash file, but rather load it in your preloader with your flash file's content. This is provided that you're storing your MP3 file somewhere else online (like on a server).
stop();
loadingBar._xscale = 1;
var sound:Sound = new Sound();
sound.loadSound("http://www.example.com/sound.mp3", false);
var loadingCall:Number = setInterval(preloadSite, 50);
function preloadSite():Void {
var siteLoaded:Number = _root.getBytesLoaded()+sound.getBytesLoaded();
var siteTotal:Number = _root.getBytesTotal()+sound.getBytesTotal();
var percentage:Number = Math.round(siteLoaded / siteTotal * 100);
loadingBar._xscale = percentage;
bytesDisplay.text = percentage + "%";
if (siteLoaded >= siteTotal) {
clearInterval(loadingCall);
gotoAndPlay("StartMenu", 1);
sound.start();
}
}
Good Evening (UK)
I'm trying to filter down a 1500+ page PDF file to only the pages which include a certain text string (typically one or two words). My laptop is locked down with respect to installing more software BUT I have used action(script)s quite a bit
I get the error below when I try to install this action into Abobe Acrobat X Pro (Win 7):
screen dump of error
called "Extract Commented Pages"... supposed to be OK for X and XI this looks like what I want.....
I wondered if there was something simple causing the problem but the actionscript file is rather... busy to say the least.
I used to have an action that I think was based on a legal redaction script but it is filed somewhere!
If you have already got an action that does this or a version of the above that doesn't give the error I get (unable to import the Action.... The file is either invalid or corrupt) I will forever by indebted to your gratitude
Many thanks, have a good weekend!
I recently came across a script found at the following link: http://forums.adobe.com/thread/1077118
I'm having some issues getting the script to run in Acrobat, despite everything looking alright in the script itself. I'll update if I find any errors.
Here is a copy of the script:
// Set the word to search for here
var sWord = "forms";
// Source document = current document
var sd = this;
var nWords, currWord, fp, fpa = [], nd;
var fn = sd.documentFileName.replace(/\.pdf$/i, "");
// Loop through the pages
for (var i = 0; i < sd.numPages; i += 1) {
// Get the number of words on the page
nWords = sd.getPageNumWords(i);
// Loop through the words on the page
for (var j = 0; j < nWords; j += 1) {
// Get the current word
currWord = sd.getPageNthWord(i, j);
if (currWord === sWord) {
// Extract the current page to a new file
fp = fn + "_" + i + ".pdf";
fpa.push(fp);
sd.extractPages({nStart: i, nEnd: i, cPath: fp});
// Stop searching this page
break;
}
}
}
// Combine the individual pages into one PDF
if (fpa.length) {
// Open the document that's the first extracted page
nd = app.openDoc({cPath: fpa[0], oDoc: sd});
// Append any other pages that were extracted
if (fpa.length > 1) {
for (var i = 1; i < fpa.length; i += 1) {
nd.insertPages({nPage: i - 1, cPath: fpa[i], nStart: 0, nEnd: 0});
}
}
// Save to a new document and close this one
nd.saveAs({cPath: fn + "_searched.pdf"});
nd.closeDoc({bNoSave: true});
}
Trying to display a dashed line with KineticJS (v4.7.3). It works fine in Chrome, but in IE (v10), a normal solid line is displayed.
Here's the code:
var element = document.getElementById('target'),
stage = new Kinetic.Stage({
container: element,
width: element.offsetWidth,
height: element.offsetHeight
}),
layer = new Kinetic.Layer();
layer.add(new Kinetic.Line({
points: [10, 10, 190, 190],
stroke: 'black',
strokeWidth: 1,
dashArray: [5, 4]
}));
stage.add(layer);
And you can see the behavior for yourself in here.
Fixed in IE-11 !
Until all "bad" IE's die, you can "do-it-yourself" fairly easily for lines (less easily for curves).
You can use a custom Kinetic.Shape which gives you access to a canvas context (a wrapped context).
Code is taken from this SO post: dotted stroke in <canvas>
var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP && CP.lineTo){
CP.dashedLine = function(x,y,x2,y2,dashArray){
if (!dashArray) dashArray=[10,5];
if (dashLength==0) dashLength = 0.001; // Hack for Safari
var dashCount = dashArray.length;
this.moveTo(x, y);
var dx = (x2-x), dy = (y2-y);
var slope = dx ? dy/dx : 1e15;
var distRemaining = Math.sqrt( dx*dx + dy*dy );
var dashIndex=0, draw=true;
while (distRemaining>=0.1){
var dashLength = dashArray[dashIndex++%dashCount];
if (dashLength > distRemaining) dashLength = distRemaining;
var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
if (dx<0) xStep = -xStep;
x += xStep
y += slope*xStep;
this[draw ? 'lineTo' : 'moveTo'](x,y);
distRemaining -= dashLength;
draw = !draw;
}
}
}
Totally off-topic: Go Wisconsin! I spent many a great summer at my grandmothers house in
Lacrosse.
Short answer: Not supported.
Via a thread here, the creator of KineticJS addresses this issue:
"[T]he dashArray property now uses the browser-implemented dashArray
property of the canvas context, according to the w3c spec. Firefox is
a little behind at the moment."
If you follow the thread, you'll discover that this was an issue for Firefox at one point, too, but that has been resolved. However, support for IE should apparently not be expected any time soon.
Answer
Finally I solved my answer with this.
((LineSeries)MyChart.Series[0]).IndependentAxis = new LinearAxis
{
Minimum = 1,
Maximum = 5,
Orientation = AxisOrientation.X,
Interval = 1,
Margin = new Thickness(10, 0, 10, 0)
};
((LineSeries)MyChart.Series[0]).Clip = null;
((LineSeries)MyChart.Series[0]).Margin = new Thickness(10, 0, 10, 0);
I am drawing line chart with help of WinRT XAML Toolkit. I am setting X axis manually, but when I set I am getting wierd start & end point. I tried to set margin and padding but it's not working. Will you please suggest me how can I do that ?
((LineSeries)MyChart.Series[0]).IndependentAxis = new LinearAxis
{
Minimum = 1,
Maximum = 5,
Orientation = AxisOrientation.X,
Interval = 1,
//Margin = .... Not working
//Padding = .... Not working
};
I'd use a visual tree debugger to walk up the visual tree from these data points to see where the Clip property is set. In fact I just did that on the samples project and it is set on the LineSeries. See if it's set as part of its XAML template or if it is done in C# and remove it there. Also you could change the Minimum/Maximum values on your X axis to make more space. I'll add cleaning this all up to my TODO list.