Graphics+ Style Guide Help Code No. LIT Software Release 1.3 Issued September 10, 2014

Transcription

1 Code No. LIT Software Release 1.3 Issued September 10, 2014 Refer to the QuickLIT website for the most up-to-date version of this document. Overview...2 Related Documentation...2 Tool Options Setup...2 Tool Recommendations...2 Base Template...3 Header...4 Reserved Block...4 Title Block...4 Brand Block...5 Home Button...5 Navigation Zone...5 Content Area...5 Graphic Branding...5 Johnson Controls Logo...5 Customer Logo...5 Color Palette...6 Typography...6 Graphical Layout Recommendations...6 Graphic Size...6 Margins and White Space...6 Layout Grid...8 Standard Element Positioning...10 Modules...10 Types of Value Boxes...11 Value Box Positioning...12 Labeling...13 Navigation...14 Campus Dashboard Graphic...15 Building Dashboard Graphic...16 Building Overview Section...16 Legend Control...17 Single Floor Graphic...17 Central Mechanical System Graphics...18 Zone Mechanical System Graphic...19 Tailored Summary of Zone Controllers...19 Predefined GGT Templates...20 CAD Import Feature...21 Index

2 Overview Welcome to the Release 1.3 Johnson Controls. This document defines many recommendations and best practices to follow when creating graphics with the Graphic Generation Tool (GGT). This document also includes details about using the pre-built templates that are installed with the tool. This style guide: provides a mechanism to ensure that graphics are consistent within a site and with other Johnson Controls graphics defines usage recommendations and best practices for creating graphics strives to reduce the amount of time required to build graphics by eliminating the need to experiment with different fonts, colors, and styles provides a professional, neat, and distinctive design for graphics provides a standard navigation model that is user tested and easy to follow Related Documentation Table 1 contains literature related to the Graphics+ feature and the GGT. Table 1: Graphic Generation Tool Related Documentation For Information On See Document LIT Number Installing the Graphic Generation Tool Features and Benefits of the Graphic Generation Tool Using the Graphic Generation Tool Displaying Graphics in the SMP, SCT, and Ready Access Portal Graphic Generation Tool Installation Instructions Graphics+ Feature Product Bulletin Graphic Generation Tool Help Graphics+ Runtime Help Metasys System Help Ready Access Portal Help LIT LIT LIT LIT LIT LIT Hardware and Software Recommendations for Displaying Graphics in the SMP, SCT, or the Ready Access Portal Metasys System Configuration Guide LIT Tool Options Setup The first step in creating your first graphic is to make sure the settings under the default properties and default bindings are satisfactory. These settings are applied to all new elements added to a graphic. Changing these settings does not affect current elements that appear in a graphic, only the new elements. To configure these defaults, go to View > Options. For details, refer to the Graphic Generation Tool Help (LIT ). Tool Recommendations To ensure optimal performance of graphics created with the GGT, follow the recommendations listed in Table 2. 2

3 Table 2: Recommended Maximum Selections Metric Recommendation Number of Shapes and Geometries for an Imported computer-aided design (CAD) File Graphic File Size (Compressed) Number of Elements Number of Bound Metasys Items Number of Status Summaries Number of Images Number of Animations 0-3,000 NAE55-1: 1 MB maximum NAE55-2: 3 MB maximum NAE35/45: 900 Kb maximum NCE25: 900 Kb maximum ADS/AD: 50 MB or less Notes The CAD File Import dialog box notifies you when the file has more than 3,000 shapes and geometries. To help determine if a graphic is an acceptable size, zip the AML file. Note that because GGT uses a different method of compression, this method provides only a close approximation of the actual compressed file size. An element is any symbol from the Graphic Enterprise Library (GEL) that is added to a graphic. We recommend that you have no more than 200 bound Metasys items on a single graphic unless you are using a Status Summary element (see Number of Status Summaries). This limit allows for 50 bound Metasys items per Status Summary with a recommended maximum of six Status Summaries on a graphic. The limit results in 300 items whose statuses are summarized using only five elements (not 300 elements). This Status Summary exception contrasts the bound Metasys items recommendation of 200 maximum, because not all bound values appear in the graphic. An image is any image file that is added to the graphic canvas. Note: We recommend that images have a maximum size of 1,600 pixels (height) by 1,200 pixels (width) to avoid delays in load times in the SMP. Exceeding the recommended dimension size causes significant delays in load times. For example, an image the size of 3,000 pixels (height) by 5,000 pixels (width) has an approximate load time of 10 seconds, whereas an image the size of 1,000 pixels (height) by 1,667 pixels (width; width adjusted automatically to maintain aspect ratio) has an approximate load time of 3 seconds. This number applies to animations that are actively running at the same time (for example, a supply fan and return fan). Follow the hardware recommendations listed in Table 3 for the computer that is running GGT. Table 3: GGT Hardware Recommendations Item Recommendation Minimum Screen Size Minimum Screen Resolution Minimum Graphic Card Memory 15 inch (21 inch recommended) 1024 x 768 pixels (normal format) 1280 x 800 (wide screen format) 64 MB For hardware and software recommendations for client computers displaying graphics in the SMP, SCT, or the Ready Access Portal, refer to the Metasys System Configuration Guide (LIT ). Base Template The base template provides two primary zones: the header and the content area. These zones make the best use of space within a single graphic. 3

