Resolving LOGO! Web Editor Clock Display Failures on AWS

Problem Description

Siemens LOGO! Web Editor (LWE) version 1.2.0 contains a clock widget that displays correctly when the generated visualization is hosted on the LOGO! on-board web server or on the engineering PC, but fails when the same LWE project is exported and deployed to Amazon Web Services (S3 + CloudFront, EC2, or AWS Amplify Hosting). The widget renders only the static format template (for example ddd. HH:mm:ss or yyyy-MM-dd) and never shows live time from the LOGO! real-time clock (RTC). All other LWE widgets in the same project - digital inputs, analog inputs, network variables, counters - continue to update correctly through their bound AWS IoT Things.

The defect is reproducible across multiple users, confirmed on LWE 1.2.0, and is independent of the LOGO! firmware revision. The single observable fingerprint is that the LOGO! clock widget is the only visualization element whose IoT Thing name selector is greyed out in the LWE property panel. This is the diagnostic differentiator from any general AWS connectivity fault.

Symptom Matrix

Affected Versions and Hardware

Root Cause Analysis

The LWE clock widget does not subscribe to any MQTT topic in the AWS IoT data plane. Every value widget that exposes an IoT Thing selector is compiled by LWE into a JavaScript subscription addressed to a user-selected IoT Thing. The clock widget has no such hook. Its generated handler is approximately:

// Generated by LWE 1.2.0 - clock widget (simplified)
function updateClock() {
  const now = new Date();        // <-- uses the host's Date object
  document.getElementById('clk1').innerText =
    formatMask(now, 'ddd. HH:mm:ss');
}
setInterval(updateClock, 1000);

The LWE help manual documents this widget in sections 2.6.5.1 "Inserting Clock" and 2.6.5.2 "Clock Properties". Those sections describe only the static configuration (time zone, format mask, language) and contain no reference to IoT Thing subscription, confirming the widget is designed to be populated locally by the LOGO! on-board web server.

When the same generated code is uploaded to AWS, the host machine is an EC2 instance, an S3 static endpoint, or a CloudFront distribution - none of which has a direct path to the LOGO! on-board web server. The widget therefore has no authoritative time source. The browser falls back to its own Date() object, but the LWE-generated handler is bound to a relative path that resolves only inside the LOGO! web server's virtual file system. When that path 404s on AWS, the widget renders empty; the browser leaves the static format string in place.

Why Every Other Widget Still Works

Every value widget that does expose an IoT Thing selector is compiled into a subscription pattern similar to:

// Generated by LWE 1.2.0 - analog input (simplified)
const thingName = document.getElementById('aiThing').value;
const client = AWSIoTDataSdk.deviceClient;
client.subscribe(`${thingName}/analog/value`);
client.on('message', (topic, payload) => {
  if (topic === `${thingName}/analog/value`) {
    document.getElementById('ai1').innerText = JSON.parse(payload).value;
  }
});

Because the MQTT broker is reachable over the public Internet via the AWS IoT Core endpoint, these widgets continue to update regardless of where the HTML is hosted. The clock widget has no such fallback path.

Prerequisites for the Workarounds

• LOGO! 8 or 8.3 module with on-board Ethernet, firmware ≥ 1.82.04 (recommended)
• LOGO! Web Editor 1.2.0 installed on the engineering PC
• AWS account with AWS IoT Core enabled in the target region
• AWS IoT Thing created for the LOGO! with certificate, private key, and policy attached
• LOGO! configured as an MQTT client to AWS IoT (native or via LOGO! CMR2020/2040)
• Static IP or hostname reachable by the LOGO! and by the web browser

Solution A - Host the LWE Output on the LOGO! On-Board Web Server (Recommended for Single-Site Deployments)

This is the configuration that matches the original LOGO! design intent and requires zero code changes.

1. Open the LWE project in LOGO! Web Editor 1.2.0.
2. Select Project > Publish to LOGO!.
3. On the LOGO! base module, navigate to Tools > Web Server Access and enable the on-board web server.
4. Set a non-trivial web server password. The default is empty; do not leave it empty in any production deployment.
5. Confirm the LOGO! IP address (e.g., 192.168.1.10) via the LOGO! menu Network.
6. From any browser, connect to http://192.168.1.10/<projectname> using the configured credentials.

