Browse Source

legendary code

master
Anton Linus 4 years ago
parent
commit
b4ee73c604
  1. BIN
      graphics/charging-pad/.pad-animated-exploded-view.blend.icloud
  2. BIN
      graphics/charging-pad/.pad-animated.gif.icloud
  3. BIN
      graphics/charging-pad/.pad-exploded-view-ani.gif.icloud
  4. BIN
      graphics/charging-pad/pad-animated-exploded-view.blend
  5. BIN
      graphics/charging-pad/pad-animated.gif
  6. BIN
      graphics/charging-pad/pad-exploded-view-ani.gif
  7. BIN
      graphics/insta/.instagrid.psd.icloud
  8. BIN
      graphics/insta/instagrid.psd
  9. 350
      website/curl.php
  10. 1
      website/historicalData.json
  11. 1
      website/latestData.json
  12. BIN
      website/mail/.DS_Store
  13. 0
      website/map/SliderControl.js
  14. 1
      website/map/historicalData.json
  15. 404
      website/map/index.php
  16. 1
      website/map/latestData.json
  17. 149
      website/map/main.css
  18. BIN
      website/preshow/.DS_Store

BIN
graphics/charging-pad/.pad-animated-exploded-view.blend.icloud

Binary file not shown.

BIN
graphics/charging-pad/.pad-animated.gif.icloud

Binary file not shown.

BIN
graphics/charging-pad/.pad-exploded-view-ani.gif.icloud

Binary file not shown.

BIN
graphics/charging-pad/pad-animated-exploded-view.blend

Binary file not shown.

BIN
graphics/charging-pad/pad-animated.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

BIN
graphics/charging-pad/pad-exploded-view-ani.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 MiB

BIN
graphics/insta/.instagrid.psd.icloud

Binary file not shown.

BIN
graphics/insta/instagrid.psd

Binary file not shown.

350
website/curl.php

