Giter VIP home page Giter VIP logo

path.jerryio's Introduction

IntroIcon

PATH.JERRYIO

The best path editor in VRC for designing skills routes and generating path files.


Introduction

PATH.JERRYIO is a Progressive Web App (PWA) that is installable and can be used without an internet connection. It is available on any device with a web browser, including desktops, laptops, tablets, and mobile phones.

It is a powerful and flexible multi-purpose path editor/planner, which allows users to design and edit paths with intuitive click-and-drag interactions. After that, a readable path file can be generated for the robot, it will be used by the robot to travel the designed paths in the autonomous period with path-following algorithms.

Screenshot of PATH.JERRYIO with a path in the editor

Demonstration

We aim to provide the best environment for path editing and planning within PATH.JERRYIO by focusing on delivering a user experience comparable to industry-grade graphing tools. Here are some examples showing how PATH.JERRYIO can be used:

Smooth and User-Friendly

The dragging, panning, and area selection interaction continue even when the cursor is outside the canvas. This shows how much effort went into user experience with great attention to detail.

Example of dragging, panning, and area selection

Intuitive and Straightforward

It is designed to have a similar editing experience to other graphic design software. For example, press shift key to drag multiple controls, hold shift key to enable magnet snapping. The hotkeys, shortcuts and mouse gestures are similar and easy to catch up.

Example of zooming, panning, magnet, and selection

Professional and Powerful

You'll be amazed at what you can do with PATH.JERRYIO: hide or lock entities, undo/redo any changes you make, manipulate speed for every waypoint. It is the most powerful path editor in VRC.

Example of undo/redo and lock entities

It Is for Everyone

PATH.JERRYIO is created for everyone who takes part in the Vex Robotics Competition:

For Drivers

This editor can be used to design routes for one-minute driver skill, allowing you to design, preview, and simulate driving routes in a more intuitive way, as well as share driving routes with others more easily.

It is easy to get familiar with PATH.JERRYIO. It shares the same editing experience with other graphic design software, like Adobe XD, Sketch, Figma, etc. The hotkeys and mouse gestures are similar and easy to catch up.

All the entities are listed in the Path Panel on the left. You can temporarily hide or lock them from being accidentally moved or adjusted. Since speed control, format settings, and the file format don’t really matter for you, you can hide the Speed Graph Panel and the Configuration Panel to get a cleaner user interface to focus on what you are working on.

For Programmers Using Vendor Library

If you are using a library with path-following algorithms, and you need a path editor to design the path and generate path files, this is the one you are looking for.

PATH.JERRYIO supports multiple output formats. We are working closely with many library developers to ensure the output files are generated correctly with maximum compatibility. That said, the output files can be opened again in PATH.JERRYIO(also in the future), read by the robot, and can also opened in the library’s path editor too(if there is one)

Select the library you are using in the editor, and you will be able to generate path files with access to all the configuration dedicated to the format you are using.

PATH.JERRYIO is designed to be flexible and extensible. It supports multiple interchangeable output formats. That said, even if the library you are using releases a new version with a different path file format in the future, you can still open the old path file in the editor, and upgrade it to the new one.

For Library Developers

PATH.JERRYIO can be used to generate path files in any format. It is not just a path file generator for a specific library. Library developers can create a new format, and submit a pull request to add it to the editor.

Depending on the path-following algorithm, what is included in the path file, can be different. For example, a library using pure pursuit may need the coordinate, heading and speed of the path waypoints, while a library using motion profiling may only need the coordinate of the segment control points.

By using PATH.JERRYIO, you only need to implement the path file parser and generator with an easy-to-use API. You can focus on the path file format, path-following algorithm, and the code used in the robot, without spending time on the editor and user interface.

Main Features

Functionality

  • Use Bézier curves with full control over the shape of each segment
  • Add/Delete control points with mouse click
  • Split segment or change segment type with mouse click
  • Split path into multiple paths
  • Edit the exact coordinate of each control point and end point
  • Edit the heading of each end point, support Holonomic drive and Differential drive (See data structure section for more detail)
  • Delete multiple control points all at once
  • Undo/Redo support
  • Cut/Copy/Paste paths and control points
  • Reorder paths and control points
  • Real-time path preview
  • Handle multiple paths with custom names at the same time
  • Reorder path automatically based on the path name
  • Manipulate speed, acceleration, deceleration in detail with speed profile and keyframe
  • Set minimum and maximum speed limits, curve deceleration for each path
  • Generate evenly-spaced waypoints with customizable point density
  • Save files locally on the computer with ease (Meaning that it is not required to download a new file every time a change is made)
  • Interchangeable path file format in the editor
  • Support multiple output format with path editor data included
  • Support using any unit of length, even if it differs from the one in the format
  • Support exporting path files with different coordinate systems, unit of length, and more
  • Unsaved change warning
  • Robot simulation with customizable robot size
  • Robot pure pursuit simulation (Coming soon)
  • Progressive Web App use without installation
  • Auto update
  • Offline support

Editing Experience

  • Hidden shortcut keys and details which can greatly improve your work efficiency
  • Zoom in/out with ctrl + mouse wheel while keeping zoom center at the cursor
  • Panning support, works outside the canvas
  • Interactive control points with mouse drag
  • Align to other control points with magnetic effect
  • Select/Invert select multiple control points
  • Move multiple control points all at once
  • Move the end point with or without its handle altogether
  • Change end points’ heading with mouse wheel
  • Excellent coordinate input support with unit conversion, expression evaluation, arrow key support, and more
  • Path tree view with all paths and control points listed
  • Lock/Unlock path and control points, to prevent accidental modification
  • Hide/Show paths and control points, to allow better view of other paths
  • Visualize speed with color
  • Customizable editor panels
  • Hotkey support
  • Drag & Drop to open path file
  • Exclusive editing mode
  • Light and dark theme
  • iPad support

Usage and Documentation

Please visit our wiki page to understand how to get started with PATH.JERRYIO.

Contributing

We welcome contributions from everyone. Before you get started, please see our contributor's guide.

Contributors

We work closely with the community and library developers. We would like to thank the following contributors for their contributions to PATH.JERRYIO:

path.jerryio's People

Contributors

crapper avatar dependabot[bot] avatar jerrylum avatar meiszwflz avatar sizzinseal avatar sufferiing avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

path.jerryio's Issues

:bug: Negative Zero With a Decimal Point Is Not Valid for the Token Parser

Describe the bug
The following is the description of the format of Number in EBNF:

Number       ::= (NegativeInt | Int) Frac?

DecimalPoint ::= '.'
Digit        ::= '0'|'1'|'2'|'3'|'4'|'5'|'6'|'7'|'8'|'9'
Digit1To9    ::= '1'|'2'|'3'|'4'|'5'|'6'|'7'|'8'|'9'
Frac         ::= DecimalPoint Digit+
Int          ::= Zero | PositiveInt
Minus        ::= '-'
NegativeInt  ::= Minus PositiveInt
PositiveInt  ::= Digit1To9 Digit*
Zero         ::= '0'

Delimiter     ::= " "+ | "NEXT LINE"

It is incorrect since a negative zero with a decimal point is not considered valid.

To Reproduce
Provided by discord user gradient_descent:

You cannot input negative numbers that are less than 1 into points
Im on MacOS

Screen_Recording_2023-11-18_at_12.09.27_PM.mov

Expected behavior
The format of Number should be changed to: Number ::= Minus? Int Frac?

Screenshots
image

Desktop (please complete the following information):

  • Browser: All platforms
  • Version All versions

Additional context
None

:sparkles: Mouse Field Coordinates

Describe the solution you'd like
The coordinates of the mouse on the field should be displayed. This will make creating autos with non-path-following algorithms easier.

Additional context
I've had multiple LemLib users ask for this feature. Its annoying to have both this path generator and the lemlib path generator open at the same time just to use the mouse coordinates feature in the lemlib path generator.

:sparkles: Question related to Commands and Segment class

Is your feature request related to a problem? Please describe.
After reading the structure of the AddSegment, ConvertSegment, and Segment classes, I have the following concerns about these three classes:

  1. For AddSegment, I believe that using a variable variant to determine what will be executed violated SRP, I believe there should be two command classes called AddLinearSegment and AddCurveSegment instead of the current one.
  2. For ConvertSegment, I believe that the function convertToLine should be renamed as convertToLinear
  3. Furthermore, there is a section for checking the existence of the target modify segment in the path for function convertToCurve,
    protected convertToCurve(): void {
    const index = this.path.segments.indexOf(this.segment);
    const found = index !== -1;
    if (!found) return;

    But this section does not exist in covertToLine
    protected convertToLine(): void {
    this.segment.controls.splice(1, this.segment.controls.length - 2);
    }

    Please investigate whether this validation is required or not for both of function
  4. For the Segment class, I believe there should contain functions that are similar to the following suggestion
IsCurve(): boolean{
    return this.controls.length === 4
}
IsLinear(): boolean{
    return this.controls.length === 2
}

And modify the usage of checking the type of line for the segment, for example,

if (props.segment.controls.length === 2)

to
if (props.segment.isLinear)

  1. For the enum of SegmentVariant, I suggest implementing it as the following:
export enum SegmentVariant {
  Linear =2
  Cubic = 4
}

To prevent any direct comparison with the string that may appear in the future, which may harm the readability of the codes. (I know currently the actual value of the enum does not bother for the code readability).

:sparkles: Realtime code preview

Is your feature request related to a problem? Please describe.
Especially when using the path planner alongside LemLib's MTP commands, it's difficult to modify the code for existing paths by having to copy the code for the new path, figure out which line needs to be changed in the autonomous routine and modify the coordinates.

Describe the solution you'd like
A new panel/dropdown menu near the Copy Code button. It would display a text box with a list of code commands that would be refreshed every time the path is modified in the GUI.

Additional context
An example of what I'm suggesting could be something like https://gauthamv6002.github.io/Auton-Planner/

:sparkles: Velocity Calculation Improvement

Is your feature request related to a problem? Please describe.
Bent Rate Application Range can be confusing to tune, and bent rate is not an accurate representation of how the robot should slow down around curves.

Describe the solution you'd like
Radius should be used to calculate the speed at each point. This method is more accurate and easier to tune

Radius at any point can be calculated by this formula:
radius_function

Maximum speed due to curvature can be calculated with this formula:
speed_equation

where v is the maximum speed, r is the radius and u is the coefficient of friction. u is the value that should be tuned by the user. It is the coefficent of friction.

:bug: Poor Performance on Firefox

Describe the bug
If you are hovering your mouse over the field, the coordinates in the bottom right only update once approximately 2 seconds. If you hold left click however, its fast. Zooming in/out of the field and panning the field is also very laggy

To Reproduce
Steps to reproduce the behavior:

  1. Open https://path.jerryio.com/ on firefox
  2. move your mouse over the field
  3. observe slow update of coordinates on the bottom right

Expected behavior
For the coordinates to update really quickly

Desktop (please complete the following information):

  • OS: Windows 11, CachyOS linux 6.9.5 (using wayland, x11 untested)
  • Browser: Firefox v127.0.1
  • Version: 0.7.0

:bug: Crash When Dragging a Control While Creating a New File

Describe the bug
Throw error when dragging a control on the canvas but is then deleted in the user interface.

To Reproduce
Steps to reproduce the behavior:

  1. Create a new path by left-clicking on the field
  2. Mouse down to one of the control points and drag it
  3. Don't release the mouse, press Ctrl + P to open the "Unsaved Changes" confirmation dialog
  4. Press N
  5. See error in the console

Expected behavior
The control dragging action should be stopped. A new format is then initialized and the field should be cleared without any errors in the console.

Screenshots
image

Desktop (please complete the following information):

  • Browser: Any
  • Version 0.5.1

Other Devices (please complete the following information):

  • Device: None

Additional context
None

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.