using JxMaps (Java Swing) I draw a polyline.
This works fine.
Now I'd like to add arrwos to the lines. Anyone having an idea whats wrong with my code?
...
Symbol icon = new Symbol();
icon.setPath("google.maps.SymbolPath.FORWARD_CLOSED_ARROW");
IconSequence iconSequence = new IconSequence();
iconSequence.setIcon(icon);
iconSequence.setOffset("100%");
options.setIcons(new IconSequence[]{iconSequence});
// Applying ALL options to the polyline
polyline.setOptions(options);
No Arrows appear
If I look at the Google Maps API, it looks very similiar:
// var lineSymbol = {
// path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
//
// new google.maps.Polyline({
//icons: [{
// icon: lineSymbol,
// offset: '100%'
//}],
Thanks
Possibility to use built-in symbol paths was introduced in JxMaps version 1.2.2. You can download it from official product page: www.teamdev.com/jxmaps
You can add this kind of image using following code:
Symbol icon = new Symbol();
icon.setPath(StandardSymbol.BACKWARD_CLOSED_ARROW);
Thanks.
Related
I'm posting this in case anyone else ran into the same issue. As of Feb 2022 amCharts v5 is still very new and the demo code seems to need a little curation on amCharts' part i.e. Show us that the object needs to be declared with a type - AND TELL US WHICH TYPE TO USE!
I copied the code from this demo example verbatim
// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
let circleTemplate = am5.Template.new({});
series0.bullets.push(function() {
let graphics = am5.Circle.new(root, {
fill: series0.get("fill"),
}, circleTemplate);
return am5.Bullet.new(root, {
sprite: graphics
});
});
and got the following error
Even the documentation page does not suggest specifying the type
I reached out to amCharts via their support system and got the following response:
Hi Adam,
How about specifying Circle as a generics for themplate?
let circleTemplate: am5Template<am5.Circle> Yours sincerely,
Martynas Majeris amCharts
First off am5Template is not valid, but I assumed he meant am5.Template
Second, his code is not complete and did not compile as-is.
I tried a few variations and the following worked:
// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
let circleTemplate = am5.Template.new({}); // <-- demo code
// let circleTemplate3: am5Template<am5.Circle>; // <-- code provided by the support person
let circleTemplate2: am5.Template<am5.Circle> = am5.Template.new({}); // <-- WORKING modification of the suggested code
// let circleTemplate1: am5Template<am5.Circle> = am5.Template.new({}); // attempted variation of the suggested code
series0.bullets.push(function() {
let graphics = am5.Circle.new(root, {
fill: series0.get("fill"),
}, circleTemplate2); // <-- compiler now sees the object as the appropriate object type
return am5.Bullet.new(root, {
sprite: graphics
});
});
Another example (from the same demo) which requires the same modification, but with a different template type:
// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
let starTemplate: am5.Template<am5.Star> =am5.Template.new({});
series1.bullets.push(function() {
let graphics = am5.Star.new(root, {
fill: series1.get("fill"),
spikes: 8,
innerRadius: am5.percent(70),
}, starTemplate);
return am5.Bullet.new(root, {
sprite: graphics
});
});
So yeah, maybe this will help someone who ran into the same issue as me. What would be REALLY nice is if they had Cope Pen examples that use TS and not just JS
I would like to two show a Chart and also present an url with a link to a bigger Chart. The small preview-image looks and works fine:
<canvas id="image"></canvas>
var ct1 = document.getElementById("image").getContext("2d");
ct1.canvas.width = document.getElementById("image").offsetWidth;
ct1.canvas.height = document.getElementById("image").offsetHeight;
var Chart1 = new Chart(ct1).Line(lineChartData1,options);
The canvas is wrapped in a div, that's why offsetWidth and offsetHeight (to fill this additional div-element). Cause of the responsive-design there is no fixed image. Anyway, this works perfectly. For the URL to the "bigger" image I want to have the URL. I know the toDataURL() will help.
var url = document.getElementById("image").toDataURL();
document.write(url);
There are two disturbing problems with it:
The URL with this way exisists and, but the image has no content.
I also want to give the canvas-image a new size, like I managed with ct1.canvas.width and ct1.canvas.height, but it seems I cannot add this to the toDataURL.
What's wrong with the code?
Okay, I think I got it. Chart.js is animating the charts, so the toDataURL() I mentioned in my first question rendered only an empty image. We have to initiate the toDataURL, not before the animation is done. We handle that with the options:
var options = {
onAnimationComplete: done
}
and a tiny function:
function done() {
console.log('done');
var url=document.getElementById("canvas").toDataURL();
document.getElementById("canvas_link").href=url;
}
I think that's all.
Well, I've been reading the documentation and I believe that I'm calling functions and passing parameters correctly, but for the life of me I can't get this simple UI code to work.
I'm generating a UI for a Spreadsheet using the following code:
function checkOut() {
var app = buildUI();
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
}
function buildUI() {
var gui = UiApp.createApplication();
gui.setTitle("Check-Out/Check-In");
gui.setStyleAttribute("background", "lavender");
// Absolute panel for setting specific locations for elements
var panel = gui.createAbsolutePanel();
// Equipment ID#s Label
var equipmentIDLabel = gui.createLabel("Equipment ID#s");
equipmentIDLabel.setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER);
equipmentIDLabel.setSize("20px", "125px");
equipmentIDLabel.setStyleAttributes({background: "SteelBlue", color: "white"});
// Add all components to panel
panel.add(equipmentIDLabel, 10, 0);
gui.add(panel);
return gui;
}
function getUIdata(eventInfo) {
// I know how to get the data from each element based on ID
}
It generates the Absolute Panel correctly when checkOut() is called, but the EquipmentIDLabel is never added to the panel. I am basing the code on the simplistic design I created in the GUI builder (that will be deprecated in a few days, which is why I am writing the code so that I can change it later):
So what exactly is going wrong here? If I can figure out how to add one element, I can infer the rest by looking at the docs. I've never been any good at GUI development!
You could maybe use grid as an interesting alternative... here is an example :
// define styles
var labelStyle = {background: "SteelBlue", color: "white",'textAlign':'center','line-height':'20px','vertical-align':'middle','font-family':"Arial, sans-serif",'fontSize':'10pt'};// define a common label style
var fieldStyle = {background: "white", color: "SteelBlue",'font-family':"Courrier, serif",'fontSize':'11pt'};// define a common label style
function checkOut() {
var app = buildUI();
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
}
function buildUI() {
var gui = UiApp.createApplication();
gui.setTitle("Check-Out/Check-In");
gui.setStyleAttribute("background", "lavender");
var panel = gui.createAbsolutePanel().setStyleAttribute('padding','10px');
var grid = gui.createGrid(4,2).setWidth('300').setCellPadding(10);//define grid size in number of row & cols
var equipmentID = ['equipmentIDLabel','equipmentIDLabel1','equipmentIDLabel2','equipmentIDLabel3'];// define labels in an array of strings
for(var n=0 ;n<equipmentID.length ; n++){;// iterate
var equipmentIDLabel = gui.createLabel(equipmentID[n]).setWidth('125').setStyleAttributes(labelStyle);
var equipmentIDField = gui.createTextBox().setText('Enter value here').setName(equipmentID[n]).setSize("125", "20").setStyleAttributes(fieldStyle);
grid.setWidget(n,0,equipmentIDLabel).setWidget(n,1,equipmentIDField);
}
gui.add(panel.add(grid));
return gui;
}
It looks like the absolute panel offset method is a little capricious and take control of your positioning, in my tests I have been able to position panels that are visible in the following way:
panel.add(equipmentIDLabel);
panel.add(equipmentIDField,150,0);
panel.add(otherLabel);
panel.add(otherField, 150, 20);
Try it out with trial and error, you may get the UI you need, if not I would move to an alternate layout, verticalPanel is a little better behaved and of course you can use forms as well.
Another small bug is that you inverted the length and hight in equipmentIDLabel.setSize("20px", "125px");
Let me know if I can be of more assitance
The specific problem in your code is the following line :
// Add all components to panel
panel.add(equipmentIDLabel, 10, 0);
Simply change it to : panel.add(equipmentIDLabel);
..and you will see the field (at position 0,0).
As patt0 observes, you can then add OTHER components and use positioning. It seems to be a limitation of adding the first field to an absolutePanel.
Of course, the Google Script gui is now deprecated (since December 2014) but I was interested to try your code and see that it still basically executes (as at Feb 2016).
Developing a Firefox Add-on. Anyone can please help to figure out how to make a Panel transparent.
Here is the code to show a panel:
var panel = require("sdk/panel").Panel({
width: 570,
height: 250,
contentURL: require("sdk/self").data.url("test.html")
});
panel.show();
I found a solution, but it isn't pretty since sdk/panel.js doesn't seem to expose the raw Panel object in order to tweak/extend or compose a another Panel from the existing one.
Here goes:
(1) Get the source for sdk/panel.js here: panel.js (raw) or from within sdk folder found in your addon xpi.
(2) Add it to your addon package as a new file.
(3) Change the requires parameters of this cloned file (lines 16-24) so that they point to the correct location from your addon.
example:
change
const { validateOptions: valid } = require('./deprecated/api-utils');
to
const { validateOptions: valid } = require('sdk/deprecated/api-utils');
(4) Find line 137, and modify the variable css to your liking. Like so:
...
let css = [
".panel-inner-arrowcontent, .panel-arrowcontent {padding: 0;}", //original css rule
".panel-inner-arrowcontent, .panel-arrowcontent {opacity: 0.50; border-radius: 0.35in;}" //additional css rules: semi-transparent panel with rounded borders.
].join(" ");
...
(5) Use the modified version of panel.js instead of the one that came with the sdk.
That should be it. Like I said, it isn't particularly elegant.
Here is the problem :
I have a canvas, and four (would be more in future, but 4 for testing...anyway, doesn't matter) images that can be "poped" into the canvas by clicking on it.
Each image can be present multiple times in the canvas.
So far, poping is working fine, images are draggable... But I can't add some resize or zIndex function as I can only select the last image add to the canvas.
In a ideal world, I would like, by clicking/dragging an image, put it on top of the canvas, and kinda "select" it, so that I can connect the resize functions to the image.
But with the array of images, I can't manage to identify properly the item dragged, and can't use (or don't manage to use) the selectors.
Thank you.
EDIT : some code
var imgCpt = 0;
var image = [];
function addDetails(img) {
imgCpt++;
var imageObj = new Image();
imageObj.onload = function() {
image[imgCpt] = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true,
id:image[imgCpt]
});
image[imgCpt].setX((stage.getWidth()/2) - (image[imgCpt].getWidth()/2));
image[imgCpt].setY((stage.getHeight()/2) - (image[imgCpt].getHeight()/2));
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
layer.add(image[imgCpt]);
stage.add(layer);
};
imageObj.src = 'uploads/'+img;
}
I've already tried different solutions : multiple layer, and acting on it instead of acting on image, working with shapes filled with image instead of image, but it's always the same problem : I can't get the id of the concerned element (instead of the id of the last insert element)
This version works with array, but I tried yersterday to build the image id with eval(); without more success.
Thank you for your help
EDIT² : sorry to insist, but I would really be glad to have some assistance on this point, even if I think it's more JS related than pure KineticJS related.
Thank you.
Ok Guys, just solved the problem :
eval("image["+imgCpt+"].on('click', function() {alert("+imgCpt+");});");
Instead of :
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
Now time to set a true action behind the click.
Thank you for helping ;)