HTML Drawing Control

Add redline features to HTML drawings for desktop web browsers

Technologies > User Interface Add-Ins > HTML Drawing Views > Markup and Redlining

You can use drawing tools in Web Central to mark up or redline HTML drawings, in order to add notes, highlight details, or indicate needed changes. All of these tools are available in the view that contains the drawing.

Note: The term Markup is a synonym for Redmarks and Redlining.

Markups: Redlining and Redmarks

Participants in space-planning phases typically mark up existing floor plans with proposed changes, such as redlining walls to be removed, indicating layout changes or allocation of space by organization, and marking space needs at specific locations. For example, a note might specify, "Need a small conference room here and break-out rooms along this wall."

In a similar way, newly acquired - or even space yet to be acquired - must be included in the planning process. If floor plans are not yet available for new space, planning participants can draw or outline what that space may look like, then indicate more detailed space classifications, organizational allocations, and asset or furniture needs.

In the layout phase of the process, the Space Planner may have changes to suggest in the layout scenario.

Note: API must specify which views include markup capabilities. Then each drawing opened in a designated view has markup tools available.

Example view: http://localhost:8080/archibus/schema/ab-products/solutions/programming/drawing/ab-ex-dwg-html-control-markup.axvw

The example below shows all supported features:

Note that in Web Central, both redline features and markup legends can exist in the same view. You can place redline features and markup legends as required. In the drawing below, markup legends appear in a separate pane on the left.

You can also load markup legends - or redline symbols - in a popup window, lower right in the drawing below:

Markup drag-and-drop

In a drawing that uses markup tools, you can:

• Drag-and-drop the markup symbols from a "markup" panel into an HTML5 drawing.
• Move, resize, edit or delete the markup.
• Adjust label and text size for some symbols with text content, such as a textbox or arrowBox.
• Change the markup color to red, black, or a custom color from the redlining panel.

Loading a drawing that contains a mark-up

If a corresponding mark-up exists for this drawing, then load the mark-up image:

SELECT * from afm_redlines WHERE dwgname = <dwgname> and layer_name = <layer_name> and activity_log_id = activity_log.activity_log_id and activity_log.project_id = <this move project_id>

Notes:

• Use procedure above if you have selected "Show All Mark-ups" in the Move Actions list, which is the default.
• If you have previously selected "Hide All Mark-ups", then do not show any mark-up images.

• If you have selected "Hide Completed Mark-ups", then add a filter to the SELECT above:

  ... and activity_log NOT IN ('%COMPLETED%', '%CLOSED%')

Saving a mark-up

Display a pop-up window that allows you to enter information for the associated activity_log item. Thus you can associate the action item with the move project,and route it to another user (CAD Operator, for example) to communicate changes, if the user has Service Desk.

The pop-up window contains:

• Action Title
• Action Type (default to PROJECT - TASK)
• Description
• Building Code (read-only, default to current building)
• Floor Code (read-only, default to current building)
• a checkbox to allow the user to create a service request from this information (if there is a license for Service Desk).

Upon saving the pop-up, close it. The system also:

• Creates an activity_log record with the information saved, including the move's project_id.
• Creates a record in afm_redlines to hold the marked-up information, referring to the activity_log_id.
• If the Create Service Request checkbox is checked, then initiate the Service Desk WFR to create a request.

Capture Markup image and save

You can capture the screen image and display in a different tab of the browser, then save in PNG format locally, or print.

Associate and Show Areas with Area Boxes

Goal: to be able to associate - and show - the actual areas of Area Boxes placed onto drawings using Markup Control.

Background

A move scenario planner or space planner sees a newly published layout scenario, but wants further changes to it. An area on the floor that now contains a handful of workstations should become an open plan area. The size should be 800 square feet. To mark up, the space planner draws an area box of 800 square feet around the set of workstations to be converted, and saves this information as a service request to the CAD planner. Alternately, the space planner puts an area box around a set of workstations and wants to know about how much area it represents. If that space needs to change, it's important to know about much area the space encompasses.

User interaction and design

The table below lists actions related to Area Boxes, along with a description of each action's effect in the interface:

Control Label Text Size

You can make scalable text in labels bigger or smaller.

Background

Labels are typically published and displayed using the same text size. When rooms are small, but labels are long, labels from adjacent rooms overlap. Zooming in does not help because the labels are zoomed with the rooms. Users want to make labels relatively smaller, so they do not overlap. If labels become too small to read, users can zoom in.

Labels affected

The feature applies only to scalable labels, that is, the labels in the published drawing with "em" suffix, such as gros-labels and rm-labels.

For non-scalable labels, such as the ones with "px" suffix or no suffix - jk-labels, fp-labels, pn-labels, or eq-labels - the feature has no effect.

User interaction and design

The table below lists actions related to Control Labels, along with a description of each action's effect in the interface. You can change the label size in two ways:

Setting up a view for redlining

1. In the .axvw, add reusable drawing controls' controller and components:

   <panel type="view" id="drawingFiles" file="drawing-common-controls.axvw"/>

2. Add a div for the legend. Ensure that class=”redline-legend”.

   <div id="markupLegendDiv" class="redline-legend"></div>

3. Add a div for the drawing.

   <div id="drawingId"></div>

4. Define markup control’s config in DrawingControl’s add-on config before the drawing control is constructed:

   parameters['addOnsConfig'] = { ... 'MarkupControl': { divId: "svgDiv", panelId: "markupLegendPanel", legendId: "markupLegendDiv", legendTitle: "Markup Legends", colorPickerId: 'markupLegendPanel_head', onChange: this.onMarkupChange, onDrop: this.onMarkupDrop, onSave: this.onSave, showAreaLabel: true } ... }; var svgControl = new Drawing.DrawingControl("svgDiv", "svg_ctrls", parameters);

   The table below lists parameters for MarkupControl:

   Parameter	Description
   divId	SVG drawing’s divId defined in .axvw file
   panelId	legend's panel id
   legendId	legend's div Id
   colorPickerId	the div id to hold the color picker control
   redlineTypes	An array of redline types to display on the legend panel, default to [ "cloud", "line", "textbox", "arrow" , "area", "swatch", "arrowTextbox", "textOnly"]
   onDrop	Define custom event handler when the legend is dropped
   onChange	Define custom event handler when the legend on the drawing is changed or moved.
   onSave	Define custom event handler when the SVG drawing is saved.
   currentColor	The legend color. Default to #FF0000 (red)
   legendTitle	The title displayed on legend panel’s title bar.
   style	A JSON map to define legendWidth, legendHeight, and legendMargin: { legendWidth: '75', legendHeight: '75', legendMargin: '5px 0px 0px 5px' }
   currentFontSize	The font size for the text box legends, such as "textbox, "arrowTextbox" and "textOnly". Default to 10.
   scaleFactor	The scale factor for dropped legend comparing to the legend original size. Default to 2. If the legendWidth is 75px, then the legend dropped on the SVg drawing will be 150px wide.

5. Follow the regular steps to load the drawing into the drawing div.

Drawing.view.MarkupControl API

Example view: http://localhost:8080/archibus/schema/ab-products/solutions/programming/drawing/ab-ex-dwg-html-control-markup.axvw