4 Figure 1: Base Template Zones Header The header provides a common location for primary information regarding the current graphic. Keep the look and design of the header consistent throughout all graphics on the site with respect to color, shape, size, and element placement. Figure 2: Header Anatomy Reserved Block The upper-left corner of the graphic contains a reserved block. Do not add any content into this reserved block. The Graphics+ viewer within the Site Management Portal (SMP) user interface, System Configuration Tool (SCT) UI, and Ready Access Portal UI places an overlay in this space, which controls the zoom level and pan location, as well as other visual manipulation utilities. Title Block The title block accommodates a primary graphic title, as well as a value box, which appears as a secondary title. Use the value box to display an equipment name (especially useful when an aliased graphic appears). Ignore or delete the secondary title if it is not needed. Also, keep the position and font size of the title elements consistent between graphics. 4

5 Brand Block The upper-right corner contains a block used for Johnson Controls branding. See Graphic Branding for further details about using this block. Home Button The Home button in the header returns the user to the Home graphic page in one click. The Home page should be the first graphic from which users can navigate to any facility within the site. Always position the Home button in the same location on all graphics created for the site to provide the users with a consistent navigation element. You can modify the Home button to your own design, but make sure you use the customized version throughout all of your graphics for consistency. Navigation Zone The navigation zone is a portion of the graphic directly below the header that visually grounds any common navigation elements the customers may require. Position the buttons horizontally directly below the title block. Figure 3: Sample of Graphical Navigation Elements You can place other graphical navigation elements next to the Home button within the title block. This area is best suited for navigation elements that are consistent across every graphic (for example, a Legend button or a Sequence of Operations button). Within the navigation zone, remove all unused (unbound) buttons from the graphic before the graphic is saved as an object to the Metasys system. Content Area The content area provides the available space within which you create your graphic. The gradient background has been designed to accentuate the graphical style of the elements within the Graphic Enterprise Library. Graphic Branding Branding provides an important part of developing graphics. All graphics you create should include the Johnson Controls logo and may include a customer logo to provide a sense of identity to the image. Be sure that the brand information you add to your graphics is not overwhelming. The true value of each graphic comes from its content. Keep additional branding imagery or colors subtle. Johnson Controls Logo The Johnson Controls logo is provided as a standard graphical element in the templates. This element has a built-in hyperlink that navigates to QuickLIT, the Johnson Controls product literature website, which contains helpful support documentation. To ensure a consistent brand message and to follow copyright laws, do not remove, alter, resize, or re-color the Johnson Controls logo. Customer Logo Place the customer logo within the title block to the left of the primary and secondary titles (Figure 4). If possible, apply a transparent background to the customer logo to ensure a unified theme for the graphic itself. We recommend a logo size with a maximum height of 50 pixels. Figure 4: Customer Logo Location 5

6 Color Palette The elements and controls within the Graphic Enterprise Library are designed to use on dark-colored backgrounds. If you need to change the background color of the graphic, limit the use of light colors. Status colors displayed within the elements and modules at runtime are controlled by the Metasys System Preferences option. In general, a white color means that the status of the monitored object is normal. To provide a consistent user experience, we recommend that you use the status color default values. Typography The GGT provides a short list of fonts to use within your graphic. The list allows you some variety; however, we recommend that you limit the use of fonts to just one or two different fonts per graphic. You can use bold, italic, and underlined text styles to provide emphasis to page titles, section titles, and group captions. Using these styles within the common elements, such as the Advanced Value Box and Key Data module, can clutter the screen and diminish legibility. Lastly, refrain from increasing the text size of every element beyond its default. The default text sizes are designed for maximum performance and best use of the screen area. Graphical Layout Recommendations We recommend that you always create a new graphic based on one of the many templates of pre-drawn graphics provided with GGT. You can easily modify these templates to meet your needs. For details, see Predefined GGT Templates. If you create custom graphics, follow simple guidelines that pertain to page size, graphic size, margins, use of white space, and layout design. Graphic Size The size of the base template graphic is set to 1,000 pixels wide by 800 pixels high. However, different graphics may require different sizes based on the quantity of the data displayed. The size of the graphic is important to how it appears in the SMP, SCT, or Ready Access Portal. Decrease the size of the graphic by grabbing the resize handle in the lower-right corner of the canvas. A double arrow appears when the handle is active. Very often, you can eliminate extra white space on the right and bottom sides of the graphic before saving the graphic as an object to the Metasys system. If the margins are too large, you need to zoom in when you view the graphic in the SMP, SCT, or Ready Access Portal. Margins and White Space When creating your graphic, enforce a margin and use white space. Some of the most successful graphics, both visually and functionally, are the least complex. Do not allow your graphic to touch the bounding edges of the margin. If the margins are too large, you need to take the extra step of zooming in when you view the graphic in the SMP, SCT, or Ready Access Portal. Figure 5 shows good use of margins and graphic complexity. 6

