Jump to content

Multiple Camera Web Interface Using WebHMI 1.0.0

   (0 reviews)

2 Screenshots

About This File

Cognex produces a range of Vision Sensors, Vision Systems, 2D Profilers, 3D Profilers, and Deep Learning cameras.  Historically one of the best tools for displaying multiple Vision Systems at the same time was the VisionView system.  This could be a hardware VisionView like the older VisionView 700 or the newer VisionView 900.  Or it could be VisionView CE on a Windows CE panel, or VisionView software running on a PC.

The VisionView package is a great solution as it provides the ability to see multiple cameras at the same time and allows you to monitor up to 9 In-Sight cameras, or Dataman barcode scanners, or even older DVT cameras.

However, newer cameras like the profilers and Deep Learning systems do not use the same interface for generating graphics and showing images, but instead uses a Web interface using HTML5.  Starting with In-Sight 5.6.0 and later you also have WebHMI functionality available for the In-Sight cameras. 

For all of these web interfaces, you typically just use a standard web browser that's capable of HTML5 and put the IP address in the address bar and the port number.  Something like where is the IP address of the camera and 5555 is the port number as specified in the camera's setup.

However, that only let's you monitor one camera at a time.  With the attached file you can monitor up to 4 cameras at a time, and with modification you could do more or less.

In the file you will see that we use iframes to hold the individual cameras.  Near the bottom of the HTML is where you edit the IP addresses and ports, do not change the iframe id here, only IP Address and port (in bold).

<div class="mainContainer">
    <div id="cameraGrid" class="iframe-grid">
        <div class="iframe-container">
            <div><iframe id="Camera01" src=""></iframe></div>
        <div class="iframe-container">
            <div><iframe id="Camera02" src=""></iframe></div>
        <div class="iframe-container">
            <div><iframe id="Camera03" src=""></iframe></div>
        <div class="iframe-container">
            <div><iframe id="Camera04" src=""></iframe></div>


There's also a Menu on the side of this web page for switching between views so you can look at one camera at a time.  And you can edit it to name your cameras.

<div id="leftMenu" class="menuLinks" onmouseover="openMenu()" onmouseleave="closeMenu()">
    <a onclick="minCameras()">&#9974; <span style="font-size: 30px">Grid View</span></a></br>
    <a onclick="maxCamera01()">&#9843; <span style="font-size: 30px">Camera 1</span></a></br>
    <a onclick="maxCamera02()">&#9844; <span style="font-size: 30px">Camera 2</span></a></br>
    <a onclick="maxCamera03()">&#9845; <span style="font-size: 30px">Camera 3</span></a></br>
    <a onclick="maxCamera04()">&#9846; <span style="font-size: 30px">Camera 4</span></a></br>
    <!--<span id="settingsMenu" class="menuSettings"><a onclick="openForm()">&#9881; <span style="font-size: 30px">Settings</a></span>-->

This is just an example, provided without further support.

I hope it helps.


User Feedback

You may only provide a review once you have downloaded the file.

There are no reviews to display.

  • Create New...