vvvw/index.html

<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>VVVW</title>
<link rel="stylesheet" href="static/css/style.css">
<link href="static/styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/p5/p5.min.js"></script>
<script src="static/js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="static/js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="static/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="static/js/jquery-1.12.4.js"></script>
<script src="static/js/jquery-ui.js"></script>
<script src="static/js/d3.v3.min.js"></script>
<script src="static/js/jquery.ui.touch-punch.min.js"></script>
<script src="static/js/draggable.js"></script>
</head>
<body>
<div class="container-fluid p-0">
<div class="bg">
<div class="row">
  <!-- background audio -->
  <div class="col-md-9" style="position: static;">
    <div class="row">
      <div class="col-md-12">
        <div class="play-stop">
          <div id="tracktime">0:0 / 22:39</div>
          <a id="mBtn" onclick="PSFunction()">(Play)</a>
          <button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
          <button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
        </div>
     <div class="main_audio">
       <audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
       <source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
           Your browser does not support the audio tag.
         </audio>
    </div>
     </div>

  </div>
</div>
<div class="col-md-3">
  <div class="row">
    <div class="col-md-12">
  <span id="about">
   <a href="#" >about</a> |
 </span>
  <span id="colophon">
   <a href="#" >colophon</a> |
 </span>
 <span id="how">
  <a href="#" >how to use</a>
</span>
 <!-- <h1 id="about">Wells of Knowledge</h1> -->
</div>
</div>

</div>

</div>
    <!-- new row should start here -->
    <!-- pop up thesis -->
    <!-- <div class="scaleable-wrapper draggable" id="scaleable-wrapper"> -->

    <!-- </div> -->
    <!-- map area -->
  <div class="row">
    <div class="col-md-10 offset-md-1">
    <div class="map_area">
      <!-- <p>Related media</p> -->
      <!-- <div class="draggable" id="showdadaloglu"><div class='text_audio'>Bio</div> -->
        <!-- <audio id="audiodadaloglu" controls>
          <source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
          Your browser does not support the audio tag.
        </audio> -->
        <!-- <img src="static/images/poem.png">
      </div> -->
      <!-- <img src="static/images/test_small.jpeg" alt="poem"> -->

      <!-- popups about and colophon -->
      <div id="showabout" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>Wells of Knowledge
This web platform is a publishing moment/fragment of the work "Volitional Volutions of the Volatile Waters" by Merve Kilicer.
From Merves website:
This project comes together as a result of a research focusing on cultural heritage and transfer of knowledge through artistic production. Inspired by Gezi Park Occupation (2013) in Istanbul Taksim Square, the artist, follows her own memories and questions the infuence of past productions on young generations and possible effects of them on politic movements.

From Angeliki's and Alice's concept:
An essential question from the beginning of this project was how oral knowledge can be 'recorded','documented','transferred' through a digital online space besides a printed format. The main navigation point that the platform is based on is the map of connections. This is inspired by the notion of the common history and references that people in Gezi Park shared, being present together in the square with all their different voices and having slogans and poems as memories. "Could the accumulation of these voices and words be the forming substances of Gezi Spirit?" Through the map, we give the names a position within a context, and also link poets and authors to their inspiration and their subsequent work, by connecting together names, showing their bio and highlighting parts of the thesis of Merve. The platform acts as an active archival space that gives the possibility to revisit the elements in a non-linear historical approach in relation to the written text and audio. </div>
      </div><br>
      <div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>colophon texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
      </div>

      <div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>How to use
The map shows the connections between various representatives in Turkish culture, traditional or contemporary. The map elements can be rearranged, moved and even isolated by double clicking, to be desplayed only alongside their closest connections. Each name is presented alongside a song, a poem, an image, or a fragment of text or audio.

 The different groups highlighted in the map (Folklore literature, Islamic Mysticism, etc) are represented by different colors. When clickling on one of the names, the platform or the media connected to that name - it will either scroll to a highlighted part of the thesis of the artist, display a video file, move the audio file to a specific point, or several actions at once.