7 Figure 5: Graphic Margins White space refers to the empty space surrounding an element on the graphic, a term originating from the publishing industry that identifies blank portions of a page. Use more white space around an element you want to emphasize. Otherwise, position elements close together so the user recognizes the elements are associated with each other. In Figure 6, the Outside Air, Solar Energy, Primary Systems, and Building Overview elements are clearly defined as logical groupings by the white space surrounding them. 7

8 Figure 6: White Space Examples Layout Grid The most effective method of organizing elements is to use a design grid to set apart logically related sets of components. A grid divides the available space into areas that can help you to arrange and align components. Grids make it easy for users to see the logical sequence of tasks and to understand the relationships between sets of components. Figure 7 is an example of a three-panel grid layout. 8

9 Figure 7: Sample of a Grid System You can use the number and width of components and their associated labels to determine the number of columns in a grid. At the beginning of the design process, vertical divisions are more difficult to set because they depend on the depth of components and sets of components, which are not yet placed. 9

10 Developing a grid is an ongoing process. If you know how much space is available, you can start working with the components to determine the most effective use of space. A grid can also help you to determine how much space to allocate to a given set of components. When you can define a grid that works for a number of layouts, your graphics have a more consistent appearance. Figure 7 shows how the same three-column grid was used as the basic guide for many of the graphics illustrated within this document. Standard Element Positioning Modules GGT has modules (Key Data Module and Room Control Module) that are placed into graphics. As indicated in Figure 8, place modules along the left side of the graphic if the modules are expanded by default. When designing multiple graphics using the same module, such as the Key Data module, use a consistent top and left position for those modules across all graphics. Figure 8: Typical Expanded Module Placement If the modules are collapsed by default, place them along the top or left side of the graphic as shown in Figure 9. This practice is especially important for modules in a highly complicated graphic when available screen space is limited. 10

11 Figure 9: Typical Minimized Module Placement (Top or Left Side) Types of Value Boxes A Metasys system value can appear within a graphic using a Basic Value Box, Inline Command Box, Key Data item, or Advanced Value Box. To ensure the graphic is not cluttered with unnecessary elements, choose the appropriate type of value box for the given need. Table 4 lists the features for each of the four available value boxes. Table 4: Value Box Features Type Single Value Display Status User Actions Panel Inline Command Label Collapse Two Value Display Basic Value Box Inline Command Box Key Data Item Advanced Value Box If you intend to use many Advanced Value Boxes on your graphic, you can have them initially collapsed when a graphic is loaded in the viewer. When collapsed, the Advanced Value Box displays only the status of the primary Metasys item (Figure 10). You can open the Advanced Value Box for more information if a warning or alarm status is indicated. Figure 10: Advanced Value Box: Expanded and Collapsed States 11

12 Value Box Positioning Position value boxes adjacent to the element to which they refer. See Figure 11 for an example. The best position depends on the number of elements appearing in the final graphic. Optimal positioning of the value boxes is within an arc from 10:00 to 6:00 surrounding the attached element (Figure 11). If positioned improperly, the connection line may run under the value box s label or become concealed by the value box itself, resulting in an ambiguous or hard-to-read graphic. Figure 11: Typical Placement of Value Boxes For Advanced Value Boxes in particular, position them to accommodate any extra space needed when they are expanded. For example, if the Advanced Value Box is configured to appear collapsed at runtime, position it within the Graphic Canvas to ensure that the value box does not interfere with an adjacent element when it is expanded. Another best practice is to left align value boxes for elements that display multiple values. Vertical or horizontal alignment for multiple value boxes appears to use the same connector line to the element. This practice greatly reduces visual clutter on a graphic. Also, consider using common widths for the collection of value boxes for a consistent look to the block of information. See Figure 12 and Figure 13. Figure 12: Value Box Alignment and Size 12

