-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (132 loc) · 7.76 KB
/
index.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mbot WebBluetooth</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="manifest" href="manifest.json">
<!-- Origin Trial Token, feature = Web Bluetooth, origin = https://jef.binomed.fr, expires = 2016-11-25 -->
<meta http-equiv="origin-trial" data-feature="Web Bluetooth" data-expires="2016-11-25" content="AnQ9MHHND0HiSd0gABjajnjHiVkrq6T8+Vauv04LCxVaC9L+NWTeaklXdJ3oriwX9qo+cgRpn54/1HF/5iXlKAIAAABUeyJvcmlnaW4iOiJodHRwczovL2plZi5iaW5vbWVkLmZyOjQ0MyIsImZlYXR1cmUiOiJXZWJCbHVldG9vdGgiLCJleHBpcnkiOjE0ODAwODc4ODR9">
<!--<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Phaser App">-->
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="icon" type="image/png" href="./assets/images/logo.png">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<img src="./assets/images/logo_128.png">
<span class="mdl-layout-title">MBot Application</span>
</div>
</header>
<div class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
<section id="noBluetooth">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">No Bluetooth</h2>
</div>
<div class="mdl-card__supporting-text">
Web Bluetooth isn't currently enabled. Please check that your browser and device support it and have any necessary development
flags set.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" target="_blank" href="https://github.com/WebBluetoothCG/web-bluetooth#web-bluetooth">
More info
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">bluetooth_disabled</i>
</button>
</div>
</div>
</section>
<section id="stepConnect" style="display:none;">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Connect to mBot</h2>
</div>
<div class="mdl-card__supporting-text">
You have to be connect to the mBot to play with it
</div>
<div class="mdl-card__actions mdl-card--border">
<button id="connectBtn" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Connect <i class="material-icons">bluetooth</i>
</button>
</div>
</div>
<!-- Raised disabled button-->
</section>
<section id="stepControl" style="display:none;">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a href="#control-panel" class="mdl-tabs__tab is-active">Controls</a>
<a href="#color-panel" class="mdl-tabs__tab">Color</a>
<a href="#sound-panel" class="mdl-tabs__tab">Sound</a>
</div>
<div class="mdl-tabs__panel is-active" id="control-panel">
<div class="panel-flex">
<h2 class="mdl-card__title-text">Move your mbot</h2>
<div class="part-button">
<div class="row">
<div class="flex20"></div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect flex60" id="btnUp">
Up
</button>
<div class="flex20"></div>
</div>
<div class="row">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect flex40" id="btnLeft">
Left
</button>
<div class="flex20"></div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect flex40" id="btnRight">
Right
</button>
</div>
<div class="row">
<div class="flex20"></div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect flex60" id="btnDown">
Down
</button>
<div class="flex20"></div>
</div>
</div>
</div>
</div>
<div class="mdl-tabs__panel" id="color-panel">
<div class="panel-flex">
<h2 class="mdl-card__title-text">Choose the color to apply</h2>
<canvas mbot-colorpicker="bleCtrl.changeColor(red,blue,green)"></canvas>
</div>
</div>
<div class="mdl-tabs__panel" id="sound-panel">
<div class="panel-flex">
<h2 class="mdl-card__title-text">Press the button to change the sound</h2>
<div class="row">
<div class="flex20"></div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect flex60" id="btnBuzz">
Buzz
</button>
<div class="flex20"></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<script src="./bundle.js"></script>
</body>
</html>