Skip to content

Commit df1884f

Browse files
kramer314kramer314
committed
Working color picker control.
1 parent cc058c0 commit df1884f

39 files changed

+5855
-10
lines changed

‎interact_singlecell.py

+53-7
Original file line numberDiff line numberDiff line change
@@ -561,12 +561,13 @@ def message(self):
561561
:rtype: dict
562562
"""
563563
return_message = {'control_type':'multi_slider',
564-
'subtype':self.subtype,
565-
'sliders':self.sliders,
566-
'label':self.label,
567-
'range':self.interval,
568-
'step':self.stepsize,
569-
'raw':True}
564+
'subtype':self.subtype,
565+
'sliders':self.sliders,
566+
'label':self.label,
567+
'range':self.interval,
568+
'step':self.stepsize,
569+
'raw':True,
570+
'label':self.label}
570571
if self.value_slider:
571572
return_message["values"] = [[repr(j) for j in self.values[i]] for i in self.slider_range]
572573
return_message["default"] = self.default
@@ -580,6 +581,48 @@ def adapter(self,v):
580581
else:
581582
return v
582583

584+
class ColorSelector(InteractControl):
585+
def __init__(self, default="#000000", sage_color=True, width=0, label=""):
586+
self.sage_color = sage_color
587+
588+
try:
589+
from sagenb.misc.misc import Color
590+
self.sage_mode = True
591+
except:
592+
self.sage_mode = False
593+
self.sage_color = False
594+
595+
if self.sage_mode and self.sage_color:
596+
if isinstance(default, Color):
597+
self.default = default
598+
elif isinstance(default, str):
599+
self.default = Color(default)
600+
else:
601+
Color("#000000")
602+
else:
603+
self.default = default if isinstance(default,str) else "#000000"
604+
605+
self.width = int(width)
606+
self.label = label
607+
608+
def message(self):
609+
self.return_value = {'control_type':'color',
610+
'width':self.width,
611+
'raw':False,
612+
'label':self.label}
613+
if self.sage_mode and self.sage_color:
614+
self.return_value["default"] = self.default.html_color()
615+
else:
616+
self.return_value["default"] = self.default
617+
return self.return_value
618+
619+
def adapter(self, v):
620+
if self.sage_mode and self.sage_color:
621+
from sagenb.misc.misc import Color
622+
return Color(v)
623+
else:
624+
return v
625+
583626

584627
def automatic_control(control):
585628
"""
@@ -628,13 +671,15 @@ def automatic_control(control):
628671
else:
629672
C = input_box(default = control, label=label, raw = True)
630673
try:
631-
from sagenb.misc.misc import is_Matrix
674+
from sagenb.misc.misc import is_Matrix, Color
632675
if is_Matrix(control):
633676
default_value = control.list()
634677
nrows = control.nrows()
635678
ncols = control.ncols()
636679
default_value = [[default_value[j * ncols + i] for i in range(ncols)] for j in range(nrows)]
637680
C = input_grid(nrows = nrows, ncols = ncols, label = label, default = default_value)
681+
elif isinstance(control, Color):
682+
C = color(default = Control, label = label)
638683
except:
639684
pass
640685

@@ -663,3 +708,4 @@ def take(n, iterable):
663708
checkbox=Checkbox
664709
continuous_slider=ContinuousSlider
665710
multi_slider=MultiSlider
711+
color_selector=ColorSelector

