Ignition Perspective Ad Carousel

Ignition
,
1

I have been asked by a client to provide a Ad section on a public facing, educational, HMI. This should be a scrolling panel that pull images (the ads) from a local folder on the gateway.

I have thought about it for a bit, and think that the Carousel is the best component for this. I just need to dynamically create the "views" data, and with a perspective view that is just a image with a parameter for the image path. The source folder could be in the project images folder for ease of use; A shortcut on the desktop of the gateway host machine will provide easy access for the client.

This behavior is probably best done by a script, what I don't know how to do via script are:

  1. Detect Change in the images in the folder
    1a. Read off the current name of the images in the folder
    1b. Store this in a retentive variable for comparison next cycle
  2. Regenerate the Carousel view data for dynamitic image loading
2
2 Likes
3

This isn't a solution to your problem, but phewy, showing ads on an HMI is wild.

5 Likes
4

Not so educational either.

3 Likes
5

I wasn't too happy with it ether, but I'll install ad blocker on something else to compensate for it.

6 
import os

def imagePath(imageNameList, folderPath):
	imageViewList = []
	for x in range(len(imageNameList)):
		imageViewList.append(
		{
			"viewPath": "AdView",
			"viewParams": {
				"imagePath": "/Ads/"
			},
			"direction": "row",
			"justify": "flex-start",
			"alignItems": "flex-start"
		})
		imageViewList[x]['viewParams']['imagePath'] = folderPath + imageNameList[x]
	return imageViewList
	

folderPath = "C:/Program Files/Inductive Automation/Ignition/webserver/webapps/main\Ads"
localFolderPath = "/Ads/"
imageNameList = os.listdir(folderPath)
data = imagePath(imageNameList,localFolderPath)
system.tag.writeBlocking(["[default]Ad Data"], [data])

This is the script I ended up using. I am storing the ads images in the Webserver Webapp folder, using this trick and I write the new Ad Data to a document tag called "Ad Data" and bind that value to the data component of the carousel.

The Webserver Webapp trick has interesting issues. I can drag in new ads just fine, but I can not delete them as the windows operating system marks them as in use by the java process. I get around this by a bat script starting and stopping the ignition process. The operators of this station will just need to stop the ignition process before they update the ads and restart it.

Start bat script:
net start "Ignition"

Stop bat script:
net stop "Ignition"

Because I am using a Carousel, I can change "lazyLoading" set to False. This seems to bypass this issue.

7

I've removed the Solution tag as we clearly document that we do not support that route. As was recommended earlier in this thread, utilization of the WebDev module is indeed the supported "solution" route. Alternatively, pointing your images to hosted images an something like an S3 bucket is preferable over the Webapp folder.

Important note: This approach is not officially supported. It works only because of how the internal server settings of the Gateway work. At any point in the future, this may cease working and would be considered neither breaking behavior nor a bug. Use this route at your own risk.

8

Because I am using a Carousel, I can change the "lazyLoad" from true to false. This seems to allow the operators to delete and add Ads without needing to turn off the Ignition Server