OpenSkin Designer (OSD)

i'm not a skinner..
Give me code i put in software..

Quote from Lululla

1. Is it possible to add option to modify the ruler unit, mm, cm, inch, or switch it to pixels?

DONE!

2. Is it possible to add text wrap option to eLable with the basic left, right, center?

The Wrap property works perfectly because it affects the pNoWrap field.

The logic is:

If noWrap == true → the text is forced to a single line, with the height adjusted.

If noWrap == false → the text can automatically wrap, using the full height of the label.

5. Is it possible to add radial gradient?

At present, the program does NOT support radial gradients – it only handles linear (horizontal/vertical) gradients through the backgroundGradient attribute.

Gradient parsing currently only recognizes strings like this:

"color1,color2,vertical" (2 colors + direction)

"color1,color2,color3,vertical" (3 colors + direction)

The direction can only be "vertical" or "horizontal" (case insensitive).

There is no handling of "radial", "from corner", "to center", or similar.

In the drawing, when a gradient is detected, a LinearGradientBrush is created – no RadialGradientBrush or PathGradientBrush.

it is not foreseen in the current program and would require non-trivial work.

6. Is it possible to add a custom template for widget, pxmap, eLable, progress... etc? This will help the skinners to standard their code instead of copy paste from screen to another

DONE!

pasted-from-clipboard.png

Display More

i already answered this question, but if you don't give me the code i don't even know how to make the modifications.. but i think atv doesn't take this, i searched in github.. but there is no trace.

1. Is it possible to add option to modify the ruler unit, mm, cm, inch, or switch it to pixels?

DONE!

2. Is it possible to add text wrap option to eLable with the basic left, right, center?

The Wrap property works perfectly because it affects the pNoWrap field.

The logic is:

If noWrap == true → the text is forced to a single line, with the height adjusted.

If noWrap == false → the text can automatically wrap, using the full height of the label.

3. Is it possible to add folder as work space to xml files without the needs to add <skin> on top and bottom, this will help a lot to make edit for screen files prior add it to the main skin.xml file and will convert the system to offline editor to and screen xml file.

DONE!

pasted-from-clipboard.png

5. Is it possible to add radial gradient?

At present, the program does NOT support radial gradients – it only handles linear (horizontal/vertical) gradients through the backgroundGradient attribute.

Gradient parsing currently only recognizes strings like this:

"color1,color2,vertical" (2 colors + direction)

"color1,color2,color3,vertical" (3 colors + direction)

The direction can only be "vertical" or "horizontal" (case insensitive).

There is no handling of "radial", "from corner", "to center", or similar.

In the drawing, when a gradient is detected, a LinearGradientBrush is created – no RadialGradientBrush or PathGradientBrush.

it is not foreseen in the current program and would require non-trivial work.

6. Is it possible to add a custom template for widget, pxmap, eLable, progress... etc? This will help the skinners to standard their code instead of copy paste from screen to another

DONE!

pasted-from-clipboard.png

## User Guide for New Features in v4.2.3.4

### ****** ## MOD v4.2.3.4 – Lululla

**New Features**

- **Template system**:
  - Added new "Template" menu to insert custom widgets/pixmaps/labels/sliders from XML files stored in a configurable `templates` folder.
  - Includes example templates for quick start (label, pixmap, slider, progress).

- **Open Screen**:
  - Open standalone screen XML files (without `<skin>` wrapper), edit them, and save back only the screen node – ideal for offline screen editing and version control.

- **Import Screen**:
  - Import an external screen XML file into the currently open skin, merging it as a new screen.

- **Label text wrap**:
  - Added "Wrap Text" property for `eLabel` (and widgets with `render="Label"`) to enable automatic line wrapping (XML attribute `wrap="1"`).

**Stability & Improvements**

- **Stability fixes**:
  - Resolved multiple exceptions when opening single‑screen files (missing mandatory tags like `output`, `colors`, `fonts`, `windowstyle`).
  - Properly handles null references in `cDataBase` and `sAttributeScreen` during wrapper generation.

- **Code improvements**:
  - Enhanced XML wrapper generation for single‑screen editing.
  - Unified gradient handling, general refactoring and cleanup.

### 1. Custom Templates (Menu "Template")

You can create your own widget templates and reuse them across different skins.

**How to use:**

1. Create a folder named `templates` in the same directory as `e2skinner2.exe` (or change the path in `Preferences`).

