kramann.info
© Guido Kramann

Login: Passwort:










2.8 Anwendung in Javascript - Animierte Partitur

2.8 Application in Javascript - Animated Score (EN google-translate)

2.8 Aplikacja w JavaScript - Animowany wynik (PL google-translate)

Grundidee: Drei Musiker sollen über drei LED-Anzeigen angezeigt bekommen, welche Zählzeit gerade ist und ob sie gerade im Moment einen Ton zu spielen haben.

Basic idea: Three musicians are to be shown on three LED displays, which is counting time and whether they have a sound to play right now.

Podstawowa idea: Trzej muzycy mają być wyświetlani na trzech wyświetlaczach LED, które liczą czas i czy są mieć teraz dźwięk do odtworzenia.

Hintergrund: Sie haben Noten als Papierkopie vorliegen, die am Bildschirm in einer Webanwendung in Echtzeit generiert werden. Um nun synchron mit der in der Webanwendung animierten Partitur spielen zu können, bekommen die Musiker Lichtsignale.

Background: You have scores as paper copies that are generated on the screen in real-time in a web application. In order to be able to play synchronously with the score animated in the web application, the musicians receive light signals.

Tło: masz wyniki jako kopie papierowe, które są generowane na ekranie w czasie rzeczywistym w aplikacji internetowej. Aby móc grać synchronicznie z partyturą animowaną w aplikacji internetowej, muzycy otrzymują sygnały świetlne.

Genau 8 LEDs werden verwendet:

Exactly 8 LEDs are used:

Dokładnie 8 diod LED:

  • TON - Gelbe LED - Bit7 - leuchtet, wenn gerade Ton zu spielen ist.
  • ZÄHLZEIT - grün rot rot rot - Bit6..3 - zeigen Zählzeit an.
  • AMPEL - rot gelb grün - Bit2..0 - Countdown vor dem Losspielen

Das Ganze wird mit drei angeschlossenen Arduino-Micro-Boards realisiert.

The whole thing is realized with three connected Arduino micro boards.

Całość realizowana jest za pomocą trzech połączonych mikroprocesorów Arduino.

Der Gesamte Leuchtzustand der einzelnen Arduino-Anwendungen würd über ein einziges Zeichen gesteuert: Dieses hat 8 Bit. Jedes Bit steht dafür, ob die korresponiderende Bit-LED leuchten soll (1) oder nicht (0):

