2014-03-28, 21:03
My approach is as follows:
1. create a white image for tiles; tile.png (4px4p)
2. create a tile for each color available: 00.png, 01.png, 03.png, etc.. (4px4p)
3. place the color tiles in folder such as "thumbs/tiles/"
4. use a color settting string to store the color: Skin.String(Setting.CustomTileColor)
5. create a container to display and select from the available colors
- add as many colors as needed
- use something meaningful for the label tag
- point the icon to the thumb of the selectable color
- change the setting's value to the color selected using "onclick"
6. create a group of controls for each tile or use a container
- image: the actual tile
- image: the icon
- label: if displaying the tile's name
- a button for the focus; could also use this for the image icon
7. add a default color to either the startup.xml or settingsCategory.xml, in case the user cancels setup
CONTAINER: Custom Tile Color Selector
TIP
If you wish to enable transparency; you can add change the value "FF" to any number from 0-99, this indicates a transparency level.
Example: 75FF2A77 - this would give the color a 75% transparency
I hope this makes sense...
1. create a white image for tiles; tile.png (4px4p)
2. create a tile for each color available: 00.png, 01.png, 03.png, etc.. (4px4p)
3. place the color tiles in folder such as "thumbs/tiles/"
4. use a color settting string to store the color: Skin.String(Setting.CustomTileColor)
5. create a container to display and select from the available colors
- add as many colors as needed
- use something meaningful for the label tag
Code:
<label>foo</label>
Code:
<icon>backgrounds/thumbs/tiles/01.png</icon>
Code:
<onclick>Skin.SetString(Setting.CustomTileColor,FF0B99B3)</onclick>
- image: the actual tile
Code:
<control type="image">
<posy>0</posy>
<posx>0</posx>
<width>155</width>
<height>102</height>
<aspectratio>stretch</aspectratio>
<texture>common/tile.png</texture>
<colordiffuse>Skin.String(Setting.CustomTileColor)</colordiffuse>
</control>
- label: if displaying the tile's name
- a button for the focus; could also use this for the image icon
7. add a default color to either the startup.xml or settingsCategory.xml, in case the user cancels setup
Code:
<onload condition="!Skin.HasSetting(Setting.Dashboard.HasDefaults)">Skin.SetString(Setting.CustomTileColor,FF428D05)</onload>
CONTAINER: Custom Tile Color Selector
Code:
<control type="panel" id="9506"> <!-- CONTAINER | custom tile colors selector -->
<width>288</width>
<height>108</height>
<focusposition>0</focusposition>
<scrolltime>600</scrolltime>
<fadetime>400</fadetime>
<viewtype>list</viewtype>
<orientation>vertical</orientation>
<onup></onup>
<ondown></ondown>
<onleft></onleft>
<onright></onright>
<itemlayout width="36" height="36">
<control type="image"> <!-- listItem.icon -->
<posy>4</posy>
<posx>4</posx>
<width>28</width>
<height>28</height>
<aspectratio>stretch</aspectratio>
<texture>$INFO[ListItem.Icon]</texture>
</control>
</itemlayout>
<focusedlayout width="36" height="36">
<control type="image"> <!-- listItem.icon -->
<posy>4</posy>
<posx>4</posx>
<width>28</width>
<height>28</height>
<aspectratio>stretch</aspectratio>
<texture>$INFO[ListItem.Icon]</texture>
<bordertexture>backgrounds/thumbs/tiles/00.png</bordertexture>
<bordersize>2</bordersize>
</control>
</focusedlayout>
<content>
<item>
<label>FF428D05</label>
<icon>backgrounds/thumbs/tiles/01.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF428D05)</onclick>
</item>
<item>
<label>FF0B99B3</label>
<icon>backgrounds/thumbs/tiles/02.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF0B99B3)</onclick>
</item>
<item>
<label>FF00389E</label>
<icon>backgrounds/thumbs/tiles/03.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF00389E)</onclick>
</item>
<item>
<label>FFFF8FE3</label>
<icon>backgrounds/thumbs/tiles/04.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FFFF8FE3)</onclick>
</item>
<item>
<label>FFFF3200</label>
<icon>backgrounds/thumbs/tiles/05.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FFFF3200)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/06.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF794D1F)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/07.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF4D6372)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/08.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF005900)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/09.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF0074E3)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/10.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF7D25FF)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/11.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FFFF2A77)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/12.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FFFF6F10)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/13.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF726F53)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/14.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF6C6D6C)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/15.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF005D59)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/16.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF0D52FF)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/17.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FFCB30FF)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/18.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FFC62214)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/19.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FFFF9E00)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/20.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF4D6A62)</onclick>
</item>
<item>
<label>-</label>
<icon>backgrounds/thumbs/tiles/21.png</icon>
<onclick>Skin.SetString(Setting.CustomTileColor,FF4E4035)</onclick>
</item>
</content>
</control>
TIP
If you wish to enable transparency; you can add change the value "FF" to any number from 0-99, this indicates a transparency level.
Example: 75FF2A77 - this would give the color a 75% transparency
I hope this makes sense...