Drawing Interactive paths in JavaFX 8? - input

(please excuse any mistakes in the way of questioning/ formatting the question since I'm new)
[Please Note that I cannot post code here as yet, and FXML code isnt worth posting right ?
Also, my GUI programming experience before this is very little... I picked up JavaFX 8 first because I use Java, and heard that FX >> Swing in many ways]
I am trying to make a GUI that allows the user to input the NumberLink puzzle numbers (through mouse action events), and then, displays the puzzle in a grid with features to draw a path, and undo it. This is almost exactly the same functionality as in Numberlink on Nikoli. The puzzle is quite interesting, and these are the rules. The goal of the UI is for the user to interactively solve the puzzle by drawing lines,etc, just as on Nikoli's site. The solver will be a later addition.
In my project, I have a Stage in which a setup Scene prompts user for rows and columns (to take size of puzzle),
next, it generates an empty grid (I'm thinking of using a GridPane here), and the user clicks the squares to enter the numbers into the square. this phase isnt a problem if I use TextFields and mouse listeners and store info in a grid... the next phase is what I'm stuck at... unless I know exactly how to do that, I cant make progress...
in the third stage, I have to display the numbers to the user just like on the Nikoli site (the highlighting number pairs on mouse hover is a necessary feature too, which I think I can handle with CSS).. and the user should draw paths between the numbers, just as on that site ( I thought VLineTo and HLineTo classes would be suitable.. but I'm not sure, and cant find any alternatives) Please help on this ...
So with this in mind, I made FXML based dummy gui layouts to test if my ideas work...
and I cant get the GridPane to have lines drawing atop it (meaning, I cant place Line objects like HLineTo on top of the grid panes).... is there any other way to do what I need to do ?
I also thought of making multiple Canvas objects in a grid (each square is its own canvas), having the numbers as Text objects, and a Canvas on top of the grid with transparency ON, and having them both on a StackPane, but then, the StackPane's children will not be synchronised.
Please help point me in the right direction, thanks (tell me if I'm missing something basic, which I think I am).

You can wrap the GridPane in an AnchorPane, then use getChildren().add(Node node).
Assuming your controller has defined <AnchorPane fx:id="anchorpane"...> and implements Initializable
#FXML private AnchorPane anchorpane;
#Override
public void initialize(URL location, ResourceBundle resources) {
Line line = new Line(double startX, double startY, double endX, double endY);
anchorpane.getChildren.add(line);
}
NOTE: The line should actually be dependent on mouse events, so it really shouldn't even be in your initialize method; but it should help you get started with what you want to do.
HTH

Related

How to create "menu grid" in kotlin

I have searched google/stackoverflow etc. for answer to my question, but I didn't quite manage to find the right one. I believe I just don't know, how to set the question properly, and thus I cannot find solution.
Is there any way, how to create grid like I drawed in following image (with red colour):
I need to add this red grid to several images, which look very simmilar. The grid field (the one selected) have rolling menu, prescribed position, and a field for additional text. Black lines in background are image in background, and the red supposed to be grid above the image. I thought of creating a lot of buttons alined to each other, but i think that is very bad way to do so.
I would like a pop-up menu from selected field, but opening new activity with same fields is usable aswell. Is there any "simple" solution for creating such grid/menu ?
Btw, I am not programmer with many experience with coding, let's say, I know basics only.
Thanks in advance.

RedisInsight: Configuring graph visual display/results?

Is there a way to configure the display of RedisGraph results in RedisInsight.
May be an option to edit the CSS directly is good too.
The reasons :
The color of the nodes is awful
The font-size is too small
nice to be able to change color of nodes with property value X
it will be good to be able to specify the default-property that will be displayed instead of node ID. Also on mouse-over too. (i know i can changed but it becomes tedious to do it for every result).
same for relationships
ERR: If some of the nodes in the result does not have the property you want to switch to (for display), then the 'switch' does not work i.e. all nodes still display IDs
for my screen it just happen that the +/- zoom is hidden i.e. I have to scroll back and forth. It will be good if we can use the keyboard to zoomin/zoomout
once you select something you have to click outside of the graph area to be able to scroll, supper annoying
command history on the query editor would be nice
ability to pin the result-area so that the new result does not spawn yet another area .. it is nice to have the option for multiple result-areas, but the normal interaction is refining queries rather than writing new query every time. (tabs would have been better)
if possible select-area to zoom will be nice. (by holding mouse down and selecting area )
!! double-click outside a node, may Zoom, instead of doing nothing
!! local zoom/search : typing in search-bar (there is space for it after +/-) to zoomin on the node with that have property and/or value f.e. val:3 , word:test , ...
Posting this here because couldn't find a place to give feedback on RedisInsight !

Bypass/replace event/handler for a VB.NET Windows Forms control I didn't create?

I'm working on a project that has needed a TreeView control with multiple columns. After research looked like a custom control was necessary, and to my luck I found a good one on CodeProject: https://www.codeproject.com/Articles/26849/The-TreeListView-To-End-All-TreeListViews
I've been leaning on this control heavily but have run into a few bugs that have been very challenging to work around given that I can't actually access the source code in the project files the developer was kind enough to share. The main issue I'm dealing with is a crash that pops up when the control is resized almost to the point to where a horizontal scrollbar would need to appear. I noticed that when resizing there is a deadzone of about 10 pixels where this control would show the horizontal scrollbar slightly before you'd need to, likely because of weirdness in measuring the indenting widths of child tree nodes. In this state the scrollbar appears, the scroll box fills the entire bar and won't allow you to scroll left or right.
This doesn't bother me other than the fact that if you use your mouse scroll wheel in this state it throws an ArgumentOutOfRange exception and pulls my application down:
Value of '-1' is not valid for 'Value'. 'Value' should be between
'minimum' and 'maximum'.
I'd love to be able to handle this exception but I'm quite new to VB.NET and Windows Forms and am still learning how events are handled. If there is a straightforward way to override the OnMouseWheel event or otherwise handle errors that may be triggered from it that would be fantastic. That or any other suggestions the community may have would be greatly appreciated.
If helpful, here is the top part of the error's StackTrace:
System.Windows.Forms.ScrollBar.set_Value(Int32 value)
WinControls.ListView.ContainerListView.OnMouseWheel(MouseEventArgs e)
The ListTreeView control (one I'm using) inherits from ContainerListView. ContainerListView's OnMouseWheel event is protected. Does this mean that I won't be able to override it?
Thanks, and happy to provide any other information that is needed.

How to make text within nodes findable in cytoscape.js, dagre-layout

I have been trying to use the dagre-layout in cytoscape.js to create a graph, however I seem unable to find the text within nodes, which I am able to do in dagre-d3, (EDIT: Find as in CTRL + F).
It seems like even in demos such as: http://js.cytoscape.org/demos/labels/ this is not available.
Any ideas on how to make it possible?
When working with Cytoscape, you're not working with traditional DOM elements for the nodes and edges. Rather it draws on a canvas. So are you screwed?
Nope. You just need to program a bit. Add a text box to your page. Add an on change listener to it (or add a button to search only when the user clicks it). When the user types, you can run a search that reads through all of the nodes in the graph. For speed you might want to implement a binary search based on the node's text.
When you find text that matches (exact or partial), you can add a class to change the visual appearance using Cytoscape.js' addClass method. You decision of how to show the data is up to you.

Position of PictureBoxes in form design window do not correspond to their position during runtime

EDIT: I realized that I didn't tag this properly - I should have included vb.net as a tag, on the grounds that there could be a code based solution. Note, that no changes to the resolution are made in my source code.
UPDATE: When the program starts execution, the left coordinate for each PictureBox is multiplied by ~0.376, whilst the top coordinate for each PictureBox.Top is multiplied by ~0.418 . This "down-scaling" applies to all picture boxes. The source code I have is incredibly rudimentary and cannot be responsible for this. I also looked at another project and I still face the same error. A simple but poor fix would be to divide each coordinate by the corresponding values mentioned above.
In order to show you the issue I'm facing, please look at the images below. Compare this image, where each PictureBox (i.e. a snake, set of arrows, etc.) has been placed so that they line up with a feature of the background image:
To this image, where the PictureBox elements are bunched together. Their positions have been "down-scaled" closer to the origin of the form (note that all the elements are transforming horizontally during runtime, which is why the elements are in the top right corner):
In the solution I was given (developed in VS 2010 I believe), the position of each PictureBox goes beyond the background image as shown:
It is clear that each picture box has been placed in an organized fashion. During execution, each PictureBox goes to it's intended position (i.e. lines up appropriately with the background image).
Obviously, the original developer of the solution I was given would have not faced the problem I am. The fact that the solution works properly during runtime indicates some kind of error with my instance(s) of VB. Does anyone know of any solutions?
I've came across this question which asks how to change the default resolution for a Windows 8 App and this question which asks why some applications appear differently on different machines, but they pose no clear solutions. I would appreciate any help, since it's holding me back from critical work I must do. Thank you in advance!
I feel a little silly now - I started carrying out a bit more research on VB forms and came came across this Microsoft documentation on form scaling. Realizing that my issue may have been caused by having this scaling automatically carried out, I then found the AutoScaleMode property of my form and changed it from Font to None, which resolved my problem.