13 Figure 13: Single Connector Line Illusion Labeling Include the name or description of a Metasys item on the graphic next to or above the value to ensure clarity. If the item s name or description is not sufficiently expressive, you may want to add a more descriptive label. This practice prevents any confusion about what a value represents. 13

14 Navigation A carefully designed and well planned navigation scheme between graphics is crucial to users who want to monitor and resolve issues anywhere in the system without having to search the All Items tree to find problem areas. Make sure you plan the navigation buttons for each graphic to ensure an easy and logical method for moving between graphics. The following graphical roadmap depicts a suggested navigation configuration that provides ideal navigation and information graphics for monitoring. Figure 14: Typical Navigation Model We highly recommend you design the navigation model before you begin creating graphics. The model can provide an overall view of the entire collection of graphics and supply an accurate estimate of the number of graphics required. We recommend that you apply the navigation model shown in Figure 14, unless it does not fit your particular site. 14

15 Campus Dashboard Graphic The campus dashboard graphic is a representation of the buildings within your site via a geographical map or a conceptual map (Figure 15). This type of graphic serves as the Home (source) graphic to which all other graphics are bound with the Home button. For details, see Home Button. Figure 15: Campus Dashboard Graphic Use a Building element, which includes a Status Summary that displays alarm, warning, and offline count information, to create a visual representation of a single building. This element provides monitoring summaries at a glance as well as navigation to the next level graphic. For systems that contain only one building or location, you do not need a campus-wide graphic. Instead, provide a building dashboard graphic as a primary Home graphic. For systems that contain more than 15 buildings or locations, we recommend that you create a higher-level graphic that contains a geographical map. The map graphic is then considered the Home graphic. This Home graphic should be broken up logically by region or area, with navigation to a graphic similar to the one shown in Figure 15, containing only the locations within a specific region or area. 15

16 Building Dashboard Graphic A building dashboard graphic represents the overall status of systems within one building or location. A typical building dashboard contains a photograph of the building or line art representing the building s elevation. See Figure 16 for an example. Figure 16: Building Dashboard Graphic Building Overview Section Place floor group elements over an elevation image of the building (if available) as shown in Figure 17. Figure 17: Floor Groups If an elevation image of the building is not available, stack the Floor Group elements within the graphic as shown in Figure 18. We recommend using no more than five floors in a Floor Group. You can use Floor Group elements that each represent a single floor to delineate each floor for monitoring and navigating. 16

17 Figure 18: Alternative Method of Representing Floor Groups Legend Control Another navigation method is to create a legend control (Figure 19). This control is useful for large floors that can be split into regions. The legend is an image control shaped like the floorplan and consists of individual regions and buttons that, when clicked, route the user to the system that controls that area of the floorplan. As shown in Figure 19, each region is uniquely identified with a different color. We recommend that you position the legend control in the bottom left of the graphic. Figure 19: Legend Control Example Single Floor Graphic The floor graphic provides a visual/spatial reference of a particular location in a building. When you create a floor graphic based on an imported CAD drawing, provide as much detail to the Floor element as you wish, but leave out unimportant items, such as furniture. During CAD import, send all layers of the drawing to the background layer except interior or exterior walls. This practice improves the performance of the graphic when viewed, zoomed, and panned. Position and size the floor within the right two-thirds of the content area to allow space for other elements (such as the Room Control Module and Key Data Module) to the left of the floor (Figure 20). 17

18 Figure 20: Single Floor Graphic Central Mechanical System Graphics Central mechanical system graphics are the most informative and interactive graphics in the system. These diagrams provide detailed information regarding each primary component within a mechanical system. See Figure 21 for an example. Figure 21: Mechanical Graphic 18

19 For graphics that display ductwork or pipes, make sure to: position ductwork or pipes a consistent distance from the top and left edges of the graphic canvas place equipment symbols accordingly on top of the ductwork or pipes provide common alignment for primary value boxes attached to symbols sharing a common duct employ good white space practices to prevent clutter Zone Mechanical System Graphic A zone mechanical system graphic focuses on a single piece of equipment. The options presented should allow a user to completely diagnose and remedy issues being reported by the equipment. See Figure 22 for an example. Figure 22: Zone Mechanical System Graphic Tailored Summary of Zone Controllers We recommend adding a button to the zone mechanical system graphic or any single floor graphic that links to a Tailored Summary view of the system. This link allows the user to view - in table format - what is represented on the graphic. Figure 23 is an example of a linked Table View button. 19

