KreKo Example Code

---

HTML, CSS, TypeScript Basics

This is a set of basic code examples using HTML, CSS and TypeScript:

• Hello World (with HTML, CSS and TypeScript)
• HTML Soap Racer, simple interactive game purely based on HTML elements
• Canvas Drawing, allows for drawing with different colors using an HTML canvas (2D)

---

Mobile Device Sensors and Actuators

Below is a set of examples using mobile and media APIs:

• Device Motion and Device Orientation{:target="_blank"}
• Geolocation{:target="_blank"}
• Media Devices{:target="_blank"}
• Web Audio{:target="_blank"}

Device Motion and Orientation

• Raw Sensor Values, displays sensor values obtained through the Device Motion/Orientation API
• Shake'n'Flash{:target="_blank"}, visualises acceleration of the Device Motion API
• G-Buzz{:target="_blank"}, sonifies accelerationIncludingGravity of the Device Motion API
• Bouncing Ball{:target="_blank"}, uses accelerationIncludingGravity to drive a virtual ball

GPS Geolocation

• Furtwangen Geoloc, displays the device's location in respect to the Digital Media Facutly and the soucre of the danube using the Geolocation API

Audio/Video Input/Output

• Photo Booth, captures a still image from a video stream using the Media Devices API and HTML canvas
• Sample Pads, simple drum pads using the Web Audio API
• Dancing Smiley, smiley reacting on audio input using the Media Devices and Web Audio APIs
• Mad Mic, applying complex Web Audio effect to mic input (best with head phones)

---

Client-Server Communication

These examples show how to communicate data between clients and servers:

• HTTP Message Board, a simple message board using HTTP requests
• Counter Pads, counts touches from all connected clients using Web Socket connections
• Simple Chat, very simple chat using Web Socket connections
• Photo Collector, collects photos via Web Socket connections
• Photo Collector Display, collects photos via Web Socket connections