Author Topic: Simple little color picker  (Read 4401 times)

0 Members and 1 Guest are viewing this topic.

This topic contains a post which is marked as Best Answer. Press here if you would like to see it.

Offline Dav

  • Forum Resident
  • Posts: 792
    • View Profile
Simple little color picker
« on: September 05, 2020, 10:36:20 pm »
Working on a little color picker for a new version of the Quaddraw program.  Thought I'd share it here in case it can be useful to others.  It's not much, just a little image of colors which you can select a desired color using the mouse.  Hover the mouse over a color, click left button to select it.  Press a key to save selection.  Will turn it into a function for the QuadDraw program, and probably convert the colorpicker image to QB64 code using BasImage too.

- Dav

NOTE: Updated version here, now requiring no image file:
https://www.qb64.org/forum/index.php?topic=2989.msg122484#msg122484


Code: QB64: [Select]
  1. '===============
  2. 'COLORPICKER.BAS
  3. '===============
  4. 'Simple color picker method using image file.
  5. 'Coded by Dav for QB64-GL 1.4, SEP/2020
  6.  
  7. 'Use mouse, hover over color.
  8. 'Click mouse button to select color.
  9. 'Press any key to exit and save selection.
  10.  
  11. 'NOTE: REQUIRES INCLUDED FILE; COLORPICKER.PNG
  12.  
  13.  
  14. SCREEN _NEWIMAGE(473, 243, 32)
  15.  
  16. '=== load color picker image
  17. colors& = _LOADIMAGE("colorpicker.png")
  18. _PUTIMAGE (0, 0), colors&
  19.  
  20. '=== no selection made yet
  21. selected = 0
  22.  
  23. '=== main loop
  24.     '=== Get mouse input
  25.         '=== Get mouse x/y
  26.         mx = _MOUSEX: my = _MOUSEY
  27.         '=== Get color where mouse pointer is
  28.         clr& = POINT(mx, my)
  29.         '=== Make Red Green Blue color values
  30.         red = _RED32(clr&): grn = _GREEN32(clr&): blu = _BLUE32(clr&)
  31.         '=== Only poll this area
  32.         IF mx < 473 AND my < 243 THEN
  33.             '=== if click button in area
  34.             IF _MOUSEBUTTON(1) THEN
  35.                 '=== made a selection
  36.                 selected = 1
  37.                 '=== show color selected in box
  38.                 LINE (255, 170)-(383, 233), _RGB(red, grn, blu), BF
  39.             END IF
  40.             '=== update screen
  41.             _DISPLAY
  42.         END IF
  43.     WEND
  44.     '=== don't be a cpu pig
  45.     _LIMIT 60
  46.  
  47. '=== if user selected color, say so
  48. IF selected = 1 THEN
  49.     PRINT "Choose:"; red; grn; blu
  50.  

Colorpicker.png image:
 
colorpicker.png


Complete package of BAS + PNG image in a .ZIP (4k):
 
« Last Edit: September 06, 2020, 10:16:17 pm by Dav »

Offline johnno56

  • Forum Resident
  • Posts: 1270
  • Live long and prosper.
    • View Profile
Re: Simple little color picker
« Reply #1 on: September 06, 2020, 02:04:51 am »
Am I permitted to use some of this code for my sprite editor? I have always had problems, using QB64 and point(), to correctly determine a chosen colour... Converting a bunch of calculations to work out the RGB value of a 'point' colour.... A headache! Then I spot _RED32 etc... to do the conversion in just one command! Oh man. If I had spotted those gems ages ago... Do you know how many coffees were involved in THAT part of the editor... Well... When it comes to coffee... It was worth it... lol... I think my headache was caused by that fact that, those calculations were based on 256x256x256 colours... until I printed the output of 'point()' detecting yellow... Cannot recall the number but it was well over the 16+ million... which lead me to conclude that QB64 colours must also include a 256 level alpha channel (guess)... Well, that destroyed the calculations that I was using.... Oh, and you call this colourpicker, 'simple'... You are obviously armed with FAR more knowledge and experience than I... 'You' may call it simple... 'I' call it a work of art... (works with both intended and unintended pun... who knew? lol)
Logic is the beginning of wisdom.

Offline Dav

  • Forum Resident
  • Posts: 792
    • View Profile
Re: Simple little color picker
« Reply #2 on: September 06, 2020, 10:45:45 am »
Sure, @johnno56 you can freely use anything I make here. When I get back home to my laptop today I want to add that when the user clicks a color, the gradient strip will show a gradient of that color. I also want to put this into a single function that returns a color so that people can easily add it to their programs.

- Dav (drinking coffee now)


Offline Dav

  • Forum Resident
  • Posts: 792
    • View Profile
Re: Simple little color picker
« Reply #3 on: September 06, 2020, 04:07:12 pm »
A little update to add changing gradient strip. 

Gradient strip changes when selecting a color, so you can go to it and choose just the right shade of that color.  You need the image in original post for this code to work.

- Dav

Code: QB64: [Select]
  1. '===============
  2. 'COLORPICKER.BAS v1.1
  3. '===============
  4. 'Simple color picker method using image file.
  5. 'Coded by Dav for QB64-GL 1.4, SEP/2020
  6.  
  7. 'NEW for v 1.1 - Added changing gradient color strip
  8.  
  9. 'Use mouse, hover over color.
  10. 'Click mouse button to select color.
  11. 'Press any key to exit and save selection.
  12.  
  13. 'NOTE: REQUIRES INCLUDED FILE; COLORPICKER.PNG
  14.  
  15.  
  16. SCREEN _NEWIMAGE(473, 243, 32)
  17.  
  18. '=== load color picker image
  19. colors& = _LOADIMAGE("colorpicker.png")
  20. _PUTIMAGE (0, 0), colors&
  21.  
  22. '=== no selection made yet
  23. selected = 0
  24.  
  25. '=== main loop
  26.     '=== Get mouse input
  27.         '=== Get mouse x/y
  28.         mx = _MOUSEX: my = _MOUSEY
  29.         '=== Get color where mouse pointer is
  30.         clr& = POINT(mx, my)
  31.         '=== Make Red Green Blue color values
  32.         red = _RED32(clr&): grn = _GREEN32(clr&): blu = _BLUE32(clr&)
  33.         '=== Only poll this area
  34.         IF mx < 473 AND my < 243 THEN
  35.             '=== if click button in area
  36.             IF _MOUSEBUTTON(1) THEN
  37.                 '=== made a selection
  38.                 selected = 1
  39.                 '=== show color selected in box
  40.                 LINE (255, 170)-(383, 233), _RGB(red, grn, blu), BF
  41.                 '=== Update gradient strip with color...
  42.                 '=== ...only if mouse not in gradient strip area
  43.                 IF mx <= 255 OR mx >= 466 OR my <= 133 OR my >= 163 THEN
  44.                     c = 0
  45.                     FOR x = 462 TO 251 STEP -4
  46.                         LINE (x, 133)-(x + 4, 163), _RGB(red + c, grn + c, blu + c), BF
  47.                         c = c + 4
  48.                     NEXT
  49.                 END IF
  50.             END IF
  51.             '=== update screen
  52.             _DISPLAY
  53.         END IF
  54.     WEND
  55.     '=== don't be a cpu pig
  56.     _LIMIT 60
  57.  
  58. '=== if user selected color, say so
  59. IF selected = 1 THEN
  60.     PRINT "Choose:"; red; grn; blu
  61.  

