0.1.3Event fired when picker state changes
Type: CustomEvent
(Object)
: Event details
detail.origin string
What triggered the change: 'constructor', 'form', or 'setParams'
detail.screenClasses Array<string>
Array of CSS classes for Framework CSS rendering
detail.model Object
Current model object with name, label, width, height, kind, css properties
detail.palette Object
Current palette object with id, name, framework_class properties
detail.isPortrait boolean
Portrait orientation flag
detail.isDarkMode boolean
Dark mode flag
detail.width number
Current width of the screen in pixels
detail.height number
Current height of the screen in pixels
picker.formElement.addEventListener('trmnl:change', (event) => {
const { origin, screenClasses, model, palette } = event.detail
console.log(`Changed via ${origin}`)
console.log('Classes:', screenClasses)
})
TRMNLPicker - Vanilla JS library for TRMNL device and palette selection
Provides a reactive picker component that manages device models, color palettes, orientation, and display mode. Emits 'trmnl:change' events with current state and CSS classes for rendering.
Note: Using the constructor directly is not recommended. Use the static TRMNLPicker.create method instead, which automatically fetches models and palettes from the TRMNL API if not provided.
// HTML Structure - Required form with data-* attributes
// <form id="picker-form">
// <!-- Required: Model selector -->
// <select data-model-select></select>
//
// <!-- Required: Palette selector -->
// <select data-palette-select></select>
//
// <!-- Optional: Orientation toggle -->
// <button type="button" data-orientation-toggle>
// <span data-orientation-text>Landscape</span>
// </button>
//
// <!-- Optional: Dark mode toggle -->
// <button type="button" data-dark-mode-toggle>
// <span data-dark-mode-text>Light Mode</span>
// </button>
//
// <!-- Optional: Reset button -->
// <button type="button" data-reset-button>Reset</button>
// </form>
// Create with element ID
const picker = new TRMNLPicker('picker-form', { models, palettes })
// Create with DOM element
const element = document.getElementById('picker-form')
const picker = new TRMNLPicker(element, { models, palettes })
// Listen for changes
picker.formElement.addEventListener('trmnl:change', (event) => {
console.log(event.detail.screenClasses)
})
Create a TRMNLPicker instance, fetching data from TRMNL API if not provided
Automatically caches API responses in localStorage for 24 hours to reduce network requests.
(any)
(Object
= {})
Configuration options
| Name | Description |
|---|---|
options.models Array<Object>?
|
Optional models array (fetched from API if not provided) |
options.palettes Array<Object>?
|
Optional palettes array (fetched from API if not provided) |
options.localStorageKey string?
|
Optional key for state persistence |
Promise<TRMNLPicker>:
Promise resolving to picker instance
// Fetch models and palettes from API (or use cached data if available)
const picker = await TRMNLPicker.create('screen-picker')
// Provide your own data
const picker = await TRMNLPicker.create('screen-picker', { models, palettes })
Get current picker parameters (serializable state)
Object:
Current parameters for persistence or API calls
string:
return.modelName - Selected model name
string:
return.paletteId - Selected palette ID
boolean:
return.isPortrait - Portrait orientation flag
boolean:
return.isDarkMode - Dark mode flag
const params = picker.params
// { modelName: 'og_plus', paletteId: '123', isPortrait: false, isDarkMode: false }
// Can be used to restore state later
localStorage.setItem('picker-state', JSON.stringify(picker.params))
Update picker configuration programmatically
// Update single parameter
picker.setParams({ isDarkMode: true })
// Update multiple parameters
picker.setParams({
modelName: 'og_plus',
paletteId: '123',
isPortrait: true
})
// Note: Changing model resets palette to first valid palette of that model
Get complete picker state including full model and palette objects
{model: Object, palette: Object, isPortrait: boolean, isDarkMode: boolean, screenClasses: Array<string>, width: number, height: number}:
State object containing model (full model object from API), palette (full palette object from API), isPortrait flag, and isDarkMode flag
const state = picker.state
// {
// model: { name: 'og_plus', label: 'OG+', width: 800, height: 480, ... },
// palette: { id: '123', name: 'Black', framework_class: 'screen--1bit', ... },
// isPortrait: false,
// isDarkMode: false,
// screenClasses: ['screen', 'screen--1bit', 'screen--v2', 'screen--md', 'screen--1x'],
// width: 800,
// height: 480
// }
Clean up event listeners and references