@ -1,350 +0,0 @@
<?php
// Notes
// The api key from Scooty's app/account: iPtAHWdOVLEtgkaymXoMHVVg
// Below is the static html to generate the map, it can also be done more dynamically using https://github.com/LuminFire/leaflet-php but that might be overkill
//debugging, enable all error reporting
// ini_set('display_errors', 1);
// ini_set('display_startup_errors', 1);
// error_reporting(E_ALL);
//measure script execution time
$start_time = microtime(true);
$a=1;
// array of scooters, artist, title, description
global $scooters;
$scooters = array(
array('https://opencoil.show/test-json.php?scooterID=1', 'artist name 0', 'title 0', 'desciption 0' ),
array('https://opencoil.show/test-json.php?scooterID=2', 'artist name 1', 'title 1', 'desciption 1' ),
array('https://opencoil.show/test-json.php?scooterID=3', 'artist name 2', 'title 2', 'desciption 2' ),
//array('https://platform.tier-services.io/v1/vehicle/fbd739d6-554f-4eaf-bd9c-afe3d501c94b', 'artist name 1', 'title', 'desciption'),
);
// for each scooter in array get the json (TODO, for each, safe to file/database?) $scooters is a multidimensional array: $scooter[0][0] = the first data (api url) of the first scooter, $scooter[1][0] = the first data (api url) of the second scooter, $scooter[0][1] = the artist name of the first scooter etcetc.
//$id = 0; //get the first scooter for now
function saveLatestJSON(){
global $scooters; //"import" the global variable into the function's scope
//TODO if latestData.json = older than ..2 minutes...call the API again
$id = 0; //start id
foreach($scooters as $item) {
$getJSON = callAPI($scooters[$id][0]); //abstract callAPI for neater reuse
// GET RID OF JSON DECODE!
$arr = json_decode($getJSON, true); // decode JSON data to PHP associative array
// access values from the associative array
$lat = $arr["data"]["attributes"]["lat"]; // get lattitude
$lng = $arr["data"]["attributes"]["lng"]; // get longitude
$pos = $lat.', '.$lng; // construct lat/lon for use in leafet
$lst = $arr["data"]["attributes"]["lastLocationUpdate"]; // get time of last position
$rnt = $arr["data"]["attributes"]["isRentable"]; // check if scooter is rentable,
$act = $arr["data"]["attributes"]["state"]; // check if scooter is ACTIVE or MAINTAINANCE
// access values from the multidimensional $scooters array
$nam = $scooters[$id][1]; // get the artist name
$tit = $scooters[$id][2]; // get the works title
$des = $scooters[$id][3]; // get the works description
//construct json with latest data
$latestData[] = array( "ID" => $id,
"lastPos" => $pos,
"lastLocationUpdate" => $lst,
"isRentable" => $rnt,
"state" => $act,
"name" => $nam,
"title" => $tit,
"desc" => $des);
$id++;
}
return $latestData; //return array
}
// THIS ONLY NEEDS TO RUN EVERY 1 or 2 minutes, possibly in the background, als this should construct historical json as per tom martins post here: https://stackoverflow.com/questions/7895335/append-data-to-a-json-file-with-php/7895384
//TODO make historical json file..
//see: https://stackoverflow.com/questions/7895335/append-data-to-a-json-file-with-php/7895384
//add something like:
// $inp = file_get_contents('./latestData.json');
// $tempArray = json_decode($inp);
// $tempArray[] .= $latestData;
// $jsonData = json_encode($tempArray);
// file_put_contents('./latestData.json', $jsonData);
function makeMarker(int $id){ // generate appropriate markers based on latest JSON
$readJSON = file_get_contents('./latestData.json'); //read latest data
$arr = json_decode($readJSON, true);
$pos = $arr[$id]["lastPos"]; // get last known position
$lst = $arr[$id]["lastLocationUpdate"]; // get time of last position
$rnt = $arr[$id]["isRentable"]; // check if scooter is rentable,
$act = $arr[$id]["state"]; // check if scooter is ACTIVE or MAINTAINANCE
// access values from the multidimensional $scooters array
$nam = $arr[$id]["name"]; // get the artist name
$tit = $arr[$id]["title"]; // get the works title
$des = $arr[$id]["desc"]; // get the works description
//check scooter status and construct marker with corresponding icon
//check if scooter is rentable
if($rnt == true && $act === 'ACTIVE'){
$marker = 'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
.bindPopup("<b>'.$tit.'</b><br>'.$des.'<br>Last updated: '.$lst.'<br>Status: Rentable, Gallery Offline")
.bindTooltip("'.$nam.'").setIcon(availableIcon);';
} elseif ($rnt == false && $act === 'ACTIVE') {
$marker = 'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
.bindPopup("<b>'.$tit.'</b><br>'.$des.'<br>Last updated: '.$lst.'<br>Status: Rented Out, Gallery Online")
.bindTooltip("'.$nam.'").setIcon(isRentedIcon);';
};
//check if scooter is in maintenace
if($act !== "ACTIVE"){
$marker = 'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
.bindPopup("<b>'.$tit.'</b><br>'.$des.'<br>Last updated: '.$lst.'")
.bindTooltip("'.$nam.'").setIcon(isMaintenanceIcon);';
};
return $marker;
}
function appendJSON($filename, $data){ // create historical json data for documentation over time
// read the file if present
$handle = @fopen($filename, 'r+');
// create the file if needed
if ($handle === null)
{
$handle = fopen($filename, 'w+');
}
if ($handle)
{
// seek to the end
fseek($handle, 0, SEEK_END);
// are we at the end of is the file empty
if (ftell($handle) > 0)
{
// move back a byte
fseek($handle, -1, SEEK_END);
// add the trailing comma
fwrite($handle, ',', 1);
// add the new json string
fwrite($handle, json_encode($data) . ']');
}
else
{
// write the first event inside an array
fwrite($handle, json_encode(array($data)));
}
// close the handle on the file
fclose($handle);
}
}
//// make date time file------
///..mmm one big one? seperate ones, timestamped ones?
// 60 second update interval
// make timestamp file like original python one! to check for updates
// make new custom json:
// scooter 1/marker time1 { lat long }
// time2 { lat long }
// scooter 2/marker time1 { lat long }
// time2 { lat long }
//
//
// for each
// check if lastlocation is different...if update > latest file (map file..)
// check if is rentable
// TODO make two files
// 1: current position and state of scooter, latlong, id, status
// 2: historical json file, contains all scooters, updated everytime php file is loaded (or every 60 sec). No state changes, only lat long and time. even if time does not change
// Custom functions
function callAPI($url){
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_FAILONERROR, true);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_HTTPHEADER, array(
'x-api-key: bpEUTJEBTf74oGRWxaIcW7aeZMzDDODe1yBoSxi2',
'Content-Type: application/json',
)); // set the api key
curl_setopt($curl, CURLOPT_USERAGENT,'ProductionRelease/3.8.2 (app.tier.sharing; build:3.8.2.0; iOS 12.4.4) Alamofire/4.9.1'); // set user-agent to that of the Tier.app, sniffed by burpsuite
$result = curl_exec($curl);
if(!$result){die("Connection Failure");}
curl_close($curl);
return $result;
}
?>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css">
<script src='https://unpkg.com/leaflet@1.3.3/dist/leaflet.js'></script>
<!-- icons -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
<!-- begin timeslider -->
<script src="SliderControl.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<!-- end of timeslider -->
<style>
#map {
height: 500px
}
</style>
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
</head>
<body>
<div id="map"></div>
<script>
// define icons
// prefix: glyphicon = bootstrap, list can be found here: https://getbootstrap.com/docs/3.3/components/
// prefix: fa = fontawesome, list is here: https://fontawesome.com/v4.7.0/cheatsheet/
var availableIcon = L.AwesomeMarkers.icon(
{"icon": "wifi", "iconColor": "white", "markerColor": "purple", "prefix": "fa"}
);
var isRentedIcon = L.AwesomeMarkers.icon(
{"icon": "hourglass-half", "iconColor": "white", "spin": "true", "markerColor": "pink", "prefix": "fa"}
);
var isMaintenanceIcon = L.AwesomeMarkers.icon(
{"icon": "wrench", "iconColor": "white", "markerColor": "black", "prefix": "fa"}
);
var map = L.map('map').setView([52.516190, 13.377693], 13);
var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
});
map.addLayer(Stamen_Toner);
//the magic: for each scooter in $scooters array, request status and construct marker
<?php
$filename = "./latestData.json"; //latest locations, 1 entry per scooter
$filename_history = "./historicalData.json"; //historical locations
// check how old the latest json is
if (time()-filemtime($filename) > 60) { //if older than 60 seconds
$arrayToEcho = saveLatestJSON();
//append to historical json
appendJSON($filename_history, $arrayToEcho);
$latestData = json_encode($arrayToEcho, JSON_FORCE_OBJECT); // force object accepts 0 as a key for the array and not NULL
file_put_contents($filename, $latestData, LOCK_EX);
$id = 0; //start id
foreach($scooters as $item) {
echo makeMarker($id);
$id++;
}
} else { // file younger than 60 seconds
$id = 0; //start id
foreach($scooters as $item) {
echo makeMarker($id);
$id++;
}
}
?>
// time slider
//test markers
//var marker1 = L.marker([52.504926, 13.358061], {time: "2020-10-09T08:00:29Z"});
//var marker2 = L.marker([52.506926, 13.358061], {time: "2020-10-09T09:00:29Z"});
//var marker3 = L.marker([52.508926, 13.358061], {time: "2020-10-09T10:00:29Z"});
// var map = marker1;
// layerGroup = L.layerGroup([marker_e7a96a6d6b08479ba6d17d42769e5202]);
layerGroup = L.layerGroup([scooter0, scooter1, scooter2]); //make this dynamic
var sliderControl = L.control.sliderControl({layer:layerGroup});
map.addControl(sliderControl);
sliderControl.startSlider();
</script>
</body>
</html>
<?php //end of measuring script execution time
//end clock time in seconds
$end_time = microtime(true);
//calculate script execution time
$execution_time = ($end_time - $start_time);
echo " Execution time of script = ".$execution_time." sec";
?>