Marked as best answer by Dav on September 06, 2020, 06:14:46 pm

Offline Dav

  • Forum Resident
  • Posts: 792
    • View Profile
Re: Simple little color picker
« Reply #4 on: September 06, 2020, 10:14:25 pm »
I finished the ColorPicker& FUNCTION.  Now it's complete with no external image file needed, and it's easy to add to any program - just add the single function.  The ColorPicker& Function returns the color value picked.  The DEMO code below shows how to use it.  The Function saves/restores display and status to be program friendly as possible.

- Dav

Code: QB64: [Select]
  1. '===============
  2. 'COLORPICKER.BAS v1.2
  3. '===============
  4. 'Simple to use color picker function.
  5. 'Coded by Dav for QB64-GL 1.4, SEP/2020
  6.  
  7. 'Follow this programs development here:
  8. 'https://www.qb64.org/forum/index.php?topic=2989.0
  9.  
  10. 'Use mouse, hover over color to pick..
  11. 'Click left mouse button to select the color.
  12. 'Press CLOSE to exit picker and return selected color.
  13.  
  14. 'NEW for v 1.2 - Complete function now using built-in image
  15.  
  16.  
  17. '===== DEMO OF USING COLORPICKER =======
  18.  
  19. SCREEN _NEWIMAGE(600, 600, 32)
  20.  
  21. PAINT (0, 0), _RGB(33, 66, 99)
  22.  
  23. '=== draw stuff
  24. FOR x = 25 TO 575 STEP 3
  25.     FOR y = 25 TO 575 STEP 3
  26.         PSET (x, y), _RGB(RND * 255, RND * 255, RND * 255)
  27.     NEXT
  28.  
  29.  
  30. clr& = ColorPicker&(75, 150)
  31.  
  32.  
  33. IF clr& <> 0 THEN
  34.     '=== break clr& into RGB valued
  35.     red = _RED32(clr&): grn = _GREEN32(clr&): blu = _BLUE32(clr&)
  36.     '=== draw something to show color picked
  37.     LINE (50, 50)-(150, 150), _RGB(red, grn, blu), BF
  38.     '=== Print color values to user
  39.     PRINT "Selected color: "; clr&; red; grn; blu
  40.     PRINT "No color selected"
  41.  
  42. '===== COLORPICKER DEMO ENDS HERE =====
  43.  
  44.  
  45. '==================================================================
  46. FUNCTION ColorPicker& (xpos, ypos)
  47.     'ColorPicker& Function by Dav, SEP/2020. FREE TO USE FOR ALL
  48.     'Function Returns color picked by user if one selected.
  49.     'If no color selected before Closing, function returns 0
  50.     'Click CLOSE to close the ColorPicker image.
  51.     'ESC key cancels selection and closes picker too.
  52.     'The xpos/ypos is x/y point on the screen to place colorpicker
  53.  
  54.     '=== Save users display status
  55.     DisplayStatus% = _AUTODISPLAY
  56.  
  57.     '=== copy background screen using _mem (thanks Steve!)
  58.     '=== Used this method because_COPYIMAGE(_DISPLAY) didnt always work
  59.     DIM scr1 AS _MEM, scr2 AS _MEM
  60.     scr1 = _MEMIMAGE(0): scr2 = _MEMNEW(scr1.SIZE)
  61.     _MEMCOPY scr1, scr1.OFFSET, scr1.SIZE TO scr2, scr2.OFFSET
  62.  
  63.     'Create Colorpicker image
  64.     v& = _NEWIMAGE(463, 239, 32)
  65.     DIM m AS _MEM: m = _MEMIMAGE(v&)
  66.     A$ = "" '...COLORPICKER.PNG encoded by BASIMAGE...
  67.     A$ = A$ + "haIkMo7KDGOh77_oaBfFFfOhBL9c5gGWaX9BRK62K46AkHnS9I=`09EP<4V="
  68.     A$ = A$ + "e25F]0eB;]jK;#YFXUEJQJGM573`644fjGM:62H66L42I^89^HF<co`T]oHo"
  69.     A$ = A$ + "anW]TUUk;O2BnLONnmjek3L7m>li;cS4;]LohSGjC_[gM=C6WciL>WciL>Wc"
  70.     A$ = A$ + "iL>WciL>WciL>WciLOFMgBE9=CX6XN80S0C0W7n48C2O2LNH2H480e3e0c4^"
  71.     A$ = A$ + "5XZHUa7hn4hl`4`8#0Z7Z1V9L;#boQOFngVWjlLWGjhUNN]SGkiAW:SK^U[]"
  72.     A$ = A$ + "lUDW:cUmbnoNZbCf>]MJkdfYVnIk\bR]CKWf>o\CkdEn=KWEVBc:SC0I:[oV"
  73.     A$ = A$ + "IUa7h\MJkd=m>KWEVBc:SC0I:[oVIUa7h\MJkd=m>KWEVBc:SC0I:[oVIUa7"
  74.     A$ = A$ + "h\MJkd=m>KWEVBc:SC0I:[oVIUa7h\MJkd=m>KWEVBc^e?go9QI1;0NB80_0"
  75.     A$ = A$ + "LLhL`73oW4nHhL`aQG02`C2;0V5L[`W;f]2c2F0lT#0N1hh`iP?6n?anHhL`"
  76.     A$ = A$ + "aQG02`C2;0V5L[`W;QK5V5\0h9Q0l2`aQc1O<lORma`iPS3_04PW4F0<;hFQ"
  77.     A$ = A$ + "?G\2mk?k:?V]c:CYIf>]MJkdfY[h>KWEVBc\MJkdfY]CGaMf>[<UVIkdfY]C"
  78.     A$ = A$ + "KW^Rk\MFI:=cfY]CKWf>M5gIk\bDJV]CKWf>]Mj:^cfIUYd<KWf>]MJkdELW"
  79.     A$ = A$ + "]c:CYIf>]MJkdfY[h>KWEVBc^]_ho:QI3;4J02```aPc2O4l_BhSPc273662"
  80.     A$ = A$ + "#3`2QI3g6l5SMK`\Q52=01HHhH`IQ?2nGan8h\`aPQQ0d0\#Hf`]1Oa4^=Hf"
  81.     A$ = A$ + "`2Q6P0<<L<h\`71o[HO4LFhH``#0J0F8<KhfP_H\2mk?k:?V]c:CYIf>]MJk"
  82.     A$ = A$ + "dfY[h>KWEVBc\MJkdfY]CGaM5[fiMOgIbl\?KV<o_o_IbLZC5[gNcTiaOl<I"
  83.     A$ = A$ + "^iK>oom_okObmoloDhG>R>OR>oR>O_J^LT[C[X[GIOJ59j?Knc?oWNAG^cge"
  84.     A$ = A$ + "[LY#_lUVIkdfY]CKW^Rk^FKWcJFIbl7n35fie#3=i]Ql]X>EQdifgn:\;7AO"
  85.     A$ = A$ + "Mi[A5miR>?oKo]Ynd:j[Ib>mR>=BkRjWf>]MJkdfId\MFn^[UfiBFBj?onX?"
  86.     A$ = A$ + "jbg7eRIk<jngmn_Oj^L4meW[NGdOFJ?]V\[Gf>]MJkdfY]cK<gEKk<ja[lZM"
  87.     A$ = A$ + "AM6f]bgVZfiEC[;JAomhYEQNOGceR^ogf>]MJkdfY]cKlgEKk<ZoM]<f3CcG"
  88.     A$ = A$ + "KfRniAN]\XonIOO>_FGfo\I]MJkdfY]CKWgH^[VfiDMO>GcJ^L38jiDcT=NO"
  89.     A$ = A$ + "nbgbGk<OgWcX?GdUSXWoB5bUSX_f9KAoL=Sj\AGgcgoO3AOnb]fiMlUoW9<7"
  90.     A$ = A$ + "HA#3#066>:l>`72oc4n#hMPS2331X1HA`LPk0nba^3H>`RP6P0<<LDhMP?4n"
  91.     A$ = A$ + "Wan#hMPS2331X1HA`LPk0nb9L7`LP51=01HHhX`k0O8l?SmQ`k075662#3`R"
  92.     A$ = A$ + "Pi0g1lUSU[Ik\lMG=]cle4Rj:5JS]Hd>cg^B7[#_L\a=>iO=A??M;T[oIOIM"
  93.     A$ = A$ + "ZJWAONZ#O>5WVIkdfY]CKW^Rk^JJWikna5MO=;Tk7Gdb^CT_=I]cYjaHm:g7"
  94.     A$ = A$ + "^2mbAaX9VVfIQd8]MJkdfY]CGig^JJWikaR==]c\Ol9cgV\fIQNjGXOMi[e5"
  95.     A$ = A$ + "mL8bfY]CKWf>]MjRV]c2[M6][lJ#9j[?G?N[AbnjT]CKWf>]MJkl6cIk<n[["
  96.     A$ = A$ + "#NMg4mlPZ#kKf>]MJkdfY]cK<W]ch_^XO^W5bRNMLV[gO7\MJkdfY]CKWOfH"
  97.     A$ = A$ + "f>CNiX#Oo5<JCem1MZJWlm8g\?fE<KWge=m?BhnP53[62`NQS0_=l1`o8Q?0"
  98.     A$ = A$ + "NKh8`NQ0\JHa`m1g5LCa^;hnP53[62`NQS0_=l1`o8f70_=L4H_#0F=\HhnP"
  99.     A$ = A$ + "k2^Y4^;hnP53[62`NQS0_=l1`o8f70_=L4H_#0F=\HhnPk2^YHiJf>;OGY\M"
  100.     A$ = A$ + "6mlP]#OO??OkjIk<jnNF8_?fNU5eJW\gKL_JNmMJkdfY]CKWGIf>;OGY\MF\"
  101.     A$ = A$ + "N<8_Nf>S4mhaVVniTmNd[]CKWf>]MJkl6cIk<g_GnTfgOiSJ]5Sg;h]MJkdf"
  102.     A$ = A$ + "Y]c[<KWU_cfInOO`;jgKJ5jRjWIohgJkdfY]CKWf>_aLf>Wjg3ISnMDJQnNO"
  103.     A$ = A$ + "OJN_A`W[#f>]MJkdfIUiliIKQmn_NdmWl`7>oW>A;kgKi;GN=ZHkdfY]CKW^"
  104.     A$ = A$ + "Rk\MVlegiTmn5dEnMEFd___WZW7Af>]MJkdfY]cK\W]c2k[;k[GA?6^iKGii"
  105.     A$ = A$ + "<DiBkL6glO?QZQU0[12`NP33W2^8lgChR`YP33k12`JPU0E3c0^iHc0Z6F2\"
  106.     A$ = A$ + "680k1><L:hR`O?f5QC176f34Pe0;1Z6V1Lc9<3XJH9`JP0\7h``YP;2omHG4"
  107.     A$ = A$ + ">5LHH?#0F3\4XJH6`=7;GcfIik\MVnfITlMO?;dgOL]MJkdfY]CKWEVKjlg1"
  108.     A$ = A$ + "IIoJj8O[L\MV_oo7\MJkdfY]CKWgH_Rm_k[CCk\#K1UjOoMF8GN]MJkdfY]C"
  109.     A$ = A$ + "KW^[\[Vfi6ghTOj5mHIVf_^YZ54mj3Q_F>^bmI=Ok:?oNbgUSXE8G>R^<TMc"
  110.     A$ = A$ + ">O?V]5j?_cLmJD9jeCZ]CKWf>]M6=KWU_kZYM6e6bgRN<MSj6i[_4meLef2R"
  111.     A$ = A$ + "fE^_Mika?>je;BJ_LT_G7WGijeDmn=DQLocW\EX_6?Cc\MJkdfY]CGaMG=]c"
  112.     A$ = A$ + "YZaD8;jiZJaXM>E?WGCkUS[VNGf;kF\]CKWf>]MJkl6cMef>_FJFijaU<];k"
  113.     A$ = A$ + "WS^5bkI1iJAombe?3edln0?Gf]HKWf>]MJkdfi=VkZ]M6Y#NO2PKbNNoTfag"
  114.     A$ = A$ + ";PBKo<GMc\O<YCck3lA;jh`lWoenmQ]Dd>_WKiCBHN#]#S#06267>9lN`WT`"
  115.     A$ = A$ + "k1W467622#S#]`lPk1^UHg3<?XFXA8031S3W4N?hCRmN`9QaQQP0d8D;<?hN"
  116.     A$ = A$ + "PK9Qk1V7D;d84PQPaQC2_7l9aN?hT`h`##0J4Z5V7L?`]4;GcfIik^FJWARN"
  117.     A$ = A$ + "_hIOkKZKXAoN^T?nX5cfITXWK#CEc;jcOUW3ACUXWSACeS=MdekNk=go>ldf"
  118.     A$ = A$ + "Y]CKWf>]MNSi^FKWI;ZW5eKbnmb^Xk;fTmk6jBUXNNdi;_L4mWG\>mRj_ijg"
  119.     A$ = A$ + "IWG_TVIkdfY]CKW^Rk:V]CIkdfY]CKWf>o\`\MFI:=cfY]CKWf>M5gIk\bDJ"
  120.     A$ = A$ + "V]CKWf>]Mj:^cfIUYd<KWf>]MJkdELW]c:CYIgkgh_V`32?6\F8032_<L2h2"
  121.     A$ = A$ + "`O=Q;0W0NIH#80[5N<h1Qk5n6a^Gh1Q73F;4P1QG6>1L1h_6k2`9PG6642`J"
  122.     A$ = A$ + "Q73N#hNQ_A2g;lP`S1[52`P`;3W0^0lGSM1h4`;3321H]`S1?8L_`g8FQnmW"
  123.     A$ = A$ + "MU7cfIUYd<KWf>]MJkdELW]c:CYIf>]MJkdfY[h>KWEVBc\MJkdfY]CGaMf>"
  124.     A$ = A$ + "[<UVIkdfY]CKW^Rk\MFI:=cfY]CKWf>M5gIk\bDJV]CKWf>]Mj:^cfIUYd<K"
  125.     A$ = A$ + "Wf>]MJkdELW]c:CYIcjfo;9l``bPe21H#hP`K0W3n;9L>h=P32321H]`bP76"
  126.     A$ = A$ + "V5LkaV5l``bPe21H#hP`K0W3n;a>7l6`1Q1Q0\FHI`33c2^m4V5l``bPe21H"
  127.     A$ = A$ + "#hP`K0W3n;a>7l6`1Q1Q0\FHI`33c2^mH5jgOfEN<KWEVBc\MJkdfY]CGaMf"
  128.     A$ = A$ + ">[<UVIkdfY]CKW^Rk\MFI:=cfY]CKWf>M5gIk\bDJV]CKWf>[\KWZlU]c:;f"
  129.     A$ = A$ + ">]MJkdfYVnIk\bR]CKWf>_a_MjL^Y_IkdfY]CKW>W;MKfgiO>Qi3;7F74PM3"
  130.     A$ = A$ + "70N=h\`O>Qc2_6L0Hg#0F7\LHn`\Qk<f\Qi3;7F74PM370N=h\`O>fIQG3>0"
  131.     A$ = A$ + "\K80[3F><OHf`MV`\Qi3;7F74PM370N=h\`O>fIQG3>0\K80[3F><OHf`M6c"
  132.     A$ = A$ + "iLUGcfY]CKWf>M>GjV]CKWf>]MjL^d=KWf>]MFif>o_ogoKVgomOo9eOj?mW"
  133.     A$ = A$ + "bLQ;LQ<WolWOBm^_kkVigokomCZCNbCVi]N[gJBMRCLR<ofOk_MBmKn=oV<_"
  134.     A$ = A$ + "j[nZI>lQ?L>=nhSWiGo[oeInEoZOeTJ\a6;c_hGl;b<b8S<Y6L`1clcoiolL"
  135.     A$ = A$ + "JGkJGIjYWNb[]^e]ViIOfW=_J_mfcdJ[]VC]dB;IJZYVblcnIo\LJM[KMIFc"
  136.     A$ = A$ + "JFCVj[_n9EMeEGVE^bEViWlCn9idBGjBc\TU\TlJ1;H1InAoXODNm0?`3TCo"
  137.     A$ = A$ + "PO`?8cgokomclmnNO_9eLVcLblMn>OW<cLVcLBm]ofOk<cH6c8cMOggM>MWG"
  138.     A$ = A$ + "jkQNkgn]?YnVOc_IV_nGo[Wi[menJCZ_jGm[Vi[lEn:I^YKjVbY_dGj;Ui;l"
  139.     A$ = A$ + "5n2CZ?oWocWYZZZ:QomonOKkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWf>]"
  140.     A$ = A$ + "MJkdfY]c:`fiLWa5CX6H5#C#060f?<1L6hR9L6H2Ho`0#0J2F1D3<GH6aV;D"
  141.     A$ = A$ + "3\2X98030k7V0>3LaHW1V0f?<04PVPE0e0c5VA2c5Z1F1d44P1Pm3C0W1^H\"
  142.     A$ = A$ + "c0C0k7602#C`:PJPi2c8V]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY"
  143.     A$ = A$ + "]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWf>]M"
  144.     A$ = A$ + "JkdfY]CKWf>]MJkl6[fimo]nS9\0HU`C11HG`nPS3W6nS9LJhh`nPM11hYPE"
  145.     A$ = A$ + "2;0^OhK5knQ50[4N:80k2f7LLhd`O<fYQS3k3f54PW2F9\0hnQ_E2g?\0HU`"
  146.     A$ = A$ + "C11HG`nPS3W6nSa>=LLHO`^P0lD`:Q50g?l]RIkdfY]CKWf>]MJkdfY]CKWf"
  147.     A$ = A$ + ">]MJkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY"
  148.     A$ = A$ + "]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWf>_aZM>_INn4F4\:XI80m3S175>9Ln"
  149.     A$ = A$ + "4>9LDH<XO80=3[2F4<?HVaV7\8HE#c#0j763>:LBhla>9LDH<XO80=3[2F4<"
  150.     A$ = A$ + "?HV9<?HA`ZPVQ0d?<6LDhT`iSMBhX`H#o#0J6F5\8HN`<SIkdfY]CKWf>]MJ"
  151.     A$ = A$ + "kdfY]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY]CKW"
  152.     A$ = A$ + "f>]MJkdfY]CKWf>]MJkdfY]CKWUk]c7jkn^9lX`C0=31XOh5QG1NChMCh=QG"
  153.     A$ = A$ + "1NAXO80=3?1lX`31OgH?4lX`C0=31XOh5QG1NChMSmV`[0_8d?4PVQW0NDhQ"
  154.     A$ = A$ + "P_K2?4lX`C0=31XOh5QG1NChMSmV`[0_8d?4PVQW0NDhQP_K<KWf>]MJkdfY"
  155.     A$ = A$ + "]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWf>]MFng>M>gdc\MJkdfY]CWcU^Ikdf"
  156.     A$ = A$ + "Y]CKW>W;McfY]CKWf>M>GjV]CKWf>[#KWQB\\fY3UF9_NEEYedd1a#VZ:YBN"
  157.     A$ = A$ + "NEJoWYYK6V94:]BcNTiNV4Z5Z3F?4PnPAQaQG7>C2_><><:d74Pe3e1e2?2<"
  158.     A$ = A$ + "gH?2D;D7\N80m1S2S3_>LVH_><><:d74Pe3e1e2?2<g4N4XFX>Hm#0j36567"
  159.     A$ = A$ + "NMh<aNMHLHDX?80[7Z3Z5N4H^abi^>n=]\MN]O#dfY]CKWf>]MJkdfIj>8Jk"
  160.     A$ = A$ + "dfY]CKWf>]MJk<M74]MJkdfY]CKWf>]MV^3Rf>]MJkdfY]CKWf>Cg1AKWf>]"
  161.     A$ = A$ + "MJkdfY]CKWYkPX]CKWf>]MJkdfY]cdM#dfY]CKWf>]MJkdfIj>8Jkl6[fI=E"
  162.     A$ = A$ + "OZ4F:D?\180k461>4<1LZ4V0>4<2\C80K0Z7F:D3DM\JPU2e3K02`>QAP31C"
  163.     A$ = A$ + "0W:f4`QPAPM21H3#m`BQJPZCX6HY#m`6P0\CH4h#`4`YR=1L8H4HW#0f0D?\"
  164.     A$ = A$ + "DX6XjHiLG7oVFf>_f?8JkdfY]CKWf>]MJk<M74]MJkdfY]CKWf>]MV^3Rf>]"
  165.     A$ = A$ + "MJkdfY]CKWf>Cg1AKWf>]MJkdfY]CKWYkPX]CKWf>]MJkdfY]cdM#dfY]CKW"
  166.     A$ = A$ + "f>]MJkdfIj>8Jkl6[fi2OPg:QU3=0K42`>PQQ3073N[4>6L0HHH7#0f8d0\L"
  167.     A$ = A$ + "HQ`34KQ`bQ6P=21H7```1PS1_E\S17066f14P=2=0;7F8l09\#Hi#3`6Q0\3"
  168.     A$ = A$ + "HHh0`aPg:faP3033k02`6Q6PU3;4NPHiLG7oVFf>_f?8JkdfY]CKWf>]MJk<"
  169.     A$ = A$ + "M74]MJkdfY]CKWU1]CWc=]=KWf>]MJkdiLYKf>]MJkdfYciBg\MJkdfI5Jk\"
  170.     A$ = A$ + "ZB\\fY3QBZTWGEEB=MM#\j;maUB9_FEJoY[>=Mc`<EEEYEJV]CKWf>]MJkdf"
  171.     A$ = A$ + "Y]c<YJf>]MJkdfY]CKWf>cTZ]hOh_;Q77F=d24PNQm2_4L4hgU`APG2f;d;4"
  172.     A$ = A$ + "PFPE3?>\Hh76Ka`S3[6J12#_`NQG2>2lkRM4hUPm2m21X5He`S3;6nQ9\Hha"
  173.     A$ = A$ + "QE3]01XGH_`;171nMa>2lB`NQNQ0d2\JhaQ53o`HiLf>]MJkdfY]CKWf>]MV"
  174.     A$ = A$ + "afY]CKWf>]MJkdfY]c;?KWf>]MJkdfY]CKWf>_>Oc#KWf>]MJkdfY]CKWYkV"
  175.     A$ = A$ + "Qf>]MJkdfY]CKWf>Cg=3]MJkdfY]CKWf>]MV^K6JkdfY]CKWf>]MJk<Mg<\\"
  176.     A$ = A$ + "ZMFK=CT`ZP6QFP0d;<4<6<><A2S3S131m21X5XAHE#]#=aZ5F5d8d24PNQQP"
  177.     A$ = A$ + "aPaQ9R=><6<4d;4PFP6QE1e2eT#]`ZP6QFP0d;<4<6<><A\aQaPQPNQ0d2d8"
  178.     A$ = A$ + "\:XFXVHiLf>]MJkdfY]CKWf>]MVafY]CKWf>]MJkdfY]c;?KWf>]MJkdfY]C"
  179.     A$ = A$ + "KWf>_>Oc#KWf>]MJkdfY]CKWYkVQf>]MJkdfY]CKWf>Cg=3]MJkdfY]CKWf>"
  180.     A$ = A$ + "]MV^K6FFe>Gf?nECX>H]`C31hiQ1QAQ32_J2746564NN80?=\FX>HI`?>fbP"
  181.     A$ = A$ + "jPe2?=4PW76465>8lZa>8<:<8ll#0NJH]#M`bPOL2;3Z3F;ld#0NNH#HDhP`"
  182.     A$ = A$ + "[6kP`X`P`c31hYQe2e1;3naaL>Gie\MJkdfY]CWcU^IkdfY]CKW>W;McfY]C"
  183.     A$ = A$ + "KWEV]cXOdMUBI_Z[:DBUl:FXd:kcZZ[ZT:iE[Z:YbNEERoW4gf8DJUhljBo1"
  184.     A$ = A$ + "UBYIf>]MJkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWLf>]MJkdfY]CKWf>]"
  185.     A$ = A$ + "MnYA6KWf>;kKW[H97>QjQVPFQ0d3<0<2\Oh`9\OH4H0X780]2=1e3[0FB\E0"
  186.     A$ = A$ + "e3=1]21X7H0H4Ho`QS]OH4H0X780]2=1e3[0FB2[0Z7J2J52#?`0`8`nQ37K"
  187.     A$ = A$ + "o`8`0#?#0J5J2Z7F1\THiJf>]MJkdfY]CKWf>]MnYA6KWf>]MJkdfY]CKWf>"
  188.     A$ = A$ + "]MJkdfY]CKWf>]MJklbgf`fY]CKWf>]MJkdfY]c2Hf>]MJkdfY]CKWf>]MJk"
  189.     A$ = A$ + "dfY]CKWf>]MJkdfY]CKWLf>]MJkLj[M^ZUNX4J0J6f44P]3m333S17:QaPQQ"
  190.     A$ = A$ + "nQ]31HC#c#3`ZPU6KE#3#c`VP0\MXOHHH<h#a6366j7f>4P=1=3=0[2FJ2[2"
  191.     A$ = A$ + "J0J6f44P]3m333S17:fH``#o`fQ0\9XIX1HE`BSU[IkdfY]CKWf>]MJkdfiW"
  192.     A$ = A$ + "6I\MJkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY]c;OK3KWf>]MJkdfY]CKWf>;P"
  193.     A$ = A$ + "IkdfY]c:cfYciVnV]CKWf>]MjL^d]jFanCXAHm#K#0j6j36265fO2S231m1M"
  194.     A$ = A$ + "31X=Hm#S#M`:RE7d8\NX=80M3m131S2k?fX`##O#g#0J3F?d8D7\R4Z3J4F?"
  195.     A$ = A$ + "d64P^QnPQPAQm7KDH8X?XK80]1[7J4Z3FA<WcEN=KWf>]MFQf>Sni4F:Ue2G"
  196.     A$ = A$ + "jS;UbN_DEEEBUlHHEUFI]Z3EEBUlV6EEB==Mc`;M8=DBUVIkdfY]CKWf>]MJ"
  197.     A$ = A$ + "kdfY]CKWf>]MJkdfY]CKWf>]MnoKf>]MJkdfY]CKWf>]MVafY]CKWf>]MJkd"
  198.     A$ = A$ + "fY]c;?KWf>]MJkdfY]CKWf>_>Oc`bZfI3odOI2[3f8d64P^QM0k666nU9<<\"
  199.     A$ = A$ + "KH7#g#0J3f8\>X1hW6[1HM`6QfP0d=\3Hg```_<f``^QM0M31X=HS`jP6POJ"
  200.     A$ = A$ + "2=0[3f8d64P^QM0k666nUa66f=\3XK80]1K4F7d0lCSUcIkdfY]CKWf>]MJk"
  201.     A$ = A$ + "dfI6KWf>]MJkdfY]CKWf>_l\MJkdfY]CKWf>]MJkljl=3]MJkdfY]CKWf>]M"
  202.     A$ = A$ + "JkdfY]CKWf>]MJkdfY]CKWf>]MnYcfY]CKW9W]CKWf>]MJkdfY]cde>K\nAB"
  203.     A$ = A$ + "XIX5XM80K3j5j76269QQPnQNQ]11XMX5XIXAXnH=2=3]0]31HK#_#o`#`8a6"
  204.     A$ = A$ + "2j7j5f64PfQFPVQ6QjCXAXIX5XM80K3j5j76269f##o#_`fP0d>d2d<d8DO\"
  205.     A$ = A$ + "L>KWf>]MJkdfY]CKWf>cHkdfY]CKWf>]MJkdfiUW]CKWf>]MJk\<XMjL^Y]I"
  206.     A$ = A$ + "kdfY]CKW>W;McfY]CKWf>M>GjV]CKWf>[<KWQZZ^T:kEmUnhBYTWGEEBUlHH"
  207.     A$ = A$ + "EUD9^NEMEUDI_Z^d7G:Ull:DBUhljBgFYD:=[Ye\W4f0d:\I80K5j1f9<0\W"
  208.     A$ = A$ + "460f9d3\E80K6J5f0d4\VH=1K0J5f<4P]2m0k460fC\1PM2m0K52`VQFQ=0="
  209.     A$ = A$ + "1[9QVP=0]2K62`FQNPM230k9f0`>QNP]21Hc#[`6PVPe4;GcfY]CKWf>]MJk"
  210.     A$ = A$ + "dfY]c;ONIkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWGilbfY]CKWf>]MJkd"
  211.     A$ = A$ + "fY]cYNf>]MJkdfY]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWLf>]MJkLj[M^nV6"
  212.     A$ = A$ + "8QFPfP>P0\5XKXGX?HP4j3j5j6f24P>PfPFPe3=5Km#;#K#7#0f2d=d;d7<#"
  213.     A$ = A$ + "\nPNQ^Q]01X3X=X5Hm#C9\NX5X=X380K1j6j5j368FO#_#g`FP0d1d6d2\NX"
  214.     A$ = A$ + "YHiJf>]MJkdfY]CKWf>]MNic;KWf>]MJkdfY]CKWf>]MJkdfY]CKWf>]MJkl"
  215.     A$ = A$ + ":WGf>]MJkdfY]CKWf>]M>ecfY]CKWf>]MJkdfY]CKWf>]MJkdfY]CKWf>]MJ"
  216.     A$ = A$ + "kTcfY]CKWCO]cFf`>CHC#k#W#0j2f6\MXGHW9d;\MHK#G#0j4J7f4d2\QH]0"
  217.     A$ = A$ + "K2J7j42#G`fP]3m2k<F_`fQ]1M11XCXMHC#;`6BX5HC#k#W#0j2f6\MXGHWa"
  218.     A$ = A$ + "j5f>\=X;80M2]3K2J1f#\L=KWf>]MJkdfY]CKWY[MjL^Y_IkdfY]CKW>W;Mc"
  219.     A$ = A$ + "fY]CKWf>M>GjV]CKWf>[<KWEEEEUDI_[Wol>?mY?M9Ef;4Z^T:iiEXT:aomj"
  220.     A$ = A$ + "BOLYDRK7NY?^DJjjflCe\MJkdfIUKk\D=KWf>]MVoIkdfY]CKWCeY]]CKWf>"
  221.     A$ = A$ + "C^fJ]W4J7j0j42#G`FP]1M3mT#g`fP]0M11XCX3XMX=XeH]1]3M0M21X;H;`"
  222.     A$ = A$ + "fP^QNRe=\=H;#G#0j4j0J7J3J=QfPfQ>P>Q0d5\5HK#g#?aj6f6\5X;80M2M"
  223.     A$ = A$ + "0]3]1]6;GcfY]CKWf>]MJkdfY]cXIkdfY]CKWf>]MJkdfiU?_\MJkdfY]CKW"
  224.     A$ = A$ + "f>]MJkdfY]CKWf>]M>IWff>]MJk<i\MJkdfY]cYjdffY]CKW9W]cdf>cjOgf"
  225.     A$ = A$ + "Y]CKWf>]MJkdfY]CKWf>caY]]CKWf>C^>flFCXcY`c01hiP^V2K1fJ2K1jJ:"
  226.     A$ = A$ + "lL#0N6XcY#7`Vc\e>nDMVeonEnhliIP0lL#GCQ]0K=fFP^V2?74PW1jL:d1\"
  227.     A$ = A$ + "i4j0jL:l<#0N>X[Y`FP]6K;#GCQW32`c0M>5j0fL\L=KWf>]MJkdfY]CKWf>"
  228.     A$ = A$ + "SV]CKWf>]MJkdfY]CKWGnlbfY]c?3g>_R>f\]CKWf>]MJkdfY]CKWf>]MVcC"
  229.     A$ = A$ + "KKWf>]MVLf>]MJkdfiDMJKkdfY]cTcf9KUiX?>E]c9kcIkdfI9^MNmjkSHkd"
  230.     A$ = A$ + "fY]cTcfY]CKWEV]CWciL>WciL>WciL>WciL>WciL>W;OkoC[%%L2"
  231.     btemp$ = "" 'decode string data to image data
  232.     FOR i& = 1 TO LEN(A$) STEP 4: B$ = MID$(A$, i&, 4)
  233.         IF INSTR(1, B$, "%") THEN
  234.             FOR C% = 1 TO LEN(B$): F$ = MID$(B$, C%, 1)
  235.                 IF F$ <> "%" THEN C$ = C$ + F$
  236.             NEXT: B$ = C$: END IF: FOR j = 1 TO LEN(B$)
  237.             IF MID$(B$, j, 1) = "#" THEN
  238.         MID$(B$, j) = "@": END IF: NEXT
  239.         FOR t% = LEN(B$) TO 1 STEP -1
  240.             B& = B& * 64 + ASC(MID$(B$, t%)) - 48
  241.             NEXT: X$ = "": FOR t% = 1 TO LEN(B$) - 1
  242.             X$ = X$ + CHR$(B& AND 255): B& = B& \ 256
  243.     NEXT: btemp$ = btemp$ + X$: NEXT
  244.     btemp$ = _INFLATE$(btemp$)
  245.     _MEMPUT m, m.OFFSET, btemp$: _MEMFREE m
  246.  
  247.     'Put colorpicker image on screen at xpos/ypos
  248.     _PUTIMAGE (xpos, ypos), v&: _DISPLAY: _FREEIMAGE v&
  249.  
  250.     '====================================
  251.  
  252.     '=== Now get users color selection...
  253.  
  254.     '=== no selection made yet
  255.     selected = 0
  256.  
  257.     '=== main loop
  258.     DO
  259.         '=== Get mouse input
  260.         WHILE _MOUSEINPUT
  261.             '=== Get mouse x/y
  262.             mx = _MOUSEX: my = _MOUSEY
  263.             '=== Only poll this area
  264.             IF mx < (xpos + 473) AND my < (ypos + 243) THEN
  265.                 '=== if click button in area
  266.                 IF _MOUSEBUTTON(1) THEN
  267.                     '=== if clicked in CLOSE box area
  268.                     IF mx > (xpos + 352) AND mx < (xpos + 457) AND my > (ypos + 5) AND my < (ypos + 72) THEN
  269.                         GOTO donepicking
  270.                     END IF
  271.                     '=== made a color selection
  272.                     selected = 1
  273.                     '=== Get color where mouse pointer is
  274.                     clr& = POINT(mx, my)
  275.                     '=== Make Red Green Blue color values
  276.                     red = _RED32(clr&): grn = _GREEN32(clr&): blu = _BLUE32(clr&)
  277.                     '=== show color selected in box
  278.                     LINE ((xpos + 246), (ypos + 7))-((xpos + 347), (ypos + 70)), _RGB(red, grn, blu), BF
  279.                     '=== Update gradient strip with color...
  280.                     '=== ...only if mouse not in gradient strip area
  281.                     IF mx <= (xpos + 246) OR mx >= (xpos + 457) OR my <= (ypos + 77) OR my >= (ypos + 107) THEN
  282.                         c = 0
  283.                         FOR x = (xpos + 453) TO (xpos + 242) STEP -4
  284.                             LINE (x, (ypos + 77))-(x + 4, (ypos + 107)), _RGB(red + c, grn + c, blu + c), BF
  285.                             c = c + 4
  286.                         NEXT
  287.                     END IF
  288.                 END IF
  289.                 '=== update screen
  290.                 _DISPLAY
  291.             END IF
  292.         WEND
  293.  
  294.         '=== ESC key cancels picking and closes
  295.         IF INKEY$ = CHR$(27) THEN
  296.             selected = 0: GOTO donepicking
  297.         END IF
  298.  
  299.         '=== don't be a cpu pig
  300.         _LIMIT 60
  301.  
  302.     LOOP 'UNTIL INKEY$ <> ""
  303.  
  304.     donepicking:
  305.  
  306.     '=== wait for mouse button UP to continue
  307.     DO: mi = _MOUSEINPUT: LOOP UNTIL _MOUSEBUTTON(1) = 0
  308.  
  309.     '=== if user selected color, say so
  310.     IF selected = 1 THEN
  311.         ColorPicker& = clr&
  312.     ELSE
  313.         ColorPicker& = 0
  314.     END IF
  315.  
  316.     '====================================
  317.  
  318.     'Restore background as it was
  319.     _MEMCOPY scr2, scr2.OFFSET, scr2.SIZE TO scr1, scr1.OFFSET
  320.     _MEMFREE scr1: _MEMFREE scr2
  321.  
  322.     'Restore display status as it was
  323.     IF DisplayStatus% = -1 THEN _AUTODISPLAY
  324.  
  325.  

