corrected draggable bug and added possibility of input name in podcasts and some other things

amplification.php

@@ -6,8 +6,8 @@
   <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
   <!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
   <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
-  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+  <script src="js/jquery-1.12.4.js"></script>
-<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="js/jquery-ui.js"></script>
 <script src="js/jquery.ui.touch-punch.min.js"></script>
 <script src="js/draggable.js"></script>
 <script src="js/main.js"></script>

diary.php

@@ -6,8 +6,8 @@
 <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
   <!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
 <script type="text/javascript" src="js/jquery.min.js"></script>
-<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="js/jquery-1.12.4.js"></script>
-<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="js/jquery-ui.js"></script>
 <script src="js/jquery.ui.touch-punch.min.js"></script>
 <script src="js/draggable.js"></script>
     <title>Diary of West Rotterdam</title>

index.php

@@ -8,8 +8,8 @@
   <!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
 <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="js/jquery.min.js"></script>
-<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="js/jquery-1.12.4.js"></script>
-<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="js/jquery-ui.js"></script>
 <script src="js/jquery.ui.touch-punch.min.js"></script>
 <script src="js/draggable.js"></script>
 <script src="js/main.js"></script>
@@ -50,6 +50,7 @@
 <div class="draggable scaleable-wrapper menu"style="top:3%;left:72%; width: 25%; font-size: 100%">
   <h2 style="font-size: 150%;"><a href="amplification.php" >Amplification of female voices</a></h2>
   <div class="drag-content">
+    (workshops)<br><br>
     <?php include 'texts/amplification.txt'; ?>
   </div>
 </div>
@@ -90,6 +91,7 @@
 <div class="draggable scaleable-wrapper menu"style="top:8%;left:35%">
   <h2 ><a href="player.php" >Player<div class="hover-icon-speaker"><img src="images/icon-speaker.png"></div></a></h2>
   <div class="drag-content">
+    (audio archive)<br><br>
     <?php include 'texts/player.txt'; ?>
   </div>
 </div>
@@ -115,6 +117,7 @@
 <div class="draggable scaleable-wrapper menu" style="top:64%;left:15%;" >
   <h2 ><a href="thesis-angeliki.php" >"Let's Talk About Unspeakable Things"</a></h2>
   <div class="drag-content">
+    (thesis)<br><br>
     <?php include 'texts/thesis-summary.txt'; ?>
   </div>
 </div>
@@ -122,6 +125,7 @@
 <div class="draggable scaleable-wrapper menu"style="top:85%;left:8%;width: 12%; font-size: 80%;">
   <h2 style=";"><a href="diary.php" >Diary of West Rotterdam</a></h2>
   <div class="drag-content">
+    (first experiments)<br><br>
     <?php include 'texts/diary.txt'; ?>
 </div></div>
 </div>

js/draggable.js

