I have a visualization of node and spoke model and tried cytoscape. Loving how easy it is to implement and able to control the size of the node, color of the node, placement of text etc. On load, the viz eases out and appears. Sort of like https://ivis-at-bilkent.github.io/cytoscape.js-fcose/demo.html.
However once it is loaded, it looks very static.
I do not want to go to d3 / amcharts just for this reason. Is there anyway I can float nodes around or something using cytoscape options or even css like codepen.io/team/amcharts/pen/EJgNey
Use Cola. Refer to the demo: https://js.cytoscape.org/demos/colajs-graph/
Cola can be used iteratively, as in the demo with the slider: The slider restarts the layout with the updated state -- here the slider controls the forces. You can just restart the layout whenever a node is dragged.
Related
I can share the code if needed but it felt like a lot to share to start, so I'll try to explain narratively. I am creating an interface to display network data (as you might have guessed from the title). My first issue has been going on for a few days where visIgraphLayout is not laying out my visual correctly. Regardless of using "full" or "square" as the "type", the network map extends beyond the edge of the display space. When I resize the interface window, then the map will snap to full. Why won't it simply resize automatically? If it matters, I do have the output space in a box element. Also, I have the layout styles working off radiobuttons, and when I switch between styles the map goes beyond the edges again.
Part 2 begins. While the above problem is annoying, it was livable. However, a new wrinkle popped up. I added some font size control to my visNodes code - i.e., radiobuttons set to switch between off (0), small (5), standard (14), and large (40) font size options. Once I implemented this code, when I resize the interface window, now the network map disappears completely after initial load. If I select a new label option, it will redraw but beyond the edges of the space.
All the issues resolve themselves if I ditch the visIgraphLayout, but then I lose the layout functionality which I really like.
I hope this is clear enough. I really appreciate any insights the community might provide. Be well.
I think I have figured out an answer. Long story short, certain pieces didn't work and play well with others. Went through and build it again, and all it good.
Cheers.
I'd like to create a context menu looking similar to this one:
I read suggestions on the web that QWidget::setMask() should be used to create a shape. But how can it fit the variable number of items then? Moreover, the same menu item may take more or less screen space on different machines.
Another question is how to create a shadow around this custom shape? As far as I understand, the mask allows to crop the widget, but not to make it semi-transparent.
I don’t found an easy way to do that! But here goes a way!
Instead of using the Qt mask API, I've used a frame-less widget with transparency enabled!
To draw the shadow, I've used radial gradient!
You can change the size of the menu before opening it, however you can’t resize it after opened (for example resize with mouse).
It’s quite easy add or remove widgets, just respect the layout margin to not draw outside the bounds destined to widgets. To simplify your life I created an inherited class of QPushButton with colors you can easily customize with style sheet.
See the result:
You can browse the source
Hope that helps!
I have been trying to disable scroll bars in a text area using the code:
ScrollBar scrollBarv = (ScrollBar)textArea.lookup(".scroll-bar:vertical");
scrollBarv.setDisable(true);
But all I get is a null pointer for "scrollBarv". What am I missing?
You can't disable a scroll bar in a text area via lookups like you are trying to do.
A lookup is CSS based, which usually means it will only work after a CSS application pass has been applied. Generally, for a lookup to work as expected, a layout pass also needs to be applied on the parent node or scene. The logic in the JavaFX layout handlers for complex nodes such as controls may modify the CSS and nodes for the controls.
To understand how to apply CSS and perform a layout pass, read the relevant applyCss() documentation.
So you could do this:
textArea.applyCss();
textArea.layout();
ScrollBar scrollBarv = (ScrollBar)textArea.lookup(".scroll-bar:vertical");
scrollBarv.setDisable(true);
But even then, it would not do what you want. Because it is just a one-time call. If the user types new text into an empty TextArea until it fills the area, then a scroll bar will show up, and if the user deletes text in the text area, the scroll bar will be removed. And the new scroll bar which shows up wouldn't be found when you did your lookup because it would not have existed at that time.
Generally, the preferred alternative to performing lookups to nodes is to apply CSS style classes with the style class defining the desired attributes of the node regardless of the state it is in (and using psuedo-classes if state based CSS definitions are required). However, that probably won't work in this case as I can't see a definition for a disable attribute in the JavaFX CSS reference guide. Perhaps you might manage what you need via the visibility property, though that is unlikely as visibility is a bit different from disable.
The behavior for controlling the scroll bars is internally coded in the TextAreaSkin (which in Java 8 is not part of the public JavaFX API). You could copy or subclass the TextAreaSkin to customize its behavior and then attach your customized skin to your node. This is really the "proper" way to customize internal control behavior in the way in which you wish. A discussion of the detailed steps to achieve this is outside the scope of this answer.
But, in the end, I'm not sure how useful the behavior you desire is. Rather than disabling the vertical scroll bar, you could just disable the entire TextArea, which would be fine for most similar use-cases. Though, perhaps your use-case is different somehow in requiring only the vertical scroll bar to be disabled.
Hi I want to create an application has this sort of function:
http://looklet.com/create
In this application when you click the button (or some tilelist) on the right the model on the left update accordingly. I wonder how they achieve this. Originally i think it's some sort of image-only pop-up window but then pop-up window seems to update the entire view.
Then I think it might be only change view state, but then I still confused how it can be done using view state.
Flex expert please give me some hint !
Looks like transparent images drawn on Canvas. Each piece must have predefined offset and draw order.
Probably just images placed on one or more Canvas, with the z-order controlled for depth.
The body stays the same, so shirts probably have their own placement properties, as do skirts, underwear, hosiery, etc. as well as backgrounds, faces, etc.
A customer has asked us to a add a feature to his website allowing visitors to colour in panels in a simple line drawing.
The website visitor will have a limited palette to choose from and will select a colour and click in a shape within the line drawing to colour it in as in:
There will only be four or five of these line drawings. The drawings themselves are not required to be interactive or flexible, only the colouring.
The line drawings will be super simple and we don't need to save the visitor's selections although the visitor will want to print or email the result.
Simple simple stuff. Most of the time where you see this done on sophisticated websites I assume it's done with Flash.
But is Flash the only way to go? Or can it be done with JQuery/Javascript or Silverlight or something else? Our team's knowledge covers ASP.NET, HTML, CSS, Javascript. No experience of Flash.
If you have a finite number of line drawings, and a limited number of colours, you could just pre-generate every possible colour/section combination - isolate each area as a transparent GIF/PNG and composite them using position:absolute to create an "onion skin" / animation cel effect. Use some old-school HTML image-map code (or server-side parsing of the myimage.X / myimage.Y parameters, or jQuery) to work out where they clicked, identify the image section under the mouse click location, and replace that image only with the corresponding version in their selected colour.
You can't draw these kinds of shape without using canvas or SVG. And I am not sure about the support provided by browsers for these.
If you can go for canvas then you ca ntake a look at
Processing js library
or for SVG
Raphaël—JavaScript Library
There are only two ways i can think of atm:
Split the line drawings into the colourable elements and show each image absolutly positioned to merge the images into one on the website.
Use Javascript to load a pre-coloured image of that part with "onclick" (or generate a coloured version with asp/php/whatever server-side.
Not sure if it's possible to print absolute positioned elements cleanly.
Use flash, it's simple there so even without experience you should be able to do it in 1-2 workdays.
My guess is that you could use the new HTML 5 canvas element to achieve this goal in an open, standards compliant manner.
Note: canvas is a new feature and is only supported in recent browser releases (latest Safari, Firefox or Chrome for example).