InduSoft Web Studio 7.1 is a software platform that allows you to create and deploy SCADA and HMI applications for various industries. It offers a rich set of features that make it easy and cost-effective to build intuitive, secure, and highly maintainable automation systems. Some of the features include:

• Portable: You can develop your application once and deploy it on almost any platform, such as Windows, Linux, Windows Embedded, or Windows CE.
• Mobile: You can access your application from any device that supports HTML5 web browsers, such as smartphones, tablets, or panel PCs.
• Interoperable: You can communicate with almost any device or data source using over 100 drivers and protocols (included), as well as OPC UA/DA connectivity.
• Comprehensive: You can create full-featured SCADA and HMI projects with everything included, such as alarms, trends, reports, recipes, security, scripting, database access, web publishing, and more.
• Flexible: You can design simple or complex architectures, from standalone HMI to large, redundant SCADA systems with multiple drivers, Andon dashboards, and remote interaction.

If you want to learn more about InduSoft Web Studio 7.1, you can download the evaluation software[^4^], watch the introduction webinar[^5^], or read some success stories[^4^].

Table of Contents

Step 1: Create a new project

To create a new project, open InduSoft Web Studio 7.1 and click on File > New Project. Enter a name for your project, such as “TimeAndDate”, and click OK. You will see the main window of the development environment, where you can design your screens, configure your tags, write your scripts, and more.

Step 2: Design the screen

To design the screen, click on the Screen tab at the bottom of the main window. You will see a blank screen with a grid and a toolbar on the left. The toolbar contains various tools and objects that you can use to create your screen. To add an object to the screen, simply drag and drop it from the toolbar to the desired position on the grid.

For this example, we will use the following objects:

• A Text object to display the current time. Drag and drop a Text object to the center of the screen and double-click on it to edit its properties. In the Text property, enter “#TIME#” (without quotes) to display the system time. You can also change other properties, such as font size, color, alignment, etc.
• A Text object to display the current date. Drag and drop another Text object below the time object and double-click on it to edit its properties. In the Text property, enter “#DATE#” (without quotes) to display the system date. You can also change other properties, such as font size, color, alignment, etc.
• A Button object to change the background color of the screen. Drag and drop a Button object to the bottom-right corner of the screen and double-click on it to edit its properties. In the Caption property, enter “Change Color” (without quotes) to display the text on the button. In the Action property, select “Script” from the drop-down menu and click on Edit Script to write a script that will execute when the button is clicked.

Step 3: Write the script

To write the script for the button action, you will use InduSoft Web Studio’s built-in scripting language, which is similar to Visual Basic. The script editor will open in a new window, where you can write your code.

For this example, we will use a simple script that generates a random number between 0 and 255 and assigns it to each of the red, green, and blue components of the background color of the screen. The script will look something like this:


Dim R,G,B As Integer 'Declare variables for red, green, and blue components
Randomize 'Initialize random number generator
R = Int(Rnd * 256) 'Generate random number between 0 and 255 for red component
G = Int(Rnd * 256) 'Generate random number between 0 and 255 for green component
B = Int(Rnd * 256) 'Generate random number between 0 and 255 for blue component
Screen.BackColor = RGB(R,G,B) 'Set background color of screen using RGB function


After writing your script, click on OK to save it and close the script editor.

Step 4: Test and run the application

To test and run your application on your Windows PC, click on Debug > Run from the main menu or press F5 on your keyboard. You will see your application running in full-screen mode. You can interact with your application using your mouse or keyboard. To exit your application, press Esc on your keyboard or click on Debug > Stop from the main menu.

To run your application on your smartphone or any other device that supports HTML5 web browsers, you need to enable web publishing for your project. To do this, click on Project > Settings from the main menu and select Web from the left panel. Check the Enable Web Publishing option and click OK. You also need to make sure that your PC and your device are connected to the same network.

To access your application from your device’s web browser, you need to enter the IP address of your PC followed by “/sma” (without quotes). For example, if your