@willwade/aac-processors 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Grid3 Style Helpers
|
|
3
|
+
*
|
|
4
|
+
* Utilities for creating and managing Grid3 styles, including default styles,
|
|
5
|
+
* style XML generation, and style conversion utilities.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Grid3 Style object structure
|
|
9
|
+
*/
|
|
10
|
+
export interface Grid3Style {
|
|
11
|
+
BackColour?: string;
|
|
12
|
+
TileColour?: string;
|
|
13
|
+
BorderColour?: string;
|
|
14
|
+
FontColour?: string;
|
|
15
|
+
FontName?: string;
|
|
16
|
+
FontSize?: string | number;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Default Grid3 styles for common use cases
|
|
20
|
+
* Colors are in 8-digit ARGB hex format (#AARRGGBBFF)
|
|
21
|
+
*/
|
|
22
|
+
export declare const DEFAULT_GRID3_STYLES: Record<string, Grid3Style>;
|
|
23
|
+
/**
|
|
24
|
+
* Category-specific styles for navigation and organization
|
|
25
|
+
*/
|
|
26
|
+
export declare const CATEGORY_STYLES: Record<string, Grid3Style>;
|
|
27
|
+
/**
|
|
28
|
+
* Ensure a color has an alpha channel (Grid3 format requires 8-digit ARGB)
|
|
29
|
+
* @param color - Color string (hex format)
|
|
30
|
+
* @returns Color with alpha channel in format #AARRGGBBFF
|
|
31
|
+
*/
|
|
32
|
+
export declare function ensureAlphaChannel(color: string | undefined): string;
|
|
33
|
+
/**
|
|
34
|
+
* Create a Grid3 style XML string with default and category styles
|
|
35
|
+
* @param includeCategories - Whether to include category-specific styles (default: true)
|
|
36
|
+
* @returns XML string for Settings0/styles.xml
|
|
37
|
+
*/
|
|
38
|
+
export declare function createDefaultStylesXml(includeCategories?: boolean): string;
|
|
39
|
+
/**
|
|
40
|
+
* Create a custom category style
|
|
41
|
+
* @param categoryName - Name of the category
|
|
42
|
+
* @param backgroundColor - Background color in hex format
|
|
43
|
+
* @param fontColor - Font color in hex format (default: white)
|
|
44
|
+
* @returns Grid3Style object
|
|
45
|
+
*/
|
|
46
|
+
export declare function createCategoryStyle(categoryName: string, backgroundColor: string, fontColor?: string): Grid3Style;
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* Grid3 Style Helpers
|
|
4
|
+
*
|
|
5
|
+
* Utilities for creating and managing Grid3 styles, including default styles,
|
|
6
|
+
* style XML generation, and style conversion utilities.
|
|
7
|
+
*/
|
|
8
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
9
|
+
exports.CATEGORY_STYLES = exports.DEFAULT_GRID3_STYLES = void 0;
|
|
10
|
+
exports.ensureAlphaChannel = ensureAlphaChannel;
|
|
11
|
+
exports.createDefaultStylesXml = createDefaultStylesXml;
|
|
12
|
+
exports.createCategoryStyle = createCategoryStyle;
|
|
13
|
+
const fast_xml_parser_1 = require("fast-xml-parser");
|
|
14
|
+
/**
|
|
15
|
+
* Default Grid3 styles for common use cases
|
|
16
|
+
* Colors are in 8-digit ARGB hex format (#AARRGGBBFF)
|
|
17
|
+
*/
|
|
18
|
+
exports.DEFAULT_GRID3_STYLES = {
|
|
19
|
+
Default: {
|
|
20
|
+
BackColour: '#E2EDF8FF',
|
|
21
|
+
TileColour: '#FFFFFFFF',
|
|
22
|
+
BorderColour: '#000000FF',
|
|
23
|
+
FontColour: '#000000FF',
|
|
24
|
+
FontName: 'Arial',
|
|
25
|
+
FontSize: '16',
|
|
26
|
+
},
|
|
27
|
+
Workspace: {
|
|
28
|
+
BackColour: '#FFFFFFFF',
|
|
29
|
+
TileColour: '#FFFFFFFF',
|
|
30
|
+
BorderColour: '#CCCCCCFF',
|
|
31
|
+
FontColour: '#000000FF',
|
|
32
|
+
FontName: 'Arial',
|
|
33
|
+
FontSize: '14',
|
|
34
|
+
},
|
|
35
|
+
'Auto content': {
|
|
36
|
+
BackColour: '#E8F4F8FF',
|
|
37
|
+
TileColour: '#E8F4F8FF',
|
|
38
|
+
BorderColour: '#2C82C9FF',
|
|
39
|
+
FontColour: '#000000FF',
|
|
40
|
+
FontName: 'Arial',
|
|
41
|
+
FontSize: '14',
|
|
42
|
+
},
|
|
43
|
+
'Vocab cell': {
|
|
44
|
+
BackColour: '#E8F4F8FF',
|
|
45
|
+
TileColour: '#E8F4F8FF',
|
|
46
|
+
BorderColour: '#2C82C9FF',
|
|
47
|
+
FontColour: '#000000FF',
|
|
48
|
+
FontName: 'Arial',
|
|
49
|
+
FontSize: '14',
|
|
50
|
+
},
|
|
51
|
+
'Keyboard key': {
|
|
52
|
+
BackColour: '#F0F0F0FF',
|
|
53
|
+
TileColour: '#F0F0F0FF',
|
|
54
|
+
BorderColour: '#808080FF',
|
|
55
|
+
FontColour: '#000000FF',
|
|
56
|
+
FontName: 'Arial',
|
|
57
|
+
FontSize: '12',
|
|
58
|
+
},
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Category-specific styles for navigation and organization
|
|
62
|
+
*/
|
|
63
|
+
exports.CATEGORY_STYLES = {
|
|
64
|
+
'Actions category style': {
|
|
65
|
+
BackColour: '#4472C4FF',
|
|
66
|
+
TileColour: '#4472C4FF',
|
|
67
|
+
BorderColour: '#2F5496FF',
|
|
68
|
+
FontColour: '#FFFFFFFF',
|
|
69
|
+
FontName: 'Arial',
|
|
70
|
+
FontSize: '16',
|
|
71
|
+
},
|
|
72
|
+
'People category style': {
|
|
73
|
+
BackColour: '#ED7D31FF',
|
|
74
|
+
TileColour: '#ED7D31FF',
|
|
75
|
+
BorderColour: '#C65911FF',
|
|
76
|
+
FontColour: '#FFFFFFFF',
|
|
77
|
+
FontName: 'Arial',
|
|
78
|
+
FontSize: '16',
|
|
79
|
+
},
|
|
80
|
+
'Places category style': {
|
|
81
|
+
BackColour: '#A5A5A5FF',
|
|
82
|
+
TileColour: '#A5A5A5FF',
|
|
83
|
+
BorderColour: '#595959FF',
|
|
84
|
+
FontColour: '#FFFFFFFF',
|
|
85
|
+
FontName: 'Arial',
|
|
86
|
+
FontSize: '16',
|
|
87
|
+
},
|
|
88
|
+
'Descriptive category style': {
|
|
89
|
+
BackColour: '#70AD47FF',
|
|
90
|
+
TileColour: '#70AD47FF',
|
|
91
|
+
BorderColour: '#4F7C2FFF',
|
|
92
|
+
FontColour: '#FFFFFFFF',
|
|
93
|
+
FontName: 'Arial',
|
|
94
|
+
FontSize: '16',
|
|
95
|
+
},
|
|
96
|
+
'Social category style': {
|
|
97
|
+
BackColour: '#FFC000FF',
|
|
98
|
+
TileColour: '#FFC000FF',
|
|
99
|
+
BorderColour: '#BF8F00FF',
|
|
100
|
+
FontColour: '#000000FF',
|
|
101
|
+
FontName: 'Arial',
|
|
102
|
+
FontSize: '16',
|
|
103
|
+
},
|
|
104
|
+
'Questions category style': {
|
|
105
|
+
BackColour: '#5B9BD5FF',
|
|
106
|
+
TileColour: '#5B9BD5FF',
|
|
107
|
+
BorderColour: '#2E5C8AFF',
|
|
108
|
+
FontColour: '#FFFFFFFF',
|
|
109
|
+
FontName: 'Arial',
|
|
110
|
+
FontSize: '16',
|
|
111
|
+
},
|
|
112
|
+
'Little words category style': {
|
|
113
|
+
BackColour: '#C55A11FF',
|
|
114
|
+
TileColour: '#C55A11FF',
|
|
115
|
+
BorderColour: '#8B3F0AFF',
|
|
116
|
+
FontColour: '#FFFFFFFF',
|
|
117
|
+
FontName: 'Arial',
|
|
118
|
+
FontSize: '16',
|
|
119
|
+
},
|
|
120
|
+
};
|
|
121
|
+
/**
|
|
122
|
+
* Ensure a color has an alpha channel (Grid3 format requires 8-digit ARGB)
|
|
123
|
+
* @param color - Color string (hex format)
|
|
124
|
+
* @returns Color with alpha channel in format #AARRGGBBFF
|
|
125
|
+
*/
|
|
126
|
+
function ensureAlphaChannel(color) {
|
|
127
|
+
if (!color)
|
|
128
|
+
return '#FFFFFFFF';
|
|
129
|
+
// If already 8 digits (with alpha), return as is
|
|
130
|
+
if (color.match(/^#[0-9A-Fa-f]{8}$/))
|
|
131
|
+
return color;
|
|
132
|
+
// If 6 digits (no alpha), add FF for fully opaque
|
|
133
|
+
if (color.match(/^#[0-9A-Fa-f]{6}$/))
|
|
134
|
+
return color + 'FF';
|
|
135
|
+
// If 3 digits (shorthand), expand to 8
|
|
136
|
+
if (color.match(/^#[0-9A-Fa-f]{3}$/)) {
|
|
137
|
+
const r = color[1];
|
|
138
|
+
const g = color[2];
|
|
139
|
+
const b = color[3];
|
|
140
|
+
return `#${r}${r}${g}${g}${b}${b}FF`;
|
|
141
|
+
}
|
|
142
|
+
// Invalid or unknown format, return white
|
|
143
|
+
return '#FFFFFFFF';
|
|
144
|
+
}
|
|
145
|
+
/**
|
|
146
|
+
* Create a Grid3 style XML string with default and category styles
|
|
147
|
+
* @param includeCategories - Whether to include category-specific styles (default: true)
|
|
148
|
+
* @returns XML string for Settings0/styles.xml
|
|
149
|
+
*/
|
|
150
|
+
function createDefaultStylesXml(includeCategories = true) {
|
|
151
|
+
const builder = new fast_xml_parser_1.XMLBuilder({
|
|
152
|
+
ignoreAttributes: false,
|
|
153
|
+
format: true,
|
|
154
|
+
indentBy: ' ',
|
|
155
|
+
});
|
|
156
|
+
const styles = { ...exports.DEFAULT_GRID3_STYLES };
|
|
157
|
+
if (includeCategories) {
|
|
158
|
+
Object.assign(styles, exports.CATEGORY_STYLES);
|
|
159
|
+
}
|
|
160
|
+
const styleArray = Object.entries(styles).map(([key, style]) => ({
|
|
161
|
+
'@_Key': key,
|
|
162
|
+
BackColour: style.BackColour,
|
|
163
|
+
TileColour: style.TileColour,
|
|
164
|
+
BorderColour: style.BorderColour,
|
|
165
|
+
FontColour: style.FontColour,
|
|
166
|
+
FontName: style.FontName,
|
|
167
|
+
FontSize: style.FontSize?.toString(),
|
|
168
|
+
}));
|
|
169
|
+
const stylesData = {
|
|
170
|
+
StyleData: {
|
|
171
|
+
'@_xmlns:xsi': 'http://www.w3.org/2001/XMLSchema-instance',
|
|
172
|
+
Styles: {
|
|
173
|
+
Style: styleArray,
|
|
174
|
+
},
|
|
175
|
+
},
|
|
176
|
+
};
|
|
177
|
+
return builder.build(stylesData);
|
|
178
|
+
}
|
|
179
|
+
/**
|
|
180
|
+
* Create a custom category style
|
|
181
|
+
* @param categoryName - Name of the category
|
|
182
|
+
* @param backgroundColor - Background color in hex format
|
|
183
|
+
* @param fontColor - Font color in hex format (default: white)
|
|
184
|
+
* @returns Grid3Style object
|
|
185
|
+
*/
|
|
186
|
+
function createCategoryStyle(categoryName, backgroundColor, fontColor = '#FFFFFFFF') {
|
|
187
|
+
return {
|
|
188
|
+
BackColour: ensureAlphaChannel(backgroundColor),
|
|
189
|
+
TileColour: ensureAlphaChannel(backgroundColor),
|
|
190
|
+
BorderColour: ensureAlphaChannel(darkenColor(backgroundColor, 30)),
|
|
191
|
+
FontColour: ensureAlphaChannel(fontColor),
|
|
192
|
+
FontName: 'Arial',
|
|
193
|
+
FontSize: '16',
|
|
194
|
+
};
|
|
195
|
+
}
|
|
196
|
+
/**
|
|
197
|
+
* Darken a hex color by a given amount
|
|
198
|
+
* @param hexColor - Hex color string
|
|
199
|
+
* @param amount - Amount to darken (0-255)
|
|
200
|
+
* @returns Darkened hex color
|
|
201
|
+
*/
|
|
202
|
+
function darkenColor(hexColor, amount) {
|
|
203
|
+
const normalized = ensureAlphaChannel(hexColor);
|
|
204
|
+
const hex = normalized.slice(1, 7); // Extract RGB part (skip # and alpha)
|
|
205
|
+
const num = parseInt(hex, 16);
|
|
206
|
+
const clamp = (value) => Math.max(0, Math.min(255, value));
|
|
207
|
+
const r = clamp(((num >> 16) & 0xff) - amount);
|
|
208
|
+
const g = clamp(((num >> 8) & 0xff) - amount);
|
|
209
|
+
const b = clamp((num & 0xff) - amount);
|
|
210
|
+
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
|
|
211
|
+
}
|
|
@@ -11,5 +11,6 @@ export { getPageTokenImageMap, getAllowedImageEntries, openImage } from './grids
|
|
|
11
11
|
export { getPageTokenImageMap as getGridsetPageTokenImageMap, getAllowedImageEntries as getGridsetAllowedImageEntries, openImage as openGridsetImage, } from './gridset/helpers';
|
|
12
12
|
export { resolveGrid3CellImage } from './gridset/resolver';
|
|
13
13
|
export { createWordlist, extractWordlists, updateWordlist, wordlistToXml, type WordList, type WordListItem, } from './gridset/wordlistHelpers';
|
|
14
|
+
export { DEFAULT_GRID3_STYLES, CATEGORY_STYLES, ensureAlphaChannel, createDefaultStylesXml, createCategoryStyle, type Grid3Style, } from './gridset/styleHelpers';
|
|
14
15
|
export { getPageTokenImageMap as getSnapPageTokenImageMap, getAllowedImageEntries as getSnapAllowedImageEntries, openImage as openSnapImage, } from './snap/helpers';
|
|
15
16
|
export { getPageTokenImageMap as getTouchChatPageTokenImageMap, getAllowedImageEntries as getTouchChatAllowedImageEntries, openImage as openTouchChatImage, } from './touchchat/helpers';
|
package/dist/processors/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.openTouchChatImage = exports.getTouchChatAllowedImageEntries = exports.getTouchChatPageTokenImageMap = exports.openSnapImage = exports.getSnapAllowedImageEntries = exports.getSnapPageTokenImageMap = exports.wordlistToXml = exports.updateWordlist = exports.extractWordlists = exports.createWordlist = exports.resolveGrid3CellImage = exports.openGridsetImage = exports.getGridsetAllowedImageEntries = exports.getGridsetPageTokenImageMap = exports.openImage = exports.getAllowedImageEntries = exports.getPageTokenImageMap = exports.AstericsGridProcessor = exports.TouchChatProcessor = exports.SnapProcessor = exports.OpmlProcessor = exports.ObfProcessor = exports.GridsetProcessor = exports.ExcelProcessor = exports.DotProcessor = exports.ApplePanelsProcessor = void 0;
|
|
3
|
+
exports.openTouchChatImage = exports.getTouchChatAllowedImageEntries = exports.getTouchChatPageTokenImageMap = exports.openSnapImage = exports.getSnapAllowedImageEntries = exports.getSnapPageTokenImageMap = exports.createCategoryStyle = exports.createDefaultStylesXml = exports.ensureAlphaChannel = exports.CATEGORY_STYLES = exports.DEFAULT_GRID3_STYLES = exports.wordlistToXml = exports.updateWordlist = exports.extractWordlists = exports.createWordlist = exports.resolveGrid3CellImage = exports.openGridsetImage = exports.getGridsetAllowedImageEntries = exports.getGridsetPageTokenImageMap = exports.openImage = exports.getAllowedImageEntries = exports.getPageTokenImageMap = exports.AstericsGridProcessor = exports.TouchChatProcessor = exports.SnapProcessor = exports.OpmlProcessor = exports.ObfProcessor = exports.GridsetProcessor = exports.ExcelProcessor = exports.DotProcessor = exports.ApplePanelsProcessor = void 0;
|
|
4
4
|
var applePanelsProcessor_1 = require("./applePanelsProcessor");
|
|
5
5
|
Object.defineProperty(exports, "ApplePanelsProcessor", { enumerable: true, get: function () { return applePanelsProcessor_1.ApplePanelsProcessor; } });
|
|
6
6
|
var dotProcessor_1 = require("./dotProcessor");
|
|
@@ -36,6 +36,13 @@ Object.defineProperty(exports, "createWordlist", { enumerable: true, get: functi
|
|
|
36
36
|
Object.defineProperty(exports, "extractWordlists", { enumerable: true, get: function () { return wordlistHelpers_1.extractWordlists; } });
|
|
37
37
|
Object.defineProperty(exports, "updateWordlist", { enumerable: true, get: function () { return wordlistHelpers_1.updateWordlist; } });
|
|
38
38
|
Object.defineProperty(exports, "wordlistToXml", { enumerable: true, get: function () { return wordlistHelpers_1.wordlistToXml; } });
|
|
39
|
+
// Gridset (Grid 3) style helpers
|
|
40
|
+
var styleHelpers_1 = require("./gridset/styleHelpers");
|
|
41
|
+
Object.defineProperty(exports, "DEFAULT_GRID3_STYLES", { enumerable: true, get: function () { return styleHelpers_1.DEFAULT_GRID3_STYLES; } });
|
|
42
|
+
Object.defineProperty(exports, "CATEGORY_STYLES", { enumerable: true, get: function () { return styleHelpers_1.CATEGORY_STYLES; } });
|
|
43
|
+
Object.defineProperty(exports, "ensureAlphaChannel", { enumerable: true, get: function () { return styleHelpers_1.ensureAlphaChannel; } });
|
|
44
|
+
Object.defineProperty(exports, "createDefaultStylesXml", { enumerable: true, get: function () { return styleHelpers_1.createDefaultStylesXml; } });
|
|
45
|
+
Object.defineProperty(exports, "createCategoryStyle", { enumerable: true, get: function () { return styleHelpers_1.createCategoryStyle; } });
|
|
39
46
|
// Snap helpers (stubs)
|
|
40
47
|
var helpers_3 = require("./snap/helpers");
|
|
41
48
|
Object.defineProperty(exports, "getSnapPageTokenImageMap", { enumerable: true, get: function () { return helpers_3.getPageTokenImageMap; } });
|
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
# Grid3 Styling Guide
|
|
2
|
+
|
|
3
|
+
This guide explains how to work with Grid3 styles using the AACProcessors library.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
Grid3 uses a sophisticated styling system with:
|
|
8
|
+
- **Default styles** for common UI elements
|
|
9
|
+
- **Category styles** for organizing content by semantic meaning
|
|
10
|
+
- **Inline style overrides** for cell-specific customization
|
|
11
|
+
- **Style inheritance** through `BasedOnStyle` references
|
|
12
|
+
|
|
13
|
+
## Default Styles
|
|
14
|
+
|
|
15
|
+
The library provides built-in default styles for common use cases:
|
|
16
|
+
|
|
17
|
+
### Available Default Styles
|
|
18
|
+
|
|
19
|
+
| Style Name | Purpose | Background | Text Color |
|
|
20
|
+
|-----------|---------|-----------|-----------|
|
|
21
|
+
| `Default` | General purpose cells | Light blue (#E2EDF8) | Black |
|
|
22
|
+
| `Workspace` | Message/chat area | White (#FFFFFF) | Black |
|
|
23
|
+
| `Auto content` | Wordlists, predictions | Light blue (#E8F4F8) | Black |
|
|
24
|
+
| `Vocab cell` | Vocabulary cells | Light blue (#E8F4F8) | Black |
|
|
25
|
+
| `Keyboard key` | On-screen keyboard | Light gray (#F0F0F0) | Black |
|
|
26
|
+
|
|
27
|
+
### Category Styles
|
|
28
|
+
|
|
29
|
+
Category styles are used for organizing content by semantic meaning:
|
|
30
|
+
|
|
31
|
+
| Style Name | Color | Use Case |
|
|
32
|
+
|-----------|-------|----------|
|
|
33
|
+
| `Actions category style` | Blue (#4472C4) | Action verbs, commands |
|
|
34
|
+
| `People category style` | Orange (#ED7D31) | Names, people |
|
|
35
|
+
| `Places category style` | Gray (#A5A5A5) | Locations, places |
|
|
36
|
+
| `Descriptive category style` | Green (#70AD47) | Adjectives, descriptors |
|
|
37
|
+
| `Social category style` | Gold (#FFC000) | Social phrases, greetings |
|
|
38
|
+
| `Questions category style` | Light blue (#5B9BD5) | Questions, interrogatives |
|
|
39
|
+
| `Little words category style` | Brown (#C55A11) | Function words, particles |
|
|
40
|
+
|
|
41
|
+
## Using Styles in Code
|
|
42
|
+
|
|
43
|
+
### Import Style Helpers
|
|
44
|
+
|
|
45
|
+
```typescript
|
|
46
|
+
import {
|
|
47
|
+
DEFAULT_GRID3_STYLES,
|
|
48
|
+
CATEGORY_STYLES,
|
|
49
|
+
createDefaultStylesXml,
|
|
50
|
+
createCategoryStyle,
|
|
51
|
+
ensureAlphaChannel,
|
|
52
|
+
} from 'aac-processors';
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Access Predefined Styles
|
|
56
|
+
|
|
57
|
+
```typescript
|
|
58
|
+
// Get a specific default style
|
|
59
|
+
const defaultStyle = DEFAULT_GRID3_STYLES['Default'];
|
|
60
|
+
console.log(defaultStyle.BackColour); // #E2EDF8FF
|
|
61
|
+
|
|
62
|
+
// Get a category style
|
|
63
|
+
const actionStyle = CATEGORY_STYLES['Actions category style'];
|
|
64
|
+
console.log(actionStyle.BackColour); // #4472C4FF
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Create Custom Category Styles
|
|
68
|
+
|
|
69
|
+
```typescript
|
|
70
|
+
// Create a custom category style with automatic border darkening
|
|
71
|
+
const customStyle = createCategoryStyle(
|
|
72
|
+
'My Category',
|
|
73
|
+
'#FF6B6B', // Background color
|
|
74
|
+
'#FFFFFF' // Font color (optional, defaults to white)
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
// Result:
|
|
78
|
+
// {
|
|
79
|
+
// BackColour: '#FF6B6BFF',
|
|
80
|
+
// TileColour: '#FF6B6BFF',
|
|
81
|
+
// BorderColour: '#CB5555FF', // Automatically darkened
|
|
82
|
+
// FontColour: '#FFFFFFFF',
|
|
83
|
+
// FontName: 'Arial',
|
|
84
|
+
// FontSize: '16'
|
|
85
|
+
// }
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Generate Default Styles XML
|
|
89
|
+
|
|
90
|
+
```typescript
|
|
91
|
+
// Generate Settings0/styles.xml with all default and category styles
|
|
92
|
+
const stylesXml = createDefaultStylesXml(true);
|
|
93
|
+
|
|
94
|
+
// Or just default styles without categories
|
|
95
|
+
const basicStylesXml = createDefaultStylesXml(false);
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Ensure Color Has Alpha Channel
|
|
99
|
+
|
|
100
|
+
Grid3 requires colors in 8-digit ARGB format (#AARRGGBBFF):
|
|
101
|
+
|
|
102
|
+
```typescript
|
|
103
|
+
import { ensureAlphaChannel } from 'aac-processors';
|
|
104
|
+
|
|
105
|
+
ensureAlphaChannel('#FF0000'); // Returns: #FF0000FF
|
|
106
|
+
ensureAlphaChannel('#F00'); // Returns: #FF0000FF
|
|
107
|
+
ensureAlphaChannel('#FF0000FF'); // Returns: #FF0000FF (unchanged)
|
|
108
|
+
ensureAlphaChannel(undefined); // Returns: #FFFFFFFF (white)
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Applying Styles to Cells
|
|
112
|
+
|
|
113
|
+
### Using BasedOnStyle Reference
|
|
114
|
+
|
|
115
|
+
In Grid3 XML, cells reference styles by name:
|
|
116
|
+
|
|
117
|
+
```xml
|
|
118
|
+
<Cell X="0" Y="0">
|
|
119
|
+
<Content>
|
|
120
|
+
<CaptionAndImage>
|
|
121
|
+
<Caption>Hello</Caption>
|
|
122
|
+
</CaptionAndImage>
|
|
123
|
+
<Style>
|
|
124
|
+
<BasedOnStyle>Actions category style</BasedOnStyle>
|
|
125
|
+
</Style>
|
|
126
|
+
</Content>
|
|
127
|
+
</Cell>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Inline Style Overrides
|
|
131
|
+
|
|
132
|
+
You can override specific properties while keeping the base style:
|
|
133
|
+
|
|
134
|
+
```xml
|
|
135
|
+
<Cell X="1" Y="0">
|
|
136
|
+
<Content>
|
|
137
|
+
<CaptionAndImage>
|
|
138
|
+
<Caption>Custom</Caption>
|
|
139
|
+
</CaptionAndImage>
|
|
140
|
+
<Style>
|
|
141
|
+
<BasedOnStyle>Default</BasedOnStyle>
|
|
142
|
+
<BackColour>#FF0000FF</BackColour> <!-- Override background -->
|
|
143
|
+
<FontSize>20</FontSize> <!-- Override font size -->
|
|
144
|
+
</Style>
|
|
145
|
+
</Content>
|
|
146
|
+
</Cell>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Color Format
|
|
150
|
+
|
|
151
|
+
Grid3 uses 8-digit ARGB hexadecimal format: `#AARRGGBBFF`
|
|
152
|
+
|
|
153
|
+
- **AA**: Alpha channel (FF = fully opaque, 00 = fully transparent)
|
|
154
|
+
- **RR**: Red component (00-FF)
|
|
155
|
+
- **GG**: Green component (00-FF)
|
|
156
|
+
- **BB**: Blue component (00-FF)
|
|
157
|
+
- **FF**: Always FF for Grid3 (fully opaque)
|
|
158
|
+
|
|
159
|
+
### Examples
|
|
160
|
+
|
|
161
|
+
| Color | Hex Code | Description |
|
|
162
|
+
|-------|----------|-------------|
|
|
163
|
+
| White | #FFFFFFFF | Fully opaque white |
|
|
164
|
+
| Black | #000000FF | Fully opaque black |
|
|
165
|
+
| Red | #FF0000FF | Fully opaque red |
|
|
166
|
+
| Blue | #0000FFFF | Fully opaque blue |
|
|
167
|
+
| Green | #00FF00FF | Fully opaque green |
|
|
168
|
+
|
|
169
|
+
## Style Inheritance
|
|
170
|
+
|
|
171
|
+
Grid3 uses a cascading style system:
|
|
172
|
+
|
|
173
|
+
1. **Theme** provides base properties (Modern, Kids/Bubble, Flat/Blocky, Explorer)
|
|
174
|
+
2. **Built-in style** defines category defaults
|
|
175
|
+
3. **Cell-specific overrides** apply on top
|
|
176
|
+
|
|
177
|
+
```xml
|
|
178
|
+
<!-- Example: Override just the background color -->
|
|
179
|
+
<Style>
|
|
180
|
+
<BasedOnStyle>Actions category style</BasedOnStyle>
|
|
181
|
+
<BackColour>#FF0000FF</BackColour> <!-- Override just this property -->
|
|
182
|
+
</Style>
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
## Creating Gridsets with Styles
|
|
186
|
+
|
|
187
|
+
### Using GridsetProcessor
|
|
188
|
+
|
|
189
|
+
```typescript
|
|
190
|
+
import { GridsetProcessor, AACTree, AACPage, AACButton } from 'aac-processors';
|
|
191
|
+
|
|
192
|
+
const processor = new GridsetProcessor();
|
|
193
|
+
const tree = new AACTree();
|
|
194
|
+
|
|
195
|
+
// Create a page with styling
|
|
196
|
+
const page = new AACPage({
|
|
197
|
+
id: 'main-page',
|
|
198
|
+
name: 'Main Board',
|
|
199
|
+
grid: [],
|
|
200
|
+
buttons: [],
|
|
201
|
+
parentId: null,
|
|
202
|
+
style: {
|
|
203
|
+
backgroundColor: '#f0f8ff',
|
|
204
|
+
fontFamily: 'Arial',
|
|
205
|
+
fontSize: 16,
|
|
206
|
+
},
|
|
207
|
+
});
|
|
208
|
+
|
|
209
|
+
// Create styled buttons
|
|
210
|
+
const button = new AACButton({
|
|
211
|
+
id: 'btn-1',
|
|
212
|
+
label: 'Hello',
|
|
213
|
+
message: 'Hello, how are you?',
|
|
214
|
+
style: {
|
|
215
|
+
backgroundColor: '#4472C4', // Blue (Actions category)
|
|
216
|
+
fontColor: '#FFFFFF',
|
|
217
|
+
fontSize: 18,
|
|
218
|
+
fontFamily: 'Arial',
|
|
219
|
+
},
|
|
220
|
+
});
|
|
221
|
+
|
|
222
|
+
page.addButton(button);
|
|
223
|
+
tree.addPage(page);
|
|
224
|
+
|
|
225
|
+
// Save with styles
|
|
226
|
+
processor.saveFromTree(tree, 'output.gridset');
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
### Using Grid-Generator
|
|
230
|
+
|
|
231
|
+
```typescript
|
|
232
|
+
import { generateGridset } from '@willwade/grid-generator';
|
|
233
|
+
|
|
234
|
+
const template = {
|
|
235
|
+
aacsystem: 'Grid3',
|
|
236
|
+
homeGrid: {
|
|
237
|
+
enabled: true,
|
|
238
|
+
name: 'Home',
|
|
239
|
+
title: 'Categories',
|
|
240
|
+
},
|
|
241
|
+
wordlists: [
|
|
242
|
+
{
|
|
243
|
+
name: 'Greetings',
|
|
244
|
+
items: ['Hello', 'Hi', 'Hey'],
|
|
245
|
+
partOfSpeech: 'Interjection',
|
|
246
|
+
},
|
|
247
|
+
],
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
const gridset = generateGridset(template);
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
## Best Practices
|
|
254
|
+
|
|
255
|
+
1. **Use category styles** for semantic organization - helps with accessibility and consistency
|
|
256
|
+
2. **Maintain contrast** - ensure text color has sufficient contrast with background
|
|
257
|
+
3. **Use consistent fonts** - stick to standard fonts like Arial, Verdana, or Roboto
|
|
258
|
+
4. **Test in Grid3** - always verify styling in the actual Grid3 application
|
|
259
|
+
5. **Document custom styles** - if creating custom category styles, document their purpose
|
|
260
|
+
6. **Use inline overrides sparingly** - prefer creating new styles for significant variations
|
|
261
|
+
|
|
262
|
+
## Troubleshooting
|
|
263
|
+
|
|
264
|
+
### Styles Not Appearing
|
|
265
|
+
|
|
266
|
+
- Verify `Settings0/styles.xml` exists in the gridset
|
|
267
|
+
- Check that style names in cells match exactly (case-sensitive)
|
|
268
|
+
- Ensure colors are in 8-digit ARGB format
|
|
269
|
+
|
|
270
|
+
### Colors Look Wrong
|
|
271
|
+
|
|
272
|
+
- Verify alpha channel is FF (fully opaque)
|
|
273
|
+
- Check RGB values are correct
|
|
274
|
+
- Test in Grid3 to see actual rendering
|
|
275
|
+
|
|
276
|
+
### Performance Issues
|
|
277
|
+
|
|
278
|
+
- Avoid creating too many unique styles (consolidate similar styles)
|
|
279
|
+
- Use style references instead of inline overrides when possible
|
|
280
|
+
- Keep font sizes reasonable (12-24 points typical)
|
|
281
|
+
|
|
282
|
+
## See Also
|
|
283
|
+
|
|
284
|
+
- [Grid3 XML Format Documentation](./Grid3-XML-Format.md)
|
|
285
|
+
- [Wordlist Helpers Guide](./Grid3-Wordlist-Helpers.md)
|
|
286
|
+
- [AACProcessors API Reference](./API-Reference.md)
|
|
287
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@willwade/aac-processors",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "A comprehensive TypeScript library for processing AAC (Augmentative and Alternative Communication) file formats with translation support",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|