How can I create a model with different input and output ports.
For example:
Inputs ports - triangles
Output ports - circles
I have figured that out, if anyone interested
I am using <path class="port-body"/>
and setting different d paths when creating a new cell:
// ...
'.inPorts .port-shape': {
d: pathForInputPort
},
'.outPorts .port-shape': {
d: pathForOutputPort
}
// ...
`
Related
I'm struggling with setting dynamic private dns zone records for multiple private endpoints for same resource in Azure (ACR - Azure Container Registry).
So I have currently setup this simple example. Basically it simulate creation of ACR and building a map of records which need to be registered in the DNS so ACR could be used correclty. The thing here is that it is needed to somehow extract value from inner field of each resource/object (here it is endpoints variable) and then transform it correctly so it would match expected output. This is needed as in my case it is integral part of a module and it needs to be built dynamically based on values of real resources created.
Following example should help anyone who'd like to check this problem out and help a bit.
To verify if you've got correct result just type "terraform refresh" and the output should be printed.
terraform {
backend local {}
}
# simulates creation of multiple Azure Container Registry private endpoints
variable endpoints {
type = map
default = {
"registry" = {
custom_dns_configs = [
{
fqdn = "something.westeurope.data.azurecr.io"
ip_addresses = ["1.1.1.1",]
},
{
fqdn = "something.azurecr.io"
ip_addresses = ["1.1.1.2",]
}
]
},
"registry2" = {
custom_dns_configs = [
{
fqdn = "something.westeurope.data.azurecr.io"
ip_addresses = ["1.1.2.1",]
},
{
fqdn = "something.azurecr.io"
ip_addresses = ["1.1.2.2",]
},
]
},
#...
# "registryN" = {...}
}
}
# Question: How to write for block here to get out of it exactly what's in expected
# result having in mind that there can be multiple of "registry" blocks?
# Below line produce only single result which doesn't match expected result.
output result {
value = {for pe in var.endpoints:
pe.custom_dns_configs[0].fqdn => pe.custom_dns_configs[0].ip_addresses
}
}
# Expected result:
# result = {
# "something.westeurope.data.azurecr.io" = [
# "1.1.1.1",
# "1.1.2.1",
# ]
# "something.azurecr.io" = [
# "1.1.1.2",
# "1.1.2.2",
# ]
# }
Answering my own question:
output result {
value = {for k,v in {
for cdc in flatten(
[for pe in var.endpoints: pe.custom_dns_configs]
):
cdc.fqdn => cdc.ip_addresses...
}:
k => flatten(v)
}
}
Now few words of explanation:
[] and {} - [] produce a tuple which strip "registry" key from incomming map whereas {} would require to produce some kind of dynamic keys
[for pe in var.endpoints: pe.custom_dns_configs] just extract internal field from var.environments for each element of the map. Then flatten is used just to make thing simpler without the need to dig into different levels of nested lists
next for is to build new map for fqdn -> list(ip addresses)
the "..." after cdc.ip_addresses are required. That's notation to allow grouping values by keys. In this case we have at least 2 times same fqdn and by normal means terraform would complain that it cannot create such map when keys are non-uniqe. Adding those 3 dots there enable this grouping.
then top-most for block is used just to flatten whole value output.
Now the problem would be if we would still want to keep "registry", "registry2", "registryN" grouping. For that I haven't found solution yet.
I am using Chart.js to map an aircraft's vertical approach path:
The code to get the actual approach path is relatively straightforward:
var position_reports = [
{
altitude: 4606
heading: 42.94507920742035
latitude: 35.16972222222222
longitude: -101.75638888888889
speed: 133
vertical_speed: -714},
},
// additional position reports redacted for clarity
];
var data = [];
for(var x = 0; x < position_reports.length; x++) {
data.push(position_reports[x].altitude);
}
// at this point, data looks like this: [4606, 4605, 4604, 4603, 4603, 4602, etc....]
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Actual Altitude',
borderColor: '#ff6600',
data: data,
borderWidth: 5,
fill: false,
}
]
},
// additional options redacted for clarity
});
This above aircraft's glidepath (mostly) follows a standard 3-degree descent path. I would like to draw a fixed 4-degree and 2-degree line so I can make sure the aircraft's actual vertical path falls between 4 and 2 degrees. Hand drawn (and thus not to scale) example of what I'm trying to achieve:
How to I go about adding these red lines into Chart.js, relative to the vertical path? Is it possible with this library, or should I be using something else? Any feedback appreciated!
You can always write a custom plugin to do it, but I think this plugin of chart.js itself can help you out looking at the example. If you specify the right start and end it should draw a straight line.
https://github.com/chartjs/chartjs-plugin-annotation#line-annotations
Here is my problem, i have a scale of colors for different countries. When I select a country, its color change and I don't want to.
I just want to use the stroke attribute (without the fill attribute) to display selected regions.
Problem is that the default color for fill is "yellow". I tried to set the fill attribute for selected region to "none" but it erases my current color when selected.
Have you guys a way to solve this issue?
$('#worldMap').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
scale: ['#C1E712', '#5F7209'],
values: countryHitCounts,
}]
},
regionStyle: {
selected: {
fill: <= is there a keyword to not change the color when selected??
stroke: 'red',
"stroke-width": 1,
},
},
regionsSelectable: true,
selectedRegions: countrySelected,
onRegionSelected: function (event, code, isSelected, selectedRegions) {
//some code...
},
});
EDIT: in the minify js code source file, I changed the default style for selected region.
selected:{fill:"yellow"} by selected:{}
It works but if you have a better solution without changing the source file, I take it.
I ran into the same problem as well, what seemed to work for me was to override the selected fill with an invalid hex code. ex:
regionStyle: {
selected: {
fill: '#Z34FF9'
}
},
This seemed to register it as an override, but not actually apply it, leaving my original color.
You juste have to prevent the default action of the click :
,
onRegionClick: function(event, code){
event.preventDefault();
// your "some code" of region selected
}
Norrec's answer did not work for me, but I can override the class defaults just before creating the map. No source modification needed!
jvm.Map.defaultParams.regionStyle.selected = {};
map = new jvm.Map({
map: 'world_mill',
container: jQuery('#world-map'),
regionStyle: {
initial: {
fill: "#F6F6F6",
},
selected: {
stroke: '#FF00FF',
"stroke-width": 0.5,
}
},
}
I am trying to zoom and pan a text which is draggable already. All the examples are on images or shapes and it seems I cannot adapt it to a text object. My questions are:
Do I have to use the anchors or is any simpler way zoom a text with Kineticjs?
I found an example regarding zooming a shape and the code crashes here:
var layer = new Kinetic.Layer({
drawFunc : drawTriangle //drawTriangle is a function defined already
});
Can we call a function while we are creating a layer?
I usually create a layer and then add the outcome of the function in it.
Any idea would be great, thanks.
I thought of many ways you could do this but this is the one I ended up implementing: jsfiddle
Basically, you have an anchor (which doesn't always have to be there, you can hide and show it if you would like. Let me know if you need help with that) and if you drag the anchor down it increases the fontSize, and if you drag the anchor up it decreases the fontSize.
I followed the exact same anchor tutorial but instead I added a dragBoundFunc to limit dragging to the Y-axis:
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false,
dragBoundFunc: function (pos) {
return {
x: this.getAbsolutePosition().x,
y: pos.y
};
}
});
And then I updated the updateAnchor() function to only detect the single anchor I added to the group named sizeAnchor:
var mY = 0;
function update(activeAnchor, event) {
var group = activeAnchor.getParent();
var sizeAnchor = group.get('.sizeAnchor')[0];
var text = group.get('.text')[0];
if (event.pageY < mY) {
text.setFontSize(text.getFontSize()-1);
} else {
text.setFontSize(text.getFontSize()+1);
}
sizeAnchor.setPosition(-10, 0);
mY = event.pageY;
}
Basically mY is used compared to the e.PageY to see if the mouse is moving up or down. Once we can determine the mouse direction, then we can decide if we should increase or decrease the fontSize!
Alternatively, you can use the mousewheel to do the exact same thing! I didn't implement it myself but it's definitely doable. Something like:
Mousewheel down and the fontSize decreases
Mousewheel up and the fontSize increases
Hopefully this emulates "Zooming" a text for you. And I guess being able to drag the text acts as "panning" right?
UPDATE (based on comment below)
This is how you would limit dragging to the Y-Axis using dragBoundFunc:
var textGroup = new Kinetic.Group({
x: 100,
y: 100,
draggable: true,
dragBoundFunc: function (pos) {
return {
x: this.getAbsolutePosition().x,
y: pos.y
};
}
});
See the updated jsfiddle (same jsfiddle as above)
I'm having trouble with trying to get a really simple zooming example going with the v2 Sencha Touch Framework (RC). I've played around with several different layout types, and combinations of it, but it seems that the scrollers size is not updating, or the actual div representing the image is not expanding in order to be panned around? The be honest I'm at a total loss at the moment!!
var testImage = Ext.create('Ext.Img', {
src: 'images/Food/2.jpg'
});
Ext.Viewport.add({
layout: 'card',
scrollable: {
direction: 'both',
directionLock: false
},
items: [testImage]
});
Ext.Viewport.element.on({
doubletap: function(e , node, options, eOpts) {
var transformDetails = { scale: 2, angle: 0 };
testImage.element.setStyle('-webkit-transform', 'scaleX(' + transformDetails.scale + ') scaleY(' + transformDetails.scale + ') rotate(' + transformDetails.angle + 'deg)');
}
});
Does anybody have any insight on how to get this very simple example to correctly pan around once the scale is applied to the image? Feeling pretty incompetent at the moment.
If you add these lines to code, you are able to do events like pan, zoom and pinch.
Ext.Viewport.setPreventPanning(false);
Ext.Viewport.setPreventZooming(false);