Robotics Computer Programming - PTZ Camera Control Course

If you have ever created a simple website, then you have already used the HTML programming language. HTML is relatively easy to use, and it is one of the most popular programming languages in the world.

To get started with HTML, you only need basic knowledge of computer programming and how to navigate a web browser. The working environment for HTML is essentially a text editor used for coding and a web browser used to view your work. To get started, install a text editor of your choice that will be used to write your HTML code. Next, install a modern web browser that will be used to view your finished work. (Skip this step if you already have Google Chrome installed).

In this chapter, we are going to learn the following:

• HTML programming language

• Features of HTML

• Uses and Benefits of HTML

• Basic Structure

HTML programming language

HTML stands for Hyper Text Markup Language. HTML is the basic code structure that makes up the foundations of a webpage. With HTML, you can structure your document into logical sections such as a header, body, and footer which is used to contain the content of a webpage.

HTML elements form the basic structure of HTML pages, and tags can represent the elements. The tags are labeled with contents like “heading,” “paragraph,” and “tables” etc. When programming with HTML, the tags are not displayed on the web page, but the contents in each element can be viewed differently according to the attributes assigned to each tag. At the point when a web browser opens an HTML doc, the program will search for HTML codes in the content and use them to change the format, embed pictures, or make connections to different pages. A web programming language called CSS (Cascading Style Sheets) can be used to give HTML tags and classes unique properties, and it is often used in conjunction with HTML.

Features of HTML

HTML is primarily used to develop webpages, where you can insert images, tables, text, forms and other pieces of information into an integrated page. In this course, we will use basic HTML to build the “front end” of our robotic control applications.

HTML often features additional programming languages inside of the code including Cascading Style Sheet (CSS), JavaScript (JS) and Personal Home Page (PHP). HTML is a simple language that has limits to its functionality for website development. CSS is often used to style the appearance of HTML elements and improve the user experience on websites. CSS allows programmers the ability to modify colors, fonts, and interactive user elements of the web browsing experience. JavaScript is a prevalent programming language used in web-development to enhance the functionality of a basic HTML document. Javascript can be inserted directly into most HTML documents to provide more advanced mathematics and programming functionality. Inside our example code, you will find two opening and closing tags called “<script>” where javascript is inserted inside our HTML code. In this way, we are using HTML to build out the basic layout of our applications buttons, and we are using JavaScript define what each button will do. JavaScript and CSS codes can also be linked to inside an HTML document to import code for use inside your web page.

PHP is another programming language that opens up many features for websites with more rich development options. PHP can be used to allow users to store and retrieve information from online databases. Using PHP, website developers can provide customized experiences for users. HTML is a great first programming language for those who are just starting to learn about web development. Unlike C and C++ which we will cover in later chapters, you can only check for errors in HTML with your naked eyes. If there is a major error in your HTML code, you will be able to see it directly in your web browser. When you start to use more complicated programming languages like C and C++ you can use a compiler to check your work.

HTML document structure

HTML document structure usually contains a header, a title, and a body with open and closed tags. It’s important to note that all HTML document should begin with the statement: <!DOCTYPE html>. The HTML code begins with <html> and ends with </html>. Notice the / at the HTML end tag which notates the “closing” tag. Every HTML tag that you create should eventually have a closing tag. They will contain everything inside these two pairs of tags.

The main portion of HTML codes displayed on the web are between the <body> and </body>. These basic HTML codes can be enhanced with attributes, elements, and formatting. Once you are done writing your code, you can save your file with the a name such as “hello.html”. Once your text document has the “.html” ending it can be opened up by any web-browser.

Here is a simple HTML example;

Appearance on a Text-editor

<!DOCTYPE html>
<html>
<body>

<h1>Introductory Class to HTML</h1>
<p>My first paragraph.</p>

</body>
</html>

Summary

Over the years, HTML has become a significant programming language for website development. It serves as an excellent foundation for web development and remains the building structure for modern web pages. For our example, HTML provides the basic building blocks for web page structure, but by itself, it cannot control a robotic camera. For this, we will use JavaScript, and Node.js explained in the next chapter.