Here it is in action....

 
ColorPicker12.png

« Last Edit: September 06, 2020, 10:26:44 pm by Dav »

Offline Richard Frost

  • Seasoned Forum Regular
  • Posts: 316
  • Needle nardle noo. - Peter Sellers
    • View Profile
Re: Simple little color picker
« Reply #5 on: September 06, 2020, 11:50:03 pm »
Wouldn't the code be far smaller if you actually generated the image rather than restore a picture?

I'm afraid of that INFLATE command because I remember what happened to the Hindenburg.

It works better if you plug it in.

Offline Ashish

  • Forum Resident
  • Posts: 630
  • Never Give Up!
    • View Profile
Re: Simple little color picker
« Reply #6 on: September 07, 2020, 01:23:03 am »
Good job, Dav.
I made something similar around 2016 (with aKFrameWork), when I was very new to qb64 forum and immature. :)


Screenshot_0.jpg
* Screenshot_0.jpg (Filesize: 212.05 KB, Dimensions: 803x727, Views: 273)
« Last Edit: September 07, 2020, 01:42:32 am by Ashish »
if (Me.success) {Me.improve()} else {Me.tryAgain()}


My Projects - https://github.com/AshishKingdom?tab=repositories
OpenGL tutorials - https://ashishkingdom.github.io/OpenGL-Tutorials

Offline Dav

  • Forum Resident
  • Posts: 792
    • View Profile
Re: Simple little color picker
« Reply #7 on: September 07, 2020, 08:25:26 am »
@Richard Frost, yep you're quite right and I haven't given up on doing it that way (started coding it that way first, then got designing what I wanted it to look like in my paint program, and just went the lazy pic route).  I'm going to work on a only code version again, because I also want smaller code.  If it helps ease the INFLATE fears,  all my images are hydrogen free.

@Ashish , thanks. Yours looks very good. Do you have a link to it?

- Dav

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: Simple little color picker
« Reply #8 on: September 07, 2020, 12:42:59 pm »
Beautiful Color pickers here, I like the additional gradient box selection choice.

@Ashish that is one gorgeous picture in background were you using that too as part of picker, you almost could to get started on narrowing down on the color.

But I also agree with Richard Frost that all code might be more practical.

 

Offline Ashish

  • Forum Resident
  • Posts: 630
  • Never Give Up!
    • View Profile
Re: Simple little color picker
« Reply #9 on: September 07, 2020, 11:20:08 pm »
@Dav Thanks! Here's is the link - https://github.com/AshishKingdom/aKFrameWork/blob/master/demo/demo_colorpicker.bas
@bplus the background is just of making it look good. :)
if (Me.success) {Me.improve()} else {Me.tryAgain()}


