-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathrasroboplus.html
123 lines (119 loc) · 4.65 KB
/
rasroboplus.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<html>
<head>
<meta charset="UTF-8">
<title>RasRoboコントローラー</title>
</head>
<html>
<head>
<meta charset="UTF-8">
<title>RasRoboコントローラー</title>
</head>
<body>
<p>ボタンを押すとRasRoboが動くよ！</p>
<button id="left_forward" type="button" onClick="left_forward()">左前</button>
<button id="forward" type="button" onClick="forward()">前進</button>
<button id="right_forward" type="button" onClick="right_forward()">右前</button>
<p>
<button type="button">*</button>
<button id="stop" type="button" onClick="stop()">停止</button>
<button type="button">*</button>
</p>
<button id="left_back" type="button" onClick="left_back() ">左後</button>
<button id="back" type="button" onClick="back()">後進</button>
<button id="right_back" type="button" onClick="right_back() ">右後</button>
<div id="speak">
おしゃべり<input type="text" id="word"/>
</div>
<p>RasRoboの目</p>
<img src="http://rasrobo.local:8080/?action=stream" />
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
var webiopi = webiopi();
webiopi.ready(function() {
webiopi.refreshGPIO(true);
webiopi.setFunction(8, "OUT");
webiopi.setFunction(7, "OUT");
webiopi.setFunction(23, "OUT");
webiopi.setFunction(24, "OUT");
webiopi.callMacro("jtalk",'どーもどーもラズロボです');
var sendButton = webiopi.createButton("sendButton", "話す", function() {
var word = $("#word").val();
webiopi.callMacro("jtalk", word);
});
$("#speak").append(sendButton);
});
function forward() {
webiopi.digitalWrite(8, 1);
webiopi.digitalWrite(7, 0);
webiopi.digitalWrite(23, 1);
webiopi.digitalWrite(24, 0);
button_color("#forward");
}
function back() {
webiopi.digitalWrite(8, 0);
webiopi.digitalWrite(7, 1);
webiopi.digitalWrite(23, 0);
webiopi.digitalWrite(24, 1);
button_color("#back");
}
function stop() {
webiopi.digitalWrite(8, 0);
webiopi.digitalWrite(7, 0);
webiopi.digitalWrite(23, 0);
webiopi.digitalWrite(24, 0);
button_color("#stop");
}
function right_forward() {
webiopi.digitalWrite(8, 1);
webiopi.digitalWrite(7, 0);
webiopi.digitalWrite(23, 0);
webiopi.digitalWrite(24, 0);
button_color("#right_forward");
}
function left_forward() {
webiopi.digitalWrite(8, 0);
webiopi.digitalWrite(7, 0);
webiopi.digitalWrite(23, 1);
webiopi.digitalWrite(24, 0);
button_color("#left_forward");
}
function right_back() {
webiopi.digitalWrite(8, 0);
webiopi.digitalWrite(7, 1);
webiopi.digitalWrite(23, 0);
webiopi.digitalWrite(24, 0);
button_color("#right_back");
}
function left_back() {
webiopi.digitalWrite(8, 0);
webiopi.digitalWrite(7, 0);
webiopi.digitalWrite(23, 0);
webiopi.digitalWrite(24, 1);
button_color("#left_back");
}
var last_id = "";
function button_color(id) {
$(last_id).css('background', "#808080");
$(id).css('background', "#CC0033");
last_id = id;
}
</script>
<style type="text/css">
button {
display: inline;
margin: 5px 5px 5px 5px;
width: 80px;
height: 45px;
border-radius: 10px;
font-size: 12pt;
font-weight: bold;
color: white;
background-color:#808080
}
body {
background-color:#C0C0C0
}
</style>
</body>
</html>