Proposal: JavaScript browser view to replace styles.xsl (#620)

CMakeLists.txt

@@ -2,7 +2,7 @@
 set(AGENT_VERSION_MAJOR 2)
 set(AGENT_VERSION_MINOR 8)
 set(AGENT_VERSION_PATCH 0)
-set(AGENT_VERSION_BUILD 3)
+set(AGENT_VERSION_BUILD 4)
 set(AGENT_VERSION_RC "")
 
 # This minimum version is to support Visual Studio 2019 and C++ feature checking and FetchContent

agent_lib/CMakeLists.txt

@@ -214,6 +214,7 @@ set(AGENT_SOURCES
 
 # src/printer HEADER_FILE_ONLY
 
+        "${SOURCE_DIR}/printer/html_printer.hpp"
         "${SOURCE_DIR}/printer/json_printer.hpp"
         "${SOURCE_DIR}/printer/json_printer_helper.hpp"
         "${SOURCE_DIR}/printer/printer.hpp"
@@ -223,8 +224,9 @@ set(AGENT_SOURCES
 
 # src/printer SOURCE_FILES_ONLY
 
-        "${SOURCE_DIR}/printer/xml_printer.cpp"
+        "${SOURCE_DIR}/printer/html_printer.cpp"
         "${SOURCE_DIR}/printer/json_printer.cpp"
+        "${SOURCE_DIR}/printer/xml_printer.cpp"
 
 # src/source HEADER_FILE_ONLY
 
@@ -287,7 +289,6 @@ set(AGENT_SOURCES
         "${SOURCE_DIR}/sink/rest_sink/request.hpp"
         "${SOURCE_DIR}/sink/rest_sink/response.hpp"
         "${SOURCE_DIR}/sink/rest_sink/rest_service.hpp"
-        "${SOURCE_DIR}/sink/rest_sink/rest_request_helpers.hpp"
         "${SOURCE_DIR}/sink/rest_sink/routing.hpp"
         "${SOURCE_DIR}/sink/rest_sink/server.hpp"
         "${SOURCE_DIR}/sink/rest_sink/session.hpp"

demo/Dockerfile

@@ -43,6 +43,7 @@ COPY --chown=agent:agent \
     /mtconnect/config/
 COPY --chown=agent:agent \
    ./demo/styles/styles.xsl \
+   ./demo/styles/viewer.html \
    /mtconnect/data/styles/
 
 USER agent

demo/agent/agent.cfg

@@ -6,14 +6,15 @@ Port = 5001
 JsonVersion = 2
 
 MinCompressFileSize = 10k
+DataPath = ../..
 
 Files {
   schemas {
-    Path = ../../schemas
+    Path = schemas
     Location = /schemas/
   }
   styles {
-    Path = ../../styles
+    Path = styles
     Location = /styles/
   }
   Favicon {
@@ -35,8 +36,15 @@ Sinks {
 #  }
 }
 
-DevicesStyle { Location = /styles/styles.xsl }
-StreamsStyle { Location = /styles/styles.xsl }
+# The style sheets are disabled autmatically when the browser view is active. commnenting
+# them out here suppresses the warning on startup.
+
+# DevicesStyle { Location = /styles/styles.xsl }
+# StreamsStyle { Location = /styles/styles.xsl }
+
+# Browsers that list text/html first get this page, which reads the agent's XML or JSON with
+# JavaScript. The stylesheet entries above stay for XML clients that still support XSLT.
+BrowserView = styles/viewer.html
 
 Adapters {
   OKUMA {

demo/agent/agent.mac

@@ -7,17 +7,19 @@ JsonVersion = 2
 
 MinCompressFileSize = 10k
 
+DataPath = ../../
+
 Files {
   schemas {
-    Path = ../../schemas
+    Path = schemas
     Location = /schemas/
   }
   styles {
-    Path = ../../styles
+    Path = styles
     Location = /styles/
   }
   Favicon {
-      Path = ../../styles/favicon.ico
+      Path = styles/favicon.ico
       Location = /favicon.ico
   }
 }
@@ -30,14 +32,16 @@ Directories {
   }
 }
 
+# DevicesStyle { Location = /styles/styles.xsl }
+# StreamsStyle { Location = /styles/styles.xsl }
+
+BrowserView = styles/viewer.html
+
 Sinks {
 #  MqttService {
 #  }
 }
 
-DevicesStyle { Location = /styles/styles.xsl }
-StreamsStyle { Location = /styles/styles.xsl }
-
 Adapters {
   OKUMA {
     Port = 7878

demo/compose/agent/agent.cfg

@@ -37,8 +37,10 @@ Directories {
   }
 }
 
-DevicesStyle { Location = /styles/styles.xsl }
-StreamsStyle { Location = /styles/styles.xsl }
+# DevicesStyle { Location = /styles/styles.xsl }
+# StreamsStyle { Location = /styles/styles.xsl }
+
+BrowserView = styles/viewer.html
 
 Adapters {
   OKUMA {

demo/compose/agent/agentmqtt.cfg

@@ -38,8 +38,10 @@ Sinks {
   }
 }
 
-DevicesStyle { Location = /styles/styles.xsl }
-StreamsStyle { Location = /styles/styles.xsl }
+# DevicesStyle { Location = /styles/styles.xsl }
+# StreamsStyle { Location = /styles/styles.xsl }
+
+BrowserView = styles/viewer.html
 
 Adapters {
   OKUMA {
@@ -54,5 +56,5 @@ Adapters {
 
 logger_config {
   output = file /mtconnect/log/agent.log
-  level = info
+  level = warning
 }

demo/compose/compose.yaml

@@ -17,6 +17,7 @@ services:
       - ./agent/agent.cfg:/mtconnect/config/agent.cfg
       - ../agent/Devices.xml:/mtconnect/config/Devices.xml
       - ../styles/styles.xsl:/mtconnect/data/styles/styles.xsl
+      - ../styles/viewer.html:/mtconnect/data/styles/viewer.html
       - ./log:/mtconnect/log
       - ../twin:/mtconnect/data/demo/twin
     ports:

demo/compose/compose_mqtt.yaml

@@ -25,6 +25,7 @@ services:
       - ./agent/agentmqtt.cfg:/mtconnect/config/agent.cfg
       - ../agent/Devices.xml:/mtconnect/config/Devices.xml
       - ../styles/styles.xsl:/mtconnect/data/styles/styles.xsl
+      - ../styles/viewer.html:/mtconnect/data/styles/viewer.html
       - ./log:/mtconnect/log
       - ../twin:/mtconnect/data/demo/twin
     ports:

demo/styles/viewer.html

@@ -0,0 +1,102 @@
+<!DOCTYPE xhtml>
+<!--
+  Copyright 2009-2026, AMT – The Association For Manufacturing Technology ("AMT")
+  All rights reserved.
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>MTConnect Agent</title>
+    <link href="/styles/bootstrap.min.css" rel="stylesheet">
+    <link href="/styles/styles.css" rel="stylesheet">
+    <link href="/styles/viewer.css" rel="stylesheet">
+    <script type="module" src="/styles/mtc-app.js"></script>
+    <script id="mtconnect-data" type="application/xml">@MTCONNECT_CONTENT@</script>
+  </head>
+  <body>
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <a class="navbar-brand" href="https://mtconnect.org" target="_blank" rel="noopener noreferrer">
+            <img alt="MTConnect" src="/styles/MTConnect_Logo.png">
+          </a>
+        </div>
+        <ul class="nav navbar-nav">
+          <li id="tab-probe"><a>Probe</a></li>
+          <li id="tab-current"><a>Current</a></li>
+          <li id="tab-sample"><a>Sample</a></li>
+        </ul>
+        <form id="query" class="navbar-form navbar-left">
+          <div class="form-group">
+            <input id="path" type="text" class="form-control mtc-path" placeholder="Path">
+            <input id="from" type="text" class="form-control mtc-small" placeholder="From">
+            <input id="count" type="text" class="form-control mtc-small" placeholder="Count">
+            <button id="fetch" type="submit" class="btn">Fetch</button>
+            <button id="autorefresh" type="button" class="btn">Autorefresh</button>
+            <select id="format" class="form-control mtc-format" aria-label="Raw format">
+              <option value="xml">XML</option>
+              <option value="json">JSON</option>
+            </select>
+            <button id="raw" type="button" class="btn">Raw</button>
+            <button id="help" type="button" class="btn">?</button>
+          </div>
+        </form>
+        <ul class="nav navbar-nav navbar-right mtc-links">
+          <li><a href="/twin/index.html?device=Mazak">Mazak Twin</a></li>
+          <li><a href="/twin/index.html?device=OKUMA">Okuma Twin</a></li>
+        </ul>
+      </div>
+    </nav>
+
+    <div class="container-fluid page-container">
+      <div id="main-container" class="table-responsive stickytable-container"></div>
+    </div>
+
+    <footer class="mtc-footer">
+      Copyright 2009-2026, AMT &ndash; The Association For Manufacturing Technology. Licensed under the
+      <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank" rel="noopener noreferrer">Apache License, Version 2.0</a>.
+    </footer>
+
+    <dialog id="help-dialog">
+      <button type="button" class="mtc-close" data-close aria-label="Close">&times;</button>
+      <h3>MTConnect Agent</h3>
+      <p>The agent receives data from one or more devices and publishes it as XML or JSON. This page reads that data and shows it as a grid.</p>
+      <h4>Probe, Current, Sample</h4>
+      <p>Probe shows the structure of the devices and their data items. Current shows the latest value of each data item. Sample shows a sequence of values with their timestamps.</p>
+      <h4>Path</h4>
+      <p>An XPath filter such as <code>//DataItem[@type="AVAILABILITY"]</code>. The agent returns an error if the path matches nothing.</p>
+      <h4>From and Count</h4>
+      <p>The agent keeps a buffer of observations identified by sequence number. From and Count choose which ones Sample returns.</p>
+      <h4>Raw</h4>
+      <p>Requests the document from the agent again and shows it as text, in the format chosen next to the button.</p>
+      <h4>Note</h4>
+      <p>Conditions appear as Condition rows with a value of NORMAL, WARNING, FAULT or UNAVAILABLE.</p>
+      <h4>MTConnect model</h4>
+      <p>The names in these documents are defined by the MTConnect SysML model. Browse it at <a id="model-link" href="https://model.mtconnect.org/" target="_blank" rel="noopener noreferrer">model.mtconnect.org</a>. The model source is on <a href="https://github.com/mtconnect/mtconnect_sysml_model" target="_blank" rel="noopener noreferrer">GitHub</a>.</p>
+      <p>For more information on MTConnect, see <a href="https://mtconnect.org" target="_blank" rel="noopener noreferrer">MTConnect.org</a>.</p>
+      <h4>About</h4>
+      <p>The MTConnect C++ Agent is Copyright 2009-2026, AMT &ndash; The Association For Manufacturing Technology, and is licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank" rel="noopener noreferrer">Apache License, Version 2.0</a>.</p>
+      <p>This page is based on a UI originally developed by <a href="https://mriiot.com" target="_blank" rel="noopener noreferrer">MRIIOT</a>, your agile digital transformation partner. License of the original UI: MIT.</p>
+    </dialog>
+
+    <dialog id="raw-dialog" class="mtc-wide">
+      <button type="button" class="mtc-close" data-close aria-label="Close">&times;</button>
+      <pre id="raw-text"></pre>
+    </dialog>
+
+    <button id="gotoTop" title="Go to top"><img alt="Go to top" src="/styles/icon-up.webp"></button>
+  </body>
+</html>

src/mtconnect/agent.cpp

@@ -58,6 +58,7 @@
 #include "mtconnect/entity/xml_parser.hpp"
 #include "mtconnect/logging.hpp"
 #include "mtconnect/observation/observation.hpp"
+#include "mtconnect/printer/html_printer.hpp"
 #include "mtconnect/printer/json_printer.hpp"
 #include "mtconnect/printer/xml_printer.hpp"
 #include "mtconnect/sink/rest_sink/file_cache.hpp"
@@ -124,6 +125,12 @@ namespace mtconnect {
     m_printers["xml"] = make_unique<printer::XmlPrinter>(m_pretty, m_validation);
     m_printers["json"] = make_unique<printer::JsonPrinter>(jsonVersion, m_pretty, m_validation);
 
+    if (auto view = GetOption<string>(options, config::BrowserView); view)
+    {
+      m_printers["html"] =
+          make_unique<printer::HtmlPrinter>(*view, m_printers["xml"].get(), m_pretty, m_validation);
+    }
+
     if (!m_schemaVersion)
     {
       m_xmlParser->parseFile(m_deviceXmlPath,

src/mtconnect/configuration/agent_config.cpp

@@ -800,6 +800,7 @@ namespace mtconnect::configuration {
                 {configuration::ConfigPath, StringList()},
                 {configuration::ServerIp, "0.0.0.0"s},
                 {configuration::Devices, "Devices.xml"s},
+                {configuration::BrowserView, ""s},
                 {configuration::BufferSize, int(DEFAULT_SLIDING_BUFFER_EXP)},
                 {configuration::MaxAssets, int(DEFAULT_MAX_ASSETS)},
                 {configuration::CheckpointFrequency, 1000},

src/mtconnect/configuration/config_options.hpp

@@ -47,6 +47,7 @@ namespace mtconnect {
     DECLARE_CONFIGURATION(DisableAgentDevice);
     DECLARE_CONFIGURATION(AllowPut);
     DECLARE_CONFIGURATION(AllowPutFrom);
+    DECLARE_CONFIGURATION(BrowserView);
     DECLARE_CONFIGURATION(BufferSize);
     DECLARE_CONFIGURATION(CheckpointFrequency);
     DECLARE_CONFIGURATION(Devices);