I'm using Konva and trying to change the fill color of a tag using the setAttrs, however I keep getting an error "setAttrs is not a function" I'm trying to start by getting a child of the label, and setting the attribute of that. Any thought's on what I could be doing wrong?
// Add labels for each IO
var IO = new Konva.Label({
x: 10,
y: 10,
name: "Tag 1",
});
IO.add(
new Konva.Tag({
fill: '#C1EFF5',
stroke: '#555',
strokeWidth: 2,
})
);
IO.add(
new Konva.Text({
text: "TestText",
fontFamily: 'Calibri',
fontSize: 12,
padding: 5,
fill: 'black',
})
);
// Add listening Events such as clicking
IO.on('click', function () {
// get only Tag
var tagsClicked = this.getChildren(function(node){
return node.getClassName() === 'Tag';
});
tagsClicked.setAttrs({
fill: 'red'
});
});
// Add the input to the group for display
group.add(IO);
Related
I am using SciChart Library for showing JS Heatmap Chart.
According to the below documentation, the zValues variable is generated using iterate function but when I try to use it in my HTML & CSS based website, Its not working.
https://demo.scichart.com/javascript-heatmap-chart
The error I am getting is:
Uncaught SyntaxError: Unexpected token ':'
I have written the following Code:
Code:
var {sciChartSurface, wasmContext} = await SciChart.SciChartSurface.create("line_chart_3");
// Add XAxis and YAxis
sciChartSurface.xAxes.add(new SciChart.NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new SciChart.NumericAxis(wasmContext));
// Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
var initialZValues: number[][] = iterate(WIDTH, HEIGHT, 200, 0, MAX_SERIES);
var heatmapDataSeries = new SciChart.UniformHeatmapDataSeries(wasmContext,
{
xStart: 100,
xStep: 1,
yStart: 100,
yStep: 1,
zValues: initialZValues
});
// Create a Heatmap RenderableSeries with the color map. ColorMap.minimum/maximum defines the values in
// HeatmapDataSeries which correspond to gradient stops at 0..1
var heatmapSeries = new SciChart.UniformHeatmapRenderableSeries(wasmContext,
{
dataSeries: heatmapDataSeries,
colorMap: new SciChart.HeatmapColorMap(
{
minimum: 0,
maximum: 200,
gradientStops:
[
{ offset: 0, color: "#00008B" },
{ offset: 0.2, color: "#6495ED" },
{ offset: 0.4, color: "#006400" },
{ offset: 0.6, color: "#7FFF00" },
{ offset: 0.8, color: "#FFFF00" },
{ offset: 1.0, color: "#FF0000" }
]
})
});
The above code is arising error on: var initialZValues: number[][] = iterate(WIDTH, HEIGHT, 200, 0, MAX_SERIES);
Please help.
The following line of code is Typescript
var initialZValues: number[][] = iterate(WIDTH, HEIGHT, 200, 0, MAX_SERIES);
remove the : number[][] and it should run.
I am using the FabricJS graphics library and have added an additional property (name) to a fabric.Rect object. All well and good and it serializes out to JSON correctly.
I am struggling though with the code needed to allow me to subsequently change the customer property once set i.e. to change 'some name' to something else. It is driving me a bit crazy.
Any additional help really appreciated.
Thanks,
Shaun
const o = new fabric.Rect({
width: width,
height: height,
fill: tableFill,
stroke: tableStroke,
strokeWidth: 2,
shadow: tableShadow,
originX: "center",
originY: "center",
centeredRotation: true,
snapAngle: 45,
selectable: true,
strokeUniform: true
});
o.toObject = (function(toObject) {
return function(propertiesToInclude) {
return fabric.util.object.extend(toObject.call(this, propertiesToInclude), {
name: 'some name'
});
};
})(o.toObject);
console.log(o.toObject().name)
So, basically run this code to allow any additional properties to be serialised to and from JSON. In this example a property called name is added.
const originalToObject = fabric.Object.prototype.toObject;
const myAdditional = ['name'];
fabric.Object.prototype.toObject = function (additionalProperties) {
return originalToObject.call(this, myAdditional.concat(additionalProperties));
}
Then create a new Fabric object and set or get the additional properties as needed...
const o = new fabric.Rect({
width: width,
height: height,
fill: tableFill,
stroke: tableStroke,
strokeWidth: 2,
shadow: tableShadow,
originX: "center",
originY: "center",
centeredRotation: true,
snapAngle: 45,
selectable: true,
strokeUniform: true
});
o.name = 'Fred'
console.log(o.toJSON())
I'm trying to create graph using JointJS, where Link starts from output port od 1 element and can be connected with whole other element (or current element itself) - not only with input port.
My idea is to modify input port style, to cover element it belongs to, but I have problems to change port shape in any way, it's always a little circle on left side of element and none of my css works.
Can someone give any advice?
you can update the port attrib0utes as follows:
var a = new joint.shapes.devs.Model({
position: { x: 50, y: 50 },
size: { width: 100, height: 100 },
attrs: {
'.port-label': {
fill: 'red'
},
// change position and size of the 'a' port
'.inPorts .port0 circle': {
r: 15,
'ref-x': -20,
'ref-y': 10,
stroke: 'red',
'stroke-width': 5
},
// change color on a single port
'.inPorts .port0 .port-label': {
fill: 'blue',
}
},
inPorts: ['a', 'aa', 'aaa'],
outPorts: ['b']
https://jsfiddle.net/vtalas/43sthc6g/
However, you don't need to use ports to achieve this, you can connect to the whole element directly like this:
var a = new joint.shapes.basic.Rect({
size: { width: 100, height: 100 },
position: { x: 300, y: 300 },
attrs: {
'rect': { magnet: true }
}
}).addTo(graph);
var b = new joint.shapes.basic.Rect({
size: { width: 100, height: 100 },
position: { x: 100, y: 100 },
attrs: {
'rect': { magnet: true }
}
}).addTo(graph);
new joint.dia.Link({ source: { id: b.id }, target: { id: a.id } }).addTo(graph);
result: https://jsfiddle.net/vtalas/davLzsng/
I am trying to get the ID of the image I am clicking on by using the following code:
theImg.on('click', function() {
alert($(this).attr('id')); //Should show 'IDofImg'
});
The Konva code is this:
var theImg = new Konva.Image({
image: imageObj,
x: stage.getWidth() / 2 - 200 / 2,
y: stage.getHeight() / 2 - 137 / 2,
opacity: 0.8,
shadowColor: 'black',
shadowBlur: 5,
id: 'IDofImg',
shadowOffset: {
x: 0,
y: 0
},
startScale: 1,
shadowOpacity: 0.6,
draggable: true
});
As you see, I have id: 'IDofImg', within the making of the image but it seems not to output the needed ID.
It currently outputs this when clicked on:
function() {
// setting
if (arguments.length) {
this[setter](arguments[0]);
return this;
}
// getting
else {
return this[getter]();
}
}
What am I missing?
Fiddle here
You should use this.id() because it is the Konva Image object, and not an html/javascript object.
See also the docs: http://konvajs.github.io/api/Konva.Node.html#id
Hi guys this is my JavaScript code to make ip marker for vector map to show online ip..
all ips have 3 different port like: ip1:1020 or ip2:5050 or ip3:6969
the format for my ips that i can read from ip.txt file like is :
{"relays":[{
"or_addresses":["2.176.82.122:1020"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.177.37.250:5050"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.178.57.250:6969"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.18.5.20:5050"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.78.7.25:1020"],"latitude":35.6961059570313,"longitude":51.423095703125}
]}
and this is my main script
<script>
$(document).ready(function(){
$('#worldmap').vectorMap({
map: 'world_mill_en',
scaleColors: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
markerStyle: {
initial: {
fill: '#cc6600',
stroke: '#222222',
r: 2
}
},
backgroundColor: '#CCC',
markers: [
]
});
map = $('#worldmap').vectorMap('get', 'mapObject');
$.getJSON('http://127.0.0.1/bantools/ip/ip.txt', function(data){
$.each(data.relays, function(idx, relay)
{
map.addMarker(relay.or_addresses[0], {'latLng' : [relay.latitude, relay.longitude], "name" : relay.or_addresses[0]});
});
});
});
</script>
my question is how i can make different style for different PORTS ????!
my means i want to use this style for port = 1020 :
markerStyle: {
initial: {
fill: '#cc6600',
stroke: '#222222',
r: 2
}
}
and for port = 5050 i want to use this style :
markerStyle: {
initial: {
fill: '#aaa',
stroke: '#bbb',
r: 2
}
}
and for other port...
http://jsbin.com/womoqa/edit?js,output
$(function(){
$('#world-map-markers').vectorMap({
map: 'world_mill_en',
scaleColors: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
backgroundColor: '#383f47',
markers: [
{latLng: [41.90, 12.45], name: 'Vatican City',
style: {
fill: '#cc6600',
stroke: '#222222',
r: 5
}},
{latLng: [17.11, -61.85], name: 'Antigua and Barbuda',
style: {
fill: '#ff0000',
stroke: '#222222',
r: 8
}},
{latLng: [0.33, 6.73], name: 'São Tomé and Príncipe',
style:{
fill: '#F8E23B',
stroke: '#383f47'
}}
]
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://jvectormap.com/js/jquery-jvectormap-2.0.2.min.js"></script>
<script src="http://jvectormap.com/js/jquery-jvectormap-world-mill-en.js"></script>
<link rel="stylesheet" href="http://jvectormap.com/css/jquery-jvectormap-2.0.2.css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="world-map-markers" style="width: 720px; height: 400px"></div>
</body>
</html>
I think to set the initial marker style you would need to go through all the data and build a scale (grouping), which is then used by jvectormap to get the values for the marker.
Your script to get json data looks good, so you are first showing the map and then put the markers over them. I think its a good approach, and your script is just only missing a simple function to prepare the markers style, if i'm not wrong here.
I changed slightly your data because all coordinates are pointing to the same location and the markers overlaps. It would be also useful if you explain if this is what you have to deal with.
This is a simple function to get the styles for the markers, it's just like a boring switch:
function getMarkerStyle(port) {
var styles = {'1020': {fill: '#cc6600', stroke: '#222222',r: 2},
'5050': {fill: '#aaa',stroke: '#bbb',r: 2}};
var unknown = {fill: '#F00',stroke: '#000',r: 2};
return styles[port] || unknown;
}
This shall be inside your getJSON callback function, instead of $.each i'm using here a classic for loop:
for (var i = 0, l = logFile.relays.length; i < l; i++) {
var port = logFile.relays[i].or_addresses[0].split(':')[1];
var id = logFile.relays[i].or_addresses[0].split(':')[0];
var coords = [logFile.relays[i].latitude, logFile.relays[i].longitude];
var name = id;
var style = getMarkerStyle(port);
mapObj.addMarker(id, {latLng: coords, name: name, style: style}, null);
}
You just only need to put the style inside the second parameter of the function addMarker.
Tested with jvectormap-2.0.2