LOGO! 8 Web Editor: Displaying Analog Values and Trends

Overview

The LOGO! 8 Web Editor (LWE) ships with a built-in HTTP server that lets the controller publish a customizable dashboard for operators, technicians, and remote monitoring. Two of the most requested features in field deployments are the ability to display scaled analog values with decimal precision and to render a historical trend of process variables such as pH, temperature, level, or flow. The original LOGO! 8.2 firmware only published integer values, which forces the engineer to scale the variable so that a single integer step corresponds to the required display resolution. LOGO! 8.3, presented by Siemens in October 2020, added a native trend widget and improved numeric formatting in the LWE page, but the underlying LOGO! program still executes in 32-bit signed integer arithmetic.

This reference walks through a complete, working implementation for both the legacy 8.2 path and the current 8.3 path. It covers raw-input scaling, integer trickery for sub-unit resolution, message-text configuration, LWE page layout, native trend setup, a custom HTML5 sparkline workaround, verification steps, and a fault matrix. The example uses an aquarium control application (4–20 mA temperature transmitter, pH probe, level sensor) but the techniques apply to any LOGO! 8 deployment.

Prerequisites

• LOGO! 8 base module, family 6ED1052-1xxx08-0BAx, with firmware 8.2 or 8.3 installed
• LOGO! Soft Comfort (LSC) V8.2 or V8.3 for program development and download
• LOGO! Web Editor (LWE) V1.0.x for firmware 8.2, or V1.1.x or later for firmware 8.3 trend support
• Analog input module: AM2 (6ED1055-1MA00-0BA0) for 0–10 V / 4–20 mA, AM2 RTD (6ED1055-1MD00-0BA0) for PT100/PT1000, or a base module with onboard AI
• Transducer wired to the AI, e.g. 4–20 mA temperature transmitter scaled 0–100 °C
• Ethernet connectivity between the LOGO! and the host PC (default IP 192.168.0.10, configurable via the WBM)
• Browser: current Chrome, Edge, or Firefox (the LWE page is HTML5-compliant and was tested with Chromium-based releases)
• MicroSD card, FAT32, 2 GB to 32 GB, for storing the web project on the LOGO!

LOGO! 8 Hardware and Firmware Background

LOGO! 8 (product family 6ED1052) is a logic module with an integrated Web server accessible at http://<ip>/. The firmware revision determines which web features are exposed:

Confirm the firmware under LOGO! > Diagnostics > Module Information in LSC, or from the web front-end under System Information > LOGO! Information. The firmware article collection for LOGO! 8 is available on the Siemens Industry Online Support portal.

Analog Scaling Fundamentals

LOGO! analog inputs return a raw integer count. The AM2 module reports a raw integer on a 0–1000 scale for both 0–10 V and 4–20 mA modes:

The general scaling equation to convert a raw input to engineering units is:

For a 4–20 mA temperature transmitter with 0–100 °C output, the equation simplifies to:

For a raw input of 418 the result is 41.8 °C. The original engineering note in the field used an algebraic shortcut of the form (Raw * 1.25) - 250 and then divided by 10, but this introduces an unnecessary multiplication and a subtraction where a single division suffices. The corrected scaling keeps the FBD leaner and avoids integer overflow on transducers that span a wider raw range.

Sub-unit Resolution

Because the LOGO! cannot store fractional digits, the integer placed in the variable memory (VM) address must be pre-multiplied by the display resolution. To display temperature in 0.1 °C steps, store the value in tenths of a degree:

To display 41.8 °C the variable holds 418. The web page or message text then positions the decimal point one digit from the right (e.g. "41.8"). For pH with 0.1 resolution, store the pH multiplied by 10 (e.g. pH 7.2 → 72). For two-decimal displays (rare on LOGO!), multiply by 100.

Overflow Considerations