1
website/historicalData.json

@ -1 +0,0 @@
[[{"ID":0,"lastPos":"52.57619, 13.358061","lastLocationUpdate":"2020-10-09T08:00:29Z","isRentable":true,"state":"ACTIVE","name":"artist name 0","title":"title 0","desc":"desciption 0"},{"ID":1,"lastPos":"52.55619, 13.358061","lastLocationUpdate":"2020-10-09T08:00:29Z","isRentable":true,"state":"ACTIVE","name":"artist name 1","title":"title 1","desc":"desciption 1"},{"ID":2,"lastPos":"52.53619, 13.358061","lastLocationUpdate":"2020-10-09T08:00:29Z","isRentable":true,"state":"ACTIVE","name":"artist name 2","title":"title 2","desc":"desciption 2"}]]

1
website/latestData.json

@ -1 +0,0 @@
{"0":{"ID":0,"lastPos":"52.58619, 13.358061","lastLocationUpdate":"2020-10-09T08:00:29Z","isRentable":true,"state":"ACTIVE","name":"artist name 0","title":"title 0","desc":"desciption 0"},"1":{"ID":1,"lastPos":"52.58619, 13.358061","lastLocationUpdate":"2020-10-09T08:00:29Z","isRentable":true,"state":"ACTIVE","name":"artist name 1","title":"title 1","desc":"desciption 1"},"2":{"ID":2,"lastPos":"52.53619, 13.358061","lastLocationUpdate":"2020-10-09T08:00:29Z","isRentable":true,"state":"ACTIVE","name":"artist name 2","title":"title 2","desc":"desciption 2"}}

BIN
website/mail/.DS_Store

Binary file not shown.

0
website/SliderControl.js → website/map/SliderControl.js

1
website/map/historicalData.json

File diff suppressed because one or more lines are too long

404
website/map/index.php

