Coding Bytes

TwinCAT HMI

Coding Bytes is a channel which allows the team members at Beckhoff Australia to share helpful videos. These videos are primarily based on our replies to support questions. 

This is not official Beckhoff information, training or code and must not be treated as such

Flashing Elements With CSS Animation
Flashing Elements With CSS Animation

Todays video we explore what is possible with CSS Animate. We show that using Classes is a good thing and we make our LED flash!

Adding Status LEDs

This is a short video showing the use of a state image for adding leds to your project.

Saving files using the file system API
Saving files using the file system API

This is the 3rd part of a series where we look in to the saving of a JSON file. In this video we explore the file system api in Chrome to provide us with a usable 'Save As'.

Learning Tc/BSD TF2000 Install
Learn Tc/BSD by installing TF2000

In this video I take you through the common steps of installing a package, show you how to edit your rc.conf file, show you the current problem with the beta and provide other hints and tips along the way.

TwinCAT Vision in your HMI
TwinCAT Vision - Using TwinCAT Vision images in your HMI

We show how easy it is to add live images from TwinCAT Vision in to TwinCAT HMI using the Nuget package.

Historize Dynamically
Dynamic Historize symbols including add, remove, update

In this video we explore how to dynamically setup historizing. This also shows techniques needed to clear historized data and change Trendline settings.

Adding Bootstrap Navbar
Using a Bootstrap Navbar in your HMI

This is a basic example showing how easily 3rd party controls can be added to your HMI.

API Discovery using Chrome
Using the browser to help with API discovery

TcHmi Framework can take a little getting used to. In this video I show you how I navigate the API using the developer tools in Chrome.

Trendlines inside UserControls
Using Trendline Charts inside User Controls

We explore a technique of adding the trend line component in to our own user control.

PLC Array to client side json
Saving values from the PLC array to Json (Client side)

Following on from our loading video, we continue with the reverse procedure. Saving!

Client side JSON file to PLC array
Loading values from Json to a PLC array & structure

Sometimes we need to proved a way for the end user to upload settings. In this video we show a method of updating a PLC array of structures with a JSON file.

Using images from a camera
Using image files from a camera - How to update the display to show new images

This is not a tutorial on TwinCAT Vision. This demo shows you how to update images which are constantly changing from something such as an external camera.

Fuel Tanks using shapes and SVG
Fuel Tanks - How to display levels with moving shapes or SVG

Trying some advance techniques of manipulating images based on variables.

Changing text based on state
Changing the text of a button based on it's state

Exploring a few techniques to make dynamic content based on the state of a variable.

TwinCAT HMI Hello World
Full Hello World to get you up and running with TwinCAT HMI

A quick run through of TwinCAT HMI with a few easy pointers to get started.

Now Available!