2. Inside `templates`, create one or more XML files. Each file must contain **only one** widget definition, for example:

```xml

<widget name="MyRedLabel" position="0,0" size="200,50" text="Hello" foregroundColor="red" backgroundColor="black" wrap="1" />

```

3. In OpenSkinDesigner, open a skin, select a screen or panel, then go to **Template → [your file name]**.

4. The widget will be inserted directly into the tree.

**Example templates**

are created automatically when the `templates` folder is empty.

---

### 2. Open Screen (Menu "File → Open Screen...")

You can edit a **standalone screen XML file** that does not contain the `<skin>` wrapper. This is useful for offline editing, version control, or sharing single screens.

**How to use:**

1. Create a file with only a `<screen>...</screen>` block (no `<skin>`, no extra tags).

2. In OpenSkinDesigner, go to **File → Open Screen...** and select your file.

3. The designer will treat it as a normal skin (with a temporary wrapper). You can add, move, delete widgets, change properties, etc.

4. When you save (Ctrl+S), the original file will be **overwritten with the screen only** (the wrapper is removed).

**Note:**

The original file must be writable. The temporary wrapper includes minimal required tags (`output`, `colors`, `fonts`, `windowstyle`) so that the program works correctly.

---

### 3. Import Screen (Menu "File → Import Screen...")

You can insert a screen from another XML file into the currently open skin. The imported screen becomes a new screen at the end of the skin tree.

**How to use:**

1. Open a skin normally (File → Open).

2. Go to **File → Import Screen...** and select an XML file containing a screen (same format as above).

3. The screen will be added to the root level of the current skin.

4. You can then edit, move, or delete it like any other screen.

5. Save the skin (Ctrl+S) to store the imported screen as part of the main `skin.xml`.

---

### 4. Text Wrap for eLabel (Property "Wrap Text")

Labels (eLabel or widgets with `render="Label"`) now support automatic line wrapping.

**How to use:**

- Select a label in the tree.

- In the property grid, find the category **Label - Label**.

- Enable **Wrap Text** (checkbox).

- The generated XML will contain `wrap="1"` (and remove `noWrap` if present).

- The preview will show the text wrapped if the label width is insufficient.

**Compatibility:**

Enigma2 natively supports `wrap="1"` via the `RT_WRAP` flag.

---

### Additional Notes

- All new strings (menu items, messages, tooltips) are translated into the existing language files. If your language file is missing some entries, add them following the pattern in `English.lng`.

- For developers: The `templates` folder path can be changed in **Preferences**.

- The **Open Screen** feature uses a temporary wrapper that includes minimal valid definitions for `output`, `colors`, `fonts`, `windowstyle`. It saves only the `<screen>` node back to the original file.

Enjoy!

Quote from odem2014

Radial gradient is NOT supported , but can be faked .

Code

