animator.html 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>👾 Useless Robot Animator</title>
  7. <script src="./jquery.min.js"></script>
  8. <style>
  9. .circle {
  10. width: 20px;
  11. height: 20px;
  12. background-color: #525050;
  13. border-radius: 50%;
  14. display: inline-block;
  15. margin: 2px;
  16. cursor: pointer;
  17. }
  18. .circle.centerleft{
  19. border-right: 1px solid white;
  20. }
  21. .circle.centerright{
  22. border-left: 1px solid white;
  23. }
  24. .circle.active{
  25. background-color: #f55142;
  26. }
  27. #grid-container {
  28. display: flex;
  29. position: relative;
  30. flex-wrap: wrap;
  31. width: calc(32 * (20px + 2px * 2));
  32. }
  33. #dotmatrix{
  34. display: flex;
  35. flex-wrap: wrap;
  36. }
  37. html, body {
  38. height: 100%;
  39. margin: 0;
  40. display: flex;
  41. align-items: center;
  42. justify-content: center;
  43. background-color: #242424;
  44. font-family: Verdana, sans-serif;
  45. color: white;
  46. }
  47. .matrixModule{
  48. position: absolute;
  49. border: 1px solid #a3a3a3;
  50. width: calc(24px * 8);
  51. height: calc(24px * 8);
  52. pointer-events: none;
  53. }
  54. .matrixModule.one {
  55. top: 0;
  56. left: 0;
  57. }
  58. .matrixModule.two {
  59. top: 0;
  60. left: 192px;
  61. }
  62. .matrixModule.three {
  63. top: 0;
  64. left: 384px;
  65. }
  66. .matrixModule.four {
  67. top: 0;
  68. left: 576px;
  69. }
  70. .matrixModule.five {
  71. top: 192px;
  72. left: 0px;
  73. }
  74. .matrixModule.six {
  75. top: 192px;
  76. left: 192px;
  77. }
  78. .matrixModule.seven {
  79. top: 192px;
  80. left: 384px;
  81. }
  82. .matrixModule.eight {
  83. top: 192px;
  84. left: 576px;
  85. }
  86. button{
  87. background-color: white;
  88. color: #3b3b3b;
  89. border-radius: 0em;
  90. box-shadow: none;
  91. padding-top: 0.4em;
  92. padding-bottom: 0.4em;
  93. padding-left: 1em;
  94. padding-right: 1em;
  95. cursor: pointer;
  96. margin: 0.4em;
  97. margin-top: 0.6em;
  98. }
  99. .rotate-message {
  100. font-family: Arial, Helvetica, sans-serif;
  101. display: none;
  102. position: fixed;
  103. top: 0;
  104. left: 0;
  105. width: calc(100% - 1em);
  106. height: 100%;
  107. padding-left: 0.5em;
  108. background-color: #242424;
  109. color: white;
  110. display: flex;
  111. justify-content: center;
  112. align-items: center;
  113. font-size: 1.3em;
  114. text-align: center;
  115. z-index: 9999;
  116. }
  117. </style>
  118. </head>
  119. <body>
  120. <div id="grid-container">
  121. <div id="layout">
  122. <div class="matrixModule one"></div>
  123. <div class="matrixModule two"></div>
  124. <div class="matrixModule three"></div>
  125. <div class="matrixModule four"></div>
  126. <div class="matrixModule five"></div>
  127. <div class="matrixModule six"></div>
  128. <div class="matrixModule seven"></div>
  129. <div class="matrixModule eight"></div>
  130. </div>
  131. <div id="dotmatrix"></div>
  132. <br>
  133. <div style="width: 100%; padding: 1em; ">
  134. <div style="float: right;">
  135. <button onclick="clearScreen();">Clear</button>
  136. <button onclick="loadDefault();">Load Default</button>
  137. <button onclick="downloadBinary();">Export Binary</button>
  138. <button onclick="openFilePicker()">Import Binary</button>
  139. <input type="file" id="fileInput" style="display: none;" accept=".bin" onchange="handleFile(event)">
  140. </div>
  141. <div style="padding-top: 0.8em;">
  142. 👾 Cute Useless Robot Animator
  143. </div>
  144. </div>
  145. </div>
  146. <div id="requireLandscapeMode" class="rotate-message">
  147. <div>
  148. <p style="font-size: 2em;">(´・ω・`)</p>
  149. <p>Please rotate your device to landscape mode.</p>
  150. </div>
  151. </div>
  152. <script>
  153. let defaultTemplate = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,0,0,0,1,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,1,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,1,1,1,1,0,0,0,1,0,0,1,0,0,1,0,0,0,0,1,1,1,1,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
  154. function generateCircleGrid(containerId) {
  155. const container = document.getElementById(containerId);
  156. if (!container) {
  157. console.error(`No element found with id "${containerId}"`);
  158. return;
  159. }
  160. // Clear the container if it already has content
  161. container.innerHTML = '';
  162. // Create a grid of circles
  163. const rows = 16;
  164. const cols = 32;
  165. for (let i = 0; i < rows; i++) {
  166. for (let j = 0; j < cols; j++) {
  167. $(container).append('<div class="circle" onClick="toggleThis(this);"></div>');
  168. }
  169. }
  170. }
  171. function getFrameAsIntArray(){
  172. let results = [];
  173. $(".circle").each(function(){
  174. let isActive = $(this).hasClass("active");
  175. if (isActive){
  176. results.push(1);
  177. }else{
  178. results.push(0);
  179. }
  180. });
  181. return results;
  182. }
  183. function drawFrameFromIntArray(frameArray){
  184. let counter = 0;
  185. $(".circle").each(function(){
  186. if (frameArray[counter] != undefined){
  187. let isActive = frameArray[counter] == 1;
  188. if (isActive){
  189. $(this).addClass('active');
  190. }else{
  191. $(this).removeClass('active');
  192. }
  193. }
  194. counter++;
  195. });
  196. }
  197. function loadDefault(){
  198. drawFrameFromIntArray(defaultTemplate);
  199. }
  200. function downloadBinary(){
  201. const bitArray = getFrameAsIntArray();
  202. const byteArray = [];
  203. for (let i = 0; i < bitArray.length; i += 8) {
  204. let byte = 0;
  205. for (let j = 0; j < 8; j++) {
  206. if (bitArray[i + j]) {
  207. byte |= 1 << (7 - j);
  208. }
  209. }
  210. byteArray.push(byte);
  211. }
  212. const blob = new Blob([new Uint8Array(byteArray)], { type: 'application/octet-stream' });
  213. const url = URL.createObjectURL(blob);
  214. const a = document.createElement('a');
  215. a.href = url;
  216. a.download = 'frame.bin';
  217. document.body.appendChild(a);
  218. a.click();
  219. document.body.removeChild(a);
  220. URL.revokeObjectURL(url);
  221. }
  222. function toggleThis(led){
  223. if (!$(led).hasClass('active')){
  224. $(led).addClass('active');
  225. }else{
  226. $(led).removeClass('active');
  227. }
  228. }
  229. // Call the function to generate the grid
  230. generateCircleGrid('dotmatrix');
  231. function clearScreen(){
  232. $(".circle.active").removeClass("active");
  233. }
  234. //Import functions
  235. function openFilePicker() {
  236. document.getElementById('fileInput').click();
  237. }
  238. function handleFile(event) {
  239. const file = event.target.files[0];
  240. if (file) {
  241. const reader = new FileReader();
  242. reader.onload = function(e) {
  243. const arrayBuffer = e.target.result;
  244. const byteArray = new Uint8Array(arrayBuffer);
  245. const bitArray = [];
  246. for (let byte of byteArray) {
  247. for (let i = 7; i >= 0; i--) {
  248. bitArray.push((byte >> i) & 1);
  249. }
  250. }
  251. renderBitArray(bitArray);
  252. };
  253. reader.readAsArrayBuffer(file);
  254. }
  255. }
  256. function renderBitArray(bitArray) {
  257. drawFrameFromIntArray(bitArray);
  258. }
  259. /* RWD and mobile interface */
  260. let isMobile = false;
  261. if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  262. isMobile = true;
  263. }
  264. function calculateScale(windowWidth, windowHeight, minWidth=768, minHeight=460) {
  265. // Calculate the scale ratios for both width and height
  266. const widthRatio = windowWidth / minWidth;
  267. const heightRatio = windowHeight / minHeight;
  268. // Choose the smaller ratio to ensure the entire div fits within the screen
  269. return Math.min(widthRatio, heightRatio);
  270. }
  271. function updateRWD(){
  272. if (isMobile){
  273. if (window.innerHeight > window.innerWidth){
  274. $("#grid-container").hide();
  275. $("#requireLandscapeMode").show();
  276. }else{
  277. $("#grid-container").show();
  278. $("#requireLandscapeMode").hide();
  279. }
  280. //Scale down the grids to size
  281. //768 * 460
  282. const scale = calculateScale(window.innerWidth, window.innerHeight - 24);
  283. $("#grid-container").css("scale", scale);
  284. $("#grid-container").css("margin-top", "24px");
  285. }
  286. }
  287. if (isMobile){
  288. updateRWD();
  289. }else{
  290. $("#requireLandscapeMode").hide();
  291. }
  292. $(window).on("resize", function(){
  293. updateRWD();
  294. })
  295. </script>
  296. </body>
  297. </html>