The Triangle App (see demo to the right) shows a triangle (the canvas shows
-5..5 x -5..5) and reports its area. The user can do three
basic things:
Choose amongst triangle types Equilateral, Right and Obtuse.
Move the triangle's center, either by clicking on a point
within the canvas, or by typing a coordinate.
Change the triangle's shape by clicking and dragging vertices.
Each user event (e.g. clicking on the T button)
results in an event-message (e.g. clickTriChooseButton). Your
program should read these messages and respond with one or more
action-message(s) (e.g. showTP) that causes
something to happen in the GUI (e.g. showing the triangle choice
pane).
The following will describe installation and
setup, communicating with the GUI, and Triangle
App Behavior.
installation and setup
The Triangle App is based on neutralinojs, which
essentially is like having google chrome as a desktop app.
It should work fine on your VM, but there is a chance it may
not. So if it doesn't start up (see "to test" below), contact
me and we can try to debug it.
To install: in your VM, create the directory proj02 in
which you'll keep all your work, cd into that directory and
give the command (note, you will have to be on the academy
network to do this!):
The way Triangle App is set up, you will receive from the GUI event-messages
related to things the user does, and you will send to the GUI
action-messages that the GUI should carryout in order to change
what's on the screen. Each message has an associated piece of
data. Most of the time the data isn't important, but sometimes
it is, for example when the user clicks on the canvas, the
associated data is the coordinates of the click. You
essentially just need to send data like that straight back to
the GUI with your action-message.
event-messages you might read from GUI
action-messages you might send to GUI
click 0 : within the window
clickOnCanvas <coord> : click within the drawing canvas (with where click occured)
clickRecenterButton 0 : click on the recenter "R" button
clickRecenterPane 0 : click within the recenter pane
clickRecenterTextBox 0 : click within the text box in the recenter pane
clickTriChooseButton 0 : click on the triangle choice "T" button
clickTriTypeChoice <type> : type is one of E, R or O
documentReady 0 : this occurs when the document is first loaded
mouseDownVertex <name>:<coord> : mouse down on one of
the vertices. <name> is one of vertexA,
vertexB, vertexC, <coord> is mouse position
mouseLeaveCanvas 0 : occurs when mouse exits the canvas area
mouseMove <coord> : each mouse movement
generates this, <coord> is new position
mouseUpCanvas <coord> : a mouse up within the
canvas, <coord> is where the mouse is
recenterTextChange <text> : user hit enter in
text box, <text> is what's there
recenterTextFail 0 : a checkCT action resulted in
failure, i.e. not a valid point
recenterTextSucc <coord> : a checkCT action
resulted in success, <coord> is the result
noop <data> : does nothing
showTP <data> : shows the "triangle pane", i.e. the box with triangle choices
hideTP <data> : hides the triangle pane
resetT <data> : resets the triangle to one of the types <data> = E, R or O
showCP <data> : shows the "centering pane", i.e. the box with center coords
hideCP <data> : hides the "centering pane"
checkCT <data> : checks the centering pane text box
errorCT <data> : sets centering pane text box color to red (error!) and grabs focus
moveC <data> : moves triangle to new center, <data> = coordinate of new center
selectV <data> : sets vertex as selected,
<data> = <name>:<coord> where
<name> is one of vertexA, vertexB and vertexC, and
<coord> is an ordered pair
moveV <data> : moves the selected vertex, <data> is mouse coord for the movement
resetV <data> : resets position of selected vertex back to where it was when selected
communicating with the GUI
The ./install.sh script should've created two named
pipes: fromGUI and toGUI. When the
GUI is launched with ./triangle-app-v1.0 &, it will start
writing messages to fromGUI as the user interacts
with it, and it will start reading and executing action messages
that get sent to it from toGUI.
The best way to see this happening is to open three separate
terminal windows, and:
in the first do cat < fromGUI, which will
show the event messages from fromGUI
in the second do cat > toGUI, which means anything you type
gets sent to toGUI, and
in the third ./triangle-app-v1.0 &,
which actually launches the GUI
Now carefully click
once on the T button. You will see the associated event-message
in the first window, you can type an action-message in the
second (e.g. showTP 0), and you can watch the GUI change. Beware: If you let the mouse move over the canvas, you'll
generate tons of "mouseMove" event-messages!
It's worth looking at this, and seeing how the
communication happens.
receive the documentReady 0 event-message
send the noop 0 action-message, since we have
nothing to do
receive the clickTriChooseButton 0 event-message
send the showTP 0 message to show the pop-up
receive the clickTriTypeChoice R event-message
send the resetT R action-message, which resets
the triangle to a right triangle, and send
the hideTP 0 action-message to hide the triangle
choice pop-up.
my code gift to you ...
Since we have been working to learn a bit about Python this
semester, you *must* do your solution in Python!
To help you understand how the brain interacts with the GUI, I
my gift to you is ...
a doNothing solution, that does almost nothing. It
communicates via the two pipes, and responds stupidly by
showing the Centering Pane pop-up when the user clicks on a
vertex, and hiding it when the mouse leaves the canvas.
Otherwise, it simply does nothing.
To run, have two terminal windows open in the
proj02 directory, and run
