A new colorPicker (web and vfp solution)
This is a new colorPicker with 2 implementations
-web solution ( ) this uses CSS JS,HTML as web application.I used an internet explorer application to make it working from VFP.I linked to the jQuery.js used by the author in it site.can download it and use offline.Can also download it from http://jquery.com/ (1.6.1 version)
-Visual foxpro elegant equivalent solution with a top level form.
The 2 codes use 5 pngs shipped below (download them and save as colorwheel1-2-3-4-5.png in the source folder of code..
See the screenShots below to have an idea of this tool.
Select code and copy (CTRL+C) and paste into a prg file.
*Added a code for calculate color shades for any given color below
*run vfp9 as administrator to avoid new IE11 behaviors (errors).
Click on code to select [then copy] -click outside to deselect
*1*-This is the web solution
*Adapted from http://www.script-tutorials.com/demos/315/index3.html
Local m.xcolorp
m.xcolorp=Int(Val(Inputbox("ColorPicker type1-2-3-4-5","jQUery colorpicker","1")))
If !Between(m.xcolorp,1,5)
m.xcolorp=1
Endi
TEXT to m.myvar textmerge noshow
<html lang="en" >
<head>
<meta charset="utf-8" />
<style>
* {
margin: 0;
padding: 0;
}
html {
background-color: #eee;
}
header {
background-color:rgba(33, 33, 33, 0.9);
color:#fff;
display:block;
font: 14px/1.3 Arial,sans-serif;
height:50px;
position:relative;
}
header h2{
font-size: 22px;
margin: 0px auto;
padding: 10px 0;
width: 80%;
text-align: center;
}
header a, a:visited {
text-decoration:none;
color:#fcfcfc;
}
.container {
margin: 20px auto;
text-align: justify;
width: 600px;
}
/* colorpicker styles */
.colorpicker {
background-color: #222222;
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #444444;
color: #FFFFFF;
font-size: 12px;
position: absolute;
width: 460px;
}
#picker {
cursor: crosshair;
float: left;
margin: 10px;
border: 0;
}
.controls {
float: right;
margin: 10px;
}
.controls > div {
border: 1px solid #2F2F2F;
margin-bottom: 5px;
overflow: hidden;
padding: 5px;
}
.controls label {
float: left;
}
.controls > div input {
background-color: #121212;
border: 1px solid #2F2F2F;
color: #DDDDDD;
float: right;
font-size: 10px;
height: 14px;
margin-left: 6px;
text-align: center;
text-transform: uppercase;
width: 75px;
}
.preview {
background: url("select.png") repeat scroll center center transparent;
border-radius: 3px;
box-shadow: 2px 2px 2px #444444;
cursor: pointer;
height: 30px;
width: 30px;
}
</style>
<script src="http://www.script-tutorials.com/demos/315/js/jquery.js"></script>
<div class="container">
<h3>How to</h3>
<p>This is simple HTML5 colorpicker. Please click at Preview element to see color picker</p>
<!-- preview element -->
<div class="preview"></div>
<!-- colorpicker element -->
<div class="colorpicker" style="display:none">
<canvas id="picker" var="1" width="300" height="300"></canvas>
<div class="controls">
<div><label>R</label> <input type="text" id="rVal" /></div>
<div><label>G</label> <input type="text" id="gVal" /></div>
<div><label>B</label> <input type="text" id="bVal" /></div>
<div><label>RGB</label> <input type="text" id="rgbVal" /></div>
<div><label>HEX</label> <input type="text" id="hexVal" /></div>
</div>
</div>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
<script>
/**
*
* HTML5 Color Picker
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2012, Script Tutorials
* http://www.script-tutorials.com/
*/
$(function(){
var bCanPreview = true; // can preview
// create canvas and context objects
var canvas = document.getElementById('picker');
var ctx = canvas.getContext('2d');
// drawing active image
var image = new Image();
image.onload = function () {
ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
}
// select desired colorwheel
var imageSrc = 'colorwheel<<m.xcolorp>>.png';
switch ($(canvas).attr('var')) {
case '2':
imageSrc = 'colorwheel2.png';
break;
case '3':
imageSrc = 'colorwheel3.png';
break;
case '4':
imageSrc = 'colorwheel4.png';
break;
case '5':
imageSrc = 'colorwheel5.png';
break;
}
image.src = imageSrc;
$('#picker').mousemove(function(e) { // mouse move handler
if (bCanPreview) {
// get coordinates of current position
var canvasOffset = $(canvas).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
// get current pixel
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
// update preview color
var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")";
$('.preview').css('backgroundColor', pixelColor);
// update controls
$('#rVal').val(pixel[0]);
$('#gVal').val(pixel[1]);
$('#bVal').val(pixel[2]);
$('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]);
var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
$('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6));
}
});
$('#picker').click(function(e) { // click event handler
bCanPreview = !bCanPreview;
});
$('.preview').click(function(e) { // preview click
$('.colorpicker').fadeToggle("slow", "linear");
bCanPreview = true;
});
});
</script>
</body>
</html>
ENDTEXT
Set Safe Off
Local m.yrep
m.yrep=Addbs(Justpath(Sys(16,1)))
Set Defa To (yrep)
Local m.lcdest
m.lcdest=m.yrep+"ycolorPickert.html"
Strtofile(m.myvar,m.lcdest)
Declare Integer BringWindowToTop In user32 Integer
Local apie
apie=Newobject("internetexplorer.application") &&run vfp9 as administyrator to avoid some new behaviors
With apie
.Navigate(m.lcdest)
.Width=650
.Height=500
.Top=5
.Left=20
.menubar=0
.Toolbar=0
.StatusBar=0
BringWindowToTop(.HWnd)
.Visible=.T.
Endwith
*2*-
This is the visuial foxpro solution.The Bindevent method simplifies great the code.The 5 pNGs pointed must be in the source folder.
Here all is built on form.Can navigate dynamically with a simple spinner into the 5 kinds of colorPicker.Click on the first shape to raise the colorpicker.
Mousemove on the colorpicker to see the converted colors in an editbox(RGB,R,G,B,RGB(),Hex or HTML colors).
Mousedown to select a color and fix it.This appears in the second editbox and colors the second.shape.The result is also stored in clipboard(can paste anywhere).
*Begin code
Publi m.yrep
m.yrep=Addbs(Justpath(Sys(16,1)))
For i=1 To 5
xpic=m.yrep+"colorwheel"+Trans(i)+".png"
If !File(m.xpic)
Messagebox("Warning! "+xpic +" is not in source folder!",16+4096,"error",1500)
Endi
Endfor
Publi yform
yform=Newobject("ycolorPicker")
yform.Show
Read Events
Retu
*
Define Class ycolorPicker As Form
Top = 26
Left = 216
Height = 492
Width = 725
ShowWindow = 2
ShowTips = .T.
Caption = "5 colorPickers"
BackColor = Rgb(0,0,0)
ycl = 0
Name = "Form1"
Add Object shape1 As Shape With ;
Top = 12, ;
Left = 72, ;
Height = 36, ;
Width = 108, ;
Curvature = 15, ;
MousePointer = 15, ;
ToolTipText = "Click to fire/hide the colorPicker", ;
Name = "Shape1"
Add Object image1 As Image With ;
Picture = "colorwheel1.png", ;
Height = 300, ;
Left = 72, ;
MousePointer = 2, ;
Top = 51, ;
Visible = .F., ;
Width = 300, ;
Name = "Image1"
Add Object edit1 As EditBox With ;
FontSize = 14, ;
BorderStyle = 0, ;
Height = 204, ;
Left = 444, ;
ReadOnly = .T., ;
ScrollBars = 0, ;
Top = 2, ;
Width = 253, ;
ForeColor = Rgb(128,0,64), ;
Name = "Edit1"
Add Object edit2 As EditBox With ;
FontSize = 14, ;
BorderStyle = 0, ;
Height = 204, ;
Left = 444, ;
ReadOnly = .T., ;
ScrollBars = 0, ;
Top = 232, ;
Width = 253, ;
ForeColor = Rgb(255,0,0), ;
Name = "Edit2"
Add Object label1 As Label With ;
AutoSize = .T., ;
FontBold = .T., ;
BackStyle = 1, ;
Caption = "Selected with mousedown on colorPicker (in Clipbrd)", ;
Height = 17, ;
Left = 425, ;
Top = 210, ;
Width = 285, ;
BackColor = Rgb(255,255,0), ;
Name = "Label1"
Add Object spinner1 As Spinner With ;
Height = 37, ;
KeyboardHighValue = 5, ;
KeyboardLowValue = 1, ;
Left = 6, ;
SpinnerHighValue = 5.00, ;
SpinnerLowValue = 1.00, ;
ToolTipText = "Switch 1 to 5 clorpickers", ;
Top = 12, ;
Width = 37, ;
Value = 1, ;
Name = "Spinner1"
Add Object shape2 As Shape With ;
Top = 444, ;
Left = 540, ;
Height = 36, ;
Width = 60, ;
BackStyle = 1, ;
Curvature = 15, ;
Name = "Shape2"
Procedure my
Lparameters nButton, nShift, nXCoord, nYCoord
*--- aevent create an array laEvents
*Aevents( myArray, 0)
*--- reference the calling object
* loObject = myArray[1]
Thisform.ycl=Iif(Thisform.ycl=0,1,0)
Do Case
Case Thisform.ycl=0
With Thisform
.image1.Visible=.F.
.edit1.Visible=.F.
.edit2.Visible=.F.
.label1.Visible=.F.
Endwith
Case Thisform.ycl=1
With Thisform
.image1.Visible=.T.
.edit1.Visible=.T.
.edit2.Visible=.T.
.label1.Visible=.T.
Endwith
Endcase
Endproc
Procedure my1
Lparameters nButton, nShift, nXCoord, nYCoord
*--- aevent create an array laEvents
* Aevents( myArray, 0)
*--- reference the calling object
* loObject = myArray[1]
Local xcolor, RGBChr,r,g,b
m.xcolor=Thisform.Point(nXCoord,nYCoord)
Thisform.shape1.BackColor=m.xcolor
Thisform.edit1.ForeColor=m.xcolor
xhtml_color='#'+Chrtran("123456","563412",Right(Trans(m.xcolor ,"@0"),6))
m.RGBChr=Left(BinToC(m.xcolor,'R'),3)
r=Asc(Substr(m.RGBChr,1,1)) && RED
g=Asc(Substr(m.RGBChr,2,1)) && GREEN
b=Asc(Substr(m.RGBChr,3,1)) && BLUE
TEXT to thisform.edit1.value textmerge noshow
RGB color=<<m.xcolor>>
R=<<R>>
G=<<G>>
B=<<B>>
RGB(<<R>>,<<G>>,<<B>>)
HTML color=<<m.xhtml_color>>
ENDTEXT
Endproc
Procedure my2
Lparameters nButton, nShift, nXCoord, nYCoord
*--- aevent create an array laEvents
* Aevents( myArray, 0)
*--- reference the calling object
* loObject = myArray[1]
Local m.xcolor
m.xcolor=Thisform.Point(nXCoord,nYCoord)
Thisform.shape2.BackColor=m.xcolor
Thisform.edit2.Value=Thisform.edit1.Value
_Cliptext=Thisform.edit2.Value &&in clipboard
Endproc
Procedure Init
Set Curs Off
Bindevent(Thisform.shape1,"mousedown",Thisform,"my")
Bindevent(Thisform.image1,"mousemove",Thisform,"my1")
Bindevent(Thisform.image1,"mousedown",Thisform,"my2")
Endproc
Procedure spinner1.InteractiveChange
Try
Thisform.image1.Picture=m.yrep+"colorwheel"+Trans(This.Value)+[.png]
Thisform.edit1.Value=""
Thisform.edit2.Value=""
Thisform.shape2.BackColor=Rgb(255,255,255)
Catch
Endtry
Endproc
Procedure Destroy
Clea Events
Endproc
Enddefine
*
*-- EndDefine: ycolorPicker
*endcode
Download these 5 images used by the code (rightclick and save in source folder as colorwheel1,2,3,4,5.png))
Can read these two relative sources here:
http://yousfi.over-blog.com/2015/01/create-a-simple-color-picker.html
http://yousfi.over-blog.com/2015/01/the-gdiplusx-known-colors-translator.html
Updated on 29 may 2015 This added code calculates the color shades for any given color (as base) . the principe is simple and consists to: -add same value to R,G,B components of color to make it lighten -substract the same value to R,G,B components of color to make it darken with this rule:must respect the limit (0,255) to be always positive. the code calculates these shades in a cursor an display all in a browse object.
*Calculate the shades of a given color (15 lighter and 15 darker colors )
*retrieve R,G,B,RGB,HTML COLOR
create cursor ycurs (col c(20),color c(20),shade c(10) ,html c(10))
local m.xcolor
m.xcolor=getcolor()
if m.xcolor=-1
return .f.
endi
Local RGBChr,R,G,B,x,xhtml
m.RGBChr=left(BINTOC(m.xcolor,'R'),3)
R=asc(substr(m.RGBChr,1,1)) && RED
G=asc(substr(m.RGBChr,2,1)) && GREEN
B=asc(substr(m.RGBChr,3,1)) && BLUE
m.x='rgb('+trans(r,'999')+','+trans(g,'999')+','+trans(b,'999')+')'
m.xhtml='#'+Chrtran("123456","563412",Right(Trans(m.xcolor ,"@0"),6))
*get 15 darker colors
local m.oo,m.ww
j=16
for i=75 to 5 step -5
j=j-1
m.oo='rgb('+trans(iif(r-i>0,r-i,0),'999')+','+trans(iif(g-i>0,g-i,0),'999')+','+trans(iif(b-i>0,b-i,0),'999')+')'
m.ww='#'+Chrtran("123456","563412",Right(Trans(eval(m.oo) ,"@0"),6))
insert into ycurs values (m.oo,"","Darken"+trans(j),m.ww)
endfor
*x base
insert into ycurs value (m.x,'','BASE COLOR','#'+Chrtran("123456","563412",Right(Trans(m.xcolor ,"@0"),6)))
yrec=recno()
*get 15 lighten colors
j=0
for i=5 to 75 step 5
j=j+1
m.oo='rgb('+trans(iif(r+i>255,255,r+i),'999')+','+trans(iif(g+i>255,255,g+i),'999')+','+trans(iif(b+i>255,255,b+i),'999')+')'
m.ww='#'+Chrtran("123456","563412",Right(Trans(eval(m.oo) ,"@0"),6))
insert into ycurs values (m.oo,"","lighten"+trans(j),m.ww)
endfor
*brow
sele ycurs
Locate
Browse Name ybrow Title " Shade Colors of[ "+m.x+ ' ]' Nowait &&window as oop object
With ybrow
.DeleteMark=.F.
.GridLines=0
.rowheight=22
.RecordMark=.F.
.Columns(2).DynamicBackColor="eval(col)"
.Columns(3).dynamicBackcolor="iif(recno()=16,255,rgb(254,254,254))"
.Columns(1).dynamicBackcolor="iif(recno()=16,255,rgb(254,254,254))"
.Columns(4).dynamicBackcolor="iif(recno()=16,255,rgb(254,254,254))"
Endwith
retu
