opencoil-paracity/website/map/index.php

<?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('abouttext').style.opacity='1';">about</a>
        <a href="#" onclick="document.getElementById('contacttext').style.visibility='visible';document.getElementById('contacttext').style.opacity='1';">contact</a>
    </div>
    </div>
<div id="abouttext">
    <div id="infobuttons">
        <div id="closeButton"  onclick="document.getElementById('abouttext').style.visibility='hidden';document.getElementById('abouttext').style.opacity='0';">X</div>
    </div>
    <p>
        Opencoil - a roaming speedshow<br><br>
        sponsored by Zentrum für Netzkunst<br><br>
        curated by Dennis de Bel & Anton Jehle<br><br>
        not affiliated with TIER at all
    </p>
</div>
<div id="contacttext">
    <div id="infobuttons">
        <div id="closeButton"  onclick="document.getElementById('contacttext').style.visibility='hidden';document.getElementById('contacttext').style.opacity='0';">X</div>
    </div>
    <p>
        Generelle Anfragen / general inquiries<br><br>
        <a id="infolink" href="mailto:mail@opencoil.show">mail@opencoil.show</a><br><br>
        Technischer Support / technical support<br><br>
        <a id="infolink" href="mailto:service@opencoil.show">Mail: service@opencoil.show</a><br>
        <a id="infolink" href="https://t.me/opencoil">Telegram: https://t.me/opencoil</a>
    </p>

</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>