Skip to content

Commit

Permalink
input the RGB via a color picker to single input field
Browse files Browse the repository at this point in the history
  • Loading branch information
@rambo
rambo committed Mar 22, 2013
1 parent 06d1159 commit c67f295
Show file tree
Hide file tree
Showing 36 changed files with 5,795 additions and 10 deletions.
29 changes: 19 additions & 10 deletions software/pc/animationbuilder/animationbuilder.html
View file
Expand Up @@ -3,6 +3,8 @@
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="colorpicker/css/colorpicker.css" />
<script type="text/javascript" src="colorpicker/js/colorpicker.js"></script>
<title>Partyhatwork animation configurator</title>
</head>
<body>
Expand Down Expand Up @@ -54,19 +56,16 @@ <h2>Generated code</h2>
if (jQuery('#frames thead tr').length == 0)
{
row1html = '<tr>';
row2html = '<tr>';
for(i=0; i<8; i++)
{
if (jQuery('#led_'+i+'_enabled').filter(':checked').length)
{
lbl = jQuery('#lbl_led_'+i+'_enabled')
row1html += '<th colspan=3>'+lbl.html()+'</th>';
row2html += '<th>R</th><th>G</th><th>B</th>';
row1html += '<th>'+lbl.html()+'</th>';
}
}
row1html += '<th rowspan=2>Duration (ms)</th></tr>';
row1html += '<th>Duration (ms)</th></tr>';
jQuery('#frames thead').append(row1html);
jQuery('#frames thead').append(row2html);
}

rows = jQuery('#frames tbody tr').length;
Expand All @@ -76,14 +75,24 @@ <h2>Generated code</h2>
{
if (jQuery('#led_'+i+'_enabled').filter(':checked').length)
{
rowhtml += '<td><input id="row_'+rows+'_led_'+i+'_r" /></td>';
rowhtml += '<td><input id="row_'+rows+'_led_'+i+'_g" /></td>';
rowhtml += '<td><input id="row_'+rows+'_led_'+i+'_b" /></td>';
rowhtml += '<td><input class="rgbinput" id="row_'+rows+'_led_'+i+'_rbg" name="row_'+rows+'_led_'+i+'_rbg" /></td>';
}
}
rowhtml += '<td class="duration"><input id="row_'+rows+'_duration" /></td></tr>';
jQuery('#frames tbody').append(rowhtml);

jQuery('input.rgbinput').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
jel = jQuery(el);
jel.val(hex);
jel.css('background-color', '#'+hex);
jel.ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
});

});
});
</script>
Expand All @@ -94,11 +103,11 @@ <h2>Generated code</h2>
}
#frames tbody td input
{
width: 3em;
width: 5em;
}
#frames tbody td.duration input
{
width: 5em;
width: 6em;
}
</style>
</body>
Expand Down
161 changes: 161 additions & 0 deletions software/pc/animationbuilder/colorpicker/css/colorpicker.css
View file
@@ -0,0 +1,161 @@
.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(../images/colorpicker_background.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(../images/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(../images/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(../images/colorpicker_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(../images/colorpicker_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(../images/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(../images/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(../images/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(../images/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(../images/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(../images/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(../images/colorpicker_submit.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}

0 comments on commit c67f295

Please sign in to comment.