@@ -11,10 +11,10 @@ $(document).ready(function() {
           cursor: "grab",
           // axis: "y",
           distance: "0",
-          cursorAt: {
+          // cursorAt: {
-            top: 0,
+          //   top: 0,
-            left: 0
+          //   left: 0
-          } 
+          // } 
         };
     $('.draggable-circle').draggable(dragOpts,
     {

player.php

@@ -4,8 +4,8 @@
 <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
   <!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
 <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
-<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="js/jquery-1.12.4.js"></script>
-<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="js/jquery-ui.js"></script>
 <script src="js/draggable.js"></script>
 <script src="js/jquery.ui.touch-punch.min.js"></script>
 <title>Player</title>
@@ -279,7 +279,7 @@ $("#katalin").click(function(){
 
   <div class="draggable full-width" style="top: 160%; left:0.2%">
     <button id="but"><h3>listen</h3></button>
-    First sample of city sounds related to public/private and speech and recordings of descriptions from different people
+    First sample of city sounds, related to public/private and speech, and recordings of people describing them
     <div class="tooltip-wrap no-pink">
       <audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3" class="audio-tag"></audio><a href="" target="_blank">
         <div class="tooltip-content-up">
@@ -364,7 +364,7 @@ $("#katalin").click(function(){
 <!-- second sounwalk player -->
   <div class="draggable full-width" style="top: 190%; left:0.2%">
     <button id="butB"><h3>listen</h3></button>
-    Second sample of city sounds related to public/private and speech and recordings of descriptions from different people
+    Second sample of city sounds, related to public/private and speech, and recordings of people describing them
     <div class="tooltip-wrap no-pink">
       <audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="audio/selectionB.mp3" class="audio-tag"></audio><a href="" target="_blank">
         <div class="tooltip-content-up">
@@ -400,7 +400,7 @@ $("#katalin").click(function(){
     </div>
     </div></div>
 
-    <div class="tooltip-wrap no-pinksecon">
+    <div class="tooltip-wrap no-pink">
       <!-- have to add ontimeupdate="playTranscript3()"  -->
       <audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3" class="audio-tag"></audio><a href="" target="_blank">
         <div class="tooltip-content-up">
@@ -540,14 +540,31 @@ var dialogueTimings3 = [1,10,13,20,27,31,53,58,135],
     }
 ;
 
+
 // players in circle
+
+function degrees_to_radians(degrees)
+{
+  var pi = Math.PI;
+  return degrees * (pi/180);
+}
+
 document.querySelectorAll( '.ciclegraph' ).forEach( ( ciclegraph )=>{
   let circles = ciclegraph.querySelectorAll( '.circle' )
   let angle = 360-90, dangle = 360 / circles.length
   for( let i = 0; i < circles.length; ++i ){
     let circle = circles[i]
     angle += dangle
-    circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth / 2}px) rotate(-${angle}deg)`
+    let cx=ciclegraph.clientWidth / 2,
+        cy=300,
+        r=(ciclegraph.clientWidth / 2),
+        x=(Math.cos(degrees_to_radians(angle))*r)+cx,
+        y=(Math.sin(degrees_to_radians(angle))*r)+cy;
+
+    // circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth / 2}px) rotate(-${angle}deg)`
+    circle.style.left=x+'px'
+    circle.style.top=y+'px'
+
   }
 })
 

podcast1.php

@@ -86,6 +86,9 @@
 <tr>
 <td><img src="images/headphones_logo.png" width="40px"></td>
 <?php 
+// ini_set('display_errors',1);
+// ini_set('display_startup_errors',1);
+//     error_reporting(E_ALL);
 $files = glob("podcasts/podcast1/*.mp3"); 
 for ($i=0; $i<count($files); $i++) 
 {$num = $files[$i]; 
@@ -127,13 +130,23 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
     <br />
     <h3>VISITORS' RECORDINGS</h3><br />
     <?php 
-    $files = glob("uploads/1/*"); 
+    $items=array();
-    for ($i=0; $i<count($files); $i++) 
+    $handle=fopen('./uploads/1/index.jsons','r');
-    {$num = $files[$i]; 
+    if ($handle) {
-    $var1 = $_GET["files"]["name"];
+      while (($line=fgets($handle)) !== false) {
-    echo '<audio src='.$num.' controls></audio><br />';
+        $item=json_decode($line,true);
-    // echo '<div id="name"></div>';
+        $items[]=$item;
-    echo date("d/m/Y",filemtime($num)).'<br /><br />'; } 
+
+      }
+    }
+    $items=array_reverse($items);
+    foreach($items as $item) {
+      $url=substr($item['file'],3);
+      echo '<div class=file>';
+      echo '<audio src='.$url.' controls></audio><br />';
+      echo '<div class="filename">'.$item['name'].'</div>';
+      echo '</div>';
+    }
     ?>
 
 </div>
@@ -147,8 +160,8 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
 <script type="text/javascript" src="js/mp3recorder.js"></script>
 
 <script src="js/draggable.js"></script>
-<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="js/jquery-1.12.4.js"></script>
-<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="js/jquery-ui.js"></script>
 <script src="js/jquery.ui.touch-punch.min.js"></script>
 <script src="js/main.js"></script>
 <!-- scripts for recorder -->
@@ -212,6 +225,7 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
       au.controls = true;
       au.src = url;
       //$recorder.append(au);
+      // $('#playerContainer').append($('<input'));
       $('#playerContainer').append(au);
 
           
@@ -226,6 +240,7 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
 
  <script>
     function upload(){
+     var name = prompt('Enter a name for your sound clip?','My unnamed clip');
 
     var dataURL = document.getElementById("dataUrlcontainer").innerHTML;
 
@@ -233,7 +248,8 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
       type: "POST",
       url: "scripts/uploadMp3_1.php",
       data: { 
-          base64: dataURL
+          base64: dataURL, 
+          name: name
        }
     }).done(function(o) {
       console.log('saved'); 

podcast2.php

@@ -147,8 +147,8 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
 <script type="text/javascript" src="js/mp3recorder.js"></script>
 
 <script src="js/draggable.js"></script>
-<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="js/jquery-1.12.4.js"></script>
-<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="js/jquery-ui.js"></script>
 <script src="js/jquery.ui.touch-punch.min.js"></script>
 <script src="js/main.js"></script>
 <!-- scripts for recorder -->

podcast3.php

@@ -144,8 +144,8 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
 <script type="text/javascript" src="js/mp3recorder.js"></script>
 
 <script src="js/draggable.js"></script>
-<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="js/jquery-1.12.4.js"></script>
-<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="js/jquery-ui.js"></script>
 <script src="js/jquery.ui.touch-punch.min.js"></script>
 <script src="js/main.js"></script>
 <!-- scripts for recorder -->

podcast4.php

@@ -146,8 +146,8 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
 <script type="text/javascript" src="js/mp3recorder.js"></script>
 
 <script src="js/draggable.js"></script>
-<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="js/jquery-1.12.4.js"></script>
-<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="js/jquery-ui.js"></script>
 <script src="js/jquery.ui.touch-punch.min.js"></script>
 <script src="js/main.js"></script>
 <!-- scripts for recorder -->

scripts/uploadMp3_1.php

@@ -9,5 +9,11 @@ $img = str_replace(' ', '+', $img);
 $data = base64_decode($img);
 $file = UPLOAD_DIR . uniqid() . '.mp3';
 $success = file_put_contents($file, $data);
+
+# make a database of recordings
+$item=array('name'=>$_POST['name'],'date'=>filemtime($file), 'file'=>$file);
+$handle=fopen('../uploads/1/index.jsons','a');
+fwrite($handle,json_encode($item)."\n");
+fclose($handle);
 print $success ? $file : 'Unable to save the file.';
 ?> 

styles/widescreen.css

@@ -1,6 +1,7 @@
 /*@media only screen and (min-width: 900px) {*/
 body {
   background: #F6F5F5;
+  /*background: #fcf4f6;*/
   font-family: "Old Standard TT";
   font-size: 95%;
   line-height: 1.3;
@@ -689,7 +690,7 @@ li, #angela, #judith, #laurie, #dana, #katalin {
   position: relative;
   width: 50%;
   height: 30%;
-  top: 50%;
+  top: 200px;
   left: 30%
 }
 
@@ -707,6 +708,11 @@ li, #angela, #judith, #laurie, #dana, #katalin {
   width: 20%;
   /*height: 100px;*/
 
+
+}
+
+.ciclegraph .circle:hover {
+  z-index:1;
 }
 
 /*}*/

texts/about.txt

@@ -1,4 +1,4 @@
-'Let's Amplify Unspeakable Things' is an online platform of exploration and research, regarding female voices in public and their amplification, developed by Angeliki Diakrousi. It creates a space for excluded voices to be explored (online and physical spaces), that questions the establishment of authoritative voices — which construct exclusive speech platforms and binaries, along the assumption that voices have to be rational in public dialogues. It includes a set of <div class="tooltip-wrap">podcasts <div class="tooltip-content-right" ><div>Different frictions emerged, between the technical and non technical</div></div></div>that revisit and overlay an archive of audio recordings, produced in situated<div class="tooltip-wrap">workshops<div class="tooltip-content-right" ><div>Different frictions emerged, between academic and non-academic world</div></div></div> and soundwalks, and media sources from a body of research. 'Let's Amplify Unspeakable Things' is based on the concept that amplification can provide presence through repetition and multiplication, as the structure of the workshops and the website reveals. The project itself is a process of feedback and iteration of actions, throughout a period of four months, situated around the space of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> and <a href="https://hub.xpub.nl/">hub.xpub.nl</a>. It exists in between the friction of institutions (a public library and an academy) and different public spheres (wereldvrouwen, academic), and it aims to go beyond their binaries. 
+'Let's Amplify Unspeakable Things' is an online platform of exploration and research, regarding <div class="tooltip-wrap">female voices<div class="tooltip-content-right"><div>The term 'female voices' refers as well to the primitive and non-rational ways of expression, that the contemporary democracy tends to exclude, and overpasses the gender connotations</div></div></div> in public and their amplification, developed by Angeliki Diakrousi. It creates a space for excluded voices to be explored (online and physical spaces), that questions the establishment of authoritative voices — which construct exclusive speech platforms and binaries, along the assumption that voices have to be rational in public dialogues. It includes a set of <div class="tooltip-wrap">podcasts <div class="tooltip-content-right" ><div>Different frictions emerged, between the technical and non technical</div></div></div>that revisit and overlay an archive of audio recordings, produced in situated<div class="tooltip-wrap">workshops<div class="tooltip-content-right" ><div></div></div></div> and soundwalks, and media sources from a body of research. 'Let's Amplify Unspeakable Things' is based on the concept that amplification can provide presence through repetition and multiplication, as the structure of the workshops and the website reveals. The project itself is a process of feedback and iteration of actions, throughout a period of four months, situated around the space of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> and <a href="https://hub.xpub.nl/">hub.xpub.nl</a>. It exists in between the friction of institutions (a public library and an academy) and different public spheres (wereldvrouwen, academic), and it aims to go beyond their binaries. 
 
 
 

thesis-angeliki.php

@@ -6,8 +6,8 @@
 <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
   <!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
 <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
-<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="js/jquery-1.12.4.js"></script>
-<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="js/jquery-ui.js"></script>
 <script src="js/jquery.ui.touch-punch.min.js"></script>
 <script src="js/draggable.js"></script>
 <script src="js/main.js"></script>