INTRODUCTION TO JAVASCRIPT AND NODE.JS

Basic overview of JavaScript

JavaScript is a programming language that is often incorporated into HTML used for more interactive advanced elements in web-pages. The majority of web-pages today use JavaScript in some way to enhance the user experience and functionality of their website. JavaScript was initially used as a “client-side” language used to perform tasks in web-browsers only. But today, JavaScript is now used also as a “server-side” language providing access to databases and web-servers from inside a web-browser. Over the years, JavaScript has become THE language of the internet as it allows users to share code between a web-browser and a server (Lingua Franca).

Basic overview of JavaScript and Node.js

Node.js, in a nutshell, is a (JRE) Javascript Runtime Environment. Meaning it contains the necessary code to execute javascript programs outside of an internet browser application. Ryan Dahl wrote Node.js in 2009. Node.js is used as a “server-side” application and will allow us to connect directly to our robotic cameras on a LAN (Local Area Network) using the cameras IP address.

Node.js is designed to be event-based and easily handle asynchronous behavior. It can be used as a command line tool, and it is suitable for agile development and ideal for robotic camera controls issued over IP. JavaScript and Node.js can handle thousands of concurrent connections with minimal overhead on a single process.

All together now: HTML, CSS and JavaScript

In our very first code example, you will see HTML, CSS, and JavaScript all used in a single application. HTML is used to layout the content of the webpage. You will see that we are using CSS to style the HTML using a popular bootstrap stylesheet. Here is an example of how to link to a CSS Style Sheet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

By linking our HTML to a CSS stylesheet, we can define classes in our HTML to improve the user experience. Using a prebuilt bootstrap CSS sheet like this is a prevalent way to save time in development. Once we have linked to this style sheet, we can use the CSS inside our HTML document. For example, we can use the CSS Class “container” which is defined in our style sheet like this, <div class = "container">, to affect all of the content inside this specific HTML element. This example container is used to make sure all of our content inside this div will size appropriately depending on the devices screen size viewing our document. You can see precisely how the CSS class is affecting your HTML by reading the CSS style sheet and searching for the chosen class.

Finally, JavaScript and Node.js will be used to program the behavior of our web pages. In our example code, we will create an HTML form which will allow our users to input data into our JavaScript program. For example, inside our HTML form.

<input placeholder="Camera Ip address" class = "form-control" name = "cam_ip">

we are allowing the web-browser to define the JavaScript variable “cam_ip” which will be used inside a portion of our JavaScript commands.

JavaScript Document Structure

Here is a simple JavaScript code example. You can test this sample code out by using a text editor and saving the file as “test.html.” Then you can open the file with any web-browser, and the simple program should work!

Appearance on a Text-editor

On a Web Browser

<!DOCTYPE html>

<html>

<body>

<h2>Let’s try to hide some text with javascript...</h2>

<p id="hide">JavaScript can be used to hide HTML elements.</p>

<button type="button" onclick="document.getElementById('hide').style.display='none'">Try me out!</button>

</body>

</html>

Summary

Javascript does not have a standard library which can affect code quality. Node.js’s async nature can make applications more complicated than other languages. But, JavaScript and Node.js have become some of the most popular web-based programming languages for a reason. They are incredibly efficient, and they can work with or without a server. Now that we have reviewed JavaScript and Node.js, it is now time to dig into our first example code below.

Basic Overview of GitHub

Before you start programming your first robotic camera, you should get familiar with a website called GitHub. GitHub is a distributed web-based application for collaborative computer source code development using version control. Git was invented by Linus Torvalds the creator of Linux.

GitHub has many features ideal for computer programmers including version control which enables sequential and chronological logging of changes made to source code. In this way, Github allows users to “fork” out their own versions of sample code into something new and allow others to track the development. GitHub achieves version control through the use of a system known as Git. Git is a command line version control system that tracks changes made to the source code in the course of software development.

In this introductory class, we will learn about the following;

• Special features of GitHub

• Benefit to Developers

• How to access GitHub

Special Features of GitHub

• GitHub enhances the Git feature which by default is a command line version control, system. GitHub does this by including an interactive user interface to improve the user experience.