The on-board web server in LOGO! 8 FW ≥ 1.82 supports up to 8 concurrent web sessions (earlier firmware: 3). Do not expose the LOGO! web server directly to the public Internet. If remote access is required, place a reverse proxy (nginx, Apache, or AWS ALB) in front with TLS, IP allow-listing, and rate limiting.

Solution B - Inject a JavaScript Override in the LWE Project

Use this option when the LWE project must remain hosted on AWS for cross-site accessibility. Open the LWE page that contains the clock widget, expand the JavaScript panel in the property editor, and paste the override:

// Override for LWE 1.2.0 LOGO! clock widget on AWS-hosted projects
// Replace 'clk1' with the widget ID shown in the LWE property panel
(function () {
  const widget = document.getElementById('clk1');
  if (!widget) return;
  const fmt = new Intl.DateTimeFormat('en-GB', {
    weekday: 'short',
    hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
  });
  setInterval(() => {
    widget.innerText = fmt.format(new Date());
  }, 1000);
})();

This forces the widget to render the browser's local time. If you need the LOGO! device's RTC value (not the viewing client's clock), publish the time from the LOGO! to AWS IoT and subscribe via JavaScript:

// Subscribe to a LOGO! marker word that carries the RTC
const THING_NAME = 'logo8-line-01';     // <-- match your IoT Thing
const TOPIC = `dt/${THING_NAME}/rtc`;
const client = AWSIoTDataSdk.deviceClient;
client.subscribe(TOPIC);
client.on('message', (topic, payload) => {
  if (topic !== TOPIC) return;
  document.getElementById('clk1').innerText =
    new TextDecoder().decode(payload);
});

Drive the marker with a LOGO! program block that copies the RTC into a network variable (NI/NQ) once per second. See the LOGO! Soft Comfort online help, block "Analog Ramp" or "Wipe Clock" for the RTC field assignments.

Solution C - Synchronize the AWS Host to the Amazon Time Sync Service

If the host is an EC2 instance or an ECS container, configure chrony against the Amazon Time Sync Service endpoint at 169.254.169.254. The endpoint is reachable from every EC2 instance over the link-local address without any VPC configuration.

1. Install chrony:

sudo yum install -y chrony          # Amazon Linux 2 / 2023
sudo apt-get install -y chrony      # Ubuntu 22.04+
sudo systemctl enable --now chronyd

2. Confirm chrony is using the Amazon reference:

chronyc sources -v
# 210 Number of sources = 1
# MS Name/IP address         Stratum Poll Reach LastRx Last sample
# ^* 169.254.169.254                4   6   377    31   -23us[  -29us] +/-  421us

3. Verify offset:

chronyc tracking | grep -E 'Reference ID|Stratum|System time'
# Reference ID : C01A8F71 (169.254.169.254)
# Stratum     : 4
# System time  : 0.000000234 seconds fast of NTP time

For sub-microsecond accuracy on supported instance types (e.g., c6in, c7i, m6id), enable the local reference clock capability introduced by AWS in 2022. Verify with cat /sys/devices/system/clocksource/clocksource0/current_clocksource and confirm tsc or kvm-clock is active.

For static S3 / CloudFront deployments, no server time exists. Solution B (browser-side JavaScript override) is the only viable option.

AWS IoT Core Configuration for the LOGO!

The LWE project expects an IoT Thing to exist in AWS IoT Core. The minimal configuration is:

1. Create a Thing: AWS IoT > Manage > Things > Create things. Name it to match the LWE widget configuration (e.g., logo8-line-01).
2. Create a certificate with Auto-generate a new certificate. Download the certificate, public key, and private key - the private key is shown only once.
3. Attach a policy. The minimal policy is:

{
  "Version": "2012-10-17",
  "Statement": [
    { "Effect": "Allow", "Action": "iot:Connect",
      "Resource": "arn:aws:iot:<region>:<acct>:client/logo8-line-01" },
    { "Effect": "Allow", "Action": "iot:Subscribe",
      "Resource": "arn:aws:iot:<region>:<acct>:topicfilter/dt/logo8-line-01/*" },
    { "Effect": "Allow", "Action": "iot:Receive",
      "Resource": "arn:aws:iot:<region>:<acct>:topic/dt/logo8-line-01/*" },
    { "Effect": "Allow", "Action": "iot:Publish",
      "Resource": "arn:aws:iot:<region>:<acct>:topic/dt/logo8-line-01/*" }
  ]
}

4. On the LOGO!, configure MQTT client: Tools > MQTT. Enter the AWS IoT endpoint (visible under Settings in the AWS IoT console, format <id>-ats.iot.<region>.amazonaws.com), port 8883, and the certificate files.
5. Enable Publish to AWS for each NI/NQ variable you want to expose to LWE.

Distinguishing the LWE Clock Defect from an AWS SDK Clock Skew

A secondary fault that presents with a similar visual signature is clock skew between the browser's system clock and the AWS IoT endpoint. The Amplify JavaScript SDK contains an automatic correctClockSkew routine that recovers from skew by adjusting the signing timestamp. When that routine fails, the MQTT connection is refused and every widget goes blank - not just the clock.

If all widgets are blank, suspect the clock-skew defect first. The behavior is independent of the LWE clock-widget generator and must be resolved separately. Reference material: Clock Skew Fix on the AWS Front-End Web & Mobile blog and the related Amplify bug report. For the underlying time synchronization on EC2, see the EC2 time-sync documentation and the CloudWatch time-sync management post.

Verification Procedure

1. Rebuild the LWE project and re-publish to the AWS target bucket, Amplify app, or EC2 instance.
2. Open the deployed URL in Chrome with DevTools console open and the Network tab filtered by WS.
3. Confirm the AWS IoT WebSocket connection line shows status 101 Switching Protocols and remains open.
4. Toggle a digital input bound to a Thing and confirm the widget updates within 1-2 seconds.
5. Confirm the clock widget either:

• Displays live time from the LOGO! (Solution A), or
• Displays live time from the injected JavaScript (Solution B), or
• Displays time from the EC2 instance's chrony-synced clock (Solution C).

6. Verify time-zone handling: LOGO! firmware < 1.82.04 does not auto-apply DST. If the site observes DST, the JavaScript override in Solution B must compensate, or publish the corrected timestamp from the LOGO! program.
7. On the EC2 host, run chronyc tracking and confirm System time offset is below 1 ms.
8. Capture the browser console log for the first 60 seconds after load and verify no ClockSkewError or SignatureDoesNotMatch entries appear.

Field-Commissioning Notes

LOGO! RTC Drift and Battery

The LOGO! 8 RTC uses a 1 Hz tick from the internal oscillator and is buffered by a CR2032 cell when main power is absent. Battery life is specified at 5 years typical at 25 °C. After a power cycle, allow at least 60 seconds for the RTC to stabilize before relying on the displayed time. If the clock jumps or freezes, replace the CR2032 cell with the LOGO! powered down; the LOGO! preserves the program in non-volatile memory.

Daylight Saving Time

LOGO! firmware < 1.82.04 treats the RTC as a non-DST time. Set the LOGO! clock to UTC and convert in the JavaScript override using Intl.DateTimeFormat with timeZone: 'Europe/Berlin' (or the equivalent target zone). Firmware ≥ 1.82.04 added an explicit DST flag, but LWE 1.2.0 does not surface this flag to the visualization layer.

Time Zone of the Hosting Region

EC2 instances inherit their time zone from the AMI. Amazon Linux 2023 defaults to UTC; Ubuntu 22.04 defaults to UTC on AWS. The JavaScript override should format the displayed time using the target audience's zone, not the server's zone. Use Intl.DateTimeFormat with an explicit timeZone option rather than relying on the server's TZ environment variable.

Concurrent Connection Limits

AWS IoT Core enforces a default soft limit of 100 concurrent connections per account per region, raised on request. The LWE-generated web client opens one MQTT-over-WebSocket connection per browser tab. For dashboards with multiple operators, the connection count can climb quickly. Use AWS IoT Core lifecycle events and a single shared connection served by a thin backend if the operator count exceeds 20-30.

CORS for the Static Web App

If the LWE web app is hosted on S3 + CloudFront and connects to AWS IoT Core, the WebSocket origin is the S3/CloudFront URL. Configure a CORS rule on the bucket:

<CORSConfiguration>
 <CORSRule>
  <AllowedOrigin>*</AllowedOrigin>
  <AllowedMethod>GET</AllowedMethod>
  <MaxAgeSeconds>3000</MaxAgeSeconds>
  <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

Production deployments should restrict AllowedOrigin to the dashboard's specific hostname.

Decision Matrix

FAQ