Technical details: We have built the visualization from scratch using a javascript library called D3 Force Graph. The website is created with Bootstrap and D3js. </div>
      </div>

      <script src="static/js/d3_map.js"></script>
    </div>

        <div w3-include-html="thesis.html" class="draggable thesis" id="thesis">
        </div>
        <!-- <span onclick="this.parentElement.style.display='none'" id="thesisX" class='topleft'>&times</span> -->

  </div>


</div>
<div class="row">
<div class="col-md-6">
  <div class="map_legend">
  <div id="box1" onclick="popup_bg(120)"></div> <p>Folklore literature</p>
  <div id="box2" onclick="popup_bg(300)"></div> <p>Islamic Mysticism</p>
  <div id="box3" onclick="popup_bg(500)"></div> <p>Contemporary poets</p>
  <div id="box4" onclick="popup_bg(700)"></div> <p>Contemporary musicians</p>
</div>
</div>
</div>
</div>

<!-- scripts for mouse events -->
<script>
  var audio = document.getElementById("audioBG");
  var btn = document.getElementById("mBtn");

  function PSFunction() {
    if (audio.paused) {
      audio.play();
      btn.innerHTML = "(Pause)";
    } else {
      audio.pause();
      btn.innerHTML = "(Play)";
    }
  }
</script>

<script>
function popup_bg(time) {
  var box = document.getElementById("audioBG");
//   if (box.currentTime>0) {
//   box.currentTime = 0;
// } else {
  box.currentTime = time;
  box.play();
  btn.innerHTML = "(Pause)";

};
</script>

 <script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /* Loop through a collection of all HTML elements: */
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /* Make an HTTP request using the attribute value as the file name: */
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /* Remove the attribute, and call this function once more: */
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /* Exit the function: */
      return;
    }
  }
}

includeHTML();
</script>

<script>
$("#about").click(function(){
    $("#showabout").fadeIn()
    console.log("around")
 });

 $("#colophon").click(function(){
     $("#showcolophon").fadeIn()
     console.log("around")
  });
  $("#how").click(function(){
      $("#showhow").fadeIn()
      console.log("around")
   });


</script>


<!-- scaleable wrapper -->
<!-- <script>
var $el = $("#thesis");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();

var $wrapper = $("#scaleable-wrapper");

$wrapper.resizable({
resize: doResize
});

function doResize(event, ui) {

var scale, origin;

scale = Math.min(
  ui.size.width / elWidth,
  ui.size.height / elHeight
);

$el.css({
  transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
});

}

var starterData = {
size: {
  width: $wrapper.width(),
  height: $wrapper.height()
}
}
doResize(null, starterData);
</script> -->


</div>
</body>
</html>
added newindex 4 years ago			`<html>`
			`<head>`
fixed partially errors with CORS 4 years ago			`<meta content="text/html;charset=utf-8" http-equiv="Content-Type">`
			`<meta content="utf-8" http-equiv="encoding">`
flexible and draggable objects. Complete example of diagram in full page 4 years ago			`<meta http-equiv="Access-Control-Allow-Origin" content="*">`
added newindex 4 years ago			`<title>VVVW</title>`
fixed partially errors with CORS 4 years ago			`<link rel="stylesheet" href="static/css/style.css">`
styles and failed draggable and scalaeable 4 years ago			`<link href="static/styles/jquery-ui.css" rel="stylesheet" type="text/css">`
fixed partially errors with CORS 4 years ago			`<link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">`
			`<script src="static/js/jquery.min.js"></script>`
			`<script type="text/javascript" src="static/js/p5/p5.min.js"></script>`
everything in one html works now 4 years ago			`<script src="static/js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>`
			`<script src="static/js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>`
			`<script src="static/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>`