<screen name="GradientExamples"
        position="0,0"
        size="1920,1080"
        flags="wfNoBorder"
        backgroundColor="black">

    <!-- ===================================================== -->
    <!-- 1. SIMPLE VERTICAL GRADIENT: 2 COLORS -->
    <!-- Syntax: startColor,endColor,vertical -->
    <!-- ===================================================== -->
    <eLabel position="60,60"
            size="500,90"
            cornerRadius="20"
            backgroundColor="#202020,#050505,vertical"
            zPosition="1" />

    <!-- ===================================================== -->
    <!-- 2. SIMPLE HORIZONTAL GRADIENT: 2 COLORS -->
    <!-- Syntax: startColor,endColor,horizontal -->
    <!-- ===================================================== -->
    <eLabel position="60,180"
            size="500,90"
            cornerRadius="20"
            backgroundColor="#050505,#303030,horizontal"
            zPosition="1" />

    <!-- ===================================================== -->
    <!-- 3. THREE-COLOR VERTICAL GRADIENT -->
    <!-- Syntax: startColor,centerColor,endColor,vertical -->
    <!-- ===================================================== -->
    <eLabel position="60,300"
            size="500,90"
            cornerRadius="20"
            backgroundColor="#080808,#303030,#080808,vertical"
            zPosition="1" />

    <!-- ===================================================== -->
    <!-- 4. THREE-COLOR HORIZONTAL GRADIENT -->
    <!-- Syntax: startColor,centerColor,endColor,horizontal -->
    <!-- ===================================================== -->
    <eLabel position="60,420"
            size="500,90"
            cornerRadius="20"
            backgroundColor="#050505,#404040,#050505,horizontal"
            zPosition="1" />

    <!-- ===================================================== -->
    <!-- 5. TRANSPARENT / GLASS VERTICAL GRADIENT -->
    <!-- #AA RR GG BB format: alpha + color -->
    <!-- ===================================================== -->
    <eLabel position="620,60"
            size="500,90"
            cornerRadius="20"
            backgroundColor="#55ffffff,#11000000,#00000000,vertical"
            zPosition="1" />

    <!-- ===================================================== -->
    <!-- 6. TRANSPARENT / GLASS HORIZONTAL GRADIENT -->
    <!-- Good for shine / light reflection -->
    <!-- ===================================================== -->
    <eLabel position="620,180"
            size="500,90"
            cornerRadius="20"
            backgroundColor="#00000000,#44ffffff,#00000000,horizontal"
            zPosition="1" />

    <!-- ===================================================== -->
    <!-- 7. ALPHA-BLEND GRADIENT -->
    <!-- Syntax: start,center,end,direction,alphablend -->
    <!-- Last parameter may be alphablend / on / true / yes / 1 -->
    <!-- ===================================================== -->
    <eLabel position="620,300"
            size="500,90"
            cornerRadius="20"
            backgroundColor="#44000000,#55ffffff,#00000000,vertical,alphablend"
            zPosition="1" />

    <!-- ===================================================== -->
    <!-- 8. GOLD / DARK PREMIUM HORIZONTAL GRADIENT -->
    <!-- Good for Aglare separators -->
    <!-- ===================================================== -->
    <eLabel position="620,420"
            size="500,6"
            cornerRadius="3"
            backgroundColor="#00000000,#d6a65a,#00000000,horizontal"
            zPosition="1" />

    <!-- ===================================================== -->
    <!-- 9. PROGRESS BAR FOREGROUND GRADIENT -->
    <!-- foregroundColor can be gradient for slider/progress style widgets -->
    <!-- ===================================================== -->
    <widget name="progress_example"
            position="60,570"
            size="1060,18"
            backgroundColor="#050505,#222222,vertical"
            foregroundColor="green,yellow,red,horizontal"
            cornerRadius="9"
            zPosition="2" />

    <!-- ===================================================== -->
    <!-- 10. LIST SELECTED ITEM GRADIENT -->
    <!-- For Listbox / config/list widgets -->
    <!-- ===================================================== -->
    <widget name="list_example"
            position="60,640"
            size="1060,220"
            itemHeight="55"
            font="Regular;30"
            transparent="1"
            itemGradientSelected="#202020,#505050,#202020,vertical"
            itemCornerRadius="12"
            itemCornerRadiusSelected="12"
            scrollbarMode="showOnDemand"
            scrollbarForegroundColor="#303030,#777777,#303030,vertical"
            scrollbarBorderColor="#444444"
            scrollbarWidth="10"
            scrollbarBorderWidth="1"
            scrollbarRadius="5"
            zPosition="2" />

    <!-- ===================================================== -->
    <!-- 11. FAKE RADIAL EFFECT USING LAYERS -->
    <!-- Real radial is not supported, so fake it with stacked rounded labels -->
    <!-- ===================================================== -->

    <!-- Outer dark circle/rounded panel -->
    <eLabel position="1240,80"
            size="360,360"
            cornerRadius="180"
            backgroundColor="#020202,#181818,#020202,vertical"
            zPosition="1" />

    <!-- Middle lighter glow -->
    <eLabel position="1280,120"
            size="280,280"
            cornerRadius="140"
            backgroundColor="#080808,#303030,#080808,vertical,alphablend"
            zPosition="2" />

    <!-- Inner highlight -->
    <eLabel position="1335,175"
            size="170,170"
            cornerRadius="85"
            backgroundColor="#33ffffff,#05000000,vertical,alphablend"
            zPosition="3" />

    <!-- Small center dark depth -->
    <eLabel position="1385,225"
            size="70,70"
            cornerRadius="35"
            backgroundColor="#252525,#050505,vertical"
            zPosition="4" />

</screen>

Display More

All linear gradients (vertical/horizontal) are fully supported, including:

- 2‑color syntax: `startColor,endColor,vertical` or `horizontal`

- 3‑color syntax: `startColor,centerColor,endColor,vertical` or `horizontal`