@ -0,0 +1,404 @@
<?php
// array of scooters, artist, title, description
global $scooters;
$scooters = array(
//array('https://opencoil.show/test-json.php?scooterID=1', 'artist name 0', 'title 0', 'desciption 0' ),
//array('https://opencoil.show/test-json.php?scooterID=2', 'artist name 1', 'title 1', 'desciption 1' ),
//array('https://opencoil.show/test-json.php?scooterID=3', 'artist name 2', 'title 2', 'desciption 2' ),
array('https://platform.tier-services.io/v1/vehicle/fbd739d6-554f-4eaf-bd9c-afe3d501c94b', 'artist name 0', 'title', 'desciption'),
array('https://platform.tier-services.io/v1/vehicle/530b66c9-e5f9-47ac-ba31-2e357dc4c735', 'artist name 1', 'title', 'desciption'),
array('https://platform.tier-services.io/v1/vehicle/aa9cedf8-ab8e-4651-8b43-93079179f26a', 'artist name 2', 'title', 'desciption'),
array('https://platform.tier-services.io/v1/vehicle/9df16c74-4a88-4f21-acf5-12ba401ca15a', 'artist name 3', 'title', 'desciption'),
array('https://platform.tier-services.io/v1/vehicle/4763ce60-5b2e-44cf-919e-fffbff26a15e', 'artist name 4', 'title', 'desciption'),
array('https://platform.tier-services.io/v1/vehicle/ca884ba2-b0a6-4f3f-b727-fcc33d10182c', 'artist name 5', 'title', 'desciption'),
array('https://platform.tier-services.io/v1/vehicle/78e9b9f1-0cf1-4415-9301-e2fe01d39bce', 'artist name 6', 'title', 'desciption'),
array('https://platform.tier-services.io/v1/vehicle/0b939caf-80e9-4d6b-8454-4a7f8eaf088c', 'artist name 7', 'title', 'desciption'),
array('https://platform.tier-services.io/v1/vehicle/0f7fa267-4bc1-439a-8fd0-43b98b9ffba7', 'artist name 8', 'title', 'desciption'),
array('https://platform.tier-services.io/v1/vehicle/8732f342-df2f-475f-b0f6-c0032743a944', 'artist name 9', 'title', 'desciption'),
);
function saveLatestJSON(){
global $scooters; //"import" the global variable into the function's scope
//TODO if latestData.json = older than ..2 minutes...call the API again
$id = 0; //start id
foreach($scooters as $item) {
$getJSON = callAPI($scooters[$id][0]); //abstract callAPI for neater reuse
// GET RID OF JSON DECODE!
$arr = json_decode($getJSON, true); // decode JSON data to PHP associative array
// access values from the associative array
$lat = $arr["data"]["attributes"]["lat"]; // get lattitude
$lng = $arr["data"]["attributes"]["lng"]; // get longitude
$pos = $lat.', '.$lng; // construct lat/lon for use in leafet
$lst = $arr["data"]["attributes"]["lastLocationUpdate"]; // get time of last position
$rnt = $arr["data"]["attributes"]["isRentable"]; // check if scooter is rentable,
$act = $arr["data"]["attributes"]["state"]; // check if scooter is ACTIVE or MAINTAINANCE
// access values from the multidimensional $scooters array
$nam = $scooters[$id][1]; // get the artist name
$tit = $scooters[$id][2]; // get the works title
$des = $scooters[$id][3]; // get the works description
//construct json with latest data
$latestData[] = array( "ID" => $id,
"lastPos" => $pos,
"lastLocationUpdate" => $lst,
"isRentable" => $rnt,
"state" => $act,
"name" => $nam,
"title" => $tit,
"desc" => $des);
$id++;
}
return $latestData; //return array
}
function makeMarker(int $id){ // generate appropriate markers based on latest JSON
$readJSON = file_get_contents('./latestData.json'); //read latest data
$arr = json_decode($readJSON, true);
$pos = $arr[$id]["lastPos"]; // get last known position
$lst = $arr[$id]["lastLocationUpdate"]; // get time of last position
$rnt = $arr[$id]["isRentable"]; // check if scooter is rentable,
$act = $arr[$id]["state"]; // check if scooter is ACTIVE or MAINTAINANCE
// access values from the multidimensional $scooters array
$nam = $arr[$id]["name"]; // get the artist name
$tit = $arr[$id]["title"]; // get the works title
$des = $arr[$id]["desc"]; // get the works description
//check scooter status and construct marker with corresponding icon
//check if scooter is rentable
if($rnt == true && $act === 'ACTIVE'){
$marker = 'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
.bindPopup("<b>'.$tit.'</b><br>'.$des.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'<br>Status: rentable, Gallery available")
.bindTooltip("'.$nam.'").setIcon(availableIcon);';
} elseif ($rnt == false && $act === 'ACTIVE') {
$marker = 'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
.bindPopup("<b>'.$tit.'</b><br>'.$des.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'<br>Status: rented Out, Gallery unavailable")
.bindTooltip("'.$nam.'").setIcon(isRentedIcon);';
};
//check if scooter is in maintenace
if($act !== "ACTIVE"){
$marker = 'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
.bindPopup("<b>'.$tit.'</b><br>'.$des.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'<br>Status: unavailable, in maintenace")
.bindTooltip("'.$nam.'").setIcon(isMaintenanceIcon);';
};
return $marker;
}
function appendJSON($filename, $data){ // create historical json data for documentation over time
// read the file if present
$handle = @fopen($filename, 'r+');
// create the file if needed
if ($handle === null)
{
$handle = fopen($filename, 'w+');
}
if ($handle)
{
// seek to the end
fseek($handle, 0, SEEK_END);
// are we at the end of is the file empty
if (ftell($handle) > 0)
{
// move back a byte
fseek($handle, -1, SEEK_END);
// add the trailing comma
fwrite($handle, ',', 1);
// add the new json string
fwrite($handle, json_encode($data) . ']');
}
else
{
// write the first event inside an array
fwrite($handle, json_encode(array($data)));
}
// close the handle on the file
fclose($handle);
}
}
function callAPI($url){
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_FAILONERROR, true);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_HTTPHEADER, array(
'x-api-key: bpEUTJEBTf74oGRWxaIcW7aeZMzDDODe1yBoSxi2',
'Content-Type: application/json',
)); // set the api key
curl_setopt($curl, CURLOPT_USERAGENT,'ProductionRelease/3.8.2 (app.tier.sharing; build:3.8.2.0; iOS 12.4.4) Alamofire/4.9.1'); // set user-agent to that of the Tier.app, sniffed by burpsuite
$result = curl_exec($curl);
if(!$result){die("Connection Failure");}
curl_close($curl);
return $result;
}
?>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>OPENCOIL</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css">
<script src='https://unpkg.com/leaflet@1.3.3/dist/leaflet.js'></script>
<!-- icons -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
<link rel="stylesheet" href="main.css"/>
<!-- begin timeslider
<script src="SliderControl.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<!-- end of timeslider -->
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
</head>
<body>
<div id="map"></div>
<div id="title-container">
<h1>OPENCOIL</h1>
<h2>a roaming speedshow</h2>
<p>legendary code has once been written on a cold rainy night in october. it was 2 nay 1 day before the opening of this show when i typed this silly code. it was legendary. both the situation as well as the code. thanks for reading. bye</p>
<div id="bottom_menu">
<a href="#" onclick="document.getElementById('infotext').style.visibility='visible';document.getElementById('infotext').style.opacity='1';">info</a>
<a href="#" onclick="document.getElementById('abouttext').style.visibility='visible';document.getElementById('infotext').style.opacity='1';">about</a>
<a href="#" onclick="document.getElementById('contacttext').style.visibility='visible';document.getElementById('infotext').style.opacity='1';">contact</a>
</div>
</div>
<div id="infotext">
<div id="infobuttons">
<div id="closeButton" onclick="document.getElementById('infotext').style.visibility='hidden';document.getElementById('infotext').style.opacity='0';">X</div>
<div id="enButton" onclick="document.getElementById('infotext_en').style.visibility='visible';document.getElementById('infotext_en').style.opacity='1';">EN</div>
</div>
<p>
OPENCOIL – a roaming Speedshow <br><br>
Die Ausstellung OPENCOIL setzt sich mit den Auswirkungen von Mikro-Mobilitätsdiensten auf den Stadtraum auseinander, indem sie ihre dezentrale Infrastruktur als Ausstellungsraum nutzt und gleichzeitig die Bedingungen und Auswirkungen dieser Infrastrukturen auch zum Thema macht.
<br><br>
11 Künstler*innen wurden eingeladen, ihre Arbeiten auf einem kleinen Wifi Controller mit ~2MB Offline-Speicher zu präsentieren.
<br><br>
Diese „digitalen Galerieräume“ werden an 11 zufällig ausgewählten E-Scootern angebracht.
<br>
So fährt die Ausstellung, von den Nutzer*Innen der Roller unbemerkt, als „roaming Speedshow“ durch die Stadt.
<br><br>
Der aktuelle Standort der Kunstwerke kann ab dem 26. Oktober über diese Website verfolgt werden. Damit die Werke betrachtet werden können, muss die „Roller-Galerie“ im Stadtraum gefunden werden.
<br><br>
Sobald der Roller angemietet ist, erhalten die Besucher*innen über ihr persönliches Smartphone, Zugang zu dem 2MB großen Galerieraum und den ausgestellten Werken.
<br><br>
Während Kapazitätsbeschränkungen und die bevorzugte Vermeidung von Zusammenkünften in geschlossenen Räumen, traditionelle Galerien und Museen vor Herausforderungen stellen, zielt OPENCOIL darauf ab, die Ortsunabhängigkeit des Online mit der Materialität des Offline (und umgekehrt) zu verbinden. Die Infrastruktur der „Mikro-Mobiltitätsdienste“ wird übernommen – klimaneutral und dezentral.
<br><br>
Die Gehwege vieler Städte auf der ganzen Welt wurden in den letzten Jahren von sogenannten 'dockless sharing vehicles' regelrecht überflutet. Mit Versprechungen von Umweltfreundlichkeit und Elektromobilität, besetzten diese Risikokapitalismus Aktivisten die Grauzone zwischen privatem und öffentlichem Raum auf den Straßen unserer Städte. Diese gewissenlose Gewissenhaftigkeit der "Mikro-Mobilitätsdienste" wirft jedoch wichtige Fragen zu städtischem Raum, Eigentum, Agentur, Produktion, Ökologie und sehr spätem Kapitalismus auf.
<br><br>
Wie umgehen mit der Inbesitznahme öffentlichen Raums?<br>
Welche Werkzeuge und Wege gibt es sich diesen zurückzuerobern?<br>
<br>
OPENCOIL soll nicht nur ein Pandemie-tauglicher Weg sein, um Kunst im öffentlichen Offline-Raum zu zeigen. OPENCOIL ist auch eine kreative (Um-)Nutzung von E-Scootern, ein Versuch, sich ihnen mit künstlerischen Mitteln zu nähern.
<br>
Gezeigt werden Arbeiten, die sich mit Fragen der Überschneidung von öffentlichem und privatem Raum, dem Umgang mit Ressourcen sowie mit Greenwashing, Risikokapitalismus und Vandalismus befassen.
<br><br>
Die teilnehmenden Künstler*innen sind:
<br><br>
Aram Bartholl<br>
Constant Dullaart<br>
Dennis de Bel & Anton Jehle<br>
JODI<br>
Jonas Lund<br>
Martin Howse<br>
!Mediengruppe Bitnik<br>
Rosa Menkman<br>
Sarah Grant<br>
Sofya Aleynikova<br>
Danja Vasiliev<br>
<br><br>
Sonstige Erläuterungen:
<br><br>
Die künstlerischen Beiträge sind jeweils auf einem Wifi Mikrocontroller gespeichert, welcher mit einem Tretroller verbunden ist und so, sobald der Roller ausgeliehen ist, mit Strom versorgt wird. Um die Arbeiten zu sehen verbindet man sich mit dem vom Wifi Chip gesendeten, lokalen unverschlüsselten WiFi Netzwerk. Es öffnet sich automatisch ein Webportal, indem die Arbeit zu sehen ist. Es ist keine mobile Datenverbindung notwendig.
Alle Arbeiten wurden von den Künstler*innen speziell für die Betrachtung auf Smartphones optimiert.
<br><br>
OPENCOIL ist in keiner Weise mit der den „Mikro-Mobilitätsdiensten“ assoziiert, sondern bedient sich lediglich am bestehenden Rollernetzwerk. Die Umnutzung der Roller zu einem Ausstellungsort ist nach der Ausstellung komplett reversibel und schränkt den herkömmlichen Gebrauch der Roller (auch während der Ausstellung) in keiner Weise ein. Die Roller werden nicht beschädigt.<br><br>
Die Ausstellung startet am 26. Oktober auf dem öffentlichen Platz vor dem Zentrum für Netzkunst (Haus der Statistik) und wird in der Woche bis zum 1. November täglich von unserem Team gewartet und am Laufen gehalten. Sollte eine Arbeit beschädigt oder nicht auffindbar sein bitte per Mail (<a id="infolink" href="mailto:service@opencoil.show">service@opencoil.show</a>) oder über die Telegram App (<a id="infolink" href="https://t.me/opencoil">https://t.me/opencoil</a>)<br><br>
</p>
<div id="closeButtonbottom" onclick="document.getElementById('infotext').style.visibility='hidden';">less info</div>
</div>
<div id="infotext_en">
<div id="closeButton" onclick="document.getElementById('infotext_en').style.visibility='hidden'; document.getElementById('infotext').style.visibility='hidden';">X</div>
<p>
OPENCOIL - a roaming speed show
<br><br>
The OPENCOIL exhibition explores the impact of micro-mobility services on urban space by using its decentralised infrastructure as an exhibition space, while also addressing the conditions and effects of this infrastructure.
<br><br>
11 artists were invited to present their work on a small Wifi controller with ~2MB offline memory.
<br><br>
These "digital gallery spaces" are attached to 11 randomly selected e-scooters.
Thus the exhibition, unnoticed by the regular users of these scooters, drives through the city as a "roaming speed show".
<br><br>
From October 26th onwards the current location of the artworks will be displayed here on this website. In order to view the works the corresponding "Scooter Gallery" must be found in the offline urban space.
<br><br>
Once the scooter is rented, visitors will be able to access the 2MB gallery space and the exhibited works via their personal smartphone.
<br><br>
While capacity restrictions and the preferred avoidance of gatherings in closed spaces pose challenges on traditional galleries and museums, OPENCOIL aims to combine the independence of the online with the materiality of the offline (and vice versa). The infrastructure of "micro-mobility services" will be taken over - climate-neutral and decentralised.
<br><br>
The pavements of many cities around the world have been flooded in recent years by so-called 'dockless sharing vehicles'. With promises of eco-friendliness and electromobility, these risk capitalism activists have occupied the grey zone between private and public space on the streets of our cities. However, this unscrupulous conscientiousness of 'micro-mobility services' raises important questions about urban space, ownership, agency, production, ecology and very late capitalism.
<br><br>
How to deal with the occupation of public space?
What tools and ways are there to reclaim it?
<br><br>
OPENCOIL is not only meant to be a pandemic-proof way to show art in public offline space. OPENCOIL is also a creative (re)use of e-scooters, an attempt to approach them by artistic means.
On show are works that deal with questions of the overlap between public and private space, the use of resources, as well as greenwashing, risk capitalism and vandalism.
<br><br>
The participating artists are:
<br><br>
Aram Bartholl<br>
Constant Dullaart<br>
Dennis de Bel & Anton Jehle<br>
JODI<br>
Jonas Lund<br>
Martin Howse<br>
!Mediengruppe Bitnik<br>
Rosa Menkman<br>
Sarah Grant<br>
Sofya Aleynikova<br>
Danja Vasiliev<br>
<br><br><br>
Other explanatory notes:
<br><br>
The artistic contributions are each stored on a Wifi microcontroller, which is connected to a scooter and is thus supplied with power as soon as the scooter is rented. To view the works, you connect to the local unencrypted WiFi network sent by the Wifi chip. A web portal opens automatically, where the work can be viewed. No mobile data connection is necessary. All works have been specially optimised by the artists to be viewed on smartphones.
<br><br>
OPENCOIL is in no way associated with the "micro-mobility services", but only uses the existing scooter network. The conversion of the scooters into an exhibition space is completely reversible after the exhibition ends and in no way restricts the conventional use of the scooters (even during the exhibition). The scooters will not be damaged.
<br><br>
The exhibition will start on October 26th in the public space in front of Zentrum für Netzkunst (Haus der Statistik). For one week, until November 1st, the exhibition will be serviced and kept running daily by our team. Should a work be damaged or not be found, please send an e-mail (<a id="infolink" href="mailto:service@opencoil.show">service@opencoil.show</a>) or use the Telegram App (<a id="infolink" href="https://t.me/opencoil">https://t.me/opencoil</a>)
</p>
<div id="closeButtonbottom" onclick="document.getElementById('infotext').style.visibility='hidden'; document.getElementById('infotext_en').style.visibility='hidden';">less info</div>
</div>
<script>
// define icons
// prefix: glyphicon = bootstrap, list can be found here: https://getbootstrap.com/docs/3.3/components/
// prefix: fa = fontawesome, list is here: https://fontawesome.com/v4.7.0/cheatsheet/
var availableIcon = L.AwesomeMarkers.icon(
{"icon": "wifi", "iconColor": "white", "markerColor": "purple", "prefix": "fa"}
);
var isRentedIcon = L.AwesomeMarkers.icon(
{"icon": "hourglass-half", "iconColor": "white", "spin": "true", "markerColor": "pink", "prefix": "fa"}
);
var isMaintenanceIcon = L.AwesomeMarkers.icon(
{"icon": "wrench", "iconColor": "white", "markerColor": "black", "prefix": "fa"}
);
var map = L.map('map', { zoomControl: false, attributionControl: false }).setView([52.516190, 13.377693], 11.5);
var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
});
map.addLayer(Stamen_Toner);
//the magic: for each scooter in $scooters array, request status and construct marker
<?php
$filename = "./latestData.json"; //latest locations, 1 entry per scooter
$filename_history = "./historicalData.json"; //historical locations
// check how old the latest json is
if (time()-filemtime($filename) > 60) { //if older than 60 seconds
$arrayToEcho = saveLatestJSON();
//append to historical json
appendJSON($filename_history, $arrayToEcho);
$latestData = json_encode($arrayToEcho, JSON_FORCE_OBJECT); // force object accepts 0 as a key for the array and not NULL
file_put_contents($filename, $latestData, LOCK_EX);
$id = 0; //start id
foreach($scooters as $item) {
echo makeMarker($id);
$id++;
}
} else { // file younger than 60 seconds
$id = 0; //start id
foreach($scooters as $item) {
echo makeMarker($id);
$id++;
}
}
?>
// time slider
//test markers
//var marker1 = L.marker([52.504926, 13.358061], {time: "2020-10-09T08:00:29Z"});
//var marker2 = L.marker([52.506926, 13.358061], {time: "2020-10-09T09:00:29Z"});
//var marker3 = L.marker([52.508926, 13.358061], {time: "2020-10-09T10:00:29Z"});
// var map = marker1;
// layerGroup = L.layerGroup([marker_e7a96a6d6b08479ba6d17d42769e5202]);
layerGroup = L.layerGroup([scooter0, scooter1, scooter2]); //make this dynamic
var sliderControl = L.control.sliderControl({layer:layerGroup});
map.addControl(sliderControl);
sliderControl.startSlider();
</script>
</body>
</html>