fixed partially errors with CORS 4 years ago			`<script src="static/js/jquery-1.12.4.js"></script>`
			`<script src="static/js/jquery-ui.js"></script>`
flexible and draggable objects. Complete example of diagram in full page 4 years ago			`<script src="static/js/d3.v3.min.js"></script>`
styles and failed draggable and scalaeable 4 years ago			`<script src="static/js/jquery.ui.touch-punch.min.js"></script>`
flexible and draggable objects. Complete example of diagram in full page 4 years ago			`<script src="static/js/draggable.js"></script>`
added newindex 4 years ago			`</head>`
			`<body>`
fixed partially errors with CORS 4 years ago			`<div class="container-fluid p-0">`
			`<div class="bg">`
			`<div class="row">`
flexible and draggable objects. Complete example of diagram in full page 4 years ago			`<!-- background audio -->`
			`<div class="col-md-9" style="position: static;">`
fixed partially errors with CORS 4 years ago			`<div class="row">`
			`<div class="col-md-12">`
flexible and draggable objects. Complete example of diagram in full page 4 years ago			`<div class="play-stop">`
			`<div id="tracktime">0:0 / 22:39</div>`
			`<a id="mBtn" onclick="PSFunction()">(Play)</a>`
			`<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>`
			`<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>`
			`</div>`
			`<div class="main_audio">`
			`<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)60);">`
			`<source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">`
			`Your browser does not support the audio tag.`
			`</audio>`
added newindex 4 years ago			`</div>`
flexible and draggable objects. Complete example of diagram in full page 4 years ago			`</div>`
fixed position of elements 4 years ago
arranged elements and made iframes small 4 years ago			`</div>`
fixed position of elements 4 years ago			`</div>`
			`<div class="col-md-3">`
edited position of legend, added bios 4 years ago			`<div class="row">`
			`<div class="col-md-12">`
styles and failed draggable and scalaeable 4 years ago			`<span id="about">`
			`<a href="#" >about</a> \|`
			`</span>`
			`<span id="colophon">`
deleted old folders 4 years ago			`<a href="#" >colophon</a> \|`
styles and failed draggable and scalaeable 4 years ago			`</span>`
deleted old folders 4 years ago			`<span id="how">`
			`<a href="#" >how to use</a>`
			`</span>`
			`<!-- <h1 id="about">Wells of Knowledge</h1> -->`
fixed position of elements 4 years ago			`</div>`
edited position of legend, added bios 4 years ago			`</div>`

			`</div>`

arranged elements and made iframes small 4 years ago			`</div>`
			`<!-- new row should start here -->`
styles and failed draggable and scalaeable 4 years ago			`<!-- pop up thesis -->`
			`<!-- <div class="scaleable-wrapper draggable" id="scaleable-wrapper"> -->`
edited position of legend, added bios 4 years ago
styles and failed draggable and scalaeable 4 years ago			`<!-- </div> -->`
flexible and draggable objects. Complete example of diagram in full page 4 years ago			`<!-- map area -->`
arranged elements and made iframes small 4 years ago			`<div class="row">`
map size 4 years ago			`<div class="col-md-10 offset-md-1">`
flexible and draggable objects. Complete example of diagram in full page 4 years ago			`<div class="map_area">`
			`<!-- <p>Related media</p> -->`
separated bio from video, fixed x close popup and video stops when clicking x 4 years ago			`<!-- <div class="draggable" id="showdadaloglu"><div class='text_audio'>Bio</div> -->`
flexible and draggable objects. Complete example of diagram in full page 4 years ago			`<!-- <audio id="audiodadaloglu" controls>`
			`<source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">`
			`Your browser does not support the audio tag.`
			`</audio> -->`
separated bio from video, fixed x close popup and video stops when clicking x 4 years ago			`<!-- <img src="static/images/poem.png">`
			`</div> -->`
