Troubleshooting Siemens LOGO! Web Editor Image and Background

Troubleshooting Siemens LOGO! Web Editor (LWE): Blank Image Elements and Missing Background Colors

Siemens LOGO! Web Editor (LWE) is the browser-based HMI configuration tool shipped with the LOGO! 8 and LOGO! 8.4 logic module families. When the Image object in an LWE project renders as a blank placeholder, or when a configured background color fails to apply to a page, the symptom almost always traces to one of four root causes: incorrect SD card folder mapping, image format/encoding limitations of the LOGO! web server, project transfer incomplete, or positioning parameters exceeding the editor's coordinate tolerance. This reference collects field-proven diagnostic steps, file system requirements, and the official Siemens documentation paths used to resolve these problems.

1. Problem Description and Symptoms

Engineers report the following reproducible symptoms when configuring LWE projects:

• An Image object dragged onto a project page appears as a blank square in both the LWE editor and the deployed web page served by the LOGO! base module.
• Background colors configured on the page or on a container element render as white (or transparent) regardless of the RGB value entered.
• Standard graphics shipped in the Graph Library render correctly, but user-supplied bitmaps and PNGs do not display.
• The same image appears correctly when opened directly in a web browser but is invisible from the LOGO!'s HTTP server.
• Images placed under the SD card path /img or /js/jqueryui/images are ignored by the runtime.

The errors are not surfaced in the LWE editor as a fault or warning; the editor writes the configuration successfully, and only the runtime presentation is broken. Because the web server on the LOGO! 8.4 returns HTTP 200 even when the referenced asset is missing (it silently drops the element), browser console inspection often shows 404 entries for /img/<filename>.

2. LWE Runtime Architecture and File System

Understanding the deployment path is essential. The LWE project does not embed image bitmaps into the LOGO! program; instead it references assets stored on the micro SD card inserted in the LOGO! base module. The web server inside the LOGO! 8/8.4 firmware serves files from a fixed directory tree that is created the first time the LOGO! initializes an SD card.

The web server used by LOGO! 8.4 firmware (≥ V1.82.x) implements a virtual filesystem that overlays these folders from the SD card root. Files placed in nested paths outside the recognized structure are not served, which is the most common cause of the blank-image symptom.

3. Root Cause Matrix

Each reported symptom can be traced to one of six root causes. Use the following matrix to identify the most likely cause for your installation before applying remediation steps.

4. Root Cause #1 – Image Not in the Graph Library on the Engineering PC

LWE does not load images directly from the project tree. Instead, the Image object can only reference files that have been copied into the editor's My Graph library folder. The default path on a Windows engineering station is:

C:\Program Files\Siemens\lwe\lwe\res\Graph Library\My Graph

If LOGO! Soft Comfort was installed in a non-default location (for example D:\Apps\Siemens), the LWE installation directory follows the same parent path. The image must be physically placed there before starting the LWE editor; the editor enumerates this folder on startup.

Resolution Procedure

1. Close all open LWE project windows.
2. Copy the bitmap (PNG, JPG, GIF) into ...\lwe\res\Graph Library\My Graph\.
3. Confirm filename uses ASCII characters only (no spaces, no umlauts, no unicode). LWE's library scanner rejects names containing non-ASCII characters silently.
4. Restart the LWE editor.
5. Open Graph Library from the right-hand pane; confirm the new file appears under My Graph.
6. Drag the file onto the design surface. Configure the Source property to My Graph.

5. Root Cause #2 – Image Not Transferred to the SD Card

The LWE editor only stores a reference to the image; the bitmap itself must be present on the LOGO!'s micro SD card in the /img folder (or, for legacy projects, directly under /logo). The LOGO! web server reads /img/<filename> at runtime and embeds it in the served HTML.

Two transfer methods are supported:

• Method A – LWE Project Export: From LWE choose Project → Transfer → SD Card. This writes the HTML, JavaScript, and the /img subtree to the card. Note that this does not copy images added to My Graph after the project was opened; close and reopen the project before exporting.
• Method B – Manual copy: Remove the SD card from the LOGO!, insert into a card reader, and copy files into /img. Safely eject the card and re-insert into the LOGO! base module.

Verification

After the transfer, navigate a web browser to http://<LOGO_IP>/img/<your_image.png>. A successful render shows the bitmap. A 404 response indicates the file was not transferred or the path is incorrect.

6. Root Cause #3 – Image Format and Size Constraints

The LOGO! 8 and 8.4 web server only supports a subset of HTML image formats. The supported formats per the official LOGO! 8.4 system manual are listed in Table 3.

Maximum recommended image dimensions are 800 × 600 pixels and maximum file size is 200 KB. Images exceeding these limits may load very slowly or fail to render on LOGO! 8.3 base modules with limited RAM; LOGO! 8.4 base modules (firmware V1.82.x and later) tolerate up to 1024 × 768 pixels.

