[{"data":1,"prerenderedAt":2037},["ShallowReactive",2],{"navigation_docs_en":3,"-en-configurator-synoptics":146,"-en-configurator-synoptics-surround":2033},[4,21,37,58,79,115],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Authentication","i-heroicons-lock-closed","\u002Fauthentication","en\u002F0.Authentication",[10,15],{"title":11,"path":12,"stem":13,"icon":14,"children":-1},"Login","\u002Fauthentication\u002Flogin","en\u002F0.Authentication\u002F1.Login","mdi-login",{"title":16,"path":17,"stem":18,"icon":19,"children":-1},"My profile","\u002Fauthentication\u002Fmyprofile","en\u002F0.Authentication\u002F2.MyProfile","mdi-account-circle",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Realtime","mdi-clock-fast","\u002Frealtime","en\u002F1.realtime",[27,32],{"title":28,"path":29,"stem":30,"icon":31,"children":-1},"Asset Overview","\u002Frealtime\u002Fassetoverview","en\u002F1.realtime\u002F1.AssetOverview","mdi-monitor-dashboard",{"title":33,"path":34,"stem":35,"icon":36,"children":-1},"Alarms","\u002Frealtime\u002Falarms","en\u002F1.realtime\u002F2.Alarms","mdi-bell-alert",{"title":38,"icon":39,"path":40,"stem":41,"children":42,"page":20},"Analysis","mdi-chart-bar","\u002Fanalysis","en\u002F2.analysis",[43,48,53],{"title":44,"path":45,"stem":46,"icon":47,"children":-1},"Trend","\u002Fanalysis\u002Ftrend","en\u002F2.analysis\u002F1.Trend","mdi-chart-line",{"title":49,"path":50,"stem":51,"icon":52,"children":-1},"Events","\u002Fanalysis\u002Fevents","en\u002F2.analysis\u002F2.Events","mdi-event-note",{"title":54,"path":55,"stem":56,"icon":57,"children":-1},"Wind analysis","\u002Fanalysis\u002Fwindanalysis","en\u002F2.analysis\u002F3.WindAnalysis","mdi-windsock",{"title":59,"icon":60,"path":61,"stem":62,"children":63,"page":20},"KPI","mdi-speedometer","\u002Fkpi","en\u002F3.kpi",[64,69,74],{"title":65,"path":66,"stem":67,"icon":68,"children":-1},"Energy Production","\u002Fkpi\u002Fenergyproduction","en\u002F3.kpi\u002F1.EnergyProduction","mdi-meter-electric-outline",{"title":70,"path":71,"stem":72,"icon":73,"children":-1},"Equivalent Hours","\u002Fkpi\u002Fequivalenthours","en\u002F3.kpi\u002F2.EquivalentHours","mdi-timer-sand",{"title":75,"path":76,"stem":77,"icon":78,"children":-1},"Performance Ratio","\u002Fkpi\u002Fperformanceratio","en\u002F3.kpi\u002F3.PerformanceRatio","mdi-weather-sunny",{"title":80,"icon":81,"path":82,"stem":83,"children":84,"page":20},"Admin","mdi-gear","\u002Fadmin","en\u002F4.admin",[85,90,95,100,105,110],{"title":86,"path":87,"stem":88,"icon":89,"children":-1},"Roles and Zones","\u002Fadmin\u002Frolesandzones","en\u002F4.admin\u002F1.rolesAndZones","mdi-shield-account",{"title":91,"path":92,"stem":93,"icon":94,"children":-1},"Users","\u002Fadmin\u002Fusers","en\u002F4.admin\u002F2.users","mdi-account-multiple",{"title":96,"path":97,"stem":98,"icon":99,"children":-1},"Activity Log","\u002Fadmin\u002Flogs","en\u002F4.admin\u002F3.logs","mdi-history",{"title":101,"path":102,"stem":103,"icon":104,"children":-1},"Identity providers","\u002Fadmin\u002Fidentityprovider","en\u002F4.admin\u002F4.identityProvider","mdi-fingerprint",{"title":106,"path":107,"stem":108,"icon":109,"children":-1},"Dashboard","\u002Fadmin\u002Fdashboard","en\u002F4.admin\u002F5.dashboard","mdi-view-dashboard",{"title":111,"path":112,"stem":113,"icon":114,"children":-1},"License","\u002Fadmin\u002Flicense","en\u002F4.admin\u002F6.license","mdi-certificate-outline",{"title":116,"icon":117,"path":118,"stem":119,"children":120,"page":20},"Configurator","mdi-wrench","\u002Fconfigurator","en\u002F5.configurator",[121,126,131,136,141],{"title":122,"path":123,"stem":124,"icon":125,"children":-1},"Data Acquisition","\u002Fconfigurator\u002Finstances","en\u002F5.configurator\u002F1.instances","mdi-database",{"title":127,"path":128,"stem":129,"icon":130,"children":-1},"System Operators","\u002Fconfigurator\u002Fsystemoperators","en\u002F5.configurator\u002F2.systemOperators","mdi:account-cog",{"title":132,"path":133,"stem":134,"icon":135,"children":-1},"Models","\u002Fconfigurator\u002Fmodels","en\u002F5.configurator\u002F3.models","mdi-notebook",{"title":137,"path":138,"stem":139,"icon":140,"children":-1},"Wizard Plants","\u002Fconfigurator\u002Fwizardplants","en\u002F5.configurator\u002F4.wizardPlants","mdi-file-tree",{"title":142,"path":143,"stem":144,"icon":145,"children":-1},"Synoptics","\u002Fconfigurator\u002Fsynoptics","en\u002F5.configurator\u002F5.synoptics","mdi-image-multiple",{"id":147,"title":142,"body":148,"description":2025,"extension":2026,"links":2027,"meta":2028,"navigation":2029,"path":2030,"seo":2031,"stem":144,"__hash__":2032},"docs_en\u002Fen\u002F5.configurator\u002F5.synoptics.md",{"type":149,"value":150,"toc":1953},"minimark",[151,159,162,184,187,192,198,204,210,216,244,246,250,253,267,272,286,290,312,316,319,339,343,347,352,357,360,377,381,384,424,427,430,432,435,438,442,445,477,481,566,570,573,577,655,659,662,714,718,728,731,735,746,749,752,756,782,786,789,858,862,865,879,883,889,914,918,922,926,929,933,936,940,943,987,990,1010,1013,1017,1053,1057,1072,1079,1081,1085,1088,1092,1150,1155,1159,1173,1177,1180,1184,1187,1191,1197,1204,1208,1222,1226,1229,1231,1234,1237,1241,1261,1265,1282,1286,1293,1314,1318,1321,1370,1374,1381,1385,1429,1436,1440,1443,1447,1454,1456,1459,1462,1489,1492,1494,1498,1502,1542,1546,1654,1657,1729,1733,1788,1792,1795,1897,1899,1903,1907,1914,1918,1921,1925,1928,1932,1938,1942],[152,153,154,155,158],"p",{},"The ",[156,157,142],"strong",{}," module lets you create interactive vector diagrams of plants and devices. A synoptic is a graphic canvas where shapes, icons, text and images change their appearance in realtime based on field values.",[152,160,161],{},"The module consists of three pages:",[163,164,165,172,178],"ul",{},[166,167,168,171],"li",{},[156,169,170],{},"Listing"," — browse, create and manage synoptics;",[166,173,174,177],{},[156,175,176],{},"Editor"," — design synoptics with a visual editor;",[166,179,180,183],{},[156,181,182],{},"Realtime viewer"," — display synoptics with live data.",[185,186],"hr",{},[188,189,191],"h2",{"id":190},"key-concepts","Key concepts",[152,193,194,197],{},[156,195,196],{},"Synoptic document"," — a graphic canvas with configurable width and height (default 1920 × 1080 px) containing a list of elements.",[152,199,200,203],{},[156,201,202],{},"Element"," — a geometric shape, icon, image or text placed on the canvas. Each element has visual properties (color, size, opacity) and can change its appearance through animations.",[152,205,206,209],{},[156,207,208],{},"Animation"," — a conditional rule on an element. It defines: when it activates (conditions on a variable value), how the element changes (style overrides), and whether the transition is immediate or gradual.",[152,211,212,215],{},[156,213,214],{},"Component"," — a special synoptic document containing reusable elements. A component can be instanced on other synoptics, and when the component is modified, all its instances update automatically.",[152,217,218,221,222,226,227,230,231,226,234,226,237,226,240,243],{},[156,219,220],{},"Component parameter"," — a variable declared on a component (e.g. ",[223,224,225],"code",{},"device",", ",[223,228,229],{},"label","). Animation conditions can reference parameters instead of specific tags; each instance provides concrete values (a tree node, a text, etc.), and at runtime the system resolves the parameter to the actual tag. This allows a single reusable blueprint across many similar devices. A parameter can be read through different accessors (",[223,232,233],{},".value",[223,235,236],{},".valid",[223,238,239],{},".path",[223,241,242],{},".message",").",[185,245],{},[188,247,249],{"id":248},"synoptics-listing","Synoptics listing",[152,251,252],{},"The listing page shows all synoptics organized in two sections:",[163,254,255,261],{},[166,256,257,260],{},[156,258,259],{},"Pages"," — displayed as a horizontal swipeable carousel;",[166,262,263,266],{},[156,264,265],{},"Components"," — displayed as a paginated grid.",[268,269,271],"h3",{"id":270},"search-and-sort","Search and sort",[163,273,274,280],{},[166,275,276,279],{},[156,277,278],{},"Search"," — filters synoptics by name across both pages and components;",[166,281,282,285],{},[156,283,284],{},"Sort"," — by most recent, A → Z, or Z → A.",[268,287,289],{"id":288},"create-a-new-synoptic","Create a new synoptic",[291,292,293,299,309],"ol",{},[166,294,295,296],{},"Click ",[156,297,298],{},"New synoptic",[166,300,301,302,305,306,308],{},"Enter a name, choose the type (",[156,303,304],{},"Page"," or ",[156,307,214],{},") and the canvas dimensions",[166,310,311],{},"Confirm to open the editor",[268,313,315],{"id":314},"synoptic-settings","Synoptic settings",[152,317,318],{},"From the listing, click the settings icon on a synoptic card to:",[163,320,321,327,333],{},[166,322,323,326],{},[156,324,325],{},"Rename"," the synoptic;",[166,328,329,332],{},[156,330,331],{},"Change the background color"," (persistent);",[166,334,335,338],{},[156,336,337],{},"Delete"," the synoptic.",[340,341,342],"warning",{},"Deleting a synoptic is permanent and cannot be undone.",[268,344,346],{"id":345},"image-library","Image library",[152,348,154,349,351],{},[156,350,346],{}," is a shared repository of images that can be used in synoptic elements (logos, plant photos, custom icons, backgrounds, etc.). Images uploaded to the library are available to all synoptics in the system.",[353,354,356],"h4",{"id":355},"how-to-open-it","How to open it",[152,358,359],{},"There are two entry points:",[163,361,362,371],{},[166,363,364,367,368,370],{},[156,365,366],{},"From the listing page"," — click the settings (gear) icon in the top-right toolbar and select ",[156,369,346],{}," from the menu;",[166,372,373,376],{},[156,374,375],{},"From the editor"," — when an image element is selected, click the image preview in the Style panel; the same library modal opens within the image picker.",[353,378,380],{"id":379},"what-you-can-do","What you can do",[152,382,383],{},"The library modal provides a two-tab interface:",[385,386,387,400],"table",{},[388,389,390],"thead",{},[391,392,393,397],"tr",{},[394,395,396],"th",{},"Tab",[394,398,399],{},"Description",[401,402,403,414],"tbody",{},[391,404,405,411],{},[406,407,408],"td",{},[156,409,410],{},"Library",[406,412,413],{},"Browse uploaded images as a grid of thumbnails with name and file size. Click an image to select it. Upload new files via click or drag-and-drop. Search by name. Hover over a thumbnail to reveal the delete button.",[391,415,416,421],{},[406,417,418],{},[156,419,420],{},"URL",[406,422,423],{},"Paste an external image URL with live preview. Useful for referencing images hosted elsewhere without uploading.",[152,425,426],{},"Supported upload formats: PNG, JPEG, WebP, GIF.",[340,428,429],{},"Deleting an image from the library is permanent. If the image is currently used by one or more synoptic elements, those elements will lose their image source.",[185,431],{},[188,433,176],{"id":434},"editor",[152,436,437],{},"The editor is the main authoring tool. It provides a full visual editing experience on an SVG canvas.",[268,439,441],{"id":440},"layout","Layout",[152,443,444],{},"The editor is organized as follows:",[163,446,447,453,459,465,471],{},[166,448,449,452],{},[156,450,451],{},"Canvas"," — the SVG drawing area, with optional grid and alignment guides;",[166,454,455,458],{},[156,456,457],{},"Action bar"," (bottom-left) — undo, redo, background color picker, link to the live view and (when there are unsaved changes) Save \u002F Cancel buttons;",[166,460,461,464],{},[156,462,463],{},"Tools dock"," (floating) — shape tools, selection and Hand tool. Can be dragged and snapped to the top, bottom or left edge of the canvas;",[166,466,467,470],{},[156,468,469],{},"Components dock"," (floating) — opens from the tools dock when you select the Components button, showing the available reusable components to drag onto the canvas;",[166,472,473,476],{},[156,474,475],{},"Dock panels"," (floating, appears on demand) — opens when you start editing an element's style (e.g. by double-clicking it). Contains the Animations, Parameters, Style, Transform, Layers and Events panels organized as resizable tab groups.",[268,478,480],{"id":479},"navigating-the-canvas","Navigating the canvas",[385,482,483,493],{},[388,484,485],{},[391,486,487,490],{},[394,488,489],{},"Action",[394,491,492],{},"Shortcut",[401,494,495,508,518,530,542,554],{},[391,496,497,502],{},[406,498,499],{},[156,500,501],{},"Zoom in\u002Fout",[406,503,504,507],{},[223,505,506],{},"Ctrl + scroll wheel"," or trackpad pinch",[391,509,510,515],{},[406,511,512],{},[156,513,514],{},"Pan",[406,516,517],{},"Drag on empty canvas area, or two-finger scroll",[391,519,520,525],{},[406,521,522],{},[156,523,524],{},"Fit to screen",[406,526,527],{},[223,528,529],{},"Ctrl + 0",[391,531,532,537],{},[406,533,534],{},[156,535,536],{},"Zoom in",[406,538,539],{},[223,540,541],{},"Ctrl + +",[391,543,544,549],{},[406,545,546],{},[156,547,548],{},"Zoom out",[406,550,551],{},[223,552,553],{},"Ctrl + -",[391,555,556,561],{},[406,557,558],{},[156,559,560],{},"Zoom 100%",[406,562,563],{},[223,564,565],{},"Ctrl + 1",[268,567,569],{"id":568},"adding-elements","Adding elements",[152,571,572],{},"In the tools dock, select a shape: rectangle, circle, triangle, polygon, line, icon, image or text. Then click (or click-and-drag) on the canvas to place the element.",[268,574,576],{"id":575},"selecting-and-moving-elements","Selecting and moving elements",[385,578,579,587],{},[388,580,581],{},[391,582,583,585],{},[394,584,489],{},[394,586,492],{},[401,588,589,599,611,623,633,643],{},[391,590,591,596],{},[406,592,593],{},[156,594,595],{},"Select",[406,597,598],{},"Click on an element",[391,600,601,606],{},[406,602,603],{},[156,604,605],{},"Multi-select",[406,607,608],{},[223,609,610],{},"Shift + Click",[391,612,613,618],{},[406,614,615],{},[156,616,617],{},"Select all",[406,619,620],{},[223,621,622],{},"Ctrl + A",[391,624,625,630],{},[406,626,627],{},[156,628,629],{},"Move",[406,631,632],{},"Drag a selected element",[391,634,635,640],{},[406,636,637],{},[156,638,639],{},"Nudge 1 px",[406,641,642],{},"Arrow keys",[391,644,645,650],{},[406,646,647],{},[156,648,649],{},"Nudge 10 px",[406,651,652],{},[223,653,654],{},"Shift + Arrow keys",[268,656,658],{"id":657},"resizing-elements","Resizing elements",[152,660,661],{},"Drag one of the 8 handles (corners and edges) on a selected element.",[385,663,664,674],{},[388,665,666],{},[391,667,668,671],{},[394,669,670],{},"Modifier",[394,672,673],{},"Behavior",[401,675,676,684,694,704],{},[391,677,678,681],{},[406,679,680],{},"Default",[406,682,683],{},"Maintains aspect ratio",[391,685,686,691],{},[406,687,688],{},[223,689,690],{},"Shift",[406,692,693],{},"Free resize without aspect ratio constraint",[391,695,696,701],{},[406,697,698],{},[223,699,700],{},"Alt",[406,702,703],{},"Resize from center (element grows symmetrically)",[391,705,706,711],{},[406,707,708],{},[223,709,710],{},"Shift + Alt",[406,712,713],{},"Free resize from center",[268,715,717],{"id":716},"editing-text","Editing text",[152,719,720,721,305,724,727],{},"Double-click a text element to enter inline editing mode. Press ",[223,722,723],{},"Enter",[223,725,726],{},"Esc"," to confirm.",[152,729,730],{},"With the Text tool active, a single click on a text element enters editing mode directly.",[268,732,734],{"id":733},"styling-elements","Styling elements",[152,736,737,738,741,742,745],{},"To open the ",[156,739,740],{},"Style"," panel for an element, ",[156,743,744],{},"double-click"," the element on the canvas. The dock panel opens with the editable properties of the selected element (and the default animation state pre-selected).",[152,747,748],{},"Available options depend on the element type and include: fill color, stroke, font size, opacity, rotation, border radius, shadows, and more.",[152,750,751],{},"The Style panel is organized in sections (Appearance, Stroke, Shadow, Text, Content) that you can collapse independently to focus on what you are editing.",[268,753,755],{"id":754},"adding-images","Adding images",[291,757,758,761,764,779],{},[166,759,760],{},"Select the Image tool from the tools dock",[166,762,763],{},"Click on the canvas to place the image (click-and-drag for custom size)",[166,765,766,767],{},"The image picker modal opens with two options:\n",[163,768,769,774],{},[166,770,771,773],{},[156,772,410],{}," — choose from uploaded images with search and drag-drop upload",[166,775,776,778],{},[156,777,420],{}," — enter an external URL with live preview",[166,780,781],{},"Confirm the selection",[353,783,785],{"id":784},"image-style-options","Image style options",[152,787,788],{},"With an image element selected, the Style panel shows:",[385,790,791,800],{},[388,792,793],{},[391,794,795,798],{},[394,796,797],{},"Option",[394,799,399],{},[401,801,802,823,838,848],{},[391,803,804,809],{},[406,805,806],{},[156,807,808],{},"Fit",[406,810,811,814,815,818,819,822],{},[223,812,813],{},"contain"," (default, preserves ratio), ",[223,816,817],{},"cover"," (fills space, may crop), ",[223,820,821],{},"fill"," (stretches to fit)",[391,824,825,830],{},[406,826,827],{},[156,828,829],{},"Alignment",[406,831,832,833,835,836],{},"Horizontal (left, center, right) and vertical (top, center, bottom) — available for ",[223,834,813],{}," and ",[223,837,817],{},[391,839,840,845],{},[406,841,842],{},[156,843,844],{},"Fit to ratio",[406,846,847],{},"Resizes the element to match the image's natural dimensions",[391,849,850,855],{},[406,851,852],{},[156,853,854],{},"Filters",[406,856,857],{},"Brightness, saturation, grayscale and blur sliders (non-destructive)",[268,859,861],{"id":860},"alignment-and-distribution","Alignment and distribution",[152,863,864],{},"With two or more elements selected, alignment buttons appear to:",[163,866,867,873],{},[166,868,869,872],{},[156,870,871],{},"Align"," — left, center, right, top, middle, bottom;",[166,874,875,878],{},[156,876,877],{},"Distribute"," — evenly spaced horizontally or vertically.",[268,880,882],{"id":881},"layer-management","Layer management",[152,884,154,885,888],{},[156,886,887],{},"Layers"," panel shows all elements as a list, from front (top) to back (bottom).",[163,890,891,897,902,908],{},[166,892,893,896],{},[156,894,895],{},"Reorder"," — drag a row to change the z-order;",[166,898,899,901],{},[156,900,325],{}," — right-click an element and choose \"Rename\" to assign a descriptive name;",[166,903,904,907],{},[156,905,906],{},"Visibility"," — toggle the eye icon to show\u002Fhide an element in the editor;",[166,909,910,913],{},[156,911,912],{},"Lock"," — toggle the lock icon to prevent selection and dragging;",[915,916,917],"tip",{},"Visibility and lock settings in the editor do not affect the realtime viewer.",[268,919,921],{"id":920},"canvas-settings","Canvas settings",[353,923,925],{"id":924},"background-color","Background color",[152,927,928],{},"Click the color picker button in the action bar (next to undo\u002Fredo) to change the canvas background color in realtime.",[353,930,932],{"id":931},"resize-canvas","Resize canvas",[152,934,935],{},"Open the resize dialog from the settings to change the canvas dimensions. Optionally rescale all existing elements proportionally.",[268,937,939],{"id":938},"dock-panel-layout","Dock panel layout",[152,941,942],{},"The right-side dock automatically adapts based on which panels you are using.",[385,944,945,958],{},[388,946,947],{},[391,948,949,952,955],{},[394,950,951],{},"Mode",[394,953,954],{},"When it activates",[394,956,957],{},"Visible panels",[401,959,960,974],{},[391,961,962,968,971],{},[406,963,964,967],{},[156,965,966],{},"Compact"," (default)",[406,969,970],{},"When working only with animations and parameters",[406,972,973],{},"Animations, Parameters",[391,975,976,981,984],{},[406,977,978],{},[156,979,980],{},"Full",[406,982,983],{},"When you open a property panel (e.g. double-click an element to open Style)",[406,985,986],{},"Animations, Parameters, Style, Transform, Layers, Events",[152,988,989],{},"Within either mode, the panels are organized as tabs in dockable groups. You can:",[163,991,992,998,1004],{},[166,993,994,997],{},[156,995,996],{},"Drag a tab"," to a different group to reorganize the layout;",[166,999,1000,1003],{},[156,1001,1002],{},"Resize"," the dividers between groups;",[166,1005,1006,1009],{},[156,1007,1008],{},"Switch tabs"," within a group to navigate between panels.",[152,1011,1012],{},"Your custom layout and the active mode are remembered across sessions.",[268,1014,1016],{"id":1015},"undo-and-redo","Undo and redo",[385,1018,1019,1027],{},[388,1020,1021],{},[391,1022,1023,1025],{},[394,1024,489],{},[394,1026,492],{},[401,1028,1029,1041],{},[391,1030,1031,1036],{},[406,1032,1033],{},[156,1034,1035],{},"Undo",[406,1037,1038],{},[223,1039,1040],{},"Ctrl + Z",[391,1042,1043,1048],{},[406,1044,1045],{},[156,1046,1047],{},"Redo",[406,1049,1050],{},[223,1051,1052],{},"Ctrl + Shift + Z",[268,1054,1056],{"id":1055},"saving","Saving",[152,1058,1059,1060,1063,1064,1067,1068,1071],{},"Press ",[223,1061,1062],{},"Ctrl + S"," or click the ",[156,1065,1066],{},"Save"," button that appears in the action bar when there are unsaved changes. Next to it, a ",[156,1069,1070],{},"Cancel"," button reverts the document to its last saved state.",[915,1073,1074,1075,1078],{},"Unsaved work is automatically preserved in the browser session. You can navigate between the editor and the realtime viewer (via the ",[156,1076,1077],{},"Live"," link in the action bar) without losing your changes — when you come back, the Save \u002F Cancel buttons reappear.",[185,1080],{},[188,1082,1084],{"id":1083},"animations","Animations",[152,1086,1087],{},"Animations bind realtime values to the visual appearance of elements.",[268,1089,1091],{"id":1090},"adding-an-animation","Adding an animation",[291,1093,1094,1097,1106,1109,1141,1147],{},[166,1095,1096],{},"Select an element on the canvas",[166,1098,1099,1100,1102,1103],{},"In the ",[156,1101,1084],{}," panel, click ",[156,1104,1105],{},"Add animation state",[166,1107,1108],{},"Name the state (e.g. \"Alarm active\")",[166,1110,1111,1112],{},"Define the conditions:\n",[163,1113,1114,1119,1122,1138],{},[166,1115,295,1116],{},[156,1117,1118],{},"+ Add condition",[166,1120,1121],{},"Use the tree picker to select a variable (tag)",[166,1123,1124,1125,226,1128,226,1131,226,1134,1137],{},"Choose an operator (e.g. ",[223,1126,1127],{},"=",[223,1129,1130],{},">",[223,1132,1133],{},"≥",[223,1135,1136],{},"between",")",[166,1139,1140],{},"Enter the threshold value",[166,1142,1143,1144,1146],{},"Click the palette icon on the state to open the ",[156,1145,740],{}," panel and define the visual override",[166,1148,1149],{},"Reorder states by priority: when multiple states match, the topmost one wins",[152,1151,154,1152,1154],{},[156,1153,680],{}," state (marked with a star) is always present and acts as the fallback when no other state matches.",[268,1156,1158],{"id":1157},"condition-logic","Condition logic",[163,1160,1161,1167],{},[166,1162,1163,1166],{},[156,1164,1165],{},"+ Add AND condition"," — adds another condition to the same group (all must be true);",[166,1168,1169,1172],{},[156,1170,1171],{},"+ Add OR group"," — adds an alternative group (at least one group must be true).",[268,1174,1176],{"id":1175},"cross-plant-conditions","Cross-plant conditions",[152,1178,1179],{},"The variable picker allows selecting tags from any available plant, not just the one associated with the synoptic. The realtime system automatically subscribes to all referenced plants.",[268,1181,1183],{"id":1182},"simulating-a-state","Simulating a state",[152,1185,1186],{},"Click the play icon on a state header to force that animation on the canvas visually, useful for verifying the appearance without waiting for actual conditions to trigger.",[268,1188,1190],{"id":1189},"test-console","Test console",[152,1192,154,1193,1196],{},[156,1194,1195],{},"Test Console"," lets you manually force values on tags (without affecting the field) and verify that animations activate correctly before saving.",[152,1198,1199,1200,1203],{},"To open it, right-click on the canvas and choose ",[156,1201,1202],{},"Advanced → Simulator",". The console appears as a floating, draggable panel.",[268,1205,1207],{"id":1206},"hover-and-press-events","Hover and press events",[152,1209,1210,1211,1214,1215,1218,1219,1221],{},"Each animation state can define additional style overrides for ",[156,1212,1213],{},"hover"," (mouse over) and ",[156,1216,1217],{},"press"," (mouse down) interactions. Configure these in the ",[156,1220,49],{}," panel.",[268,1223,1225],{"id":1224},"transitions","Transitions",[152,1227,1228],{},"Enable transitions on an animation state to apply style changes gradually. Configure the transition duration in milliseconds for smooth visual effects.",[185,1230],{},[188,1232,265],{"id":1233},"components",[152,1235,1236],{},"Components are reusable synoptic documents that can be instanced across multiple pages.",[268,1238,1240],{"id":1239},"creating-a-component-from-scratch","Creating a component from scratch",[291,1242,1243,1251,1254],{},[166,1244,1245,1246,1248,1249],{},"From the listing, click ",[156,1247,298],{}," and choose type ",[156,1250,214],{},[166,1252,1253],{},"Design the component in the editor as you would any synoptic",[166,1255,1256,1257,1260],{},"Declare parameters in the ",[156,1258,1259],{},"Parameters"," panel (top right of the editor)",[268,1262,1264],{"id":1263},"creating-a-component-from-selection","Creating a component from selection",[291,1266,1267,1270,1276,1279],{},[166,1268,1269],{},"Select two or more elements on a page canvas",[166,1271,1272,1273],{},"Right-click and choose ",[156,1274,1275],{},"Create Component",[166,1277,1278],{},"Name the component",[166,1280,1281],{},"The selected elements are replaced by an instance of the new component",[268,1283,1285],{"id":1284},"component-parameters","Component parameters",[152,1287,1288,1289,226,1291,243],{},"Parameters make components configurable per instance (e.g. ",[223,1290,225],{},[223,1292,229],{},[291,1294,1295,1302,1307],{},[166,1296,1297,1298,1301],{},"In the component editor, click ",[156,1299,1300],{},"+ Add parameter"," in the Parameters panel",[166,1303,1304,1305,1137],{},"Name the parameter (e.g. ",[223,1306,225],{},[166,1308,1309,1310,1313],{},"In animation conditions, choose ",[156,1311,1312],{},"Parameter"," mode in the variable picker to bind to the parameter instead of a specific tag",[353,1315,1317],{"id":1316},"parameter-accessors","Parameter accessors",[152,1319,1320],{},"A parameter can be read in four different ways without duplication:",[385,1322,1323,1332],{},[388,1324,1325],{},[391,1326,1327,1330],{},[394,1328,1329],{},"Accessor",[394,1331,399],{},[401,1333,1334,1343,1352,1361],{},[391,1335,1336,1340],{},[406,1337,1338,967],{},[223,1339,233],{},[406,1341,1342],{},"The live numeric value of the tag, or the literal text if the parameter is not a tag reference",[391,1344,1345,1349],{},[406,1346,1347],{},[223,1348,236],{},[406,1350,1351],{},"Boolean indicating whether the tag has a recent reading (true) or is offline\u002Finvalid (false)",[391,1353,1354,1358],{},[406,1355,1356],{},[223,1357,239],{},[406,1359,1360],{},"The string path of the node (e.g. \"PLANT > DEVICE > M:power\")",[391,1362,1363,1367],{},[406,1364,1365],{},[223,1366,242],{},[406,1368,1369],{},"The runtime alarm message of the tag (empty if no alarm)",[353,1371,1373],{"id":1372},"path-expressions-advanced","Path expressions (advanced)",[152,1375,1376,1377,1380],{},"For tags relative to a parameter, compose a path with the parameter as anchor and additional literal steps (e.g. ",[223,1378,1379],{},"[@device, \"ST\", \"INV Status\"]",") to bind a condition to a measure relative to the parameter device.",[268,1382,1384],{"id":1383},"instancing-a-component-on-a-page","Instancing a component on a page",[291,1386,1387,1393,1396,1402,1424],{},[166,1388,1389,1390,1392],{},"Open the ",[156,1391,469],{}," at the bottom of the editor",[166,1394,1395],{},"Drag a component onto the canvas, or use the tools dock",[166,1397,1398,1399,1401],{},"Select the instance and open the ",[156,1400,740],{}," panel",[166,1403,1099,1404,1406,1407],{},[156,1405,1259],{}," section, assign a value to each parameter:\n",[163,1408,1409,1418],{},[166,1410,1411,1414,1415,1137],{},[156,1412,1413],{},"Text"," — a literal value (e.g. ",[223,1416,1417],{},"INV-001",[166,1419,1420,1423],{},[156,1421,1422],{},"Tree reference"," — select a specific node from the tree (e.g. an Inverter device)",[166,1425,1426,1427],{},"Save with ",[223,1428,1062],{},[915,1430,1431,1432,1435],{},"If a parameter is not assigned or the tree reference is not found, the condition evaluates to ",[223,1433,1434],{},"false"," and the element stays in its default state.",[268,1437,1439],{"id":1438},"editing-a-component","Editing a component",[152,1441,1442],{},"Open the component from the synoptics listing and edit it like any other synoptic. All instances of the component automatically reflect the changes.",[268,1444,1446],{"id":1445},"detaching-a-component-instance","Detaching a component instance",[152,1448,1449,1450,1453],{},"Right-click on a component instance and choose ",[156,1451,1452],{},"Detach"," to replace it with the resolved individual elements. This breaks the link to the component definition.",[185,1455],{},[188,1457,182],{"id":1458},"realtime-viewer",[152,1460,1461],{},"The realtime viewer displays a synoptic with live data from the field.",[163,1463,1464,1467,1474,1480,1486],{},[166,1465,1466],{},"Elements react automatically based on their animation conditions and the current tag values;",[166,1468,1469,1470,1473],{},"The viewer supports ",[156,1471,1472],{},"multi-plant subscriptions",": a single synoptic can reference tags from multiple plants;",[166,1475,1476,1479],{},[156,1477,1478],{},"Component instances"," are fully resolved recursively, with parameters mapped to their assigned values;",[166,1481,1482,1485],{},[156,1483,1484],{},"Text interpolation"," replaces dynamic placeholders with live values;",[166,1487,1488],{},"Pan and zoom are available for navigation.",[915,1490,1491],{},"The realtime viewer loads any pending unsaved state from the editor session, so you can preview changes before saving.",[185,1493],{},[188,1495,1497],{"id":1496},"keyboard-shortcuts","Keyboard shortcuts",[268,1499,1501],{"id":1500},"file-and-history","File and history",[385,1503,1504,1512],{},[388,1505,1506],{},[391,1507,1508,1510],{},[394,1509,492],{},[394,1511,489],{},[401,1513,1514,1522,1530],{},[391,1515,1516,1520],{},[406,1517,1518],{},[223,1519,1062],{},[406,1521,1066],{},[391,1523,1524,1528],{},[406,1525,1526],{},[223,1527,1040],{},[406,1529,1035],{},[391,1531,1532,1540],{},[406,1533,1534,1536,1537],{},[223,1535,1052],{}," \u002F ",[223,1538,1539],{},"Ctrl + Y",[406,1541,1047],{},[268,1543,1545],{"id":1544},"selection-and-editing","Selection and editing",[385,1547,1548,1556],{},[388,1549,1550],{},[391,1551,1552,1554],{},[394,1553,492],{},[394,1555,489],{},[401,1557,1558,1567,1577,1587,1597,1609,1618,1626,1634,1644],{},[391,1559,1560,1564],{},[406,1561,1562],{},[223,1563,622],{},[406,1565,1566],{},"Select all elements",[391,1568,1569,1574],{},[406,1570,1571],{},[223,1572,1573],{},"Ctrl + C",[406,1575,1576],{},"Copy selected elements",[391,1578,1579,1584],{},[406,1580,1581],{},[223,1582,1583],{},"Ctrl + V",[406,1585,1586],{},"Paste copied elements",[391,1588,1589,1594],{},[406,1590,1591],{},[223,1592,1593],{},"Ctrl + D",[406,1595,1596],{},"Duplicate selected elements",[391,1598,1599,1606],{},[406,1600,1601,1536,1603],{},[223,1602,337],{},[223,1604,1605],{},"Backspace",[406,1607,1608],{},"Delete selected elements",[391,1610,1611,1615],{},[406,1612,1613],{},[223,1614,726],{},[406,1616,1617],{},"Exit current tool, then deselect \u002F close panels",[391,1619,1620,1624],{},[406,1621,1622],{},[223,1623,642],{},[406,1625,639],{},[391,1627,1628,1632],{},[406,1629,1630],{},[223,1631,654],{},[406,1633,649],{},[391,1635,1636,1641],{},[406,1637,1638],{},[223,1639,1640],{},"Ctrl + ]",[406,1642,1643],{},"Bring to front",[391,1645,1646,1651],{},[406,1647,1648],{},[223,1649,1650],{},"Ctrl + [",[406,1652,1653],{},"Send to back",[268,1655,829],{"id":1656},"alignment",[385,1658,1659,1667],{},[388,1660,1661],{},[391,1662,1663,1665],{},[394,1664,492],{},[394,1666,489],{},[401,1668,1669,1679,1689,1699,1709,1719],{},[391,1670,1671,1676],{},[406,1672,1673],{},[223,1674,1675],{},"Ctrl + Shift + L",[406,1677,1678],{},"Align left",[391,1680,1681,1686],{},[406,1682,1683],{},[223,1684,1685],{},"Ctrl + Shift + C",[406,1687,1688],{},"Align center (horizontal)",[391,1690,1691,1696],{},[406,1692,1693],{},[223,1694,1695],{},"Ctrl + Shift + R",[406,1697,1698],{},"Align right",[391,1700,1701,1706],{},[406,1702,1703],{},[223,1704,1705],{},"Ctrl + Shift + T",[406,1707,1708],{},"Align top",[391,1710,1711,1716],{},[406,1712,1713],{},[223,1714,1715],{},"Ctrl + Shift + M",[406,1717,1718],{},"Align middle (vertical)",[391,1720,1721,1726],{},[406,1722,1723],{},[223,1724,1725],{},"Ctrl + Shift + B",[406,1727,1728],{},"Align bottom",[268,1730,1732],{"id":1731},"canvas-navigation","Canvas navigation",[385,1734,1735,1743],{},[388,1736,1737],{},[391,1738,1739,1741],{},[394,1740,492],{},[394,1742,489],{},[401,1744,1745,1753,1761,1769,1777],{},[391,1746,1747,1751],{},[406,1748,1749],{},[223,1750,529],{},[406,1752,524],{},[391,1754,1755,1759],{},[406,1756,1757],{},[223,1758,565],{},[406,1760,560],{},[391,1762,1763,1767],{},[406,1764,1765],{},[223,1766,541],{},[406,1768,536],{},[391,1770,1771,1775],{},[406,1772,1773],{},[223,1774,553],{},[406,1776,548],{},[391,1778,1779,1785],{},[406,1780,1781,1784],{},[223,1782,1783],{},"Space"," (hold)",[406,1786,1787],{},"Pan the canvas while dragging",[268,1789,1791],{"id":1790},"tools","Tools",[152,1793,1794],{},"Press a single letter (no modifiers) to switch tool:",[385,1796,1797,1807],{},[388,1798,1799],{},[391,1800,1801,1804],{},[394,1802,1803],{},"Key",[394,1805,1806],{},"Tool",[401,1808,1809,1819,1828,1838,1848,1858,1868,1878,1888],{},[391,1810,1811,1816],{},[406,1812,1813],{},[223,1814,1815],{},"V",[406,1817,1818],{},"Hand (pan)",[391,1820,1821,1826],{},[406,1822,1823],{},[223,1824,1825],{},"M",[406,1827,595],{},[391,1829,1830,1835],{},[406,1831,1832],{},[223,1833,1834],{},"R",[406,1836,1837],{},"Rectangle",[391,1839,1840,1845],{},[406,1841,1842],{},[223,1843,1844],{},"E",[406,1846,1847],{},"Circle",[391,1849,1850,1855],{},[406,1851,1852],{},[223,1853,1854],{},"G",[406,1856,1857],{},"Triangle",[391,1859,1860,1865],{},[406,1861,1862],{},[223,1863,1864],{},"P",[406,1866,1867],{},"Polygon",[391,1869,1870,1875],{},[406,1871,1872],{},[223,1873,1874],{},"L",[406,1876,1877],{},"Line",[391,1879,1880,1885],{},[406,1881,1882],{},[223,1883,1884],{},"I",[406,1886,1887],{},"Icon",[391,1889,1890,1895],{},[406,1891,1892],{},[223,1893,1894],{},"T",[406,1896,1413],{},[185,1898],{},[188,1900,1902],{"id":1901},"frequently-asked-questions","Frequently asked questions",[268,1904,1906],{"id":1905},"how-do-i-switch-between-the-editor-and-the-realtime-viewer","How do I switch between the editor and the realtime viewer?",[152,1908,1909,1910,1913],{},"You can navigate freely between the two pages without losing your work. Unsaved changes are preserved in the browser session. The ",[156,1911,1912],{},"Save \u002F Cancel"," buttons in the action bar reappear when you return if there are pending changes.",[268,1915,1917],{"id":1916},"can-a-synoptic-reference-tags-from-multiple-plants","Can a synoptic reference tags from multiple plants?",[152,1919,1920],{},"Yes. The variable picker allows selecting tags from any available plant. The realtime system automatically subscribes to all referenced plants.",[268,1922,1924],{"id":1923},"what-happens-if-i-modify-a-component","What happens if I modify a component?",[152,1926,1927],{},"All instances of that component on every page are updated automatically. You do not need to update each instance individually.",[268,1929,1931],{"id":1930},"how-do-i-test-animations-without-live-data","How do I test animations without live data?",[152,1933,1934,1935,1937],{},"Use the ",[156,1936,1195],{}," to manually set variable values and see how animations react. You can also click the play icon on an animation state to force-preview it on the canvas.",[268,1939,1941],{"id":1940},"what-is-the-difference-between-a-page-and-a-component","What is the difference between a page and a component?",[152,1943,1944,1945,1948,1949,1952],{},"A ",[156,1946,1947],{},"page"," is a standalone synoptic meant for direct visualization. A ",[156,1950,1951],{},"component"," is a reusable building block that can be instanced on pages (or other components), with configurable parameters for each instance.",{"title":1954,"searchDepth":1955,"depth":1956,"links":1957},"",2,3,[1958,1959,1969,1990,1999,2010,2011,2018],{"id":190,"depth":1955,"text":191},{"id":248,"depth":1955,"text":249,"children":1960},[1961,1962,1963,1964],{"id":270,"depth":1956,"text":271},{"id":288,"depth":1956,"text":289},{"id":314,"depth":1956,"text":315},{"id":345,"depth":1956,"text":346,"children":1965},[1966,1968],{"id":355,"depth":1967,"text":356},4,{"id":379,"depth":1967,"text":380},{"id":434,"depth":1955,"text":176,"children":1970},[1971,1972,1973,1974,1975,1976,1977,1978,1981,1982,1983,1987,1988,1989],{"id":440,"depth":1956,"text":441},{"id":479,"depth":1956,"text":480},{"id":568,"depth":1956,"text":569},{"id":575,"depth":1956,"text":576},{"id":657,"depth":1956,"text":658},{"id":716,"depth":1956,"text":717},{"id":733,"depth":1956,"text":734},{"id":754,"depth":1956,"text":755,"children":1979},[1980],{"id":784,"depth":1967,"text":785},{"id":860,"depth":1956,"text":861},{"id":881,"depth":1956,"text":882},{"id":920,"depth":1956,"text":921,"children":1984},[1985,1986],{"id":924,"depth":1967,"text":925},{"id":931,"depth":1967,"text":932},{"id":938,"depth":1956,"text":939},{"id":1015,"depth":1956,"text":1016},{"id":1055,"depth":1956,"text":1056},{"id":1083,"depth":1955,"text":1084,"children":1991},[1992,1993,1994,1995,1996,1997,1998],{"id":1090,"depth":1956,"text":1091},{"id":1157,"depth":1956,"text":1158},{"id":1175,"depth":1956,"text":1176},{"id":1182,"depth":1956,"text":1183},{"id":1189,"depth":1956,"text":1190},{"id":1206,"depth":1956,"text":1207},{"id":1224,"depth":1956,"text":1225},{"id":1233,"depth":1955,"text":265,"children":2000},[2001,2002,2003,2007,2008,2009],{"id":1239,"depth":1956,"text":1240},{"id":1263,"depth":1956,"text":1264},{"id":1284,"depth":1956,"text":1285,"children":2004},[2005,2006],{"id":1316,"depth":1967,"text":1317},{"id":1372,"depth":1967,"text":1373},{"id":1383,"depth":1956,"text":1384},{"id":1438,"depth":1956,"text":1439},{"id":1445,"depth":1956,"text":1446},{"id":1458,"depth":1955,"text":182},{"id":1496,"depth":1955,"text":1497,"children":2012},[2013,2014,2015,2016,2017],{"id":1500,"depth":1956,"text":1501},{"id":1544,"depth":1956,"text":1545},{"id":1656,"depth":1956,"text":829},{"id":1731,"depth":1956,"text":1732},{"id":1790,"depth":1956,"text":1791},{"id":1901,"depth":1955,"text":1902,"children":2019},[2020,2021,2022,2023,2024],{"id":1905,"depth":1956,"text":1906},{"id":1916,"depth":1956,"text":1917},{"id":1923,"depth":1956,"text":1924},{"id":1930,"depth":1956,"text":1931},{"id":1940,"depth":1956,"text":1941},"Create and manage interactive vector diagrams bound to realtime data","md",null,{},{"icon":145},"\u002Fen\u002Fconfigurator\u002Fsynoptics",{"title":142,"description":2025},"T2f5QuQHgjtXve_9JuH2aPrYAc5JH9lxm7hmf6v2I2w",[2034,2027],{"title":137,"path":2035,"stem":139,"description":2036,"icon":140,"children":-1},"\u002Fen\u002Fconfigurator\u002Fwizardplants","Configure and manage the plant hierarchy tree",1783074682621]