flexible and draggable objects. Complete example of diagram in full page 4 years ago			`<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->`
automated video and bio popup depending on properties in the json file 4 years ago
styled popups and took out audio bg function for nodes 4 years ago			`<!-- popups about and colophon -->`
deleted old folders 4 years ago			`<div id="showabout" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>Wells of Knowledge`
			`This web platform is a publishing moment/fragment of the work "Volitional Volutions of the Volatile Waters" by Merve Kilicer.`
			`From Merves website:`
			`This project comes together as a result of a research focusing on cultural heritage and transfer of knowledge through artistic production. Inspired by Gezi Park Occupation (2013) in Istanbul Taksim Square, the artist, follows her own memories and questions the infuence of past productions on young generations and possible effects of them on politic movements.`

			`From Angeliki's and Alice's concept:`
			An essential question from the beginning of this project was how oral knowledge can be 'recorded','documented','transferred' through a digital online space besides a printed format. The main navigation point that the platform is based on is the map of connections. This is inspired by the notion of the common history and references that people in Gezi Park shared, being present together in the square with all their different voices and having slogans and poems as memories. "Could the accumulation of these voices and words be the forming substances of Gezi Spirit?" Through the map, we give the names a position within a context, and also link poets and authors to their inspiration and their subsequent work, by connecting together names, showing their bio and highlighting parts of the thesis of Merve. The platform acts as an active archival space that gives the possibility to revisit the elements in a non-linear historical approach in relation to the written text and audio. </div>
styled popups and took out audio bg function for nodes 4 years ago			`</div><br>`
			`<div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>colophon texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>`
			`</div>`
deleted old folders 4 years ago
			`<div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>How to use`
			`The map shows the connections between various representatives in Turkish culture, traditional or contemporary. The map elements can be rearranged, moved and even isolated by double clicking, to be desplayed only alongside their closest connections. Each name is presented alongside a song, a poem, an image, or a fragment of text or audio.`

			`The different groups highlighted in the map (Folklore literature, Islamic Mysticism, etc) are represented by different colors. When clickling on one of the names, the platform or the media connected to that name - it will either scroll to a highlighted part of the thesis of the artist, display a video file, move the audio file to a specific point, or several actions at once.`

			`Technical details: We have built the visualization from scratch using a javascript library called D3 Force Graph. The website is created with Bootstrap and D3js. </div>`
			`</div>`

flexible and draggable objects. Complete example of diagram in full page 4 years ago			`<script src="static/js/d3_map.js"></script>`
added newindex 4 years ago			`</div>`
flexible and draggable objects. Complete example of diagram in full page 4 years ago
edited position of legend, added bios 4 years ago			`<div w3-include-html="thesis.html" class="draggable thesis" id="thesis">`
			`</div>`
			`<!-- <span onclick="this.parentElement.style.display='none'" id="thesisX" class='topleft'>&times</span> -->`

flexible and draggable objects. Complete example of diagram in full page 4 years ago			`</div>`
didnt fix draggable, bg audio and others, some work partly 4 years ago
fixed partially errors with CORS 4 years ago
didnt fix draggable, bg audio and others, some work partly 4 years ago
fixed partially errors with CORS 4 years ago			`</div>`
edited position of legend, added bios 4 years ago			`<div class="row">`
			`<div class="col-md-6">`
			`<div class="map_legend">`
			`<div id="box1" onclick="popup_bg(120)"></div> <p>Folklore literature</p>`
			`<div id="box2" onclick="popup_bg(300)"></div> <p>Islamic Mysticism</p>`
			`<div id="box3" onclick="popup_bg(500)"></div> <p>Contemporary poets</p>`
			`<div id="box4" onclick="popup_bg(700)"></div> <p>Contemporary musicians</p>`
			`</div>`
			`</div>`
			`</div>`
			`</div>`