7. Root Cause #4 – Coordinate Bug with X > 999

A long-standing LWE bug, confirmed across firmware versions V1.0 through V1.2.4, is that image and text elements whose horizontal position (X) exceeds 999 pixels render as a blank box even when the asset is otherwise correctly served. This is documented in Siemens KB entry 109779452. The symptom is particularly confusing because the editor displays the element correctly during design; only the runtime browser canvas fails to position it.

Workaround

1. Select the affected element in LWE.
2. In the Position properties, set the X coordinate to a value ≤ 999.
3. If the design requires a wider canvas, break the page into two LWE pages and use navigation links rather than a single wide canvas.
4. Re-export to the SD card and verify the image renders.

8. Root Cause #5 – Background Color Configuration

Background colors that fail to apply typically trace to one of three issues:

1. The color value is entered as a named color (red) rather than a hex value (#FF0000). LWE's property parser accepts only the #RRGGBB form.
2. The page-level background color is set, but a contained element has a higher z-index with its own (white) background. The element is opaque and covers the page color.
3. The color is set in the editor preview only, but the Container Background property on the form was never explicitly assigned; LOGO! 8.x firmware defaults to #FFFFFF when not specified.

Resolution

Page Properties:
  Background color:        #1A1A1A   (example dark grey)

Container (Image):
  Background color:        #1A1A1A   (must match or be set to #FFFFFF)
  Transparent:             Off

Always set both the page background and the container background explicitly. Disable Transparent on containers that should obscure the underlying page color.

9. Root Cause #6 – SD Card Boot Order and Capacity

The LOGO! base module checks for an inserted SD card on every power-up. If the card is not detected (faulty contacts, unsupported card, or card formatted as exFAT rather than FAT32), the LOGO! boots from internal memory and the LWE web server runs but cannot serve any images because the /img folder is empty in internal memory.

Supported SD card specifications for LOGO! 8.4:

• FAT16 or FAT32 file system only.
• Capacity 2 GB to 32 GB.
• SD and SDHC types; SDXC (≥ 64 GB) is not supported.
• Industrial-grade cards recommended for environments > 60 °C.

Verify the SD card is recognized by navigating to LOGO! menu → Card → Card Info on the LOGO! display; the firmware version and project name should be displayed if the card is operational.

10. Step-by-Step Diagnostic Procedure

Apply the following procedure in order; each step is independently diagnostic and most issues resolve within the first three steps.

1. Confirm SD card presence. On the LOGO! display, navigate to Card → Card Info and confirm the active project is shown. If not, reformat the card as FAT32 with a 32 KB allocation unit size, re-export the project, and retry.
2. Inspect the SD card directory. Insert the card into a card reader. Confirm the following files and folders exist at the root:\li>

   \logo\index.html
   \img\<your_image.png>
   \lwe\res\Graph Library\My Graph\<your_image.png>

3. Open the editor and confirm asset visibility. Restart LWE; open the project; verify the image is listed in the Graph Library panel.
4. Re-check positioning. For each Image object, verify X ≤ 999 and Y ≤ 700.
5. Verify file format. Open the bitmap in an editor and confirm PNG, JPG, GIF, or BMP. Re-export as PNG if in doubt.
6. Test the direct URL. From a browser, request http://<LOGO_IP>/img/<your_image.png> directly. A 200 OK indicates the file is served; a 404 indicates a transfer or path problem.
7. Validate background color. Set the page background to #FF0000 (red). If red appears, the color path is healthy and the original color value was malformed.
8. Capture the browser console. Open Developer Tools (F12) and review the Network tab. Each blank image corresponds to a 404 entry for the /img path. Each blank background corresponds to an unapplied background-color CSS rule.
9. Update firmware. If still failing, upgrade the LOGO! base module to firmware V1.82.x or later. Earlier V1.80.x firmware had known rendering issues with PNG transparency.
10. Open a Siemens support request. If the issue persists, raise a support ticket via the official Siemens Industry Online Support portal referencing KB entries 109751136 and 109779452.

11. Firmware Version Compatibility

12. Verification Checklist

Use the following checklist to confirm the issue is resolved before closing the ticket.

• ✅ Asset appears in Graph Library → My Graph inside the LWE editor.
• ✅ Image object renders correctly in the design surface preview.
• ✅ http://<LOGO_IP>/img/<filename> returns HTTP 200 from a remote browser.
• ✅ No 404 entries in the browser console Network tab.
• ✅ Page background color matches the configured hex value.
• ✅ Container backgrounds are explicitly set.
• ✅ X coordinates of all Image and Text objects are ≤ 999 px.
• ✅ SD card is recognized in Card → Card Info.
• ✅ All assets are PNG (preferred) or JPG, ≤ 200 KB, no spaces in filename.

13. Frequently Asked Questions