Hi,
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>
<html>
<head>
<script src = "https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script>
var stage, canvas
var drawingCanvas
var img
function init() {
canvas = document.getElementById("myCanvas");
stage = new createjs.Stage(canvas);
stage.enableMouseOver();
stage.autoClear = false;
stage.enableDOMEvents(true);
img = new Image();
//img.crossOrigin = "Anonymous";
img.src = "imgFolderPath/imgFolderName";
img.onload = handleImageLoad
stage.on("mouseover", handleMouseOver);
stage.on("click", handleMouseClick);
stage.update();
}
function handleImageLoad() {
var bmp = new createjs.Bitmap(img);
stage.addChild(bmp);
stage.update();
}
function handleMouseClick(event) {
stage.removeChildAt(1);
stage.update();
var circle = new createjs.Shape();
var cursorX = event.stageX;
var cursorY = event.stageY;
circle.graphics.beginStroke('#00ff00');
circle.graphics.setStrokeStyle(10);
circle.graphics.drawCircle(cursorX, cursorY, 80);
stage.addChild(circle);
stage.update();
//console.log(cursorX);
//console.log(cursorY);
}
function handleMouseOver(event) {
stage.cursor = "pointer";
//console.log('move');
}
</script>
</head>
<body onload = "init();">
<canvas id = "myCanvas" width = "1080" height = "920">
//alternate content
</canvas>
</body>
</html>
