index.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>👾 Control Panel (`・ω・´)</title>
  6. <script src="./jquery.min.js"></script>
  7. <link rel="stylesheet" href="./main.css"/>
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. </head>
  10. <body>
  11. <!-- Main contents of the webapp -->
  12. <div id="menu">
  13. <div class="container">
  14. <span class="logo">(`・ω・´)</span>
  15. </div>
  16. <button onclick="toggleSideMenu()" class="togglemenu button">
  17. <img class="btnicon" src="img/menu.svg">
  18. </button>
  19. </div>
  20. <div class="container">
  21. <div class="header">
  22. <img src="img/checkmark.svg" >
  23. <span>Useless Robot Connected<br>
  24. <small>IP Address: <span id="ipaddr">Unknown</span></small></span>
  25. </div>
  26. <div class="divider"></div>
  27. <h3>Quick Actions</h3>
  28. <p>Display Emoji</p>
  29. <select class="styled-dropdown">
  30. <option value="option1">Option 1</option>
  31. <option value="option2">Option 2</option>
  32. <option value="option3">Option 3</option>
  33. <option value="option4">Option 4</option>
  34. </select>
  35. <!-- Other Actions -->
  36. <div class="action-controls">
  37. <button id="coverbtn" class="button">
  38. <div class="header">
  39. <img src="img/open.svg" >
  40. <span>Open Cover<br>
  41. </div>
  42. </button>
  43. <button id="pusherbtn" class="button">
  44. <div class="header">
  45. <img src="img/push.svg" >
  46. <span>Push Switch<br>
  47. </div>
  48. </button>
  49. </div>
  50. <!-- Direction Controls -->
  51. <div class="direction-controls">
  52. <button id="upbtn" class="button">
  53. <img src="img/up.svg">
  54. </button>
  55. <button id="downbtn" class="button">
  56. <img src="img/down.svg">
  57. </button>
  58. <button id="leftbtn" class="button">
  59. <img src="img/left.svg">
  60. </button>
  61. <button id="rightbtn" class="button">
  62. <img src="img/right.svg">
  63. </button>
  64. </div>
  65. </div>
  66. </div>
  67. <!-- Side bar for other functions-->
  68. <div id="sidebarWrapper">
  69. <div id="blurcover"></div>
  70. <div id="sidebar">
  71. <div class="item">
  72. <b>Advance Functions</b>
  73. </div>
  74. <div class="divider"></div>
  75. <a class="clickable item" href="animator.html">
  76. <img src="img/animation.svg"> Animation Editor
  77. </a>
  78. <a class="clickable item" >
  79. <img src="img/action.svg"> Action Programmer
  80. </a>
  81. <a class="clickable item" href="sd.html">
  82. <img src="img/folder.svg"> SD Browser
  83. </a>
  84. <a class="clickable item">
  85. <img src="img/code.svg"> Developer Tools
  86. </a>
  87. <div class="item">
  88. <small>Cute Useless Robot v1.0</small>
  89. </div>
  90. </div>
  91. </div>
  92. <script>
  93. let coverOpen = false;
  94. /* Action APIS */
  95. function movePusher(angle=0){
  96. $.get(`/api/ctr/pusher?angle=${angle}`, function(data){
  97. });
  98. }
  99. function moveCover(open=true){
  100. $.get(`/api/ctr/cover?state=${open?"open":"close"}`, function(data){
  101. });
  102. }
  103. function moveDirection(direction, on=false){
  104. $.get(`/api/ctr/move?direction=${direction}&state=${on?"start":"stop"}`, function(data){
  105. })
  106. }
  107. /* Handle Buttons Operations */
  108. function openCoverStart(event) {
  109. event.preventDefault();
  110. console.log('Open Cover Start');
  111. }
  112. function openCoverEnd(event) {
  113. event.preventDefault();
  114. console.log('Open Cover End');
  115. if (!coverOpen){
  116. moveCover(true);
  117. coverOpen = true;
  118. }else{
  119. moveCover(false);
  120. coverOpen = false;
  121. }
  122. }
  123. function pushSwitchStart(event) {
  124. event.preventDefault();
  125. console.log('Push Switch Start');
  126. movePusher(140);
  127. }
  128. function pushSwitchEnd(event) {
  129. event.preventDefault();
  130. console.log('Push Switch End');
  131. // Add your code here
  132. movePusher(0);
  133. }
  134. // Direction Controls
  135. function upStart(event) {
  136. event.preventDefault();
  137. console.log('Up Start');
  138. moveDirection("up", true);
  139. }
  140. function upEnd(event) {
  141. event.preventDefault();
  142. console.log('Up End');
  143. moveDirection("up", false);
  144. }
  145. function downStart(event) {
  146. event.preventDefault();
  147. console.log('Down Start');
  148. moveDirection("down", true);
  149. }
  150. function downEnd(event) {
  151. event.preventDefault();
  152. console.log('Down End');
  153. moveDirection("down", false);
  154. }
  155. function leftStart(event) {
  156. event.preventDefault();
  157. console.log('Left Start');
  158. moveDirection("left", true);
  159. }
  160. function leftEnd(event) {
  161. event.preventDefault();
  162. console.log('Left End');
  163. moveDirection("left", false);
  164. }
  165. function rightStart(event) {
  166. event.preventDefault();
  167. console.log('Right Start');
  168. moveDirection("right", true);
  169. }
  170. function rightEnd(event) {
  171. event.preventDefault();
  172. console.log('Right End');
  173. moveDirection("right", false);
  174. }
  175. /* Button Press event handlers */
  176. // Bind events to Action Controls
  177. $('#coverbtn').on('mousedown touchstart', openCoverStart);
  178. $('#coverbtn').on('mouseup touchend', openCoverEnd);
  179. $('#pusherbtn').on('mousedown touchstart', pushSwitchStart);
  180. $('#pusherbtn').on('mouseup touchend', pushSwitchEnd);
  181. // Bind events to Direction Controls
  182. $('#upbtn').on('mousedown touchstart', upStart);
  183. $('#upbtn').on('mouseup touchend', upEnd);
  184. $('#downbtn').on('mousedown touchstart', downStart);
  185. $('#downbtn').on('mouseup touchend', downEnd);
  186. $('#leftbtn').on('mousedown touchstart', leftStart);
  187. $('#leftbtn').on('mouseup touchend', leftEnd);
  188. $('#rightbtn').on('mousedown touchstart', rightStart);
  189. $('#rightbtn').on('mouseup touchend', rightEnd);
  190. /* Side menu */
  191. function toggleSideMenu(){
  192. var left = $('#sidebar').offset().left; // Get the calculated left position
  193. if (left >= window.innerWidth || left == 0){
  194. //side bar is hidden
  195. $("#sidebarWrapper").fadeIn('fast');
  196. $("#sidebar").css({left:window.innerWidth + "px"}).animate({"left": (window.innerWidth - $('#sidebar').width())+ "px"}, "fast", function(){
  197. });
  198. }else{
  199. //side bar is shown
  200. $("#sidebar").css({left:left}).animate({"left": window.innerWidth + "px"}, "fast", function(){
  201. $("#sidebarWrapper").fadeOut('fast');
  202. });
  203. }
  204. }
  205. $("#blurcover").on("click", function(){
  206. toggleSideMenu();
  207. })
  208. //Get the device IP address
  209. $.get("/api/ipaddr", function(data){
  210. $("#ipaddr").text(data.ip);
  211. })
  212. </script>
  213. </body>
  214. </html>