Commit 74ca8ad1 authored by Philippe Bardou's avatar Philippe Bardou
Browse files

Add param to jvenn :

- fontSize
- fontFamily

New example page with :
- colorpicker
- fontSize
- fontFamily
- ...
parent 5d06d41a
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> <meta charset="utf-8">
<title>jvenn</title> <title>jvenn</title>
<!-- Le styles -->
<!-- Les styles -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen"> <link href="css/bootstrap.css" rel="stylesheet" media="screen">
<style type="text/css"> <style type="text/css">
body { body {
...@@ -14,12 +15,24 @@ ...@@ -14,12 +15,24 @@
</style> </style>
<link href="css/prettify.css" rel="stylesheet" media="screen"> <link href="css/prettify.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="src/jvenn.min.js"></script> <script type="text/javascript" src="js/bootstrap-colorpicker.min.js"></script>
<script type="text/javascript" src="src/canvas2svg.js"></script>
<script type="text/javascript" src="src/jvenn.js"></script>
<script language="Javascript"> <script language="Javascript">
$(document).ready(function () { $(document).ready(function () {
var colorDefault = ["#006600", "#5a9bd4", "#f15a60", "#cfcf1b", "#ff7500", "#c09853"],
displayMode = "classic",
displayStat = true,
shortNumber = true,
fontSize = "12px",
fontFamily = "Arial";
function getArrayFromArea(areaID) { function getArrayFromArea(areaID) {
var lines = $("#"+areaID).val().split("\n"); var lines = $("#"+areaID).val().split("\n");
var table = new Array(); var table = new Array();
...@@ -45,12 +58,24 @@ ...@@ -45,12 +58,24 @@
}); });
} }
var colorsTable = new Array();
colorsTable.push($('#name1').css("color"));
colorsTable.push($('#name2').css("color"));
colorsTable.push($('#name3').css("color"));
colorsTable.push($('#name4').css("color"));
colorsTable.push($('#name5').css("color"));
colorsTable.push($('#name6').css("color"));
$("#jvenn-container").jvenn({ $("#jvenn-container").jvenn({
series: seriesTable, series: seriesTable,
colors: colorsTable,
fontSize: fontSize,
fontFamily: fontFamily,
searchInput: $("#search-field"), searchInput: $("#search-field"),
searchStatus: $("#search-status"), searchStatus: $("#search-status"),
displayMode: $("#venn-type").val(), displayMode: displayMode,
displayStat: true, shortNumber: shortNumber,
displayStat: displayStat,
fnClickCallback: function() { fnClickCallback: function() {
var value = ""; var value = "";
if (this.listnames.length == 1) { if (this.listnames.length == 1) {
...@@ -506,88 +531,187 @@ ...@@ -506,88 +531,187 @@
updateJvenn(); updateJvenn();
}); });
$('[id^="colorp"]').colorpicker().on('changeColor.colorpicker', function(event) {
var index = $(this).attr("id").split("_")[1];
$("#name" + index).css("color", event.color.toHex());
$("#name" + index).css("border-color", event.color.toHex());
$("#area" + index).css("color", event.color.toHex());
$("#area" + index).css("border-color", event.color.toHex());
updateJvenn();
});
$('[id^="colord"]').click(function() {
var index = $(this).attr("id").split("_")[1];
$("#name" + index).css("color", colorDefault[index-1]);
$("#name" + index).css("border-color", colorDefault[index-1]);
$("#area" + index).css("color", colorDefault[index-1]);
$("#area" + index).css("border-color", colorDefault[index-1]);
$("#colorp_" + index).colorpicker('setValue', colorDefault[index-1]);
updateJvenn();
});
$("#qm_yes").click(function() {
shortNumber = true;
updateJvenn();
});
$("#qm_no").click(function() {
shortNumber = false;
updateJvenn();
});
$("#ds_yes").click(function() {
displayStat = true;
updateJvenn();
});
$("#ds_no").click(function() {
displayStat = false;
updateJvenn();
});
$("#dm_classic").click(function() {
displayMode = "classic";
updateJvenn();
});
$("#dm_edwards").click(function() {
displayMode = "edwards";
updateJvenn();
});
$('[id^="ff"]').click(function() {
fontFamily = $(this).html();
updateJvenn();
});
$('[id^="fs"]').click(function() {
fontSize = $(this).html();
updateJvenn();
});
// first init of the jvenn plugin // first init of the jvenn plugin
$('#colorp_1').children("span").children("i").css("background-color", colorDefault[0]);
$('#colorp_2').children("span").children("i").css("background-color", colorDefault[1]);
$('#colorp_3').children("span").children("i").css("background-color", colorDefault[2]);
$('#colorp_4').children("span").children("i").css("background-color", colorDefault[3]);
$('#colorp_5').children("span").children("i").css("background-color", colorDefault[4]);
$('#colorp_6').children("span").children("i").css("background-color", colorDefault[5]);
updateJvenn(); updateJvenn();
}); });
</script> </script>
<style type="text/css"> <style type="text/css">
/*add classes control-group*/ /* add classes control-group.color */
.control-group.yellow .control-label, .control-group.color1 input,
.control-group.yellow .help-block, .control-group.color1 textarea {
.control-group.yellow .help-inline { color: #006600;
color: #f3f300; border-color: #006600;
} }
.control-group.yellow .checkbox, .control-group.color1 input:focus,
.control-group.yellow .radio, .control-group.color1 textarea:focus {
.control-group.yellow input, border-color: #65a265;
.control-group.yellow select, -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #006600;
.control-group.yellow textarea { -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #006600;
color: #f3f300; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #006600;
} }
.control-group.yellow input, .control-group.color2 input,
.control-group.yellow select, .control-group.color2 textarea {
.control-group.yellow textarea { color: #5a9bd4;
border-color: #f3f300; border-color: #5a9bd4;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); .control-group.color2 input:focus,
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); .control-group.color2 textarea:focus {
border-color: #5a9bd4;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #5a9bd4;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #5a9bd4;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #5a9bd4;
} }
.control-group.yellow input:focus, .control-group.color3 input,
.control-group.yellow select:focus, .control-group.color3 textarea {
.control-group.yellow textarea:focus { color: #f15a60;
border-color: #c0c000; border-color: #f15a60;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f3f300; }
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f3f300; .control-group.color3 input:focus,
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f3f300; .control-group.color3 textarea:focus {
border-color: #f15a60;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f15a60;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f15a60;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f15a60;
}
.control-group.color4 input,
.control-group.color4 textarea {
color: #cfcf1b;
border-color: #cfcf1b;
}
.control-group.color4 input:focus,
.control-group.color4 textarea:focus {
border-color: #cfcf1b;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #cfcf1b;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #cfcf1b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #cfcf1b;
} }
.control-group.yellow .input-prepend .add-on, .control-group.color5 input,
.control-group.yellow .input-append .add-on { .control-group.color5 textarea {
color: #f3f300; color: #ff7500;
background-color: #ffff91; border-color: #ff7500;
border-color: #f3f300; }
.control-group.color5 input:focus,
.control-group.color5 textarea:focus {
border-color: #ff7500;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff7500;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff7500;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff7500;
} }
.control-group.orange .control-label, .control-group.color6 input,
.control-group.orange .help-block, .control-group.color6 textarea {
.control-group.orange .help-inline { color: #c09853;
color: #ffa54f; border-color: #c09853;
} }
.control-group.orange .checkbox, .control-group.color6 input:focus,
.control-group.orange .radio, .control-group.color6 textarea:focus {
.control-group.orange input, border-color: #c09853;
.control-group.orange select, -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c09853;
.control-group.orange textarea { -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c09853;
color: #ffa54f; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c09853;
} }
.control-group.orange input, .add-on {
.control-group.orange select, margin-left: -7px !important;
.control-group.orange textarea {
border-color: #ffa54f;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
} }
.control-group.orange input:focus, /* Venn conf pane css */
.control-group.orange select:focus, .bs-docs-example {
.control-group.orange textarea:focus { position: relative;
border-color: #b15700; margin: 0 0 35px 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa54f; padding: 39px 19px 14px;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa54f; *padding-top: 19px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa54f; background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
} }
.control-group.orange .input-prepend .add-on, /* Echo out a label for the example */
.control-group.orange .input-append .add-on { .bs-docs-example:after {
color: #ffa54f; content: "Venn global configuration";
background-color: #ffe1c5; position: absolute;
border-color: #ffa54f; top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
} }
.colorpicker {
min-width:100px;
}
</style> </style>
</head> </head>
<body> <body>
...@@ -619,13 +743,10 @@ ...@@ -619,13 +743,10 @@
<h1>Hello jvenn!</h1> <h1>Hello jvenn!</h1>
<div class="span5" style="min-width:470px;margin-left:0"> <div class="span5" style="min-width:470px;margin-left:0">
<p class="bodytext" style="margin-top:15px"> Paste up to <strong>six</strong> lists using one row per element, then click <p class="bodytext" style="margin-top:15px"> Paste up to <strong>six</strong> lists using one row per element, then click
the numbers in the <select id="venn-type" class="input-small" style="width:110px;margin-top:8px"><option value="classic">classic</option><option value="edwards">Edwards'</option></select> venn to see the results. the numbers in the venn to see the results.
<br/>Find an element in list(s):
<input id="search-field" type="text" style="margin-top:8px" placeholder="enter an element name..."/>
<span id="search-status" class="label label-info" style="vertical-align: 16px; margin-left: -35px;"></span>
</p> </p>
</div> </div>
<div class="span5" style="margin:35px 0 0 60px"> <div class="span5" style="margin:-25px 0 0 60px">
<div style="position:absolute;width:510px;padding:0px 5px 0 5px;background-color:white;border:1px solid lightgrey;border-radius:5px;text-align:justify"> <div style="position:absolute;width:510px;padding:0px 5px 0 5px;background-color:white;border:1px solid lightgrey;border-radius:5px;text-align:justify">
<span class="label label-info" style="position:absolute;top:-10px;left:-10px">How to cite</span> <span class="label label-info" style="position:absolute;top:-10px;left:-10px">How to cite</span>
<h6>Philippe Bardou, Jérôme Mariette, Frédéric Escudié, Christophe Djemiel and Christophe Klopp. jvenn: an interactive Venn diagram viewer. <h6>Philippe Bardou, Jérôme Mariette, Frédéric Escudié, Christophe Djemiel and Christophe Klopp. jvenn: an interactive Venn diagram viewer.
...@@ -634,7 +755,7 @@ ...@@ -634,7 +755,7 @@
</div> </div>
</div> </div>
<p style="clear:both;padding-top:15px;text-align:right"> <p style="clear:both;text-align:right">
<button id="clear-all" class="btn">Clear all</button> <button id="clear-all" class="btn">Clear all</button>
<button id="example" class="btn btn-primary">Load an example...</button> <button id="example" class="btn btn-primary">Load an example...</button>
</p> </p>
...@@ -642,80 +763,166 @@ ...@@ -642,80 +763,166 @@
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
<div class="row-fluid"> <div class="row-fluid">
<div class="span7"> <div class="span6">
<div class="row-fluid"> <div class="row-fluid">
<div id="jvenn-container"></div> <div id="jvenn-container"></div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div>
<p> Click on a venn diagram figure to display the linked elements: </p> <p> Click on a venn diagram figure to display the linked elements: </p>
<textarea readonly id="names" style="width: 100%;" wrap="off" rows="10"></textarea> <textarea readonly id="names" style="width: 87%;" wrap="off" rows="10"></textarea>
</div> </div>
</div> </div>
</div> </div>
<div class="span5">
<div class="span6">
<div class="bs-docs-example">
<img src="img/bullet.png" style="vertical-align:initial;padding-top:10px">
Display mode:
<div class="btn-group" data-toggle="buttons-radio">
<button id="dm_classic" type="button" class="btn btn-mini active">Classic</button>
<button id="dm_edwards" type="button" class="btn btn-mini">Edwards'</button>
</div><br/>
<img src="img/bullet.png" style="vertical-align:initial;padding-top:10px">
Font family:
<div class="btn-group" data-toggle="buttons-radio">
<button id="ff_arial" type="button" class="btn btn-mini active">Arial</button>
<button id="ff_sserif" type="button" class="btn btn-mini">Sans-serif</button>
<button id="ff_serif" type="button" class="btn btn-mini">Serif</button>
<button id="ff_mono" type="button" class="btn btn-mini">Monospace</button>
</div><br/>
<img src="img/bullet.png" style="vertical-align:initial;padding-top:10px">
Font size:
<div class="btn-group" data-toggle="buttons-radio">
<button id="fs_8" type="button" class="btn btn-mini">8px</button>
<button id="fs_9" type="button" class="btn btn-mini">9px</button>
<button id="fs_10" type="button" class="btn btn-mini">10px</button>
<button id="fs_11" type="button" class="btn btn-mini">11px</button>
<button id="fs_12" type="button" class="btn btn-mini active">12px</button>
<button id="fs_13" type="button" class="btn btn-mini">13px</button>
<button id="fs_14" type="button" class="btn btn-mini">14px</button>
</div><br/>
<img src="img/bullet.png" style="vertical-align:initial;padding-top:10px">
Display some statistics based on input lists:
<div class="btn-group" data-toggle="buttons-radio">
<button id="ds_yes" type="button" class="btn btn-mini active">Yes</button>
<button id="ds_no" type="button" class="btn btn-mini">No</button>
</div><br/>
<img src="img/bullet.png" style="vertical-align:initial;padding-top:10px">
Substitute intersection count size by a question mark:
<div class="btn-group" data-toggle="buttons-radio">
<button id="qm_yes" type="button" class="btn btn-mini active">Yes</button>
<button id="qm_no" type="button" class="btn btn-mini">No</button>
</div>
<hr style="margin-bottom:12px;margin-left:50px;margin-right:50px"/>
<img src="img/bullet.png" style="vertical-align:initial;">
Find an element in list(s):
<input id="search-field" type="text" style="margin-top:8px" placeholder="enter an element name..."/>
<span id="search-status" class="label label-info" style="vertical-align: 16px; margin-left: -35px;"></span>
</div>
</div>
<div class="span6">
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span6">
<div class="control-group success"> <div class="control-group color1">
<input class="span6" id="name1" type="text" style="font-weight: bold;" value="List 1" maxlength="11"/> <input class="span6" id="name1" type="text" style="font-weight: bold;" value="List 1" maxlength="11"/>
<div class="controls controls-row"> <div id="colorp_1" class="input-append colorpicker-component colorpicker-element">
<textarea class="span10" id="area1" wrap="off" rows="4"></textarea> <input type="text" value="#006600" class="form-control" style="display:none"/>
<a class="btn btn-link" id="clear_1" href="javascript:void(0)">clear</a> <span class="add-on"><i></i></span>
</div> </div>
<div class="btn-group" style="margin-left:15px">
<button id="colord_1" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-refresh"></i></button>
<button id="clear_1" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-trash"></i></button>
</div> </div>
<div class="controls controls-row">
<textarea class="span11" id="area1" wrap="off" rows="4" style="resize:none"></textarea>
</div> </div>
</div> </div>
<div class="row-fluid"> </div>
<div class="span12"> <div class="span6" style="margin-left:10px;">
<div class="control-group info"> <div class="control-group color2">
<input class="span6" id="name2" type="text" style="font-weight: bold;" value="List 2" maxlength="11"/> <input class="span6" id="name2" type="text" style="font-weight: bold;" value="List 2" maxlength="11"/>
<div id="colorp_2" class="input-append colorpicker-component colorpicker-element">
<input type="text" value="#5a9bd4" class="form-control" style="display:none"/>
<span class="add-on"><i></i></span>
</div>
<div class="btn-group" style="margin-left:15px">
<button id="colord_2" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-refresh"></i></button>
<button id="clear_2" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-trash"></i></button>
</div>
<div class="controls controls-row"> <div class="controls controls-row">
<textarea class="span10" id="area2" wrap="off" rows="4"></textarea> <textarea class="span11" id="area2" wrap="off" rows="4" style="resize:none"></textarea>
<a class="btn btn-link" id="clear_2" href="javascript:void(0)">clear</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span6">
<div class="control-group error"> <div class="control-group color3">
<input class="span6" id="name3" type="text" style="font-weight: bold;" value="List 3" maxlength="11"/> <input class="span6" id="name3" type="text" style="font-weight: bold;" value="List 3" maxlength="11"/>
<div class="controls controls-row"> <div id="colorp_3" class="input-append colorpicker-component colorpicker-element">
<textarea class="span10" id="area3" wrap="off" rows="4"></textarea> <input type="text" value="#f15a60" class="form-control" style="display:none"/>
<a class="btn btn-link" id="clear_3" href="javascript:void(0)">clear</a> <span class="add-on"><i></i></span>
</div> </div>
<div class="btn-group" style="margin-left:15px">
<button id="colord_3" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-refresh"></i></button>
<button id="clear_3" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-trash"></i></button>
</div> </div>
<div class="controls controls-row">
<textarea class="span11" id="area3" wrap="off" rows="4" style="resize:none"></textarea>
</div> </div>
</div> </div>
<div class="row-fluid"> </div>
<div class="span12"> <div class="span6">
<div class="control-group yellow"> <div class="control-group color4">
<input class="span6" id="name4" type="text" style="font-weight: bold;" value="List 4" maxlength="11"/> <input class="span6" id="name4" type="text" style="font-weight: bold;" value="List 4" maxlength="11"/>
<div id="colorp_4" class="input-append colorpicker-component colorpicker-element">
<input type="text" value="#cfcf1b" class="form-control" style="display:none"/>
<span class="add-on"><i></i></span>
</div>
<div class="btn-group" style="margin-left:15px">
<button id="colord_4" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-refresh"></i></button>
<button id="clear_4" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-trash"></i></button>
</div>
<div class="controls controls-row"> <div class="controls controls-row">
<textarea class="span10" id="area4" wrap="off" rows="4"></textarea> <textarea class="span11" id="area4" wrap="off" rows="4" style="resize:none"></textarea>
<a class="btn btn-link" id="clear_4" href="javascript:void(0)">clear</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span6">
<div class="control-group orange"> <div class="control-group color5">
<input class="span6" id="name5" type="text" style="font-weight: bold;" value="List 5" maxlength="11"/> <input class="span6" id="name5" type="text" style="font-weight: bold;" value="List 5" maxlength="11"/>
<div class="controls controls-row"> <div id="colorp_5" class="input-append colorpicker-component colorpicker-element">
<textarea class="span10" id="area5" wrap="off" rows="4"></textarea> <input type="text" value="#ff7500" class="form-control" style="display:none"/>
<a class="btn btn-link" id="clear_5" href="javascript:void(0)">clear</a> <span class="add-on"><i></i></span>
</div> </div>
<div class="btn-group" style="margin-left:15px">
<button id="colord_5" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-refresh"></i></button>
<button id="clear_5" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-trash"></i></button>
</div> </div>
<div class="controls controls-row">
<textarea class="span11" id="area5" wrap="off" rows="4" style="resize:none"></textarea>
</div> </div>
</div> </div>
<div class="row-fluid"> </div>
<div class="span12"> <div class="span6">
<div class="control-group warning"> <div class="control-group color6">
<input class="span6" id="name6" type="text" style="font-weight: bold;" value="List 6" maxlength="11"/> <input class="span6" id="name6" type="text" style="font-weight: bold;" value="List 6" maxlength="11"/>
<div id="colorp_6" class="input-append colorpicker-component colorpicker-element">
<input type="text" value="#c09853" class="form-control" style="display:none"/>
<span class="add-on"><i></i></span>
</div>
<div class="btn-group" style="margin-left:15px">