User manual

64 4 | TCP-Server
4
Auch wenn sich das Desi
g
n der Webseite nicht sehr von dem der voran
g
e
-
g
an
g
enen unterscheidet,
g
ibt es dennoch ein paar Elemente, die ich kurz
g
enauer beschreiben möchte. Zunächst befi ndet sich eine
Ä
nderun
g
im
Header des HTML-Dokumentes, und zwar die fol
g
ende Zeile betreffend
:
<link rel="icon" href="data:;base64,iVBORw0KG
g
o=">
Diese Zeile ist dazu da
,
dass der Browser nach dem Laden der Webseite
n
icht versucht, das so
g
enannte Favicon zu laden. In der Re
g
el hat eine
Webseite nämlich noch ein besonderes Symbol, das sich von anderen
W
ebse
it
e
n
u
nt
e
r
sc
h
e
i
de
t
u
n
d
d
i
e
W
ebse
it
e
in
e
in
e
r Br
o
w
se
rl
e
i
s
t
e
mit
m
ehreren Tabs eindeuti
g
identifi ziert. Damit der Browser dieses Zei
-
chen laden kann
,
schickt er nach dem Aufrufen der Seite eine zweite
Request-Anfor
d
erun
g
l
os un
d
fra
g
t nac
h
d
iesem Favicon. In
d
en ersten
Versuchen mit dem TCP-Server ist Ihnen diese zusätzliche Request-An
-
f
ra
g
e eventuell auf
g
efallen. Damit diese zweiten Anfra
g
en unterbunden
u
nd das Board nicht unnöti
g
belastet wird,
g
ibt die obi
g
e Codezeile dem
Browser zu verstehen, dass er keinen zweiten Request senden soll. Ich
empfehle Ihnen, diese Zeile für Ihre ei
g
enen HTML-Seiten zu überneh
-
men.
Die zweite Besonderheit in diesem Dokument ist das schon erwähnte
Color-Picker-Element. Es ersetzt sozusa
g
en die Buttons in dem voran
g
e
-
g
an
g
enen Beispiel. Es handelt sich um ein relativ neues HTML5-Element
.
In der voran
g
e
g
an
g
enen Webseite haben wir einfach Buttons vom Typ
submit
gewählt, sodass beim Drücken die Formularwerte direkt über-
t
tra
g
en wurden. Dies ist beim Ein
g
abeelement vom Typ
color
leider nicht
r
m
ö
g
lich. Eine Mö
g
lichkeit, das Problem zu lösen, wäre, einen Button vom
T
yp
submit
zu erstellen, der dann nach dem Einstellen der Farbe zusätz-
t
l
ich
g
edrückt werden müsste. Dies wird in einem späteren Versuch noch
demonstriert. Hier wurde ein kleiner JavaScript-Code ein
g
efü
g
t (es han
-
delt sich um den Teil onchan
g
e="this.form.submit()"), der dafür sor
g
t,
dass das Formular bei einer
Ä
nderun
g
sofort übertra
g
en wird.
10215-5 Lernpaket Internet of Things_02.indd 6410215-5 Lernpaket Internet of Things_02.indd 64 19.04.2016 12:17:2519.04.2016 12:17:25