- Colors with transparency (e.g. `#55ffffff`) work correctly.

**What is NOT supported (and never will be, because Enigma2 itself doesn’t support it):**

- **Radial gradients** – Enigma2 has no native radial gradient for widgets. However, you can fake them by stacking multiple rounded labels (as you did in your example). That’s the right workaround.

**About the `alphablend` keyword**

In your example I saw `...,vertical,alphablend`. Enigma2 does not use a fifth parameter. The transparency is handled directly by the color’s alpha channel (e.g. `#88rrggbb`). The extra `alphablend` is simply ignored (no error, but no special effect either). I recommend using only the standard 2‑ or 3‑color plus direction syntax.

Your gradient examples are **perfectly compatible**. You can use them in skins without any changes. OpenSkinDesigner will preview them exactly as Enigma2 renders them.

Quote from kitte888

Well, I've been skinning for a long time now, but I don't understand what the problem is with copy and paste.

Nor do I have any trouble with selecting using the mouse and moving things around.

An auto-save feature would be nice, though.

;) next version

Quote from Captain

Regarding the question: “A gradient from the corner to the center?”

Normally, beams are displayed, but I do not think anyone really needs that. For something like this to work at all, the required functionality would first have to be added to the C++ code in Enigma2.

OpenSkinDesigner can only display what the underlying image/rendering system supports — no more and no less.

For now, I think the basic functions are more important, especially how values are found and used. In my version there were already many suitable options, and as far as I understand, your version is intended to adopt as much of that as possible.

In any case, this is a very nice project. It will certainly motivate more users to take a closer look at the complex topic of skinning. Then you will also see how many great skin functions already exist. Everything DreamOS can do is included here as well — and even more.

you have a pm for this merge :)

pasted-from-clipboard.png

try autosave.

pasted-from-clipboard.png

pasted-from-clipboard.png

### ****** ## MOD v4.2.3.5 – Lululla

**New Features**

- **Auto-save**:

- Added optional auto-save feature (every X minutes) with status bar notification.

- **Network support**:

- Added ability to open and save skins directly from network paths (UNC). Network folder can be set in Preferences.

**Stability & Improvements**

- **Bug fixes**:

- Fixed `ArgumentNullException` in `GetTranslation()` when no language file is loaded.

- Removed orphaned methods and unused constants.

- **Code cleanup**:

- Removed duplicate gradient properties, unified gradient handling, and general refactoring.

## New Features in v4.2.3.5 – User Guide

### 1. Auto-save (Preferences)

You can enable automatic saving of your skin at regular intervals.

**How to use:**

1. Go to **Settings → Preferences**.

2. Check **"Auto-save every"** and set the number of minutes (1–60).

3. Click **OK**.

4. When a skin is open and you make changes, the program will automatically save it every X minutes.

5. A message like `Auto-saved at 14:35` will appear in the status bar.

**Note:** Auto-save only triggers if there are unsaved changes. It uses the normal `save()` function, so it works for both local and network skins.

---

### 2. Network Support (UNC paths)

You can now open and save skins directly from a network share (e.g. your Enigma2 box) without copying files to your local PC.

**How to set up:**

1. Make sure your Enigma2 box has Samba (Windows share) enabled and that the skin folder (e.g. `/usr/share/enigma2/`) is shared.

2. In OpenSkinDesigner, go to **Settings → Preferences**.

3. Under **"Default network path (UNC)"**, enter the path to the **parent folder** that contains your skin subfolders.

Example: `\\192.168.1.78\Root\usr\share\enigma2`

4. Click **Browse...** to select the folder visually, then **OK**.

**How to open a network skin:**

- **File → Open**

The list will now show **both your local skins (from `./skins/`)** and **any network skins found in the UNC path**.

- Select a skin from the list and click **Open**.

- The skin will load exactly like a local one. You can edit, add widgets, change properties, etc.

**How to save a network skin:**

- Just press **Ctrl+S** or use **File → Save**. The program will overwrite the original `skin.xml` on the network share.

**Important notes:**

- The network path must be accessible and writable by Windows.

- You must have proper permissions on the share.

- If you only want to edit a single screen file (without `<skin>` wrapper), use **File → Open Screen...** instead.

---

Tags · OwnerPlugins/OpenSkin-Designer

pasted-from-clipboard.png

All done!
well now some rest..

in next version:

