Garlic Widgets for VSCode

VSCode extension for creating HTML5 Digital Signage widgets compatible with garlic-player.

Requirements

• zip and make must be installed for building .wgt files

Create a New Widget Project

CMD+Shift+P → Garlic: New Widget Project

You will be prompted for:

• Widget Name — folder name, lowercase, hyphens and underscores only
• Widget Title — human readable name shown in the CMS
• Author

The extension generates the following structure:

my-widget/
├── src/
│   ├── index.html        # Widget entry point
│   ├── garlic-widget.js  # Parameter helper class
│   ├── config.xml        # W3C Widget manifest + CMS parameters
│   ├── icon.png
│   └── icon.svg
├── tools/
│   ├── build.sh
│   └── build.bat
├── dist/
├── Makefile
├── README.md
└── .gitignore

Local Testing

Open src/index.html directly in a browser with URL parameters:

index.html?message=Hello+DS&backgroundColor=%23001122&textColor=%23ffcc00

Build

# macOS / Linux
./tools/build.sh

# Windows
tools\build.bat

The finished .wgt file will be placed in dist/.

Parameters

Defined in src/config.xml, passed from the DS CMS as URL query string.