Merge branch 'assignment14_Essi's_documentation' into 'main'

Assignment14 Essi's contribution

See merge request !87

docs/group_assignments/assignment14.md

@@ -44,7 +44,9 @@ You can find beginner, intermediate, and advanced topics.
 Processing is built on Java, so Processing source code has similar syntax to Java.
 On Documentation - Reference there'a a vast list of used functions and their explanations. 
 
-###Working with Processing
+### Working with Processing
+
+### Meter
 
 Petra demonstrated the using of a meter in Processing in her own assignment of the week.
 [individual assignment](https://fabacademy.org/2023/labs/oulu/students/petra-rutanen/assignments/week15.html/).
@@ -108,6 +110,52 @@ of the week you also print a line of the result and update the meter.
 
 Petra also made meters that read two values from a sensor. You can see the work on her own pages. 
 
+### G4P GUI builder
+
+Essi demonstrated the using of a G4P GUI builder tool in Processing in her own assignment of the week. [Individual assignment](https://fabacademy.org/2023/labs/oulu/students/essi-huusko/assignments/week14.html).
+
+The GUI builder tool provides a visual environment for the rapid creation and editing of user interfaces using GUI controls in the G4P library. Controls can be buttons, sliders, labels, textfields, etc.
+
+More about the G4P GUI builder tool and G4P library can be read on the [developer's page](http://lagers.org.uk/g4ptool/index.html).
+
+
+To start working with the G4P GUI builder in Processing, first you need to install the tool and the library for it. From the Sketch menu, open "Import Library..." and "Manage Libraries". Search for g4p to find the right library and install it. 
+
+![G4P Library](assignment14/g4p_lib.jpg)
+
+In the same window, there is also a Tools tab where you can search for the right tool using the g4p search term. 
+
+![G4P Tool](assignment14/g4p_tool.jpg)
+
+Next, you can open the G4P GUI builder from the Tools tab and it will open in a new window. In the right menu, under Main window, you can change the properties, such as the size of the Main window. From the top you can change the settings of the grid. From the top menu you can add controls, of which there are many different types. In the example below I have added a textfield to the Main window. 
+
+![G4P Textfield](assignment14/g4p_control.jpg)
+
+When you click from the right to open the textfield you have just created, you can change its properties. Under the Sketch tab, you can edit the text properties of the controls, for intance. Small examples of how to use the properties can be found in the Essi's documentation.
+
+This tool has a code generator, that generates the code necessary to create the interface. So when you add a control in the G4P GUI builder, the Processing automatically creates a gui file with the generated code for the GUI controls:
+
+![GUI file](assignment14/gui_file.jpg)
+
+Also the sketch file is updated with the g4p.controls library, which is required for the controls to work. The initial public void setup (), public void draw () and in this case also the public void customGUI (), which I did not use in my test, are also updated in the file:
+
+![Sketch file](assignment14/sketch_file.jpg)
+
+These files are then modified according to the features and properties you want. Small examples can be found in the Essi's documentation.
+
+Bringing information from the Arduino IDE to the Processing is done in the same way as in Petra's example above. So in the code you have to import the processing.serial library, create an object from the serial class and in the void setup() you can use lines like Petra mentioned to open the port. 
+
+The message that the Arduino sends and how to read it in Processing depends on the specific communication protocol you have implemented between the Arduino and Processing. 
+
+For example, below Arduino sends a temperature value as a text message, float means data type for floating-point numbers.
+
+![Arduino code](assignment14/floatArduino.png)
+
+And the Processing reads it using the serialEvent() function:
+
+![serialEvent](assignment14/serialEvent.png)
+
+Processing receives temperature data from the serial port, parses it as a float, and updates a textfield (textfield2) with the temperature value.
 
 ## Esp32C3 webhost
 <!-- Aarne -->