• GitHub has a unique Git URL shortener that enables users to shorten the length of a URL (i.e., web address)

• GitHub provides an enhanced desktop version application that can be seamlessly installed on OS X and Windows operating systems.

• GitHub has special keyboard shortcuts which integrate seamlessly with any system. These shortcuts are very helpful in aiding users to achieve a particular objective quickly. E.g., using the T key to activate file finder and using the arrow keys to navigate appropriately

• GitHub has a unique feature that enables 3D multimedia rendering. It also supports CSV. Including a.CSV file. Github renders the file into an interactive tabular data format. Though some may consider this a bit trivial, GitHub has its own set of emojis which the user can use to depict expressions and feelings.

Benefit of GitHub To Developers

• GitHub enables ease of tracking documentation. The help section of GitHub provides help for almost any topic related to coding and programming.

• GitHub makes it easier for developers to showcase their project to a broader reach of people, this attracting recruiter.

• GitHub as of 2018 was ranked the single largest repository of source code anywhere in the world. It provides exposure to its users likewise enabling them to share open source projects.

• GitHub has a unique integrated development environment. This enables users to code directly on the platform without the need for language-specific IDE

• GitHub provides special integration options to users. E.g. integration with platforms like Google and Amazon cloud services.

HOW TO ACCESS GITHUB

• Install Git on the host computer and process to create GitHub account on www.github.com/join

• Fill in the forms required, and you are good to go.

• Create a logical Git repository on your host computer. This repository is where all your GitHub project will be domiciled

• Now you can process with adding a new file to the newly created repository. The addition can be done using any text editor of choice.

• Create a commit: run the command Git -m "your message about the commit" on your local machine

• Create a new repository on GitHub. This enables collaborative teamwork with fellow developers on the platform

• Now you can do soothing known as" pushing a branch." To the new GitHub repository; this enables other users to keep track of any change made to your GitHub project.

• Create a PU request: this is a way to notify repository owners that you want to make those changes to the code. It enables them to review the code before allowing your update.

• Merge the PR. This is a green button on the GitHub dashboard. It merges all changes directly to a designated master document.

• Finally, get changes made on GitHub back to the local host computer.

Now that you have a basic understanding of how to use GitHub, let’s retrieve our first set of sample codes and start programming. All of the example codes for this course will be made available at https://github.com/ptzoptics.

Sample HTML and JavaScript Code #1:

Sample codes are maintained, updated and well documented here - https://github.com/PTZOptics/Robotics-Research-Learning-Support-Program

Node.js, in a nutshell, is a (JRE) Javascript Runtime Environment. Meaning it contains the necessary code to execute javascript programs outside of an internet browser application. Ryan Dahl wrote Node.js in 2009. Node.js is used as a “server-side” application and will allow us to connect directly to our robotic cameras on a LAN (Local Area Network) using the cameras IP address.

Node.js is designed to be event-based and easily handle asynchronous behavior. It can be used as a command line tool, and it is suitable for agile development and ideal for robotic camera controls issued over IP. JavaScript and Node.js can handle thousands of concurrent connections with minimal overhead on a single process.

ReadMe File Contents: Camera Control Basics NodeJS

======================

### Prerequisites