20 Figure 23: Link to a Tailored Summary The Tailored Summary view (Figure 24) also allows commands and attribute modifications of more than one Metasys item at a time using the global command and global modification capabilities. Figure 24: Tailored Summary View Predefined GGT Templates GGT installation includes many predefined templates. We highly recommend selecting a template that closely resembles your control system instead of creating a new graphic. For best results, select a template that is more complex than you need. Then, delete the unnecessary elements. Search for the template you need by using the File > New menu option in GGT. For details, refer to the Graphic Generation Tool Help (LIT ). The predefined templates have been created using the following design principles: Key Data modules include Metasys system objects that the customer most likely needs to command. Effective setpoints are not included in the Key Data module but appear elsewhere in the graphic. These setpoints are labeled in the graphic. 20

21 Related objects are grouped together and appear in a prominent location on the graphic. For example, outside air sensors are grouped together and appear in the lower-left corner of the graphic. The width of Advanced Value Boxes that have discrete values, such as On/Off or Normal/Alarm, is configured for 100 pixels. The width of Advanced Value Boxes that have analog values, such as discharge air sensor, is configured for 130 pixels. The width of Advanced Value Boxes that hold analog values and a setpoint is configured for 260 pixels. An overview graphic is created on Central Plant Systems that serves as the Home page for Central Plants. CAD Import Feature The GGT allows you to import a CAD drawing into a graphic to represent a floor plan of a building. The CAD file you import must be compatible with the AutoDesk AutoCAD software program at a supported version and have a file extension of.dxf or.dwg. Supported file versions include AutoCAD 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2002, 2000, R14, and R13. Before you import, we recommend that you prepare the CAD file using your CAD software to improve the performance of the import and to achieve a satisfactory result. Using your CAD drawing software, perform these steps before you import the file: Turn off all layers that you do not want to import. Also, remove all hidden layers from the drawing. Within the layer you want to import, remove all unnecessary detail. For example, remove items such as furniture, WC basins, hatched areas, and lengthy text. Retain items such as walls, pillars, rooms, doors, staircases, lifts, and columns. Logically divide the building into zones considering building size and the number of systems to be visualized. Assign the same line weight for the entire layer. Change the view resolution to the maximum setting, then regenerate the file. Figure 25 is an example of a CAD file before and after cleanup. After cleanup, a drawing of similar detail easily imports into GGT. Note: You may use the tools in the Import CAD Drawing function in GGT to further clean up the CAD file before importing it on the graphic canvas. Figure 25: CAD File Import: Before Cleanup and After Cleanup 21

22 Index A Advanced Value Box...11 Animations recommendation...2 B Base template...3 Basic Value Box...11 Bound Metasys items recommendation...2 Branding...5 Branding block...5 Building dashboard...16 Building overview...16 C CAD file recommendation...2 CAD import...21 Campus dashboard graphic...15 Central mechanical system graphic...18 Color palette...6 Content area...5 Customer logo...5 D Dashboard graphic...15 E Elements recommendation...2 G Graphic branding...5 Graphic card memory recommendation...2 Graphic file size recommendation...2 Graphic layout recommendations...6 Graphic size recommendation...2 Graphic size recommendations...6 Graphics+ overview...2 Grid...8 H Hardware recommendations...2 Header...4 Home button...5 I Images recommendation...2 Inline Command Box...11 J Johnson Controls logo...5 K Key Data Item...11 L Labeling...13 Layout grid...8 Legend control...17 M Margins recommendation...6 Module placement...10 N Navigation...14 Navigation zone...5 P Page size recommendations...6 Predefined templates...20 R Recommendations...2, 6 Graphic card memory...2 Graphic file size...2 Graphic layout...6 Graphic size...6 Hardware...2 Margins...2, 6 Number of animations...2 Number of bound Metasys items...2 Number of elements...2 Number of images...2 Number of shapes/geometries...2 Number of Status Summaries...2 Page size...6 Screen resolution...2 Screen size...2 White space...6 Related documentation...2 Reserved block...4 S Screen resolution recommendation...2 Screen size recommendation...2 Single floor graphic...17 Standard element positioning...10 Status Summary recommendation...2 T Tailored summary...19 Templates...20 Title block...4 Tool options...2 Typography...6 V Value box positioning...12 Value boxes...11 W White space recommendation...6 Z Zone mechanical system graphic...19 Building Efficiency 507 E. Michigan Street, Milwaukee, WI Metasys and Johnson Controls are registered trademarks of Johnson Controls, Inc. All other marks herein are the marks of their respective owners Johnson Controls, Inc. Published in U.S.A. 22