10 HyperNext: Procedures
Channel: TigaByteSoftware
Date: 2024-02-16

Welcome to HyperNext Studio.

This video introduces Procedures with some simple examples.
A procedure is a named independent section of code that can be run by calling its name.
Functions are similar to procedures except they return a value that goes into a variable

------------
Let's start by running HyperNext Creator.
Run Creator by double clicking the HyperNext Creator app.

In the Guide is some information on procedures and functions.
Functions will be covered in the next video
 
HN has over a 1000 procedures and functions that can be called from anywhere
Users can also create their own Local or Global Procedures
Local can only be called from within the handler they are declared in
Global can be called from anywhere and are stored in the Main code section.

----------------------
Create a new project using menu File with option New.

Create 1 button

Create 1 canvas

-----------------------------
This example briefly explains the basics of HN procedures
See the Guide here for more info

A procedure has a name so it can be found by other scripts 
Some procedures need values passing to them so they can work properly
In programming these values are called parameters

Click Button 1 and then click the Script button

In the editor type the following command that will display a message
  Message 'Hello World'

The part of the command after Message is the parameter
Parameters can be strings like 'Hello World'
numbers like 3.142
or be variables

Note, in most programming languages any procedure or function call must surround their parameters with brackets 
HN can accept both brackets and spaces
so Message('Hello World') and Message 'Hello World' are equivalent

Now run your project but if the Editor opens just fix your error and try again.

Click button 1 to see what happens

Return to Design mode

----------------------------------
This example shows how to create and define your own procedures
it will draw some simple graphics into a canvas

It will need 2 user defined procedures
One will set up the canvas for drawing
and the other will draw the graphics

Click the Script button to open the editor
then click the MainCode button

We now need a procedure to setup the canvas
To create a new procedure click the New button

Name the procedure Canvas_Setup

It needs 3 color parameters to set the initial canvas color
Call them red, green, blue

Click the Accept Changes button

The canvas setup code will go into this procedure
Get SCRIPT 1 code from the link in the description below this video

https://www.tigabyte.com/YT_Scripts/10_Script1.txt


The script has 3 parts:
  Declaring the global variables
  Setting the canvas paper color
  Getting the size of the canvas

---------------------------------------------
Next create a new procedure to draw the graphics
To create a new procedure click the New button

Name the procedure Canvas_Draw_Circle

No parameters are needed
so click the Accept Changes button

The canvas graphics code will go into this procedure
Get SCRIPT 2 code from the link in the description below this video

https://www.tigabyte.com/YT_Scripts/10_Script2.txt

The script has 5 parts:
  Declaring the global and local variables
  Generating a random canvas pen color
  Setting the canvas pen color
  Getting random coordinates for the circle location
  Drawing the 10 pixel diameter circle

---------------------------------
Next in MainCode we can define the global variables for the canvas size
this helps us remember which global variables are being used

Just copy them from one of the procedures
and place them into the Variables section

----------------------------------
Now we need the button code that will call these procedures 
Get SCRIPT 3 code from the link in the description below this video

https://www.tigabyte.com/YT_Scripts/10_Script3.txt

Close the editor

----------------------------------
As a final touch lets change the card color

Click the card

In the Toolbar Properties section
click the color checkbox to check it
then click the Card Color button

Select your preferred color using the color selector

when finished just click the OK button

-----------------------------------
Run your program


Click button 1 to see what happens.
a 1000 filled colored circles should appear in the black canvas

Return to Design mode.

-----------------------------------------------

This concludes the brief introduction to Procedures

The next video will introduce you to Functions.

Thank you for watching.

===================================
HyperNext Studio downloads link:

https://www.tigabyte.com/hnfiles/downloads.html

--------------------------
Help PDFS

https://www.tigabyte.com/docs/QuickStart.pdf

https://www.tigabyte.com/docs/Language%20Reference%20401.pdf

--------------------------