|
|
(155 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
| <head> | | <head> |
− | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.js"></script>
| + | <style> |
− | <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css" rel="stylesheet" type="text/css" />
| + | div#content{ display: none; } |
− | <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
| + | </style> |
− | | + | <script> |
− | | + | sessionStorage.setItem('LINK', 'Collaborations'); |
− | <style type="text/css">
| + | window.location.href = 'https://2017.igem.org/Team:Greece/Achievements'; |
− | #sideMenu{ display: none; }
| + | </script> |
− | | + | |
− | body{ background-color: #ffffff; }
| + | |
− |
| + | |
− | #main_box{ background-color: #ffffff }
| + | |
− | | + | |
− | #mynetwork {
| + | |
− | width: 100%;
| + | |
− | height: 750px;
| + | |
− | background-color: white;
| + | |
− | z-index: 100;
| + | |
− | }
| + | |
− |
| + | |
− | #details_box{
| + | |
− | float: right;
| + | |
− | width: 44.5%;
| + | |
− | height: 750px;
| + | |
− | text-align: center;
| + | |
− | z-index:99;
| + | |
− | background-color: white;
| + | |
− | opacity:0;
| + | |
− | transition: opacity 1s linear;
| + | |
− | -webkit-transition: opacity 1s linear;
| + | |
− | -moz-transition: opacity 1s linear;
| + | |
− | -o-transition: opacity 1s linear;
| + | |
− | }
| + | |
− |
| + | |
− | .twoChildren {
| + | |
− | position: relative;
| + | |
− | display: inline-block;
| + | |
− | }
| + | |
− | </style>
| + | |
| </head> | | </head> |
− | <body>
| |
− | <div id='main_box'>
| |
− |
| |
− | <div class='twoChildren' id="mynetwork"></div>
| |
− |
| |
− | <div class='twoChildren' id='details_box'>
| |
− | <span id='title' style='position:relative; display:block; padding:0px 0px 25px 0px; height:50px;' ><h1></h1></span>
| |
− | <span id='details' style='position:relative; display:block; padding:5px 0px 0px 0px; height:650px;' ></span>
| |
− | </div>
| |
− |
| |
− | </div>
| |
− | <pre id="eventSpan"></pre>
| |
− | <input type='hidden' id='Node_1' value='This is NODE 1' name='Title for node 1'/>
| |
− | <input type='hidden' id='Node_2' value='This is NODE 2' name='Title for node 2'/>
| |
− | <input type='hidden' id='Node_3' value='This is NODE 3' name='Title for node 3'/>
| |
− | <input type='hidden' id='Node_4' value='This is NODE 4' name='Title for node 4'/>
| |
− | <input type='hidden' id='Node_5' value='This is NODE 5' name='Title for node 5'/>
| |
− | <input type='hidden' id='Node_6' value='This is NODE 6' name='Title for node 6'/>
| |
− | <input type='hidden' id='Node_7' value='This is NODE 7' name='Title for node 7'/>
| |
− | <input type='hidden' id='Node_8' value='This is NODE 8' name='Title for node 8'/>
| |
− | <input type='hidden' id='Node_9' value='This is NODE 9' name='Title for node 9'/>
| |
− | <input type='hidden' id='Node_10' value='This is NODE 10' name='Title for node 10'/>
| |
− | <input type='hidden' id='Node_11' value='This is NODE 11' name='Title for node 11'/>
| |
− | <input type='hidden' id='Node_12' value='This is NODE 12' name='Title for node 12'/>
| |
− |
| |
− | <script type="text/javascript">
| |
− | // create an array with nodes
| |
− | var nodes = new vis.DataSet([
| |
− | {id: 1, label: 'Node 1', group: 'groupA', image: 'https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb'},
| |
− | {id: 2, label: 'Node 2', group: 'groupA', shape: 'box'},
| |
− | {id: 3, label: 'Node 3', group: 'groupA', size: 17 },
| |
− | {id: 4, label: 'Node 4', group: 'groupA', shape: 'image',image: 'https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb', size:40},
| |
− | {id: 5, label: 'Node 5', group: 'groupB'},
| |
− | {id: 6, label: 'Node 6', group: 'groupB', size: 75},
| |
− | {id: 7, label: 'Node 7', group: 'groupB'},
| |
− | {id: 8, label: 'Node 8', group: 'groupC'},
| |
− | {id: 9, label: 'Node 9', group: 'groupC'},
| |
− | {id: 10, label: 'Node 10', group: 'groupC'},
| |
− | {id: 11, label: 'Node 11', group: 'groupD'},
| |
− | {id: 12, label: 'Node 12', group: 'groupD'}
| |
− | ]);
| |
− |
| |
− | // create an array with edges
| |
− | var edges = new vis.DataSet([
| |
− | {from: 1, to: 3, length: 1800},
| |
− | {from: 1, to: 2},
| |
− | {from: 2, to: 4},
| |
− | {from: 2, to: 5},
| |
− | {from: 6, to: 2},
| |
− | {from: 6, to: 8},
| |
− | {from: 6, to: 9},
| |
− | {from: 8, to: 11},
| |
− | {from: 11, to: 7},
| |
− | {from: 8, to: 10},
| |
− | {from: 8, to: 12}
| |
− | ]);
| |
− |
| |
− | // create a network
| |
− | var container = document.getElementById('mynetwork');
| |
− |
| |
− | // provide the data in the vis format
| |
− | var data = {
| |
− | nodes: nodes,
| |
− | edges: edges
| |
− | };
| |
− |
| |
− | //Options for each thing in network (styles etc)
| |
− | var options = {
| |
− | nodes:{
| |
− | borderWidth: 1,
| |
− | borderWidthSelected: 2,
| |
− | brokenImage:'https://cldup.com/0IRxBwvTKJ.png',
| |
− | chosen: true,
| |
− | color: {
| |
− | border: '#2B7CE9',
| |
− | background: '#ffffff',
| |
− | highlight: {
| |
− | border: '#2B7CE9',
| |
− | background: '#D2E5FF'
| |
− | },
| |
− | hover: {
| |
− | border: '#2B7CE9',
| |
− | background: '#D2E5FF'
| |
− | }
| |
− | },
| |
− | fixed: {
| |
− | x:false,
| |
− | y:false
| |
− | },
| |
− | font: {
| |
− | color: '#343434',
| |
− | size: 14, // px
| |
− | face: 'arial',
| |
− | background: 'none',
| |
− | strokeWidth: 0, // px
| |
− | strokeColor: '#ffffff',
| |
− | align: 'center',
| |
− | multi: false,
| |
− | vadjust: 0,
| |
− | bold: {
| |
− | color: '#343434',
| |
− | size: 14, // px
| |
− | face: 'arial',
| |
− | vadjust: 0,
| |
− | mod: 'bold'
| |
− | },
| |
− | ital: {
| |
− | color: '#343434',
| |
− | size: 14, // px
| |
− | face: 'arial',
| |
− | vadjust: 0,
| |
− | mod: 'italic',
| |
− | },
| |
− | boldital: {
| |
− | color: '#343434',
| |
− | size: 14, // px
| |
− | face: 'arial',
| |
− | vadjust: 0,
| |
− | mod: 'bold italic'
| |
− | },
| |
− | mono: {
| |
− | color: '#343434',
| |
− | size: 15, // px
| |
− | face: 'courier new',
| |
− | vadjust: 2,
| |
− | mod: ''
| |
− | }
| |
− | },
| |
− | group: undefined,
| |
− | heightConstraint: false,
| |
− | hidden: false,
| |
− | icon: {
| |
− | face: 'FontAwesome',
| |
− | size: 50,
| |
− | color:'#2B7CE9'
| |
− | },
| |
− | image: 'https://cldup.com/0IRxBwvTKJ.png',
| |
− | label: undefined,
| |
− | labelHighlightBold: true,
| |
− | level: undefined,
| |
− | mass: 1,
| |
− | physics: true,
| |
− | scaling: {
| |
− | min: 10,
| |
− | max: 30,
| |
− | label: {
| |
− | enabled: false,
| |
− | min: 14,
| |
− | max: 30,
| |
− | maxVisible: 30,
| |
− | drawThreshold: 5
| |
− | },
| |
− | customScalingFunction: function (min,max,total,value) {
| |
− | if (max === min) {
| |
− | return 0.5;
| |
− | }
| |
− | else {
| |
− | let scale = 1 / (max - min);
| |
− | return Math.max(0,(value - min)*scale);
| |
− | }
| |
− | }
| |
− | },
| |
− | shadow:{
| |
− | enabled: false,
| |
− | color: 'rgba(0,0,0,0.5)',
| |
− | size:10,
| |
− | x:5,
| |
− | y:5
| |
− | },
| |
− | shape: 'image',
| |
− | shapeProperties: {
| |
− | borderDashes: false, // only for borders
| |
− | borderRadius: 6, // only for box shape
| |
− | interpolation: false, // only for image and circularImage shapes
| |
− | useImageSize: false, // only for image and circularImage shapes
| |
− | useBorderWithImage: false // only for image shape
| |
− | },
| |
− | size: 25,
| |
− | title: undefined,
| |
− | value: undefined,
| |
− | widthConstraint: false
| |
− | },
| |
− | interaction: {
| |
− | hover: true,
| |
− | selectConnectedEdges: false,
| |
− | zoomView: true
| |
− | },
| |
− | groups: {
| |
− | 'groupA': {
| |
− | color: '#FF9900' // orange
| |
− | },
| |
− | 'groupB': {
| |
− | color: "#2B7CE9" // blue
| |
− | },
| |
− | 'groupC': {
| |
− | color: "#5A1E5C" // purple
| |
− | },
| |
− | 'groupD': {
| |
− | color: "#ffffff" // red
| |
− | }
| |
− | }
| |
− | };
| |
− |
| |
− | // initialize your network!
| |
− | var network = new vis.Network(container, data, options);
| |
− |
| |
− | network.fit();
| |
− |
| |
− | network.once('stabilized', function() {
| |
− | var scaleOption = { scale : 0.7 };
| |
− | network.moveTo(scaleOption);
| |
− | })
| |
− |
| |
− | network.on("click", function (properties) {
| |
− | properties.event = "[original event]";
| |
− | //document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(properties, null, 4); //JSON.stringify(obj, replacer, white_space_for_readability_purposes)
| |
− | console.log('click event, getNodeAt returns: ' + this.getNodeAt(properties.pointer.DOM));
| |
− |
| |
− | displayDetails(properties.nodes);
| |
− | });
| |
− | //On mouse over
| |
− | network.on("hoverNode", function (properties) {
| |
− | properties.event = "[original event]";
| |
− | if( !([3,4,6].includes(('' + properties.node)*1 )) ){
| |
− | network.canvas.body.container.style.cursor = 'pointer';
| |
− | }
| |
− | });
| |
− | //On mouse leave
| |
− | network.on("blurNode", function (properties) {
| |
− | properties.event = "[original event]";
| |
− | if( !([3,4,6].includes(('' + properties.node)*1 )) ){
| |
− | network.canvas.body.container.style.cursor = 'default';
| |
− | }
| |
− | });
| |
− | </script>
| |
− | <script>
| |
− | function displayDetails(nodeId){
| |
− |
| |
− | if( !([3,4,6].includes((''+nodeId)*1 )) ){
| |
− |
| |
− | $('#title').html( '<h1>' + document.getElementById('Node_' + nodeId).name + '</h1>' );
| |
− | $('#details').html( document.getElementById('Node_' + nodeId).value );
| |
− | $('#details_box').css('opacity', '1');
| |
− | $('#mynetwork').animate({width:'55%'}, 500);
| |
− | }
| |
− | }
| |
− | network.fit();
| |
− | </script>
| |
− |
| |
− | <!-- Styling Script -->
| |
− | <script>
| |
− | var canvae = document.getElementsByTagName('canvas')[0];
| |
− | var ctx = canvae.getContext('2d');
| |
− | ctx.textAlign = "center";
| |
− |
| |
− | void(canvae.style.position = 'absolute');
| |
− | void(canvae.style.height = '700px');
| |
− | void(canvae.style.border = '1px solid #ddd');
| |
− |
| |
− |
| |
− | //Changes shall apply under void()
| |
− | // Upper black toolbar stays there id = 'top_menu_14' -> Could be display:block
| |
− | // Main div wrapper contains code and all other stuff id = 'content' -> Change id to 'content2'
| |
− | // Reason: iGEM puts everything in document.getElementById('content') - change id - cause element 404
| |
− | void(document.getElementById('content').id = 'content0')
| |
− |
| |
− | // Div (placeholder) containing the iGEM logo and some text id = 'top_title' -> Apply display: none
| |
− | void(document.getElementById('top_title').style.display = 'none');
| |
− |
| |
− | // Small icon in the top black toolbar id = 'bars_item' -> Apply display: none
| |
− | void(document.getElementById('bars_item').style.display = 'none');
| |
− | // Same application for it's side effect (display an ugly div by default)
| |
− |
| |
− | void(document.getElementById('user_item').style.display = 'none');
| |
− | void(document.getElementById('sideMenu').style.display = 'none');
| |
− | var element = document.getElementById('home_logo');
| |
− | element.outerHTML = '';
| |
− | delete element;
| |
− | </script>
| |
− |
| |
− | </body>
| |
| </html> | | </html> |