My Projects - https://github.com/AshishKingdom?tab=repositories
OpenGL tutorials - https://ashishkingdom.github.io/OpenGL-Tutorials

Offline Dav

  • Forum Resident
  • Posts: 792
    • View Profile
Re: Simple little color picker
« Reply #10 on: September 08, 2020, 07:07:39 am »
Thanks for the link, @Ashish!  Great job on the dialog library. And I'm loving those QB64 OpenGL demos.  Not immature work at all! 

@bplus, that cool background bg.jpg is in the aKFrameWork demo folder.  It is a beauty.

I'm working on practicalizing my colorpicker. 
 
- Dav

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: Simple little color picker
« Reply #11 on: September 08, 2020, 10:14:05 am »
Ha! I thought aKFrameWork was some other language. I guess aK stands for Ashish Kingdom. Dang! A Dialog library from 3 years ago, very advanced from one so young.

That and I saw a menu system another time and of course all the GL, apologies to Dav's thread as I admire this prodigy!

@Ashish you are very accomplished!

But I wonder about mixing RGB values with Alpha and getting a number without the Alpha mixed in? Would that color be true to what you saw in the picker? Oh but using _RGB, not _RGB32, to get the color closest to point clicked?

« Last Edit: September 08, 2020, 10:26:07 am by bplus »

Offline Ashish

  • Forum Resident
  • Posts: 630
  • Never Give Up!
    • View Profile
Re: Simple little color picker
« Reply #12 on: September 10, 2020, 10:57:33 am »
...
But I wonder about mixing RGB values with Alpha and getting a number without the Alpha mixed in? Would that color be true to what you saw in the picker? Oh but using _RGB, not _RGB32, to get the color closest to point clicked?

I had/have no idea whether its going to return true color or not. What I wanted is to showcase my dialog library aKFrameWork (at that time). :)
if (Me.success) {Me.improve()} else {Me.tryAgain()}


My Projects - https://github.com/AshishKingdom?tab=repositories
OpenGL tutorials - https://ashishkingdom.github.io/OpenGL-Tutorials