Using the IDE
Getting the most from your code writing partner
If you have not gone through Lessons 1 through 7 yet I would suggest doing that before working through this side lesson. Some of the statements and programming concepts in this side lesson may be new to you depending on where you are currently in the tutorial. Any statements or concepts new to you will eventually be covered in the tutorial lessons. If you have finished up to at least Lesson 7 in the tutorial there should be very little that has not been covered.
The QB64 IDE (Integrated Development Environment) is the programming interface that helps with all aspects of creating your code. The IDE can provide you with help on individual command statements, spell check your code's syntax, and even help to identify bugs within your code.
The IDE maintains the look and feel of the old-school QuickBasic language's IDE. Why? First for familiarity to the QuickBasic programmers coming to QB64 and "feeling at home". Secondly, it's a perfect no-nonsense and dead simple interface to navigate. QB64's IDE menu is reminiscent of menu systems used back in the DOS days of computing. The IDE can be completely mouse driven but more often than not most QB64 programmers, including myself, prefer to use the good old-fashioned keyboard shortcuts for navigation because it's more efficient to do so.
NOTE: This lesson assumes you are using an IDE from a Phoenix Edition of QB64. The illustrations throughout this lesson are copied from the QB64 Phoenix Edition version 3.12.0 IDE. If you are using an earlier version of QB64 Phoenix Edition or a different fork of QB64 then some of the menu items discussed or appearing in the illustrations may not be present in your version.
Figure 1: The QB64 Integrated Development Environment
Before we get started there are a few points of interest to mention as shown in Figure 1 above:
( 1 ) - The name of your program will be displayed here. The name of your program will default to "Untitled" until you save it with a name for the first time. If there is an asterisk ( * ) appearing after the program name it means that your code has changed and those changes have not yet been saved.
( 2 ) - The version of the IDE you are currently using is displayed here. You may be asked for this version number when seeking assistance at the QB64 forum.
( 3 ) - The numbers displayed here relate to the current flashing text cursor position and ASCII value of the character the cursor currently resides under. For example, in Figure 1 above the numbers 3:1(80) are shown. This means the flashing text cursor is currently in row 3 at position (column) 1 and the ASCII value of the character the cursor is under is 80 (a capital P character). You can see the cursor at this position in Figure 1 above.
Navigating the IDE
By far the simplest way to navigate around the IDE is to use the mouse to click through menu entries. However, as you start to get proficient with writing code using the IDE you'll find the mouse is far less efficient than using the built-in keyboard shortcuts. Moving your hand away from the keyboard to grab the mouse and navigate to a menu item takes time, but most importantly breaks a programmer's rhythm. You'll understand what is meant by that after spending some time writing code. So let's spend a little time going over the keyboard controls for the IDE.
Accessing the IDE's menu is accomplished by simply pressing and releasing either ALT key one time. This action activates the menu by highlighting the File option in the menu bar. From there you can use the keyboard's arrow keys to navigate the entire menu system. The right and left arrow keys move to the next or previous menu option. Pressing the down arrow key drops down the menu box for any highlighted option. You can then select any option in the drop down box by using the keyboard's up and down arrow keys. The animation in Figure 2 below shows this in action.
Figure 2: Accessing the menu using the keyboard
When you drop down a menu box the IDE will display a quick description at the very bottom of the screen of what the currently highlighted menu option performs. You can see this descriptive area change as the menu entries are selected in the Figure 2 animation above.
You can also use the keyboard to go directly to a given menu. When you press and hold the ALT key the first letter of each menu entry highlights (F, E, V, S, R, D, T, and H). These highlighted letters are "hot keys" that can be pressed while you are holding down the ALT key. Holding down the ALT key and then pressing the F key will go directly to the File menu for instance. The animation in Figure 3 below shows hot keys in action.
Figure 3: Using menu hot keys
Within each drop down menu you'll notice even more highlighted hot keys you can choose from. For instance, the Run menu contains the highlighted letters S, O, C, F, G, and X as seen in Figure 4 below.
Figure 4: Hot keys in the Run menu
Simply press one of those highlighted hot keys to activate the menu option. The animation in Figure 5 below shows the hot key combination ALT-R-S in action to start running a program in the IDE.
Figure 5: Using a combination of hot keys to run a program
Some of the IDE's menu entries also include "quick keys" shortcuts to make keyboard navigation of the menu even faster. For example, notice in Figure 4 that the Start menu option includes F5 to the right of it. Pressing F5 on your keyboard will also start your program running without having to navigate the menu at all. To quickly save your program you could use the hot key combination ALT-F-S or the quick key combination CTRL-S as shown in the File menu.
Using hot key or quick key combinations may sound counterintuitive to someone that has been using Windows or macOS along with a mouse. It's perfectly acceptable to use the mouse to navigate the QB64 IDE if you prefer. However, once you start learning and using these key combinations the efficiency benefits become apparent.
Navigating the IDE Help Menu System
The QB64 IDE has a feature rich help system built directly into it accessed through the Help menu. Before we get into the features offered by the help system it's a good idea to update it. The interval between updating the help system is entirely up to you. I personally try to update at least once a month or when it's announced on the QB64 forum that statements have been updated in the Wiki.
Help Menu: Update All Pages...
Choose the Help menu and drop down the menu options. Arrow down until "Update All Pages..." is highlighted then press ENTER. The help system built into the IDE uses content from the QB64 online Wiki to stay up to date. When changes are made to the Wiki the information is not automatically downloaded to the IDE. In other words the IDE's help system is not dependent on having a connection to the Internet to function. This allows QB64 to be truly portable.
A message box appears explaining that the update process can take up to 10 minutes and will ask you to confirm the redownload of all help content from the Wiki. Simply select "< Yes >" to continue. At this point the QB64 IDE will attempt to establish a secure (https://) connection to the Wiki. If a secure connection can't be established you'll be asked if you would like to use a standard connection (http://) instead. Simply answer yes to the question and select your preference if you would like to save this action for later download attempts. The animation in Figure 6 below shows the update process.
Figure 6: Updating the IDE's built-in Help System
Now that you have the latest updates let's explore the IDE's help system starting with the Help menu entries.
Help Menu: Contents Page
This menu option brings up the QB64 help summary page explaining a little about the help system. Half of the IDE screen becomes dedicated to navigating the selected help topic as seen in Figure 7 below.
Figure 7: The help system contents page
This help system page is a starting point (the help system's "home") you can use to explore the help system topics using hyperlinks. There are two sections of hyperlinks to choose from:
Help Topics
Keyword Reference - Alphabetical
Keyword Reference - By usage
Frequently asked questions about QB64
and
Community Links
QB64 Phoenix Edition Forum
QB64 Phoenix Edition Wiki (the source of this help)
QB64 Phoenix Edition Discord
The help system window is definitely easier to use with a mouse than with a keyboard. When using a keyboard you need to use the arrow keys to navigate the flashing cursor around the screen. Think of the flashing cursor as your text pointer. If you want to enter a hyperlink simply move the flashing cursor onto the hyperlink and press ENTER.
The cyan View on Wiki button will always be present at the top of the help window. Clicking on this button will open your browser to the QB64 Wiki and display the current topic you have displayed in your help system window. The red X x button will also always be available and will close the help system window when clicked on (pressing the ESC key will do the same thing).
Scrolling the contents of the help system window up and down can be done with either the mouse wheel or using the keyboard's up and down arrow keys. Go ahead and scroll down a bit and click on the "Keyword Reference - Alphabetical" hyperlink. Scroll this new page of help text down until you find the "_ALLOWFULLSCREEN" hyperlink and click on it. Figure 8 below shows what your IDE is now displaying.
Figure 8: Navigating the help system
As you navigate around the help system a trail of bread crumbs will be maintained at the top of the help system window as seen in Figure 8 above. These allow for quick navigation back and forth between pages you visit by simply clicking the crumb you wish to revisit. The BACK SPACE key can also be used to navigate back to previous pages visited.
The help system window is basically a text based browser allowing you to view the online Wiki content directly within the IDE. However, because the system is text based, you will not see any graphics or tables displayed that may be contained within the online Wiki version of the topic you are viewing. If your answer can't be found in the help system's text don't forget to click on the View on Wiki button for even more help.
Help Menu: View
This menu option displays the help system window at your current location. When you first start the IDE the View menu option will simply bring up the help contents page since you have not navigated anywhere. As you navigate the help system the bread crumbs keep track of your current position. The View menu option will take you directly to your last bread crumb.
HELP Menu: Keyword Index
This menu option takes you directly to the alphabetical keyword reference found on the help contents page.
Help Menu: Keywords by Usage
This menu option takes you directly to the keywords by usage reference found on the help contents page. This page lists QB64 keywords by their usage category such as graphics and imaging, file input and output, fonts, keyboard input, and math statements, just to name a few. A very handy reference if you're working with, for instance, file input and output, and you just can't seem to remember that one statement you need to complete your algorithm. I use this reference quite a bit especially when trying a new way to code a routine. I scan over all the statements in the category to make sure I'm not forgetting one that may be useful in completing my routine. Heck, I've even found new very useful statements that I didn't know existed because I missed the announcement in the Wiki or on the forum.
Help Menu: Update Current Page
This menu option allows you to update the current statement page you are viewing in the help window instead of updating the entire help system. This is handy when an announcement on the forum informs programmers that an individual Wiki page has been updated.
Help Menu: View Current Page on Wiki
This menu option performs the same function as the View on Wiki button found at the top of the help system window.
Help Menu: About
This menu option displays a message box with the QB64 version number you are programming in.
Requesting Individual Statement Help
The most useful feature of the IDE help system is the on-demand help of code statements. First we'll need some code to get help on.
Type the following program into your IDE and then run it by selecting Start in the Run menu. Type in your name at the prompt and then press ENTER.
PRINT
PRINT "What is your name?"
INPUT UserName$
PRINT "Hello"
PRINT UserName$
Figure 9: Functional, but not formatted well.
As you can see in Figure 9 above the code works but it's not formatted very well. Why does the INPUT statement print a question mark first? Is there a way that the "Hello" and UserName$ variable can be combined into one line?
Before we go to the forum and post our questions, which can take time to receive a response, let's see if the built-in help system can give us a few clues. Our program only uses two statements, PRINT and INPUT, so let's investigate these two statements to see if we can modify the program to our wishes. To ask for help on an individual statement use the keyboard arrow keys to move the flashing cursor onto the statement you wish to view and then press the F1 key.
Go ahead now and move the flashing cursor onto any one of the PRINT statements and press the F1 key.
Figure 10: Which variant of PRINT would you like?
Many QB64 statements have multiple uses depending on the way they are being implemented. As Figure 10 above illustrates the PRINT statement has four variants to choose from. If a statement has multiple uses the help system will provide this message box first allowing you to choose the method you are utilizing. Our program is not using anything that deals with files or the USING statement so the first variant is what we need. Go ahead and press the ENTER key now to choose our help topic.
Figure 11: PRINT statement help
The statement help page starts out with a description of the statement you chose. Next, the statement's syntax, or layout and use, is displayed followed by an explanation of the parameters that the syntax section stated could be utilized.
Syntax:
The Syntax: section describes how the statement can be utilized along with any mandatory and/or optional parameters than can be used with the statement. Any parameters surrounded by brackets [ ] are considered optional. As you can see in Figure 11 above all of the parameters following the PRINT statement in the Syntax: section are optional, meaning PRINT can be used by itself if desired. We did exactly that in our first line of the program.
Parameters surrounded by braces { } mean that only one option may be chosen from the given set. A pipe character | is used to separate the available options. Think of the pipe character as the word "or". So this:
{;|,}
would read as "semicolon or comma".
NOTE: The pipe character seen in Figure 11 above is shown as two vertical lines, one on top of the other. Some fonts show the pipe character as a single vertical line (like the one used on this web page). The QB64 IDE allows the font to be changed. The default IDE font shows two vertical lines, while a custom font you choose may use a single vertical line.
Parameters:
The Parameters: section explains the use of the parameters outlined in the Syntax: section. Use your keyboard arrow keys to scroll the help contents up a bit to get a better view of the Parameters: section.
Figure 12: The Parameters: section
According to the second bullet point in the Parameters: section the use of a semicolon ( ; ) following a PRINT statement causes the cursor to stop. Could this be the answer to one of our issues? We want the contents of the UserName$ variable to be display directly after the preceding PRINT "Hello" line of code. Let's go ahead and try that.
Our code is still viewable at the top of the IDE so there is no need to close the help system window. Simply use your mouse to click in the code section. Use the keyboard arrow keys to move to end of the fourth line and modify the code by adding a semicolon.
Figure 13: A semicolon added to the end of code line 4
Let's run the code again and see what our change did. Again, there is no need to close the help system window, simply choose Start from the Run menu (or press F5, remember that quick key?) to run the program.
Figure 14: That worked! Well, almost.
That almost worked! The Hello and the name typed in are not spaced apart. Well that's an easy fix, we'll just add a space after the word Hello in line 4 and run the program again to see the result.
Figure 15: The space has been added to line 4
Figure 16: One issue solved, one to go!
Excellent, one of our issues has been solved. Now we need to figure out how to get the INPUT statement to stop adding that question mark. Use the keyboard arrow keys to move the flashing cursor under the INPUT statement in line 3 and press F1 to change the help system window.
Figure 17: Which variant of INPUT would you like?
Just like the PRINT statement there are multiple ways to use the INPUT statement. Since we are not using the INPUT statement with any sort of file functions the first option is what we need. Press ENTER to choose the first option.
Figure 18: INPUT statement help
NOTE: In Figure 18 above you'll notice this line:
!> Page uses unknown UTF-8 characters, please report it in the Wiki Forum.
I reported the error to the Wiki moderator so you may not see this line when viewing help for the INPUT statement. The Wiki moderator reported correcting the issue and the next version of the IDE will contain the correction. The QB64PE language, forum, and Wiki maintainers are an awesome group of people that respond to issues in a very short amount of time. Always report any issues you may find to them so everyone can benefit. The issue I reported above was corrected within an hour! Update: The issue has been corrected in version 3.13.0 of the IDE which is available now.
Ok, back to our second issue, removing that extra question mark that INPUT displays on the screen. In the Syntax: section one of the ways to use the INPUT statement is:
INPUT [;] "[Question or statement text]"{,|;} variable[, ...]
In the Parameters: section this is stated:
A semicolon immediately after the text statement will display a question mark with a space after it. Use a comma for input statements.
So it would appear we can do this to remove the question mark:
INPUT "", UserName$
Since text is surrounded by brackets making it optional,[Question or statement text], we should be able to supply a null string (a string containing nothing), "", so just a flashing cursor appears waiting for the user to type their name in. No question mark will appear because a comma was used after the quotation marks. Let's go ahead and make that change to line 3 of our code and run the program to see the result.
Figure 19: Line 3 has been modified
Figure 20: Success!
This can look even better though. Using what we learned from the PRINT statement and using semicolons we can add a semicolon to the end of line 2 so the INPUT statement's flashing cursor is at the end of the question. We'll also need to place a space in the null string on line 3 to ensure the flashing cursor is one space away from the question. Let's make those changes and see how the output looks.
Figure 21: Some final modifications
Figure 22: Perfect!
With a little bit of reading and trial and error our questions have been answered and the code is functioning as we envisioned. The help system built into the IDE is a very powerful tool at your disposal.
Click back into the help system window in your IDE and scroll down through the rest of the text that is available. Most statement help topics include Description:, Examples:, and See also: sections for even more help on the subject you are researching. The example code can even be copied from the help system window and pasted right into the code section of your IDE!
Statement "Spell Checking" by the IDE
The QB64 IDE constantly monitors code as you type it in. The IDE will warn the programmer of any typographical errors or incomplete statements. If you have not done so already close the help window by clicking on the red X x in the help system window. Next, start a new program by selecting the File menu and then select New in the drop down menu. The IDE will warn you that the current program is not yet saved. Select < No > to start with a clean slate in the IDE.
Type the following line of code into the IDE and then press the ENTER key:
FOR x% = 1 TO 10
You'll notice that the IDE has highlighted the line of code in red and an error has been generated in the Status window at the bottom of the IDE screen.
Figure 23: The IDE has detected an error
The FOR...NEXT statement is a two part statement requiring a beginning statement ( FOR ) and an ending statement ( NEXT ). The error reported as seen in Figure 23 above is a reminder to the programmer that the statement needs to be finished to be complete ( FOR without NEXT ). Some programmers find this annoying and others, such as myself, find this to be very useful. Over the years I've gotten into the habit of pressing the ENTER key a few times when typing in a two part statement and then typing in the ending statement to complete the statement and remove the IDE reminder.
Figure 24: The IDE reminder has been satisfied
Examples of other two part statements are DO...LOOP, WHILE...WEND, IF...END IF, and so on.
Press ENTER two more times and type in the following line of code on line 4:
NEXT x%
The IDE has now detected that the two part statement has been completed and the reminder no longer exists as seen in Figure 24 above. Getting into the habit of completing a two part statement right away is the method I use to remove the reminder. I can then go back inside the two part statement and continue with the rest of the code between the beginning and ending statements.
Use the keyboard UP ARROW key move the cursor to line 2 and type the following line of code in exactly as presented and then press ENTER:
prnt x
The IDE is now generating a new error that needs to be corrected.
Figure 25: A syntax error
Once again the red line of code appears indicating an error along with the Status window reporting the error "Syntax error on line 2" as seen in Figure 25 above. The IDE does not understand the what prnt is. What we meant to type was print so go ahead and correct line 2 to read:
print x
And then press the DOWN ARROW key once. Did you notice what happened? Besides the error no longer existing the word print was capitalized to PRINT and it moved to the right, or was indented, four spaces over. The IDE "spell checker" will capitalize statements when it recognizes them and indent code within two part statements. Two part statements create a code block that gets indented between the beginning and ending statements. This makes sections of the code visually easier to identify. The IDE will handle all of this for you while you concentrate on typing the code in. Most other language's IDEs perform this indenting automatically for the programmer as well. In fact, Python requires code indention to function properly.
Figure 26: Line 2 was automatically indented and PRINT capitalized
NOTE: Depending on how you have your IDE set up the IDE may have only capitalized the P in Print and indented more or less than four spaces. The default capitalization of statements was always ALL CAPS in the IDE until a few years ago when a change was made in the IDE to default to just the first letter getting capitalized. Select the Options menu and then select "Code Layout...".
Figure 27: The IDE Code Layout options
If you wish to have statements (Keywords) in ALL CAPS then place an X in the "Keywords in CAPITALS" check box. You'll also see you can control the amount of spaces that auto indenting will use with the default at 4. About 50% of the code found in this tutorial was written when ALL CAPS was still the default in the IDE. I continue to use this for both consistency within the tutorial and it's my personal preferred preference. Having statements in ALL CAPS makes them "pop out" in the code for easier identification in my opinion. The default of 4 spaces when indenting is also used throughout this tutorial.
Variable "Spell Checking" by the IDE
It's time to execute the code we have in the IDE. Select the Run menu and then select Start (or ALT-F-S or F5).
Figure 28: Well that's not right?
Why didn't the code display the values of 1 through 10? Why did the output display 10 zeros? Time for some debugging.
According to the FOR...NEXT help page x% should contain the values of 1 through 10 as the FOR statement cycles from 1 to 10. So how come line 2 doesn't print the value in x%? Do you see the problem yet?
In line 2 we requested the value of x, not x%, to be printed to the screen. That simple typo of forgetting to add the % sign to the end of x altered our code in an unexpected way. x and x% are two entirely unique variables. x% is an integer because of the % sign added after it. The percent sign is a type identifier that tells a variable it is to hold integer values only. x on the other hand, having no type identifier, was given the default of a single type value, that is a value that can have decimal points as well. So in this case our x variable is the same as x! (the exclamation point identifies the variable as a single type) making x% and x! two unique variables in our program.
These simple typos can literally drive you crazy especially when your code gets very large. Your eye has a tendency to simply gloss over them especially if you have been coding for a while. Luckily, the IDE has a trick up its sleeve to help you snuff out these typos.
The OPTION _EXPLICIT IDE Directive
Including this line of code as the first line of code in your program:
OPTION _EXPLICIT
forces the programmer to declare all variables that will be used throughout the program by instructing the IDE to watch over variable use. Furthermore, variables created "out of the blue" or through typos, such as the variable x in the example above, are caught and reported by the IDE alerting the programmer to the typo before it becomes an issue. I want you to read the next line 3 times so it sinks in:
NEVER WRITE A QB64 PROGRAM THAT DOESN'T CONTAIN OPTION _EXPLICIT AS THE FIRST LINE OF CODE !!
BASIC (Beginner's All-purpose Symbolic Instruction Code) was created with the non-programmer in mind. One of its greatest strengths is that those needing to do a little programming could use BASIC to quickly write something useful through the use of English-like statements and not have to worry about variable maintenance. For example, this simple little program serves a useful purpose:
PRINT
PRINT " ------------------------------------------"
PRINT " Fahrenheit to Celsius Conversion Utility"
PRINT " ------------------------------------------"
PRINT
INPUT " Enter the Fahrenheit value> ", f
PRINT
c = (f - 32) * 5 / 9
PRINT " Celsius ="; c
The programmer didn't have to worry about the variables being declared, f and c were simply chosen and created "out of the blue". Furthermore the programmer didn't have to worry about the variable's types. Since f and c have no type identifiers they both default to being the single type, which happens to be a good fit for the values this program uses.
However, and this is a big however, when code starts getting large, hundreds, thousands, even 10s of thousands of lines long, this approach is going to bite you hard. BASIC's greatest strength is also its greatest weakness. You are going to make typos when typing in variables and they will be a MONSTER to debug. Trust me, I've been there!
Let's use OPTION _EXPLICIT to correct the code currently in the IDE. Use the keyboard arrow keys to move the cursor to the beginning of line 1, press ENTER to insert a blank line, and then add OPTION _EXPLICIT to line 1 as Figure 29 below shows.
Figure 29: OPTION _EXPLICIT doing its job
Once OPTION _EXPLICIT is typed in the IDE begins its work of identifying errors associated with variables. The first issue found is in line 2 pertaining to the x% variable. The status window contains the error message:
Variable 'x' (INTEGER) not defined on line 2
Because x% contains the type identifier of a % sign the error message identifies it as an (INTEGER). x% will need to be defined, or declared, to remove this error. The QB64 DIM statement is used to declare variables. Modify the code in your IDE as seen in Figure 30 below:
Figure 30: Declaring x%
Our original intent for the program was to have one variable, x%, but what is this? Another error being reported by the IDE:
Variable 'x' (SINGLE) not defined on line 4
Line 4 is our typo and it seems we forgot to add the % sign type identifier to the variable x. Notice that this time the variable x is identified as (SINGLE) in the error line. Remember, when a type identifier is not used with a variable the variable defaults to the single type. Go ahead and correct line 4 by adding a % sign after the variable x to remove the error and then run the program to see the result.
Figure 31: All errors corrected
Figure 32: The program now executes correctly
OPTION _EXPLICIT's behavior is not the IDE default because of legacy QuickBasic code and QB64 code written by others that do not use this IDE directive. Imagine having to debug every piece of legacy code you load into the IDE because of undeclared variables.
However, I have found this to be very useful. When I load someone else's code I add OPTION _EXPLICIT to the top of the code and then take the time to correct all the undeclared variable errors that are found. This forces me to declare (DIM) all the variables included in the code and helps to give me a better overall picture of what the code is doing. I've even found variable typo bugs in other code this way. This also gives me a complete listing at the top of the code of all variables used throughout the program. Here is that useful little program again written with the aid of OPTION _EXPLICIT:
OPTION _EXPLICIT
DIM f! ' the Fahrenheit value supplied by the user
DIM c! ' the calculated Fahrenheit to Celsius value
PRINT
PRINT " ------------------------------------------"
PRINT " Fahrenheit to Celsius Conversion Utility"
PRINT " ------------------------------------------"
PRINT
INPUT " Enter the Fahrenheit value> ", f!
PRINT
c! = (f! - 32) * 5 / 9
PRINT " Celsius ="; c!
As you can see every variable used in the program is declared at the top. Better yet you can add a REM ( ' ) statement following each declaration with a description of how the variable is used ... a variable documentation table! Imagine having a piece of code in front of you with over 5000 lines and knowing exactly what each and every variable does.
ALWAYS USE OPTION _EXPLICIT.
The IDE File Menu
Figure 33: The File menu with the secondary Export As... menu expanded
File Menu: New
This menu option will clear the IDE and remove the current program. If the current program has not been saved the IDE will give you the chance to save the program before clearing the IDE.
File Menu: Open...
This menu option opens an operating system file open dialog window allowing you to choose the source code file you wish to load.
File Menu: Save
This menu option saves the current program loaded into the IDE.
File Menu: Save As...
This menu option saves the current program loaded into the IDE with a different file name than what it already has. I often use this menu option to save a copy of the code I'm working on before making major changes that may not pan out the way I want. I can then reload the original code back in and try a new approach if needed.
File Menu: Export As...
This menu option will open a secondary menu (as seen in Figure 33 above) that allows the code to be saved in an alternate file format. The export options are:
Hypertext document (.htm)
This saves the program listing as an HTML file (a web page viewable with a browser). I use this export format to create the code listings seen in this tutorial. The QB64 statements will also contain hyperlinks back to the QB64 Wiki, just like the code listings found in this tutorial. Perhaps you have a blog and wish to show off some of your code Kung-Fu skills. You can import the .htm file created with this menu option directly into your blog.Rich Text document (.rtf)
This saves the program listing as a Rich Text document. Rich Text Format (.rtf) is a file format that enables exchanging text files between different word processing programs. Most, if not all by now, word processors support this format. Perhaps you are creating documentation in Microsoft Word for the killer app or library you just wrote in QB64. This is the format to use to create a file you can import and snip portions of the code for your audience to view.Forum codebox (to clipboard)
This copies the code in the IDE to the clipboard with full color formatting exactly as seen in the IDE. The contents of the clipboard can then be pasted in the QB64 forum to produce a code listing that looks identical to the code in the IDE.Wiki example (to clipboard)
This copies the code in the IDE to the clipboard formatted for use in the QB64 Wiki. This option is for the QB64 Wiki maintainers.
File Menu: Clear Recent...
As you open and save code in the IDE a numbered recent files list will start growing under Export As... in the File menu. To clear this list you can select Clear Recent...
NOTE: When the recent list count gets above six Clear Recent... will change to Recent... Selecting Recent... will bring up a window containing a listing of your recent files and maintenance options to maintain your growing code list.
File Menu: Exit
This menu option closes the IDE. If your code has not been saved you will be given the option to save it before exiting.
The IDE Edit Menu
Figure 34: The IDE Edit menu
Edit Menu: Undo
The QB64 IDE maintains a history of actions taken and changes made. This menu option allows the programming to step backwards through the history and undo changes that were made.
Edit Menu: Redo
This menu option allows the programmer to step forward through the the history after stepping backwards through it using the Undo menu option above.
Edit Menu: Cut
This menu options cuts, or removes, any currently highlighted text in the code window and places it in the clipboard. This text can then be placed somewhere else in the code using the Paste option below. Note that this menu option will only be available when text is highlighted in the code window.
Edit Menu: Copy
This menu option copies any currently highlighted text in the code window and places it in the clipboard. This text can then be placed somewhere else in the code using the Paste option below. Note that this menu option will only be available when text is highlighted in the code window.
Edit Menu: Paste
This menu option will copy any text in the clipboard to the code window at the current flashing cursor position. Note that this menu option will only be available if there is currently text within the clipboard.
Edit Menu: Clear
This menu option will remove any currently highlighted text in the code window. This removed text will not be placed in the clipboard. Note that this menu option will only be available when text is highlighted in the code window.
Edit Menu: Select All
This menu option highlights all text within the code window in preparation for a Cut, Copy, Paste, or Clear menu option action.
Edit Menu: Toggle Comment
This menu option will add or remove a REM ( ' ) statement to the beginning of the current line the flashing cursor resides on. If multiple lines of text are highlighted all of them will get this action. If the line or lines of code currently do not have a REM ( ' ) at the beginning one will be added. If the line or lines of code currently do have a REM ( ' ) at the beginning it will be removed.
Edit Menu: Add Comment
This menu option will add a REM ( ' ) statement to the beginning of the current line the flashing cursor resides on. If multiple lines of text are highlighted all of them will get this action.
Edit Menu: Remove Comment
This menu option will remove a REM ( ' ) statement from the beginning of the current line the flashing cursor reside on. If multiple lines of text are highlighted all of them will get this action.
Edit Menu: Increase Indent
This menu option will increase the indention of code by the number of spaces specified in options. If multiple lines of code are highlighted all of them will get this action. Note that this action will only work if auto indention of code is disabled in options.
Edit Menu: Decrease Indent
This menu option will decrease the indentation of code by the number of spaces specified in options. If multiple lines of code are highlighted all of them will get this action. Note that this action will only work if auto indentation of code is disabled in options.
Edit Menu: New Sub...
This menu option will create a new subroutine at the end of the code in the code window. When this menu item is selected an input box will appear asking for the new subroutine's name.
Figure 35: Adding a new subroutine
Once the new subroutine's name has been entered and < OK > selected the subroutine will be created at the bottom of the code window and the cursor placed on the first line within the subroutine.
Figure 36: Ready to edit code within the new subroutine
Edit Menu: New Function...
This menu option performs the same action as New Sub... above but instead creates a function instead of a subroutine.
The IDE View Menu
Figure 37: The IDE View menu with the secondary Line Numbers menu expanded
View Menu: Subs...
This menu options opens a list box that contains a listing of the subroutines and functions within the source code loaded into the IDE. You can use the keyboard up and down arrow keys to scroll through the listing. Figure 38 below shows a small segment of code that contains four temperature conversion functions. Figure 39 below shows the list box displayed by selecting Subs... from the View menu.
Figure 38: A few temperature conversion functions
Figure 39: SUBs list displayed by selection Subs... from the View menu
The SUBs List Box Options
[ ] Line Count
Checking this box with an X will create a "Lines" column in the listing showing the number of code lines in each subroutine and function.[ ] Sort
Checking this box with an X will sort the subroutines and functions alphabetically within the listing.< Edit >
Selecting < Edit > (or pressing ENTER on the highlighted subroutine or function) will take you to the code section where the subroutine or function resides in the code listing.< Cancel >
Closes the list box.
This menu option will become one of your most used IDE tools. The number of subroutines and functions contained within code can grow rather quickly especially for major programs you intend to work on. The SUBs list box will allow you to quickly and easily teleport to key locations within your source code. Figure 40 below shows the SUBs list for the Widescreen Asteroids game I wrote. The code contains 38 subroutines and functions contained in just under 3500 lines of code.
Figure 40: This first 20 of 38 subroutines and functions contained in Widescreen Asteroids
View Menu: Line Numbers
This menu option opens a secondary menu with options to control the manner in which line numbers are shown in the code windows of the IDE.
Hide Line Numbers
This option enables or disables the displaying of line numbers in a column on the left-hand side of the code window.Background Color
When enabled this option will use a background color to highlight the line number column on the left-hand side of the code window. Note that this option will be disabled if the Hide Line Numbers option is disabled.Show Separator
When enabled this option will display a vertical line just to the right of the line numbers showing a clear distinction between the line numbers and code in the code window. Note that this option will be disabled if the Hide Line Numbers option is disabled.
The animation in Figure 41 below displays all the various configurations you can place line numbers into.
Figure 41: The various Line Numbers configurations
The IDE Search Menu
Figure 42: The IDE Search menu
Search Menu: Find...
This menu option will search for the search term text you supply to an input box that appears.
Figure 43: Initiating a search for _rgb32
The Find... Input Box Options
Find What:
This is where you supply the search term text you wish to search for. The search begins at the current cursor position within the code and by default will search forward through the code.[ ] Match Upper/Lowercase
The text in the code must exactly match the search term text provided. This makes the search case sensitive.[ ] Whole Word
The search term text must be a whole word, not part of another word. For example, with this option disabled the search term _rgb would find any word containing _rgb within it, such as _RGB32. However, with this option enabled _RGB32 would not be found because _rgb is only a part of the whole word.[ ] Search Backwards
The search will be performed from the current cursor position within in the code in a backwards, or upwards, manner.[ ] Ignore 'comments
Comments within the code will be excluded from the search. Note that this option and Look only in 'comments can't both be chosen at the same time, it's either one or the other.[ ] Ignore "strings"
Literal strings within the code will be excluded from the search. Note that this option and Look only in "strings" can't both be chosen at the same time, it's either one or the other.[ ] Look only in 'comments
The search term text supplied will only be searched for within comment sections of the code. You can create comments that act like book marks and then use this search option to jump to points of interest within your code. For example, you could search for #sort# within a comment you created such as
' #SORT# (sorting begins here)
to take you directly to the point in your code where sorting is performed. Note that this option and Ignore 'comments can't both be chosen at the same time, it's either one or the other.[ ] Look only in "strings"
The search term supplied will only be searched for within literal string sections of code. Note that this option and Ignore "strings" can't both be chosen at the same time, it's either one or the other.
Search Menu: Repeat Last Find
This menu option repeats the last search performed using Find.... This menu option is typically used by invoking the quick keys F3 and SHIFT-F3. The F3 key will search for the next search term forward through the code and the SHIFT-F3 key combination will search backwards for the next search term through the code. This will be one of your most used IDE tools available. Very handy for finding every instance of a variable used throughout the code for example.
Search Menu: Change...
This menu option searches for a search term provided within the code and then changes the code to a new value provided.
Figure 44: Changing text within code
The Change... Input Box Options
The options for searching are exactly the same as found in the Find... input box options above with one addition:
Change To:
The text supplied here will be used to replace the search term text found within the code listing.
There are also two different methods to initiate the change.
< Find and Verify >
Each and every time a search term is found within the code a confirmation box will appear asking you to verify the change. This gives you the chance to skip over any changes you do not wish to perform in certain areas of your code.< Change All >
Every search term found within the code is changed to the replacement text supplied instantly and with no questions asked.
This will be another one of the IDE tools you will use quite frequently. I use this feature all the time to rename variables within my code. I may decide that another name for a variable would be better than the one currently used. This menu option will change all the variable instances in the code at once.
Search Menu: Clear Search History...
The IDE will maintain a history of all searches performed. This search history is not cleared when the IDE is exited and restarted at a later time. Clear Search History will clear the IDE's History file. To access the search history click on the double arrow character ( ↕ ) found in the Find field located at the top of the status window toward the bottom right hand corner of the IDE (see Figure 45 below).
Figure 45: Accessing the search history list box
Search Menu: Quick Navigation
With this menu option enabled a quick navigation box will appear (see Figure 46 below) following any action that teleports you to another location within your code, such as using bookmarks, Go To Line..., Find..., and Repeat Last Find. Clicking on the quick navigation button will take you back to the previous position. The quick navigation button stays active as long as their are more previous positions stored. This means you can click on the quick navigation button multiple times to step back multiple positions.
Figure 46: The quick navigation button
Search Menu: Add/Remove Bookmark
This menu option creates jump points throughout your code by adding a small horizontal tick mark to the left of the code line where the bookmark was created (see Figure 47 below). You can then jump between these bookmarks using the Next Bookmark and Previous Bookmark search menu entries. If a bookmark already exists this menu entry will remove the bookmark from the line of code.
Figure 47: Adding bookmarks
Search Menu: Next Bookmark
This menu option will teleport you to the next bookmark in your code listing.
Search Menu: Previous Bookmark
This menu option will teleport you to the previous bookmark in your code listing.
Search Menu: Go To Line...
This menu option will take you directly to a code listing line number. When selected an input box will appear allowing you to type in the line number you wish to teleport to.
The IDE Run Menu
Figure 48: The IDE Run menu
Run Menu: Start
This menu option compiles the source code to an .EXE file and then executes the .EXE file, effectively running the program within your IDE. If there are any errors during compilation the error will be reported in the status window at the bottom of the IDE and program execution will not occur.
Run Menu: Run Only (No EXE)
This menu option will compiles and then runs the program without saving the .EXE file that was created.
Run Menu: Modify COMMAND$...
It's possible to pass information to a program through the use of the command line. For instance, the following command can be entered at the command line:
DIR
and a directory listing of all files and sub-directories will be listed to the screen. The DIR command allows you to change its behavior by providing command line "switches" such as this:
DIR /AD
which causes the DIR command to only list the sub-directories found. The DIR command scans the command line string that was used to start it and if anything following the actual name of the command is found that information is processed.
QB64 contains the COMMAND$ statement that holds any extra information from the command line that was entered. Type in the following code into your IDE and then start the code.
PRINT
PRINT "COMMAND$ = "; COMMAND$
Figure 49: COMMAND$ contains no text (null)
As Figure 49 above shows COMMAND$ is currently null (contains nothing). The IDE will allow you to simulate text being entered on the command line following your program by using this Run menu option. Open the Run menu and select Modify COMMAND$... to open an input box. In the "Enter text for COMMAND$" field type in: Text After The EXE
Figure 50 below shows the Modify COMMAND$ input box.
Figure 50: Modifying COMMAND$ to simulate extra command line input
Select < OK > to make the change. Now, run the program again contained in your IDE.
Figure 51: COMMAND$ now contains text
The text "Text After The IDE" was simulated as being entered on the command line after your program's .EXE and was therefore picked up by COMMAND$.
Let's say you are writing a game and wish to have some people Alpha or Beta test it. These testers will most likely need a way to override certain aspects of the game to test it. Instead of spending time writing a tester menu you could simply supply them with a list of command line switches to use to override game functions. The text supplied is then used to set variables within the game accordingly.
SuperSteveWorld /godmode (the player can't get killed)
SuperSteveWorld /noclip (the player can run through walls)
SuperSteveWorld /level5 (go directly to level 5)
SuperSteveWorld /godmode /noclip /level5 (all options contained within one command string)
Etc.. Etc..
The testers would need to know how to enter the command prompt and do this which your included documentation will cover of course. Your code would then look for these command line switches and process them.
IF INSTR(UCASE$(COMMAND$), "/GODMODE") THEN GodMode% = 1
The use of COMMAND$ also allows you to create utility software such as how the DIR command can accept command line switches at the command prompt.
Fun Fact: Many game developers leave these command line switches in, either accidentally or on purpose, for gamers to "discover" and over the years have become known as "cheat codes". Id, the developers of DOOM, took it a step further and allowed the cheat codes to be typed in while playing the game ... IDDQD or IDKFA anyone?
Run Menu: Output EXE to Source Folder
By default the IDE will compile your program's .EXE file to the QB64 installation folder. That folder may be "qb64pe" or "qb64" depending on the version and/or fork of QB64 you are using. By enabling this menu option the compiler will compile your program's .EXE file at the location where the source .BAS file resides. For instance, if you load a .BAS source file from:
...\qb64pe\Games\ssw\SuperSteveWorld.bas
the compiled .EXE would be created at:
...\qb64pe\Games\ssw\SuperSteveWorld.exe
instead of the installation folder:
...\qb64pe\SuperSteveWorld.exe
This menu option allows the .EXE to be created where asset files such as sounds and graphics are located along with the source code file.
Run Menu: Generate License For EXE
This menu option will generate a license text file appropriate for your program. The IDE takes into account the various QB64 libraries that were used to build the final .EXE file when creating the license text file. The license text file will be created in the same folder as your .EXE file.
Run Menu: Make EXE Only
This menu option will compile your code to an .EXE file but will not execute the file afterwards.
The IDE Debug Menu
The QB64 IDE has a full suite of debugging tools built directly into it to aid the programmer in tracking down and correcting code issues. Lesson 24 is a planned lesson coming soon that will be devoted entirely to debugging QB64 source code.
In the meantime you can view this excellent video created by Fellippe Heitor, a former developer of QB64, that goes into great detail on how to use the debugging tools built into the IDE. It's this video that I plan to use as a template for Lesson 24.
Download the QB64 Debug Video (200MB)
The IDE Options Menu
Figure 52: IDE Options menu
Options Menu: Display...
The menu option will display a window with a set of options you can set related to the overall size and font of the IDE screen.
Figure 53: The Display options window
The following options can be set here:
Window width:
This is the maximum number of characters per text line in the code window regardless of the type of font used.Window height:
This is the maximum number of character text lines in the code window.Cursor start:
The starting row of the cursor. The cursor is made up of 8 rows of solid lines starting from 1 at the top and ending with 8 at the bottom. Note: as you type a number into this field the cursor size will change to a preview of the cursor.Cursor end:
The ending row of the cursor. Note: as you type a number into this field the cursor size will change to a preview of the cursor.[ ] Remember position + size
When this option is enabled the IDE window will remember it's position and size on the desktop during subsequent restarts of the IDE.[ ] Use _FONT 8
When this option is enabled the default SCREEN 0 font will be used in the IDE.[ ] Use monospace TTF font:
When this option is selected the font file entered into the Font file: field below it will be used as a monospaced True Type Font. When this option is selected there must be a font file entered in the Font file: field.Font file:
The font file to use when Use monospace TTF font: is enabled.Font size in pixels:
The height in pixels of the chosen font characters.
If you performed the "Configure the IDE" instructions in the "Install QB64" section of the tutorial these options should already be set up to mimic the code found in the tutorial. You'll need to experiment with these setting to get an IDE screen to your liking. Your monitor's size and resolution will play an important part in the values you enter into these options.
Options Menu: IDE Colors...
The menu option will display a window with a set of options you can set related to the color scheme of the IDE and code elements.
Figure 54: The IDE Colors options window
The following options can be set here:
Scheme
A number of predefined color schemes are included with the IDE that can chosen using the ◄ ► buttons located to the left of Scheme:. The Dark blue color scheme was chosen for this tutorial. The available color schemes are:
- Super dark blue (the default color scheme)
- Dark blue (the color scheme used in this tutorial)
- QB64 Original (the color scheme used before IDE color options were available)
- Classic QB4.5 (the color scheme used by Microsoft's QuickBasic v4.5 IDE)
- CF Dark
- Dark side
- Camouflage
- Plum
- Light green
- All whiteItem:
Individual color elements of the IDE and code listing can be customized here. Use the R:, G:, and B: color sliders to change the item's color. The preview window under the color sliders displays how the customized color will appear. The available item customizations are:
- Normal Text : variables, mathematical operators, and punctuation
- Keywords : QB64 statements such as PRINT and INPUT
- Numbers : numeric values
- Strings : literal strings within quotation marks
- Metacommand/custom keywords : Compiler directives and subroutine/function names
- Comments : Text following a REM ( ' ) statement
- Background : The overall background color of the IDE
- Current line background : the color bar indicating the current cursor line
- Bracket/selection highlight : highlight color used when highlighting text and brackets
- Menus and dialogs : The menu bar and dialog window background color[ ] Highlight brackets
With this option is enabled when the cursor within the code listing is on a bracket (parenthesis) that bracket and the related start/end bracket will highlight.[ ] Multi-highlight (selection)
Todo[ ] Highlight keywords and numbers
When enabled keywords (statements) and numeric values will be highlighted according to their respective color settings in the Item: listing.Save Erase
If any changes are made to an item's color the scheme name will change to "User-defined" and the Save button will highlight. You can change the name of your new color scheme and the on click Save to keep a permanent file of it. You can use the Erase button to remove any previous color schemes you saved.< Restore Defaults >
This will restore the IDE colors to their default settings.
Options Menu: Code Layout...
This menu option allows for the customization of code spacing and capitalization.
Figure 55: The Code Layout options window
The following code layout options are available:
[ ] Auto Spacing & Upper/Lowercase Formatting
Enabling this option allows the IDE to handle statement spacing and capitalization.[ ] Keywords in CAPITALS
Enabling this option forces all letters in keywords to be capitalized. Note that this option is only available if [ ] Auto Spacing & Upper/Lowercase Formatting is enabled.[ ] Auto Indent
Enabling this option allows the IDE to handle code block indention automatically.Spacing:
This is the number of spaces that will be used to indent code blocks.[ ] Indent SUBs and FUNCTIONs
Enabling this option will treat the code between SUB...END SUB and FUNCTION...END FUNCTION statements as a code block by indenting the code. Not that this option is only available if [ ] Auto Indent is enabled.
Options Menu: Compiler Settings...
The QB64 source code that you write eventually gets converted to C++ source code and then finally compiled using a C++ compiler. These options let you take control of, or add functionality, to the process. These options are meant for users that are somewhat familiar with C++ or for developers tracking down a possible bug in the QB64 source code and testing new features. Note: Many thanks to DSMan195276, a long time QB64 developer, in helping to explain these features for this tutorial.
Figure 56: The Compiler Settings options window
The available compiler settings are:
[ ] Compile program with C++ optimization flag
When enabled this option adds the -O2 command line switch to the C++ compiler at compile and QB64 run times. This will result in faster code (a lot faster), but significantly slower compile times along with much higher memory usage during compilation.[ ] Strip C++ symbols from executable
This reduces executable size at the cost of C++ debugging ability. This is not related to the $DEBUG functionality built into the IDE but instead using a debugger such as gdb. Stripping the symbols keeps the debugger from showing you variable and function names. On Windows and Linux systems however the symbols will be stored in a separate .SYM file in the ./internal/temp folder. It is then possible to use a debugger such as gdb to load this .SYM file to gain back symbol and debug information even if they were stripped from the executable.[ ] Add C++ Debug Information
This option is also related to debugging using a tool such as gdb. This will increase the size of the executable by adding more information beyond just the symbol names to your executable such as the ability to step through the C++ source and display local variables.C++ Compiler Flags: and C++ Linker Flags:
These allow you to directly add extra flags during compilation of the generated C++ code for your program. Using these options will require a lot of knowledge to use because not all flags are valid for QB64 C++ generated code. These options could be used to apply extra optimization flags, include extra file paths, set global #DEFINE flags, or settings that control the stack size for example.Max C++ Compiler Processes:
The compilation of the C++ code for your program (mostly the runtime) is done in parallel by spawning multiple C++ compilers at a time. This setting controls how many of those compilers are allowed to run at one time. There are limits to how far you can take this because your actual compiled QB64 code is all in one .CPP file and thus cannot be compiled in parallel, but generally speaking a higher number here means faster compilation but also higher CPU and memory usage during compilation. The default of 3 is somewhat conservative, but generally speaking after the first compilation (where many of the separate runtime .CPP files will get compiled) numbers higher than 3 really won't do anything anyway.
Options Menu: Language...
This option displays a list box allowing you to select the code page for ASCII and Unicode mapping within the IDE.
Figure 57: The Language list box
This list allows you to choose which code page to use within the IDE for localized languages. You can read more about code pages, their history, and use here. The available code pages to choose from within the IDE are:
MICSFT_PC_CP437 - Original IBM PC hardware code page
MICSFT_PC_PC737 - Greek
MICSFT_PC_CP775 - Latin-7
MICSFT_PC_CP850 - Latin-1
MICSFT_PC_CP852 - Latin-2
MICSFT_PC_CP855 - Cyrillic (same as euro: 872)
MICSFT_PC_CP857 - Latin-5
MICSFT_PC_CP860 - Portuguese
MICSFT_PC_CP861 - Icelandic
MICSFT_PC_CP862 - Hebrew
MICSFT_PC_CP863 - Canadian French
MICSFT_PC_CP864 - Arabic
MICSFT_PC_CP865 - Danish/Norwegian
MICSFT_PC_CP866 - Belarusian, Russian, Ukrainian (same as euro: 808)
MICSFT_PC_CP869 - Greek
MICSFT_PC_CP874 - Thai with low Tone Marks & Ancient Characters
MICSFT_WINDOWS_CP1250 - Central Europe
MICSFT_WINDOWS_CP1251 - Cyrillic
MICSFT_WINDOWS_CP1252 - Western
MICSFT_WINDOWS_CP1253 - Greek
MICSFT_WINDOWS_CP1254 - Turkish
MICSFT_WINDOWS_CP1255 - Hebrew
MICSFT_WINDOWS_CP1256 - Arabic
MICSFT_WINDOWS_CP1257 - Baltic
MICSFT_WINDOWS_CP1258 - Vietnamese
MICSFT_WINDOWS_CP874 - Thai
MIK - Cyrillic, specifically Bulgarian Pravetz 16, most common in Bulgaria
Options Menu: Backup/Undo...
The IDE maintains a backup buffer that can be utilized in case of sudden IDE issues, such as locking up unexpectedly and forcing a restart, to Windows 10/11 restarting without warning.
Figure 58: Backup/Undo buffer size
This menu option displays a input window that allows you to set the size of the undo buffer in megabytes (MB). This buffer is used for the Edit menu's Undo and Redo options and to restore the source code in situations where the IDE had to be shut down and the source code was not saved. If that happens upon restart the IDE will detect this and ask if you would like to restore the code from the backup buffer.
Options Menu: Syntax Highlighter
When enabled this menu option enables the highlighting and color coding of source code. When disabled all source code will be one color.
Options Menu: Swap Mouse Buttons
When enabled the left and right mouse buttons will be swapped for left handed mouse users.
Options Menu: Cursor After Paste
When this option is enabled the text cursor will placed at the end of text that has been pasted into the code window.
Options Menu: Syntax Checker
When this option is enabled the IDE will perform syntax checking (in the status window). When disabled no errors will be reported to the programmer.
Options Menu: Ignore Warnings
When enabled minor warnings, such as a variable declared but not yet in use, will not be displayed in the status window of the IDE.
Options Menu: GUI Dialogs
When this option is enabled the IDE will use the file open/save GUI dialogs built into the operating system rather than those native to the IDE.
The IDE Tools Menu
The Tools menu contains some useful tools to aid the programmer in code development.
Figure 59: The IDE Tools menu
Tools Menu: ASCII Chart...
This menu option will display an interactive ASCII chart that you can navigate.
Figure 60: An interactive ASCII Chart
ASCII characters 1 through 255 are displayed in the chart. You can use the keyboard arrows or mouse pointer to select an ASCII character from the chart. Once you have your selected ASCII character the following options can be chosen from within this window:
< Insert character >
Selecting Insert character pastes the currently highlighted character directly into the IDE code window at the current cursor position. ASCII characters 0 through 31 were originally used as control characters to control such things as I/O flow control and printer functions. If you choose an ASCII character from 1 to 31 this message will appear:
Figure 61: Inserting an ASCII control character
Note: There is a typo in the dialog box above. The range of control characters should be from 1 to 31, not 1 to 32 as stated. The typo has been reported to the developers and has probably already been corrected by the time you read this.
< Insert CHR$ >
This option creates a CHR$ statement containing the ASCII value of the currently highlighted character directly into the IDE code window at the current cursor position. For example, in the IDE type in HappyFace$ = and then select the Tools menu and bring up the ASCII chart.
Figure 62: Inserting a CHR$
Next, choose Insert CHR$ and the resulting CHR$(1) will be pasted into your code as seen in Figure 63 below.
Figure 63: The ASCII chart pasted CHR$(1) into the code window
< Close >
This will close the ASCII chart without making any changes. Handy for when you just want to view the chart as a quick reference.
Tools Menu: Insert Quick Keycode
This tool is used to insert keyboard key scan codes directly into your code. Many keys, such as the function and navigation keys, use scan codes that are difficult to remember. You can view a complete listing here. I use this handy tool all the time!
This tool is best used by using the quick key combination CTRL-K instead of taking the time to click through the menu. Once you press the quick key combination CTRL-K the IDE will go into a wait state and ask you to press the key of the scan code you desire. Start a new program in the IDE and type the following line of code in (but don't press ENTER afterwards):
UpArrow& =
Now, press the quick key combination CTRL-K to put the IDE into the wait state. The entire IDE will darken indicating that it is waiting for a key press.
Figure 64: The IDE is waiting for a key press
The IDE is now waiting for a key to be pressed as seen in Figure 64 above. Press the UP ARROW key on your keyboard to have the key's scan code inserted directly into the code window as seen in Figure 65 below.
Figure 65: The up arrow key scan code (18432) was inserted into the code window
Using long integers (&) to store keyboard key scan codes is a good habit to get into. Some scan codes will exceed the limit of the integer range, such as ALT-F1 which results in 100308, far exceeding the 32767 integer (%) or 65535 unsigned integer (~%) limits.
Tools Menu: Math Evaluator
This option brings up an input window where simple math functions can be entered to get a result.
Figure 66: The Math Evaluator input window
Enter the math expression you wish to resolve in the Enter expression: field. The math evaluator understands the order of operations when using parenthesis as seen in Figure 66 above. Here I've entered the classic formula to find the text center point on an 80 column text screen with the text length being 32. The result will appear in a second window.
Figure 67: The result of the previous formula
The options available in the result window include:
< Insert >
This will insert the result value displayed into the code window at the current cursor position< HEX$ >
This will convert the result to a hexadecimal value and display that value in the result window. The < HEX$ > button will change to < Decimal > allowing you to convert the number back to decimal.< Comment >
This will add a comment directly after the result that displays the formula that was used to derive the result. Now the result and the comment are displayed in the result window. < Comment > changes to < Uncomment > if you wish to remove the comment from the result.< Redo >
Allows you to go back and enter a new, or modify the existing, formula.
In my opinion the Math Evaluator tool has always felt clunky and unpolished. After discussing this with one of the developers there is a reason for this. The Math Evaluator, while somewhat useful as a simple calculator, was mainly added for developers to use. It has hidden meaning for them when dealing with QB64 source code changes and updates. While I don't think the Math Evaluator can replace the Windows calculator in programmer mode, it is nonetheless a handy little tool to use in a pinch as I have done from time to time. It's actually quite useful to get quick answers to simple little formulas like the one used in the example above.
Tools Menu: RGB Color Mixer...
The RGB color mixer is used to mix red, green, and blue values to get a 24bit RGB color result that can then be inserted directly into your code. It's a very simplified version of a color mixer that you would find in all image processing programs.
Figure 68: Pick a color, any color
The gray box to the left of R:, G:, and B:, as seen in Figure 68 above, is a preview of the color currently chosen. The R:, G:, and B: color sliders can be slid back and forth using the mouse. As you move the color sliders the values to the right of each slider will display the current value ranging from 0 to 255. You can also manually enter color values into the numeric fields by using the mouse to click on each one. Once you have the desired color selected the following options are available:
< Insert >
This will insert the QB64 _RGB32 statement into your code at the current cursor position. The statement will include the red, green, and blue values: _RGB32(127, 127, 127) for instance.< Copy >
This will copy the QB64 _RGB32 statement described above into the clipboard so you can paste it to another location.
Code Editing Tips Using the IDE
Code creation using the IDE can be very fast and efficient with practice and using the tools available. It takes time to build the muscle memory that remembers the various hot-key and quick-key combinations but using them will pay off.
Start a new program in your IDE and type the following little program in:
DIM x!, y!, xvec!, yvec! ' x,y location and vectors of circle
RANDOMIZE TIMER ' seed random number generator
x! = 319 ' center circle x location
y! = 239 ' center circle y location
xvec! = RND * 5 - RND * 5 ' get a random x vector
yvec! = RND * 5 - RND * 5 ' get a random y vector
SCREEN _NEWIMAGE(640, 480, 32) ' enter graphics screen
DO ' begin main loop
CLS ' clear screen
_LIMIT 60 ' 60 frames per second
CIRCLE (x!, y!), 20 ' draw the circle
PAINT (x!, y!) ' paint the circle
'
' Keep the circle on the screen by looking ahead. If circle is going to leave edge of
' screen reverse the appropriate vector otherwise simply add vectors to x,y locations.
'
IF x! + xvec! > 619 OR x! + xvec! < 19 THEN xvec! = -xvec! ELSE x! = x! + xvec!
IF y! + yvec! > 459 OR y! + yvec! < 19 THEN yvec! = -yvec! ELSE y! = y! + yvec!
LOCATE 15, 31 ' place the text cursor
PRINT "A Bouncing Circle!" ' print some text
_DISPLAY ' update the screen with changes
LOOP UNTIL _KEYDOWN(27) ' leave when ESC key pressed
Figure 69: Not quite what I had envisioned
The circle is bouncing around the screen but something is off. The circle gets covered by the text and I would rather have the circle cover the text. This is a simple enough fix by moving the code in lines 19 and 20
LOCATE 15, 31 ' place the text cursor
PRINT "A Bouncing Circle!" ' print some text
and placing them before the circle is drawn in line 11. You could just simply retype these lines of code before the CIRCLE statement and then erase lines 19 and 20. However, to save time the IDE can make the move quickly and simply.
Position your text cursor at the beginning of line 19. Now, hold the SHIFT key down and then press the DOWN ARROW key twice. Lines 19 and 20 are now highlighted as seen in Figure 70 below.
Figure 70: Lines 19 and 20 are highlighted
Using the SHIFT key in concert with the ARROW KEYS (left, right, up, and down) allows you to make a text selection. Once you have the desired text selected you can use the Edit menu options to Cut and Paste these two lines of code to a new location. However, instead of using the mouse to navigate to the Edit menu and then selecting Cut use one of the the associated quick-key combinations or the hot-key combination. There are three ways to Cut these lines of code and place them in the clipboard:
SHIFT-DEL
CTRL-X
ALT-E-T
The quick-key or hot-key combination you use is up to you. Whichever one you decide to use will eventually become second nature as muscle memory takes over. Back in the QuickBasic days I became accustomed to using hot-key combinations. So my natural go-to method for cutting selected text is ALT-E-T. I don't even think about it any longer, my fingers just instantly do this when I think "cut". I know, three keystrokes instead of two. Back in the DOS days most text editors and word processors supported ALT-E-T (as do a lot of Windows programs today, try it!) so it became natural to use one method that could be used in many places.
Go ahead and use one of the methods above to cut the text lines. Don't worry, they'll be placed into the clipboard and won't be lost.
Now, position the text cursor at the beginning of line 11 in the code. Use one of the Paste quick-key combinations or hot-key combination to paste the code in front of line 11. There are three ways to Paste the lines of code contained in the clipboard:
SHIFT-INS
CTRL-V
ALT-E-P
The lines of code are now inserted before the CIRCLE statement in the code.
Figure 71: That's better
Figure 72: Circle is now over text ... but what the heck is that hole?
This is how it normally goes when programming, correct one issue only to create another. The circle is now being drawn over the text but as the circle crosses the text there are curious black holes being produced. What could be causing this?
In lines 13 and 14 of the code a color was not supplied to the CIRCLE and PAINT statements. When no color is supplied the default of bright white is used ( _RGB32(255, 255, 255) ). The default text color is also bright white. The PAINT statement can't fill in the text holes because it has to stop at the text color causing the holes of missing color. This again is a simple fix that can be remedied by slightly changing the CIRCLE and PAINT statement color using a constant.
Position your cursor at the beginning of line 1 in the code and then press ENTER. This will create a blank line at the beginning of the code. Move the cursor back to the beginning of line 1, the blank line, and type the following line of code in:
CONST OFFWHITE~& = _RGB32(255, 255, 254) ' slightly off bright white
Next, change lines 14 and 15 to read:
CIRCLE (x!, y!), 20, OFFWHITE~& ' draw the circle
PAINT (x!, y!), OFFWHITE~&, OFFWHITE~& ' paint the circle
Figure 73: The color OFFWHITE~& added
Figure 74: All seems correct now
Now that a color has been supplied to the CIRCLE and PAINT statements everything works as it should. The color defined as OFFWHITE~&, _RGB32(255, 255, 254), is so slightly different than bright white, _RGB32(255, 255,255), that the human eye can't perceive it. This is handy trick to remember when painting a color over another object of the same color.
There's one more thing I decided I don't like about the code. I want to shorten the variable names xvec! and yvec! to xv! and yv!. Well, time to start going through the code and manually changing every instance, right? Of course not, let the IDE make the changes for you in an instant. Do the following:
Press : ALT-F3
Type in : xvec!
Press : TAB key
Type in : xv!
press : ALT-C
Press : ESC key twice
Bam! You just changed all instances of xvec! in the source code to xv! Lets' do the same thing for yvec!:
Press : ALT-F3
Type in : yvec!
Press : TAB key
Type in : yv!
Press : ALT-C
Press : ESC key twice
Now every instance of yvec! in the source code has been changed to yv!. Easy peasy oh so breezy.
Figure 75: xvec! and yvec! changed to xv! and yv!
The point here is to learn as many of the IDE's shortcuts as you can to become very productive with your coding. Constantly fiddling around with your mouse is inefficient and breaks the flow. The best part of programming is getting those thoughts and ideas in your head in the form of source code as quickly and easily as possible so you can see the results.