網頁上的動態圖形界面就是使用—GLG Graphics Builder圖形編輯器以交互方式創建的。通過該創建器，開發人員能繪制圖片對象、定義屬性以及為使用實時數據進行動態化的繪圖添加動態效果和定義資源。

除了能從零開始創建繪圖外，圖片創建程序還能提供預定義部件調色板，如dials and meters, graphs以及process control symbols，這些都能通過拖放功能添加到繪制中。創建程序還能使用戶定義自定義的圖標，并把它們作為可重復使用的控件添加到調色板中。

借助圖形構建器，從簡單的儀表盤到復雜的可視化圖形以及自定義的人機界面（HMI）屏幕，創建和維護圖形的工作都能在一個交互式的點擊操作環境中完成。無需編程，就可以在構建器中輕松編輯圖形。一旦保存了更新后的圖形，它就可以直接供圖形服務器使用，而無需重新編譯源代碼

如所說，GLG繪制為獨立的屏幕分辨率并能在運行時調整大小。根據客戶端屏幕的大小，相同的繪制能用于轉化不同分辨率的圖像。

使用圖形構建器創建的圖形代表了應用程序網頁在運行時顯示的動態圖形。例如，要創建一個顯示幾個圖表和儀表的自定義移動儀表盤，你只需在圖形構建器中打開一個新圖形，從調色板中添加幾個圖表和儀表，為它們命名以便在運行時訪問數據，然后保存該圖形即可。

除了簡單的儀表盤之外，還可以在圖形構建器中創建復雜的自定義圖形顯示，并部署到網頁上，如在線演示中所示。

在使用圖形構建器時，你還可以更改對象屬性，編輯頁面上的對象布局，添加自定義標簽和注釋，或者利用構建器的漸變、陰影和透明效果繪制自定義裝飾元素。

構建 AJAX 儀表盤的另一種方法是在單個 HTML 頁面上組合多個小部件，如 GLG AJAX 儀表盤演示中所示。每個獨立的小部件都使用其自己的服務器端 servlet，并且可以作為可重復使用的組件部署在多個網頁上。

除了簡單的數字報表，精細的自定義圖片顯示能在創建程序中制作并能在網頁上進行部署，就如所說。

運行時，圖片服務器會加載GLG繪圖并使用它生成動態圖像，在處理每個圖像請求前用當前數據更新繪圖。繪圖包含了所有圖片對象的定義與它們的動態操作。當加載繪圖時，它被反復用來在沒有重新制作圖片請求的情況下生成網頁圖像。

當一個客戶端處理一個圖像請求時，圖片服務器使用當前數據創建了一個繪圖的截圖。一個圖像請求可能包含能定義圖像大小的參數、在刻度盤中顯示的值、圖片的標題或其它自定義屬性。例如，在進程控制演示文件中圖像請求包含show_pipes參數。如果該參數被設置為1，生成的圖像會顯示連接到儲罐的管道。圖像生成參數會使用標準的URL參數語法傳送到圖片服務器。

生成圖像之前，圖片服務器會通過設置繪圖資源使用當前數據更新該繪圖。當在運行中使用SetResource() API程序通過servlet創建與訪問繪圖時，資源將在圖片創建程序中定義。

當更新繪圖時，servlet可通過觸發CreateImage() API程序生成圖像。這個簡單的圖片服務器程序會在所有對象的當前動態狀態下監控轉化所有對象的復雜任務。

查看一個顯示動態生成的圖像的URL范例。重新加載以查看新數據或更改URL的寬度/高度參數以更改圖像大小。一個"&show_pipes=1"參數可添加到URL以激活管道顯示。在一個應用程序中，如所說，一個JaveScript記時程序會用于定時地重新加載圖像以顯示新數據。

在ASP.NET環境中，圖形服務器通過與 Windows IIS 配合使用的自定義 HTTP 處理程序進行部署。在 JSP 環境中，圖形服務器作為 Java Servlet 進行部署，可與任何兼容的 Java2EE 應用服務器配合使用。

會提供示例和示例，應用程序開發人員可以根據應用需求對其進行定制。例如，Servlet 和處理程序可以在所有 Servlet 和處理程序實例之間共享一個圖形，或者為每個 Servlet 會話或 HTTP 處理程序請求創建圖形的單獨實例。當使用自定義圖形時，可以修改 Servlet 代碼來設置圖形中定義的特定于應用程序的資源，以及處理特定于應用程序的用戶交互。

圖形處理程序的ASP.NET版本使用 Glg.NetServer.dll，而 JSP 版本使用 GlgServer.jar 文件。這兩個文件都提供了一個類庫，其中包含 GLG 工具包的對象和渲染引擎。該類庫提供了 C# 和 Java 文檔中描述的 GLG 標準 API 和擴展 API。GLG 標準 API 提供了用于訪問資源的方法，以便用實時數據更新圖形。擴展 API 提供了用于高級功能的方法，例如以編程方式創建對象或查詢圖形中定義的所有資源列表。例如，如 GIS 和空中交通管制演示中所示，可在運行時用于創建數量可變的代表飛機的動態圖標。

