Commit aea5c4f0 authored by Jerome Mariette's avatar Jerome Mariette
Browse files

add another example

parent e70c34fb
......@@ -28,7 +28,8 @@
<ul class="nav">
<li><a href="./index.html">About</a></li>
<li class="active"><a href="./documentation.html">Documentation</a></li>
<li><a href="./example.html">Examples</a></li>
<li><a href="./example1.html">Example 1</a></li>
<li><a href="./example2.html">Example 2</a></li>
<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/venny/index.php/Accueil">Sources</a></li>
<li><a href="mailto:support.genopole@toulouse.inra.fr">Contact</a></li>
</ul>
......
......@@ -212,7 +212,8 @@
<ul class="nav">
<li><a href="./index.html">About</a></li>
<li><a href="./documentation.html">Documentation</a></li>
<li class="active"><a href="./example.html">Examples</a></li>
<li class="active"><a href="./example1.html">Example 1</a></li>
<li><a href="./example2.html">Example 2</a></li>
<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/venny/index.php/Accueil">Sources</a></li>
<li><a href="mailto:support.genopole@toulouse.inra.fr">Contact</a></li>
</ul>
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>jvenn</title>
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="css/prettify.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="src/jvenn.js"></script>
<script language="Javascript">
$(document).ready(function () {
function getArrayFromArea(areaID) {
var lines = $("#"+areaID).val().split("\n");
var table = new Array();
for (var lindex in lines) {
table.push(lines[lindex]);
}
return (table);
}
function updateJvenn() {
var seriesTable = new Array();
if ($("#area1").val() != "") {
seriesTable.push({
name: $("#name1").val(),
data: getArrayFromArea("area1")
});
}
if ($("#area2").val() != "") {
seriesTable.push({
name: $("#name2").val(),
data: getArrayFromArea("area2")
});
}
if ($("#area3").val() != "") {
seriesTable.push({
name: $("#name3").val(),
data: getArrayFromArea("area3")
});
}
if ($("#area4").val() != "") {
seriesTable.push({
name: $("#name4").val(),
data: getArrayFromArea("area4")
});
}
if ($("#area5").val() != "") {
seriesTable.push({
name: $("#name5").val(),
data: getArrayFromArea("area5")
});
}
if ($("#area6").val() != "") {
seriesTable.push({
name: $("#name6").val(),
data: getArrayFromArea("area6")
});
}
$("#jvenn-container").jvenn({
series: seriesTable,
displayMode: $("#venn-type").val(),
fnClickCallback: function() {
var value = "";
if (this.listnames.length == 1) {
value += "Elements only in ";
} else {
value += "Common elements in ";
}
for (name in this.listnames) {
value += this.listnames[name] + " ";
}
value += ":\n";
for (val in this.list) {
value += this.list[val] + "\n";
}
$("#names").val(value);
}
});
}
$("#name1").val("Actors");
$("#area1").val("Marilyn Monroe\nArnold Schwarzenegger\nJack Nicholson\nBarbra Streisand\nRobert de Niro\nDean Martin\nHarrison Ford");
$("#name2").val("Singers");
$("#area2").val("Freddy Mercury\nBarbra Streisand\nDean Martin\nRicky Martin\nCeline Dion\nMarilyn Monroe");
$('[id^="clear"]').click(function() {
var index = $(this).attr("id").split("_")[1];
$("#area" + index).val("");
$("#name" + index).val("List " + index);
updateJvenn();
});
// update the view when any fields change
$("[id^=name]").change(function() {
updateJvenn();
});
$("[id^=area]").change(function() {
updateJvenn();
});
$("#venn-type").change(function() {
updateJvenn();
});
// first init of the jvenn plugin
updateJvenn();
});
</script>
<style type="text/css">
/*add classes control-group*/
.control-group.yellow .control-label,
.control-group.yellow .help-block,
.control-group.yellow .help-inline {
color: #f3f300;
}
.control-group.yellow .checkbox,
.control-group.yellow .radio,
.control-group.yellow input,
.control-group.yellow select,
.control-group.yellow textarea {
color: #f3f300;
}
.control-group.yellow input,
.control-group.yellow select,
.control-group.yellow textarea {
border-color: #f3f300;
-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.yellow input:focus,
.control-group.yellow select:focus,
.control-group.yellow textarea:focus {
border-color: #c0c000;
-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;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f3f300;
}
.control-group.yellow .input-prepend .add-on,
.control-group.yellow .input-append .add-on {
color: #f3f300;
background-color: #ffff91;
border-color: #f3f300;
}
.control-group.orange .control-label,
.control-group.orange .help-block,
.control-group.orange .help-inline {
color: #ffa54f;
}
.control-group.orange .checkbox,
.control-group.orange .radio,
.control-group.orange input,
.control-group.orange select,
.control-group.orange textarea {
color: #ffa54f;
}
.control-group.orange input,
.control-group.orange select,
.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,
.control-group.orange select:focus,
.control-group.orange textarea:focus {
border-color: #b15700;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa54f;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa54f;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa54f;
}
.control-group.orange .input-prepend .add-on,
.control-group.orange .input-append .add-on {
color: #ffa54f;
background-color: #ffe1c5;
border-color: #ffa54f;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">jvenn</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="./index.html">About</a></li>
<li><a href="./documentation.html">Documentation</a></li>
<li><a href="./example1.html">Example 1</a></li>
<li class="active"><a href="./example2.html">Example 2</a></li>
<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/venny/index.php/Accueil">Sources</a></li>
<li><a href="mailto:support.genopole@toulouse.inra.fr">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello venn!</h1>
<p class="bodytext"> 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="margin-top:5px"><option value="classic">classic</option><option value="edwards">Edwards'</option></select> venn to see the results.</p>
</div>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span7">
<div class="row-fluid">
<div id="jvenn-container"></div>
</div>
<div class="row-fluid">
<div class="span12">
<p> Click on a number to show the corresponding elements: </p>
<textarea id="names" style="width: 100%;" wrap="off" rows="23"></textarea>
</div>
</div>
</div>
<div class="span5">
<div class="row-fluid">
<div class="span12">
<div class="control-group success">
<input class="span6" id="name1" type="text" style="font-weight: bold;" value="List 1" maxlength="11"/>
<div class="controls controls-row">
<textarea class="span10" id="area1" wrap="off" rows="4"></textarea>
<a class="btn btn-link" id="clear_1" href="javascript:void(0)">clear</a>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="control-group info">
<input class="span6" id="name2" type="text" style="font-weight: bold;" value="List 2" maxlength="11"/>
<div class="controls controls-row">
<textarea class="span10" id="area2" wrap="off" rows="4"></textarea>
<a class="btn btn-link" id="clear_2" href="javascript:void(0)">clear</a>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="control-group error">
<input class="span6" id="name3" type="text" style="font-weight: bold;" value="List 3" maxlength="11"/>
<div class="controls controls-row">
<textarea class="span10" id="area3" wrap="off" rows="4"></textarea>
<a class="btn btn-link" id="clear_3" href="javascript:void(0)">clear</a>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="control-group yellow">
<input class="span6" id="name4" type="text" style="font-weight: bold;" value="List 4" maxlength="11"/>
<div class="controls controls-row">
<textarea class="span10" id="area4" wrap="off" rows="4"></textarea>
<a class="btn btn-link" id="clear_4" href="javascript:void(0)">clear</a>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="control-group orange">
<input class="span6" id="name5" type="text" style="font-weight: bold;" value="List 5" maxlength="11"/>
<div class="controls controls-row">
<textarea class="span10" id="area5" wrap="off" rows="4"></textarea>
<a class="btn btn-link" id="clear_5" href="javascript:void(0)">clear</a>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="control-group warning">
<input class="span6" id="name6" type="text" style="font-weight: bold;" value="List 6" maxlength="11"/>
<div class="controls controls-row">
<textarea class="span10" id="area6" wrap="off" rows="4"></textarea>
<a class="btn btn-link" id="clear_6" href="javascript:void(0)">clear</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p>Copyright &copy; 2014, INRA | Designed by <a href="http://bioinfo.genotoul.fr/" target="_blank">GenoToul Bioinfo</a> team.</p>
</footer>
</div>
<script>
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
</body>
</html>
\ No newline at end of file
......@@ -28,7 +28,8 @@
<ul class="nav">
<li class="active"><a href="./index.html">About</a></li>
<li><a href="./documentation.html">Documentation</a></li>
<li><a href="./example.html">Examples</a></li>
<li><a href="./example1.html">Example 1</a></li>
<li><a href="./example2.html">Example 2</a></li>
<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/venny/index.php/Accueil">Sources</a></li>
<li><a href="mailto:support.genopole@toulouse.inra.fr">Contact</a></li>
</ul>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment