Adding an HTML resource file into my ignition perspective iFrame


I am fairly new to the web development area and just learning the basics of html and JavaScript programming. My application is trying to display an image and dynamically draw over it in real time by the operator clicking on the image. I have produced the html code which is below utilizing a createjs library. I deciding to go this route cause I could not find another way to draw over my image without a canvas like component from the vision module. I have ran my html code and it works great. I am having an issue adding my html file to my perspective project. I added a mounted folder to the folder location where the html file is stored and then I created a file source. Made the src for the iFrame point to the path "http://host:port/system/webdev/project/mountedFolderName/filename". This did not work and I get the resulting error from the console on the web page "Refused to display 'http://local:port/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. I attempted this again with a text resource instead of a file resource and ended up with the same result. I have a few questions. Am I thinking of this process correctly? Is this something I can do through Ignition?

below is my html code that is working. I removed the image path and folder name from the img src as I do not want to give out my personal computer information.

Any help is appreciated and needed.

<!DOCTYPE html>
    <script src = ""></script>
        var stage, canvas
        var drawingCanvas
        var img
        function init() {
            canvas = document.getElementById("myCanvas");
            stage = new createjs.Stage(canvas);
            stage.autoClear = false;
            img = new Image();
            //img.crossOrigin = "Anonymous";
            img.src = "imgFolderPath/imgFolderName";
            img.onload = handleImageLoad
            stage.on("mouseover", handleMouseOver);
            stage.on("click", handleMouseClick);
        function handleImageLoad() {
            var bmp = new createjs.Bitmap(img);
        function handleMouseClick(event) {
            var circle = new createjs.Shape();
            var cursorX = event.stageX;
            var cursorY = event.stageY;
  , cursorY, 80);            
        function handleMouseOver(event) {
            stage.cursor = "pointer";
<body onload = "init();">
    <canvas id = "myCanvas" width = "1080" height = "920">
        //alternate content

You're looking for this:

You can edit your posts. You don't have to create new ones.

Ok, thank you sorry I am new to using this forum. Appreciate the help.

You probably need to use a non fully qualified path, so that the user agent (web browser) knows that the request is being served by the same host/domain and you don't run into CORS issues.

Works for me if I use a text resource in Webdev:

Ok, I will try that out. When looking at the documentation on the webdev app it was saying to have the full qualified path for the src. So let me try that out and see if works on my end. Appreciate the support.

I spoke too soon. It seems to be creating the iFrame cause the window changes to the size of my canvas, but the image I try to load does not display and I can't interact with the mouse events. Does the image need to be local to the server?

If it's a web URL, it's going to depend on where it's hosted.
If it's a local file, it will never work in a browser if the "parent" page is hosted at a web URL. You'll have to host the file in some way.

Ah ok. I will need to do more research on that. Do you have any helpful links for hosting files? Is there a way for Ignition to store and host the files?

You already have WebDev - a file resource or mounted file would be the way to host files.

Oh ok, so I could just store my image files as a resource then. Is there a limit to how many resources can be stored this way? Cause I imagine for my application this could get to 1000s of images, would this slow down Ignition at all? If the images are all stored in folder then I imagine I could use the mounted folder option then and that would be easier that having n number of image files. Also how would I reference this file in my html code when I want to use it?

Another question. Does this mounted folder path need to be on the server device? Or can I reference a client device's folder location?

If you're using a mounted folder, then no, not really. Ignition doesn't know or care about anything within the folder until it's actually requested, then we go and find it.

It's from the server. This is fundamental behavior of web browsers - they don't let you access the local filesystem because webpages can't be trusted; imagine if an ad could read your documents folder. You'll have to upload the images from your local clients and place them into the mounted folder, if you want to go that route.

All right that makes sense. Well I definitely have some things to work on and test out. Thank you for the support.