- added some settings for ATV (thank's Captain for suggestions)
- Template system (custom widgets from XML files)

- Open Screen / Import Screen (standalone screen editor)

- Wrap Text for eLabel

- Auto-save (every X minutes)

- Network support (UNC paths)

- Full font editor (Add, Remove, Change)

- Preferences for Rootfs and Enigma2 source folders

- Many stability fixes and code improvements

- Correct flow for using templates:

• - Open a skin (or create a new one with **File → New Screen**).
• - Select a screen in the tree on the left.
• - Open **Menu → Template**.
• - Select a template (example: `multi_example`).
• - Widgets will be inserted into the selected screen.

> ⚠️ Templates can only be inserted inside a **screen**.

> Selecting a widget or another element will not work.

pasted-from-clipboard.png

pasted-from-clipboard.png

pasted-from-clipboard.png

pasted-from-clipboard.png

pasted-from-clipboard.png

pasted-from-clipboard.png

v4.2.3.6 MOD by Lululla

• - **Template system**: Added new "Template" menu to insert custom widgets/pixmaps/labels/sliders from XML files stored in a configurable `templates` folder. Includes example templates for quick start.
• - **Open Screen**: Open standalone screen XML files (without `<skin>` wrapper), edit them, and save back only the screen node – ideal for offline screen editing and version control.
• - **Import Screen**: Import an external screen XML file into the currently open skin, merging it as a new screen.
• - **Label text wrap**: Added "Wrap Text" property for eLabel (and widget render="Label") to enable automatic line wrapping (XML attribute `wrap="1"`).
• - **Auto-save**: Added optional auto-save feature (every X minutes) with status bar notification.
• - **Network support**: Added ability to open and save skins directly from network paths (UNC). Network folder can be set in Preferences.
• - **Font management**: Added full font editor (Add, Remove, Change buttons) in Fonts window. Font name, path, scale, size, and replacement are now editable. Changes are saved to `skin.xml` immediately.
• - **Skin project paths**: Added Preferences for Rootfs folder (to resolve system fonts/images) and Enigma2 source folder (for developer reference).
• - **Converter improvements**: Enhanced cConverter with safer value parsing (getIntValue, getSourceTable), better null handling, and support for parent. source references.
• - **Coordinate system**: Enhanced `parseCoord` to support advanced expressions (`e-10`, `bottom-10`, `center-100`, `top+20`, `right-50%`, etc.). Fixed `FormatException` when using negative values or percentages.
• - **Listbox improvements**: Added context‑aware preview entries (menu, bouquet, EPG, movie lists) and smarter font detection (priority attributes like serviceNameFont, EventFontVertical, etc.).
• - **Label preview**: Added context‑aware preview text for dynamic sources (clock, events, channels) when no explicit text is set.
• - **Open Screen zoom**: Fixed zoom functionality when opening standalone screen files; zoom slider and numeric box are now properly enabled.
• - **Resolution handling**: Open Screen now respects the screen's actual size attribute instead of defaulting to 1920x1080.
• - **Code improvements**: Added `cSkinProject.cs` to manage skin, rootfs, and Enigma2 source paths. Enhanced `cDataBase.cs` with `setFonts()`, `syncFonts()`, `renameFontReferences()`.
• - **Stability fixes**: Fixed multiple exceptions when opening single‑screen files (missing mandatory tags like `output`, `colors`, `fonts`, `windowstyle`). Properly handles null references.
• - **Localization**: Added translations for all new strings (Template, Open Screen, Import Screen, Wrap Text, Auto-save, Network paths, Rootfs, Enigma2 source, etc.) into all language files.
• - **Code cleanup**: Removed duplicate gradient properties, unified gradient handling, general refactoring.

Here preview

Post

RE: OpenSkin Designer (OSD)

in next version:
- added some settings for ATV (thank's Captain for suggestions)
- Template system (custom widgets from XML files)
- Open Screen / Import Screen (standalone screen editor)
- Wrap Text for eLabel
- Auto-save (every X minutes)
- Network support (UNC paths)
- Full font editor (Add, Remove, Change)
- Preferences for Rootfs and Enigma2 source folders
- Many stability fixes and code improvements
- Correct flow for using templates:

• - Open a skin (or create a new one with **File → New

…

Lululla

May 12th 2026

pasted-from-clipboard.png

Release v4.2.3.6 MOD by Lululla · OwnerPlugins/OpenSkin-Designer

hemm thank's for beers..