Omron WebMonitor Getting Started

Getting Started with

Omron WebMonitor

User Manual

84-9111024-02 Rev E

All rights reserved. The information contained herein is proprietary and is provided solely for the purpose of allowing customers to operate and/or service Omron Microscan-manufactured equipment and is not to be released, reproduced, or used for any other purpose without written permission of Omron Microscan.

Throughout this manual, trademarked names might be used. We state herein that we are using the names to the benefit of the trademark owner, with no intention of infringement.

Disclaimer

The information and specifications described in this manual are subject to change without notice.

Latest Manual Version

For the latest version of this manual, see the Download Center on our web site at:

www.microscan.com.

Technical Support

For technical support, e-mail: helpdesk@microscan.com.

Warranty

For current warranty information, see: www.microscan.com/warranty.

Omron Microscan Systems, Inc.

United States Corporate Headquarters

+1.425.226.5700 / 800.762.1149

United States Northeast Technology Center

+1.603.598.8400 / 800.468.9503

European Headquarters

+31.172.423360

Asia Pacific Headquarters

+65.6846.1214

PREFACE

CHAPTER 1

CHAPTER 2

Welcome v

Purpose of this Guide v

Omron WebMonitor Overview 1-1

Introduction 1-2 Requirements 1-2 Connecting 1-3 Application Overview 1-4 Application Bar 1-5 Pages, Panels, and Widgets 1-6 Data Event Identifiers 1-9 Live and Review Modes 1-10 Omron WebMonitor Web HMI Storage Limits 1-11

Layout Editing 2-1

Layout Edit Mode 2-2 Creating, Editing, and Removing Pages 2-3 Inserting and Configuring a Widget 2-4 The Widget Settings Panel 2-7

CHAPTER 3

Getting Started with Omron WebMonitor iii

Tags 3-1

Omron WebMonitor Tags 3-2

Contents

CHAPTER 4

CHAPTER 5

Widgets 4-1

Read Value Widget 4-2 Write Value Widget 4-7 Chart Widget 4-14 Log of Values Widget 4-16 Single Image Widget 4-18 Image Filmstrip Widget 4-22 Header Widget 4-26 Inspection Counters Widget 4-28 Device Control Widget 4-30

REST APIs 5-1

REST APIs 5-2 command 5-5 data 5-6 stats 5-7 record 5-9 filters 5-12 image 5-13 svg 5-14 file 5-15

CHAPTER 6

Installing and Updating Omron WebMonitor on a Smart Camera 6-1

Installing Omron WebMonitor on a Smart Camera 6-2 Updating Omron WebMonitor on a Smart Camera 6-6

APPENDIX A

Changing the Omron WebMonitor HTTP Port for PC-Based Systems A-1

Changing the Omron WebMonitor HTTP Port A-2

APPENDIX B

iv Getting Started with Omron WebMonitor

Omron WebMonitor Localization B-1

Omron WebMonitor Localization B-2

Preface

PREFACE Welcome

Purpose of This Guide

This guide describes how to use Omron Microscan’s Omron WebMonitor to visualize Omron Microscan Link values and images from compatible Omron Microscan smart cameras and vision systems. Omron WebMonitor runs on the web browser of your choice, including those found on tablets and smart phones.

Getting Started with Omron WebMonitor v

Preface

vi Getting Started with Omron WebMonitor

CHAPTER 1 Omron WebMonitor

Overview

This section provides a general description of the Omron WebMonitor interface.

Overview

Omron WebMonitor

Getting Started with Omron WebMonitor 1-1

Chapter 1 Omron WebMonitor Overview

Introduction

Omron WebMonitor allows you to visualize Omron Microscan Link values and images

from compatible Omron Microscan smart cameras and vision systems. Omron WebMonitor runs on the web browser of your choice, including those found on tablets and smart phones.

Requirements

Omron WebMonitor supports Windows 7 (32-bit and 64-bit) and Windows 10.

Omron WebMonitor requires an HTML5-compatible browser:

• Internet Explorer 11 or later

• G

oogle Chrome

• Firefox

• Mobile Safari (iPhone / iPad)

• Mobile Chrome on Android devices

The following browswers were explicitly tested for compatibility:

• Internet Explorer 11.0.2

• Google Chrome 33.0

• Firefox 28.0

Additional Notes:

• Safari for Windows is

• Internet Explorer 11 or later and Google Chrome 33 or later are recommended for extended Omron WebMonitor sessions.

1-2

not supported.

Getting Started with Omron WebMonitor

Connecting

If using a HAWK MV-4000, you can also type the name of the device, as in the example http://HAWK5E7420.

