https://wiki.gideros.rocks/index.php?title=UI_Color_Picker&feed=atom&action=history
UI Color Picker - Revision history
2024-03-29T14:55:09Z
Revision history for this page on the wiki
MediaWiki 1.35.11
https://wiki.gideros.rocks/index.php?title=UI_Color_Picker&diff=22639&oldid=prev
MoKaLux at 18:43, 12 October 2023
2023-10-12T18:43:54Z
<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en-GB">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 18:43, 12 October 2023</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>__TOC__</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>__TOC__</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><languages /></del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">Here you will find various resources to help you create color pickers in Gideros Studio.</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><translate><!--T:1--> Here you will find various resources to help you create color pickers in Gideros Studio.</translate></del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>'''note''': <ins class="diffchange diffchange-inline">you </ins>may have to provide your own assets (fonts, gfx, …)</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><translate><!--T:1--> </del>'''note''':<del class="diffchange diffchange-inline">You </del>may have to provide your own assets (fonts, gfx, …)<del class="diffchange diffchange-inline">.</translate></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">=== <translate>Color Picker</translate> ===</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><br/></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">=== Color Picker ===</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="lua"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="lua"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>ColorPicker = Core.class(Sprite)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>ColorPicker = Core.class(Sprite)</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l115" >Line 115:</td>
<td colspan="2" class="diff-lineno">Line 110:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>--end</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>--end</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>--colorPicker:addEventListener("COLOR_CHANGED", onColorChanged)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>--colorPicker:addEventListener("COLOR_CHANGED", onColorChanged)</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></<del class="diffchange diffchange-inline">source></del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></<ins class="diffchange diffchange-inline">syntaxhighlight </ins>></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><br/</del>></div></td><td colspan="2"> </td></tr>
</table>
MoKaLux
https://wiki.gideros.rocks/index.php?title=UI_Color_Picker&diff=22136&oldid=prev
Hgy29: Text replacement - "<source" to "<syntaxhighlight"
2023-07-13T13:32:43Z
<p>Text replacement - "<source" to "<syntaxhighlight"</p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en-GB">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 13:32, 13 July 2023</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l11" >Line 11:</td>
<td colspan="2" class="diff-lineno">Line 11:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><br/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><br/></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del class="diffchange diffchange-inline">source </del>lang="lua"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins class="diffchange diffchange-inline">syntaxhighlight </ins>lang="lua"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>ColorPicker = Core.class(Sprite)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>ColorPicker = Core.class(Sprite)</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>
Hgy29
https://wiki.gideros.rocks/index.php?title=UI_Color_Picker&diff=13398&oldid=prev
MoKaLux: added content
2019-08-12T21:44:58Z
<p>added content</p>
<p><b>New page</b></p><div>__TOC__<br />
<br />
<languages /><br />
<br />
<translate><!--T:1--> Here you will find various resources to help you create color pickers in Gideros Studio.</translate><br />
<br />
<br />
<translate><!--T:1--> '''note''':You may have to provide your own assets (fonts, gfx, …).</translate><br />
<br />
=== <translate>Color Picker</translate> ===<br />
<br/><br />
<br />
<source lang="lua"><br />
ColorPicker = Core.class(Sprite)<br />
<br />
function ColorPicker:init()<br />
self.colors = {<br />
0xFFFFFF, 0x99CCFF, 0xCCFFFF, 0xFFFF99, 0xFFCC99, 0xFF99CC,<br />
0xC0C0C0, 0x993366, 0x00CCFF, 0x00FFFF, 0x00FF00, 0xFFFF00,<br />
0xFFCC00, 0xFF00FF, 0x999999, 0x800080, 0x3366FF, 0x33CCCC,<br />
0x339966, 0x99CC00, 0xFF9900, 0xFF0000, 0x808080, 0x666699,<br />
0x0000FF, 0x008080, 0x008000, 0x808000, 0xFF6600, 0x800000,<br />
0x333333, 0x333399, 0x000080, 0x333300, 0x993300, 0x000000<br />
}<br />
self.currColor = self.colors[1] --current color<br />
self.colW = 31 --column width<br />
self.colH = 22 --column height<br />
self.ind = 2 --indent size<br />
self.m = 6 -- collumn count<br />
local ip, fp = math.modf(#self.colors/self.m)<br />
self.n = ip<br />
if fp > 0 then<br />
self.n = self.n + 1<br />
end<br />
self:drawButton(self.currColor)<br />
self:drawPallete()<br />
self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)<br />
end<br />
<br />
function ColorPicker:drawRec(x, y, w, h, bw, bc, ba, fc, fa)<br />
local shape = Shape.new()<br />
shape:setLineStyle(bw, bc, ba)<br />
shape:setFillStyle(Shape.SOLID, fc, fa)<br />
shape:beginPath()<br />
shape:moveTo(x, y)<br />
shape:lineTo(x + w, y)<br />
shape:lineTo(x + w, y + h)<br />
shape:lineTo(x, y + h)<br />
shape:closePath()<br />
shape:endPath()<br />
return shape<br />
end<br />
<br />
function ColorPicker:drawButton(color)<br />
self.btn = self:drawRec(0, 0, self.colW, self.colH, 1, 0x000000, 1, color, 1)<br />
self:addChild(self.btn)<br />
end<br />
<br />
function ColorPicker:drawPallete()<br />
self.pallete = self:drawRec(0, self.colH + self.ind,<br />
self.m*self.colW + self.ind*(self.m + 1), self.n*self.colH + self.ind*(self.n + 1), <br />
1, 0x000000, 1, 0xDDDDDD, 1)<br />
self.pallete.colors = {}<br />
self:addChild(self.pallete)<br />
self.pallete:setVisible(false)<br />
local x, y = 0, self.colH + self.ind<br />
for i = 1, self.n do<br />
y = y + self.ind<br />
for j = 1, self.m do<br />
if (i - 1)*self.m + j > #self.colors then<br />
return<br />
end<br />
x = x + self.ind<br />
local ci = (i - 1)*self.m + j<br />
self.pallete.colors[ci] = self:drawRec(x, y, self.colW, self.colH, 1, 0x000000, 1, self.colors[ci], 1)<br />
self.pallete:addChild(self.pallete.colors[ci])<br />
x = x + self.colW<br />
end<br />
x = 0<br />
y = y + self.colH<br />
end<br />
end<br />
<br />
function ColorPicker:onMouseDown(e)<br />
if self.btn:hitTestPoint(e.x, e.y) then<br />
self.pallete:setVisible(not self.pallete:isVisible())<br />
return<br />
end<br />
if self.pallete:isVisible() then<br />
for i = 1, #self.pallete.colors do<br />
local color = self.pallete.colors[i]<br />
if color:hitTestPoint(e.x, e.y) then<br />
self.currColor = self.colors[i]<br />
self:drawButton(self.currColor)<br />
self.pallete:setVisible(false)<br />
self:changeColor()<br />
return<br />
end<br />
end<br />
end<br />
end<br />
<br />
function ColorPicker:changeColor()<br />
self.e = Event.new("COLOR_CHANGED")<br />
self.e.color = self.currColor<br />
self:dispatchEvent(self.e)<br />
end<br />
<br />
---- USAGE<br />
--local colorPicker = ColorPicker.new()<br />
--stage:addChild(colorPicker)<br />
--colorPicker:setPosition(10, 10)<br />
--function onColorChanged(e)<br />
-- application:setBackgroundColor(e.color)<br />
--end<br />
--colorPicker:addEventListener("COLOR_CHANGED", onColorChanged)<br />
</source><br />
<br/></div>
MoKaLux