The 32-bit signed integer ceiling is 2 147 483 647. A 0.1-unit scaled value reaches this ceiling at 214 748 364.7 engineering units, which is rarely an issue for aquarium-grade signals. A 0.01-unit scaled value reaches it at 21 474 836.47, still high. The risk appears when the engineer accidentally multiplies by 1000 (three-decimal resolution) and the underlying raw value is high. Always sanity-check the worst-case integer against the 32-bit ceiling before finalising the program.

Step 1: Scale the Raw Analog Value in the LOGO! Program

Open the program in LOGO! Soft Comfort. Use the Analog Amplifier block (B024) or the Analog Arithmetic Trigger to convert the AI raw value into the scaled integer stored in a VM address.

1. From the toolbar insert Special > Analog > Analog Amplifier (B024) onto the FBD sheet.
2. Connect the analog input (e.g. AI1 = IW0) to the input of the amplifier.
3. Open the block properties:
   • Sensor type: 0–10 V or 4–20 mA (must match the wiring)
   • Lower raw: 0
   • Upper raw: 1000
   • Lower engineering: 0
   • Upper engineering: 1000
4. Wire the amplifier output to a marker or to a VM word (e.g. VW100). The value is the engineering reading in 0.1 °C units if the physical range is 0–100.0 °C.
5. Add a scaling correction if a custom offset is needed (e.g. pH probe zero at 7.0). For an offset, subtract after the amplifier:
   • Insert Special > Analog > Analog Arithmetic Trigger or a basic Subtraction block.
   • Subtract the offset in the same 0.1-unit scale (7.0 → 70).
6. For pH, the sensor is typically 0–14 pH across 4–20 mA. Set Amplifier range to 0–140 in the engineering fields; the integer in VM is then pH × 10 (e.g. 72 for pH 7.2).

Verify the program in LSC with the simulation tool. Connect a virtual potentiometer to AI1, drag the slider through 0–1000, and confirm the value in VW100 follows linearly. Save the program and download to the LOGO! before proceeding.

Step 2: Configure a Message Text for Decimal Display (LOGO! 8.2 Path)

For firmware 8.2, the Web Editor itself cannot render decimal places on its custom pages. The recommended workaround is to add a Message Text (B025) on the LOGO! TDE display with a forced decimal position. The same VM address is later exposed to the LWE page.

1. Insert Special > Message Texts > Message Text (B025) onto the FBD sheet.
2. Open the block and configure the text body, e.g.:

   Temperature: 12.3 °C
   pH:         7.0
   Level:     85 %

3. Select each numeric placeholder, right-click Properties > Number of decimal places, and choose 1, 2, or 3.
4. Assign the VM address to each placeholder, e.g. VW100 for temperature, VW102 for pH.
5. Mark the message text as Acknowledge required = No if the LWE page is the primary view; this avoids user intervention on the LOGO! display.

Because the LOGO! TDE display supports decimal places when configured this way, the controller has the formatted text string. In the LWE page on 8.2, use a Static text widget for the label and an Numeric widget bound to VW100 to show the integer value, then add a static decimal suffix (".1 °C" where the engineer manually interprets the position). For one-decimal display this is usually sufficient.

Step 3: Build the Web Page in LOGO! Web Editor (LWE)

Open LWE and create a new project. Each project is a single HTML page that is downloaded to the LOGO! through the SD card or the Web-Based Management (WBM) upload interface.

1. Start LWE and select File > New Project. Give the project a name (e.g. aquarium). The project is exported later as a folder containing index.html and the user files.
2. Set the LOGO! IP in the project settings. The default port is 80.
3. Add elements to the page. The LWE toolbox contains:
   • Text – static label
   • Numeric display – reads a VW address and shows an integer or formatted value
   • Numeric input – writes to a VW address from the browser
   • Digital display – reads a discrete bit (M, I, Q, B)
   • Button – writes a discrete bit
   • Image – static or state-driven
   • Trend – LWE 1.1+ only, plots a VW address over time
   • Custom HTML – embeds user-supplied HTML/JS for advanced widgets
