name Property (original) (raw)
export class AutomationHelper {
private automation: lt.Annotations.Automation.AnnAutomation = null;
constructor() {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null);
}
public run(callback?: (automation: lt.Annotations.Automation.AnnAutomation) => void): void {
// Create the viewer
const imageViewerDiv = document.getElementById("imageViewerDiv");
const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
const viewer: lt.Controls.ImageViewer = new lt.Controls.ImageViewer(createOptions);
viewer.autoCreateCanvas = true;
// PanZoom interactive mode
const panZoom: lt.Controls.ImageViewerPanZoomInteractiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode();
// Create an instance of the Automation control object that works with LEADTOOLS ImageViewer
const imageViewerAutomationControl: lt.Demos.Annotations.ImageViewerAutomationControl = new lt.Demos.Annotations.ImageViewerAutomationControl();
// Attach our image viewer
imageViewerAutomationControl.imageViewer = viewer;
// Set the image viewer interactive mode
const automationInteractiveMode: lt.Demos.Annotations.AutomationInteractiveMode = new lt.Demos.Annotations.AutomationInteractiveMode();
automationInteractiveMode.automationControl = imageViewerAutomationControl;
// Set the image URL
viewer.imageUrl = "http://demo.leadtools.com/images/png/pngimage.png";
// Create and set up the automation manager using the HTML5 rendering engine
const renderingEngine: lt.Annotations.Rendering.AnnHtml5RenderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
const manager: lt.Annotations.Automation.AnnAutomationManager = lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
// Create only the line and rectangle automation objects
this.createMyAutomationObjects(manager);
// You can instruct the manager to create the default (all) automation objects.
// comment out the call to CreateMyAutomationObjects and call this instead:
//manager.createDefaultObjects();
// Add the objects to the objects select element
const currentObjectIdSelect = document.getElementById("currentObjectIdSelect") as HTMLSelectElement;
// Add the PanZoom option
currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option("Pan/Zoom", lt.Annotations.Engine.AnnObject.none.toString());
const automationObjCount: number = manager.objects.count;
for (let i = 0; i < automationObjCount; i++) {
// Get the object
const automationObj: lt.Annotations.Automation.AnnAutomationObject = manager.objects.item(i);
// Add its name to the select element
const name: string = automationObj.name;
const id: number = automationObj.id;
currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id.toString());
}
// Hook to its change event
currentObjectIdSelect.addEventListener("change", () => {
// Get the object ID
const id: number = parseInt(currentObjectIdSelect.options[currentObjectIdSelect.selectedIndex].value);
// Set it as the current object in the manager
manager.currentObjectId = id;
// If this is the "Pan/Zoom" option, then back to pan zoom, otherwise, set our automation control
if (id == lt.Annotations.Engine.AnnObject.none) {
viewer.defaultInteractiveMode = panZoom;
}
else {
viewer.defaultInteractiveMode = automationInteractiveMode;
}
});
// When the current object ID changes, we need to update our select
manager.add_currentObjectIdChanged((sender, e) => {
const currentObjectId: number = manager.currentObjectId;
for (let i = 0; i < currentObjectIdSelect.options.length; i++) {
const id: number = parseInt(currentObjectIdSelect.options[i].value);
if (id === currentObjectId) {
currentObjectIdSelect.selectedIndex = i;
break;
}
}
});
// Pan zoom by default
viewer.defaultInteractiveMode = panZoom;
// Set up the automation (will create the container as well)
const automation: lt.Annotations.Automation.AnnAutomation = new lt.Annotations.Automation.AnnAutomation(manager, imageViewerAutomationControl);
this.automation = automation;
// Add handler to update the container size when the image size changes
viewer.itemChanged.add((sender, e) => {
const container: lt.Annotations.Engine.AnnContainer = automation.container;
container.size = container.mapper.sizeToContainerCoordinates(viewer.imageSize);
// Create new canvas data provider for the new image
const canvasDataProvider: lt.Demos.Annotations.CanvasDataProvider = new lt.Demos.Annotations.CanvasDataProvider(viewer.activeItem.canvas);
imageViewerAutomationControl.automationDataProvider = canvasDataProvider;
});
// Set up this automation as the active one
this.automation.active = true;
if(callback)
callback(this.automation);
}
private createMyAutomationObjects(manager): void {
// Get the automation objects collection
const automationObjects = manager.objects;
// Set up the select automation object
const selectAutomationObj: lt.Annotations.Automation.AnnAutomationObject = new lt.Annotations.Automation.AnnAutomationObject();
selectAutomationObj.id = lt.Annotations.Engine.AnnObject.selectObjectId;
selectAutomationObj.name = "Select";
selectAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner;
selectAutomationObj.editDesignerType = lt.Annotations.Designers.AnnSelectionEditDesigner;
selectAutomationObj.runDesignerType = null;
// Create the object template for it
const selectObj: lt.Annotations.Engine.AnnSelectionObject = new lt.Annotations.Engine.AnnSelectionObject();
selectObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("darkgreen"), lt.LeadLengthD.create(2));
selectAutomationObj.objectTemplate = selectObj;
// Add it to the automation objects of the manager
automationObjects.add(selectAutomationObj);
// Set up the line automation object
const lineAutomationObj: lt.Annotations.Automation.AnnAutomationObject = new lt.Annotations.Automation.AnnAutomationObject();
lineAutomationObj.id = lt.Annotations.Engine.AnnObject.lineObjectId;
lineAutomationObj.name = "Line";
lineAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnLineDrawDesigner;
lineAutomationObj.editDesignerType = lt.Annotations.Designers.AnnPolylineEditDesigner;
lineAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner;
// Create the object template for it, use the default stroke
const lineObj: lt.Annotations.Engine.AnnPolylineObject = new lt.Annotations.Engine.AnnPolylineObject();
lineAutomationObj.objectTemplate = lineObj;
// Add it to the automation objects of the manager
automationObjects.add(lineAutomationObj);
// Set up the rectangle automation object
const rectAutomationObj: lt.Annotations.Automation.AnnAutomationObject = new lt.Annotations.Automation.AnnAutomationObject();
rectAutomationObj.id = lt.Annotations.Engine.AnnObject.rectangleObjectId;
rectAutomationObj.name = "Rectangle";
rectAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner;
rectAutomationObj.editDesignerType = lt.Annotations.Designers.AnnRectangleEditDesigner;
rectAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner;
// Create the object template for it, use the default stroke and fill
const rectObj: lt.Annotations.Engine.AnnRectangleObject = new lt.Annotations.Engine.AnnRectangleObject();
rectAutomationObj.set_objectTemplate(rectObj);
// Add it to the automation objects of the manager
automationObjects.add(rectAutomationObj);
const textAutomationObj: lt.Annotations.Automation.AnnAutomationObject = new lt.Annotations.Automation.AnnAutomationObject();
textAutomationObj.id = lt.Annotations.Engine.AnnObject.textObjectId;
textAutomationObj.name = "Text";
textAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner;
textAutomationObj.editDesignerType = lt.Annotations.Designers.AnnTextEditDesigner;
textAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner;
// Create the object template for it, use the default stroke, fill, text and font
const textObj: lt.Annotations.Engine.AnnTextObject = new lt.Annotations.Engine.AnnTextObject();
textAutomationObj.objectTemplate = textObj;
// Add it to the automation objects of the manager
automationObjects.add(textAutomationObj);
}
}
export class AutomationHelper {
automation = null;
constructor() {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null);
}
run(callback) {
// Create the viewer
const imageViewerDiv = document.getElementById("imageViewerDiv");
const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
const viewer = new lt.Controls.ImageViewer(createOptions);
viewer.autoCreateCanvas = true;
// PanZoom interactive mode
const panZoom = new lt.Controls.ImageViewerPanZoomInteractiveMode();
// Create an instance of the Automation control object that works with LEADTOOLS ImageViewer
const imageViewerAutomationControl = new lt.Demos.Annotations.ImageViewerAutomationControl();
// Attach our image viewer
imageViewerAutomationControl.imageViewer = viewer;
// Set the image viewer interactive mode
const automationInteractiveMode = new lt.Demos.Annotations.AutomationInteractiveMode();
automationInteractiveMode.automationControl = imageViewerAutomationControl;
// Set the image URL
viewer.imageUrl = "http://demo.leadtools.com/images/png/pngimage.png";
// Create and set up the automation manager using the HTML5 rendering engine
const renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
const manager = lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
// Create only the line and rectangle automation objects
this.createMyAutomationObjects(manager);
// You can instruct the manager to create the default (all) automation objects.
// comment out the call to CreateMyAutomationObjects and call this instead:
//manager.createDefaultObjects();
// Add the objects to the objects select element
const currentObjectIdSelect = document.getElementById("currentObjectIdSelect");
// Add the PanZoom option
currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option("Pan/Zoom", lt.Annotations.Engine.AnnObject.none.toString());
const automationObjCount = manager.objects.count;
for (let i = 0; i < automationObjCount; i++) {
// Get the object
const automationObj = manager.objects.item(i);
// Add its name to the select element
const name = automationObj.name;
const id = automationObj.id;
currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id.toString());
}
// Hook to its change event
currentObjectIdSelect.addEventListener("change", () => {
// Get the object ID
const id = parseInt(currentObjectIdSelect.options[currentObjectIdSelect.selectedIndex].value);
// Set it as the current object in the manager
manager.currentObjectId = id;
// If this is the "Pan/Zoom" option, then back to pan zoom, otherwise, set our automation control
if (id == lt.Annotations.Engine.AnnObject.none) {
viewer.defaultInteractiveMode = panZoom;
}
else {
viewer.defaultInteractiveMode = automationInteractiveMode;
}
});
// When the current object ID changes, we need to update our select
manager.add_currentObjectIdChanged((sender, e) => {
const currentObjectId = manager.currentObjectId;
for (let i = 0; i < currentObjectIdSelect.options.length; i++) {
const id = parseInt(currentObjectIdSelect.options[i].value);
if (id === currentObjectId) {
currentObjectIdSelect.selectedIndex = i;
break;
}
}
});
// Pan zoom by default
viewer.defaultInteractiveMode = panZoom;
// Set up the automation (will create the container as well)
const automation = new lt.Annotations.Automation.AnnAutomation(manager, imageViewerAutomationControl);
this.automation = automation;
// Add handler to update the container size when the image size changes
viewer.itemChanged.add((sender, e) => {
const container = automation.container;
container.size = container.mapper.sizeToContainerCoordinates(viewer.imageSize);
// Create new canvas data provider for the new image
const canvasDataProvider = new lt.Demos.Annotations.CanvasDataProvider(viewer.activeItem.canvas);
imageViewerAutomationControl.automationDataProvider = canvasDataProvider;
});
// Set up this automation as the active one
this.automation.active = true;
if(callback)
callback(this.automation);
}
createMyAutomationObjects(manager) {
// Get the automation objects collection
const automationObjects = manager.objects;
// Set up the select automation object
const selectAutomationObj = new lt.Annotations.Automation.AnnAutomationObject();
selectAutomationObj.id = lt.Annotations.Engine.AnnObject.selectObjectId;
selectAutomationObj.name = "Select";
selectAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner;
selectAutomationObj.editDesignerType = lt.Annotations.Designers.AnnSelectionEditDesigner;
selectAutomationObj.runDesignerType = null;
// Create the object template for it
const selectObj = new lt.Annotations.Engine.AnnSelectionObject();
selectObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("darkgreen"), lt.LeadLengthD.create(2));
selectAutomationObj.objectTemplate = selectObj;
// Add it to the automation objects of the manager
automationObjects.add(selectAutomationObj);
// Set up the line automation object
const lineAutomationObj = new lt.Annotations.Automation.AnnAutomationObject();
lineAutomationObj.id = lt.Annotations.Engine.AnnObject.lineObjectId;
lineAutomationObj.name = "Line";
lineAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnLineDrawDesigner;
lineAutomationObj.editDesignerType = lt.Annotations.Designers.AnnPolylineEditDesigner;
lineAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner;
// Create the object template for it, use the default stroke
const lineObj = new lt.Annotations.Engine.AnnPolylineObject();
lineAutomationObj.objectTemplate = lineObj;
// Add it to the automation objects of the manager
automationObjects.add(lineAutomationObj);
// Set up the rectangle automation object
const rectAutomationObj = new lt.Annotations.Automation.AnnAutomationObject();
rectAutomationObj.id = lt.Annotations.Engine.AnnObject.rectangleObjectId;
rectAutomationObj.name = "Rectangle";
rectAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner;
rectAutomationObj.editDesignerType = lt.Annotations.Designers.AnnRectangleEditDesigner;
rectAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner;
// Create the object template for it, use the default stroke and fill
const rectObj = new lt.Annotations.Engine.AnnRectangleObject();
rectAutomationObj.set_objectTemplate(rectObj);
// Add it to the automation objects of the manager
automationObjects.add(rectAutomationObj);
const textAutomationObj = new lt.Annotations.Automation.AnnAutomationObject();
textAutomationObj.id = lt.Annotations.Engine.AnnObject.textObjectId;
textAutomationObj.name = "Text";
textAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner;
textAutomationObj.editDesignerType = lt.Annotations.Designers.AnnTextEditDesigner;
textAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner;
// Create the object template for it, use the default stroke, fill, text and font
const textObj = new lt.Annotations.Engine.AnnTextObject();
textAutomationObj.objectTemplate = textObj;
// Add it to the automation objects of the manager
automationObjects.add(textAutomationObj);
}
}
<!doctype html>
<html lang="en">
<title>Automation Example | EditText</title>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="../../LT/Leadtools.js"></script>
<script src="../../LT/Leadtools.Controls.js"></script>
<script src="../../LT/Leadtools.Annotations.Engine.js"></script>
<script src="../../LT/Leadtools.Annotations.Designers.js"></script>
<script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script>
<script src="../../LT/Leadtools.Annotations.Automation.js"></script>
<script src="../../LT/Leadtools.Demos.js"></script>
<script src="../../LT/Leadtools.Demos.Annotations.Js"></script>
<style>
#imageViewerDiv {
border: 1px solid #000000;
width: 800px;
height: 800px;
background-color: #7F7F7F;
}
</style>
<!-- All demo files are bundled and appended to the window -->
<script src="../../bundle.js" type="text/javascript"></script>
</head>
<body>
<p>Either Pan/Zoom or Annotations mode. In annotations mode, draw new objects or edit them.</p>
<div>
<select id="currentObjectIdSelect"></select>
<input type="button" id="exampleButton" value="Example" />
<label id="exampleLabel" />
</div>
<div id="imageViewerDiv" />
</body>
<script>
window.onload = () => {
const example = new window.examples.AnnAutomation.Create();
example.run();
};
</script>
</html>