programmieren – Bytespeicher https://bytespeicher.org Hackspace Erfurt Fri, 12 Oct 2018 20:14:23 +0000 de-DE hourly 1 Calliope Programmiernachmittag am 6. Oktober https://bytespeicher.org/2018/calliope-programmiernachmittag-am-6-oktober/ Wed, 03 Oct 2018 21:59:52 +0000 https://bytespeicher.org/?p=3427 Calliope Programmiernachmittag am 6. Oktober weiterlesen ]]> Oktober bedeutet seit vielen Jahren auch #CodeWeek – Die EU Code Week ist eine Breiteninitiative, die der Bevölkerung das Programmieren und digitale Kompetenzen auf spaßige und ansprechende Weise näherbringen soll. In diesem Jahr findet sie vom 6. bis 21. Oktober statt.

Wir möchten uns mit der Initiative Kids@Digital in diesem Jahr auch beteiligen und die Nachfrage nach weiteren Workshops mit kleinen Veranstaltungen erfüllen. Als ein erstes Angebot soll am 6. Oktober im Bytespeicher ein Calliope Mini Workshop für Schülerinnen und Schüler ab 9 Jahren stattfinden. Die Plätze im Bytespeicher sind begrenzt, wir können aber 8 Plätze und ausreichend Material anbieten.

Mit dem Microcontroller „Calliope Mini“ können die Grundlagen der Programmierung auf einfache und spielerische Weise für Kinder vermittelt und ausprobiert werden. Die Veranstaltung ist kostenfrei, der Beginn ist 14 Uhr. Besondere Vorkenntnisse sind nicht erforderlich. Die Eltern dürfen gern zuschauen. Die Anmeldung ist über die Plattform Eventbrite möglich. Falls nicht gewünscht, nehmen wir auch Anmeldungen über das Kontaktformular entgegen.

 

]]>
Kids@Digital: die Initiative zur Förderung von Programmierangeboten für Kinder https://bytespeicher.org/2018/kidsdigital-die-initiative-zur-foerderung-von-programmierangeboten-fuer-kinder/ Sun, 12 Aug 2018 22:39:23 +0000 https://bytespeicher.org/?p=3414 Kids@Digital: die Initiative zur Förderung von Programmierangeboten für Kinder weiterlesen ]]> Unser Verein bietet bereits Vorträge zu Elektronik, CAD und 3D-Druck und  Workshops zur Leiterplattenherstellung an. Veranstaltungen und Workshops für Softwareprojekte waren immer etwas schwieriger durchzuführen.

Kids@Digital-Logo

In diesem Jahr haben sich Mitglieder und Unterstützer des Bytespeichers dazu entschlossen, die Initiative Kids@Digital zu gründen, um den Aufbau von Programmierangeboten für Kinder in Erfurt aktiv zu unterstützen. Dazu haben wir am 26. Mai bereits die Veranstaltung „Devoxx4Kids Thüringen #2“ im Krämerloft mitorganisiert.

Am 25. August ab 11 Uhr wird das zweite Devoxx4Kids-Event im Krämerloft in Erfurt stattfinden und durch unsere Initiative mitveranstaltet. Die 20 Plätze sind zunächst schon an Kinder der Warteliste der letzten Veranstaltung, aber auch an Kinder der Mentoren zugeteilt worden. Eine Anmeldung auf der Plattform Eventbrite mit Warteliste für Kinder und Mentoren ist weiterhin möglich. Die Nachfrage ist so groß, was uns zeigt, wie wichtig die Initiative ist, um weitere Angebote zu schaffen. 

2 Mädchen programmieren auf dem Event Devoxx4Kids im Krämerloft
Devoxx4Kids #2 im Krämerloft

Wir würden natürlich gern viel häufiger und regelmäßig solche Workshops auch am Nachmittag anbieten, aber es ist uns zeitlich nicht möglich, das mit unseren momentanen Mitgliedern zu leisten. Interessierte Eltern und PädagogInnen sollten sich daher unbedingt bei uns melden, denn wir möchten gern gemeinsam Angebote und Lernmaterialien entwickeln.