服務器端應用程序可以使用任何偏好的數據連接 API，從諸如可編程邏輯控制器（PLC）或過程數據庫等任何數據源中查詢數據。或者，數據也可以由 HTML 或 JavaScript 通過圖像 URL 的參數來提供。

Servlet可通過設置使用GLG SetResource程序的繪圖資源用新數據更新繪圖。當創建繪圖時，用于動態化具備數據的繪圖的資源將在圖片創建程序中進行定義。

例如，在進程控制演示文件中使用的繪圖里，一個名為"Heater"的對象擁有一個名為"HeaterLevel"能控制加熱罐填充度的資源。當繪圖被用于servlet中時，servlet可通過使用名為"Heater/HeaterLevel"的資源更新填充度。操作如下：

    SetDResource( "Heater/HeaterLevel", heater_level_var );

資源的使用可幫助您將圖片從程序邏輯中分離出來。應用程序可簡單地設置一個名為"Heater/HeaterLevel"邏輯資源，并且GLG圖片引擎會監控對象圖片轉化的所有底層細節。

除了生成動態圖像，servlet可通過處理基于AJAX的請求以處理用戶互動。這些請求通常用于對象選擇、消息提示以及用戶輸入，如使用鼠標在繪圖中點擊按鍵。這些功能都在進程控制與其它演示文件中進行了說明。

處理用戶互動，JavaScript被用于應用程序的網頁中以將onclick and onmousemove事件添加到圖像中。當用戶點擊圖像或將鼠標指針移動到圖像之上時，在腳本中會觸發事件處理程序。事件處理程序會將對象選擇的AJAX請求發送到圖片服務器，并將鼠標坐標作為請求參數進行傳送。圖片服務器會根據鼠標坐標通過尋找選定對象處理請求。Servlet會在服務器端處理選項或將選項信息返回給客戶端用于處理。

客戶端可使用選擇請求到彈出消息提示的輸出、顯示選定對象的名稱或執行數據下鉆操作。例如，當使用鼠標選定對象時，進程控制演示可顯示具有對象數據的對話。當鼠標移動到繪圖中已命名對象時，可顯示工具提示。如果按下繪圖底部的Show 3D Pipes鍵，可在圖像中顯示連接到儲罐與閥門的管道。

工具提示與對象選擇事件通過在服務器端的GLG圖片服務器引擎進行處理，并且不需要在客戶端的瀏覽器中創建的圖像地圖或矢量對象。此項技術可在忽略與已使用圖像地圖相關的HTML運行限制的情況下處理大量矢量對象。

查看生成圖像與處理用戶互動請求的GLG Servlet的所有源代碼。

因為在沒有圖像地圖內置到HTML的情況下將在服務器端處理選擇與消息提示事件，所以當繪圖中對象的幾何外形被改變時，不需重新生成HTML頁面。

當繪圖包含動態移動圖標時（如的展示），服務器端對選擇事件的處理只是實用性選項。在這種情況下，不可能為圖標選擇生成的靜態圖像地圖，因為圖標改變了它們的位置。由于運行限制，每當圖標移動時使用AJAX動態地生成圖像地圖將是不切實際的。這就使服務器端選擇處理成為了唯一的實用選項。

Interactive Graphical Editor

The dynamic graphical screens displayed on web pages are created interactively using a graphical editor - the GLG Graphics Builder. Using the Builder, a developer can draw graphical objects, define their properties, as well as attach dynamics and define resources for animating the drawing with real-time data. The drawing is saved into a file and used by the Graphics Server for image generation.
In addition to creating drawings from scratch, the Graphics Builder provides palettes of pre-built widgets, such as dials and meters, graphs and process control symbols, which can be added to the drawing using Drag and Drop. The Builder also allows the user to define custom symbols and add them to a palette as reusable components.

With the help of the Builder, the job of creating and maintaining graphics, from simple dashboards to complex visualizations and custom HMI screens, is done in an interactive, point-and-click environment. The graphics may be easily edited in the Builder with no programming involved. Once the updated drawing is saved, it is ready to be used by the Graphics Server without recompiling the source code.

The GLG drawings are screen-resolution independent and may be scaled at run-time, as shown in the demos. The same drawing may be used to render images of various resolutions depending on the size of the client's screen.

Custom AJAX Dashboards

The drawings created using the Graphics Builder represent the dynamic graphics displayed on the application's web pages at run time. For example, to create a custom AJAX Dashboard displaying a few graphs and meters you can simply open a new drawing in the Graphics Builder, add a few graphs and meters to it from a palette, name them for run-time data access and save the drawing.

While in the Graphics Builder, you can also change object properties, edit the object layout on the page, add custom labels and annotations or draw custom decorations using the Builder's gradient, shadow and transparency effects.

An alternative way to build an AJAX Dashboard is to combine several widgets on a single HTML page, as shown in the GLG AJAX Dashboard demo. Each self-contained widget is using its own server-side servlet and it may be deployed as a reusable component on multiple web pages.

In addition to simple dashboards, elaborate custom graphical displays may be created in the Builder and deployed on a web page, as shown in the demos.

Run-Time Image Generation

