API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 4th, 2019
228
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.60 KB | None | 0 0
raw download clone embed print report
  1. $(document).ready(function(){
  2.  
  3. var roomid = getParameterFromURL("roomid");
  4. var role = window.langu_role;//getParameterByName('role');
  5. if(role ==undefined || role == "" || role == null){
  6. role = "student"
  7. }
  8.  
  9. // var socket = new WebSocket("ws://localhost:4500/websocket/" + roomid);
  10. // var socket = new WebSocket("wss://electrocatstudios.com/websocket");
  11. //var socket = new WebSocket("ws://localhost:4600/websocket");
  12.  
  13. // socket.onopen = function () {
  14. // console.log("Status: Connected");
  15. // send();
  16. // };
  17.  
  18. // socket.onclose = function(){
  19. // console.log("Socket closing");
  20. // }
  21. // if(window.ws.socket === undefined){
  22. // console.log("the socket does not exist!");
  23. // }else{
  24. // console.log("Huzzah our websocket does exist");
  25. // }
  26.  
  27. var socket = null;
  28. if(window.ws != undefined && window.ws.socket != undefined){
  29. socket = window.ws.socket;
  30. }else{
  31. console.log("We don't have a websocket - are we debugging?");
  32. }
  33. // var socket = window.ws.socket;
  34.  
  35. function get_asset_from_json(ass){
  36. // Read in details of asset and return the relevant asset type
  37. if(ass.type == "ripple" || ass.type == "imageitem"){
  38. // We don't care about ripples or imageitems here
  39. return;
  40. }else if(ass.type=="line"){
  41. // console.log("Found a line")
  42. var ln = new Line();
  43. ln.points = ass.points;
  44. ln.linesize = ass.linesize;
  45. ln.color = ass.color;
  46. return ln;
  47. }else if(ass.type=="templine"){
  48. var ln = new TempLine();
  49. ln.points = ass.points;
  50. ln.linesize = ass.linesize;
  51. ln.color = ass.color;
  52. return ln;
  53. }else if(ass.type=="imageitem"){
  54. var ii = new ImageItem(null,ass.loc.x, ass.loc.y,ass.file_data);
  55. ii.id = ass.id; // Override the one generated in the ctor
  56. return ii;
  57. }else if(ass.type=="textbox"){
  58. // console.log("Making a textbox");
  59. var tb = new TextBox(ass.loc.x, ass.loc.y, ass.text);
  60. tb.guid = ass.id;
  61. // console.log(ass);
  62. tb.size.x = ass.loc.w;
  63. tb.size.y = ass.loc.h;
  64. tb.setup();
  65. return tb;
  66. }else if(ass.type == "videoitem"){
  67. // console.log("Making a video item")
  68. var vi = new VideoItem(ass.loc.x, ass.loc.y);
  69. vi.size.x = ass.size.x;
  70. vi.size.y = ass.size.y;
  71. ass.sent = true;
  72. vi.url = ass.url;
  73. vi.div_id = ass.id;
  74. return vi;
  75. }else{
  76. console.log("Unfulfilled asset type: " + ass.type);
  77. console.log(ass);
  78. }
  79. }
  80.  
  81. if(socket != null){
  82. socket.on('asset update', function (e) {
  83. // var dstr = e.data.replace(/'/g, '"');
  84. if(typeof e !== 'object'){
  85. var data = JSON.parse(e);
  86. }else{
  87. var data = e;
  88. }
  89. // console.log(data);
  90.  
  91. if(window.othercursor == null){
  92. // Flip the colours as we are the other role
  93. if(role == "teacher"){
  94. window.othercursor = new Cursor('#0000ff', false);
  95. }else{
  96. // We are not the main cursor so not owned by the teacher
  97. window.othercursor = new Cursor('#ff0000', false);
  98. }
  99. }
  100. var assets = [];
  101.  
  102. window.othercursor.loc.x = data.cursor.x;
  103. window.othercursor.loc.y = data.cursor.y;
  104.  
  105. if(data.cursor.screen_width !== undefined && data.cursor.screen_width !== 0){
  106. window.othercursor.screen.width = data.cursor.screen_width;
  107. }
  108. if(data.cursor.screen_height !== undefined && data.cursor.screen_height !== 0){
  109. window.othercursor.screen.height = data.cursor.screen_height;
  110. }
  111. if(data.cursor.offset !== undefined){
  112. window.othercursor.offset = data.cursor.offset;
  113. }
  114.  
  115. assets = data.assets;
  116.  
  117. // If we are refreshing assets (on initial page reload for instance) then
  118. // do that now
  119. for(var i=0; data.refresh_assets !== undefined && data.refresh_assets != null && i<data.refresh_assets.length; i++){
  120. // Add the asset to the cursor - will return undefined for ripples and other
  121. // bits we want to ignore for now.
  122.  
  123. if(data.refresh_assets[i].type == "textboxchange"){
  124. for(var j=0;j<window.cursor.assets.length;j++){
  125. if(window.cursor.assets[j].guid == data.refresh_assets[i].id ){
  126. window.cursor.assets[j].text = data.refresh_assets[i].text;
  127. // window.cursor.assets[j].display_text_array = data.refresh_assets[i].data
  128. }
  129. }
  130. }else if(data.refresh_assets[i].type == "imageitemmove"){
  131. // TODO: Make sure we move the correct image to an appropriate location
  132. console.log("We got a refresh item for text box moving");
  133. }else if(data.refresh_assets[i].type == "videoitemmove"){
  134. // console.log("we have a refreshed videoitemmove");
  135. var bFound = false;
  136. for(var j=0;j<cursor.assets.length && bFound == false;j++){
  137. var a = cursor.assets[j];
  138. if(a.div_id == data.refresh_assets[i].id){
  139. cursor.assets[j].loc.x = data.refresh_assets[i].loc.x;
  140. cursor.assets[j].loc.y = data.refresh_assets[i].loc.y;
  141. bFound = true;
  142. }
  143. }
  144. }else if(data.refresh_assets[i].type == "videoitemevent"){
  145. console.log("we have a refreshed videoitemevent");
  146. // Not sure what to do with this - for now ignore.
  147. }else if(data.refresh_assets[i].type == "textboxmove"){
  148. var bFound = false;
  149. for(var j=0;j<cursor.assets.length && bFound == false;j++){
  150. var a = cursor.assets[j];
  151. if(a.guid == data.refresh_assets[i].id){
  152. cursor.assets[j].loc.x = data.refresh_assets[i].loc.x;
  153. cursor.assets[j].loc.y = data.refresh_assets[i].loc.y;
  154. cursor.assets[j].update_location();
  155. bFound = true;
  156.  
  157. }
  158. }
  159. }else{
  160. var ass = get_asset_from_json(data.refresh_assets[i]);
  161. if(ass !== undefined && (ass.type == "textbox" || ass.type == "videoitem")){
  162. // Check that we don't have one with the same id alread
  163. var bFound = false;
  164. for(var j=0;j<window.cursor.assets.length;j++){
  165. if(ass.type == "textbox" && window.cursor.assets[j].guid == ass.guid){
  166. console.log("we have this asset already (during refresh)")
  167. bFound = true;
  168. break;
  169. }else if(ass.type == "videoitem" && window.cursor.assets[j].div_id == ass.div_id){
  170. bFound = true;
  171. break;
  172. }
  173. }
  174. if(!bFound){
  175. if(ass.type == "videoitem"){
  176. ass.load_video();
  177. ass.is_master = true; // We have been given our own video back - make sure we know we are master
  178. }
  179. ass.sent = true; // Otherwise we'll just send it again
  180. ass.never_send = true; // We must never send this - it was obtained on a refresh
  181. window.cursor.assets.push(ass);
  182. }
  183. }else if(ass !== undefined && ass !== null){
  184. ass.sent = true; // Otherwise we'll just send it again
  185. ass.never_send = true; // We must never send this - it was obtained on a refresh
  186. window.cursor.assets.push(ass);
  187. }
  188. }
  189. }
  190. if(data.refresh_assets !== undefined && data.refresh_assets != null && data.refresh_assets.length > 0){
  191. window.cursor.refresh_lowest_point();
  192. }
  193.  
  194. // Update the assets that have been sent from the other user(s) in the room
  195. // NOTE: If we need an asset that we don't add for a users refresh of their own assets
  196. // then they need to be added separately into this if statment - otherwise deal with it
  197. // in the get_asset_from_json() function.
  198. for(var i=0; i<assets.length;i++){
  199. var ass = assets[i];
  200. if(ass.type == "ripple"){
  201. // Add a ripple
  202. window.othercursor.ripples.push(new Ripple(ass.loc.x, ass.loc.y, window.othercursor.color));
  203. }else if(ass.type == "imageitemmove"){
  204. // Update the placement of the item by id
  205. for(var j=0; j<window.othercursor.assets.length;j++){
  206. var a = window.othercursor.assets[j];
  207. if(a.id == ass.id){
  208. window.othercursor.assets[j].loc.x = ass.loc.x;
  209. window.othercursor.assets[j].loc.y = ass.loc.y;
  210. }
  211. }
  212. }else if(ass.type == "textboxchange"){
  213. // console.log("Updating text in textbox")
  214. // console.log(ass)
  215. for(var j=0;j<window.cursor.assets.length;j++){
  216. // var a = window.othercursor.assets[j];
  217. var a = window.cursor.assets[j];
  218. if(a.type == "textbox" && ass.id == a.guid){
  219. // Create a new array for the text
  220.  
  221. // window.othercursor.assets[j].display_text_array = []
  222. // window.cursor.assets[j].display_text_array = []
  223. window.cursor.assets[j].text = ass.text;
  224. window.cursor.assets[j].update_text();
  225. // for(var y=0;y<ass.data.length;y++){
  226. // // window.othercursor.assets[j].display_text_array[y] = [];
  227. // window.cursor.assets[j].display_text_array[y] = [];
  228. // for(var x=0;x<ass.data[y].length;x++){
  229. // // window.othercursor.assets[j].display_text_array[y][x] = ass.data[y][x];
  230. // window.cursor.assets[j].display_text_array[y][x] = ass.data[y][x];
  231. // }
  232. // }
  233.  
  234. }
  235. }
  236. }else if(ass.type == "textboxmove"){
  237. var bFound = false;
  238. for(var j=0; j<window.cursor.assets.length;j++){
  239. var a = window.cursor.assets[j];
  240. if(a.type == "textbox" && ass.id == a.guid){
  241. window.cursor.assets[j].loc.x = ass.loc.x;
  242. window.cursor.assets[j].loc.y = ass.loc.y;
  243. window.cursor.assets[j].moved = false; // Just in case we were about to send a new position
  244. bFound = true;
  245. }
  246. }
  247. if(!bFound){
  248. console.log("Failed to find the textbox with id: " + ass.id);
  249. }
  250. }else if(ass.type == "videoitemmove"){
  251. var bFound = false;
  252. for(var j=0;j<window.cursor.assets.length && !bFound;j++){
  253. var a = window.cursor.assets[j];
  254. if(a.type == "videoitem" && a.div_id == ass.id){
  255. window.cursor.assets[j].loc.x = ass.loc.x;
  256. window.cursor.assets[j].loc.y = ass.loc.y;
  257. window.cursor.assets[j].moved = false;
  258. bFound = true;
  259. }
  260. }
  261. if(!bFound){
  262. console.log(ass)
  263. console.log("failed to find video item with div_id " + ass.id);
  264. }
  265. }else if(ass.type == "videoitemevent"){
  266. var bFound = false;
  267. for(var j=0;j<window.cursor.assets.length && !bFound;j++){
  268. var a = window.cursor.assets[j];
  269. if(a.type == "videoitem" && a.div_id == ass.id){
  270. bFound = true;
  271. window.cursor.assets[j].handle_event(ass);
  272. }
  273. }
  274. // if(ass.event_type == "play"){
  275. // var bFound = false;
  276. // for(var j=0;j<window.cursor.assets.length && !bFound;j++){
  277. // var a = window.cursor.assets[j];
  278. // if(a.type == "videoitem" && a.div_id == ass.id){
  279. // bFound = true;
  280. // window.cursor.assets[j].play_video(ass.seekTo);
  281. // }
  282. // }
  283. // }
  284. // if(ass.event_type == "stop"){
  285. // var bFound = false;
  286. // for(var j=0;j<window.cursor.assets.length && !bFound;j++){
  287. // var a = window.cursor.assets[j];
  288. // if(a.type == "videoitem" && a.div_id == ass.id){
  289. // bFound = true;
  290. // window.cursor.assets[j].stop_video();
  291. // }
  292. // }
  293. // }
  294. }else{
  295. var a = get_asset_from_json(ass);
  296. if(a !== undefined){
  297. // console.log("Getting a new assets " + ass.type);
  298. // console.log(a);
  299. if(a.type == "textbox"){
  300. a.sent = true;
  301. a.never_send = true;
  302. var bFound = false;
  303. for(var j=0;j<window.cursor.assets.length;j++){
  304. if(window.cursor.assets[j].guid == a.guid){
  305. bFound = true;
  306. console.log("we already have this " + a.type);
  307. break;
  308. }
  309. }
  310. // Don't push if we already have one with the same guid
  311. if(!bFound){
  312. if(a.name == "Messaging"){
  313. // Push messaging so it's the first one
  314. window.cursor.assets.unshift(a);
  315. }else{
  316. window.cursor.assets.push(a);
  317. }
  318. }
  319. }else if(a.type == "videoitem"){
  320. a.sent = true;
  321. a.never_send = true;
  322. var bFound = false;
  323. for(var j=0;j<window.cursor.assets.length;j++){
  324. if(window.cursor.assets[j].div_id == a.div_id){
  325.  
  326. bFound = true;
  327. console.log("We already have this " + a.type + " , div_id: " + a.id);
  328. break;
  329. }
  330. }
  331. // Don't push if we already have one with the same guid
  332. if(!bFound){
  333. // Must remember to load video and create div
  334. a.load_video();
  335.  
  336. window.cursor.assets.push(a);
  337. }
  338. }else{
  339. window.othercursor.assets.push(a);
  340. }
  341. }
  342. }
  343. }
  344. if(assets.length > 0){
  345. window.othercursor.refresh_lowest_point();
  346. }
  347. return false;
  348. });
  349. }
  350.  
  351. if(socket != null){
  352. socket.on('status', function(e){
  353. var data = JSON.parse(e);
  354. if(data.status !== undefined){
  355. if(data.status == "fail"){
  356. console.log(data.message);
  357. }
  358. }
  359. });
  360. }
  361.  
  362. var screen_width = $(window).width();
  363. var screen_height = $(window).height();
  364.  
  365. function send() {
  366. // console.log("about to send......");
  367.  
  368. var assets = [];
  369. for(var i=0;i<cursor.ripples.length;i++){
  370. var asset = cursor.ripples[i];
  371.  
  372. if(asset.sent == false){
  373. var next_obj = {type: 'ripple', loc: {'x': asset.loc.x, 'y': asset.loc.y}};
  374. assets.push(next_obj);
  375. cursor.ripples[i].sent = true;
  376. // console.log(next_obj);
  377. }
  378. }
  379.  
  380. for(var i=0;i<cursor.assets.length;i++){
  381. var asset = cursor.assets[i];
  382.  
  383. // TODO: Add in asset
  384. if(asset.type == "line" && asset.sent == false){
  385. // console.log(cursor.assets);
  386. var next_obj = {
  387. type: "line",
  388. points: asset.points,
  389. size: asset.linesize,
  390. color: asset.color
  391. }
  392. // console.log("Sending line");
  393. assets.push(next_obj);
  394. cursor.assets[i].sent = true;
  395. }else if(asset.type == "templine" && asset.sent == false){
  396. var next_obj = {
  397. type: "templine",
  398. points: asset.points,
  399. size: asset.linesize,
  400. color: asset.color
  401. }
  402. assets.push(next_obj);
  403. cursor.assets[i].sent = true;
  404. }else if(asset.type == 'imageitem' && asset.sent == false && asset.uploaded == true){ // Wait until uploaded before sending
  405. var next_obj = {
  406. type: "imageitem",
  407. loc: {
  408. x: asset.loc.x,
  409. y: asset.loc.y
  410. },
  411. id: asset.id,
  412. filename: asset.server_filename
  413. }
  414.  
  415. // TEMP DEBUG
  416. console.log("Sending image");
  417. console.log(next_obj);
  418.  
  419. // TODO: push file_data
  420. assets.push(next_obj);
  421.  
  422. cursor.assets[i].sent = true;
  423. }else if(asset.type === 'imageitem' && asset.moved === true){
  424. var next_obj = {
  425. type: "imageitemmove",
  426. loc: {
  427. x: asset.loc.x,
  428. y: asset.loc.y
  429. },
  430. id: asset.id
  431. }
  432. cursor.assets[i].moved = false;
  433. assets.push(next_obj);
  434. }else if(asset.type == "textbox" && asset.sent == false && asset.never_send == false){
  435. // The initial creation of the text box
  436. var next_obj = {
  437. type: "textbox",
  438. loc: {
  439. x: asset.loc.x,
  440. y: asset.loc.y,
  441. w: asset.size.x,
  442. h: asset.size.y
  443. },
  444. text: asset.name,
  445. id: asset.guid
  446. }
  447.  
  448. // TODO: Figure out why this isn't actually working
  449. // IRL
  450. if(next_obj.loc.w == undefined){
  451. next_obj.loc.w = 400;
  452. }
  453. if(next_obj.loc.h == undefined){
  454. next_obj.loc.h = 200;
  455. }
  456.  
  457. cursor.assets[i].sent = true;
  458. assets.push(next_obj);
  459. // console.log("Added textbox")
  460. // console.log(next_obj);
  461. }else if(asset.type == "textbox" && asset.sent == true && asset.changed == true){
  462. var next_obj = {
  463. type: "textboxchange",
  464. text: asset.text,
  465. id: asset.guid
  466. }
  467. cursor.assets[i].changed = false;
  468. assets.push(next_obj);
  469. }else if(asset.type == "textbox" && asset.sent == true && asset.moved == true){
  470. var next_obj = {
  471. type: "textboxmove",
  472. loc: {
  473. x: asset.loc.x,
  474. y: asset.loc.y
  475. },
  476. id: asset.guid
  477. }
  478. cursor.assets[i].moved = false;
  479. assets.push(next_obj);
  480. }else if(asset.type == "textbox" && asset.assets_dirty == true){
  481. for(var j=0;j<asset.assets.length;j++){
  482. var next_asset = asset.assets[j];
  483. if(next_asset.sent == false){
  484. var next_obj = {
  485. type: "textboxasset",
  486. id: asset.guid,
  487. asset: next_asset
  488. }
  489. }
  490. }
  491. }else if(asset.type == "textbox" && asset.assets_deleted == true){
  492. var next_obj = {
  493. type: "textboxassetclear",
  494. id: asset.guid
  495. }
  496. cursor.assets[i].assets_deleted = false;
  497. assets.push(next_obj);
  498. }else if(asset.type == "videoitem" && asset.sent == false && asset.url_set){
  499. var next_obj = {
  500. type: "videoitem",
  501. url: asset.url,
  502. loc: {x: asset.loc.x, y: asset.loc.y},
  503. size: {x: asset.size.x, y: asset.size.y},
  504. id: asset.div_id
  505. }
  506. cursor.assets[i].sent = true;
  507. // console.log("Sending video item");
  508. // console.log(next_obj);
  509. assets.push(next_obj);
  510. }else if(asset.type == "videoitem" && asset.sent == true && asset.moved == true){
  511. var next_obj = {
  512. type: "videoitemmove",
  513. loc: {
  514. x: asset.loc.x,
  515. y: asset.loc.y
  516. },
  517. id: asset.div_id
  518.  
  519. }
  520. cursor.assets[i].moved = false;
  521. assets.push(next_obj);
  522. }
  523.  
  524. if(asset.type == "videoitem" && asset.event_to_send != null){
  525. var next_obj = {
  526. type: "videoitemevent",
  527. event_type: asset.event_to_send.type,
  528. id: asset.div_id
  529. }
  530. assets.push(next_obj);
  531. cursor.assets[i].event_to_send = null; // Don't send twice
  532. }
  533. }
  534.  
  535. // Prep the data object to send to the websocket
  536. var data_str = { cursor: {x: cursor.loc.x, y: cursor.loc.y, offset: cursor.offset}, screen: {width: screen_width, height: screen_height} };
  537.  
  538. var data = {
  539. id: roomid,
  540. data: data_str,
  541. role: role,
  542. assets: assets
  543. }
  544.  
  545. var bDebug = false;
  546. for(var i=0; i < data.assets.length; i++){
  547. if(data.assets[i].type !== "ripple"){
  548. bDebug = true;
  549. }
  550. }
  551.  
  552. if(bDebug && data.assets.length > 0){
  553. console.log(data.assets);
  554. }
  555.  
  556.  
  557. if(socket !== null){
  558. // Send the updated information to the websocket
  559. socket.emit('classroom update', JSON.stringify(data));
  560. }
  561.  
  562. setTimeout(send, 100);
  563. }
  564.  
  565. // This will give us all of the assets - ours and theirs for initial setup
  566. // On return from that we will then start sending updates
  567. setTimeout(function(){
  568. if(socket === undefined || socket === null){
  569. console.log("The socket does not exist - are we debugging?");
  570. return;
  571. }
  572. socket.emit("refresh", {id: roomid, role:role});
  573. }, 1000);
  574.  
  575. // Delay before we start the process of sending updates
  576. setTimeout(send, 3000);
  577. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!