The overall lighting status of each Arduino application would be controlled by a single character: This has 8 bits. Each bit indicates whether the correspon- ding bit LED should light (1) or not (0

Ogólny stan oświetlenia każdej aplikacji Arduino byłby kontrolowany przez pojedynczy znak: Ma 8 bitów. Każdy bit wskazuje, czy odpowiednia bitowa dioda LED powinna się zaświecić (1), czy nie (0

Die Arduino-Kommunikation ist also Byte-basiert und nicht ASCII-basiert.

The Arduino communication is thus byte-based and not ASCII-based.

Komunikacja Arduino jest zatem oparta na bajtach, a nie na ASCII.

Auslesen eines Tasterzustandes

Reading a button state

Odczytywanie stanu przycisku

Um einen Neustart der Partitur mit Vorzählen auszulösen, wird zusätzlich auf dem Arduino-Board eine Taste verbaut, die am digitalen Pin 0 und Masse angeschlossen ist.

In order to trigger a restart of the score with count-in, in addition to the Arduino board one Key installed, connected to digital pin 0 and ground.

Aby uruchomić ponowne uruchomienie wyniku zliczania, oprócz karty Arduino Klucz zainstalowany, podłączony do cyfrowego styku 0 i uziemienia.

Wird diese gedrückt, so zählt die "Ampel" in drei mal vier Zählzeiten herunter. Erst dann beginnt das Stück.

If this is pressed, the traffic light counts down in three times four beats. Only then does the play begin.

Po naciśnięciu, sygnalizacja świetlna odlicza trzy razy cztery uderzenia. Dopiero wtedy zaczyna się zabawa.

Aufbau der drei Steckplatinen.

Bild 2.8-1: Aufbau der drei Steckplatinen.

Arduino-Programm

Arduino-Programm

Arduino-Programm

//Random Cloud Composition (c) Guido Kramann, Potsdam, Germany

//TON    BIT
//D3-D4   7
//+  -

//BIT:
//6      5      4      3
//1      2      3      4    
//D5-D6  D7-D8  D9-D10 D11-D12
//+  -   +  -   +  -   +   -

//BIT:
//2      1      0
//rot    gelb   grün
//A5-A4  A3-A2  A1-A0
//+  -   +  -   +  -
//D23-22 D21-20 D19-18



char c; //Wird bitweise interpretiert: Jedes Bit eine LED, Abfolge s.o.
char taster; //Hilfsvariable zum Erfassen des Tasterzustandes
unsigned char DURCHLAUF = 0;
void verarbeiteC()
{
    //Bit0 - grün
    digitalWrite(19,c%2);
    c=(c>>1);
    //Bit1 - gelb
    digitalWrite(21,c%2);
    c=(c>>1);
    //Bit2 - rot
    digitalWrite(23,c%2);
    c=(c>>1);
    
    //Bit3 - 4
    digitalWrite(11,c%2);
    c=(c>>1);
    //Bit4 - 3
    digitalWrite(9,c%2);
    c=(c>>1);
    //Bit5 - 2
    digitalWrite(7,c%2);
    c=(c>>1);
    //Bit6 - 1
    digitalWrite(5,c%2);
    c=(c>>1);
    
    //Bit7 - TON
    digitalWrite(3,c%2);        
}

void allesAn()
{
    digitalWrite(3,1);
    digitalWrite(4,0);
    digitalWrite(5,1);
    digitalWrite(6,0);
    digitalWrite(7,1);
    digitalWrite(8,0);
    digitalWrite(9,1);
    digitalWrite(10,0);
    digitalWrite(11,1);
    digitalWrite(12,0);  
    digitalWrite(18,0);
    digitalWrite(19,1);
    digitalWrite(20,0);
    digitalWrite(21,1);
    digitalWrite(22,0);
    digitalWrite(23,1);    
}

void allesAus()
{
    digitalWrite(3,0);
    digitalWrite(4,0);
    digitalWrite(5,0);
    digitalWrite(6,0);
    digitalWrite(7,0);
    digitalWrite(8,0);
    digitalWrite(9,0);
    digitalWrite(10,0);
    digitalWrite(11,0);
    digitalWrite(12,0);
    digitalWrite(18,0);
    digitalWrite(19,0);
    digitalWrite(20,0);
    digitalWrite(21,0);
    digitalWrite(22,0);
    digitalWrite(23,0);
}

void setup() 
{
    Serial.begin(9600);
    
    //Taster:
    pinMode(0,INPUT);      
    digitalWrite(0,1); //Pullup-Widerstand
    
    
    pinMode(18,OUTPUT);      
    pinMode(19,OUTPUT);      
    pinMode(20,OUTPUT);      
    pinMode(21,OUTPUT);      
    pinMode(22,OUTPUT);      
    pinMode(23,OUTPUT);      
       
    pinMode(3,OUTPUT);      
    pinMode(4,OUTPUT);      
    
    pinMode(5,OUTPUT);      
    pinMode(6,OUTPUT);      
    pinMode(7,OUTPUT);      
    pinMode(8,OUTPUT);      
    pinMode(9,OUTPUT);      
    pinMode(10,OUTPUT);      
    pinMode(11,OUTPUT);      
    pinMode(12,OUTPUT);              
}

void loop() 
{
  if(DURCHLAUF<3)
  {
    allesAn();
    delay(500);
    allesAus();
    delay(500);
    DURCHLAUF++;
  }
  else if(Serial.available())
  {
       c=Serial.read();
       taster = digitalRead(0); //Tasterzustand einlesen
       if(taster>0)
           Serial.write('0');
       else
           Serial.write('1');       
       verarbeiteC();
  }  
}

Code 2.8-1: Das Arduino Programm "rcc009.pde"

rcc009.zip

PHP-Serverprogramm

PHP-Serverprogramm

PHP-Serverprogramm


Voraussetzung: Die Webdateien liegen im Ordner .../htdocs/rcc eines laufenden lokalen XAMPP-Servers.


rcc.zip

Sind einmal drei Arduino-Boards angeschlossen, so haben sie i.d.R. die seriellen Portbezeichnungen: /dev/ttyACM0, /dev/ttyACM1, /dev/ttyACM2.

Once three Arduino boards are connected, they have i.d.R. t serial port designations: / dev / ttyACM0, / dev / ttyACM1, / dev / ttyACM2.

Po połączeniu trzech płyt Arduino mają one i.d.R oznaczenia portów szeregowych: / dev / ttyACM0, / dev / ttyACM1, / dev / ttyACM2.

Um unter diesen auswählen zu können, wird der Portname ebenfalls über POST gesendet. So kann post_lesen.php für alle drei Boards von der Anwendung her aufgerufen werden und muß nicht mehr angepaßt werden:

To be able to select from these, the port name is also sent via POST Posted. So can post_lesen.php for all three boards from the applicati be called and no longer needs to be adjusted:

Aby móc z nich wybierać, nazwa portu jest również wysyłana za pośrednictwem POST wysłana. Tak może post_lesen.php dla wszystkich trzech tablic z aplikac nazywać się i już nie wymaga korekty:

post_lesen.php - Verbindung zwischen Mikrocontroller und HTML5/Javascript-Anwendung

Bild 2.8-2: post_lesen.php - Verbindung zwischen Mikrocontroller und HTML5/Javascript-Anwendung

Testanwendung

Testanwendung

Testanwendung

Vor der eigentlichen Anwendung wird ein Testprogramm erstellt. Dieses ermöglicht schon das Ansteuern aller LEDs einzeln und das Empfangen des Tasterzustandes.

Before the actual application, a test program is created. Th Allows you to control all LEDs individually and receive of the button state.

Przed faktyczną aplikacją tworzony jest program testowy. Pozwala kontrolować wszystkie diody LED indywidualnie i odbierać stanu przycisku.

Formularoberfläche von request.html

Bild 2.8-3: Formularoberfläche von request.html

<!DOCTYPE html>
<html>
    <head lang="de">
        <meta charset="iso-8859-1">
        <script language:javascript> 
            var http;
            function beiAntwort()
            {
                if(http.readyState == 4 && http.status == 200) 
                {
                    document.getElementById("tasterzustand").value = http.responseText;
                }
            }


            function abschicken(wohin,muster)
            {
                http = new XMLHttpRequest();
                var url = "http://localhost/rcc/post_lesen.php";
                var params = "wohin="+wohin+"&"+"muster="+muster;
                http.open("POST", url, true);

                //Send the proper header information along with the request
                http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                //Testweise Antwort anzeigen:
                http.onreadystatechange = beiAntwort;

                http.send(params);
            }

            function testen()
            {
                var wohin  = document.getElementById("wohin").value;
                var muster = document.getElementById("muster").value;
                abschicken(wohin,muster);
            }
        </script>
    </head>
    <input type="button" value="abschicken" onclick="javascript:testen()"/>
    <input id="wohin"  style="width:200px;" type="text" value="/dev/ttyACM0"/>
    <input id="muster" style="width:200px;" type="text" value="11110000"/>
    <input id="tasterzustand" style="width:200px;" type="text" value="x"/>
    </body>
</html>

Code 2.8-2: request.html

Saalübung
hall exercises
sala ćwiczeń

Oben stehendes Programm wird erläutert und als Grundlage für eine kleine im Unterricht erstellte Anwendung genommen.

The above program is explained and used as a basis for a small program taken in class created application.

Powyższy program jest wyjaśniony i stosowany jako podstawa dla małego programu zrobione w aplikacji stworzonej przez klasę.

Teillösung

partial solution

częściowym rozwiązaniem

Das folgende Programm schickt nach dem Start zyklisch vier Leuchtmuster an den Arduino, die die Taktzählzeit anzeigen.

The following program cyclically sends four light patterns to the Arduino after starting, indicating the beat count.

Następujący program cyklicznie wysyła cztery wzorce świetlne do Arduino po uruchomieniu, wskazując liczbę bitów.

Über die Buttons "starten", "stoppen" kann der Prozeß wiederholt begonnen und beendet werden.

With the buttons start, stop the process can be started and stopped repeatedly.

Po uruchomieniu przycisków zatrzymaj proces można wielokrotnie uruchamiać i zatrzymywać.

<!DOCTYPE html>
<html>
    <head lang="de">
        <meta charset="iso-8859-1">
        <script language:javascript> 
            var ADRESSE = "/dev/ttyACM0";
            var ZAEHLZEIT = 0;

            var threadhandler;

            function tick()
            {
                if(ZAEHLZEIT==0)
                {
                    abschicken(ADRESSE,"01000000");
                }
                else if(ZAEHLZEIT==1)
                {
                    abschicken(ADRESSE,"00100000");
                }
                else if(ZAEHLZEIT==2)
                {
                    abschicken(ADRESSE,"00010000");
                }
                if(ZAEHLZEIT==3)
                {
                    abschicken(ADRESSE,"00001000");
                }

                ZAEHLZEIT++;
                ZAEHLZEIT%=4;
            }

            var http;
            function beiAntwort()
            {
                if(http.readyState == 4 && http.status == 200) 
                {
                    document.getElementById("tasterzustand").value = http.responseText;
                }
            }


            function abschicken(wohin,muster)
            {
                http = new XMLHttpRequest();
                var url = "http://localhost/rcc/post_lesen.php";
                var params = "wohin="+wohin+"&"+"muster="+muster;
                http.open("POST", url, true);

                //Send the proper header information along with the request
                http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                //Testweise Antwort anzeigen:
                http.onreadystatechange = beiAntwort;

                http.send(params);
            }

            function testen()
            {
                var wohin  = document.getElementById("wohin").value;
                var muster = document.getElementById("muster").value;
                abschicken(wohin,muster);
            }

            function starten()
            {
                threadhandler = setInterval(tick,500);
            }
            function stoppen()
            {
                threadhandler = window.clearInterval(threadhandler);
            }

        </script>
    </head>
    <input type="button" value="starten" onclick="javascript:starten()"/>
    <input type="button" value="stoppen" onclick="javascript:stoppen()"/>
    <input type="button" value="abschicken" onclick="javascript:testen()"/>
    <input id="wohin"  style="width:200px;" type="text" value="/dev/ttyACM0"/>
    <input id="muster" style="width:200px;" type="text" value="11110000"/>
    <input id="tasterzustand" style="width:200px;" type="text" value="x"/>
    </body>
</html>

Code 2.8-3: Teillösung anwendung.html - muß auch in htdocs/rcc liegen.