1
website/map/latestData.json

@ -0,0 +1 @@
{"0":{"ID":0,"lastPos":"52.516922, 13.494012","lastLocationUpdate":"2020-10-15T00:51:13Z","isRentable":true,"state":"ACTIVE","name":"artist name 0","title":"title","desc":"desciption"},"1":{"ID":1,"lastPos":"52.461506, 13.321215","lastLocationUpdate":"2020-10-15T00:48:45Z","isRentable":true,"state":"ACTIVE","name":"artist name 1","title":"title","desc":"desciption"},"2":{"ID":2,"lastPos":"52.491178, 13.385457","lastLocationUpdate":"2020-10-15T00:46:28Z","isRentable":true,"state":"ACTIVE","name":"artist name 2","title":"title","desc":"desciption"},"3":{"ID":3,"lastPos":"52.474423, 13.365387","lastLocationUpdate":"2020-10-15T00:48:04Z","isRentable":false,"state":"INACTIVE","name":"artist name 3","title":"title","desc":"desciption"},"4":{"ID":4,"lastPos":"52.512192, 13.376707","lastLocationUpdate":"2020-10-15T00:46:40Z","isRentable":true,"state":"ACTIVE","name":"artist name 4","title":"title","desc":"desciption"},"5":{"ID":5,"lastPos":"52.529781, 13.401221","lastLocationUpdate":"2020-10-15T00:54:37Z","isRentable":true,"state":"ACTIVE","name":"artist name 5","title":"title","desc":"desciption"},"6":{"ID":6,"lastPos":"52.507063, 13.31256","lastLocationUpdate":"2020-10-15T00:47:27Z","isRentable":true,"state":"ACTIVE","name":"artist name 6","title":"title","desc":"desciption"},"7":{"ID":7,"lastPos":"52.545109, 13.359456","lastLocationUpdate":"2020-10-15T00:51:35Z","isRentable":true,"state":"ACTIVE","name":"artist name 7","title":"title","desc":"desciption"},"8":{"ID":8,"lastPos":"52.511562, 13.310639","lastLocationUpdate":"2020-10-13T00:02:27Z","isRentable":false,"state":"GPS_ISSUE","name":"artist name 8","title":"title","desc":"desciption"},"9":{"ID":9,"lastPos":"52.548454, 13.366208","lastLocationUpdate":"2020-10-15T00:50:36Z","isRentable":true,"state":"ACTIVE","name":"artist name 9","title":"title","desc":"desciption"}}

