[PC-1221] - Portenta C33 Energy Meter Application Note (#449)

* Initial commit - Added library management section for programming introduction for Arduino PLC IDE tutorial

* Content minor update w/ gif

* Tutorial content update

* Tutorial content update

* Tutorial content update

* Tutorial content update

* Tutorial content update

* Tutorial content update

* Tutorial content minor update

* Tutorial content minor update

* Update content/software/plc-ide/tutorials/plc-programming-introduction/content.md

Co-authored-by: Julián Caro Linares <j.carolinares@arduino.cc>

* Update content/software/plc-ide/tutorials/plc-programming-introduction/content.md

Co-authored-by: Julián Caro Linares <j.carolinares@arduino.cc>

* Update content/software/plc-ide/tutorials/plc-programming-introduction/content.md

Co-authored-by: Julián Caro Linares <j.carolinares@arduino.cc>

* Tutorial content post-update

* Tutorial content post-update

* Tutorial content minor post-update

* dotenv dep fix (#1094)

* dotenv dep fix

* test dep

* 1.8.98

* update dep

* Update README.md (#1095)

* Initial commit

* Application note content update

* Application note content update

* Application note content update

* Content update

* Content update

* Content update

* Content update

* Application note content update

* Christopher review

* Application note content struct readjustment

* Application note content update

* Math calculations

* Math calculations update

* Image folder location update

* Spelling check

* Math calculations update

* Content update

* Graphics update

* Example sketch updated

* Code and graphics update

* Spelling fix

* Application note content update

* Code explanation added

* Conclusion added

* Application note content patch

* Application note content patch

* Application note content patch

* Application note content update

* Application note content minor patch

* Application note content patch

* Application note content minor update - Mobile cloud reference

* Feedback changes

---------

Co-authored-by: TaddyHC <k.hochung@arduino.cc>
Co-authored-by: TaddyHC <94547080+TaddyHC@users.noreply.github.com>
Co-authored-by: Julián Caro Linares <j.carolinares@arduino.cc>
Co-authored-by: Matteo Marsala <m.marsala@arduino.cc>
Co-authored-by: jcarolinares <jcarolinares@gmail.com>

Author: 4 people

README.md

@@ -87,6 +87,15 @@ Code snippets can be included by using the triple backticks syntax e.g. ` ```ard
 arduino, bash, markup, clike, c, cpp, css, css-extras, javascript, jsx, js-extras, coffeescript, diff, git, go, graphql, handlebars, json, less, makefile, markdown, objectivec, ocaml, python, reason, sass, scss, sql, stylus, tsx, typescript, wasm, yaml
 ```
 
+### Including Code Blocks fetching Github pages
+
+CodeBlocks are custom components that can be added directly in the Markdown on docs-content.
+Using this component, the code block will be fetched directly from Github pages.
+
+Syntax:
+` <CodeBlock url=”https://github.com/example” className="{language}"/>`
+ 
+Broken URL will show error alert. URL must be in Github domain and must be public.
 
 ## Previewing Changes
 

content/hardware/04.pro/boards/portenta-c33/tutorials/energy-meter-application-note/assets/C33_application_1.png

@@ -1,5 +1,5 @@
 ---
-title: 'Programming Introduction With Arduino® PLC IDE'
+title: 'Programming Introduction with Arduino® PLC IDE'
 difficulty: intermediate
 description: "Create programs with all the IEC-61131-3 languages on the Arduino PLC IDE."
 tags:
@@ -27,16 +27,18 @@ The goals of this tutorial are:
 
 ### Required Hardware and Software
 
-- [Arduino® Portenta Machine Control](https://store.arduino.cc/products/arduino-portenta-machine-control)
+- [Portenta Machine Control](https://store.arduino.cc/products/arduino-portenta-machine-control)
 
 ## Common Features
+
 ### Variables Addition
 
 There are 2 types of variables:
 * Global variables: All of the 5 programs can access it.
 * Local variables: Only one program has access to it.
 
 #### Global Variable
+
 Click inside the **Project** tab and click the **Global_vars** section, a table is available to see the full list of global variables on your project.
 
 To add a new one, right-click on the table and click the **insert** button.
@@ -61,6 +63,7 @@ Following the same steps explained previously, you can right-click the table, an
 A new variable will be added with default settings, double-click each of them to change them as you need.
 
 ### Adding Blocks
+
 The blocks are features or functions available from libraries and the PLC IDE.
 
 These will help you to perform tasks, like AND gates, ADD function, etc...
@@ -71,6 +74,7 @@ To add a block to your program (only possible with LD, SFC, FBD) you can drag an
 Once you drag and drop it on your canvas it will generate a block with some input and output pins fully customizable, most of the time you can right-click the block and add more pins in case you need more than the default.
 
 ### Task Attachment
+
 Once you have your programs you can attach them to a task inside the runtime.
 
 There are 4 Tasks:
@@ -100,10 +104,28 @@ Inside the **Tool window** you can drag and drop variables, or click the **Inser
 
 ![Watch a variable](assets/watch.png)
 
+### Library Management
+
+In contrast to the conventional Arduino IDE, the PLC IDE manages the library add-on and usage differently. To add the desired library, go to **Resources** tab and click the **Libraries** listed under the **Sketch**.
+
+![Adding a library to the PLC IDE Arduino Sketch](assets/plcide-library-management.gif)
+
+With the 'Sketch Libraries' window open, click the **Add** option and fill out the library name. You will have to fill in the needed library version as well.
+
+For example, if you want to add the 1.1.1 version of the 'Arduino_MachineControl' library, respective information must be introduced to its fields accordingly.
+
+It is possible to find this information using the [Arduino Library List](https://www.arduinolibraries.info/) or referencing the indexed library on your development environment if you have downloaded it to use within Arduino IDE. By navigating manually to the local libraries directory on your development environment, you can access the meta-data from the 'library.properties' of the desired library.
+
+***Currently only publicly available libraries can be added to the PLC IDE Arduino Sketch, and you can check its availability by searching in the [Arduino Library List](https://www.arduinolibraries.info/).***
+
+Once you have followed the previous steps, the libraries will be available for use. A library of choice can be removed by clicking on the **Remove** option within the 'Sketch Libraries' window.
+
 ## Sample Program
+
 The program will be a simple counter, increasing the count by X over time.
 
 ### Arduino Sketch
+
 ```cpp
 int count = 0;
 const int addition = 1;
@@ -115,6 +137,7 @@ void loop(){
 ```
 
 ### IEC-61131-3 Languages
+
 To create a new program open your project tab, go to the toolbar **Project > New object > New program**, set a name for your program and select its language.
 
 ![New program from Project's drop-down menu](assets/newProgram.png)
@@ -131,6 +154,7 @@ There are 5 languages available:
 * Function Block Diagram (FBD)
 
 ### Structured Text
+
 This language is similar to C, the code to assign a value to a variable is the following:
 ```
 count := count + addition;
@@ -139,6 +163,7 @@ count := count + addition;
 ![Structured Text counter program](assets/STprogram.png)
 
 ### Instruction List
+
 This programming language is similar to Assembly programming.
 
 The code for a counter script is:
@@ -151,6 +176,7 @@ ST count
 ![Instruction List counter program](assets/ILprogram.png)
 
 ### Ladder Diagram
+
 This programming environment is based on lines and blocks, a line has a path from left to right that needs to pass all the in between blocks in order to continue towards the right, if it does pass all the different blocks (like AND gates) it will end on the right on a brackets symbol (coil) triggering whatever you have set up to do, which could be for example a relay latching to Normally-Open (NO).
 
 This is how a counter program looks:
@@ -160,18 +186,21 @@ Here is a video doing that from scratch:
 <iframe width="100%" height="415" src="https://www.youtube.com/embed/0EdATSgIc9o" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ### Sequential Function Chart
+
 This language approaches the script in a similar way as a flowchart, meaning you have blocks that do some work, you check the result of that work, and afterward you keep flowing with the choices.
 
 SFC language can not interact directly with the machine, meaning you can not make an output be OFF directly, to do so you will need to create **actions**
 
 #### Actions
+
 An action is a script in another language (i.e. structured text) that performs the work, this will get triggered depending on the chart.
 
 To create one go to your project tree, right-click the SFC script and click the "New action" button.
 
 ![Creating new action](assets/newAction.png)
 
 #### SFC Program
+
 You have blocks available by right-clicking inside the canvas or on the top bar, you can drag and drop them.
 
 The SFC program has one rule which is following the order of **Step<sub>0</sub> > Transition<sub>0</sub> > Step<sub>n</sub> > Transition<sub>n</sub> > ... > Jump**
@@ -187,6 +216,7 @@ Here is a video doing that from scratch:
 <iframe width="100%" height="415" src="https://www.youtube.com/embed/olQooS4bX4A" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ### Functional Block Diagram
+
 This is similar to the SFC Programming, but in this case there is no sequential path on the program, you add blocks to do the needed work.
 
 For example, adding the **Add** block will do the Add function each cycle.
@@ -200,6 +230,7 @@ Here is a video doing that from scratch:
 ***In the previous programs, we used local variables, remember to select the program's specific variables to be watched, or you will not see any data***
 
 ## Conclusion
+
 You have:
 * Created a simple counter with each language
 * Learned how to watch live variable's value

content/hardware/04.pro/boards/portenta-c33/tutorials/energy-meter-application-note/assets/C33_application_2.png

@@ -18,7 +18,7 @@
   },
   "homepage": "https://github.com/arduino/docs-content#readme",
   "dependencies": {
-    "@arduino/docs-arduino-cc": "^1.8.97",
+    "@arduino/docs-arduino-cc": "^1.8.98",
     "gatsby": "^4.9.2"
   },
   "volta": {