Das Ziel, mit erfahrenen Lehrerinnen und Lehrern zusammenzuarbeiten, stand bereits früh fest – daher wird Kids@Digital am 5. September um 18 Uhr einen Informationsabend im Bytespeicher durchführen, an dem Programmierumgebungen für den Informatikunterricht vorgestellt und praktisch präsentiert werden sollen. Dazu eingeladen sind alle Informatiklehrerinnen und -lehrer , aber auch interessierte MedienpädogogInnen, die bereits Erfahrungen mit dem Programmieren in der Schule gemacht haben. Auch hier ist eine Anmeldung über Eventbrite erwünscht.

]]>
WordPress erweitern mit [Grease|Tamper]monkey (ohne PHP) https://bytespeicher.org/2016/wordpress-erweitern-mit-greasetampermonkey-ohne-php/ Sat, 09 Jan 2016 09:02:59 +0000 https://bytespeicher.org/?p=1286 WordPress erweitern mit [Grease|Tamper]monkey (ohne PHP) weiterlesen ]]> Unsere Seite hier ist ein WordPress-Blog und ich schreibe seit neuestem die Bytespeicher-Notizen im integrierten Editor im Adminbereich der Seite.
Da wir vorher Input in Pads (Etherpad) sammeln, besteht ein Großteil des Artikelschreibens aus Copy & Paste. Einige Nachbearbeitungsschritte sind aber noch nötig und diese wollen wir automatisieren.

Damit sich das Format zumindest an einige wenige Standards hält, gibt es eine Vorlage dazu.

Die Vorlage und zum Glück auch die Inputgeber verwenden dabei Markdown, eine Formatierungssprache die ähnlich der Wiki- oder Forensyntax Textstrukturierung direkt im Quelltext erlaubt, dabei aber leidlich lesbar bleibt. Etherpad selbst ‚versteht‘ diese Auszeichnungssprache nicht, wir verwenden sie aber schon in Vorbereitung des Kopierens ins WordPress, wo sie am Ende in HTML umgesetzt wird.

Lediglich Links werden, aus historischen und Übersichtsgründen im Pad im Format

* Notiztext
https://link.example.org/detailseite

angegeben und mussten bisher im WordPress-Editor per Button oder händisch in die Form

* Notiztext (<a href=https://link.example.org/detailseite>example.org<\a>)

gebracht werden.

Das hat genervt.

Nun ist das eigentlich ein einfacher Fall für ein Suchen&Ersetzen mittels Regular Expressions, wie sie in jedem besseren Editor zur Verfügung steht.
Nun ist der WordPress-Editor alles andere als einer der ‚besseren‘, man müsste die Funktion also als Plugin nachrüsten, will man den Text nicht in einem zusätzlichen Arbeitsschritt noch durch einen Editor schleifen. Leider ist WordPress selbst und seine Plugins in PHP geschrieben, einer serverseitigen Skriptsprache um die der Autor dieses Textes und verfügbare Hilfskräfte im Bytespeicher jeweils einen großen Bogen machen. Also was tun?

Aber was serverseitig geht, geht auch clientseitig. Browser-Plugins wie Greasemonkey (Firefox-Plugin) und Tampermonkey (Chrome-, Safari-, Opera- und Dolphin-Plugin) erlauben es, eigene Javascriptfunktionen regelbasiert auf Webseiten anzuwenden nachdem sie geladen und bevor sie angezeigt werden.

Dazu sucht man sich das zu manipulierende HTML-Element aus dem DOM-Tree der Webseite, in dem man die Developer-Tools der gängigen Browser nutzt. (In Chrome: Rechtsklick + ‚Inspect element‘). Idealerweise hat das Element eine ID, was die Adressierung einfach macht, z.b. so:

var menu = document.getElementById('ed_toolbar');

Dann kann man sich ein neues Element (z.B. ein Button) erzeugen und in den DOM-Tree an der entsprechenden Stelle einhängen:

newinput = document.createElement("input");
newinput.type = "button";
newinput.className = "ed_button button button-small";
newinput.value = "Fix Links";
newinput.addEventListener('click',replace_text,true);
menu.appendChild(newinput);

Neuer Button in der Menüleiste
Neuer Button in der Menüleiste

Damit haben wir einen Button, der eine Skriptfunktion auslösen kann in die Webseite eingebaut.
Das hilft, wenn es sich bei der Funktion nicht nur um eine dauerhafte Änderung handelt, die beim Laden der Seite ausgeführt werden kann.
Mit der selben Technik holen wir uns den bisherigen Text im Editor ab und formen ihn um.
Vielen Dank an mkzero für die Erarbeitung der Suchen&Ersetzen-Routine, die natürlich nicht ‚mal eben so einfach‘ ist sondern eine Menge Ausnahmen und Sonderbehandlungen abdecken muss.

function replace_text(){
    var i = 0, j = 0,
    lines = document.getElementById('content').innerHTML.split('\n'),
    newdoc = [],
    match = /(?:(http|ftp)(s|):\/\/)([a-z-.]+[a-z]+)/,
    link = /(href="|>)((http|ftp)(s|):\/\/)([a-z-.]+[a-z]+)/,
   //[...]
    for (i = 0; i <= lines.length; i+=1) {
        if (match.test(lines[i]) && !link.test(lines[i]) /*[..]*/ ) {
            if (match.test(lines[i-1]) && !link.test(lines[i-1])) {
                newdoc[j] ='' + lines[i] + '');
                j += 1;
    //[...]
        } else {
            newdoc[j] = lines[i];
            j += 1;
        }
    }
    
    document.getElementById('content').innerHTML = newdoc.join('\n');   
}

Das ganze ist natürlich eigentlich nur für Notizenschreiber nützlich. Wer trotzdem mal in den Code schauen möchte, findet das Skript bei GitHub und im Tampermonkey-Repository.

]]>
Kinder MP3-Player (Teil 2) https://bytespeicher.org/2015/kinder-mp3-player-teil-2/ https://bytespeicher.org/2015/kinder-mp3-player-teil-2/#comments Fri, 04 Dec 2015 21:45:33 +0000 https://bytespeicher.org/?p=922 Kinder MP3-Player (Teil 2) weiterlesen ]]> Die Entwicklung geht voran. Eigentlich wollte ich ein hübsches Video zur weiteren Arbeit veröffentlichen, aber schon beim Einlöten der Kontakte auf das Arduino-Shield versagte die Aufnahme. Also fürs Erste weiter in Textform.