4. Drop a Text widget and write "Temperature".
5. Drop a Numeric display widget to the right of the label. Bind it to VW100. Enable Show decimal and select 1 decimal place if the LWE 1.1+ editor is being used.
6. Repeat for pH (VW102) and level (VW104).
7. Style the widgets: 14–18 pt font, dark text on a light background for legibility in greenhouse or outdoor enclosures. The LWE theme editor lets you pick background colour, font, and widget border.
8. Save the project. LWE produces a folder with a project file, an HTML file, and (for 8.3+) a JavaScript bundle.

Transfer the project to the LOGO!:

1. Insert an SD card (FAT32) in the LOGO!.
2. From the WBM (http://<ip>), navigate to Web Editor > Project Upload and upload the exported .zip.
3. Wait for the LOGO! to reboot the web server. The new page becomes the default at http://<ip>/logo or http://<ip>/web depending on the firmware revision.
4. Confirm the page loads from a browser on the same subnet.

Step 4: Add a Trend View to the Web Page

The trend widget is available in LWE 1.1+ and is supported on LOGO! 8.3 (the supported baseline per the LWE release notes). It cannot be used on firmware 8.2 unless the firmware is upgraded.

1. Drop a Trend widget from the LWE toolbox onto the page.
2. Bind the trend to a single VW address (e.g. VW102 for pH). The widget draws a line chart of the last N samples.
3. Configure the trend parameters:

4. Save and upload the project.

Internally, the trend relies on the LOGO! web server keeping a ring buffer of the configured VM address. The buffer depth in the LOGO! firmware is fixed; configure LWE to use the supported range to avoid truncation. If the buffer depth is exceeded the oldest sample is overwritten.

Multiple Variables on a Single Page

The LWE trend widget plots one VM address per widget. To display two related values (e.g. pH and temperature) on the same page, drop two Trend widgets stacked vertically, each bound to its own VW address, with consistent Y-axis units and refresh intervals. The LWE editor does not allow multi-trace overlays inside a single widget.

Advanced: Custom HTML5 Sparkline Approach (Firmware 8.2 Workaround)

If a native trend is required on firmware 8.2 (for example, when the controller cannot be upgraded for validation reasons), the LWE editor supports custom HTML elements. The trick is to host a small JavaScript library in the project folder, have the page poll the LOGO! JSON API, and render an in-page SVG sparkline. This is more involved than the 8.3 native trend but is fully supported by the LWE container and degrades gracefully on older browsers.

1. In the LWE project, add a Custom HTML element. Inside the element, insert a <svg> tag with a fixed viewBox:

   <svg id="phTrend" viewBox="0 0 300 60" preserveAspectRatio="none"></svg>

2. Add a small JavaScript block that:
   • Polls the LOGO! JSON endpoint (e.g. /logo/inputs.json on firmware 8.2) every 5 s
   • Parses the VW102 value
   • Appends it to an in-memory array, capped at 120 samples
   • Redraws the SVG polyline

The following minimal example renders a 60-sample rolling line for VM word 102 (pH × 10):

<script>
const svg = document.getElementById('phTrend');
const NS = 'http://www.w3.org/2000/svg';
const buf = [];
const MAX = 60;
async function poll() {
  try {
    const r = await fetch('/logo/inputs.json', {cache:'no-store'});
    const j = await r.json();
    const v = Number(j.VW102) || 0;
    buf.push(v);
    if (buf.length > MAX) buf.shift();
    draw();
  } catch (e) { /* keep last frame */ }
}
function draw() {
  while (svg.firstChild) svg.removeChild(svg.firstChild);
  if (buf.length < 2) return;
  const min = Math.min.apply(null, buf);
  const max = Math.max.apply(null, buf);
  const range = (max - min) || 1;
  const stepX = 300 / (MAX - 1);
  const pts = buf.map((v, i) => {
    const x = (i * stepX).toFixed(2);
    const y = (60 - ((v - min) / range) * 58 - 1).toFixed(2);
    return x + ',' + y;
  }).join(' ');
  const poly = document.createElementNS(NS, 'polyline');
  poly.setAttribute('points', pts);
  poly.setAttribute('fill', 'none');
  poly.setAttribute('stroke', '#0066cc');
  poly.setAttribute('stroke-width', '1.5');
  svg.appendChild(poly);
}
setInterval(poll, 5000);
poll();
</script>

This pattern is conceptually identical to the sparkline visualisation technique used in Excel: a compact in-cell (or in-element) line that conveys the shape of recent data without axes, grids, or legends. The same approach can be replicated for any number of variables by repeating the SVG element and the buffer per VM address.

Verification, Commissioning, and Best Practices

After the project is uploaded, perform the following checks before handing the panel over to operations:

1. Read-back test: Apply a known current (4.00 mA, 12.00 mA, 20.00 mA) to the analog input. The web page should show the expected engineering value, with the correct number of decimal places and the correct sign.
2. Range sweep: Sweep the input from 0% to 100% in 10% steps. The web page reading should follow within ±1 LSB of the scaled integer (e.g. ±0.1 °C for 0.1-unit scaling).
3. Buffer test (8.3 trend): Set the input to a step change (e.g. switch from 4 mA to 20 mA) and confirm the trend updates within one refresh interval. Verify the trend's Y-axis range does not clip the data.
4. Web page on multiple browsers: Open the page on Chrome, Edge, and Firefox. Verify the widgets render correctly, the trend updates, and there are no JavaScript errors in the dev console (F12).
5. CPU load check: Open the LOGO! WBM Diagnostics > Cycle Time. The trend polling adds HTTP traffic; if the cycle time climbs above 80% of the configured watchdog, increase the refresh interval or reduce the number of widgets.
6. Power cycle test: Power off and back on the LOGO!. The web project should reload from the SD card automatically.
7. Network test: Disconnect and reconnect Ethernet. The page should recover without a manual browser refresh.
8. Retention test: For processes that require the last value after power-off, mark the VM area as retentive in the LSC program properties and re-verify after a power cycle.

Field Notes

• Always scale first, display second. Bind the web widget to the scaled VM address, not to the raw AI. The web widget only does formatting, not unit conversion.
• Pick the smallest decimal count the application needs. One decimal place on temperature is plenty for an aquarium; two places on pH is conventional (e.g. 7.0, 7.2). Excessive decimals push the integer range and may overflow the 32-bit signed space when multiplied by a wide raw range.
• Reserve a VM block for the HMI. Place all web-bound variables in a contiguous VM area (e.g. VW100–VW200) and document it. This makes future edits to the LWE project much easier.
• Use retentive VM only when the process needs the last value after power-off. For a trend, retentive VM keeps the buffer through power cycles. For a live reading, non-retentive is fine.
• Trend depth is finite. On firmware 8.3, the built-in buffer is suitable for a few minutes at 1 s sample rate, or one hour at 60 s sample rate. For longer historical data, use the LOGO! Modbus TCP server and a SCADA package, or log the VM values to the SD card in the user program.
• Keep the LOGO! firmware current. Siemens ships maintenance releases (e.g. 8.3.1 and later) that fix browser compatibility issues. Check the Siemens Industry Online Support portal for the latest version before commissioning.
• Test on the actual operator browser. Some corporate environments ship locked-down browsers that disable JavaScript or block inline SVG. Validate the LWE page on the exact hardware/OS/browser combination that will be used in production.
• Document the LWE project file alongside the LSC program. The web project is a separate artifact and should be versioned in the same way as the PLC program, with a short README that lists the VM map.

SCADA and Modbus TCP Extension

For trends longer than the LWE buffer, the LOGO! 8 ships with a Modbus TCP server on port 502 (configurable in the WBM). VM areas are addressable as Modbus holding registers starting at offset 0. A SCADA package (WinCC, Ignition, or any Modbus client) can poll the same VM words and build a longer-term historian on the SCADA side, while the LWE page continues to provide the operator dashboard. The sparkline rendering pattern is the same: the SCADA hosts a buffer and a polyline, exactly as the HTML5 workaround above.

Troubleshooting Matrix

Frequently Asked Questions