Changing Point Labels

[Minoush M]

Hello,

I am having quite a slow start but I am gradually getting there. I want to be able to insert a point, and later change its name by clicking on the point and entering a new label.

In the example [1], I have a simple interface with two buttons. One button is meant to be for "Point Insertion" and the other one for "Point Selection". The idea is that the user clicks on "Draw Point" to add as many points as desired, and then clicks "Select" and clicks on a point to change its name.

Changing the name of a point is where I am really stuck. I think I need to perform two tasks to achieve my goal.

1. Be able to change the name of a point to a hardwired (constant or random) name whenever I click on that point.

2. Somehow be able to accept user input to specify a desired name for the point, and use this name in lieu of the hardwired name in the previous task.

In order to achieve Task 1, I added the following after creating the point point.

point.on('up', function () {             

            point.setName("Another Name");              

           });

With the intent to change a point's name to the constant Another Name whenever the point is selected. This does not work when multiple points are inserted as it only changes the name of the last-inserted point.

So my questions are: (i) How would I fix this?, and (ii) how can I approach doing the second task namely accepting text from the user?

Many thanks.

[1]

https://jsfiddle.net/Minoush82/0o2w3tng/

[Murray]

Hello again, Minoush

(1) The problem is related to what I mentioned in my last response, that it's a good idea to add points and other objects to an array, so you can address them more easily later.

But in this case, there is an easy fix. You need to employ "this" so your point.on('up'...) targets the actual point the user has just selected.

So it would be like this:

        point.on('up', function () {             

            this.setName("Another Name");              

           });

You can see it in action here: https://jsfiddle.net/mbourne/8tjzacbm/

(2) But the trouble is there is an issue if the user does as follows:

• Clicks "Draw point" then creates a few points
• Clicks "Select" and changes the name of one or two of the points
• Clicks "Draw point" again and then creates some points
• Then clicks one of the earlier points. In this case, we'll get a new point created (the main board.on('up'... ) AND a renaming of the existing point (from the point.on('up'... ) resulting in 2 overlapping points in the one location

(3) To fix this, I made use of this code https://jsxgraph.uni-bayreuth.de/wiki/index.php/Browser_event_and_coordinates which ensures we are not creating a point where one already exists. (I changed it to "up" rather than "down").

I also removed the buttons since:

• A user should be only able to create a point, or change its name - not both at the same time
• I feel the buttons are sending you down a bit of a rabbit hole (they are not the best for this kind of usability, and they are making your coding harder than it needs to be)

So in this next version, https://jsfiddle.net/mbourne/apxft854/, you'll notice the following:

• The user creates points by clicking
• The user changes the point name by clicking the point
• If there is text in the input box, the point takes on that text when clicked

I'm not sure of your final intent, but it may be better to modify the app such that the user enters the name they want first, then clicks and the newly created point takes that name immediately.

Also note I changed the CSS to allow for the input box.

Hope it helps

Regards

Murray

[Minoush M]

Thank you Murray! You are a star!

I was unable to replicate the behaviour you mentioned in your first solution where you said two points will be overlapping. I added a "console.log(drawnObjects.length);" line [1] to inspect the size of the array of points but I could not get it to show more points than expected. I did the following use case:

- Click on "Draw Point".

- Click on a random location in the board to insert point A.

- Click on a random location in the board to insert point B.

- Click on a random location in the board to insert point C.

- Click on "Select".

- Click on A to change its name.

- Click on B to change its name.

- Click on "Draw Point".

- Click on a random location in the board to insert point D.

- Click on a random location in the board to insert point E.

- Click on a random location in the board to insert point F. 

- Click on "Select".  

- Click on point C to change its name.  

- Click on point E to change its name.  

I could not see any overlapping "visually" or through the console. Here I append the console log to the previous actions.

- Click on "Draw Point". []

- Click on a random location in the board to insert point A. [ "Array Size = 1" ]

- Click on a random location in the board to insert point B. [ "Array Size = 2" ]

- Click on a random location in the board to insert point C. [ "Array Size = 3" ]   

- Click on "Select". []

- Click on A to change its name. [ "A click somewhere has been performed.",  "Array Size = 3" ]

- Click on B to change its name. [ "A click somewhere has been performed.",  "Array Size = 3" ]  

- Click on "Draw Point". []

- Click on a random location in the board to insert point D. [ "Array Size = 4" ]

- Click on a random location in the board to insert point E. [ "Array Size = 5" ]

- Click on a random location in the board to insert point F. [ "Array Size = 6" ]    

- Click on "Select". []

- Click on point C to change its name. ["A click somewhere has been performed.", "Array Size = 6"]

- Click on point E to change its name. ["A click somewhere has been performed.", "Array Size = 6"] 

The second solution you kindly provided [2] is a great help as I had no idea how to deal with reading user input, but it seems standard JS/ jQuery is doable here.

As for the app's intention, I am trying to implement something similar to (but not as rich)  Geogebra Classic to enable users to draw Euclidean-geometry objects such as points, lines, parallel lines, angles, etc. So I am playing with basic JSXGraph functionality to gauge the difficulty of the project and get myself accustomed to JSXGraph. The buttons are definitely making life harder but I cannot see how I can otherwise allow the user to draw different geometry entities --- especially when it comes to drawing entities with constraints e.g. line perpendicular on a given line, or angle with size x for instance. For each of these, I need some sort of mode that allows the app to perform the user's specific intention.

Cheers.

[1] https://jsfiddle.net/Minoush82/98s02b67/

[2] https://jsfiddle.net/mbourne/apxft854/

--
You received this message because you are subscribed to a topic in the Google Groups "JSXGraph" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsxgraph/sS7YQxpT56k/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsxgraph+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/c4151964-9bf7-4693-9ff8-496452c78989n%40googlegroups.com.

 

[Murray]

Minoush

(1) As mentioned earlier, the double point problem comes if the user does create -> rename -> create -> select existing point.

Here's a screen shot, where I did the above, and after creating point "I", I selected it. The point name changes to "Another name" and a new point "J" is created, almost on top.

The same thing happens if the user tries to drag a point, after having renamed one earlier (thus invoking the 2 "up" listeners).

(2) Now I know what you are trying to do, the buttons do make sense.

I would encourage you to place your buttons outside of the JSXGraph board (as ordinary HTML buttons). Currently, they will disappear if the user zooms in, or drags the whole board. You can make buttons or other elements fixed (so they don't move when the board is zoomed or dragged, like I do with axes in Item (10) on this page: https://www.intmath.com/cg3/jsxgraph-axes-ticks-grids.php) but putting them outside the board will give you a lot more flexibility.

(3) There has been some work done (by Darko Drakulic) on providing a GUI for JSXGraph, but most of the links are now broken and the latest activity is around 2018.

See: https://groups.google.com/g/jsxgraph/c/piTWvVfZjp8/

Here's some of the original resources on Github which may save you reinventing some wheels: 

https://github.com/ddrakulic/JSXGUI

Regards

Murray

[Minoush M]

Awesome! Thanks a lot! That will save me a lot of time :-)

To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/554c9acd-9766-4b16-8fca-8549ca55fe70n%40googlegroups.com.