149
website/map/main.css

@ -0,0 +1,149 @@
body {
height: 100%;
width: 100%;
margin: 0;
}
#map {
position: absolute;
height: 100%;
width: 100%;
border: none;
}
#title-container {
position: absolute;
display: flex;
flex-flow: row wrap;
pointer-events: none;
z-index: 1000;
text-align: right;
width: 100%;
height: 100%;
}
h1, h2, h3, p {
position: absolute;
width: 100%;
pointer-events: none;
font-family: Courier;
color: #d152b8;
margin: 0;
}
h1 {
padding-top: 2%;
padding-right: 2%;
font-size: 15vw;
align-self: flex-start;
}
h2 {
padding-top: 15%;
padding-right: 2.5%;
font-size: 5vw;
align-self: flex-start;
}
h3 {
padding-top: 18%;
font-size: 2rem;
align-self: flex-start;
}
p {
font-size: 5vw;
padding-right: 2.5%;
align-self: flex-end;
padding-bottom: 2.5%;
}
#bottom_menu {
position: absolute;
display: flex;
justify-content: space-between;
align-self: flex-end;
z-index: 1000;
background: white;
height: 3%;
width: 100%;
font-family: Courier;
font-weight: bold;
font-size: 2.5vw;
text-align: center;
align-items: center;
}
#bottom_menu a {
padding: 1vw 3vw 1vw 3vw;
color: #d152b8;
}
#infotext, #infotext_en {
visibility: hidden;
opacity:0;
overflow-x: hidden !important;
overflow-y: scroll !important;
position: absolute;
z-index: 400;
width: 80%;
height: 70%;
max-height: 100%;
max-width: 100%;
word-wrap: break-word;
background-color: #d152b8;
color: white;
margin: 12% 20% 20% 10%;
transition: opacity 1s;
}
#infobuttons {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#closeButton {
height: min-content;
width: min-content;
font-family: Arial;
font-size:2vw;
font-weight:bold;
padding:1%;
cursor: pointer;
margin: 0;
}
#enButton {
position: relative;
height: min-content;
width: min-content;
margin: 0;
font-family: Arial;
font-size:2vw;
font-weight:bold;
color: white;
padding:1%;
text-align: right;
cursor: pointer;
}
#closeButtonbottom {
font-family: Arial;
font-size:2vw;
font-weight:bold;
text-align: center;
padding-bottom: 5vh;
margin: 0;
cursor: pointer;
}
#infotext p, #infotext_en p {
padding: 0% 10% 10% 10%;
font-family: Arial;
font-weight: bold;
font-size: 2.0vw;
}

BIN
website/preshow/.DS_Store

Binary file not shown.
Loading…
Cancel
Save