1+ <!DOCTYPE html>
2+ <html>
3+ <head>
4+ <title>Arduino Wrapper</title>
5+
6+ <!-- style from https://codepen.io/chriscoyier/pen/DmnlJ -->
7+ <style type="text/css">
8+ * {
9+ -webkit-box-sizing: border-box;
10+ -moz-box-sizing: border-box;
11+ box-sizing: border-box;
12+ }
13+
14+ body {
15+ padding: 20px 15%;
16+ }
17+ form header {
18+ margin: 0 0 20px 0;
19+ }
20+ form header div {
21+ font-size: 90%;
22+ color: #999;
23+ }
24+ form header h2 {
25+ margin: 0 0 5px 0;
26+ }
27+ form > div {
28+ clear: both;
29+ overflow: hidden;
30+ padding: 1px;
31+ margin: 0 0 10px 0;
32+ }
33+ form > div > fieldset > div > div {
34+ margin: 0 0 5px 0;
35+ }
36+ form > div > label,
37+ legend {
38+ width: 25%;
39+ float: left;
40+ padding-right: 10px;
41+ }
42+ form > div > div,
43+ form > div > fieldset > div {
44+ width: 75%;
45+ float: right;
46+ }
47+ form > div > fieldset label {
48+ font-size: 90%;
49+ }
50+ fieldset {
51+ border: 0;
52+ padding: 0;
53+ }
54+
55+ input[type=text],
56+ input[type=email],
57+ input[type=url],
58+ input[type=password],
59+ textarea {
60+ width: 100%;
61+ border-top: 1px solid #ccc;
62+ border-left: 1px solid #ccc;
63+ border-right: 1px solid #eee;
64+ border-bottom: 1px solid #eee;
65+ }
66+ input[type=text],
67+ input[type=email],
68+ input[type=url],
69+ input[type=password] {
70+ width: 50%;
71+ }
72+ input[type=text]:focus,
73+ input[type=email]:focus,
74+ input[type=url]:focus,
75+ input[type=password]:focus,
76+ textarea:focus {
77+ outline: 0;
78+ border-color: #4697e4;
79+ }
80+
81+ @media (max-width: 600px) {
82+ form > div {
83+ margin: 0 0 15px 0;
84+ }
85+ form > div > label,
86+ legend {
87+ width: 100%;
88+ float: none;
89+ margin: 0 0 5px 0;
90+ }
91+ form > div > div,
92+ form > div > fieldset > div {
93+ width: 100%;
94+ float: none;
95+ }
96+ input[type=text],
97+ input[type=email],
98+ input[type=url],
99+ input[type=password],
100+ textarea,
101+ select {
102+ width: 100%;
103+ }
104+ }
105+ @media (min-width: 1200px) {
106+ form > div > label,
107+ legend {
108+ text-align: right;
109+ }
110+ }
111+ </style>
112+ </head>
113+ <body>
114+ <?php
115+
116+ if ($ _SERVER ['REQUEST_METHOD ' ] == 'POST ' ) {
117+ require '../vendor/autoload.php ' ;
118+
119+ $ arduino = new \Arduino \Wrapper ();
120+
121+ $ writer = new \Arduino \Writer ($ arduino );
122+ $ writer ->out ($ _POST ['device ' ], $ _POST ['data ' ]);
123+ }
124+ ?>
125+ <form method="post">
126+ <header>
127+ <h2>Arduino Wrapper</h2>
128+ <div>Send data to Arduino using PHP!</div>
129+ </header>
130+
131+ <div>
132+ <label class="desc" id="title106" for="Field106">
133+ Select the device
134+ </label>
135+ <div>
136+ <select id="device" name="device" class="field select medium">
137+ <option value="/dev/ttyACM0">ttyACM0</option>
138+ <option value="/dev/ttyUSB0">ttyUSB0</option>
139+ </select>
140+ </div>
141+ </div>
142+ <div>
143+ <label class="desc" id="data" for="data">
144+ Message
145+ </label>
146+
147+ <div>
148+ <textarea id="data" name="data" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
149+ </div>
150+ <div>
151+ <button type="submit">Send data !</button>
152+ </div>
153+ </div>
154+ </form>
155+ </body>
156+ </html>
0 commit comments