New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow users to inspect pictures in Debug Mode #509

Merged
merged 5 commits into from Jul 6, 2017

Conversation

Projects
None yet
2 participants
@three
Contributor

three commented Jul 4, 2017

This PR adds a way of inspecting pictures in Debug Mode which is activated by clicking the Inspect button when the program is being run. Clicking on parts of a picture in debug mode will show the "stack" of what the piece is and which ways it was transformed. This will also cause parts of the user's code to be highlighted indicating where the creation and transformations took place.

Finding source locations is accomplished via GHC stack traces which are now stored in each Picture. All functions for creating and transforming pictures is given HasCallStack so the caller's location is stored in the CallStack. Finding the top piece of picture containing a point is done by calling ctx.isPointInPath for each component piece until one is hit. This information is provided by a callback registered by the entrypoint to the javascript handling the UI.

Currently, debug mode only works for the drawingOf entrypoint, but I plan to add support for animationOf, simulationOf, interactionOf and possibly collaborationOf as well.

three added some commits Jul 3, 2017

Add interface to inspect images in DebugMode
An entry point can now register a callback with initDebugMode taking
a pair of coordinates and returning information about a Picture. This
information will be shown, and the corresponding lines of code marked,
when the user clicks on the image while the Inspect button is toggled.
Allow users to inspect drawingOf
The drawingOf entry point will register a callback with
initDebugMode allowing users to inspect pictures. Toggling the
inspect button will allow users to click on an image and be shown the
corresponding "stack" of pictures generating the element clicked.

For instance if a user clicks a polygon that has been colored,
translated and rotated a box will appear indicating this, and the
locations in code where the translation, rotation and creation of
the picture took place will appear yellow.
Make function names clearer
The findTopStack and findTopStackFromPoint functions refer to the
resulting "stack" of pictures they return, which could be confused
with callstacks.
@cdsmith

cdsmith approved these changes Jul 5, 2017

Show outdated Hide outdated codeworld-api/src/CodeWorld/Driver.hs

@cdsmith cdsmith merged commit 58da117 into google:master Jul 6, 2017

1 check passed

cla/google All necessary CLAs are signed
@cdsmith

This comment has been minimized.

Show comment
Hide comment
@cdsmith

cdsmith Jul 6, 2017

Collaborator

Thanks! Merged.

Collaborator

cdsmith commented Jul 6, 2017

Thanks! Merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment