jsFunge IDE

How to Use This IDE

This IDE has several features which may not be obvious at a first glance.

---

Toolbar

Program Options

•   Switch to edit mode and clear the grid
•   Open a dialog where you can select
         an example to load
•   Open a dialog where you can copy a URL
         that will let you share or save your program
•   Open a dialog where you can change
         the dimensions of the grid

---

•   Switch to Edit Mode
•   Switch to Run Mode

Edit Mode Options

•   Select the direction the cursor will
                          move when typing on the grid.
• Code  Switch to Code Typing mode
• String  Switch to String Typing mode
• Insert  Toggle Insert Typing mode

Run Mode Options

•   Start the program running
•   Pause a running program
•   Halt and reset a running or paused program
•   Advance the program a single step
•   Toggle Cursor Tracing Mode
• Speed Slider  Set the speed the program runs
                           Faster speeds won't show every step

Windows and Dialogues

•   Show the Grid/Text window if it is hidden
              In Edit Mode, toggle between text/grid mode
•   Show the Stack window if it is hidden
•   Show the Terminal window if it is hidden
•   Show the Input Box window if it is hidden

---

•   Show this window if it is hidden
•   Show the About window if it is hidden

---

Global Features

Windows

Windows and Dialogs can be dragged around by their title bars and hidden by choosing the X in the corner. They can always be shown again from the toolbar.

Certain windows (Stack, Grid, and Terminal) can be resized as you prefer by dragging their lower right corners. The Grid window cannot be larger than just enough to contain the grid.

Cursor Position

In the bottom left corner of the page, a small box always shows the current coordinates of the cursor and the current numerical value of the cell it is in.

Grid Size

You can use the Grid Size Dialog to resize the grid in any mode. You can give the grid any number of rows or columns. Resizing the grid will never destroy any part of the program currently on the grid without confirming with you first.

Input Box

Open the Input Box Window and type anything you want into the box if you would rather feed a fixed input to your program when it runs than provide interactive input through the terminal. As with most Befunge implementations, if your program tries to read more input than this box contains, it will receive a -1 as EOF instead. Clear the box to return to interactive input mode.

Import Example

There are a number of example programs to choose from in the Import Dialog. Importing one of these examples will overwrite the contents of the grid and possibly try to resize it as well. Save your work before doing this!

Export URL

You can share the URL from the export URL box to allow anyone to see or edit your program. The link will also preserve your current grid size settings.

If you select Save to Address Bar, your browser will be redirected to the link, thereby saving it in your browser history. (This will destroy any breakpoints you had set.)

---

Edit Mode Features

While typing on the grid, the cursor will always move in the direction selected on the toolbar, wrapping around the edges of the grid as needed. Typing Backspace will move the cursor in the opposite direction before clearing the cell. Certain other keys have variant behavior depending on the Typing Mode.

Code Typing Mode

Select Code Typing Mode by choosing Code on the toolbar.

In Code Typing Mode, typing any of the characters <,>,^, or v will change the typing direction and then move in that direction. Typing " will toggle on String Typing Mode.

String Typing Mode

Select String Typing Mode by choosing String on the toolbar.

In String Typing Mode, the cursor will continue in the current direction regardless of what is typed. Typing " will toggle on Code Typing Mode.

Insert Typing Mode

Select Insert Typing Mode by choosing Insert on the toolbar or by pressing the Insert key.

When Insert Typing Mode is off, typing on a cell replaces its contents. Hitting Delete behaves the same as hitting Space.

When Insert Typing Mode is on, typing on a cell shifts everything in the current row or column in the current typing direction, placing the typed character in the newly vacated cell. But the grid has a fixed size, so a character must be overwritten somewhere in that row or column. In this mode, the last space character in that direction is overwritten. If there are no space characters in the current typing direction, attempting to type in Insert Typing Mode will fail to avoid accidentally destroying parts of your program. However, you can still accidentally destroy significant whitespace using this mode. Be careful!

In Insert Typing Mode, pressing Delete will not move the cursor, but instead will shift the entire row/column in the current direction backwards towards the cursor. Pressing Backspace will both move the cursor backward and shift the row/column backwards towards it, overwriting the previous character.

Always check the current typing direction before typing in Insert Typing Mode!

Keyboard Shortcuts

A number of quick keyboard shortcuts are available while editing the grid.

• Home  Move cursor to the first column of the current row
• End  Move cursor to the last column of the current row
• Page Up  Move cursor to the first row of the current column
• Page Down  Move cursor to the last row of the current column
• Insert  Toggle Insert Typing Mode
• Shift+[Any Cursor Key] Set the current typing direction
• Alt+Shift+R  Switch to Run Mode and start the program running
• Alt+Shift+S  Open the Export URL dialog

Text Editing Window

Select the Text Window option from the toolbar to transform the grid into a simple textbox containing your program.

In the plaintext editing window, you can select all the text in the program, copy it, and paste it elsewhere for safe-keeping or to try out another interpreter. You can also replace the program by pasting in programs from other sources. Any changes made to the text here will be loaded into the grid when you switch back to the Grid Editing Window. Using any of the grid-specific features (like the Export URL and Grid Size dialogs) will automatically switch back to the Grid Editing Window for you.

If the contents of the textbox (not counting trailing whitespace) will not fit in the grid at its current dimensions, switching back to the Grid Editing Window will give you the option to resize the grid to fit it.

Run Mode Features

In Run Mode, you cannot edit the contents of the grid nor can you set the location of the cursor. However, there are some things you can do here that you cannot do in Edit Mode.

Breakpoints

Set a breakpoint by double-clicking or long-pressing on a cell. The cell will turn crimson when it is a breakpoint. Breakpoints persist even if you switch to Edit Mode and back, though they will not be visible in Edit Mode. There is no problem with toggling a breakpoint while a program is running.

When the cursor of a running program reaches a breakpoint cell, the program will pause automatically.

Cursor Tracing Mode

Turn Cursor Tracing Mode on by clicking the icon on the toolbar. In this mode, while a program is running, the cursor will recolor each cell it touches in a progression of hues. This will allow you to see the execution paths of a program even when the speed is set too high to watch each move the cursor makes. These colors will persist until you next start the program again, even if you turn Cursor Trace Mode off and on again or switch to edit mode and back again (even though either of these actions will temporarily hide the colors).

Keyboard Shortcuts

A number of keyboard shortcuts are available in Run Mode.

• Alt+Shift+E  Halt and reset the program and switch to Edit Mode
• Alt+Shift+S  Open the Export URL dialog
• Alt+Shift+C  Immediately halt and reset the program

All of these shortcuts will work even while the program is waiting for interactive input in the terminal.