At run-time, the Graphics Server loads the GLG drawing and uses it to generate dynamic images, updating the drawing with the current data before processing each image request. The drawing contains definitions of all graphical objects and their dynamic actions. Once the drawing is loaded, it is used to generate web images over and over without the overhead of recreating the graphics on every request, resulting in superior server performance.

When a client issues an image request, the Graphics Server creates a snapshot image of the drawing using the current data. An image request may contain parameters that define an image size, a value to be displayed in a dial, a title for a graph or other custom attributes. For example, in the process control demo the image request contains the show_pipes parameter. If this parameter is set to 1, the generated image will display pipes connecting the tanks. The image generation parameters are passed to the Graphics Server using the standard URL parameter syntax.

Before generating an image, the Graphics Server updates the drawing with the current data by setting the drawing's resources. The resources are defined in the Graphics Builder when the drawing is created and accessed by the servlet at run time using the SetResource() API method.

When the drawing is updated, the servlet generates an image by simply invoking the CreateImage() API method. This single method of the Graphics Server takes care of the complicated task of rendering all objects in the drawing in their current dynamic state.

Click here to see an example of a URL showing a dynamically generated image. Reload the page to see new data or change the width/height parameters of the URL to change image size. A "&show_pipes=1" parameter may be appended to the URL to activate the pipe display. In an application, a JavaScript timer may be used to reload the image periodically to display new data as shown in the demos.

Servlet Customization

In the JSP environment, the Graphics Server is deployed as a GLG Servlet - a 100% pure Java servlet that may be used with any compliant Java2EE Application server.

The source code of the servlet is provided and may be customized by the application developers according to the application requirements. For example, the servlet may share one drawing between all servlet instances or create a separate instance of the drawing for each servlet session.

When a custom drawing is used, the servlet code may be modified to set the application-specific resources defined in the drawing, as well as handle an application-specific user interaction.

The GLG Servlet uses the GlgServer.jar class library that contains GLG Toolkit's object and rendering engine. The class library provides both the GLG Standard and Extended APIs described in the documentation of the GLG Java classes. The GLG Standard API provides methods for accessing resources to update the drawing with real-time data. The Extended API provides methods for advanced features, such as creating objects programmatically or querying a list of all resources defined in the drawing. For example, the Extended API may be used at run time to create a variable number of dynamic icons representing airplanes as shown in the GIS and AirTraffic Control demos.

Dynamic Data Supply

In an application, the servlet can query data from any data source, such as a PLC or process database, using JDBC, Java OPC or any other preferred data connectivity API. Alternatively, the data may be supplied by the HTML or JavaScript via the parameters of the image URL.

The servlet updates the drawing with the new data by setting the drawing's resources using GLG's SetResource methods. The resources for animating the drawing with data are defined in the Graphics Builder when the drawing is created.

For example, in the drawing used in the process control demo, an object named "Heater" has a resource named "HeaterLevel" that controls the fill level of the heater's tank. When the drawing is used in the servlet, the servlet updates the fill level by using the "Heater/HeaterLevel" resource name as follows:

    SetDResource( "Heater/HeaterLevel", heater_level_var );The use of resources helps to separate graphics from the programming logic. The application simply sets a logical resource named "Heater/HeaterLevel", and the GLG's graphics engine takes care of all low-level details of rendering the objects' graphics.

AJAX-Based User Interaction

In addition to generating dynamic images, the servlet may handle user interaction by processing AJAX-based requests for object selection, tooltips and user input, such as pressing buttons in the drawing with the mouse. These features are demonstrated in the process control and other demos.

To handle user interaction, JavaScript is used in the application's web pages to add onclick and onmousemove event handlers to the image. When the user clicks on the image or moves the mouse over it, an event handler is invoked in the script. The event handler sends an object selection AJAX request to the Graphics Server, passing the mouse coordinates as parameters of the request. The Graphics Server processes the request by finding an object selected by the mouse coordinates. The servlet may process the selection on the server side or return the selection information back to the client for processing.

The client may use the output of the selection request to popup a tooltip, display the name of the selected object or execute a drill-down action. For example, the process control demo displays a dialog with the object's data when the object is selected with the mouse. A tooltip is displayed when the mouse is moved over a named object in the drawing. If the Show 3D Pipes button at the bottom of the drawing is pressed, the pipes connecting the tanks and valves will be displayed in the image.

The tooltips and object selection events are processed by the GLG Graphics Server's engine on the server side, with no image maps or vector objects created in the browser on the client side. This technique handles a large number of vector objects in the drawing without the HTML performance limitations related to a number of used image maps.

Click here to see the full source code of the GLG Servlet for generating images and handling user interaction requests.

Since the selection and tooltip events are processed on the server side with no image maps embedded in HTML, the HTML pages do not need to be regenerated when the geometry of the objects in the drawing is changed.

The server-side processing of selection events is the only practical option when the drawing contains dynamic moving icons, as shown in the Airtraffic Control Demo. In this case, generating static image maps for the icon selection is simply impossible, since the icons change their position. Using AJAX to generate image maps dynamically every time the icon moves, would be also impractical due to the performance limitations. This leaves the server-side selection processing as the only practical alternative.