ccl
/
riparian-zone
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

first iteration of the interface

master
ccl 4 years ago
parent
7746dd841c
commit
4fc5c6d3c2
2 changed files with 1113 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 359
      Temporary Riparian Zone.html
  2. 754
      temporary riparian zone | Variapad!.html

359
Temporary Riparian Zone.html
View File

@ -0,0 +1,359 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Temporary Riparian Zone</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Temporary%20Riparian%20Zone_files/style.css">
<script src="Temporary%20Riparian%20Zone_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//ABOUT TEXT + INSERT TEXT
var introflag = true;
$("#about").click(function(){
if (introflag === true) {
$("#insert").css("display","block");
$("#about").css("color","#d1ffd0");
introflag = false;
} else {
$("#insert").css("display","none");
$("#about").css("color","black");
introflag = true;
}
});
$("#closeinsert").click(function(){
$("#insert").css("display","none");
$("#about").css("color","black");
introflag = true;
});
});
</script>
<script>
function rabbit() {
var x = document.getElementById("magic");
var y = document.getElementById("rabbit");
if (x.style.display === "none" || x.style.display === "") {
x.style.display = "block";
y.style.color = "#d1ffd0";
} else {
x.style.display = "none";
y.style.color = "black";
}
}
</script>
</head>
<body>
<div id="insert">
<div id="closeinsert">x</div>
<div class="insert">
<h1>Temporary Riparian Zone</h1>
<p>This is an interface by <a target="_blank" href="https://w-i-t-m.net/">Angeliki Diakrousi</a> and <a target="_blank" href="https://randomiser.info/">Cristina Cochior</a>
for exploring ways of "streaming" to each other by listening, waiting
and responding, both through text (via the collaborative editor
Etherpad), or through audio (via the streaming audio/video server
Icecast).</p>
<p>A stream is a body of water with surface water flowing within
the bed and banks of a channel. From this visual we imagined the
different ways of moving information the way a pad and icecast server
might. We used the pad you see in the top half of the screen to write
content together which we then transmitted live over a series of
broadcast channels in the live composition interface you see on the
bottom half of the screen.</p>
<p>The interface was first made for a workshop held on the 23rd of July 2020 as part of the <a target="_blank" href="https://www.hackersanddesigners.nl/s/Summer_Academy_2020">2020 Hackers and Designers summer school</a>.
The workshop happened remotely, while Angeliki was in Kefalonia,
Cristina in Rotterdam and the rest of the participants were in different
locations and timezones. You can still see, read and hear the traces
from this workshop on this site.</p>
<p>We started by listening to a pre-recorded audio file next to the word ENTER at the top of the bottom half of the page.</p>
<p>In the last 20 minutes of the workshop we performed and
listened to each other. You can listen back to some of the recordings
through this interface, they are highlighted in green.</p>
<p>You can also find the instructions we used <a target="_blank" href="http://82.199.133.204/files/trz/temporary_riparian_zone_script.html">here</a>.</p>
</div>
</div>
<div class="top">
<iframe id="tours" src="Temporary%20Riparian%20Zone_files/temporary%20riparian%20zone%20_%20Variapad.html" style="display: block; width: 100%; height: 100%;" frameborder="0"></iframe>
<!-- https://pad.vvvvvvaria.org/temporary_riparian_zone -->
</div>
<div class="down">
<div class="bg">
<img class="map" id="magic" src="Temporary%20Riparian%20Zone_files/World_map_of_submarine_cables.png">
<img class="pngimg" src="Temporary%20Riparian%20Zone_files/rivers.png">
</div>
<span class="enter">
ENTER
</span>
<span id="about">
ABOUT
</span>
<audio controls="controls">
<source src="Temporary%20Riparian%20Zone_files/enter_trz.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<span onclick="rabbit()" class="rabbit" id="rabbit">A WARPED STREAM</span>
<span class="stream hydrophilic_plants">
<audio id="hydrophilic_plants" preload="none" src="Temporary%20Riparian%20Zone_files/hydrophilic_plants.html"> </audio>
<div>
<h4>hydrophilic_plants</h4>
<div>
<button class="stream-button" onclick="document.getElementById('hydrophilic_plants').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('hydrophilic_plants').pause();document.getElementById('hydrophilic_plants').src=document.getElementById('hydrophilic_plants').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('hydrophilic_plants').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('hydrophilic_plants').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream foreshoreway_networks">
<audio id="foreshoreway_networks" preload="none" src="Temporary%20Riparian%20Zone_files/foreshoreway_networks.html"> </audio>
<div>
<h4>foreshoreway_networks</h4>
<div>
<button class="stream-button" onclick="document.getElementById('foreshoreway_networks').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('foreshoreway_networks').pause();document.getElementById('foreshoreway_networks').src=document.getElementById('foreshoreway_networks').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('foreshoreway_networks').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('foreshoreway_networks').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream logging_operation">
<audio id="logging_operation" preload="none" src="Temporary%20Riparian%20Zone_files/logging_operation.html"> </audio>
<div>
<h4>logging_operation</h4>
<div>
<button class="stream-button" onclick="document.getElementById('logging_operation').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('logging_operation').pause();document.getElementById('logging_operation').src=document.getElementById('logging_operation').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('logging_operation').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('logging_operation').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream wake_pattern">
<audio id="wake_pattern" preload="none" src="Temporary%20Riparian%20Zone_files/wake_pattern.html"> </audio>
<div>
<h4>wake_pattern</h4>
<div>
<button class="stream-button" onclick="document.getElementById('wake_pattern').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('wake_pattern').pause();document.getElementById('wake_pattern').src=document.getElementById('wake_pattern').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('wake_pattern').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('wake_pattern').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream river_bank">
<audio id="river_bank" preload="none" src="Temporary%20Riparian%20Zone_files/trz-ariana.mp3"> </audio>
<div>
<h4>river_bank</h4>
<div>
<button class="stream-button" onclick="document.getElementById('river_bank').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('river_bank').pause();document.getElementById('river_bank').src=document.getElementById('river_bank').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('river_bank').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('river_bank').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream soil">
<audio id="soil" preload="none" src="Temporary%20Riparian%20Zone_files/trz-juliette.mp3"> </audio>
<div>
<h4>soil</h4>
<div>
<div>
<button class="stream-button" onclick="document.getElementById('soil').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('soil').pause();document.getElementById('soil').src=document.getElementById('soil').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('soil').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('soil').volume -= 0.1"><b>-</b></button>
</div>
</div>
</div>
</span>
<span class="stream wetland">
<audio id="wetland" preload="none" src="Temporary%20Riparian%20Zone_files/wetland.html"> </audio>
<div>
<h4>wetland</h4>
<div>
<div>
<button class="stream-button" onclick="document.getElementById('wetland').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('wetland').pause();document.getElementById('wetland').src=document.getElementById('wetland').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('wetland').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('wetland').volume -= 0.1"><b>-</b></button>
</div>
</div>
</div>
</span>
<span class="stream meander">
<audio id="meander" preload="none" src="Temporary%20Riparian%20Zone_files/trz_recording_maxi_backgroundambient_by_alexandermartinez.mp3"> </audio>
<div>
<h4>meander</h4>
<div>
<button class="stream-button" onclick="document.getElementById('meander').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('meander').pause();document.getElementById('meander').src=document.getElementById('meander').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('meander').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('meander').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream wildlife_corridors">
<audio id="wildlife_corridors" preload="none" src="Temporary%20Riparian%20Zone_files/wildlife_corridors.html"> </audio>
<div>
<h4>wildlife_corridors</h4>
<div>
<button class="stream-button" onclick="document.getElementById('wildlife_corridors').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('wildlife_corridors').pause();document.getElementById('wildlife_corridors').src=document.getElementById('wildlife_corridors').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('wildlife_corridors').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('wildlife_corridors').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream plant_litter">
<audio id="plant_litter" preload="none" src="Temporary%20Riparian%20Zone_files/p-trz_loes.mp3"> </audio>
<div>
<h4>plant_litter</h4>
<div>
<button class="stream-button" onclick="document.getElementById('plant_litter').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('plant_litter').pause();document.getElementById('plant_litter').src=document.getElementById('plant_litter').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('plant_litter').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('plant_litter').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream stream_buffer">
<audio id="stream_buffer" preload="none" src="Temporary%20Riparian%20Zone_files/p-trz-ben.mp3"> </audio>
<div>
<h4>stream_buffer</h4>
<div>
<button class="stream-button" onclick="document.getElementById('stream_buffer').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('stream_buffer').pause();document.getElementById('stream_buffer').src=document.getElementById('stream_buffer').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('stream_buffer').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('stream_buffer').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream root">
<audio id="root" preload="none" src="Temporary%20Riparian%20Zone_files/root.html"> </audio>
<div>
<h4>root</h4>
<div>
<button class="stream-button" onclick="document.getElementById('root').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('root').pause();document.getElementById('root').src=document.getElementById('root').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('root').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('root').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream flood_zone">
<audio id="flood_zone" preload="none" src="Temporary%20Riparian%20Zone_files/trz-angeliki.mp3"> </audio>
<div>
<h4>flood_zone</h4>
<div>
<button class="stream-button" onclick="document.getElementById('flood_zone').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('flood_zone').pause();document.getElementById('flood_zone').src=document.getElementById('flood_zone').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('flood_zone').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('flood_zone').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream streambed">
<audio id="streambed" preload="none" src="Temporary%20Riparian%20Zone_files/streambed.html"> </audio>
<div>
<h4>streambed</h4>
<div>
<button class="stream-button" onclick="document.getElementById('streambed').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('streambed').pause();document.getElementById('streambed').src=document.getElementById('streambed').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('streambed').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('streambed').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream watercourse">
<audio id="watercourse" preload="none" src="Temporary%20Riparian%20Zone_files/watercourse.html"> </audio>
<div>
<h4>watercourse</h4>
<div>
<button class="stream-button" onclick="document.getElementById('watercourse').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('streambed').pause();document.getElementById('watercourse').src=document.getElementById('watercourse').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('watercourse').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('watercourse').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream rock">
<audio id="rock" preload="none" src="Temporary%20Riparian%20Zone_files/rock.html"> </audio>
<div>
<h4>rock</h4>
<div>
<button class="stream-button" onclick="document.getElementById('rock').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('rock').pause();document.getElementById('rock').src=document.getElementById('rock').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('rock').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('rock').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream weeds">
<audio id="weeds" preload="none" src="Temporary%20Riparian%20Zone_files/weeds.html"> </audio>
<div>
<h4>weeds</h4>
<div>
<button class="stream-button" onclick="document.getElementById('weeds').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('weeds').pause();document.getElementById('weeds').src=document.getElementById('weeds').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('weeds').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('weeds').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream aquatic_animals">
<audio id="aquatic_animals" preload="none" src="Temporary%20Riparian%20Zone_files/aquatic_animals.html"> </audio>
<div>
<h4>aquatic_animals</h4>
<div>
<button class="stream-button" onclick="document.getElementById('aquatic_animals').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('aquatic_animals').pause();document.getElementById('aquatic_animals').src=document.getElementById('aquatic_animals').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('aquatic_animals').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('aquatic_animals').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
<span class="stream biofilters">
<audio id="biofilters" preload="none" src="Temporary%20Riparian%20Zone_files/trz_karl_auatic_animals_.m4a"> </audio>
<div>
<h4>biofilters</h4>
<div>
<button class="stream-button" onclick="document.getElementById('biofilters').play()">▶</button>
<button class="stream-button" onclick="document.getElementById('biofilters').pause();document.getElementById('biofilters').src=document.getElementById('biofilters').src;">❚❚</button>
<button class="stream-button" onclick="document.getElementById('biofilters').volume += 0.1"><b>+</b></button>
<button class="stream-button" onclick="document.getElementById('biofilters').volume -= 0.1"><b>-</b></button>
</div>
</div>
</span>
</div>
</body></html>

754
temporary riparian zone | Variapad!.html
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save