- [Node.js LTS versions: 10+](https://nodejs.org/en/download/)

- [PTZOptics camera](https://ptzoptics.com/)

### Installing

1. Configure your **PTZOptics camera** to your local network. [PTZOptics Knowledge Base](https://help.ptzoptics.com/support/solutions/folders/13000001062)

2. Clone this repo and then extract to your preferred location

3. Open the **command prompt** and enter the commands in steps 4 - 7

4. Change directories to where you cloned the repository

```

cd /The/path/to/the/repo

```

5. Install npm packages

```

npm install

```

7. Start the application

```

npm start

```

8. The server will output the following. PTZOptics Camera Control Sample HTTP Service is running on port 8081

9. Open your browser and enter the url from the previous step

### Deployment

This app is not meant for production

## Authors

- [**PTZOptics**](https://ptzoptics.com/)

## License

This project is licensed under the MIT License - see the [LICENSE.txt](LICENSE.txt) file for details

INTRODUCTION TO THE PYTHON PROGRAMMING LANGUAGE

Basic Overview

Python has proven to be a compelling and yet user-friendly programing language over the years. In a world where new programming languages come and go each year, Python has existed for over two decades. Python was made public by a developer named Guido Van Rossum in 1989. Rossum first started working with the language in the late 1980s. Rossum named Python after a snake in his favorite TV series show; the Monty Python’s Flying Circus. Python is a reasonably easy to use programming language, so it is suggested for beginners.

In this class, we are going to learn the following:

• Python Programming Language

• Outstanding Features of Python

• Uses and Benefits of Python

• Basic Structure of the code

• Compilation

Python Programming Language

Python has a syntax that is easy to read with relatively short lines of codes. It is enjoyable to work with because it allows the developer to focus on the problem, rather than the syntax. The Python programming application can be installed in different operating systems such as Windows, Mac, Linux, Raspberry Pi, etc.

To get started you should visit the Python organization website link here: https://www.python.org/downloads/. On this page, you will see options to download different versions of the Python compiler for your computer's operating system.

Python can be used to create web applications, software development, mathematics, and system scripting. It can also be used with other software to develop advanced programming workflows. Python can handle big data and perform complex mathematics.

Outstanding Features of Python

Python has stood the test of time, and this has been possible due to the features that make it stand out from other programming languages like HTML, C, and C++.

When compared to JavaScript, Python uses new lines of codes to complete a programming command, while the later uses semicolons and parentheses. JavaScript relies on curly brackets to the scope of a loop or functions while Python uses indentations-white spaces to define a scope and enforce a function. The readability of Python is similar to the English language with underlying mathematics in its development.

The basic structure of the code

Python has one of the most straightforward code structures that runs in short and direct lines of code. When the first script is launched, it is interpreted, compiled and executed.

The first line of code contains a “#,” and it represents a comment. A comment describes the purpose of the codes. The second and third line (num1, num2..num-N) is similarly used to encode a value in a variable. The fourth line sums up all the N-variables stored in the previous line. The print line, Print(sum) presents the output of a screen.

Python code is compiled every time it is imported in a new process to create a .pyc while it is interpreted when directly executed. For instance, a python code (example - file.py) when imported, makes a document (somefile.pyc) in a similar index. Let’s say the import is done in a python shell or Django module. After the import, you can change the code a bit and execute the imported functions again to find that it continues to run the old code.

Sample Python Code:

Sample codes are maintained, updated and well documented here - https://github.com/PTZOptics/Robotics-Research-Learning-Support-Program

Sample Python Code:

Sample codes are maintained, updated and well documented here - https://github.com/PTZOptics/Robotics-Research-Learning-Support-Program

ReadMe Contents: Camera Control Basics Python

======================

### Prerequisites

- [Python3+](https://www.python.org/downloads/)

- [PTZOptics camera](https://ptzoptics.com/)

### Installing

1. Configure your **PTZOptics camera** to your local network. [PTZOptics Knowledge Base](https://help.ptzoptics.com/support/solutions/folders/13000001062)

2. Clone this repo and then extract to your preferred location

3. Open the **command prompt** and enter the commands in steps 4 - 7

4. Change directories to where you cloned the repository

```

cd /The/path/to/the/repo

```

5. Install python dependencies using pip

```

pip install -r requirements.txt

```

6. Set Flask environment to **development**

```

set FLASK_ENV=development

```

7. Start the application

```

python main.py

```

8. The server will output the following

```

* Serving Flask app "main" (lazy loading)

* Environment: development

* Debug mode: on

* Restarting with stat

* Debugger is active!

* Debugger PIN: xxx-xxx-xxx

* Running on http://localhost:5000/ (Press CTRL+C to quit)

```

9. Open your browser and enter the url from the previous step

### Deployment

This app is not meant for production

## Authors

- [**PTZOptics**](https://ptzoptics.com/)

## License

This project is licensed under the MIT License - see the [LICENSE.txt](LICENSE.txt) file for details.