Click the Dashboard icon to launch the application.

Connecting

To launch Omron WebMonitor, use your favorite web browser and enter the address of your device in the browser’s address bar. For example, if you have a Omron Microscan smart camera on your network at address 10.20.1.123, you would enter:

Overview

Omron WebMonitor

Omron WebMonitor also works with

To connect to a software-based job running in FrontRunner or AutoVISION:

First, be sure the job is running, and then type the following into your browser’s address bar:

Note: You must specify port 8080 for a PC-based connection. If you are connecting to a PC-based system from a different machine on the network, use the IP address or name of the PC instead of the local host. For example, use http://10.20.1.234:8080 if the PC’s IP address is 10.20.1.234.

Once you press the Enter key, you should see the following home page:

Visionscape Software

and with

AutoVISION

’s Emulator.

Getting Started with Omron WebMonitor 1-3

Chapter 1 Omron WebMonitor Overview

Application Overview

The Omron WebMonitor Dashboard user interface is a single page web app-style application. Most web pages show information that can typically extend beyond the bottom of the browser window, requiring the user to scroll to see it. They typically contain links to other pages, which is how the user navigates around a web site.

In contrast, Omron WebMonitor behaves more like an application, expanding to fill the browser window, and automatically adapting to any changes in the dimensions of the window. Although Omron WebMonitor allows you to define and use multiple display pages, they are all contained within a single web page.

The browser stores a maximum of 50 images. The camera stores images, image thumbnails, and data records that can be requested via the web page or API. When memory is full, the camera will first delete full-size images, then thumbnails, and ultimately the data records on a first in-first out basis.

This is a typical view of a Omron WebMonitor page.

1-4

Getting Started with Omron WebMonitor

Application Bar

The Application Bar is located at the top of the Omron WebMonitor interface.

Overview

There are three components to the Appplication Bar:

• A set of page selection buttons. In the example above they appear as tabs, but the style can be customized if necessary.

• A logo. The position and contents of the logo can be customized.

• A toolbar. The toolbar provides access to various Omron WebMonitor settings and modes. The position and size of the toolbar can be customized.

Omron WebMonitor

Getting Started with Omron WebMonitor 1-5

Chapter 1 Omron WebMonitor Overview

Pages, Panels, and Widgets

The main area of Omron WebMonitor displays one of a number of pages. If there is more than one page defined, you can switch between them by using the page selection buttons on the application bar, or by using the arrow keys on your keyboard.

Each page is organized into a set of regions called panels. The following image shows an empty page to demonstrate the arrangement of the panels on a page.

Note the names, which start with .panel-. It is not necessary to know these names to use Omron customization. Customizing Omron WebMonitor requires the modification of CSS (Cascading Style Sheets). The names shown correspond to the CSS class selector for that panel.

The purpose of the panels is to act as containers for a number of widgets. Each widget has the ability to visualize and interact with one or more items of inspection data such as Omron Microscan Link values, inspection counters, timing information, or images.

1-6

WebMonitor; however they do have significance if there should be need for

Getting Started with Omron WebMonitor

Pages, Panels, and Widgets

Each panel has special layout and behavior properties that can be exploited to create a wide variety of different layouts. The following table summarizes the position and properties of each panel:

Overview

Omron WebMonitor

Getting Started with Omron WebMonitor 1-7

Chapter 1 Omron WebMonitor Overview

If a panel does not have content (i.e. no widgets are placed in it), it is hidden from view, with the other panels adjusted to occupy the available space. Examples of possible page layouts:

1-8

Getting Started with Omron WebMonitor

Data Event Identifiers

At the end of each inspection cycle, the relevant result data is collected into a record. This data is coherent, meaning that all the values are part of the same result, and therefore represent a snapshot of information as it was at that particular point in time. When Omron WebMonitor fetches this data, it associates each of the data records with a unique Data Event Identifier. This identifier is visible in various Omron WebMonitor widgets, and can help when making correlations between various pieces of data. It is also used internally, for example to highlight all items related to the same event when hovering over a displayed value or image.

Overview

Omron WebMonitor

Getting Started with Omron WebMonitor 1-9

Chapter 1 Omron WebMonitor Overview

Live and Review Modes

Omron WebMonitor has the following two fundamental modes of operation:

• Live Mode: In this mode, Omron WebMonitor is continuously fetching new data from the connected device. The amount and frequency of data received is balanced by bandwidth and performance constraints.

• Review Mode: In this mode, Omron WebMonitor is not receiving new data. Instead, you can view and analyze already captured historical data.

To switch between Live Mode and Review Mode, use the appropriate toolbar button in the Application Bar, or press CTRL-R on the keyboard.

