1 of 81

Creating inter-�active hardware

prototypes �without code

Workshop

Olivier Brückner�blokdots

@blokdots

blokdots.com

2 of 81

Hello!

Olivier Brückner

@olivierbrcknr

olivierbrueckner.de

hello@olivierbrueckner.de

3 of 81

Hello!

👋

Kurze Vorstellungsrunde:

Wie heißt du?

Woran möchtest du dieses Semester arbeiten?

4 of 81

Warm up

Blink, blink, blink.

5 of 81

Vorbereitung

Download blokdots

Bitte lade dir blokdots herunter

link.blokdots.com / hm

blokdots.com

6 of 81

Vorbereitung

link.blokdots.com / hm

Google Docs File

In diesem Dokument findest du alles was du für die Workshops brauchst

7 of 81

💻

—— DEMO ——

8 of 81

Warm up

Blink, blink, blink.

🎉

9 of 81

Was haben wir heute vor? 🔧

10 of 81

Zeitplan

4. April

11. April

18. April

Hallo!

Mit blokdots arbeiten

Eigene Projekte

Show + Tell

Projektarbeit

"

"

Show + Tell

17:00

18:00

19:00

20:00

Connected Products

ProtoPie × blokdots

Eigene Projekte

Show + Tell

HEUTE

11 of 81

Wie kam es zu blokdots? 📖

12 of 81

Foto: Pascal Dreier

13 of 81

Foto: Pascal Dreier

14 of 81

15 of 81

16 of 81

17 of 81

18 of 81

19 of 81

20 of 81

21 of 81

22 of 81

Was ist das Konzept von blokdots?

23 of 81

Prototyping Connected Products

Was haben wir heute vor?

24 of 81

Software

Prototyping Connected Products

Prototyping + Sketching

Hardware

Was haben wir heute vor?

25 of 81

Software

Prototyping Connected Products

Prototyping + Sketching

Hardware

Was haben wir heute vor?

26 of 81

Kopf

(neues) Wissen

Skizze/Sketch

Darstellung

Erstellen

Sehen dass…

Lesen

Sehen als…

Buxton, Bill (2007). Sketching User Experiences: Getting the Design Right and the Right Design. S. 114

Prototyping + Sketching

27 of 81

Prototyping + Sketching

Frage

Hypothese

Prototyp

Antwort

28 of 81

Prototyping + Sketching

29 of 81

Prototyping + Sketching

30 of 81

Prototyping + Sketching

schnell

billig

ersetzbar

hilfreich

einfach

Gute Skizzen sind

Buxton, Bill (2007). Sketching User Experiences: Getting the Design Right and the Right Design. S. 111

31 of 81

Software

Prototyping Connected Products

Prototyping + Sketching

Hardware

What is this Workshop about?

32 of 81

The Arduino Platform

https://a.pololu-files.com/picture/0J7808.1200.jpg?8a7bee07ca7ffbb11e11f74e99f5c3a9

33 of 81

Die Arduino Platform

3.3V/5V

GND

Vin

Analog In (A0-A5)

Digital (0-13)

RX/TX (Serial)

Digital pwm~ (3,5,6,9,10,11)

D13

USB

DC in

34 of 81

Typisches Arduino mit Breadboard

2

http://johnny-five.io/api/button/

35 of 81

Typisches Arduino mit Breadboard

36 of 81

Grove System: Shield und Komponenten

37 of 81

Grove System: Starter Kit

Arduino Mikroprozessor�Board (Seeeduino Lotus)

Grove Shield

10 Grove Komponenten

38 of 81

Grove System

39 of 81

Types of Electronic Components

Digital Pins

Analog Pins

I2C Pins

0

1023

0

1

Digital Pins (pwm)

0

1

0

1

1 0 1 0 0 0 1 1

40 of 81

Arduino Programmieren

41 of 81

Arduino Programmieren

42 of 81

Software

Prototyping Connected Products

Prototyping + Sketching

Hardware

Was haben wir heute vor?

43 of 81

Connected Products

44 of 81

Connected Products

45 of 81