‎static/colorpicker/css/colorpicker.css

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
.colorpicker {
2+
width: 356px;
3+
height: 176px;
4+
overflow: hidden;
5+
position: absolute;
6+
background: url(../images/colorpicker_background.png);
7+
font-family: Arial, Helvetica, sans-serif;
8+
display: none;
9+
}
10+
.colorpicker_color {
11+
width: 150px;
12+
height: 150px;
13+
left: 14px;
14+
top: 13px;
15+
position: absolute;
16+
background: #f00;
17+
overflow: hidden;
18+
cursor: crosshair;
19+
}
20+
.colorpicker_color div {
21+
position: absolute;
22+
top: 0;
23+
left: 0;
24+
width: 150px;
25+
height: 150px;
26+
background: url(../images/colorpicker_overlay.png);
27+
}
28+
.colorpicker_color div div {
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
width: 11px;
33+
height: 11px;
34+
overflow: hidden;
35+
background: url(../images/colorpicker_select.gif);
36+
margin: -5px 0 0 -5px;
37+
}
38+
.colorpicker_hue {
39+
position: absolute;
40+
top: 13px;
41+
left: 171px;
42+
width: 35px;
43+
height: 150px;
44+
cursor: n-resize;
45+
}
46+
.colorpicker_hue div {
47+
position: absolute;
48+
width: 35px;
49+
height: 9px;
50+
overflow: hidden;
51+
background: url(../images/colorpicker_indic.gif) left top;
52+
margin: -4px 0 0 0;
53+
left: 0px;
54+
}
55+
.colorpicker_new_color {
56+
position: absolute;
57+
width: 60px;
58+
height: 30px;
59+
left: 213px;
60+
top: 13px;
61+
background: #f00;
62+
}
63+
.colorpicker_current_color {
64+
position: absolute;
65+
width: 60px;
66+
height: 30px;
67+
left: 283px;
68+
top: 13px;
69+
background: #f00;
70+
}
71+
.colorpicker input {
72+
background-color: transparent;
73+
border: 1px solid transparent;
74+
position: absolute;
75+
font-size: 10px;
76+
font-family: Arial, Helvetica, sans-serif;
77+
color: #898989;
78+
top: 4px;
79+
right: 11px;
80+
text-align: right;
81+
margin: 0;
82+
padding: 0;
83+
height: 11px;
84+
}
85+
.colorpicker_hex {
86+
position: absolute;
87+
width: 72px;
88+
height: 22px;
89+
background: url(../images/colorpicker_hex.png) top;
90+
left: 212px;
91+
top: 142px;
92+
}
93+
.colorpicker_hex input {
94+
right: 6px;
95+
}
96+
.colorpicker_field {
97+
height: 22px;
98+
width: 62px;
99+
background-position: top;
100+
position: absolute;
101+
}
102+
.colorpicker_field span {
103+
position: absolute;
104+
width: 12px;
105+
height: 22px;
106+
overflow: hidden;
107+
top: 0;
108+
right: 0;
109+
cursor: n-resize;
110+
}
111+
.colorpicker_rgb_r {
112+
background-image: url(../images/colorpicker_rgb_r.png);
113+
top: 52px;
114+
left: 212px;
115+
}
116+
.colorpicker_rgb_g {
117+
background-image: url(../images/colorpicker_rgb_g.png);
118+
top: 82px;
119+
left: 212px;
120+
}
121+
.colorpicker_rgb_b {
122+
background-image: url(../images/colorpicker_rgb_b.png);
123+
top: 112px;
124+
left: 212px;
125+
}
126+
.colorpicker_hsb_h {
127+
background-image: url(../images/colorpicker_hsb_h.png);
128+
top: 52px;
129+
left: 282px;
130+
}
131+
.colorpicker_hsb_s {
132+
background-image: url(../images/colorpicker_hsb_s.png);
133+
top: 82px;
134+
left: 282px;
135+
}
136+
.colorpicker_hsb_b {
137+
background-image: url(../images/colorpicker_hsb_b.png);
138+
top: 112px;
139+
left: 282px;
140+
}
141+
.colorpicker_submit {
142+
position: absolute;
143+
width: 22px;
144+
height: 22px;
145+
background: url(../images/colorpicker_submit.png) top;
146+
left: 322px;
147+
top: 142px;
148+
overflow: hidden;
149+
}
150+
.colorpicker_focus {
151+
background-position: center;
152+
}
153+
.colorpicker_hex.colorpicker_focus {
154+
background-position: bottom;
155+
}
156+
.colorpicker_submit.colorpicker_focus {
157+
background-position: bottom;
158+
}
159+
.colorpicker_slider {
160+
background-position: bottom;
161+
}

0 commit comments

Comments
 (0)