Stecker LötenWie schon erwähnt habe ich die mitgelieferten Steckerleisten und zusätzlich einige von Steve geschnorrte Buchsenleisten (um weiter von oben Zugriff die GPIOs zu haben) auf das Arduino-Audio-Shield gelötet. Dabei auch gleich der erste Anfängerfehler: Lötet man das ‚frei Hand‘, wird es kaum exakt rechtwinklig zum Board und passt dann nicht in die Buchsen des Arduino. Nächstes mal stecke ich die Stiftleisten vorher schon in die Arduinobuchsen und löte dann.

Beim Löten übersehen wurden die 3 Löt-Jumper, die auf dem Shield die serielle Schnittstelle von den normalen GPIOs zu den neuen Extra-Pins des Leonardo umschaltet. Das hat das Ausprobieren noch ein paar Tage verzögert.

Die Lautsprecher wurden erst einmal ‚fliegend‘ an den Verstärkerausgang gekabelt. Als Stromversorgung diente nur der USB-Port des PCs, es stehen also nur 500mA und damit bei 5V keine 2x3Watt Ausgangsleistung zur Verfügung.

Einige Probe-MP3s wurden auf die SD-Karte gespielt. Laut Anleitung des Audio-Shields werden nur 8+3 Zeichen lange Dateinamen unterstützt. Ob dies eine SW- oder HW-Einschränkung ist, weiss ich noch nicht. Zur Probe wurden sowohl lange als auch kurze Dateinamen verwendet.

Grob wurde dem Tutorial des Herstellers gefolgt, um dem Gerät erste Töne zu entlocken. Die Arduino Entwicklungsumgebung macht es einem aber extrem leicht. Die nötige Bibliothek kann über den Bibliotheksmanager direkt gesucht (nach „VS1053“, dem Audio-Chipnamen, suchen), heruntergeladen und installiert werden. Mit dabei sind Example-Programme, die bei richtig benannten Dateien auf dem Stick schon direkt Musik spielen.

Noch habe ich keine Buttons angeschlossen, der Test wurde also über die serielle Konsole (in der Arduino Entwicklungsumgebung) gesteuert. Eine Besonderheit des Leonardo ist, dass er sich bei jedem Reset neu als USB-Gerät anmeldet. Bis die serielle Konsole wieder Kontakt hat, hat man unter Umständen schon die ersten Loggings verpasst. Eine eingestreute Warteschleife auf die verbundene Konsole hilft hier. Es empfiehlt sich ein Timeout, damit das Gerät trotzdem auch stand-alone ohne PC funktioniert.

Serial.begin(9600);
while (!Serial)
    if (millis() > 5000)
        break;

Mit langen Dateinamen kommt das System dahingehend zurecht, als dass es die Daten trotzdem liest und abspielt. Beim Listing werden sie aber verkürzt z.B. als LANG~001.mp3 dargestellt. Damit kann ich leben.

Unglücklicherweise sind sowohl die SD-Bibliothek als auch die Audioplayer-Bibliothek eher rudimentär und nicht gut aufeinander abgestimmt. Die eine liefert Filehandles, die andere erwartet Dateinamen. Um mir zusätzliche Abfragen und String-Handling in C (brrrrr!) zu ersparen, habe ich kurzerhand die Player-Bibliothek ein wenig erweitert, um auch Filehandles zu unterstützen.

Nächster Schritt ist die Erweiterung der Software über den Beispielstand hinaus und der Anschluss der Buttons und Regler.

]]>
https://bytespeicher.org/2015/kinder-mp3-player-teil-2/feed/ 1