Is it possible to have a user draw a graphic in livecode? - livecode

For a game I am working on the user must draw a line and an object will follow the line. To me it would be logical for the user's line to be a graphic and then do something like this (the user's line is called "userLine")
move the image "xyz" to the points of graphic "userLine"
is it possible to have the user draw a graphic?

Check out the choose command. This should get you started.
To start out drawing your line:
(This could be in a a button script, for example. However you want to trigger the user drawing.)
if there is a graphic "userLine" then
delete graphic "userLine"
end if
set the style of the templateGraphic to "line"
set the selectionHandleColor to the effective backgroundcolor of this card
choose graphic tool
Then in the card script add the following handler:
on newGraphic
choose browse tool
set the selectionHandleColor to black
set the name of graphic (the number of graphics) to "userLine"
move btn "radio" to the points of grc "userLine" in 2 seconds
end newGraphic
Some variation of this should work.

Related

How to not showing the coordinates (x,y) when mouse move?

I'm able to make a svg file using gnuplot. when I click any place in the plot, the (x,y) coordinates will show up, when the mouse move, the coordinates change, when I click the plot again, the coordinate disappear.
How to not display the coordinates when mouse click and move?
Thanks!
I have tried:
set mouse noruler
set mouse mouseformat 6
set mouse mouseformat ""
set mouse clipboardformat 6
The code is:
set term svg mouse jsdir "http://.../TEST/"
set output "test.svg"
plot 'test.data' using 1:2:3 with labels hypertext point pt 7
I think I initially misunderstood your question (1st answer now deleted). Let me try again.
You are describing the default behaviour of mousing support in gnuplot+svg.
(1) Simple option: If you don't want any of this, do not include the mouse keyword when you select the terminal.
(2) Infinitely customizable option: The javascript mousing behaviour is implemented in a separate file gnuplot_svg.js. Several versions exist, but you could edit or replace any of them to suit your needs. The most recent version is here:
gnuplot_svg.js
(3) Possible compromise: The *.svg file produced by gnuplot contains lines like this:
<g id="gnuplot_canvas" onclick="gnuplot_svg.toggleCoordBox(evt)" onmousemove="gnuplot_svg.moveCoordBox(evt)">
If you want to disable only the response to mouse clicks, or to mouse movement, edit these lines to remove the corresponding onclick or onmousemove directives.

I need help getting my Livecode program to do what I need it to.

I have created some buttons and some graphics on a substack for referencing. I need to be able to click on button to call an instance of one of those graphics onto the main stack. Then I want to be able to drag that graphic onto one of my other buttons and have it replaced with a different graphic. I would love any help with the coding or a link to a tutorial on how to do something similar. For example my basic button is a cups button. When its clicked I want it to create an instance of my "EmptyCup" graphic. But then if I drag the EmptyCup graphic to the CoffeeMachine button I want to replace EmptyCup with CupOCoffee and so on.
To put a copy of the graphic in another stack, use the copy command, like this:
copy graphic "EmptyCup" of stack "Resources" to stack "Main Screen"
There are a number of ways to change the graphic when you drag it, but the simplest way is to set the properties you want to change:
on mouseEnter -- goes in the "CoffeeMachine" button script
set the style of graphic "EmptyCup" to \
the style of graphic "CupOCoffee" of stack "Resources"
-- you can set other properties as well, such as the backColor, etc.
end mouseEnter
If you're using images rather than graphics, set the imageData property instead (after making sure the image's size is the same as the one whose imageData you want to use):
set the width of image "EmptyCup" to ]
the width of image "CupOCoffee" of stack "Resources"
set the height of image "EmptyCup" to ]
the height of image "CupOCoffee" of stack "Resources"
set the imageData of image "EmptyCup" to ]
the imageData of image "CupOCoffee" of stack "Resources"

Paint red lines on rulers indicating the mouse position (MFC/Direct2D)

I would like to implement red lines moving oh H/V rulers similar to what I see in windows paint brush (8.1) indicating current mouse position. See the example (red line at 560):
What would be the best way to do it. Direct2D Animation? layers? any other simple trick? The thing here is of cause doing it efficiently without repainting the whole area on mouse move.
I currently using MFC/direct2d so I paint myself the area with field and rulers inside the view, so I have full control on graphics here.
There are many ways to attack this problem. The simplest is to rely on your OnPaint function to paint the line in a location based on a member variable. In your OnMouseMove handler, call InvalidateRect on the current location of the line based on the saved variable, update the variable, and call InvalidateRect a second time for the new line position.
The BeginPaint call that is generated in the CPaintDC constructor will set a clipping region based on the invalidation rectangles you provided. Even if your OnPaint tries to paint the entire window, only those parts that have been invalidated will be redrawn. If this is too inefficient, you can cache the ruler in a bitmap and use GetClipBox to determine which part of the bitmap to blit to the screen.

How to fade a part of an object or image in corona sdk when move it?

I have a question in corona sdk. I need to fade top part of an object (like 60px of 250px) when moving the object to top before it goes out of the screen.
In another word, I need to set a display area for an image or object which its height is more than screen height. Like a top padding space which image will be faded when moving out of the display area (not the screen area)
Any tutorial or suggestion?
Sounds like image masks are exactly what you need.
In your case you would need to set the mask when moving the object to top, unset it when it comes back.
You can check the documentation for masks here:
http://docs.coronalabs.com/guide/media/imageMask/index.html

javafx drawing lines and text

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);

Resources