fixed position of elements 4 years ago
fixed partially errors with CORS 4 years ago			`<!-- scripts for mouse events -->`
			`<script>`
			`var audio = document.getElementById("audioBG");`
			`var btn = document.getElementById("mBtn");`

			`function PSFunction() {`
			`if (audio.paused) {`
			`audio.play();`
			`btn.innerHTML = "(Pause)";`
			`} else {`
			`audio.pause();`
			`btn.innerHTML = "(Play)";`
			`}`
			`}`
			`</script>`

played with current time 4 years ago			`<script>`
			`function popup_bg(time) {`
			`var box = document.getElementById("audioBG");`
didnt fix draggable, bg audio and others, some work partly 4 years ago			`// if (box.currentTime>0) {`
			`// box.currentTime = 0;`
			`// } else {`
played with current time 4 years ago			`box.currentTime = time;`
			`box.play();`
			`btn.innerHTML = "(Pause)";`

			`};`
			`</script>`

fixed partially errors with CORS 4 years ago			`<script>`
			`function includeHTML() {`
			`var z, i, elmnt, file, xhttp;`
			`/* Loop through a collection of all HTML elements: */`
			`z = document.getElementsByTagName("*");`
			`for (i = 0; i < z.length; i++) {`
			`elmnt = z[i];`
			`/search for elements with a certain atrribute:/`
			`file = elmnt.getAttribute("w3-include-html");`
			`if (file) {`
			`/* Make an HTTP request using the attribute value as the file name: */`
			`xhttp = new XMLHttpRequest();`
			`xhttp.onreadystatechange = function() {`
			`if (this.readyState == 4) {`
			`if (this.status == 200) {elmnt.innerHTML = this.responseText;}`
			`if (this.status == 404) {elmnt.innerHTML = "Page not found.";}`
			`/* Remove the attribute, and call this function once more: */`
			`elmnt.removeAttribute("w3-include-html");`
			`includeHTML();`
			`}`
added newindex 4 years ago			`}`
fixed partially errors with CORS 4 years ago			`xhttp.open("GET", file, true);`
			`xhttp.send();`
			`/* Exit the function: */`
			`return;`
added newindex 4 years ago			`}`
fixed partially errors with CORS 4 years ago			`}`
			`}`
everything in one html works now 4 years ago
			`includeHTML();`
			`</script>`
added about and colophon 4 years ago
			`<script>`
			`$("#about").click(function(){`
			`$("#showabout").fadeIn()`
			`console.log("around")`
			`});`
added about and colophon 4 years ago
			`$("#colophon").click(function(){`
			`$("#showcolophon").fadeIn()`
			`console.log("around")`
			`});`
deleted old folders 4 years ago			`$("#how").click(function(){`
			`$("#showhow").fadeIn()`
			`console.log("around")`
			`});`
didnt fix draggable, bg audio and others, some work partly 4 years ago


added about and colophon 4 years ago			`</script>`
styles and failed draggable and scalaeable 4 years ago
edited position of legend, added bios 4 years ago
styles and failed draggable and scalaeable 4 years ago			`<!-- scaleable wrapper -->`
			`<!-- <script>`
			`var $el = $("#thesis");`
			`var elHeight = $el.outerHeight();`
			`var elWidth = $el.outerWidth();`

			`var $wrapper = $("#scaleable-wrapper");`

			`$wrapper.resizable({`
			`resize: doResize`
			`});`

			`function doResize(event, ui) {`

			`var scale, origin;`

			`scale = Math.min(`
			`ui.size.width / elWidth,`
			`ui.size.height / elHeight`
			`);`

			`$el.css({`
			`transform: "translate(-50%, -50%) " + "scale(" + scale + ")"`
			`});`

			`}`

			`var starterData = {`
			`size: {`
			`width: $wrapper.width(),`
			`height: $wrapper.height()`
			`}`
			`}`
			`doResize(null, starterData);`
			`</script> -->`


fixed partially errors with CORS 4 years ago			`</div>`
added newindex 4 years ago			`</body>`
everything in one html works now 4 years ago			`</html>`