diff --git a/docs/_data/navigation.yml b/docs/_data/navigation.yml index 58fc16c9..3749d7ef 100644 --- a/docs/_data/navigation.yml +++ b/docs/_data/navigation.yml @@ -7,6 +7,9 @@ main: - title: Installation url: /install/ + - title: Tutorial + url: /tutorials/ + - title: References url: /references/ @@ -14,12 +17,12 @@ main: 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 diff --git a/docs/_pages/about.md b/docs/_pages/about.md index bcaeaf53..38d1fae3 100644 --- a/docs/_pages/about.md +++ b/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 diff --git a/docs/_pages/documentation.md b/docs/_pages/documentation.md index d5c95244..d3fbdf43 100644 --- a/docs/_pages/documentation.md +++ b/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 ``` diff --git a/docs/_pages/follow_road.md b/docs/_pages/follow_road.md index 37d72213..bb5bc15a 100644 --- a/docs/_pages/follow_road.md +++ b/docs/_pages/follow_road.md @@ -1,5 +1,5 @@ --- -title: Getting Started +title: RoboticsAcademy with Visual Circuit layout: posts permalink: /follow_road/ diff --git a/docs/_pages/getting_started.md b/docs/_pages/getting_started.md new file mode 100644 index 00000000..78f11f9e --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/_pages/home.md b/docs/_pages/home.md index 9556512d..d60bd6ea 100644 --- a/docs/_pages/home.md +++ b/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) diff --git a/docs/_pages/references.md b/docs/_pages/references.md index 948f3a7a..57d221da 100644 --- a/docs/_pages/references.md +++ b/docs/_pages/references.md @@ -10,7 +10,7 @@ classes: wide --- - + ## NodeJS Front-End - The front-end was based on IceStudio, thanks to the [FPGAwars](http://fpgawars.github.io/) community. diff --git a/docs/assets/images/cover/skeleton_structure.png b/docs/assets/images/cover/skeleton_structure.png new file mode 100644 index 00000000..3c82516b Binary files /dev/null and b/docs/assets/images/cover/skeleton_structure.png differ diff --git a/docs/assets/images/getting_started/camera.png b/docs/assets/images/getting_started/camera.png new file mode 100644 index 00000000..62ddf6e5 Binary files /dev/null and b/docs/assets/images/getting_started/camera.png differ diff --git a/docs/assets/images/getting_started/colour_filter.png b/docs/assets/images/getting_started/colour_filter.png new file mode 100644 index 00000000..f9ccc93b Binary files /dev/null and b/docs/assets/images/getting_started/colour_filter.png differ diff --git a/docs/assets/images/getting_started/demo.png b/docs/assets/images/getting_started/demo.png new file mode 100644 index 00000000..021fdf68 Binary files /dev/null and b/docs/assets/images/getting_started/demo.png differ diff --git a/docs/assets/images/getting_started/download.png b/docs/assets/images/getting_started/download.png new file mode 100644 index 00000000..00022f2e Binary files /dev/null and b/docs/assets/images/getting_started/download.png differ diff --git a/docs/assets/images/getting_started/files.png b/docs/assets/images/getting_started/files.png new file mode 100644 index 00000000..6db67ea6 Binary files /dev/null and b/docs/assets/images/getting_started/files.png differ diff --git a/docs/assets/images/getting_started/screen.png b/docs/assets/images/getting_started/screen.png new file mode 100644 index 00000000..33aaa2de Binary files /dev/null and b/docs/assets/images/getting_started/screen.png differ diff --git a/docs/assets/images/getting_started/select_blocks.png b/docs/assets/images/getting_started/select_blocks.png new file mode 100644 index 00000000..4eb9137c Binary files /dev/null and b/docs/assets/images/getting_started/select_blocks.png differ diff --git a/docs/assets/images/getting_started/skeleton_structure.png b/docs/assets/images/getting_started/skeleton_structure.png new file mode 100644 index 00000000..1e7e9e28 Binary files /dev/null and b/docs/assets/images/getting_started/skeleton_structure.png differ