Here is an example of what I'm doing:
function showNeighbors(ele) {
cy.add(this.cyData.getElementById(ele.id()).neighborhood());
cy.elements().layout(layoutOpts);
}
This is the only why I can find to add the new nodes to the layout. I would like to add nodes similar to how D3 does by having a .enter() function or some way to add nodes to the current layout. Is this possible in Cytoscape.js?
If the layout supports smooth transitioning (like Cola), just stop the layout on the old elements and start a new layout on the entire graph (including the new element): layout.stop(); layout = cy.elements().makeLayout(...); layout.run();
http://js.cytoscape.org/#layouts/layout-manipulation
If the layout doesn't support smooth transitioning, then it will still work but the animation won't necessary be smooth (e.g. a node may initially jump).
Related
I am working on a Qt-UI with PyQt and found this nice snipped to create a custom collapsible box widget here: How to create collapsible box in PyQt
I have just replaced the internal QScrollArea by a QFrame.
It works perfectly, as long as the content of the layout that is added stays the same.
However, I allow the user to add or remove widgets from that layout dynamically during use. Here I need some help. I am adding a Grid Layout with, say, 3 widgets inside there (initial creation of the box with .setContentLayout) and once the user adds a 4th widget:
the layout is compressed and keeps its original size
all widgets inside are compressed to fit in the newly created one
overall size of the collapsible box is kept constant.
I have played with various options like updateGeometry() on the content_area and all surounding widgets. It seems I don't fully understand what this code does, I am not really familiar with these animations yet. My best guess is, that the animation somehow blocks the update of the height of the collapsible box, causing the layout to be compressed.
I would be really happy for a pointer where to look / what to adjust to get the size of the collapsible box reacting to the size of the containing layout.
Thanks!
I am using Cytoscape Dagre extension to show hierarchical graph from left to right. It has 14 children and one parent 1 and main parent. I am calculating the height of the container using the number of nodes. Then I am calling fit function after the layout is created but it is not working.
I have added a fit button and if I click on it after the graph is loaded, it works then. What am I doing wrong? I would like fit function to be called after the graph is initialzed.
Here is the stackblitz link: https://stackblitz.com/edit/dagre-childrenconnected-fit?file=src%2Fapp%2Fapp.component.ts
You can try clicking on Fit and see the graph is fitted properly if you click on fit button but it does not work if you refresh the page.
Your code is not working correctly, there are some errors.
(1) Firstly, your "dynamic height" [ngStyle]="{'height': heightTest + 'px'}" is undefined at graph init and runs into a weird error after that. Just use something like [ngStyle]="{'height': '100vh'}" and go from there.
(2) As the docs say:
If your code resizes the graph’s dimensions or position (i.e. by changing the style of the HTML DOM element that holds the graph, or by changing the DOM element’s position in the DOM tree), you will want to call cy.resize() to have the graph resize and redraw itself.
Your approach is not really ideal, I'd suggest just changing the height of your container and then resizing/fitting your graph:
let container = document.getElementById("cy");
// just some random height depending on the number of nodes
container.style.height = `${this.cy.nodes().length * 40}px`;
this.cy.resize();
this.cy.fit();
Here is the edited StackBlitz: link
I am finding it difficult to set the right look and feel of a CN1 Slider control. Essentially i want it to look like the one in the CN1 Default Demo of the Theme window, and have it with the Thumb image to allow the user to set the scroll.
But when i code it up as per online examples, it comes out skinny on the simulator (as below)
...but doesn't display the line at all on the actual iphone device.
When i start messing with the methods, such as 'getSliderEmptyUnselectedStyle()' then this makes the background show and can see the progress but its tall and i cannot seem to shrink it.
Container container = new Container(new FlowLayout());
container.getAllStyles().setBgTransparency(255);
container.getAllStyles().setBgColor(0xffffff);
Slider slider = new Slider();
// slider.getAllStyles().setFgColor(0);
// slider.getAllStyles().setMarginLeft(0);
// slider.getSliderEmptyUnselectedStyle().setBgTransparency(255);
// slider.getSliderFullUnselectedStyle().setBgTransparency(255);
// slider.getSliderEmptySelectedStyle().setBgTransparency(255);
// slider.getSliderFullSelectedStyle().setBgTransparency(255);
// slider.getSliderEmptyUnselectedStyle().setBgColor(0xffffff);
// slider.getSliderFullUnselectedStyle().setBgColor(0x42B72A);
// slider.getSliderEmptySelectedStyle().setBgColor(0xffffff);
// slider.getSliderFullSelectedStyle().setBgColor(0x42B72A);
Style sliderStyle = UIManager.getInstance().getComponentStyle("Label");
sliderStyle.setFgColor(0);
slider.setThumbImage(
FontImage.createMaterial(FontImage.MATERIAL_RADIO_BUTTON_CHECKED, sliderStyle, 4).toImage());
slider.setMinValue(0);
slider.setIncrements(25);
slider.setProgress(entity.getCompletion_pct());
slider.setEditable(true);
container.add(slider);
return container;
How can i get it pretty much to the CN1 example?
Thanks
The slider in the example used a 9-piece border or a 3-piece border both of which have a fixed minimum height/width. This minimal height is applied to the way the slider is rendered.
Your code can be made thicker with padding but it will create a problem when you add a thumb. Once you add the thumb it will increase the overall size and make the entire height of the thumb have that background. So you need to style this via the designer and for this specific case you would want to use an image border that is carefully measured to align with the thumb image.
Also notice you used getAllStyles() which is wrong. Slider is a special case and uses the Slider and SliderFull UIID so effectively the component has two UIID's and two separate sets of Style objects.
I would like to add some custom styles to the nodes in my cytoscape graph based on some condition. Is that possible?Specifically, I would like to add multiple borders with inner border as percentage circle. I am open to using predefined percentages. Something like below:
Is this possible? Would be great if someone can suggest a work around.
I can get a single border using the border properties in cystoscape.js. In plain css3, this can be done using pseudo elements, but not sure how that works in cytoscape.js
Cytoscape.js does not support pseudo elements.
If you want custom graphics, you can use background images. If you want them dynamically generated, you can use a function style property value that returns the image URI. You can use the canvas API to create the image.
The pie styles are similar to the purple section in your image, but you have a hollow portion -- so it's probably best to generate the image.
When you create a node, you can add extra information ( API is great )
NEWnode.push({
group: "nodes",
data: {typeCss: 'css1', etc: 'etc'},
// group: css1,
// classes: css1
});
// add node
cy.add(NEWnode);
and get/parse the node informations
cy.nodes().each(function(i) {
}
Application requires more than one window (Lets call A,B,C). Each window has more than one view (table views, image views as well as web view). Lets say window A has three views (x, y,z) and window B has three views (d,e,f). Application needs to display images of different size on orientation change.
I have achieved the same using gesture event listener and looping through windows for views and replacing the view with new images. The problem I have is when we navigate from one window to other and the orientation changes, the loading of view after looping goes for a toss. Is there a better way to achieve the same ?
Is there a method in titanium like following code to replace a view ?
var self=Ti.UI.currentWindow
var newView=Ti.UI.createImageView({image:'abc.png'})
self.replace(self.children[1],newView )
Unfortunately there is now replace method.
You need to remove the whole view and add it again but this can cause a wrong layout if you have more than one view on a same level. The implementation then depends on the layout which was set (vertical, horizontal, composite etc).
For example in vertical layout removing an item and simply add a new one would remove your specified item but appends the new one at the end since you can't specify in which order it should be added.
If you have a composite layout you can specify absolute positions but adding a new view causes a higher zIndex for this view so that it will hide views that were previously added at the same/similar position.
Why not simply change the image link ?
var self = Ti.UI.currentWindow;
self.children[1].image = 'bcd.png';
Well you could always lock the orientation of your window. But this isnt exactly good practice (especially for iOS).
Generally orientation changes are handled pretty well if you define the width and height of your views to be percentages or Ti.UI.FILL, if you have a composite layout. Check that you are not giving the views absolute coordinates as this could cause layout problems. If you have a vertical or horizontal layout you usually don't have to worry about orientation change, unless you did not nest your views in a main container correctly.
Prasad,
If this is about just ensuring that the images look good on different orientations,you can make use of the different folders provided by Titanium in the android/images folder.You can just make different images for each of the orientations and device sizes.For IOS you can change just the images on orientation change as you are already doing.
https://wiki.appcelerator.org/display/guides/Using+density-specific+resources+on+Android
If you are concernced about the layout there are couple of things you can do:
1.Give all the height or width values in percentages.This way all elements will be re sized once the orientation changes automatically.
2.On each window open check if the orientation is vertical or horizontal by default and accordingly set the image attribute of the imageView.
Ti.UI.orientation
This property will give you the orientation of the window by default.Values of this property could be this
Ti.UI.PORTRAIT
Ti.UI.UPSIDE_PORTRAIT
Ti.UI.LANDSCAPE_LEFT
Ti.UI.LANDSCAPE_RIGHT
Use "if else" and accordingly set the images.