---
name: "SmearTransformer"
mode: "api"
versionRequirements:
  - { name: "@ray-js/panel-sdk", version: "1.0.0" }
title: "SmearTransformer"
summary: "SmearTransformer is used to parse the lighting `paint_colour_data` DP and provides parsing and formatting for smear data."
questions:
  - "What is SmearTransformer used for?"
  - "How does SmearTransformer parse smear data?"
  - "What are the input and output of SmearTransformer?"
  - "What are the transformation rules of SmearTransformer?"
---

## SmearTransformer

> [VERSION] @ray-js/panel-sdk >= 1.0.0

> 💡 Paint control DP for light-strip products (e.g., paint_colour_data), supporting four dimming modes: white, color, palette, and combination,
> and three paint effects: paint bucket, paint, and eraser. Converts paint configuration parameters to and from a hexadecimal DP string.

### Description

Paint DP protocol converter for bidirectional conversion between light-strip paint control data and the DP hexadecimal protocol

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `uuid` | `string` | No | DP identifier, defaults to paint_colour_data |
| `defaultValue` | `{ version: number, dimmerMode: DimmerMode, effect: number, ledNumber: number, smearMode: SmearMode, hue: number, saturation: number, value: number, brightness: number, temperature: number }` | No | Default paint data returned when parsing fails |

### Return Value

Type: `SmearTransformer`

SmearTransformer instance

#### Methods

| Method | Description |
| --- | --- |
| `parser` | Parse the DP hexadecimal string into a paint data object |
| `formatter` | Format the paint data object into a DP hexadecimal string |

### Referenced Types

##### `enum` DimmerMode

| Enum Value | Actual Value | Description |
| --- | --- | --- |
| `DimmerMode.white` | `white` | White light |
| `DimmerMode.colour` | `colour` | Color light |
| `DimmerMode.colourCard` | `colourCard` | Color palette |
| `DimmerMode.combination` | `combination` | Combination |

##### `enum` SmearMode

| Enum Value | Actual Value | Description |
| --- | --- | --- |
| `SmearMode.all` | `all` | All |
| `SmearMode.single` | `single` | Single point |
| `SmearMode.clear` | `clear` | Erase |


### Examples

#### Example

```ts
import { SmearTransformer } from '@ray-js/panel-sdk';

const transformer = new SmearTransformer();
// Parse smear DP string
const data = transformer.parser('0001000a00000003e803e8');

// Format to DP string
const dpStr = transformer.formatter({
  dimmerMode: DimmerMode.colour,
  smearMode: SmearMode.all,
  hue: 120,
  saturation: 1000,
  value: 1000,
});
```