When in review mode, clicking on one of the items in a historical widget (for example, a filmstrip, log, or chart) will automatically load all the other widgets with data with the same Data Event Identifier. Clicking on Filmstrip Entry will load the image into the image widget, and display the inspection counts, Omron Microscan Link values, and other elements as they were at that time. Likewise, you can click on a log entry with similar results.

1-10 Getting Started with Omron WebMonitor

Omron WebMonitor Web HMI Storage Limits

Up to the last 100 records are stored on the camera, including at least one failure record. If the last failure record is older than the most recent 100 records, that record plus the latest 99 passing records are stored for a total of 100 records.

Overview

Up to 100 of the latest SVG records are stored on the camera.

The number of images stored on the system is dependent on the camera configuration’s buffer count. At most this will be the buffer count as defined in the system’s Camera Definition and Buffer Counts setting. This count is reduced by buffers being processed or waiting for triggers in a pipeline mode. For example, a camera with 16 buffers in pipeline triggering mode with one image in process would have a maximum of 14 of the most recent image records saved for retrieval.

Note: Pipeline Mode is automatically enabled when the job is triggered so the acquisition of the next cycle can be overlapped with the processing of the current cycle.

Omron WebMonitor

Getting Started with Omron WebMonitor 1-11

Chapter 1 Omron WebMonitor Overview

1-12

Getting Started with Omron WebMonitor

CHAPTER 2 Layout Editing

This section describes how to optimize the layout of the Omron WebMonitor interface for your application.

Layout Editing

Getting Started with Omron WebMonitor 2-1

Chapter 2 Layout Editing

Layout Edit Mode

Layout Edit Mode can be toggled at any time by pressing this toolbar button:

or by pressing F10 on the keyboard. In Layout Edit Mode, all panels are visible even if they are empty of widgets:

Notice that the top, right, and bottom panels can now be seen even though they are empty of widgets.

When a change is made to the layout, the Save icon in the toolbar will be highlighted.

Before Change:

After Change:

Clicking the Save button will save the layout changes to the camera.

2-2

Getting Started with Omron WebMonitor

Creating, Editing, and Removing Pages

When in Layout Edit Mode, an extra button appears to the right of any existing page selector buttons. Pressing this button will create a new empty page.

To change the title of a page, double-click the title (or long-press on a touchscreen device). Type a new title and press Enter to accept or Esc to cancel.

To delete a page, click on the X that appears in the upper right corner of the page selector button. Note that this is only available when in Layout Edit Mode.

Layout Editing

Getting Started with Omron WebMonitor 2-3

Chapter 2 Layout Editing

Inserting and Configuring a Widget

When in Layout Edit Mode, note the + buttons in each panel. Pressing one of these buttons will bring up a menu of available widgets to insert.

Clicking Single Value, for example, will insert a widget that displays one Omron Microscan Link value. The settings panel for the newly inserted widget is shown automatically:

2-4

Getting Started with Omron WebMonitor

Inserting and Configuring a Widget

Buttons on the settings panel may vary from widget to widget. Clicking on the Omron Microscan Link icon:

will show a combo box selector allowing a choice of Omron Microscan Link tags to monitor in the widget.

Layout Editing

Getting Started with Omron WebMonitor 2-5

Chapter 2 Layout Editing

Selecting float1 in this example will “link” the widget to the Omron Microscan Link tag float1:

To change the title of the widget, double-click the header (or long-press on a touchscreen device).

Type a new title and press Enter to accept or Esc to cancel.

Note: Omron Microscan Link tags such as "int1" or "float1" must first be assigned in AutoVISION by linking a value in the job to the link tag of a compatible type.

2-6 Getting Started with Omron WebMonitor

The Widget Settings Panel

Notice the button in the upper right corner of the widget. This button appears on all widgets (but is nearly invisible unless you hover over the widget). Pressing the button will show the settings panel for that widget.

The buttons you will see on the settings panel include the following:

Layout Editing

Getting Started with Omron WebMonitor 2-7

Chapter 2 Layout Editing

2-8

Getting Started with Omron WebMonitor

CHAPTER 3 Tags

This section provides a list of tags and describes their functions.

Omron WebMonitor Tags

Omron WebMonitor widgets can be “linked” or associated with a number of data sources. These mostly correspond to Omron Microscan Link tags, but Omron WebMonitor offers additional items that are not strictly Omron Microscan Link tags. This document will refer to all of these items as tags. The tags available are:

3-2

Getting Started with Omron WebMonitor

MSLink Connects between Job and WebMonitor

Omron WebMonitor Tags