Update Website with new Getting Started Exercise (#213)

* Update website home page

* Update documentation page to give more relevant info

* Update top nav-bar

* Add developer names

* Add skeleton of basic tutorial

* Add new getting_started example

* Fix typo

* Update HomePage to reflect new getting started page

* Updates for getting started

docs/_data/navigation.yml

@@ -7,19 +7,22 @@ main:
   - title: Installation
     url: /install/
 
+  - title: Tutorial
+    url: /tutorials/
+
   - title: References
     url: /references/
 
 # left side bar
 docs:
   - title: Home
     children:
-      - title: Check it out
+      - title: Home
         url: /
 
   - title: Installation
     children: 
-    - title: How to install
+    - title: Installation Instructions
       url: /install/
 
   - title: About

docs/_pages/about.md

@@ -11,9 +11,7 @@ sidebar:
   nav: "docs"
 ---
 
-# Visual Circuit
-
-![alt_text]({{ "assets/images/logo.png" | absolute_url }})
+![Visual_Circuit_Logo]({{ "assets/images/logo.png" | absolute_url }})
 
 [![License](http://img.shields.io/:license-gpl-blue.svg)](http://opensource.org/licenses/GPL-2.0)
 
@@ -25,7 +23,7 @@ For more information visit our site [VisualCircuit](https://jderobot.github.io/V
 
 ### Supported Platforms
  * Python-3 + ROS-Noetic
- * Might support future ROS Distributions
+ * Partial Support for ROS2 Humble
 
 
 
@@ -48,7 +46,7 @@ Check the [Documentation](https://jderobot.github.io/VisualCircuit/documentation
 
 ## Development
 
-Install [Python >= 3.5](https://www.python.org/downloads/) and [Node.js](https://nodejs.org/), for windows developers nodejs version should be 10.17.x
+Install [Python >= 3.8](https://www.python.org/downloads/) and [Node.js](https://nodejs.org/), for windows developers nodejs version should be 10.17.x
 
 
 [Atom](https://atom.io/) editor with [linter-jshint](https://atom.io/packages/linter-jshint) is recommended.
@@ -121,7 +119,9 @@ npm update -g
 ## Development Team
 
 * **Muhammad Taha Suhail**, creator [Github page](https://github.com/AbsorbedInThought)
-* **Jose Maria Cañas**,concepts and development [Github page](https://github.com/jmplaza)
+* **Jose Maria Cañas**, concepts and development [Github page](https://github.com/jmplaza)
+* **Suhas G**, developer [Github Page](https://github.com/toshan-luktuke)
+* **Toshan Luktuke**, developer [Github Page](https://github.com/Suhas-G)
 
 
 ## Credits

docs/_pages/documentation.md

@@ -11,19 +11,17 @@ sidebar:
   nav: "docs"
 ---
 
-## Project
 
-### New Documentation
-To access the new documentation, visit this link. [Visual Circuit 3.x Block Documentation](/VisualCircuit/blockDocs/index.html)
+## To access the new documentation, visit this link. [Visual Circuit 3.x Block Documentation](/VisualCircuit/blockDocs/index.html)
 
 ### Definition
 
-    Version: 1.0.
+    Version: 3.0.
     Package: Project Information.
     Design: Graph and circuit design.
     Dependencies: All used dependencies in one level.
 
-Extension: .vc
+Extension: `.vc3`
 
 
 ### Block Instances
@@ -237,11 +235,11 @@ Extension: .vc
 - Output: cmd_vel (linear velocity, angular velocity)
 - Parameters: Kp, Ki, Kd
 
-ROS Topic based communation blocks can be found [here](https://github.com/JdeRobot/VisualCircuit/tree/master/app/resources/collection/blocks/Blocks/ROS-Topics). They are working but not currently a part of the current VisualCircuit roadmap.
-
 
 ## Samples
 
+Note that these are the version `1.0.0` implementations of these blocks. The current versions (`2.0.0`) being used are quite similar, with minor changes in the template code itself.  
+
 ### Camera
 
 ```

docs/_pages/follow_road.md

@@ -1,5 +1,5 @@
 ---
-title: Getting Started
+title: RoboticsAcademy with Visual Circuit
 layout: posts
 permalink: /follow_road/
 

docs/_pages/getting_started.md

@@ -0,0 +1,151 @@
+---
+title: Getting Started
+layout: posts
+permalink: /getting_started/
+
+collection: posts
+
+classes: wide
+
+sidebar:
+  nav: "docs"
+
+gallery:
+  - url: /assets/images/follow_road/follow_road.jpg
+    image_path: /assets/images/follow_road/follow_road.jpg
+    alt: "Follow Road."
+    title: "Follow Road."
+
+select:
+  - url: /assets/images/getting_started/select_blocks.png
+    image_path: /assets/images/getting_started/select_blocks.png
+    alt: "Select Blocks"
+    title: "Select Blocks"
+
+skeleton:
+  - url: /assets/images/getting_started/skeleton_structure.png
+    image_path: /assets/images/getting_started/skeleton_structure.png
+    alt: "Skeleton of Circuit"
+    title: "Skeleton of Circuit"
+
+internals:
+
+  - url: /assets/images/getting_started/camera.png
+    image_path: /assets/images/getting_started/camera.png
+    alt: "Camera"
+    title: "Camera"
+
+  - url: /assets/images/getting_started/colour_filter.png
+    image_path: /assets/images/getting_started/colour_filter.png
+    alt: "Colour Filter"
+    title: "Colour Filter"
+
+  - url: /assets/images/getting_started/screen.png
+    image_path: /assets/images/getting_started/screen.png
+    alt: "Screen"
+    title: "Screen"
+
+download:
+  - url: /assets/images/getting_started/download.png
+    image_path: /assets/images/getting_started/download.png
+    alt: "Download Page"
+    title: "Download Page"
+
+files:
+  - url: /assets/images/getting_started/files.png
+    image_path: /assets/images/getting_started/files.png
+    alt: "Files"
+    title: "Files"
+
+
+demo:
+  - url: /assets/images/getting_started/demo.png
+    image_path: /assets/images/getting_started/demo.png
+    alt: "Demo"
+    title: "Demo"
+
+---
+
+## Goal
+The goal of this is to get your first Visual Circuit application up and running. Through the course of this tutorial we will build a simple Colour Filter using our OpenCV Blocks.
+
+### Installation
+The installation instructions can be found [here](/install/)
+
+### Starting Visual Circuit
+If you are accessing Visual Circuit online then simply open the webpage. 
+
+However, if you are running Visual Circuit locally then:
+
+Start the frontend
+```bash
+cd frontend/
+npm start
+```
+
+Start the backend
+```bash
+cd backend
+python3 manage.py runserver
+```
+
+### Connecting the Blocks
+
+We will need three blocks for this exercise:
+- Camera
+- Colour Filter
+- Screen
+
+#### Camera
+
+The Camera Block uses OpenCV to connect to your device's camera and start a video feed. 
+
+#### Colour Filter
+
+The colour filter uses a range of HSV values in order to accurately detect the colour that we want in the image/video. 
+
+#### Screen
+
+The screen block opens a window to display the feed coming from the Colour Filter block.
+
+All the data that is passed between blocks is done via the wires and the use of the `share` function. Internally each wire is a shared memory object and each block reads from these objects. This enables us to update the data inside in real time.
+
+### 1. Selecting the Blocks
+
+{% include gallery id="select" %}
+
+### 2. Skeleton Structure
+
+{% include gallery id="skeleton" %}
+
+### 3. Block Internals
+
+{% include gallery id="internals" %}
+
+Simply click on each one to zoom in
+
+### 4. Download
+
+{% include gallery id="download" %}
+
+### 5. File Structure
+
+{% include gallery id="files" %}
+
+### 6. Demo
+
+Run the program after extracting the zip file using:
+```bash
+python3 main.py
+```
+
+The output:
+
+{% include gallery id="demo" %}
+
+
+## Conclusion
+
+We have learnt how to create a basic program in Visual Circuit. We have created a Hello World example using three block that are connected to each other and share image data between themselves.
+
+In a similar fashion we can create more complicated applications with the only constrain being the data that is shared in between them. Further we can also edit the internal code of each block to make it suit our needs. 

docs/_pages/home.md

@@ -34,10 +34,18 @@ feature_row:
     btn_class: "btn--primary"
     btn_label: "Learn more"
 
-  - image_path: /assets/images/follow_road/follow_road.jpg
+  - image_path: /assets/images/cover/skeleton_structure.png
     alt: "Getting Started"
     title: "Getting Started"
-    excerpt: "Solve the Follow Road Exercise using VisualCircuit."
+    excerpt: "Get started by making a simple circuit in VisualCircuit"
+    url: "/getting_started/"
+    btn_class: "btn--primary"
+    btn_label: "Learn more"
+
+  - image_path: /assets/images/follow_road/follow_road.jpg
+    alt: "Follow Road"
+    title: "Follow Road"
+    excerpt: "Solving the Follow Road Excercise with Visual Circuit"
     url: "/follow_road/"
     btn_class: "btn--primary"
     btn_label: "Learn more"
@@ -53,11 +61,13 @@ feature_row:
 
 {% include feature_row %}
 
-VisualCircuit is a visual editor for programming robotics applications with ease.
+VisualCircuit is a visual editor for programming robotics applications with blocks and wires.
 
-VisualCircuit will allow users to program robotic intelligence using a visual language application. This tool follows the divide and conquer approach in solving problems related to robotics and computer vision. Each block is considered as a separate and functional part of the system which is running independently at fast iterations. The modular design of this tool helps the user to think in terms of blocks running concurrently which can then be easily connected to each other with the help of wires which are basically used for communication between the blocks. This tool will allow the user to think more effectively, reduce the development time and experiment with more solutions in a short period of time.
+VisualCircuit is a tool that allows users to program robotic intelligence using a visual language application. It follows a divide and conquer approach where each block is a separate and functional part of the system, running independently at fast iterations. The modular design of this tool allows users to think in terms of blocks running concurrently and easily connect them to each other with wires for communication. This approach helps reduce development time and enables fast prototyping, making it a powerful tool for creating and testing complex robotic systems.
 
-The people working on the project are:
+The current developers are:
 
 - [Jose Maria Cañas](https://gsyc.urjc.es/jmplaza/)
 - [Muhammad Taha Suhail](https://github.com/AbsorbedInThought)
+- [Toshan Luktuke](https://github.com/toshan-luktuke)
+- [Suhas Gopal](https://github.com/Suhas-G)

docs/_pages/references.md

@@ -10,7 +10,7 @@ classes: wide
 
 ---
 
-
+<!-- ToDo: Add React references -->
 ## NodeJS Front-End
 
   - The front-end was based on IceStudio, thanks to the [FPGAwars](http://fpgawars.github.io/) community.