I've got a problem with drawing lines in JavaFx. We're making an application simulating traffic - there are 16 streets, and every street has a different color dependent on traffic. There is a very simple picture:
http://img546.imageshack.us/img546/9949/uliceu.jpg
My first idea on how to do this was to draw streets as lines and simply change its colors. But I cant put a text on the line (I want a text with a street name). So I tried to put a line and a text on the StackPane. Then I added that StackPanes on BorderPane center... But it didnt work. Seems like StackPane doesn't respect line's start x, start y... The lines overlapped each other.
Main pane of the app is BorderPane and I want to put a map on center. It doesn't need to be resized dynamically, we have only one map so It can be positioned in static way.
I need something like that:
http://img834.imageshack.us/img834/1157/ulicac.jpg
But streets need to connect to each other... like on the first picture
Have you any suggestions on how to do that?
Any tips would be appreciated :)
Like that:
Group gr = new Group();
Text text = new Text("1st Street");
text.setFill(Color.web("fabbff"));
Line line = new Line(0, 150, 200,150);
line.setStrokeWidth(20);
line.setStroke(Color.web("000000"));
gr.getChildren().addAll(line, text);
group.getChildren().addAll(gr, //and every other street);
The StackPane you were using will by default centre everything in the centre of the StackPane, which won't be what you want.
Instead of a StackPane, use a plain Pane (if you need to CSS style the pane or have controls in the Pane resize when you resize the Pane), otherwise, use a Group. As you state that the map you are drawing doesn't need to be resized dynamically, then perhaps just a Group is fine.
The order in which items are placed inside the group or pane's children list will determine the order in which items are rendered. Items added first to the list will be rendered first and items added last to the list will be rendered on top of the items added first. So you add Street lines to your Pane or Group first, and then add Text (or Labels) on top of the streets.
Another option is to use a direct draw Canvas, but, for your application, using scene graph objects in a Pane or Group is probably a better approach.
Use either one Pane/Group with all of the streets added first, followed by all of the names or one Pane/Group for all streets and another for all street names. Separate panes might be nice because you could toggle visibility on the street names as needed by setting a visible flag on the street name group. Don't use one group for both a street and its name, then try to layer multiple street+streetname groups on top of each other, otherwise at the intersections some of the street names will be obscured by streets running on the top of them.
when I draw a line I can specify position x,y, but I can't set position of Text or Label... or can I?
In addition to positioning lines by providing coordinates to them at line creation, you also need to position the text so that it will be displayed on top of the lines. You can use the text.relocate(x, y) method to locate the text at a given location.
I know this is an old thread. However, I had the same question: How to add labels to the line that are robust against moving the line arround. This code works for me:
line = new Line();
line.startXProperty().bind(source.layoutXProperty().add(source.getBoundsInParent().getWidth() / 2.0));
line.startYProperty().bind( source.layoutYProperty().add(source.getBoundsInParent().getHeight() / 2.0));
line.endXProperty().bind( target.layoutXProperty().add( target.getBoundsInParent().getWidth() / 2.0));
line.endYProperty().bind( target.layoutYProperty().add( target.getBoundsInParent().getHeight() / 2.0));
label.layoutXProperty().bind(line.endXProperty().subtract(line.endXProperty().subtract(line.startXProperty()).divide(2)));
label.layoutYProperty().bind(line.endYProperty().subtract(line.endYProperty().subtract(line.startYProperty()).divide(2)));
getChildren().addAll( line, label);
Related
I am trying to create dashboard edit mode grid with gridstack javscript library.
Here is what I am trying to accomplish which is similar to this Databox platform. This is what it looks like when you edit any of the dashboard to view/edit it in grid mode.
So when I drag the blue border handle and scale the div(or even move with cursor hand) then the around grid(which is background layer with absolute position in reality) is automatically adjusted to match the corresponding div. Like this.
Even if there are multiple widgets there, resizing is working everything perfectly fine.
e.g. if there was any sibling widget then resizing this widget would also resize the sibling widget but can not go beyong 1 * 1 grid which is smallest size there.
Even after resizing both widgets, the background static grid boxes (with yellow border) fills the remaining vacant space similar to what is the concept of dense packing algorithm in css grid.
They are removed when widget is grown and added when it is shrinked.
As it seems super complicated to achieve this, is there any default feature like this with grid-stack library?
I'm drawing activity diagram by Enterprise Architect 12. The diagram type is Activity under UML Behavioral. I found the positions of the labels of connectors are close to the target element as shown in the picture. It's very confusing.
How to change the default label positions to make them close to the source element as shown in picture?
Or is there any easy way to change the label of connector from Target Top Label to Source Top Label?
Better you use Guards for the label which you find in the Constraints tab. These appear in the middle label position and enclosed in square brackets. This is actually what you want to show.
For your amusement here's my original answer
There is no way to change the label position the way you want it out-of-the-box. You will need to write a script to do that.
There are two ways to accomplish such a script. The most comfortable is to use an add-in that responds to EA_OnPostNewConnector. You would then need to check whether the connector is one from a Decision to an Action and move the label accordingly.
The second one is to have a simple script (you might edit in EA's scripting window) that you run for an open diagram to scan for all Decisions in a diagram and alter the label position accordingly.
Altering the label
Once you got a connector from a Decision to an Action at hand you will need to change the label position like this:
get the according connector from DiagramLinks since it has the label position
get the element IDs from Connector.ClientID and .SupplierID and retrieve the elements with Respository.GetElementByID(<id>)
assign both elements to either decision or action by looking into the Element.Type
get the according DiagramObjects from the diagram which match the both elements (so you can get their position on the diagram)
now it's time for a little trigonometry: the position (DiagramElement.Left, .Right, .Top and .Bottom contain the appropriate coordinates) of the two elements makes out a vector at which end you calculate (I will leave you some fun) the label position where you think it should go
finally you take this coordinate and put it into the label position (see below).
The label position is stored in DiagramObject.Geometry. This is a semicolon separated string where one tag is LRT=<colon-list>;. <colon-list> itself is a colon-separated list where two are something like OX=-1:OY=-71: and represent the label position. This is a position relative to the "normal" position where the label is placed initially by EA.
So all in all: lot's of fun awaiting you :-/
I need to translate PSD file into HTML/CSS/JS...
Here is this project:
https://s15.postimg.org/s421pj5mj/PSD.jpg
https://s24.postimg.org/8xq87z3v9/PSD_2.jpg
QUESTION What are those 1.vertical and 2.horizontal sky-blue lines and how are they supposed to help me as for somebody who translates this PSD into HTML/CSS/JS ? Don't they seem a bit chaotic?
Despite being blue in your example, these are called "Redlines". The lines are meant to help you see the alignment, sizing, and spacing of elements.
For example, there is one center line down the very middle. You can use that to see that the "Creative Digital Solutons" text is centered, as is the the "Personal Services" text, "Responsive web" section, and "Latest project" section.
You can also see that at the very bottom of the second image, certain pieces of text in each column should line up with certain pieces in other columns.
Usually you will find a particular element or group of elements like this:
With the red lines I added you can see that the icons should all be the same width, and the left side of the icons should align with the left side of "Latest Posts".
Sometimes these redlines contain specific measurements (font: 14pt, margin: 10px, etc.), but this one doesn't, so you just have to use the lines to help you visualize
Yes it is chaotic, but that's how it goes sometimes
I wanted to allow the Emacs cursor to move around freely outside of actual text (similar to virtualedit=all in Vim).
"Oh," I thought, "I'll just keep track of a virtual cursor and draw it to the screen myself."
But it turns out the actual native C drawing routines (such as draw_glyphs) seem to refer back to the buffer contents to decide what to draw (I could be wrong though).
My next idea was to make a giant overlay of all spaces so I'd have complete freedom where to put stuff. But an overlay only goes over ranges of actual text, so again, this does not seem to give me what I'm looking for.
Is this a reasonable goal without hacking the C code?
I believe the writeable area of a window is intrinsically limited to the buffer with which it is associated, i.e. you have to draw in an area where buffer content exists.
(One example of this limitation is the impossibility of drawing a vertical guide line in the 80th column to help the user identify long lines; currently the best possible implementation of such a feature is to highlight the "overflow" of each too-long line.)
You can do the same as what artist-mode does without adding spaces to the buffer:
when trying to place the cursor after the end of the line, just use an overlay with an after-string property which adds the spaces in the display without modifying the buffer.
Have a look at "artist-mode" (M-xartist-modeRET) - it allows you to draw in Emacs.
From the function documentation: "Artist lets you draw lines, squares, rectangles and poly-lines, ellipses and circles with your mouse and/or keyboard."
You can look at popup.el from the auto-complete package, which can pop up tooltips and menus and such at any position, including positions outside the contents of the buffer. Maybe that will show you how you can do it.
Okay the title may be a little confusing, but here's what I'm trying to do :) I have a game in XNA where every tap from the user draws a moving circle on the screen. The circle has a tag, say 'dogs' displayed on it. So imagine multiple taps on the screen, and we have all these circles of various colors and sizes moving around the screen with different (but constant) velocities. Each circle with different tags: 'dogs', 'cats' and so on...
Clicking on empty space generates a new circle at that point. Clicking on one of the circles "selects" it, turning it into a greeen shade and slowing its velocity down to a fraction of what it was. Clicking on it again "unselects" it, and restores its original color and velocity (trajectory does not change).
With each circle comes a tag, and as of now I'm populating these tags randomly from a string array (which means there's a chance tags will repeat). I would like the tags for newly created circles to be relevant to previous "selected" tags. So when I click on 'dogs', I would like 'German Shepherd' but I would also like 'dog parks' and 'lemurs' assuming dogs get along well with lemurs.
What would be the best way to approach this problem. In my head I have a massive many-to-many mapping, but I can't seem to translate it to code. Thanks for looking.
FYI I'm using the sample project from here:
http://mobile.tutsplus.com/tutorials/windows/introduction-to-xna-on-windows-phone-7/
At a glance your data structure sounds like a tree, except each node has a list of parents instead of a single parent. You could describe it as many to many like you said, but there's likely more links in the child direction than the parent direction.
Alternatively you could leave it as a tree structure and add a list of associations to nodes, so that like you say lemurs and dogs can be associated, even though they are not in a parent / child relationship.