README.htm

<style type="text/css">
body{
  font-family: Arial, sans-serif;
}
img{
  max-width: 100%;
  height: auto;
}
video{
  max-width: 100%;
  height: auto;
}
code{
  font-family: "Consolas", monospace;
}
pre{
  border: 1px solid #ddd;
  border-left: 3px solid #f36d33;
  overflow: auto;
  padding: 1em 1.5em;
  display: block;
}
Blockquote{
  border-left: 3px solid #d0d0d0;
  padding-left: 0.5em;
  margin-left:1em;
}
Blockquote p{
  margin: 0;
}
table{
  border:1px solid;
  border-collapse:collapse;
}
th{
  padding:5px;
  border:1px solid;
}
td{
  padding:5px;
  border:1px solid;
}
mark{
  background-color: #fff3a0;
  color: #000;
}
kbd{
  font-family: "Consolas", monospace;
  border: 1px solid #bbb;
  padding: 0 4px;
}
div.math{
  text-align: center;
}
pre.mermaid{
  border: none;
  padding: 0;
}
.markdown-alert{
  padding: 0.5em 1em;
  margin-bottom: 1em;
  border-left: 4px solid #d0d7de;
}
.markdown-alert-title{
  font-weight: bold;
}
.markdown-alert-note{
  border-left: 4px solid #0969da;
}
.markdown-alert-note .markdown-alert-title{
  color: #0969da;
}
.markdown-alert-tip{
  border-left: 4px solid #1a7f37;
}
.markdown-alert-tip .markdown-alert-title{
  color: #1a7f37;
}
.markdown-alert-important{
  border-left: 4px solid #8250df;
}
.markdown-alert-important .markdown-alert-title{
  color: #8250df;
}
.markdown-alert-warning{
  border-left: 4px solid #9a6700;
}
.markdown-alert-warning .markdown-alert-title{
  color: #9a6700;
}
.markdown-alert-caution{
  border-left: 4px solid #cf222e;
}
.markdown-alert-caution .markdown-alert-title{
  color: #cf222e;
}
</style>
<h1 id="skia-shell-extensions-and-lottie-editor">SKIA Shell Extensions and Lottie Editor</h1>
<p><a href="LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-green.svg" alt="License: Apache" /></a>
<a href="https://github.com/EtheaDev/SKIAShellExtensions/releases"><img src="https://img.shields.io/github/v/release/EtheaDev/SKIAShellExtensions?label=release&amp;color=blue" alt="Latest release" /></a>
<a href="https://www.embarcadero.com/products/delphi"><img src="https://img.shields.io/badge/Delphi-12%2B-e62329.svg" alt="Delphi 12+" /></a>
<a href="https://docwiki.embarcadero.com/RADStudio/en/Main_Page"><img src="https://img.shields.io/badge/Platform-VCL-8a2be2.svg" alt="Platform: VCL" /></a>
<a href="https://www.microsoft.com/windows"><img src="https://img.shields.io/badge/Windows-10%20%7C%2011-0078d6.svg" alt="Windows 10 and 11" /></a></p>
<p><img src="./Images/SupportingDelphi.jpg" alt="Delphi Support" /></p>
<p>Related links: <a href="https://www.embarcadero.com">embarcadero.com</a> - <a href="https://learndelphi.org">learndelphi.org</a></p>
<p><strong>A collection of extensions tools for image and animations files, integrated into Microsoft Windows Explorer (10 and 11):</strong></p>
<ul>
<li>
<p>A <a href="https://docs.microsoft.com/en-us/windows/win32/shell/preview-handlers">Preview handler</a>  which allows you to see static images and animations files in the “Preview Panel”.</p>
</li>
<li>
<p>A <a href="https://docs.microsoft.com/en-us/windows/win32/shell/thumbnail-providers">Thumbnail handler</a> which allows you to see static images and anomations files (the last last frame of animation) into Windows Explorer.</p>
</li>
<li>
<p>A <a href="https://github.com/EtheaDev/SKIAShellExtensions/wiki/Using-The-Lottie-Text-Editor">Lottie Text Editor</a> to manually edit and preview the animation of Lottie files.</p>
</li>
</ul>
<h3 id="documentation">Documentation</h3>
<p>Follow the <a href="https://ethea.it/docs/skiatools/">Project Site</a> to know all the SKIA tools: Lottie Text Editor, Animation Viewer and Shell Extensions (Preview Panel and Thumbnails).</p>
<h3 id="animation-and-file-extensions-supported">Animation and file extensions supported:</h3>
<p><strong>.json</strong> or <strong>.lottie</strong>: animated Lottie files <a href="https://lottiefiles.com/">lottiefiles.com</a></p>
<p><strong>.gif</strong>: static and animated Gif <a href="https://www.w3.org/Graphics/GIF/spec-gif87.txt">W3C GIF (tm)</a></p>
<p><strong>.webp</strong>: static and animated webp <a href="https://developers.google.com/speed/webp">An image format for the Web</a></p>
<p><strong>.tgs</strong>: animated telegram stickers <a href="https://core.telegram.org/stickers">core.telegram.org/stickers</a></p>
<hr />
<h3 id="features">Features</h3>
<ul>
<li>
<p>Supports Windows 10 and 11 (for 32 bits and 64 bits).</p>
</li>
<li>
<p>Themes (Dark and Light) according to user preferences of Windows Theme, with the VCL styles: <strong>Light</strong>: Sky, Windows Modern, Windows11 Impressive Light, Windows11 Modern Light, Windows11 Polar Light; <strong>Dark</strong>: Glow, Windows Modern SlateGray, Windows11 Impressive Dark, Windows11 Modern Dark, Windows11 Polar Dark</p>
</li>
<li>
<p>Play normal, inverse or manual control</p>
</li>
<li>
<p>AutoPlay and Loop of animation when selected into Explorer</p>
</li>
</ul>
<h3 id="setup-using-the-installer">Setup using the Installer</h3>
<p>Click to download the <a href="https://github.com/EtheaDev/SKIAShellExtensions/releases/latest/download/SKIAShellExtensionsSetup.exe">SKIAShellExtensionsSetup.exe</a> located also in the Release area. The Installer works both for 32 and 64 bit system.</p>
<p><img src="./Images/Setup.png" alt="Lottie Setup_Program" /></p>
<p><em><strong>For a clean Setup close all the windows explorer instances which have the preview handler active or the preview handler was used (remember the dll remains in memory until the windows explorer was closed).</strong></em></p>
<h3 id="preview-panel-and-thumbnails-in-action">Preview Panel and Thumbnails in action</h3>
<p>In Windows 11 with Light theme:</p>
<p><img src="./Images/PreviewThumbnailsLight.png" alt="Preview Thumbnails Light" /></p>
<p>In Windows 11 with Dark theme:</p>
<p><img src="./Images/PreviewThumbnailsDark.png" alt="Preview Thumbnails Dark" /></p>
<h3 id="lottie-text-editor">Lottie Text Editor</h3>
<p>A useful Text editor with preview and animation of Lottie files:</p>
<p><img src="./Images/LottieTextEditorLight.png" alt="Lottie Text Editor Light" /></p>
<p><strong>Color palette</strong>: under the editor a panel shows all the colors used by the Lottie animation, with the number of occurrences of each one. In a Lottie file a color is an array of numbers (<code>[r,g,b,a]</code> from 0 to 1, or from 0 to 255 in old exports), recognized by where it is: fill and stroke colors (also animated, every keyframe), gradient stops, solid layers (<code>&quot;sc&quot;:&quot;#rrggbb&quot;</code>), text fill and stroke, color effects and slots; the same color written with a different precision is shown once.</p>
<p><img src="./Images/ColorPalette.png" alt="Color palette" /></p>
<ul>
<li>Click on a color to highlight all its occurrences in the text, then move between them with <code>Alt+Right</code> / <code>Alt+Left</code> or with the arrow buttons of the palette.</li>
<li>When the caret is on a color value, the corresponding color is marked in the palette.</li>
<li>Double-click on a color to replace the color value under the caret, keeping the notation of the file (number of components, precision, alpha, scale, offset of a gradient stop).</li>
<li>Right-click on a color to replace all its occurrences with another color (one single undo), to select all its occurrences with multiple carets, or to copy its value.</li>
<li>Add your own colors to the “Custom” section with the <code>+</code> button (color picker) or from the context menu: they are kept for all files and shared with the custom colors of the color picker.</li>
<li>The hint of each color shows its value, the properties using it and its opacities.</li>
<li>The palette can be hidden in the Settings (“Show color palette under the editor”).</li>
</ul>
<h3 id="automatic-updates">Automatic updates</h3>
<p>The Lottie Text Editor checks if a new version is available on GitHub, then downloads and installs it:</p>
<ul>
<li><strong>Automatic check</strong>: at startup, once every <em>n</em> days (7 by default), in background; it can be disabled or its interval changed in Settings - Updates.</li>
<li><strong>Manual check</strong>: with the “Check for updates” button of the About dialog.</li>
</ul>
<h3 id="settings-preview-page">Settings: Preview page</h3>
<p><img src="./Images/SettingsPreview.png" alt="Settings: Preview page" /></p>
<h3 id="settings-theme-page">Settings: Theme page</h3>
<p><img src="./Images/SettingsTheme.png" alt="Settings: Theme page" /></p>
<h3 id="manual-build-and-installation-for-delphi-developers">Manual Build and Installation (for Delphi developers)</h3>
<p>If you have Delphi 12 or Delphi 13, you can manually build the project:</p>
<p><em><strong>Warning: To build the DLL you need also other open-source projects</strong></em></p>
<ul>
<li>
<p><a href="https://github.com/EtheaDev/SVGIconImageList">SVGIconImageList</a></p>
</li>
<li>
<p><a href="https://github.com/pyscripter/SynEdit">Synedit</a></p>
</li>
<li>
<p><a href="https://github.com/RRUZ/vcl-styles-utils">VCL-Style-Utils</a></p>
</li>
<li>
<p><a href="https://skia4delphi.org">Skia4Delphi</a></p>
</li>
</ul>
<p>To manually install the SKIAShellExtensions.dll follow these steps:</p>
<ol>
<li>
<p>Close all the windows explorer instances which have the preview handler active or the preview handler was used (remember the dll remains in memory until the windows explorer was closed).</p>
</li>
<li>
<p>If you have already used the installer uninstall the components from system.</p>
</li>
<li>
<p>To Uninstall/Install manually the dll run the <code>Unregister_Register.cmd</code> (run-as-administrator).</p>
</li>
<li>
<p>If you want to continue to change code and rebuild the dll, Unregister the dlls and beware to close all Explorer instances.</p>
</li>
</ol>
<h2 id="release-notes">Release Notes</h2>
<p>03 Nov 2026: ver. 1.8.3</p>
<ul>
<li>Lottie Text Editor and preview: they use Ethea SynEdit 3.0.0 (<a href="https://github.com/EtheaDev/SynEdit">https://github.com/EtheaDev/SynEdit</a>), the EtheaDev fork of pyscripter/SynEdit with every unit under the <code>SynEdit.</code> scope</li>
</ul>
<p>30 Oct 2026: ver. 1.8.2</p>
<ul>
<li>Lottie Text Editor: “Word-Wrap Text” and “Show Line Numbers” in the context menu of the editor, with a check mark: they switch word wrap and line numbers in every open editor and are saved with the other editor options (as in the Editor options dialog)</li>
<li>Setup: no language selection dialog, the installer uses the language of Windows</li>
<li>License and credits: the same list of third party libraries in the setup, in the README and in the About dialog</li>
<li>New logo, box and setup wizard image of the product</li>
<li>Uses StyledComponents 4.5.0</li>
</ul>
<p>15 Oct 2026: ver. 1.8.1</p>
<ul>
<li>Lottie Text Editor and Animation Viewer: fixed the icons of the side menu and of the toolbar, not shown when the application started without files (the toolbar buttons appeared only after a mouse-over).</li>
<li>VCL styles: removed the obsolete Windows10 styles; available styles: Sky, Windows Modern, Windows11 Impressive Light, Windows11 Modern Light, Windows11 Polar Light (light) and Glow, Windows Modern SlateGray, Windows11 Impressive Dark, Windows11 Modern Dark, Windows11 Polar Dark (dark). On Windows 10 the default style is “Windows Modern” (light) or “Windows Modern SlateGray” (dark); a style saved by a previous version and no longer available is replaced by the default one.</li>
<li>Settings, Theme page: all the styles linked into the application are offered, classified as light or dark automatically (“Windows Modern” and “Windows Modern SlateGray” were not offered).</li>
<li>About dialog: the link points to the new documentation site <a href="https://ethea.it/docs/skiatools/">https://ethea.it/docs/skiatools/</a>; copyright updated to 2026.</li>
</ul>
<p>14 Oct 2026: ver. 1.8.0</p>
<ul>
<li>Lottie Text Editor: new Color palette panel under the editor, showing the colors of the animation (fill and stroke, also animated, gradient stops, solid layers, text, color effects and slots), grouped by color with the number of occurrences and a hint with value, properties and opacities.</li>
<li>Lottie Text Editor: click on a palette color to highlight all its occurrences in the text; move between them with Alt+Right / Alt+Left or with the arrow buttons of the palette. The palette marks the color under the editor caret.</li>
<li>Lottie Text Editor: double-click on a palette color to replace the color under the caret, keeping the notation of the file (number of components, precision, alpha, 0..1 or 0..255 scale, offset of a gradient stop).</li>
<li>Lottie Text Editor: palette context menu to replace all the occurrences of a color (one undo), select them with multiple carets, copy the color value, add or remove custom colors; option in Settings to show or hide the palette.</li>
<li>Fixed a GDI handle and memory leak in the Thumbnail provider: every generated thumbnail leaked resources inside the Explorer process.</li>
<li>The shared resources data module is now a single instance created on demand, instead of one created and destroyed by every preview.</li>
<li>Preview: the text of Lottie files with non-ASCII characters is read as UTF-8.</li>
<li>Lottie Text Editor: the first Undo no longer empties the file just opened.</li>
<li>Lottie Text Editor: the animation is no longer reloaded at every keystroke.</li>
<li>Lottie Text Editor: files whose extension is uppercase (.JSON) can now be opened.</li>
<li>Lottie Text Editor: closing with unsaved changes can now be cancelled; fixed the management of the tabs on errors and when closing the first tab; Save all continues after a file that cannot be saved.</li>
<li>Lottie Text Editor: the gutter of the editor follows the dark styles.</li>
<li>The new-version check runs in background at startup, respects the “Automatic check” option and its interval, and no longer crashes when the download starts right after the automatic check.</li>
<li>Added the styles “Windows11 Modern Light” and “Windows11 Modern Dark” (the default ones on Windows 11); a stored style no longer available falls back to the default one instead of raising an error.</li>
<li>Setup: the Skia library is installed also with the Editor or the Viewer alone.</li>
</ul>
<p>03 Jun 2026: ver. 1.7.1</p>
<ul>
<li>Added single-instance behavior: opening a file now reuses the running editor instead of starting a new one.</li>
<li>Added Settings option to remember and reopen files from the last session.</li>
</ul>
<p>07 Sep 2025: ver. 1.7.0</p>
<ul>
<li>Built with Delphi 13</li>
<li>Refactoring PageControl to speedup loading</li>
<li>Added Animation Viewer</li>
<li>Added check for new version available, download and install</li>
<li>Updated Setup</li>
</ul>
<p>02 Mar 2024: ver. 1.6.0</p>
<ul>
<li>Added “Wordwrap option” for the editor (active by default)</li>
<li>Updated the latest Image32 library</li>
<li>Added Color options in Editor GUI</li>
<li>Updated to Image32 4.6 Released Feb 2025 to fix some drawing issue</li>
</ul>
<p>12 May 2024: ver. 1.5.4</p>
<ul>
<li>Added StyledComponents (Rounded Buttons options)</li>
<li>Added init for GDI+Plus to Dll's</li>
<li>Deleted unused images</li>
</ul>
<p>09 May 2024: ver. 1.5.3</p>
<ul>
<li>Added File Changed notification and reload</li>
<li>Built with Delphi 12.1</li>
<li>Built with Latest Image32 Library</li>
<li>Built with Latest Skia4Delphi 6.1 Library</li>
</ul>
<p>13 Jan 2024: ver. 1.5.2</p>
<ul>
<li>Aligned to Image32 Library</li>
<li>Updated Copyright</li>
</ul>
<p>26 Oct 2023: ver. 1.5.1</p>
<ul>
<li>Optimized rendering of Icon using the Skia Codec directly</li>
<li>Enabled system draw for title and border of Editor when Styled</li>
</ul>
<p>25 Oct 2023: ver. 1.5.0</p>
<ul>
<li>Added “close button” over Tabs in Editor</li>
<li>Updated to Skia4Delphi 6.0.0-beta 5</li>
<li>Fixed enabling of Inverse Play Button</li>
<li>Built with Delphi 12</li>
</ul>
<p>12 Mar 2023: ver. 1.4.0</p>
<ul>
<li>Added “inverse” animation to Preview and Editor</li>
</ul>
<p>27 Feb 2023: ver. 1.3.0</p>
<ul>
<li>Updated to Skia4Delphi 4.1.1</li>
<li>Updated Projects to Delphi 11.3</li>
</ul>
<p>13 Jan 2023: ver. 1.2.0</p>
<ul>
<li>Updated to Skia4Delphi 4.0.2</li>
<li>Fixed Animation Panel of Preview</li>
</ul>
<p>09 Nov 2022: ver. 1.1.0</p>
<ul>
<li>Updated to Skia4Delphi 4.0.1</li>
<li>Fixed settings filename</li>
</ul>
<p>24 Set 2022: ver. 1.0.1</p>
<ul>
<li>Fixed Setup registering 32bit dll</li>
<li>Fixed settings filename</li>
</ul>
<p>23 Set 2022: ver. 1.0.0</p>
<ul>
<li>First version</li>
</ul>
<h2 id="credits">Credits</h2>
<p>Many thanks to <strong>Rodrigo Ruz V.</strong> (author of <a href="https://theroadtodelphi.com">theroadtodelphi.com</a> Blog) for his wonderful work on <a href="https://github.com/RRUZ/delphi-preview-handler">delphi-preview-handler</a> from which this project has used a lot of code and inspiration.</p>
<h2 id="powered-by-skia4delphi">Powered by Skia4Delphi</h2>
<p><a href="https://www.skia4delphi.org"><img src="./Images/logo-gradient.svg" alt="Skia4Delphi Logo" /></a></p>
<p>Many thanks to the project “Skia4Delphi”</p>
<p><strong><a href="https://skia4delphi.org">Skia4Delphi</a></strong> is a cross-platform 2D graphics API for Delphi based on <a href="https://skia.org/">Google's Skia</a> graphics library.</p>
<h2 id="license">License</h2>
<p>Licensed under the <a href="https://opensource.org/licenses/Apache-2.0">Apache License, Version 2.0</a> (the “License”);
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.</p>
<!-- raw HTML omitted -->
<p>Copyright © 2022-2026 Ethea S.r.l.</p>
<h3 id="credits-1">Credits</h3>
<p>Author: Carlo Barazzetta<br />
Custom icons: Ariel Montes<br />
Source project: <a href="https://github.com/EtheaDev/SKIAShellExtensions">https://github.com/EtheaDev/SKIAShellExtensions</a></p>
<h3 id="other-libraries-from-ethea">Other libraries from Ethea</h3>
<ul>
<li><strong><a href="https://github.com/EtheaDev/SVGIconImageList">SVGIconImageList</a></strong></li>
<li><strong><a href="https://github.com/EtheaDev/StyledComponents">StyledComponents</a></strong></li>
</ul>
<h3 id="third-party-libraries">Third party libraries</h3>
<ul>
<li><strong><a href="https://github.com/RRUZ/delphi-preview-handler">Delphi Preview Handler</a></strong><br />
The Initial Developer of the Original Code is Rodrigo Ruz V.<br />
Portions created by Rodrigo Ruz V. are Copyright © 2011-2023 Rodrigo Ruz V.</li>
<li><strong><a href="https://github.com/RRUZ/vcl-styles-utils">VCL Styles Utils</a></strong><br />
Portions created by Rodrigo Ruz V. are Copyright © 2012-2023 Rodrigo Ruz V. (Mozilla Public License 1.1)</li>
<li><strong><a href="https://github.com/pyscripter/SynEdit">SynEdit (PyScripter fork)</a></strong><br />
Portions created by Martin Waldenburg are Copyright © 1998 Martin Waldenburg (Mozilla Public License 1.1)</li>
<li><strong><a href="https://skia4delphi.org">Skia4Delphi</a></strong><br />
Copyright © 2021-2025 Skia4Delphi Project (MIT License)</li>
<li><strong><a href="https://www.angusj.com/delphi/image32/Docs/_Body.htm">Image32 Library</a></strong><br />
Copyright © 2019-2025 Angus Johnson (Boost Software License)</li>
</ul>
<!-- raw HTML omitted -->
<p><img src="/Setup/SupportingDelphi.jpg" alt="Delphi Support" /></p>
<p>Related links: <a href="https://www.embarcadero.com">embarcadero.com</a> - <a href="https://learndelphi.org">learndelphi.org</a></p>