GUI

Evan Boldt's picture

Using Node.js as a web server

Introduction

Node.js is JavaScript that can be run outside of a browser. It is often used to make a fast server for dynamic content.

Probably one of the biggest advantages to Node.js, aside from being one of the fastest and easiest to learn server environments, is that JavaScript is the lanugage used on browsers, allowing you to program both the server and client in the same language. 

Example

First, download and install node.js

Then, start the example by usign the command:

Evan Boldt's picture

Tkinter with Serial

Introduction

A short Python script to display text from serial (for example, an Arduino) to a TkInter window widget while overcoming the issue of pySerials default blocking behaviorTo use Python as a graphical interface for an Arduino powered robot, programmatically read the USB with the pySerial library. However, waiting for input from pySerial's Serial object is blocking, which means that it will prevent your GUI from being responsive. The process cannot update buttons or react to input because it is busy waiting for the serial to say something.

The first key is to use the root.after(milliseconds) method to run a non-blocking version of read in the tkinter main loop. Keep in mind that when TkInter gets to the root.mainloop() method, it is running its own while loop. It needs the things in there to run every now and then in order to make the interface respond to interactions. If you are running your own infinite loop anywhere in the code, the GUI will freeze up. Alternatively, you could write your own infinite loop, and call root.update() yourself occasionally. Both methods achieve basically the same goal of updating the GUI.

However, the real issue is making sure that reading from serial is non-blocking. Normally, the Serial.read() and Serial.readline() will hold up the whole program until it has enough information to give. For example, a Serial.readline() won't print anything until there is a whole line to return, which in some cases might be never! Even using the after() and update() methods will still not allow the UI to be updated in this case, since the function never ends. This problem can be avoided with the timeout=0 option when enitializing the Serial object, which will cause it to return nothing unless something is already waiting in the Serial object's buffer.

Evan Boldt's picture

CSS Introduction

Introduction

htmlTagName, #idname, .classname {
stylename: stylevalue;
color: black;
font-size: 12px;
background-color: #ddd;
}

CSS stands for Cascading Style Sheet. In HTML, you use it to apply a certain look to specific elements in the page. CSS makes it easy to give every page on your website a unified appearance. The format is extremely straightforward, but to be effective you need to know how to specify which element you want styled, find current styling information in a webpage, and you must be aware of all of the styles that can be applied to an element. The general form of a style in a CSS file is like the example shown to the right.

Evan Boldt's picture

3D SVG Graph

An SVG is a type of graphic that is defined by shapes and math instead of discrete pixels. So, it is scales nicely, but can't make photo-realistic images. An (currently) SVG is two dimensional. That does not mean, though, that we cannot represent 3D information in this 2D space. After all, it is shown in 2D anyway. To accomplish this, we will build our own 3D rotation matrices, and a 3D to 2D projection matrix. The 3D points can be multiplied by both of these matrices to make it appear 3D, albeit somewhat flat due to the orthographic projection.

Evan Boldt's picture

HTML Introduction

Introduction

HTML is the language that your browser reads when it shows you a webpage. It is a variant of XML.  It makes the actual content that you see, but also can contain visual styling information (typically in the form of an external CSS file) and also can have an in-browser (client-side) programming language called JavaScript.

Bare Minimum Example

<!DOCTYPE html>
<html>   <head>   <title>Minimal</title>   </head>
<body>
    <p>Hello World!</p>
  </body>
</html>

Tag Structure

Tags are put on either end of something to describe the content between the tags. Since HTML is visual, think of a tag as a box drawn around whatever is inside of it. The outermost tags are <HTML>, <HEAD>, and <BODY>. The <HTML> tag simply says that the contents are HTML. It is the very outermost box on the screen. The <HEAD> tag is invisible. It summarizes the contents (like title and keywords) and also lists files the page needs like stylesheets and scripts - both of which can alternatively be embedded into the actual HTML file if desired instead of being a seperate file. The <BODY> tag is where the actual content that you see on in the browser window goes. It can contain images, text, and other containers.

Evan Boldt's picture

Python Web UI with Tornado

Introduction

So, you want a GUI for your robot. Sure, you could make a nice GUI in Python with Tkinter, but there are some really good reasons to try it as a website instead:

  • A web GUI can be accessed from almost any location
  • A well-designed web GUI can be used on almost any device like a tablet or a phone
  • HTML, CSS, and Javascript are well documented, powerful, and very flexible
  • HTML can be easily made to look very nice

There are some drawbacks to implementing your GUI as a website though:

  • It is only able to start communication one-way (browser to server, server responds)
    • Great for buttons and other input
    • Requres continuous polling or a commet to get data to be pushed to the browser
  • It adds another "layer" of complexity to your code
    • Several different languages (C++ on Arduino, Python Server, and HTML+CSS+Javascript in browser)
    • The server has to relay information from the browser to the robot

Jenn Case's picture

Making the GUI Attractive

Introduction

It is one thing to make a GUI and another to make a GUI that people will want to use. Despite the fact that the appearance of a GUI does not really affect how the program runs, it is always prudent to set up GUIs in a way that they could be presented professionally.

Although, this is really only important if the GUI runs properly. Making it function accordingly is always more important than its appearance.

Note: This will focus on improving the GUI example from the previous tutorial.

Topics: 
Jenn Case's picture

Basics of a Tkinter GUI

Introduction

It is often necessary to being to communicate with a robot while it is in use. This can be done simply through a remote control or more complexly through a GUI. The GUI can allow the robot to both send an receive information while a remote control will only be able to send to the robot. A simple way to make a GUI is through Python Tkinter. Using Tkinter along with Serial, the code will allow easy communication between the robot.

This tutorial will show how to use various parts of Tkinter and show how to make a GUI look good.

Subscribe to RSS - GUI