# Ignition Perspective Ad Carousel

**URL:** <https://forum.inductiveautomation.com/t/ignition-perspective-ad-carousel/91475>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [June 6, 2024, 1:26pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-ad-carousel/91475 "2024-06-06T13:26:41Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jacob\_Leonard](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@Jacob\_Leonard](https://forum.inductiveautomation.com/u/Jacob_Leonard)\
**Post date:** [June 6, 2024, 1:26pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-ad-carousel/91475/1 "2024-06-06T13:26:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [June 6, 2024, 4:02pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-ad-carousel/91475/2 "2024-06-06T16:02:29Z")

</div>

> **[Web Dev | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/web-dev#mounted-folder)**
>
> The WebDev module enables you to directly program against the web server inside the Ignition Gateway. Webpages can be built by hand using a combination of Python programming and static web resources such as images, CSS files, JavaScript files, and...

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [June 6, 2024, 4:17pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-ad-carousel/91475/3 "2024-06-06T16:17:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [June 6, 2024, 4:19pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-ad-carousel/91475/4 "2024-06-06T16:19:59Z")

</div>

> [@YF129701](#):
>
> showing ads on an HMI is wild.

Not so educational either.

---

<div class="post-metadata">

**Author:** ![Jacob\_Leonard](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@Jacob\_Leonard](https://forum.inductiveautomation.com/u/Jacob_Leonard)\
**Post date:** [June 6, 2024, 6:09pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-ad-carousel/91475/5 "2024-06-06T18:09:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jacob\_Leonard](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@Jacob\_Leonard](https://forum.inductiveautomation.com/u/Jacob_Leonard)\
**Post date:** [June 11, 2024, 12:32pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-ad-carousel/91475/6 "2024-06-11T12:32:21Z")

</div>

```python
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](https://forum.inductiveautomation.com/t/display-local-image-file-in-perspective/24953/3) 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.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [June 11, 2024, 2:56pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-ad-carousel/91475/7 "2024-06-11T14:56:13Z")

</div>

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.**

---

<div class="post-metadata">

**Author:** ![Jacob\_Leonard](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@Jacob\_Leonard](https://forum.inductiveautomation.com/u/Jacob_Leonard)\
**Post date:** [June 17, 2024, 8:28pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-ad-carousel/91475/8 "2024-06-17T20:28:24Z")

</div>

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
