API tools faq
paste
Advertisement
Past12

WhiteBoard

Past12
Jul 12th, 2021
32
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 118.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>Free Online Whiteboard</title>
  6. <meta name="Description" content="Free Online Whiteboard and Collaboration - A Free web whiteboard loaded with great functionalities like online presentation, setup customize background, different pen sizes, millions of colors, adding text with beautiful fonts, simple Do and Undo functions, eraser, add various shapes, add customize images and finally save your work as an image or whiteboard itself which can be uploaded later iwhen and as needed. This is ideal for teaching online or presentation online." />
  7. <meta name="Keywords" content="Free, Online, Whiteboard, Teaching, Students, Presentation., Background, Fonts, text, Eraser, Pencil, Shapes"/>
  8. <base href="https://www.tutorialspoint.com/" />
  9. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  10. <link rel="stylesheet" type="text/css" href="themes/css/gray/easyui.css">
  11. <link rel="stylesheet" type="text/css" href="themes/css/icon.css">
  12. <link rel="stylesheet" type="text/css" href="themes/css/lightslider.css">
  13. <link rel="stylesheet" type="text/css" href="themes/css/whiteboard.css">
  14. <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Poiret+One|Lobster|Shadows+Into+Light|Pacifico|Sigmar+One|Courgette|Lobster+Two|Pinyon+Script|Playball|Satisfy|Great+Vibes|Tangerine|Luckiest+Guy' rel='stylesheet' type='text/css'>
  15. <script src="themes/js/jquery.min.js"></script>
  16. <script src="themes/easyui/jquery.easyui.min.js"></script>
  17. <script src="themes/js/fabric-min.js"></script>
  18. <script src="themes/js/screenfull.js"></script>
  19. <script src="themes/js/ion.sound.min.js"></script>
  20. <script src="themes/js/RTCMultiConnection.min.js"></script>
  21. <script src="themes/js/FileBufferReader.min.js"></script>
  22. <script src="themes/js/socket.io.js?v=1"></script>
  23. <link rel="stylesheet" type="text/css" href="themes/css/slick.css"/>
  24. <link rel="stylesheet" type="text/css" href="themes/css/slick-theme.css"/>
  25. <script type="text/javascript" src="themes/js/slick.min.js"></script>
  26. <script type="text/javascript" src="tutor_connect/js/bootstrap.min.js"></script>
  27.  
  28. <style>
  29. .fa-refresh:before {content:"\f079"; font-family:'FontAwesome'; font-size:150%; font-style:normal;}
  30. #refresh{display:none;}
  31. </style>
  32. <style>
  33. #privacy-banner {
  34. position: fixed;
  35. bottom: 0;
  36. left: 0;
  37. width: 100%;
  38. max-width: 100%;
  39. padding: 1rem .5rem;
  40. background: #fff;
  41. z-index: 1030;
  42. color: #000;
  43. font-size: 14px;
  44. margin: 0;
  45. display: none;
  46. border-top: 2px solid rgb(130, 130, 130);
  47. }
  48. #privacy-banner p {
  49. margin: 0;
  50. color: #000;
  51. text-align: center;
  52. }
  53. #privacy-banner a {
  54. text-decoration: none;
  55. margin: 20px auto 0 auto;
  56. display: block;
  57. max-width: 150px;
  58. }
  59. #privacy-banner a:hover {
  60. text-decoration: underline;
  61. }
  62. #banner-learn {
  63. color: #000;
  64. }
  65. #banner-accept {
  66. padding: 7px 15px;
  67. color: #fff;
  68. border-radius: 5px;
  69. background:#737373;
  70. }
  71. @media (min-width: 768px) {
  72. #privacy-banner {
  73. padding: 1.5rem .5rem;
  74. }
  75. #privacy-banner a {
  76. display: inline-block;
  77. margin: 0 10px;
  78. }
  79. }
  80. </style>
  81.  
  82.  
  83. <script type="text/javascript">
  84. $(document).ready(function() {
  85. /*
  86. var tc_flodername = '';
  87. var tc_slides = '';
  88. var id = '#dialog';
  89. //Get the screen height and width
  90. var maskHeight = $(document).height();
  91. var maskWidth = $(window).width();
  92. //Set heigth and width to mask to fill up the whole screen
  93. $('#mask').css({'width':maskWidth,'height':maskHeight});
  94. //transition effect
  95. $('#mask').fadeIn(500);
  96. $('#mask').fadeTo("slow",0.5);
  97. //Get the window height and width
  98. var winH = $(window).height();
  99. var winW = $(window).width();
  100. //Set the popup window to center
  101. $(id).css('top', winH/2-$(id).height()/2);
  102. $(id).css('left', winW/2-$(id).width()/2);
  103. //transition effect
  104. if(tc_flodername != '' && tc_slides !=''){
  105. //$(id).fadeIn(2000);
  106. $('#mask').hide();
  107. } else {
  108. $(id).fadeIn(2000);
  109. }
  110.  
  111. //if close button is clicked
  112. $('.window .close').click(function (e) {
  113. //Cancel the link behavior
  114. e.preventDefault();
  115. $('#mask').hide();
  116. $('.window').hide();
  117. });
  118. //if mask is clicked
  119. $('#mask').click(function () {
  120. $(this).hide();
  121. $('.window').hide();
  122. });
  123. $('.carousel').carousel({
  124. interval: 1000 * 7
  125. });
  126. $('.carousel').carousel('cycle');
  127. */
  128. });
  129. </script>
  130. </head>
  131. <body class="easyui-layout" id="cc">
  132.  
  133. <!-- Loader html code -->
  134. <div class="wrapLoader">
  135. <div class="imgLoader">
  136. <img src="/images/loading.gif" alt="" width="70" height="70" />
  137. <div id="wait"></div>
  138. </div>
  139. </div>
  140. <!-- end of Loader html code -->
  141.  
  142. <!-- popup html code -->
  143. <div id="boxes">
  144. <div id="dialog" class="window">
  145. <div id="popupfoot"> <a href="#" class="close agree" title="close window">x</a></div>
  146. <div class="bs-example">
  147. <div id="myCarousel" class="carousel slide" data-ride="carousel">
  148. <!-- Wrapper for carousel items -->
  149. <div class="carousel-inner bigbanner">
  150. <div class="item active">
  151. <img src="/whiteboard/images/live-video-chat.jpg" title="Live Video Chat">
  152. </div>
  153. <div class="item">
  154. <img src="/whiteboard/images/upload_presentations.jpg" title="Upload Presentations">
  155. </div>
  156. <div class="item">
  157. <img src="/whiteboard/images/online_presentation.jpg" title="Online Presentations">
  158. </div>
  159. <div class="item">
  160. <img src="/whiteboard/images/upload-download-presentation.jpg" title="Upload/Download Presentation">
  161. </div>
  162. <div class="item active">
  163. <img src="/whiteboard/images/change-background.jpg" title="Change Background Color">
  164. </div>
  165. <!-- Carousel controls -->
  166. <a class="carousel-control left" href="#myCarousel" data-slide="prev">
  167. <span class="fa-angle-left"></span>
  168. </a>
  169. <a class="carousel-control right" href="#myCarousel" data-slide="next">
  170. <span class="fa-angle-right"></span>
  171. </a>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. <div id="mask"></div>
  177. </div>
  178. <!-- end of popup html code -->
  179.  
  180.  
  181. <!--HEADER STARTS -->
  182. <div data-options="region:'north'" style="height:65px; width:100%;overflow:hidden;">
  183. <div id="invite" class="easyui-dialog" title="Meeting Invitation" style="width:600px;height:250px;" data-options="iconCls:'icon-email',resizable:true,modal:true, onOpen:function(){$('.imgLoader').css('visibility', 'hidden');}, onClose:function(){if( $('#center').children().filter('video').length == 0 ){$('.imgLoader').css('visibility', 'visible');}}">
  184. <div id="eids" class="easyui-validatebox" data-options="required:true,validType:'emails', prompt:'Enter Email IDs separated by comma...',buttonText:'Invite'" style="width:70%;height:32px;"></div>
  185. </div>
  186. <div id="videocontext" class="easyui-menu" style="width:150px;">
  187. <div id="muteUser" data-options="iconCls:'fa-microphone-slash-small'">Mute User</div>
  188. <div id="unmuteUser" data-options="iconCls:'fa-microphone-small'">Unmute User</div>
  189. </div>
  190. <div id="sign" class="easyui-window" title="Whiteboard" data-options="iconCls:'icon-login',modal:true, maximizable:false, closed:true, minimizable:false" style="width:530px;height:475px;padding:10px;">
  191. </div>
  192. <div id="dlg" class="easyui-dialog" title="Meeting" style="width:500px;height:250px;" data-options="iconCls:'icon-chat-small', resizable:true, modal:true, buttons: '#dlg-buttons'">
  193. <div style="margin-bottom:10px">
  194. <input class="easyui-textbox" id="room_id" style="width:80%;height:40px;padding:12px" data-options="prompt:'Enter a unique room ID',iconCls:'icon-lock',iconWidth:38">
  195. </div>
  196. <div style="margin-bottom:20px">
  197. <input class="easyui-textbox" id="user_name" style="width:80%;height:40px;padding:12px" data-options="prompt:'Enter your name', iconCls:'icon-man',iconWidth:38">
  198. </div>
  199. </div>
  200.  
  201. <div id="ancTutorContent" class="easyui-window" title="Whiteboard" data-options="iconCls:'icon-login',modal:true, maximizable:false, closed:true, minimizable:false" style="width:530px;height:200px;padding:10px;">
  202. </div>
  203.  
  204. <div id="dlg-buttons" style="text-align:center;">
  205. <a href="javascript:void(0)" class="easyui-linkbutton" id="create_meeting_room">Create Meeting Room</a>
  206. <a href="javascript:void(0)" class="easyui-linkbutton" id="join_meeting_room">Join Meeting Room</a>
  207. </div>
  208. <a href='http://www.tutorialspoint.com/'>
  209. <img src="/green/images/diamond.png" height="50px" style="padding:5px; float:left;"/>
  210. </a>
  211. <h1 class="whtboard">Whiteboard</h1>
  212.  
  213. <!-- header top right menu first -->
  214. <div style="margin:18px 0px 0px 0px;">
  215. <div class="db-nav">
  216. <a href="javascript:void(0);" id="ancUndo" title="Undo">
  217. <div class="sub-default-lft" style="border-right:none;"><i class="fa-undo wbitem"></i></div>
  218. </a>
  219. <a href="javascript:void(0);" id="ancRedo" title="Redo">
  220. <div class="sub-default-lft" style="border-right:none;"><i class="fa-repeat wbitem"></i></div>
  221. </a>
  222. <a href='javascript:void(0)' title="Clear all" class="clrDynamicCanvas">
  223. <div class="sub-default-lft wbitem" style="border-right:none;"><img src="whiteboard/images/clear.png" style="vertical-align:bottom; height:17px;"/></div>
  224. </a>
  225. <a href='javascript:void(0)' id="maximize" title="Maximize" >
  226. <div class="sub-default-lft" ><i class="fa-expand"></i></div>
  227. </a>
  228. <a href='javascript:void(0)' id="refresh" title="Refresh Connection">
  229. <div class="sub-default-lft" ><i class="fa-refresh"></i></div>
  230. </a>
  231. <a href="javascript:void(0);" id="ancHelpMain" title="Help Whiteboard">
  232. <div class="sub-default-lft" style="border-right:none;"><img src="theme/css/icons/help.png" /></div>
  233. </a>
  234. </div>
  235. </div>
  236. <!-- end of header top right menu first -->
  237.  
  238. </div>
  239. </div>
  240. <!--HEADER ENDS -->
  241.  
  242. <div id="east" data-options="region:'east', title:'Meeting',iconCls:'icon-chat-small', split:false, collapsed:false" style="width:300px;">
  243. <div id="webrtcPanel" class="easyui-layout" data-options="fit:true,border:false">
  244. <div data-options="region:'north',split:true" style="height:322px; border:0px;">
  245. <div class="video-control">
  246. <div id="containerUserFaces">
  247. <h2>Waiting for participants to join</h2>
  248. </div>
  249. <div class="db-nav chat-nav-center">
  250. <div id="containerBigVideoAndFullscreen">
  251. <div id="containerBigVideo">
  252. <i class="fa-user-large chatitem"></i>
  253. </div>
  254. </div>
  255. </div>
  256. <div class="db-nav chat-nav-center">
  257. <a href="javascript:void(0);" id="btnShareVideo" title="Share Video">
  258. <div class="sub-default-lft" style="border-right:none;"><i class="fa-video-camera-small chatitem"></i></div>
  259. </a>
  260. <a href="javascript:void(0);" id="btnShareAudio" title="Unmute">
  261. <div class="sub-default-lft" style="border-right:none;"><i class="fa-microphone-small chatitem"></i></div>
  262. </a>
  263. <a href="javascript:void(0);" id="btnSendInvite" title="Send Invite">
  264. <div class="sub-default-lft" style="border-right:none;"><i class="fa-envelope-o chatitem"></i></div>
  265. </a>
  266. <a href="javascript:void(0);" id="btnMuteAll" title="Mute All">
  267. <div class="sub-default-lft" style="border-right:none;"><i class="fa-volume-off chatitem"></i></div>
  268. </a>
  269. <a href="javascript:void(0);" id="btnRaiseHand" title="Raise Hand">
  270. <div class="sub-default-lft" style="border-right:none;"><i class="fa-raise-hand-small chatitem"></i></div>
  271. </a>
  272. <a href="javascript:void(0);" id="btnEnlargeVideo" title="Enlarge Video">
  273. <div class="sub-default-lft" style="border-right:none;"><i class="fa-expand-small chatitem"></i></div>
  274. </a>
  275. </div>
  276. </div>
  277. </div>
  278. <div data-options="region:'center'" id="chatParent" style="overflow:hidden; border:0px;">
  279. <div id="chatContainer"> </div>
  280. </div>
  281. <div data-options="region:'south',split:false" style="width:100%; border:0px;">
  282. <div id="chat-input-box" style="border:1px solid #eee; border-left:0px solid;">
  283. <input id="input-box" class="easyui-textbox" data-options="buttonText:'Send',prompt:'Enter your text here...',iconWidth:22" style="width:100%; height:40px; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px">
  284. </div>
  285. </div>
  286. </div>
  287. </div>
  288.  
  289. <!--Left Navigation starts -->
  290. <div id="west" data-options="region:'west', title:'',iconCls:'', split:false, collapsible:false" style="width:55px;">
  291. <div class="wr-left">
  292. <div class="wr-lft-cont column">
  293. <div class="sub-default clickDisable" id="lftMainmenu">
  294. <a href="javascript:void(0);" id="ancSelect" title="Select Tool">
  295. <div class="sub-default-lft"><i class="fa-mouse-pointer"></i></div>
  296. </a>
  297. <a href="javascript:void(0);" id="ancBackground" title="Background">
  298. <div class="sub-default-lft"><i class="fa-circle wbitem"></i></div>
  299. </a>
  300. <a href="javascript:void(0);" id="ancPattern" title="Pattern">
  301. <div class="sub-default-lft" ><img src="whiteboard/images/pattern-icon.png" style="border:1px solid #ccc;border-radius:60px;"/></div>
  302. </a>
  303. <a href="javascript:void(0);" id="ancPencil" title="Pencil">
  304. <div class="sub-default-lft" style="border-right:none;"><i class="fa-pencil wbitem" style="font-size:120%;"></i></div>
  305. </a>
  306. <a href='javascript:void(0)' id="ancEraser" title="Eraser">
  307. <div class="sub-default-lft"><i class="fa-eraser"></i></div>
  308. </a>
  309. <a href="javascript:void(0);" id="ancShape" title="Shapes">
  310. <div class="sub-default-lft" style="border-right:none;"><img src="whiteboard/images/shape-sm.png" /></div>
  311. </a>
  312. <a href="javascript:void(0);" id="ancText" title="Text">
  313. <div class="sub-default-lft" style="border-right:none;"><i class="fa-text-height"></i></div>
  314. </a>
  315. <a href="javascript:void(0);" id="ancImage" title="Image">
  316. <div class="sub-default-lft" style="border-right:none;"><i class="fa-file-image-o"></i></div>
  317. </a>
  318.  
  319. <a href="javascript:void(0);" id="ancTutorConnect" title="Tutor Connect Content Presentation">
  320. <div class="sub-default-lft" style="border-right:none;"><img src="theme/css/icons/image-editor.png" /></div>
  321. </a>
  322. <a href="javascript:void(0);" id="ancStartChat" title="Meeting">
  323. <div class="sub-default-lft" style="border-right:none;"><img src="theme/css/icons/chat_room.png" /></div>
  324. </a>
  325. <a href="javascript:void(0);" id="ancDownload" title="Download/Upload">
  326. <div class="sub-default-lft" style="border-right:none;"><img src="whiteboard/images/up-down.png" /></div>
  327. </a>
  328.  
  329. </div>
  330. </div>
  331. </div>
  332. </div>
  333. <!--End of Left Navigation -->
  334.  
  335. <!--BOTTOM STARTS -->
  336. <div id="south" data-options="region:'south',iconCls:'icon-image-editor', title:'Slides', split:false,collapsible:true" style="height:115px">
  337. </div>
  338. <!--BOTTOM ENDS -->
  339.  
  340. <!--STAGE STARTS -->
  341. <div id="center" data-options="region:'center'" style="height:100%">
  342. <div id="stage">
  343. <canvas id="canvasBoard"></canvas>
  344. <!--WebRTC block -->
  345. <!-- placeholder for shared part of the screen(from the user side) -->
  346. <div id="containerSharedPartOfScreenPreview" style="display:none;">
  347. <img id="sharedPartOfScreenPreview" style="max-width:100%;"/>
  348. </div>
  349. <!--END WebRTC block -->
  350. </div>
  351. <!-- header top right menu second -->
  352. <div class="wr-rgt">
  353. <div class="wr-rgt-cont">
  354.  
  355. <!-- code of background color picker -->
  356. <div class="subProperties left-meni-slide" id="bgColorpick" style="min-height:306px; max-height:100%;">
  357. <div class="icon-curve icon-bgcolor" style="background:transparent !important"></div>
  358. <div class="sub-tools items">
  359. <a href="javascript:void(0);" class='clsBgColor bgcrcle'><div class="blck-bgpicker"></div>
  360. </a>
  361. <a href="javascript:void(0);" class='clsBgColor bgcrcle'><div class="red-bgpicker"></div></a>
  362. <a href="javascript:void(0);" class='clsBgColor bgcrcle'><div class="green-bgpicker"></div></a>
  363. <a href="javascript:void(0);" class='clsBgColor bgcrcle'><div class="yellow-bgpicker"></div></a>
  364. <a href="javascript:void(0);" class='clsBgColor bgcrcle'><div class="blue-bgpicker"></div></a>
  365. <a href="javascript:void(0);" class='clsBgColor bgcrcle'><div class="white-bgpicker"></div></a>
  366. <a href="javascript:void(0);" class='bgcrcle'>
  367. <input type="color" id="txtBgColorVal" class="form-control picker" value="#000000">
  368. </a>
  369. </div>
  370. </div>
  371. <!-- end of code for background color picker -->
  372.  
  373. <!-- code of patterns -->
  374. <div class="subProperties left-meni-slide" id="bgPattern" style="min-height:312px; max-height:100%;">
  375. <div class="icon-curve icon-bgpattern"></div>
  376. <div class="sub-tools items">
  377. <a href="javascript:void(0);" class='clsBgColor bgcrcle h30' title="Guidelines">
  378. <div class="bgclpkr bgpatterns"><img src="whiteboard/images/transparent-guidelines.png" /></div>
  379. </a>
  380. <a href="javascript:void(0);" class='clsBgColor bgcrcle h30' title="Book Guidelines">
  381. <div class="bgclpkr bgpatterns"><img src="whiteboard/images/transparent-booklines.png" /></div>
  382. </a>
  383. <a href="javascript:void(0);" class='clsBgColor bgcrcle h30' title="Transparent Background">
  384. <div class="bgclpkr bgpatterns"><img src="whiteboard/images/transparent.png" /></div>
  385. </a>
  386. <a href="javascript:void(0);" class='clsBgColor bgcrcle h30' title="Guidelines">
  387. <div class="bgclpkr bgpatterns"><img src="whiteboard/images/transparent-diamond.png" /></div>
  388. </a>
  389. <a href="javascript:void(0);" class='clsBgColor bgcrcle h30' title="Book Guidelines">
  390. <div class="bgclpkr bgpatterns"><img src="whiteboard/images/transparent-lgap.png" /></div>
  391. </a>
  392. <a href="javascript:void(0);" class='clsBgColor bgcrcle h30' title="Transparent Background">
  393. <div class="bgclpkr bgpatterns"><img src="whiteboard/images/transparent-checkered.png" /></div>
  394. </a>
  395. <a href="javascript:void(0);" class='bgcrcle' title="Transparent Background" style="padding:3px 5px 4px 7px!important;">
  396. <form method="post" enctype="multipart/form-data">
  397. <input type="file" id="filePattern" name="filePattern" title="Upload Pattern from Computer"/>
  398. </form>
  399. <div class="fileuploadph" id="btnUploadPattern" title="Upload Pattern from Computer"><i class="fa-upload"></i></div>
  400. </a>
  401. </div>
  402. </div>
  403. <!-- end of code patterns -->
  404.  
  405. <!-- code of pencil -->
  406. <div class="subProperties left-meni-slide" id="penEdit" style="min-height:345px; max-height:100%;">
  407. <div class="icon-curve icon-pendit"></div>
  408. <div class="sub-tools">
  409. <div class="items" style="margin:0px 51px 0px 0px;">
  410. <a href="javascript:void(0);" class='clsPencilColor bgcrcle'>
  411. <input type="color" id="txtPencilClrVal" class="form-control picker" value="#000000">
  412. </a>
  413. <a href="javascript:void(0);" class='clsPencilColor bgcrcle'><div class="blck-bgpicker"></div></a>
  414. <a href="javascript:void(0);" class='clsPencilColor bgcrcle'><div class="red-bgpicker"></div></a>
  415. <a href="javascript:void(0);" class='clsPencilColor bgcrcle'><div class="green-bgpicker"></div></a>
  416. <a href="javascript:void(0);" class='clsPencilColor bgcrcle'><div class="yellow-bgpicker"></div></a>
  417. <a href="javascript:void(0);" class='clsPencilColor bgcrcle'><div class="white-bgpicker"></div></a>
  418. <a href="javascript:void(0);" class='clsPencilColor bgcrcle'><div class="blue-bgpicker"></div></a>
  419. </div>
  420. <input id="lineSlide" name="lineSlide" value="2" />
  421. </div>
  422. </div>
  423. <!-- end of code for pencil-->
  424.  
  425. <!-- code for eraser-->
  426. <div class="subProperties left-meni-slide" id="eraseOptions" style="min-height:43px; max-height:100%;">
  427. <div class="icon-curve icon-eraseoption"></div>
  428. <div class="sub-tools">
  429. <input id="eraserSlide" name="eraserSlide" value="2" />
  430. </div>
  431. </div>
  432. <!-- end of code for eraser-->
  433.  
  434. <!-- code of shapes -->
  435. <div class="subProperties left-meni-slide" id="shapeOptions" style="min-height:351px; max-height:100%;">
  436. <div class="icon-curve icon-shpeoption"></div>
  437. <div class="sub-tools items">
  438. <a href="javascript:void(0);" class='shapeFillColor bgcrcle'>
  439. <input type="color" id="txtFillClrVal" class="form-control picker" value="">
  440. </a>
  441. <a href="javascript:void(0)" class="" id="shapeRect" title="Rectangle" data-style='rectangle'>
  442. <img src="whiteboard/images/rectangle-sm.png" title="Rectangle"/></a>
  443. <a href="javascript:void(0)" class="" id="shapeSquare" title="Square" data-style='square'>
  444. <img src="whiteboard/images/square-sm.png" title="Square"/></a>
  445. <a href="javascript:void(0)" class="" id="shapeCircle" title="Circle" data-style='circle'>
  446. <img src="whiteboard/images/circle-sm.png" title="Circle"/></a>
  447. <a href="javascript:void(0)" class="" id="shapeTriangle" title="Triangle" data-style='triangle'>
  448. <img src="whiteboard/images/triangle-sm.png" title="Triangle"/></a>
  449. <a href="javascript:void(0)" class="" id="shapeLine" title="Line" data-style='line'>
  450. <img src="whiteboard/images/line-sm.png" title="Line"/></a>
  451. <a href="javascript:void(0)" class="" id="shapeEllipse" title="Ellipse" data-style='ellipse'>
  452. <img src="whiteboard/images/ellipse-sm.png" title="Ellipse"/></a>
  453. <a href='javascript:void(0)' class="eraser" id="btnRemoveShape" title="delete"><div class="trash-bgpicker" style="border:none!important;">
  454. <i class="fa-trash"></i></div></a>
  455. </div>
  456. <!-- <input type="text" id="txtShapeOutline" value="2" class="input-align" style="width:18%; float:left;"/>
  457. <input type="color" id="txtShapeOutlineClrVal" class="form-control" value="#000000" style="width:23px; float:left;">
  458. <input type="text" id="txtShapeOutlineHexavalue" value="#000000" style="width:58%;float:left;margin:0px 5px 0px 4px;"/>-->
  459. </div>
  460. <!-- end of code for shapes -->
  461.  
  462. <!-- HTML of Text -->
  463. <div id="textOptions" class='subProperties left-meni-slide' style="min-height:135px; max-height:100%;">
  464. <div class="icon-curve icon-txtoptions"></div>
  465. <div id="dd">
  466. <div class="sub-tools items">
  467. <a href="javascript:void(0)" id="btnNewText" title="Add New Text"><i class="fa-plus trashh"></i></a>
  468. <a href="javascript:void(0)" id="btnRemoveText" title="Delete Text"><i class="fa-trash trashh"></i></a>
  469. <a href="javascript:void(0)" id="btnShowMenu" title="Show Text Menu"><i class="fa-bars trashh"></i></a>
  470. </div>
  471. </div>
  472. </div>
  473. <!-- End of HTML Text -->
  474.  
  475. <!-- HTML of Image -->
  476. <div id="imageOptions" class='subProperties left-meni-slide' style="min-height:91px; max-height:100%;">
  477. <div class="icon-curve icon-imgoptions"></div>
  478. <div class="sub-tools items">
  479. <a href="javascript:void(0)" id="btnNewImage" title="Add New Image"><i class="fa-upload trashh" style="font-size:130%!important;"></i></a>
  480. <a href="javascript:void(0)" id="btnRemoveImage" class='clsCance' title="Remove Image"><i class="fa-trash trashh"></i></a>
  481. <div class="text-tool sub-tools-cat" id="catOne">
  482. <form method="post" enctype="multipart/form-data" id="imageForm" >
  483. <input type="file" id="fileImage" name="fileImage" title="Upload Image from Computer">
  484. </form>
  485. <div style="clear:both;"></div>
  486. </div>
  487. </div>
  488. </div>
  489. <!-- End of HTML Image -->
  490.  
  491. <!-- code of download -->
  492. <div class="subProperties left-meni-slide" id="downloadOptions" style="min-height:145px; max-height:100%;">
  493. <div class="icon-curve icon-dwnldoptions"></div>
  494. <div class="sub-tools items">
  495. <a href='javascript:void(0)' id="ancDwnJson" title="Download as Board" >
  496. <img src="whiteboard/images/download_board.png" class="fa-dwnload" style="width:21px; height:22px;border-radius:0px;"/></a>
  497. <a href='javascript:void(0)' id="ancDwnJpeg" title="Download as JPEG">
  498. <img src="whiteboard/images/download_jpeg.png" class="fa-dwnload" style="width:21px; height:22px;border-radius:0px;"/></a>
  499. <a href='javascript:void(0)'>
  500. <form method="post" enctype="multipart/form-data" id="uploadForm">
  501. <input type="file" id="fileJson" name="fileJson" title="Upload Board from Computer">
  502. </form>
  503. <div class="fileupload" id="btnUpload" title="Upload Board from Computer"><i class="fa-upload fa-fupload"></i></div>
  504. </a>
  505. <div class="clear"></div>
  506. </div>
  507. </div>
  508. <!-- end of code for download -->
  509.  
  510. </div>
  511. </div>
  512. <div class="wr-rgt">
  513. <div class="wr-rgt-cont">
  514. <div id="btnDisplayMenu" class="textdisplay">
  515. <div class="c-two">
  516. <select id="txtStyle">
  517. <option value='Times New Roman'>Times New Roman</option>
  518. <option value='Arial'>Arial</option>
  519. <option value='Helvetica'>Helvetica</option>
  520. <option value='sans-serif'>Sans-serif</option>
  521. <option value='Impact'>Impact</option>
  522. <option value='Open Sans Condensed'>Open Sans Condensed</option>
  523. <option value='Poiret One'>Poiret One</option>
  524. <option value='Lobster'>Lobster</option>
  525. <option value='Shadows Into Light'>Shadows Into Light</option>
  526. <option value='Pacifico'>Pacifico</option>
  527. <option value='Sigmar One'>Sigmar One</option>
  528. <option value='Courgette'>Courgette</option>
  529. <option value='Lobster Two'>Lobster Two</option>
  530. <option value='Pinyon Script'>Pinyon Script</option>
  531. <option value='Playball'>Playball</option>
  532. <option value='Satisfy'>Satisfy</option>
  533. <option value='Great Vibes'>Great Vibes</option>
  534. <option value='Tangerine'>Tangerine</option>
  535. <option value='Luckiest Guy'>Luckiest Guy</option>
  536. </select>
  537. </div>
  538. <div class="clear"></div>
  539. <div class="c-two">
  540. <div id="alignleft" class="c-two-three divAlign" data-opt="left"><a href="javascript:void(0);" ><i class="fa-align-left c-border" ></i></a></div>
  541. <div id="aligncenter" class="c-two-three divAlign" data-opt="center"><a href="javascript:void(0);" ><i class="fa-align-center c-border"></i></a></div>
  542. <div id="alignright" class="c-two-three divAlign" data-opt="right"><a href="javascript:void(0);" >
  543. <i class="fa-align-right c-border"></i></a></div>
  544. <div id="stylebold" class="c-two-three divStyleBold" data-opt="bold"><a href="javascript:void(0);" ><i class="fa-bold c-border"></i></a></div>
  545. <div id="styleitalic" class="c-two-three divStyleItalic" data-opt="italic"><a href="javascript:void(0);" ><i class="fa-italic c-border"></i></a></div>
  546. </div>
  547. <div class="clear"></div>
  548. <div class="divider"></div>
  549. <textarea placeholder="Enter Text Here" cols="4" rows="3" id="txtText">Sample Text</textarea>
  550. <div class="divider"></div>
  551. <div class="c-two">
  552. <div class="c-two-three"> <a>Size:</a> <input type="text" id="txtTextSize" value="20" /> </div>
  553. <div class="c-two-three" style="width:36%; padding-left:5px!important;"> <a>Color:</a><div class="clear"></div><input type="color" id="txtClrVal" class="form-control" value="#000000"> <input type="text" id="txtHexavalue" value="#000000" />
  554. </div>
  555. <div class="c-two-three" style="width:36%;"> <a>Background:</a><div class="clear"></div> <input type="color" id="txtBGClrVal" class="form-control" value="#000000"> <input type="text" id="txtBGHexavalue" value="#000000" /> </div><div class="clear"></div>
  556. </div>
  557. <div class="divider"></div>
  558. <div class="c-two">
  559. <div class="c-two-two" style="width:99%!important; text-align:left;">
  560. <a>Border:</a><div class="clear"></div>
  561. <input type="text" id="txtOutline" value="0" style="width:35%; float:left;"/>
  562. <input type="color" id="txtOutlineClrVal" class="form-control" value="#000000" style="width:23px; float:left; margin:-2px 0px 0px 6px; height:22px;">
  563. <input type="text" id="txtOutlineHexavalue" value="#000000" style="width:36%;float:left;padding:0px 5px; margin:-3px 0px 0px 4px;"/>
  564. </div>
  565. </div><div class="clear"></div>
  566. </div>
  567. </div>
  568. </div>
  569.  
  570. <!-- code of Help -->
  571. <div class="subProperties helpclas" id="helpOptions">
  572. <div class="sub-tools" style="right:0px!important; background:#fff!important; margin:0px!important;">
  573. <div class="easyui-accordion" style="width:242px;" >
  574. <div title="Background" data-options="iconCls:''" style="overflow:auto;padding:0px;">
  575. <div class="help-acc" ><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-background-color'>How to use Background Tool</a></div>
  576. <div class="help-acc" ><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-background-patterns'>How to use Background Patterns</a></div>
  577. <div class="help-acc" ><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-background-upload-image'>How to use Upload Image</a></div>
  578. </div>
  579. <div title="Pencil" data-options="iconCls:''" style="overflow:auto;padding:0px;">
  580. <div class="help-acc" ><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-pencil-width'>How to use Pencil Tool</a></div>
  581. </div>
  582. <div title="Erase" data-options="iconCls:''" style="overflow:auto;padding:0px;">
  583. <div class="help-acc" ><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-erase'>How to use Erase Tool</a></div>
  584. </div>
  585. <div title="Shape" data-options="iconCls:''" style="overflow:auto;padding:0px;">
  586. <div class="help-acc" ><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-shape-icons'>How to use Shapes</a></div>
  587. <div class="help-acc" ><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-shape-colour'>How to use Shape Background Fill</a></div>
  588. <div class="help-acc" ><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-shape-border'>How to use Shape Border</a></div>
  589. </div>
  590. <div title="Text" data-options="iconCls:''" style="overflow:auto;padding:0px;">
  591. <div class="help-acc" ><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-text-addtext'>How to Add Text</a></div>
  592. <div class="help-acc" ><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-text-fontfamily'>How to Add Font Family to Text</a></div>
  593. <div class="help-acc"><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-text-bold'>How to Add Bold to Text</a></div>
  594. <div class="help-acc"><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-text-changetext'>How to Edit Text</a></div>
  595. <div class="help-acc"><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-text-textbgcolor'>How to Add Bakground Color, Font-size, Color</a></div>
  596. <div class="help-acc"><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-text-textbordercolor'>How to Add Border to Text</a></div>
  597. </div>
  598. <div title="Image" data-options="iconCls:''" style="overflow:auto;padding:0px;">
  599. <div class="help-acc" ><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-image-addremove'>How to use Image Tool</a></div>
  600. </div>
  601. <div title="Upload/Download" data-options="iconCls:''" style="overflow:auto;padding:0px;">
  602. <div class="help-acc" ><a class="ancHelp" href="javascript:void(0)" alt='how-to-use-download-upload'>How to use Upload/Download Tool</a></div>
  603. </div>
  604. </div>
  605. </div>
  606. </div>
  607. <!-- end of code Help -->
  608.  
  609. <!--STAGE ENDS -->
  610. <div id="helpWindow" class="easyui-window" title="Help Guide for Whiteboard" data-options="iconCls:'icon-help'" style="width:955px;height:500px;">
  611. <img src=""/>
  612. </div>
  613.  
  614.  
  615. <script src="theme/js/lightslider.js"></script>
  616. <script>
  617. $(document).ready(function(event) {
  618. var room_id, user_name;
  619. ion.sound({
  620. sounds: [{
  621. name: "bell_ring"
  622. }],
  623. path: "/themes/js/sounds/",
  624. preload: true,
  625. multiplay: true,
  626. volume: 0.9
  627. });
  628. $('#dlg').dialog('close');
  629. $('#invite').dialog('close');
  630. $('#ancStartChat').bind('click', function() {
  631. $('#dlg').dialog('open');
  632. });
  633. $('#eids').textbox({
  634. onClickButton: function() {
  635. if ($('#eids').validatebox('isValid')) {
  636. var url = "board-invite.php";
  637. var inputs = {
  638. 'mid': room_id,
  639. 'user': user_name,
  640. 'emails': $('#eids').val()
  641. };
  642. $.ajax({
  643. type: "POST",
  644. url: url,
  645. data: inputs,
  646. dataType: 'json',
  647. beforeSend: function() {
  648. $('#invite').dialog('close');
  649. $("#wait").html("Sending invitation...");
  650. $(".wrapLoader").css({
  651. "visibility": "visible"
  652. });
  653. },
  654. success: function(data) {
  655. $(".wrapLoader").css({
  656. "visibility": "hidden"
  657. });
  658. $.messager.alert('Message', data.message);
  659. },
  660. error: function(data) {
  661. $(".wrapLoader").css({
  662. "visibility": "hidden"
  663. });
  664. $.messager.alert('Message', data.message);
  665. }
  666. });
  667. }
  668. }
  669. });
  670. window.onbeforeunload = function() {
  671. return "Leaving this page may cause loss of your work!";
  672. };
  673. $('.subProperties').hide();
  674. //$('#penEdit').show();
  675. var eraserFlag = false;
  676. var eraserColor = '';
  677. var eraserArray = new Array;
  678. var totCount = 0;
  679. var totArray = new Array;
  680. var gcanvas = new fabric.Canvas('canvasBoard', {
  681. isDrawingMode: true,
  682. backgroundColor: '#ffffff'
  683. });
  684. fabric.Object.prototype.transparentCorners = false;
  685. gcanvas.setHeight($('#center').height());
  686. gcanvas.setWidth($('#center').width());
  687. gcanvas.freeDrawingBrush.color = '#000000';
  688. gcanvas.freeDrawingBrush.width = 2;
  689.  
  690. $("#cc").layout('panel', 'east').panel({
  691. onExpand: function() {
  692. gcanvas.setWidth($('#center').width() - 220);
  693. gcanvas.renderAll();
  694. },
  695. onCollapse: function() {
  696. gcanvas.setWidth($('#center').width());
  697. gcanvas.renderAll();
  698. }
  699. });
  700.  
  701. /* Background Color */
  702.  
  703. $('#ancBackground').click(function() {
  704. $('.subProperties').hide();
  705. $("#cc").layout('panel', 'east').panel({
  706. //title:'Background',
  707. //iconCls:'icon-bgcolor'
  708. });
  709. gcanvas.isDrawingMode = false;
  710. gcanvas.forEachObject(function(obj) {
  711. obj.set({
  712. hasControls: false,
  713. hasBorders: false,
  714. selectable: false
  715. });
  716. });
  717. gcanvas.renderAll();
  718. /*
  719. if($("#cc").layout('panel','east').panel('options').collapsed ){
  720. $('#cc').layout('expand','east');
  721. }
  722. */
  723. $('#bgColorpick').show();
  724.  
  725. // $('#bgColorpick').animate({
  726. // width: "toggle"
  727. // });/
  728.  
  729. });
  730. $('.clsBgColor').click(function() {
  731. var bgclr = $(this).children().css('background-color');
  732. bgclr = rgb2hex(bgclr);
  733. if (eraserFlag) {
  734. gcanvas.forEachObject(function(obj) {
  735. if (typeof obj.stroke == 'object') {
  736. obj.stroke = '#ffffff';
  737. } else {
  738. if (obj.stroke != eraserColor) {
  739. if (obj.stroke == '#ffffff' || obj.stroke == '#fff') {
  740. obj.stroke = bgclr;
  741. eraserColor = bgclr;
  742. } else {
  743. eraserColor = bgclr;
  744. }
  745. } else {
  746. obj.stroke = bgclr;
  747. }
  748. }
  749. });
  750. }
  751. gcanvas.setBackgroundImage('');
  752. gcanvas.setBackgroundColor('');
  753. $('#txtBgColorVal').val(bgclr);
  754. gcanvas.setBackgroundColor(bgclr);
  755. gcanvas.renderAll();
  756. });
  757.  
  758. function clearSlide() {
  759. if (gcanvas.getObjects().length > 0) {
  760. gcanvas.clear();
  761. gcanvas.freeDrawingBrush.width = 2;
  762. gcanvas.freeDrawingBrush.color = '#000000';
  763. eraserFlag = false;
  764. gcanvas.renderAll();
  765. $('#lineSlide').numberspinner({
  766. value: 2
  767. });
  768. $('#eraserSlide').numberspinner({
  769. value: 2
  770. });
  771. $('#txtPencilClrVal').val('#000000');
  772. $('#txtPencilClrHexa').val('#000000');
  773. $('#txtShapeOutline').val(2);
  774. $('#txtShapeOutlineHexavalue').val('#000000');
  775. $('#txtShapeOutlineClrVal').val('#000000');
  776. $('#txtFillClrVal').val('#000000');
  777. $('#txtFillClrHexa').val('#000000');
  778. txtNum = 1;
  779. shapenum = 1;
  780. }
  781. }
  782.  
  783. function displaySlide(src) {
  784. if (!(src.length > 0)) {
  785. return false;
  786. }
  787. var imgObj = new Image();
  788. imgObj.crossOrigin = "Anonymous";
  789. imgObj.onload = function() {
  790. var image = new fabric.Image(imgObj);
  791. gcanvas.setBackgroundColor('#ffffff');
  792. gcanvas.setBackgroundImage(image, gcanvas.renderAll.bind(gcanvas), {
  793. scaleY: gcanvas.height / image.height,
  794. scaleX: gcanvas.width / image.width,
  795. backgroundImageStretch: true
  796. });
  797. }
  798. imgObj.src = src;
  799. $('img[seq]').attr("style", "border:1px solid #ccc");
  800. $('img[seq="' + slideSeq + '"]').attr("style", "border:2px solid #407450");
  801. }
  802. var slideSeq = 0,
  803. maxSeq = 0,
  804. slideSrc = "",
  805. baseURL = "";
  806. $(document).on("click", '#south .clsBgColor img', function(event) {
  807. slideSrc = $(this).attr("alt");
  808. slideSeq = parseInt($(this).attr("seq"));
  809. maxSeq = parseInt($(this).attr("max"));
  810. baseURL = $(this).attr("base");
  811. clearSlide();
  812. displaySlide(slideSrc);
  813. });
  814. $(document).keydown(function(e) {
  815. /* Previous slide */
  816. if (e.keyCode == 37 || e.keyCode == 40) {
  817. if (slideSeq > 0) {
  818. slideSeq = slideSeq - 1;
  819. slideSrc = baseURL + "/" + "slide-" + slideSeq + ".jpg";
  820. clearSlide();
  821. displaySlide(slideSrc);
  822. }
  823. return false;
  824. }
  825. });
  826. $(document).keydown(function(e) {
  827. /* Next slide */
  828. if (e.keyCode == 38 || e.keyCode == 39) {
  829. if (slideSeq < maxSeq - 1) {
  830. slideSeq = slideSeq + 1;
  831. slideSrc = baseURL + "/" + "slide-" + slideSeq + ".jpg";
  832. clearSlide();
  833. displaySlide(slideSrc);
  834. }
  835. return false;
  836. }
  837. });
  838. $('#txtBgColorVal').change(function() {
  839. var bgclr = $(this).val();
  840. if (eraserFlag) {
  841. gcanvas.forEachObject(function(obj) {
  842. if (typeof obj.stroke == 'object') {
  843. obj.stroke = '#ffffff';
  844. } else {
  845. if (obj.stroke != eraserColor) {
  846. eraserColor = bgclr;
  847. } else {
  848. obj.stroke = bgclr;
  849. }
  850. }
  851. });
  852. }
  853. gcanvas.setBackgroundImage('');
  854. gcanvas.setBackgroundColor('');
  855. gcanvas.setBackgroundColor(bgclr);
  856. gcanvas.renderAll();
  857. });
  858.  
  859. $('.bgclpkr').click(function() {
  860. var src = $(this).children().attr('src');
  861. gcanvas.setBackgroundImage('');
  862. gcanvas.setBackgroundColor('');
  863. gcanvas.setBackgroundColor({
  864. source: src,
  865. repeat: 'repeat'
  866. }, function() {
  867. gcanvas.renderAll();
  868. });
  869. slideSrc = "";
  870. /* if(eraserFlag)
  871. {
  872. gcanvas.forEachObject(function(obj){
  873. if(typeof obj.stroke == 'object'){
  874. obj.stroke = '#ffffff';
  875. } else {
  876. if(eraserArray.indexOf(obj.stroke) != -1){
  877. obj.stroke = '#ffffff';
  878. }
  879. }
  880. });
  881. } */
  882. });
  883. $('#btnUploadPattern').click(function() {
  884. $('#filePattern').trigger('click');
  885. });
  886. $('#filePattern').change(function(e) {
  887. var file = $('#filePattern').val();
  888. var exts = ['jpg', 'jpeg', 'png'];
  889. if (file.length <= 0) {
  890. alert("Please select a file from local drive.");
  891. $('#filePattern').focus();
  892. return false;
  893. }
  894. var ext = file.split('.');
  895. ext = ext.reverse();
  896. if ($.inArray(ext[0].toLowerCase(), exts) < 0) {
  897. alert("Please select jpg/jpeg/png format files only.");
  898. $('#filePattern').focus();
  899. return false;
  900. }
  901. var reader = new FileReader();
  902. reader.onload = function(event) {
  903. var imgObj = new Image;
  904. imgObj.src = event.target.result;
  905. imgObj.onload = function() {
  906. var image = new fabric.Image(imgObj);
  907. gcanvas.setBackgroundColor('#ffffff');
  908. gcanvas.setBackgroundImage(image, gcanvas.renderAll.bind(gcanvas), {
  909. scaleY: gcanvas.height / image.height,
  910. scaleX: gcanvas.width / image.width
  911. });
  912. slideSrc = "";
  913. }
  914. }
  915. reader.readAsDataURL(e.target.files[0]);
  916. });
  917.  
  918. /* Pencil */
  919.  
  920. $('#ancPencil').click(function() {
  921. readdFlag = 0;
  922. $("#cc").layout('panel', 'east').panel({
  923. //title:'Pencil',
  924. //iconCls:'icon-pencil'
  925. });
  926. eraserFlag = false;
  927. gcanvas.isDrawingMode = true;
  928. gcanvas.freeDrawingBrush.color = $('#txtPencilClrVal').val();
  929. gcanvas.freeDrawingBrush.width = $('#lineSlide').val();
  930. gcanvas.forEachObject(function(obj) {
  931. obj.set({
  932. hasControls: false,
  933. hasBorders: false,
  934. selectable: false
  935. });
  936. });
  937. gcanvas.renderAll();
  938. $('.subProperties').hide();
  939. /*
  940. if( $("#cc").layout('panel','east').panel('options').collapsed ){
  941. $('#cc').layout('expand','east');
  942. }
  943. */
  944. $('#penEdit').show();
  945. });
  946. $('.clsPencilColor').click(function() {
  947. var pclr = $(this).children().css('background-color');
  948. pclr = rgb2hex(pclr);
  949. $('#txtPencilClrVal').val(pclr);
  950. $('#txtPencilClrHexa').val(pclr);
  951. gcanvas.freeDrawingBrush.color = pclr;
  952. gcanvas.renderAll();
  953. });
  954.  
  955. function rgb2hex(rgb) {
  956. rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
  957. return (rgb && rgb.length === 4) ? "#" +
  958. ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
  959. ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
  960. ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
  961. }
  962. $('#lineSlide').numberspinner({
  963. min: 1,
  964. max: 50,
  965. increment: 1,
  966. editable: true,
  967. value: 2,
  968. onChange: function(nv) {
  969. gcanvas.freeDrawingBrush.color = $('#txtPencilClrVal').val();
  970. gcanvas.freeDrawingBrush.width = parseInt(nv);
  971. gcanvas.renderAll();
  972. }
  973. });
  974. $('#txtPencilClrVal').change(function() {
  975. $('#txtPencilClrHexa').val($(this).val());
  976. gcanvas.freeDrawingBrush.color = $(this).val();
  977. gcanvas.renderAll();
  978. });
  979. $('#txtPencilClrHexa').keyup(function() {
  980. $('#txtPencilClrVal').val($(this).val());
  981. gcanvas.freeDrawingBrush.color = $(this).val();
  982. gcanvas.renderAll();
  983. });
  984.  
  985. /* Eraser */
  986. $('#ancEraser').click(function() {
  987. eraserFlag = true;
  988. if (typeof gcanvas.backgroundColor == 'object') {
  989. eraserColor = '#ffffff';
  990. } else {
  991. eraserColor = gcanvas.backgroundColor;
  992. }
  993. $("#cc").layout('panel', 'east').panel({
  994. // title:'Eraser',
  995. //iconCls:'icon-eraser'
  996. });
  997. eraserArray.push(eraserColor);
  998. gcanvas.freeDrawingBrush.color = eraserColor;
  999. gcanvas.freeDrawingBrush.width = $('#eraserSlide').val();
  1000. gcanvas.isDrawingMode = true;
  1001. gcanvas.forEachObject(function(obj) {
  1002. obj.set({
  1003. hasControls: false,
  1004. hasBorders: false,
  1005. selectable: false
  1006. });
  1007. });
  1008. gcanvas.renderAll();
  1009. $('.subProperties').hide();
  1010. /*
  1011. if( $("#cc").layout('panel','east').panel('options').collapsed ){
  1012. $('#cc').layout('expand','east');
  1013. }
  1014. */
  1015. $('#eraseOptions').show();
  1016. });
  1017.  
  1018. $('#eraserSlide').numberspinner({
  1019. min: 1,
  1020. max: 50,
  1021. increment: 1,
  1022. editable: true,
  1023. value: 2,
  1024. onChange: function(nv) {
  1025. eraserFlag = true;
  1026. eraserColor = gcanvas.backgroundColor;
  1027. gcanvas.freeDrawingBrush.color = eraserColor;
  1028. gcanvas.freeDrawingBrush.width = parseInt(nv);
  1029. gcanvas.renderAll();
  1030. }
  1031. });
  1032.  
  1033. /* Shapes */
  1034.  
  1035. var shapeArry = new Array();
  1036. var shapenum = 1;
  1037. $('#ancShape').click(function() {
  1038. $("#cc").layout('panel', 'east').panel({
  1039. //title:'Shapes',
  1040. //iconCls:'icon-shapes'
  1041. });
  1042. eraserFlag = false;
  1043. gcanvas.isDrawingMode = false;
  1044. gcanvas.forEachObject(function(obj) {
  1045. obj.set({
  1046. hasControls: false,
  1047. hasBorders: false,
  1048. selectable: false
  1049. });
  1050. });
  1051. gcanvas.renderAll();
  1052. $('.subProperties').hide();
  1053. /*
  1054. if( $("#cc").layout('panel','east').panel('options').collapsed ){
  1055. $('#cc').layout('expand','east');
  1056. }
  1057. */
  1058. $('#shapeOptions').show();
  1059. if (shapenum > 1) {
  1060. for (var i = 1; i <= shapenum - 1; i++) {
  1061. shapeArry[i].set({
  1062. hasControls: true,
  1063. hasBorders: true,
  1064. selectable: true
  1065. });
  1066. }
  1067. }
  1068. });
  1069. $('.shapeFillColor').click(function() {
  1070. var fclr = $(this).children().css('background-color');
  1071. fclr = rgb2hex(fclr);
  1072. $('#txtFillClrVal').val(fclr);
  1073. $('#txtFillClrHexa').val(fclr);
  1074. var cobj = gcanvas.getActiveObject();
  1075. cobj.setFill(fclr);
  1076. gcanvas.renderAll();
  1077. });
  1078. $('#shapeRect').click(function() {
  1079. addRect(shapenum);
  1080. shapenum++;
  1081. });
  1082. $('#shapeSquare').click(function() {
  1083. addSquare(shapenum);
  1084. shapenum++;
  1085. });
  1086. $('#shapeCircle').click(function() {
  1087. addCircle(shapenum);
  1088. shapenum++;
  1089. });
  1090. $('#shapeTriangle').click(function() {
  1091. addTriangle(shapenum);
  1092. shapenum++;
  1093. });
  1094. $('#shapeLine').click(function() {
  1095. addLine(shapenum);
  1096. shapenum++;
  1097. });
  1098. $('#shapeEllipse').click(function() {
  1099. addEllipse(shapenum);
  1100. shapenum++;
  1101. });
  1102.  
  1103. function addRect(shapenum) {
  1104. shapeArry[shapenum] = new fabric.Rect({
  1105. width: 200,
  1106. height: 100,
  1107. left: 50,
  1108. top: 50,
  1109. fill: '',
  1110. stroke: '#000000',
  1111. strokeWidth: 2
  1112. });
  1113. shapeArry[shapenum].on('selected', function(e) {
  1114. $('#txtFillClrVal').val(this.getFill());
  1115. $('#txtFillClrHexa').val(this.getFill());
  1116. $('#txtShapeOutline').val(this.getStrokeWidth());
  1117. $('#txtShapeOutlineClrVal').val(this.getStroke());
  1118. $('#txtShapeOutlineHexavalue').val(this.getStroke());
  1119. gcanvas.bringForward(this);
  1120. });
  1121. gcanvas.add(shapeArry[shapenum]);
  1122. gcanvas.centerObject(shapeArry[shapenum]);
  1123. shapeArry[shapenum].setCoords();
  1124. gcanvas.setActiveObject(shapeArry[shapenum]);
  1125. gcanvas.renderAll();
  1126. };
  1127.  
  1128. function addSquare(shapenum) {
  1129. shapeArry[shapenum] = new fabric.Rect({
  1130. width: 100,
  1131. height: 100,
  1132. left: 150,
  1133. top: 50,
  1134. fill: '',
  1135. stroke: '#000000',
  1136. strokeWidth: 2
  1137. });
  1138. shapeArry[shapenum].on('selected', function(e) {
  1139. $('#txtFillClrVal').val(this.getFill());
  1140. $('#txtFillClrHexa').val(this.getFill());
  1141. $('#txtShapeOutline').val(this.getStrokeWidth());
  1142. $('#txtShapeOutlineClrVal').val(this.getStroke());
  1143. $('#txtShapeOutlineHexavalue').val(this.getStroke());
  1144. gcanvas.bringForward(this);
  1145. });
  1146. gcanvas.add(shapeArry[shapenum]);
  1147. gcanvas.centerObject(shapeArry[shapenum]);
  1148. shapeArry[shapenum].setCoords();
  1149. gcanvas.setActiveObject(shapeArry[shapenum]);
  1150. gcanvas.renderAll();
  1151. };
  1152.  
  1153. function addCircle(shapenum) {
  1154. shapeArry[shapenum] = new fabric.Circle({
  1155. radius: 50,
  1156. fill: '',
  1157. stroke: '#000000',
  1158. strokeWidth: 2
  1159. });
  1160. shapeArry[shapenum].on('selected', function(e) {
  1161. $('#txtFillClrVal').val(this.getFill());
  1162. $('#txtFillClrHexa').val(this.getFill());
  1163. $('#txtShapeOutline').val(this.getStrokeWidth());
  1164. $('#txtShapeOutlineClrVal').val(this.getStroke());
  1165. $('#txtShapeOutlineHexavalue').val(this.getStroke());
  1166. gcanvas.bringForward(this);
  1167. });
  1168. gcanvas.add(shapeArry[shapenum]);
  1169. gcanvas.centerObject(shapeArry[shapenum]);
  1170. shapeArry[shapenum].setCoords();
  1171. gcanvas.setActiveObject(shapeArry[shapenum]);
  1172. gcanvas.renderAll();
  1173. };
  1174.  
  1175. function addTriangle(shapenum) {
  1176. shapeArry[shapenum] = new fabric.Triangle({
  1177. width: 100,
  1178. height: 100,
  1179. fill: '',
  1180. stroke: '#000000',
  1181. strokeWidth: 2
  1182. });
  1183. shapeArry[shapenum].on('selected', function(e) {
  1184. $('#txtFillClrVal').val(this.getFill());
  1185. $('#txtFillClrHexa').val(this.getFill());
  1186. $('#txtShapeOutline').val(this.getStrokeWidth());
  1187. $('#txtShapeOutlineClrVal').val(this.getStroke());
  1188. $('#txtShapeOutlineHexavalue').val(this.getStroke());
  1189. gcanvas.bringForward(this);
  1190. });
  1191. gcanvas.add(shapeArry[shapenum]);
  1192. gcanvas.centerObject(shapeArry[shapenum]);
  1193. shapeArry[shapenum].setCoords();
  1194. gcanvas.setActiveObject(shapeArry[shapenum]);
  1195. gcanvas.renderAll();
  1196. };
  1197.  
  1198. function addLine(shapenum) {
  1199. shapeArry[shapenum] = new fabric.Line([0, 0, 200, 0], {
  1200. fill: '#000000',
  1201. stroke: '#000000',
  1202. strokeWidth: 2
  1203. });
  1204. shapeArry[shapenum].on('selected', function(e) {
  1205. $('#txtFillClrVal').val(this.getFill());
  1206. $('#txtFillClrHexa').val(this.getFill());
  1207. $('#txtShapeOutline').val(this.getStrokeWidth());
  1208. $('#txtShapeOutlineClrVal').val(this.getStroke());
  1209. $('#txtShapeOutlineHexavalue').val(this.getStroke());
  1210. gcanvas.bringForward(this);
  1211. });
  1212. gcanvas.add(shapeArry[shapenum]);
  1213. gcanvas.centerObject(shapeArry[shapenum]);
  1214. shapeArry[shapenum].setCoords();
  1215. gcanvas.setActiveObject(shapeArry[shapenum]);
  1216. gcanvas.renderAll();
  1217. };
  1218.  
  1219. function addEllipse(shapenum) {
  1220. shapeArry[shapenum] = new fabric.Ellipse({
  1221. fill: '',
  1222. stroke: '#000000',
  1223. strokeWidth: 2,
  1224. rx: 100,
  1225. ry: 50
  1226. });
  1227. shapeArry[shapenum].on('selected', function(e) {
  1228. $('#txtFillClrVal').val(this.getFill());
  1229. $('#txtFillClrHexa').val(this.getFill());
  1230. $('#txtShapeOutline').val(this.getStrokeWidth());
  1231. $('#txtShapeOutlineClrVal').val(this.getStroke());
  1232. $('#txtShapeOutlineHexavalue').val(this.getStroke());
  1233. gcanvas.bringForward(this);
  1234. });
  1235. gcanvas.add(shapeArry[shapenum]);
  1236. gcanvas.centerObject(shapeArry[shapenum]);
  1237. shapeArry[shapenum].setCoords();
  1238. gcanvas.setActiveObject(shapeArry[shapenum]);
  1239. gcanvas.renderAll();
  1240. };
  1241.  
  1242. $('#txtFillClrHexa').keyup(function() {
  1243. $('#txtFillClrVal').val($(this).val());
  1244. var cobj = gcanvas.getActiveObject();
  1245. cobj.setFill($(this).val());
  1246. gcanvas.renderAll();
  1247. });
  1248. $('#txtFillClrVal').change(function() {
  1249. $('#txtFillClrHexa').val($(this).val());
  1250. var cobj = gcanvas.getActiveObject();
  1251. cobj.setFill($(this).val());
  1252. gcanvas.renderAll();
  1253. });
  1254. $('#txtShapeOutline').keyup(function() {
  1255. var cobj = gcanvas.getActiveObject();
  1256. cobj.set({
  1257. strokeWidth: parseInt($(this).val())
  1258. });
  1259. gcanvas.renderAll();
  1260. });
  1261. $('#txtShapeOutlineHexavalue').keyup(function() {
  1262. $('#txtShapeOutlineClrVal').val($(this).val());
  1263. var cobj = gcanvas.getActiveObject();
  1264. cobj.setStroke($(this).val());
  1265. gcanvas.renderAll();
  1266. });
  1267. $('#txtShapeOutlineClrVal').change(function() {
  1268. $('#txtShapeOutlineHexavalue').val($(this).val());
  1269. var cobj = gcanvas.getActiveObject();
  1270. cobj.setStroke($(this).val());
  1271. gcanvas.renderAll();
  1272. });
  1273.  
  1274. $('.clrDynamicCanvas').click(function() {
  1275. if (gcanvas.getObjects().length > 0) {
  1276. var confirmFlag = confirm("Do you really want to clear the board?");
  1277. if (confirmFlag == true) {
  1278. gcanvas.clear();
  1279. gcanvas.freeDrawingBrush.width = 2;
  1280. gcanvas.freeDrawingBrush.color = '#000000';
  1281. eraserFlag = false;
  1282. gcanvas.renderAll();
  1283. $('#lineSlide').numberspinner({
  1284. value: 2
  1285. });
  1286. $('#eraserSlide').numberspinner({
  1287. value: 2
  1288. });
  1289. $('#txtPencilClrVal').val('#000000');
  1290. $('#txtPencilClrHexa').val('#000000');
  1291. $('#txtShapeOutline').val(2);
  1292. $('#txtShapeOutlineHexavalue').val('#000000');
  1293. $('#txtShapeOutlineClrVal').val('#000000');
  1294. $('#txtFillClrVal').val('#000000');
  1295. $('#txtFillClrHexa').val('#000000');
  1296. txtNum = 1;
  1297. shapenum = 1;
  1298. }
  1299. }
  1300. });
  1301.  
  1302. $('#btnRemoveShape').click(function() {
  1303. var cobj = gcanvas.getActiveObject();
  1304. gcanvas.remove(cobj);
  1305. gcanvas.renderAll();
  1306. $('#txtShapeOutline').val(2);
  1307. $('#txtShapeOutlineHexavalue').val('#000000');
  1308. $('#txtShapeOutlineClrVal').val('#000000');
  1309. $('#txtFillClrVal').val('#000000');
  1310. $('#txtFillClrHexa').val('#000000');
  1311. });
  1312.  
  1313. /* Text */
  1314.  
  1315. var txtNum = 1;
  1316. var iTextArr = new Array();
  1317. var textArr = new Array();
  1318. var fontArr = new Array();
  1319. var alignArr = new Array();
  1320. var styleArr = new Array();
  1321. var sizeArr = new Array();
  1322. var colorArr = new Array();
  1323.  
  1324. $('#ancText').click(function() {
  1325. $("#cc").layout('panel', 'east').panel({
  1326. // title:'Text',
  1327. // iconCls:'icon-text'
  1328. });
  1329. eraserFlag = false;
  1330. gcanvas.isDrawingMode = false;
  1331. gcanvas.forEachObject(function(obj) {
  1332. obj.set({
  1333. hasControls: false,
  1334. hasBorders: false,
  1335. selectable: false
  1336. });
  1337. });
  1338. gcanvas.renderAll();
  1339. $('.subProperties').hide();
  1340. /*
  1341. if( $("#cc").layout('panel','east').panel('options').collapsed ){
  1342. $('#cc').layout('expand','east');
  1343. }
  1344. */
  1345. $('#textOptions').show();
  1346. if (txtNum > 1) {
  1347. for (var i = 1; i <= txtNum - 1; i++) {
  1348. iTextArr[i].set({
  1349. hasControls: true,
  1350. hasBorders: true,
  1351. selectable: true
  1352. });
  1353. }
  1354. }
  1355. addText(txtNum);
  1356. txtNum++;
  1357. });
  1358.  
  1359. function addText(num) {
  1360. textArr[num] = 'Sample Text';
  1361. fontArr[num] = 'Times New Roman';
  1362. alignArr[num] = 'left';
  1363. sizeArr[num] = '20';
  1364. styleArr[num] = 'normal';
  1365. colorArr[num] = '#ff0000';
  1366. $('.divStyleBold i, .divStyleItalic i').css({
  1367. 'background-color': "#ffffff",
  1368. 'color': '#000000'
  1369. });
  1370. $('.divAlign i').css({
  1371. 'background-color': "#ffffff",
  1372. 'color': '#000000'
  1373. });
  1374. $('#alignleft i').css({
  1375. 'background-color': "#424242",
  1376. 'color': '#ffffff'
  1377. });
  1378. iTextArr[num] = new fabric.IText(textArr[num], {
  1379. fill: colorArr[num],
  1380. hasControls: true,
  1381. hasBorders: true,
  1382. hasRotatingPoint: true
  1383. });
  1384. iTextArr[num].set({
  1385. fontFamily: fontArr[num],
  1386. textAlign: alignArr[num],
  1387. fontStyle: styleArr[num],
  1388. fontSize: sizeArr[num],
  1389. padding: 5
  1390. });
  1391. iTextArr[num].on('selected', function(e) {
  1392. $('#txtStyle').val(this.getFontFamily());
  1393. $('#txtText').val(this.getText());
  1394. $('#txtTextSize').val(this.getFontSize());
  1395. $('#txtClrVal').val(this.getFill());
  1396. $('#txtHexavalue').val(this.getFill());
  1397. $('#txtOutline').val(this.getStrokeWidth());
  1398. $('#txtOutlineClrVal').val(this.getStroke());
  1399. $('#txtOutlineHexavalue').val(this.getStroke());
  1400. $('#txtBGClrVal').val(this.getTextBackgroundColor());
  1401. $('#txtBGHexavalue').val(this.getTextBackgroundColor());
  1402. var alignopt = this.getTextAlign();
  1403. var styleopt = this.getFontStyle();
  1404. var weightopt = this.getFontWeight();
  1405. $('.divAlign i').css({
  1406. 'background-color': "#ffffff",
  1407. 'color': '#000000'
  1408. });
  1409. $('#align' + alignopt + ' i').css({
  1410. 'background-color': "#424242",
  1411. 'color': '#ffffff'
  1412. });
  1413. $('.divStyleBold i').css({
  1414. 'background-color': "#ffffff",
  1415. 'color': '#000000'
  1416. });
  1417. $('#style' + weightopt + ' i').css({
  1418. 'background-color': "#424242",
  1419. 'color': '#ffffff'
  1420. });
  1421. $('.divStyleItalic i').css({
  1422. 'background-color': "#ffffff",
  1423. 'color': '#000000'
  1424. });
  1425. $('#style' + styleopt + ' i').css({
  1426. 'background-color': "#424242",
  1427. 'color': '#ffffff'
  1428. });
  1429. });
  1430. gcanvas.on('text:changed', function(e) {
  1431. var cobj = gcanvas.getActiveObject();
  1432. $('#txtText').val(cobj.getText());
  1433. });
  1434. gcanvas.add(iTextArr[num]);
  1435. gcanvas.setActiveObject(iTextArr[num]);
  1436. gcanvas.centerObject(iTextArr[num]);
  1437. iTextArr[num].setCoords();
  1438. gcanvas.renderAll();
  1439. }
  1440. $('#btnNewText').click(function() {
  1441. addText(txtNum);
  1442. txtNum++;
  1443. });
  1444. $('#btnRemoveText').click(function() {
  1445. var cobj = gcanvas.getActiveObject();
  1446. gcanvas.remove(cobj);
  1447. $('.divStyleBold i, .divStyleItalic i').css({
  1448. 'background-color': "#ffffff",
  1449. 'color': '#000000'
  1450. });
  1451. $('.divAlign i').css({
  1452. 'background-color': "#ffffff",
  1453. 'color': '#000000'
  1454. });
  1455. $('#alignleft i').css({
  1456. 'background-color': "#424242",
  1457. 'color': '#ffffff'
  1458. });
  1459. $('#txtStyle').val('Times New Roman');
  1460. $('#txtText').val('Sample Text');
  1461. $('#txtTextSize').val(20);
  1462. $('#txtClrVal').val('#ff0000');
  1463. $('#txtHexavalue').val('#ff0000');
  1464. $('#txtOutline').val(1);
  1465. $('#txtOutlineClrVal').val('#000000');
  1466. $('#txtOutlineHexavalue').val('#000000');
  1467. $('#txtBGClrVal').val('#000000');
  1468. $('#txtBGHexavalue').val('#000000');
  1469. });
  1470. $('#txtStyle').change(function() {
  1471. var cobj = gcanvas.getActiveObject();
  1472. cobj.set({
  1473. fontFamily: $(this).val()
  1474. });
  1475. gcanvas.renderAll();
  1476. });
  1477. var flagAlign = 1;
  1478. $('.divAlign').click(function() {
  1479. $('.divAlign i').css({
  1480. 'background-color': "#ffffff",
  1481. 'color': '#000000'
  1482. });
  1483. $(this).find('i').css({
  1484. 'background-color': "#424242",
  1485. 'color': '#ffffff'
  1486. });
  1487. var cobj = gcanvas.getActiveObject();
  1488. var v = $(this).attr('data-opt');
  1489. cobj.set({
  1490. textAlign: v
  1491. });
  1492. gcanvas.renderAll();
  1493. });
  1494. var flagBold = 0;
  1495. var flagItalic = 0;
  1496. $('.divStyleBold').click(function() {
  1497. var cobj = gcanvas.getActiveObject();
  1498. if (flagBold) {
  1499. flagBold = 0;
  1500. if (flagItalic == 1) {
  1501. cobj.set({
  1502. fontStyle: 'italic',
  1503. fontWeight: ''
  1504. });
  1505. } else {
  1506. cobj.set({
  1507. fontStyle: 'normal',
  1508. fontWeight: ''
  1509. });
  1510. }
  1511. $('.divStyleBold i').css({
  1512. 'background-color': "#ffffff",
  1513. 'color': '#000000'
  1514. });
  1515. } else {
  1516. flagBold = 1;
  1517. if (flagItalic == 1) {
  1518. cobj.set({
  1519. fontStyle: 'italic',
  1520. fontWeight: 'bold'
  1521. });
  1522. } else {
  1523. cobj.set({
  1524. fontStyle: 'normal',
  1525. fontWeight: 'bold'
  1526. });
  1527. }
  1528. $('.divStyleBold i').css({
  1529. 'background-color': "#424242",
  1530. 'color': '#ffffff'
  1531. });
  1532. }
  1533. gcanvas.renderAll();
  1534. });
  1535. $('.divStyleItalic').click(function() {
  1536. var cobj = gcanvas.getActiveObject();
  1537. if (flagItalic == 1) {
  1538. flagItalic = 0;
  1539. if (flagBold == 1) {
  1540. cobj.set({
  1541. fontStyle: '',
  1542. fontWeight: 'bold'
  1543. });
  1544. } else {
  1545. cobj.set({
  1546. fontStyle: '',
  1547. fontWeight: 'normal'
  1548. });
  1549. }
  1550. $('.divStyleItalic i').css({
  1551. 'background-color': "#ffffff",
  1552. 'color': '#000000'
  1553. });
  1554. } else {
  1555. flagItalic = 1;
  1556. if (flagBold == 1) {
  1557. cobj.set({
  1558. fontStyle: 'italic',
  1559. fontWeight: 'bold'
  1560. });
  1561. } else {
  1562. cobj.set({
  1563. fontStyle: 'italic',
  1564. fontWeight: 'normal'
  1565. });
  1566. }
  1567. $('.divStyleItalic i').css({
  1568. 'background-color': "#424242",
  1569. 'color': '#ffffff'
  1570. });
  1571. }
  1572. gcanvas.renderAll();
  1573. });
  1574. $('#txtText').keyup(function() {
  1575. var cobj = gcanvas.getActiveObject();
  1576. cobj.setText($(this).val());
  1577. gcanvas.renderAll();
  1578. });
  1579. $('#txtTextSize').keyup(function() {
  1580. var cobj = gcanvas.getActiveObject();
  1581. cobj.setFontSize($(this).val());
  1582. gcanvas.renderAll();
  1583. });
  1584. $('#txtHexavalue').keyup(function() {
  1585. $('#txtClrVal').val($(this).val());
  1586. var cobj = gcanvas.getActiveObject();
  1587. cobj.setFill($(this).val());
  1588. gcanvas.renderAll();
  1589. });
  1590. $('#txtClrVal').change(function() {
  1591. $('#txtHexavalue').val($(this).val());
  1592. var cobj = gcanvas.getActiveObject();
  1593. cobj.setFill($(this).val());
  1594. gcanvas.renderAll();
  1595. });
  1596. $('#txtBGHexavalue').keyup(function() {
  1597. $('#txtBGClrVal').val($(this).val());
  1598. var cobj = gcanvas.getActiveObject();
  1599. cobj.setTextBackgroundColor($(this).val());
  1600. gcanvas.renderAll();
  1601. });
  1602. $('#txtBGClrVal').change(function() {
  1603. $('#txtBGHexavalue').val($(this).val());
  1604. var cobj = gcanvas.getActiveObject();
  1605. cobj.setTextBackgroundColor($(this).val());
  1606. gcanvas.renderAll();
  1607. });
  1608.  
  1609. $('#txtOutlineHexavalue').keyup(function() {
  1610. $('#txtOutlineClrVal').val($(this).val());
  1611. var cobj = gcanvas.getActiveObject();
  1612. var sval = $('#txtOutline').val();
  1613. cobj.set({
  1614. stroke: $(this).val(),
  1615. strokeWidth: sval
  1616. });
  1617. gcanvas.renderAll();
  1618. });
  1619. $('#txtOutlineClrVal').change(function() {
  1620. $('#txtOutlineHexavalue').val($(this).val());
  1621. var cobj = gcanvas.getActiveObject();
  1622. var sval = $('#txtOutline').val();
  1623. cobj.set({
  1624. stroke: $(this).val(),
  1625. strokeWidth: sval
  1626. });
  1627. gcanvas.renderAll();
  1628. });
  1629. $('#txtOutline').keyup(function() {
  1630. var cobj = gcanvas.getActiveObject();
  1631. var sval = $('#txtOutlineHexavalue').val();
  1632. cobj.set({
  1633. strokeWidth: $(this).val(),
  1634. stroke: sval
  1635. });
  1636. gcanvas.renderAll();
  1637. });
  1638.  
  1639. /* Download */
  1640.  
  1641. $('#ancDownload').click(function() {
  1642. $("#cc").layout('panel', 'east').panel({
  1643. // title:'Download / Upload',
  1644. // iconCls:'icon-upload'
  1645. });
  1646. eraserFlag = false;
  1647. gcanvas.isDrawingMode = false;
  1648. gcanvas.forEachObject(function(obj) {
  1649. obj.set({
  1650. hasControls: false,
  1651. hasBorders: false,
  1652. selectable: false
  1653. });
  1654. });
  1655. gcanvas.renderAll();
  1656. $('.subProperties').hide();
  1657. /*
  1658. if( $("#cc").layout('panel','east').panel('options').collapsed ){
  1659. $('#cc').layout('expand','east');
  1660. }
  1661. */
  1662. $('#downloadOptions').show();
  1663. });
  1664. var dimgCount = 1;
  1665. $('#ancDwnJson').click(function() {
  1666. var canvasData = gcanvas.toJSON();
  1667. canvasData = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(canvasData));
  1668. var a = $("<a>").attr("href", canvasData).attr("download", 'tp-whiteboard-' + dimgCount + '.board').appendTo("body");
  1669. a[0].click();
  1670. a.remove();
  1671. dimgCount++;
  1672. });
  1673. $('#ancDwnJpeg').click(function() {
  1674. var canvasData = gcanvas.toDataURL();
  1675. var a = $("<a>").attr("href", canvasData).attr("download", 'tp-whiteboard-' + dimgCount + '.jpg').appendTo("body");
  1676. a[0].click();
  1677. a.remove();
  1678. dimgCount++;
  1679. });
  1680.  
  1681.  
  1682. /* Upload JSON */
  1683.  
  1684. $('#ancUpload').click(function() {
  1685. eraserFlag = false;
  1686. gcanvas.isDrawingMode = false;
  1687. gcanvas.forEachObject(function(obj) {
  1688. obj.set({
  1689. hasControls: false,
  1690. hasBorders: false,
  1691. selectable: false
  1692. });
  1693. });
  1694. gcanvas.renderAll();
  1695. $('.subProperties').hide();
  1696. /*
  1697. if( $("#cc").layout('panel','east').panel('options').collapsed ){
  1698. $('#cc').layout('expand','east');
  1699. }
  1700. */
  1701. $('#uploadOptions').show();
  1702. });
  1703. $('#btnUpload').click(function() {
  1704. $('#fileJson').trigger('click');
  1705. });
  1706. $('#fileJson').change(function(e) {
  1707. var file = $('#fileJson').val();
  1708. var exts = ['board'];
  1709. if (file.length <= 0) {
  1710. alert("Please select a file from local drive.");
  1711. $('#fileJson').focus();
  1712. return false;
  1713. }
  1714. var ext = file.split('.');
  1715. ext = ext.reverse();
  1716. if ($.inArray(ext[0].toLowerCase(), exts) < 0) {
  1717. alert("Please select board format files only.");
  1718. $('#fileJson').focus();
  1719. return false;
  1720. }
  1721. var inputs = new FormData();
  1722. inputs.append('jsonfile', $("#fileJson").prop("files")[0]);
  1723. var url = "upload_board.php";
  1724. $('.wrapLoader').show();
  1725. $.ajax({
  1726. url: url,
  1727. method: "POST",
  1728. cache: false,
  1729. data: inputs,
  1730. processData: false,
  1731. contentType: false
  1732. }).done(function(msg) {
  1733. gcanvas.loadFromJSON(msg, gcanvas.renderAll.bind(gcanvas));
  1734. gcanvas.forEachObject(function(obj) {
  1735. if (obj.type == 'path') {
  1736. obj.set({
  1737. hasControls: false,
  1738. hasBorders: false,
  1739. selectable: false
  1740. });
  1741. }
  1742. });
  1743. $('.wrapLoader').hide();
  1744. });
  1745. });
  1746.  
  1747. /* Image */
  1748.  
  1749. $('#ancImage').click(function() {
  1750. $('#fileImage').trigger('click');
  1751. $("#cc").layout('panel', 'east').panel({
  1752. // title:'Image',
  1753. // iconCls:'icon-image'
  1754. });
  1755. eraserFlag = false;
  1756. gcanvas.isDrawingMode = false;
  1757. gcanvas.forEachObject(function(obj) {
  1758. if (typeof obj == 'object' && !obj.hasOwnProperty('minScaleLimit') && !obj.hasOwnProperty('text') && !obj.hasOwnProperty('stroke')) {
  1759. obj.set({
  1760. hasControls: true,
  1761. hasBorders: true,
  1762. selectable: true
  1763. });
  1764. } else {
  1765. obj.set({
  1766. hasControls: false,
  1767. hasBorders: false,
  1768. selectable: false
  1769. });
  1770. }
  1771.  
  1772. });
  1773. gcanvas.renderAll();
  1774. $('.subProperties').hide();
  1775. /*
  1776. if( $("#cc").layout('panel','east').panel('options').collapsed ){
  1777. $('#cc').layout('expand','east');
  1778. }
  1779. */
  1780. $('#imageOptions').show();
  1781. });
  1782. $('#btnNewImage').click(function() {
  1783. $('#fileImage').trigger('click');
  1784. });
  1785. $('#fileImage').change(function(e) {
  1786. var file = $('#fileImage').val();
  1787. var exts = ['jpg', 'jpeg', 'png'];
  1788. if (file.length <= 0) {
  1789. alert("Please select a file from local drive.");
  1790. $('#fileImage').focus();
  1791. return false;
  1792. }
  1793. var ext = file.split('.');
  1794. ext = ext.reverse();
  1795. if ($.inArray(ext[0].toLowerCase(), exts) < 0) {
  1796. alert("Please select jpg/jpeg/png format files only.");
  1797. $('#fileImage').focus();
  1798. return false;
  1799. }
  1800. var reader = new FileReader();
  1801. reader.onload = function(event) {
  1802. var imgObj = new Image;
  1803. imgObj.src = event.target.result;
  1804. imgObj.onload = function() {
  1805. var image = new fabric.Image(imgObj);
  1806. gcanvas.add(image);
  1807. gcanvas.centerObject(image);
  1808. gcanvas.setActiveObject(image);
  1809. image.setCoords();
  1810. gcanvas.renderAll();
  1811. }
  1812. }
  1813. reader.readAsDataURL(e.target.files[0]);
  1814. });
  1815. $('#btnRemoveImage').click(function() {
  1816. var cobj = gcanvas.getActiveObject();
  1817. gcanvas.remove(cobj);
  1818. gcanvas.renderAll();
  1819. });
  1820.  
  1821. /* Undo/Redo */
  1822.  
  1823. var reflag = false;
  1824. var cstep = 0;
  1825. var i = 0;
  1826. gcanvas.on('object:added', function(opt) {
  1827. totArray[i] = opt.target;
  1828. i++;
  1829. });
  1830.  
  1831. function doUndo() {
  1832. if (i > 0) {
  1833. reflag = true;
  1834. gcanvas.remove(totArray[i - 1]);
  1835. i--;
  1836. }
  1837. }
  1838. $('#ancUndo').click(function() {
  1839. doUndo();
  1840. });
  1841.  
  1842. function doRedo() {
  1843. if (i < totArray.length) {
  1844. gcanvas.add(totArray[i]);
  1845. if (!reflag) {
  1846. i++;
  1847. }
  1848. }
  1849. }
  1850. $('#ancRedo').click(function() {
  1851. doRedo();
  1852. });
  1853. $(document).keydown(function(e) {
  1854. //e.preventDefault();
  1855. if (e.which == 90 && (e.metaKey && e.shiftKey)) {
  1856. e.preventDefault();
  1857. doRedo();
  1858. } else if (e.which == 89 && e.ctrlKey) {
  1859. e.preventDefault();
  1860. doRedo();
  1861. } else if (e.which == 90 && e.ctrlKey) {
  1862. e.preventDefault();
  1863. doUndo();
  1864. } else if (e.which == 90 && e.metaKey) {
  1865. e.preventDefault();
  1866. doUndo();
  1867. } else if (e.which == 187 && (e.metaKey || e.ctrlKey)) {
  1868. e.preventDefault();
  1869. if (eraserFlag) {
  1870. var penSize = parseInt($('#eraserSlide').numberspinner('getValue'));
  1871. penSize++;
  1872. $('#eraserSlide').numberspinner('setValue', penSize);
  1873. } else {
  1874. var penSize = parseInt($('#lineSlide').numberspinner('getValue'));
  1875. penSize++;
  1876. $('#lineSlide').numberspinner('setValue', penSize);
  1877. }
  1878. } else if (e.which == 189 && (e.metaKey || e.ctrlKey)) {
  1879. e.preventDefault();
  1880. if (eraserFlag) {
  1881. var penSize = parseInt($('#eraserSlide').numberspinner('getValue'));
  1882. penSize--;
  1883. $('#eraserSlide').numberspinner('setValue', penSize);
  1884. } else {
  1885. var penSize = parseInt($('#lineSlide').numberspinner('getValue'));
  1886. penSize--;
  1887. $('#lineSlide').numberspinner('setValue', penSize);
  1888. }
  1889. }
  1890. });
  1891. /* Help */
  1892. var panels = $('.easyui-accordion').accordion('panels');
  1893. $.each(panels, function() {
  1894. this.panel('collapse');
  1895. });
  1896. $('#ancHelpMain').click(function() {
  1897. $('.subProperties').hide();
  1898. /*
  1899. if( $("#cc").layout('panel','east').panel('options').collapsed ){
  1900. $('#cc').layout('expand','east');
  1901. }
  1902. */
  1903. $("#cc").layout('panel', 'east').panel({
  1904. //title:'Help',
  1905. //iconCls:'icon-help'
  1906. });
  1907. $('#helpOptions').show();
  1908. });
  1909. $('#helpWindow').window('close');
  1910.  
  1911. $(document).click(function(){
  1912. var $el = $("#helpOptions");
  1913. if ($el.is(":visible")) {
  1914. $el.hide();
  1915. $('#helpWindow').window('close');
  1916. }
  1917. });
  1918. $('.ancHelp').click(function(event) {
  1919. event.stopPropagation();
  1920. $('#helpWindow').window('close');
  1921. var imgsrc = 'http://www.tutorialspoint.com/whiteboard/images/help/' + $(this).attr('alt') + '.jpg';
  1922. $('#helpWindow img').attr('src', imgsrc);
  1923. $('#helpWindow').window('open');
  1924. });
  1925. $('html').keyup(function(e) {
  1926. if (e.keyCode == 46 || e.keyCode == 8) {
  1927. var cobj = gcanvas.getActiveObject();
  1928. if(cobj.hasOwnProperty("text")){
  1929. return;
  1930. }
  1931. gcanvas.remove(cobj);
  1932. $('.divStyleBold i, .divStyleItalic i').css({
  1933. 'background-color': "#ffffff",
  1934. 'color': '#000000'
  1935. });
  1936. $('.divAlign i').css({
  1937. 'background-color': "#ffffff",
  1938. 'color': '#000000'
  1939. });
  1940. $('#alignleft i').css({
  1941. 'background-color': "#424242",
  1942. 'color': '#ffffff'
  1943. });
  1944. $('#txtStyle').val('Times New Roman');
  1945. $('#txtText').val('Sample Text');
  1946. $('#txtTextSize').val(20);
  1947. $('#txtClrVal').val('#ff0000');
  1948. $('#txtHexavalue').val('#ff0000');
  1949. $('#txtOutline').val(1);
  1950. $('#txtOutlineClrVal').val('#000000');
  1951. $('#txtOutlineHexavalue').val('#000000');
  1952. $('#txtBGClrVal').val('#000000');
  1953. $('#txtBGHexavalue').val('#000000');
  1954. $('#txtShapeOutline').val(2);
  1955. $('#txtShapeOutlineHexavalue').val('#000000');
  1956. $('#txtShapeOutlineClrVal').val('#000000');
  1957. $('#txtFillClrVal').val('#000000');
  1958. $('#txtFillClrHexa').val('#000000');
  1959. gcanvas.renderAll();
  1960. e.preventDefault();
  1961. return false;
  1962. }
  1963. });
  1964. $('#maximize').click(function() {
  1965. if (screenfull.enabled) {
  1966. screenfull.toggle($('#stage')[0]);
  1967. }
  1968. });
  1969. /*
  1970. $(document).on(screenfull.raw.fullscreenchange, function () {
  1971. if(screenfull.isFullscreen){
  1972. gcanvas.setHeight( window.innerHeight );
  1973. gcanvas.setWidth( window.innerWidth );
  1974. }else{
  1975. gcanvas.setHeight($('#center').height());
  1976. gcanvas.setWidth($('#center').width());
  1977. }
  1978. gcanvas.calcOffset();
  1979. gcanvas.forEachObject(function(o) {
  1980. o.setCoords();
  1981. });
  1982. gcanvas.renderAll();
  1983. });
  1984. */
  1985. $("#cc").layout('panel', 'center').panel({
  1986. onResize: function(w, h) {
  1987. if (screenfull.isFullscreen) {
  1988. gcanvas.setHeight(window.innerHeight);
  1989. gcanvas.setWidth(window.innerWidth);
  1990. } else {
  1991. gcanvas.setHeight(h);
  1992. gcanvas.setWidth(w);
  1993. }
  1994. displaySlide(slideSrc);
  1995. gcanvas.calcOffset();
  1996. gcanvas.forEachObject(function(o) {
  1997. o.setCoords();
  1998. });
  1999. gcanvas.renderAll();
  2000. }
  2001. });
  2002. $('#ancPattern').click(function() {
  2003. $('.subProperties').hide();
  2004. $("#cc").layout('panel', 'east').panel({
  2005. // title:'Pattern',
  2006. // iconCls:'icon-bgcolor'
  2007. });
  2008. $('#bgPattern').show();
  2009. });
  2010. $('#ancHelpMain').click(function(event) {
  2011. event.stopPropagation();
  2012. $('#helpOptions').show();
  2013. });
  2014.  
  2015. $('#btnDisplayMenu').hide();
  2016. $('#btnShowMenu').click(function(event) {
  2017. event.stopPropagation();
  2018. $('#btnDisplayMenu').toggle();
  2019. });
  2020. $(document).click(function() {
  2021. // $('#btnDisplayMenu').hide();
  2022. // $('#helpOptions').hide();
  2023. // $('#helpWindow').window('close');
  2024. var $el = $("#btnDisplayMenu");
  2025. if ($el.is(":visible")) {
  2026. $el.toggle();
  2027. }
  2028. });
  2029. $('#btnDisplayMenu').click(function(event) {
  2030. event.stopPropagation();
  2031. //$('#btnDisplayMenu').show();
  2032. });
  2033.  
  2034.  
  2035. $("#cc").layout('collapse', 'south');
  2036. $("#cc").layout('collapse', 'east');
  2037. ////////////////////////////////////////////
  2038. function validateEmail(value) {
  2039. var regex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  2040. return (regex.test(value)) ? true : false;
  2041. }
  2042.  
  2043. function validateEmails(string) {
  2044. var result = string.replace(/\s/g, "").split(/,|;/);
  2045.  
  2046. for (var i = 0; i < result.length; i++) {
  2047. if (!validateEmail(result[i])) {
  2048. return false;
  2049. }
  2050. }
  2051. return true;
  2052. }
  2053. $('#btnSendInvite').bind('click', function() {
  2054. $('#invite').dialog('open');
  2055. });
  2056. $.extend($.fn.validatebox.defaults.rules, {
  2057. emails: {
  2058. validator: function(value) {
  2059. return validateEmails(value);
  2060. },
  2061. message: 'Enter correct Email IDs'
  2062. }
  2063. });
  2064. //global RTCMultiConnection object
  2065. var connection = new RTCMultiConnection();
  2066. //whether we init slickjs for the 1st time(need for correct unslick() function)
  2067. var isFirstSlickInit = true;
  2068. //container for user faces in the top part of the chat
  2069. var containerUserFaces = $("#containerUserFaces");
  2070. //container for bigger user video and the fullscreen button
  2071. var containerBigVideoAndFullscreen = $("#containerBigVideoAndFullscreen");
  2072. //container for bigger video
  2073. var containerBigVideo = $("#containerBigVideo");
  2074. var currentBigVideo = {
  2075. src: "",
  2076. streamid: "",
  2077. enabled: false
  2078. };
  2079. var remoteUserId;
  2080.  
  2081. function setupWebRTC() {
  2082. // custom signaling server
  2083. connection.socketURL = 'https://tools.tutorialspoint.com:9001/';
  2084. connection.socketMessageEvent = 'webrtcTPsocketMsgEvent';
  2085.  
  2086. connection.enableFileSharing = true;
  2087. connection.filesContainer = chatContainer;
  2088. connection.session = {
  2089. audio: true,
  2090. video: true,
  2091. data: true
  2092. };
  2093. connection.sdpConstraints.mandatory = {
  2094. OfferToReceiveAudio: true,
  2095. OfferToReceiveVideo: true
  2096. };
  2097. // Adding display name to the conenction
  2098. connection.extra.user_name = user_name;
  2099. // Local audio and video are disabled by default
  2100. connection.extra.enabledVideo = false;
  2101. connection.extra.isAudioMuted = true;
  2102. console.log(connection);
  2103. }
  2104.  
  2105. //when clicking on the video in the top menu move it to the middle and make bigger
  2106. containerUserFaces.on('click', 'video', function() {
  2107. //save old video stream
  2108. currentBigVideo.src = $(this).attr('src');
  2109. currentBigVideo.streamid = $(this).attr('id');
  2110. currentBigVideo.enabled = true;
  2111. // updateContainerUserFaces();
  2112. // adjustBigVideo();
  2113. });
  2114.  
  2115. $("#create_meeting_room").bind("click", function(e) {
  2116. room_id = $("#room_id").val();
  2117. if (room_id.length < 4) {
  2118. $("#room_id").textbox({
  2119. value: "",
  2120. prompt: "Enter a unique room ID (At least 4 characters)"
  2121. });
  2122. $("#room_id").focus();
  2123. return;
  2124. }
  2125. user_name = $("#user_name").val();
  2126. if (user_name.length < 4) {
  2127. $("#user_name").textbox({
  2128. value: "",
  2129. prompt: "Enter your name (At least 4 characters)"
  2130. });
  2131. $("#user_name").focus();
  2132. return;
  2133. }
  2134. $('#dlg').dialog('close');
  2135. $('.wrapLoader').show();
  2136. /* First check if room exist or not */
  2137. $("#wait").html("Going to create a meeting room with given ID...");
  2138. setupWebRTC();
  2139. connection.checkPresence(room_id, function(isRoomExists, rid) {
  2140. if (isRoomExists) {
  2141. $.messager.alert('Alert', 'Sorry this meeting room is not available!');
  2142. $('.wrapLoader').hide();
  2143. return;
  2144. } else {
  2145. /* Open a new room */
  2146. connection.connectionDescription = connection.open(room_id);
  2147. if ($("#cc").layout('panel', 'east').panel('options').collapsed) {
  2148. $("#cc").layout('expand', 'east');
  2149. }
  2150. $('.wrapLoader').hide();
  2151. $('#btnRaiseHand').hide();
  2152. // Sharing part of screen
  2153. $("#webrtcPanel").show();
  2154. $('#cc').layout('panel', 'east').panel('setTitle', "Meeting Room ID - " + room_id);
  2155. /*
  2156. $("#stage, .subProperties a, .db-nav a").on("touchstart touchend touchmove keyup keypress click mousemove mousedown keydown", function(e){
  2157. var screenshot = gcanvas.toDataURL('image/jpeg', 0.5);
  2158. var dataToSend = {
  2159. screenshot: screenshot,
  2160. screenImage: true
  2161. };
  2162. connection.send(dataToSend);
  2163. });
  2164. */
  2165. console.log( "Height " + gcanvas.height );
  2166. console.log( "Width " + gcanvas.width );
  2167. setInterval(function(){
  2168. var screenshot = gcanvas.toDataURL('image/jpeg', 0.3);
  2169. var dataToSend = {
  2170. screenshot: screenshot,
  2171. screenImage: true
  2172. };
  2173. connection.send(dataToSend);
  2174. }, 1000);
  2175. connection.extra.user_name = user_name;
  2176. var div = document.createElement('div');
  2177. var msg = '<b>' + user_name + '</b> > Created the room';
  2178. div.innerHTML = msg;
  2179. chatContainer.appendChild(div);
  2180. chatContainer.scrollTop = chatContainer.lastChild.offsetTop;
  2181. }
  2182. });
  2183. });
  2184. $("#join_meeting_room").bind("click", function(e) {
  2185. room_id = $("#room_id").val();
  2186. if (room_id.length < 4) {
  2187. $("#room_id").textbox({
  2188. value: "",
  2189. prompt: "Enter a unique room ID (At least 4 characters)"
  2190. });
  2191. $("#room_id").focus();
  2192. return;
  2193. }
  2194. user_name = $("#user_name").val();
  2195. if (user_name.length < 4) {
  2196. $("#user_name").textbox({
  2197. value: "",
  2198. prompt: "Enter your name (At least 4 characters)"
  2199. });
  2200. $("#user_name").focus();
  2201. return;
  2202. }
  2203. console.log("Room ID " + room_id);
  2204. console.log("User Name " + user_name);
  2205. $('#dlg').dialog('close');
  2206. $('.wrapLoader').show();
  2207. /* First check if room exist or not */
  2208. $("#wait").html("Trying to join meeting room at the given ID...");
  2209. setupWebRTC();
  2210. connection.checkPresence(room_id, function(isRoomExists, rid) {
  2211. console.log("Room ID is " + rid);
  2212. if (isRoomExists) {
  2213. /* join a new room */
  2214. connection.extra.fullName = user_name;
  2215. connection.setUserPreferences({extra : connection.extra});
  2216. connection.connectionDescription = connection.join(room_id);
  2217. $("#refresh").show();
  2218. if ($("#cc").layout('panel', 'east').panel('options').collapsed) {
  2219. $("#cc").layout('expand', 'east');
  2220. }
  2221. // Hide tools and their properties
  2222. // $("#cc").layout('collapse', 'west');
  2223. $("#cc").layout('panel', 'west').panel('resize', {
  2224. width: 5
  2225. });
  2226. $("#west .wr-left").css("display", "none");
  2227. $(".subProperties").hide();
  2228. $("#center #ancUndo").remove();
  2229. $("#center #ancRedo").remove();
  2230. $("#center .clrDynamicCanvas").remove();
  2231. $(".canvas-container").remove();
  2232. $('#btnMuteAll').hide();
  2233. $("#containerSharedPartOfScreenPreview").show();
  2234. $('.wrapLoader').hide();
  2235. $("#webrtcPanel").show();
  2236. $('#cc').layout('panel', 'east').panel('setTitle', "Meeting Room ID - " + room_id);
  2237. var div = document.createElement('div');
  2238. var msg = '<b>' + user_name + '</b> > Joined the room';
  2239. div.innerHTML = msg;
  2240. chatContainer.appendChild(div);
  2241. chatContainer.scrollTop = chatContainer.lastChild.offsetTop;
  2242. } else {
  2243. $.messager.alert('Alert', 'Sorry but could not connect with given meeting room ID');
  2244. $('.wrapLoader').hide();
  2245. return;
  2246. }
  2247. });
  2248. });
  2249. connection.onNewParticipant = function(participantId, userPreferences) {
  2250. console.log( "connection.onNewParticipant");
  2251. console.log( participantId );
  2252. console.log( userPreferences );
  2253. userPreferences.localPeerSdpConstraints.OfferToReceiveAudio = true;
  2254. userPreferences.localPeerSdpConstraints.OfferToReceiveVideo = true;
  2255. connection.acceptParticipationRequest(participantId, userPreferences);
  2256. }
  2257. connection.onopen = function(event) {
  2258. if( event.extra.user_name !== user_name ){
  2259. var div = document.createElement('div');
  2260. var msg = '<b>' + event.extra.user_name + '</b> > Joined the room';
  2261. div.innerHTML = msg;
  2262. chatContainer.appendChild(div);
  2263. chatContainer.scrollTop = chatContainer.lastChild.offsetTop;
  2264. }
  2265. };
  2266.  
  2267. var localStream;
  2268. var localMediaElement;
  2269. connection.onstream = function(event) {
  2270. console.log("Inside connection.onstream");
  2271. console.log(event);
  2272. event.mediaElement.controls = false;
  2273. if (!isFirstSlickInit) containerUserFaces.slick('unslick');
  2274.  
  2275. if (event.type == "local") {
  2276. localStream = event.stream;
  2277. localMediaElement = event.mediaElement;
  2278. }
  2279. setTimeout(function() {
  2280. event.mediaElement.play();
  2281. }, 10000);
  2282.  
  2283. if (!$("#containerBigVideo").children().filter("video").length) {
  2284. containerBigVideo.html('');
  2285. if (event.stream.isVideo && connection.extra.enabledVideo) {
  2286. // if we have our local video enabled
  2287. containerBigVideo.html(event.mediaElement);
  2288. containerBigVideo.css({
  2289. "width": "204px",
  2290. "height": "auto",
  2291. "left": "-8px"
  2292. });
  2293. } else {
  2294. containerBigVideo.html('<i class="fa-user-large chatitem"></i>');
  2295. containerBigVideo.css({
  2296. "width": "204px",
  2297. "height": "auto",
  2298. "left": "-8px"
  2299. });
  2300. }
  2301. } else {
  2302. if (connection.isInitiator) {
  2303. console.log(event.mediaElement);
  2304. event.mediaElement.oncontextmenu = function(e) {
  2305. e.preventDefault();
  2306. console.log(e);
  2307. console.log("Stream ID is " + event.streamid);
  2308. $('#videocontext').menu('show', {
  2309. id: event.userid,
  2310. left: e.pageX,
  2311. top: e.pageY,
  2312. onShow: function() {
  2313. remoteUserId = event.userid;
  2314. streamid = event.streamid;
  2315. console.log("Remote User ID : " + remoteUserId);
  2316. }
  2317. });
  2318. };
  2319. }
  2320. if (!$("#containerUserFaces").children().filter("video").length) {
  2321. containerUserFaces.html('');
  2322. }
  2323. console.log("Adding remote video");
  2324. var div = document.createElement('div');
  2325. if (event.stream.isVideo) {
  2326. div.innerHTML = event.mediaElement;
  2327. } else {
  2328. div.innerHTML = '<div class="user-face fa-user-small"></div>';
  2329. }
  2330. connection.send(msg);
  2331. containerUserFaces.append(div);
  2332. }
  2333. if ($("#containerUserFaces").children().filter("video").length) {
  2334. // activate slick slider
  2335. containerUserFaces.slick({
  2336. infinite: true,
  2337. slidesToShow: 3,
  2338. slidesToScroll: 1
  2339. });
  2340. isFirstSlickInit = false;
  2341. }
  2342. updateContainerUserFaces( );
  2343. };
  2344. function adjustBigVideo() {
  2345. console.log( "inside adjustBigVideo");
  2346. //clear all
  2347. if (!isFirstSlickInit) containerUserFaces.slick('unslick');
  2348. // if we have our local video enabled
  2349. containerBigVideo.html('');
  2350. if (connection.getAllParticipants().length) {
  2351. // Lets clean the place.
  2352. containerUserFaces.html('');
  2353. }
  2354. if (connection.extra.enabledVideo) {
  2355. //adding the video tag
  2356. var videoTagHTML = '<div class="user-face" data-user-id="' + connection.userid + '"><video src="' + localStream.blobURL + '" id="' + localStream.streamid + '" muted></video></div>';
  2357. videoTagHTML = localMediaElement;
  2358. if (!$("#containerBigVideo .user-face").children().filter("video").length) {
  2359. containerBigVideo.html('');
  2360. containerBigVideo.html(videoTagHTML);
  2361. currentBigVideo.streamid = localStream.streamid;
  2362. currentBigVideo.enabled = true;
  2363. } else {
  2364. containerUserFaces.append(videoTagHTML);
  2365. }
  2366. containerBigVideo.css({
  2367. "width": "204px",
  2368. "height": "auto",
  2369. "left": "-8px"
  2370. });
  2371. //playing the video
  2372. setTimeout(function() {
  2373. document.getElementById(localStream.streamid).play();
  2374. }, 5000);
  2375. } else {
  2376. containerBigVideo.html('<i class="fa-user-large chatitem"></i>');
  2377. containerBigVideo.attr("data-user-id", connection.userid);
  2378. }
  2379. //for each connected users
  2380. connection.getAllParticipants().forEach(function(userid) {
  2381. var remotePeer = connection.peers[userid];
  2382. //if a remote user has video enabled and has a stream
  2383. if (remotePeer.extra.enabledVideo && remotePeer.streams.length != 0) {
  2384. var remoteVideoStream = remotePeer.streams[0].streamid;
  2385. var remoteStream = connection.streamEvents[remoteVideoStream];
  2386. //adding the video tag
  2387. var div = document.createElement('div');
  2388. if (connection.isInitiator) {
  2389. div.oncontextmenu = function(e) {
  2390. e.preventDefault();
  2391. console.log(e);
  2392. $('#videocontext').menu('show', {
  2393. id: userid,
  2394. left: e.pageX,
  2395. top: e.pageY,
  2396. onShow: function() {
  2397. remoteUserId = userid;
  2398. console.log("Remote User ID : " + remoteUserId);
  2399. }
  2400. });
  2401. };
  2402. }
  2403. var videoTagHTML = '<div class="user-face" data-user-id="' + userid + '"><video src="' + remoteStream.blobURL + '" id="' + remoteStream.streamid + '" muted></video></div>';
  2404. div.innerHTML = videoTagHTML;
  2405. //display video in the top menu
  2406. if (!$("#containerBigVideo .user-face").children().filter("video").length) {
  2407. containerBigVideo.html('');
  2408. containerBigVideo.html(videoTagHTML);
  2409. } else {
  2410. containerUserFaces.append(div);
  2411. }
  2412. //playing the video
  2413. setTimeout(function() {
  2414. document.getElementById(remoteStream.streamid).play();
  2415. }, 10000);
  2416. } else {
  2417. var audioTagHTML = '<div class="user-face fa-user-small data-user-id="' + userid + '"></div>';
  2418. var div = document.createElement('div');
  2419. if (connection.isInitiator) {
  2420. div.oncontextmenu = function(e) {
  2421. e.preventDefault();
  2422. console.log(e);
  2423. $('#videocontext').menu('show', {
  2424. id: userid,
  2425. left: e.pageX,
  2426. top: e.pageY,
  2427. onShow: function() {
  2428. remoteUserId = userid;
  2429. console.log("Remote User ID : " + remoteUserId);
  2430. }
  2431. });
  2432. };
  2433. }
  2434. div.innerHTML = audioTagHTML;
  2435. containerUserFaces.append(div);
  2436. }
  2437.  
  2438. });
  2439. if (connection.getAllParticipants().length) {
  2440. //activate slick slider
  2441. containerUserFaces.slick({
  2442. infinite: true,
  2443. slidesToShow: 3,
  2444. slidesToScroll: 1
  2445. });
  2446. isFirstSlickInit = false;
  2447. }
  2448. }
  2449. //updates user images/video at the top of the webrtc panel
  2450. function updateContainerUserFaces( ) {
  2451. console.log( "inside updateContainerUserFaces");
  2452. //clear all
  2453. if (!isFirstSlickInit) containerUserFaces.slick('unslick');
  2454. // if we have our local video enabled
  2455. containerBigVideo.html('');
  2456. if(connection.getAllParticipants().length) {
  2457. // Lets clean the place.
  2458. containerUserFaces.html('');
  2459. }
  2460. if (connection.extra.enabledVideo) {
  2461. //adding the video tag
  2462. console.log( "Local Media Elememt" );
  2463. console.log( localMediaElement );
  2464. if (!$("#containerBigVideo").children().filter("video").length) {
  2465. console.log( "Going to add video in big one" );
  2466. containerBigVideo.html('');
  2467. containerBigVideo.html(localMediaElement);
  2468. currentBigVideo.streamid = localStream.streamid;
  2469. currentBigVideo.enabled = true;
  2470. } else {
  2471. var div = document.createElement('div');
  2472. div.html(localMediaElement);
  2473. console.log( "Going to add video in small one" );
  2474. containerUserFaces.append(div);
  2475. }
  2476. containerBigVideo.css({
  2477. "width": "204px",
  2478. "height": "auto",
  2479. "left": "-8px"
  2480. });
  2481. //playing the video
  2482. console.log( "Problamatic play..." );
  2483. console.log( localStream.streamid );
  2484. if( document.getElementById(localStream.streamid) ){
  2485. setTimeout(function() {
  2486. console.log( "Going to play..." );
  2487. document.getElementById(localStream.streamid).play();
  2488. }, 10000);
  2489. }
  2490. } else {
  2491. containerBigVideo.html('<i class="fa-user-large chatitem"></i>');
  2492. containerBigVideo.attr("data-user-id", connection.userid);
  2493. }
  2494. console.log( "trying to play..." );
  2495. //for each connected users
  2496. connection.getAllParticipants().forEach(function(userid) {
  2497. var remotePeer = connection.peers[userid];
  2498. console.log( "remote Peer");
  2499. console.log( remotePeer );
  2500.  
  2501. //if a remote user has video enabled and has a stream
  2502. if (remotePeer.extra.enabledVideo && remotePeer.streams.length != 0) {
  2503. var remoteVideoStream = remotePeer.streams[0].id;
  2504. var remoteStream = connection.streamEvents[remoteVideoStream];
  2505. console.log( "Remote Stream" );
  2506.  
  2507. var remoteMediaStream = remotePeer.streams[0].MediaStream;
  2508. var remoteMediaElement = remoteStream.mediaElement;
  2509. //adding the video tag
  2510. var div = document.createElement('div');
  2511. if (connection.isInitiator) {
  2512. div.oncontextmenu = function(e) {
  2513. e.preventDefault();
  2514. console.log(e);
  2515. $('#videocontext').menu('show', {
  2516. id: userid,
  2517. left: e.pageX,
  2518. top: e.pageY,
  2519. onShow: function() {
  2520. remoteUserId = userid;
  2521. console.log("Remote User ID : " + remoteUserId);
  2522. }
  2523. });
  2524. };
  2525. }
  2526. var videoTagHTML = '<div class="user-face" data-user-id="' + userid + '"><video src="' + remoteStream.blobURL + '" id="' + remoteStream.streamid + '" muted></video></div>';
  2527. videoTagHTML = remoteMediaElement;
  2528. div.innerHTML = videoTagHTML;
  2529. //display video in the top menu
  2530. if (!$("#containerBigVideo").children().filter("video").length) {
  2531. containerBigVideo.html('');
  2532. containerBigVideo.html(remoteMediaElement);
  2533. currentBigVideo.streamid = remoteStream.streamid;
  2534. currentBigVideo.enabled = true;
  2535. } else {
  2536. containerUserFaces.append(remoteMediaElement);
  2537. }
  2538. //playing the video
  2539. setTimeout(function() {
  2540. document.getElementById(remoteStream.streamid).play();
  2541. }, 10000);
  2542. } else {
  2543. var audioTagHTML = '<div class="user-face fa-user-small data-user-id="' + userid + '"></div>';
  2544. var div = document.createElement('div');
  2545. if (connection.isInitiator) {
  2546. div.oncontextmenu = function(e) {
  2547. e.preventDefault();
  2548. console.log(e);
  2549. $('#videocontext').menu('show', {
  2550. id: userid,
  2551. left: e.pageX,
  2552. top: e.pageY,
  2553. onShow: function() {
  2554. remoteUserId = userid;
  2555. console.log("Remote User ID : " + remoteUserId);
  2556. }
  2557. });
  2558. };
  2559. }
  2560. div.innerHTML = audioTagHTML;
  2561. containerUserFaces.append(div);
  2562. }
  2563.  
  2564. });
  2565. if (connection.getAllParticipants().length) {
  2566. //activate slick slider
  2567. containerUserFaces.slick({
  2568. infinite: true,
  2569. slidesToShow: 3,
  2570. slidesToScroll: 1
  2571. });
  2572. isFirstSlickInit = false;
  2573. }
  2574.  
  2575. return;
  2576. }
  2577. // Send text message button handler
  2578. $('#input-box').textbox({
  2579. onClickButton: function() {
  2580. if ($('#input-box').val().length === 0) return;
  2581. var msg = "<b" + user_name + " </b>> " + $('#input-box').val();
  2582. div.innerHTML = msg;
  2583. chatContainer.appendChild(div);
  2584. connection.send(msg);
  2585. $("#input-box").textbox('setValue', "");
  2586. },
  2587. icons: [{
  2588. iconCls: 'icon-attach-file',
  2589. handler: function(e) {
  2590. e.preventDefault();
  2591. var fileSelector = new FileSelector();
  2592. fileSelector.selectSingleFile(function(file) {
  2593. connection.send(file);
  2594. });
  2595. }
  2596. }]
  2597. });
  2598. $('#input-box').textbox('textbox').bind('keydown', function(e) {
  2599. if (e.keyCode == 13) {
  2600. var div = document.createElement('div');
  2601. var msg = "<b>" + user_name + "</b> > " + $(this).val();
  2602. div.innerHTML = msg;
  2603. chatContainer.appendChild(div);
  2604. connection.send(msg);
  2605. //scroll chat to the bottom
  2606. chatContainer.scrollTop = chatContainer.lastChild.offsetTop;
  2607. $("#input-box").textbox('setValue', "");
  2608. }
  2609. });
  2610. //share video button
  2611. $("#btnShareVideo").bind("click", function(event) {
  2612. connection.extra.enabledVideo = !connection.extra.enabledVideo;
  2613. if (connection.extra.enabledVideo) {
  2614. $(this).html('<div class="sub-default-lft" style="border-right:none;"><i class="fa-pause-circle-o chatitem"></i></div>');
  2615. $(this).attr("title", "Stop Sharing");
  2616. $('#btnShareAudio').html('<div class="sub-default-lft" style="border-right:none;"><i class="fa-microphone-slash-small chatitem"></i></div>');
  2617. $('#btnShareAudio').attr("title", "Mute");
  2618. connection.extra.isAudioMuted = false;
  2619. } else {
  2620. $(this).html('<div class="sub-default-lft" style="border-right:none;"><i class="fa-video-camera-small chatitem"></i></div>');
  2621. $(this).attr("title", "Share Video");
  2622. }
  2623. connection.send({
  2624. changedMedia: true,
  2625. userid: connection.userid
  2626. });
  2627. connection.updateExtraData();
  2628. updateContainerUserFaces();
  2629. });
  2630. $("#btnShareAudio").bind("click", function(event) {
  2631. if (connection.extra.isAudioMuted) {
  2632. localStream.unmute('audio');
  2633. $(this).html('<div class="sub-default-lft" style="border-right:none;"><i class="fa-microphone-slash-small chatitem"></i></div>');
  2634. $(this).attr("title", "Mute");
  2635. } else {
  2636. localStream.mute('audio');
  2637. $(this).html('<div class="sub-default-lft" style="border-right:none;"><i class="fa-microphone-small chatitem"></i></div>');
  2638. $(this).attr("title", "Unmute");
  2639. }
  2640. connection.extra.isAudioMuted = !connection.extra.isAudioMuted;
  2641. connection.send({
  2642. changedMedia: true,
  2643. userid: connection.userid
  2644. });
  2645. connection.updateExtraData();
  2646. updateContainerUserFaces();
  2647. });
  2648. // Adds text message to the chat
  2649. connection.onmessage = function onMessageHandler(event) {
  2650. //if user receives the image from admin screen that he is sharing
  2651. if (event.data && event.data.hasOwnProperty('screenImage')) {
  2652. sharedPartOfScreenPreview.src = event.data.screenshot;
  2653. return;
  2654. } else if (event.data && event.data.changedMedia) {
  2655. console.log("Got a shared video message...");
  2656. setTimeout(function() {
  2657. updateContainerUserFaces();
  2658. }, 10000);
  2659. return;
  2660. } else if (event.data && event.data.muteUserStream && event.data.userid == connection.userid) {
  2661. console.log("Got a mute message from admin...");
  2662. connection.extra.isAudioMuted = false;
  2663. $("#btnShareAudio").trigger("click");
  2664. return;
  2665. } else if (event.data && event.data.hasOwnProperty('raiseHand') && connection.isInitiator) {
  2666. console.log("Got a raise hand message from ..." + event.data.userid);
  2667. var div = document.createElement('div');
  2668. div.innerHTML = event.data.msg;
  2669. ion.sound.play("bell_ring");
  2670. chatContainer.appendChild(div);
  2671. //scroll chat to the bottom
  2672. chatContainer.scrollTop = chatContainer.lastChild.offsetTop;
  2673. return;
  2674. } else if (event.data && event.data.hasOwnProperty('raiseHand') && !connection.isInitiator) {
  2675. console.log("Got a raise hand message from ..." + event.data.userid);
  2676. return;
  2677. } else if (event.data && event.data.hasOwnProperty('unmuteUserStream') && event.data.userid == connection.userid) {
  2678. console.log("Got an unmute message from admin...");
  2679. connection.extra.isAudioMuted = true;
  2680. $("#btnShareAudio").trigger("click");
  2681. return;
  2682. }
  2683. console.log(event);
  2684. console.log(connection);
  2685. var div = document.createElement('div');
  2686. div.innerHTML = event.data || event;
  2687. chatContainer.appendChild(div);
  2688. //scroll chat to the bottom
  2689. chatContainer.scrollTop = chatContainer.lastChild.offsetTop;
  2690. }
  2691. connection.streamended = connection.onclose = function(event) {
  2692. setTimeout(function() {
  2693. updateContainerUserFaces();
  2694. }, 10000);
  2695. };
  2696. connection.onleave = function(event) {
  2697. if( typeof event.extra.user_name !== 'undefined' ){
  2698. var div = document.createElement('div');
  2699. var msg = '<b>' + event.extra.user_name + '</b> > left the room';
  2700. div.innerHTML = msg;
  2701. console.log( "connection.onleave" );
  2702. console.log( event );
  2703. chatContainer.appendChild(div);
  2704. chatContainer.scrollTop = chatContainer.lastChild.offsetTop;
  2705. }
  2706. };
  2707. $('#btnMuteAll').bind('click', function() {
  2708. jQuery.each(connection.streamEvents, function(index, value) {
  2709. if (connection.isInitiator && value.type == "remote") {
  2710. connection.send({
  2711. muteUserStream: true,
  2712. userid: value.userid
  2713. });
  2714. console.log("Sending mute command to the server");
  2715. }
  2716. });
  2717. });
  2718. $('#btnRaiseHand').bind('click', function() {
  2719. //onMessageHandler(msg);
  2720. var div = document.createElement('div');
  2721. var msg = '<b>' + user_name + '</b> > <i class="fa-raise-hand-small big"></i>';
  2722. div.innerHTML = msg;
  2723. chatContainer.appendChild(div);
  2724. ion.sound.play("bell_ring");
  2725. //scroll chat to the bottom
  2726. chatContainer.scrollTop = chatContainer.lastChild.offsetTop;
  2727. connection.send({
  2728. msg: msg,
  2729. raiseHand: true,
  2730. userid: connection.userid
  2731. });
  2732. console.log("Sending raise hand command to the server.");
  2733. });
  2734.  
  2735.  
  2736.  
  2737. $("#webrtcPanel").hide();
  2738. $("#cc").css("visibility", "visible");
  2739. $("#muteUser").bind("click", function() {
  2740. if (connection.isInitiator) {
  2741. connection.send({
  2742. muteUserStream: true,
  2743. userid: remoteUserId
  2744. });
  2745. console.log("Sending mute command to the server");
  2746. }
  2747. });
  2748. $("#unmuteUser").bind("click", function() {
  2749. if (connection.isInitiator) {
  2750. connection.send({
  2751. unmuteUserStream: true,
  2752. userid: remoteUserId
  2753. });
  2754. console.log("Sending unmute command to the server");
  2755. }
  2756. });
  2757. $("#containerBigVideoAndFullscreen").dblclick(function() {
  2758. if (currentBigVideo.enabled) {
  2759. if (screenfull.enabled) {
  2760. screenfull.toggle(document.getElementById(currentBigVideo.streamid));
  2761. }
  2762. }
  2763. });
  2764. $("#btnEnlargeVideo").bind("click", function(e) {
  2765. if (currentBigVideo.enabled) {
  2766. if (screenfull.enabled) {
  2767. screenfull.toggle(document.getElementById(currentBigVideo.streamid));
  2768. }
  2769. }
  2770. });
  2771. $("#refresh").bind("click", function(e) {
  2772. console.log( "Going to refresh connection");
  2773. var msg = "";
  2774. console.log( connection );
  2775. if( typeof connection.connectionDescription !== 'undefined' ){
  2776. msg = "Connection has been refreshed successfully";
  2777. connection.rejoin( connection.connectionDescription );
  2778. }else{
  2779. msg = "There is no connection to refresh";
  2780. }
  2781. $.messager.show({
  2782. title:'Connection Status',
  2783. msg: msg,
  2784. showType:'show',
  2785. width:298
  2786. });
  2787. });
  2788.  
  2789. connection.onerror = function(e) {
  2790. if (connection.connectedWith[e.userid]) return;
  2791. if( typeof connection.connectionDescription !== 'undefined' ){
  2792. connection.rejoin( connection.connectionDescription );
  2793. }
  2794. };
  2795. /* Tutor Connect */
  2796. var regEmail = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
  2797. var regPhone = /^[0-9]{10}$/;
  2798. var numberPattern = /^\d*$/;
  2799. var tc_flodername = '';
  2800. var tc_slides = '';
  2801. if(tc_flodername != '' && tc_slides !=''){
  2802. presentationSlides(tc_flodername,tc_slides);
  2803. }
  2804.  
  2805. $("#ancTutorConnect").bind("click", function(e) {
  2806. openTcLogin();
  2807. });
  2808.  
  2809. $('#sign').on("click",".ancSlidePreview",function(){
  2810. var flodername = $(this).data("flodername");
  2811. var slides = $(this).data("slides");
  2812. presentationSlides(flodername,slides);
  2813. });
  2814. /* Select Tool */
  2815. $('#ancSelect').click(function(){
  2816. $('.subProperties').hide();
  2817. if(shapenum > 1 || txtNum > 1){
  2818. gcanvas.isDrawingMode = false;
  2819. }
  2820.  
  2821. gcanvas.forEachObject(function(obj) {
  2822. //console.log(obj.type);
  2823. /* obj.set({
  2824. hasControls: true,
  2825. hasBorders: true,
  2826. selectable: true
  2827. });
  2828. gcanvas.setActiveObject(obj); */
  2829. if (typeof obj != 'object' || obj.hasOwnProperty('path') ) {
  2830. obj.set({
  2831. hasControls: false,
  2832. hasBorders: false,
  2833. selectable: false
  2834. });
  2835. } else {
  2836. obj.set({
  2837. hasControls: true,
  2838. hasBorders: true,
  2839. selectable: true
  2840. });
  2841. gcanvas.setActiveObject(obj);
  2842. }
  2843.  
  2844. });
  2845. gcanvas.renderAll();
  2846. });
  2847.  
  2848.  
  2849. }); // close of document ready
  2850.  
  2851. function closeSign() {
  2852. $('#sign').window('close');
  2853. $win = null;
  2854. }
  2855. function openFileUpload() {
  2856. $win = $('#sign').window({
  2857. title: 'Upload File',
  2858. iconCls: 'icon-upload-file',
  2859. width: '650',
  2860. height: '375'
  2861. });
  2862. $win.window('open');
  2863. $('#sign').window('refresh', 'wb_file_box.htm');
  2864. }
  2865.  
  2866. function openTcLogin() {
  2867. $win = $('#sign').window({
  2868. title: 'Tutor Connect - Content',
  2869. iconCls: 'icon-upload-file',
  2870. width: '650',
  2871. height: '375'
  2872. });
  2873. $('.subProperties').hide();
  2874. $win.window('open');
  2875. $('#sign').window('refresh', 'tutor_connect/tutor-connect-content.php');
  2876. }
  2877.  
  2878. function presentationSlides(flodername,slides){
  2879. $('.wrapLoader').show();
  2880. $.ajax({
  2881. url: "tutor_connect/tutor-connect-content-slides.php",
  2882. method:"GET",
  2883. data:{"flodername":flodername,"totalslides":slides}
  2884. }).done(function(msg) {
  2885. $("#south").html(msg);
  2886. $('.wrapLoader').hide();
  2887. $("#cc").layout('panel','south').panel({
  2888. title:'Slides',
  2889. iconCls:'icon-image-editor',
  2890. });
  2891. $("#south").attr('height','115px');
  2892. $("#cc").layout('expand','south');
  2893. $("#south #content-slider").lightSlider({
  2894. loop:false,
  2895. keyPress:false,
  2896. pager:false
  2897. });
  2898. closeSign();
  2899. });
  2900. }
  2901. </script>
  2902. <script src="https://www.google-analytics.com/urchin.js"></script>
  2903. <script type="text/javascript">
  2904. _uacct = "UA-232293-6";
  2905. urchinTracker();
  2906. </script>
  2907. </body>
  2908.  
  2909.  
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!