Weniger reden, mehr machen! 💻

46 of 81

Vorbereitung

link.blokdots.com / hm

Google Docs File

In diesem Dokument findest du alles was du für die Workshops brauchst

47 of 81

Beispiele

Zeituhr

Timer

(control)

Button

Buzzer

Dimmbares Licht

Potentiometer

LED

Mapping

Control Components

LED Warnleuchte

IFTTT

Accelerometer

LED

Buzzer

48 of 81

💻

—— DEMO ——

49 of 81

Setze deine🎚 Idee um💡

50 of 81

✂️

Scheren

🖍

Stifte

📦

Pappe

Build your own idea

Lass dir keine Grenzen setzen durch die Komponenten!

Benutze alles um dich herum, um deine Skizze zu bauen!

🖇

Büroklammern

Deine geheime Zutat

51 of 81

52 of 81

53 of 81

💡

Eine (1) Idee �pro Post-It

🖊

Sharpie oder Edding

🔍

Groß und leserlich schreiben

Build your own idea

Brainstorming Post-It Guidelines:

Damit wir alle Ideen sehen können ;)

54 of 81

📽

—— SHOWTIME ——

55 of 81

Zusammen- fassung 🧾

56 of 81

Zusammenfassung

… etwas über Hardware gelernt

… gelernt wie �man blokdots benutzt

… und unsere ersten eigenen Prototypen erstellt!

Wir haben …

57 of 81

Ausblick

… verbinden blokdots mit ProtoPie

… bauen connected Products

Wir …

58 of 81

Vorbereitung

Bitte lade dir ProtoPie + ProtoPie Connect herunter

Damit wir nächste Woche direkt anfangen können :)

link.blokdots.com / hm

59 of 81

TAG 2

60 of 81

Zeitplan

4. April

11. April

18. April

Hallo!

Mit blokdots arbeiten

Eigene Projekte

Show + Tell

Projektarbeit

"

"

Show + Tell

17:00

18:00

19:00

20:00

Connected Products

ProtoPie × blokdots

Eigene Projekte

Show + Tell

HEUTE

61 of 81

Was ist ProtoPie? 🍰

62 of 81

63 of 81

ProtoPie × blokdots

64 of 81

ProtoPie × blokdots

🎛

📱

65 of 81

66 of 81

ProtoPie Principle

Trigger

Auslöser

Object

Element

Response

Reaktion

67 of 81

ProtoPie Principle

68 of 81

ProtoPie Principle

Trigger

Auslöser

Response

Reaktion

69 of 81

ProtoPie Principle

70 of 81

ProtoPie × blokdots

Download ProtoPie

Bitte lade dir ProtoPie und ProtoPie Connect herunter

protopie.io/download

protopie.io/download#connect-download

link.blokdots.com / hm

71 of 81

ProtoPie × blokdots

Bei ProtoPie Enterprise einloggen

Damit es funktioniert, gib bitte diese Daten ein

Klicke unten auf �“ProtoPie Enterprise

Gib hier diese URL ein:

gcs-ce.protopie.cloud

Email Address�<deine email adresse>

link.blokdots.com / hm

72 of 81

ProtoPie × blokdots

Download ProtoPie Player

Bitte lade dir ProtoPie Player auf dein Smartphone

iOS

Android

link.blokdots.com / hm

73 of 81

ProtoPie × blokdots

Unser lokales WLAN

Wir brauchen das für uneingeschränkte Kommunikation, �zuhause sollte das ohne gehen

SSID

Passwort

megolla

ludens_5_Ohio

link.blokdots.com / hm

74 of 81

Examples

Dreh-Potentiometer Sensor Steuerung

Potentiometer

LED

ProtoPie Connect�(virtual)

75 of 81

💻

—— DEMO ——

76 of 81

Setze deine🎚 Idee um💡

77 of 81

📽

—— SHOWTIME ——

78 of 81

Danke und bis bald! 👋

Wir würden uns über Feedback von euch freuen!

https://bit.ly/pcp-feedback

79 of 81

80 of 81

81 of 81

The Hardware — Grove