Dear Community User! We have started the migration process.
This community is now in READ ONLY mode.
Read more: Important information on the platform change.

WebIQRESTAPI.jpg

Load assets into WebIQ using REST API

Sgilk
Frequent Contributor
Introduction

In this example, image and video resources are displayed in a WebIQ application, after download over REST API. This method can be used to update content on an HMI display without modifying the application code. A majority of the example is explained in the video below.

Prerequisites

REST API calls, HTTP server routing, and packaging of WebIQ assets are covered only at a high level. A deeper understanding of these topics may be required to modify this example.

Useful Links

Packaging Custom Libraries for WebIQ

Axios Documentation

Flask Documentation

Video Walk Through

Instructions
Step 1: Install WebIQ Packages and Widgets

Place the Axios library package and custom widget packages in the following location. %appdata%\webiq-designer\packages

At this point, the packages should be recognized when proceeding with step 2.

Step 2: Install WebIQ App

Install the WebIQ application attached at the bottom of this article through the WebIQ Designer.

Sgilk_0-1668539579549.png

Step 3: Run Python HTTP Server

The HTTP server code is attached at the bottom of this article. This can be run in a variety of ways, including as a system service on Linux machines or from VS Code as shown below. Update line 40 with the IP address of the machine running the server. At this point, resources can be placed in the /Resources folder to be served to the WebIQ application.

Sgilk_2-1668540169521.png

At this point, the WebIQ application should be capable of loading assets from the Python server.

Download Source Code
Sgilk
Sgilk
Hello, my name is Sam and I am a Software Applications Engineer supporting ctrlX Automation. Feel free to reach out if you have any questions!
Must Read
Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist