public/client.html

@@ -79,8 +79,10 @@
     <div id="myModal" class="modal">
 
       <div id="modal-content" class="modal-content">
+
         <button type="button" class="close" data-dismiss="modal">&times;</button>
-         <button class="password-button" id="passcode"><i class="mdi-notification-vpn-lock"></i> PassCode</a>
+        <a class="btn btn-primary" href="/public/faq"> Help Page </a>  
+         <button class="password-button" id="passcode"><i class="mdi-notification-vpn-lock"></i> PassCode</a></button>
         <br>
         <button class="settings-button" id="new-keyboard"> New Keyboard </button>
         <button class="settings-button" id="delete-keyboard"> Delete Keyboard </button>

public/faq/css/style.css

@@ -433,7 +433,7 @@ header h1 {
   }
 }
 
-#test{
+.picture{
     display: block;
     margin-left: auto;
     margin-right: auto;

public/faq/index.html

@@ -17,77 +17,83 @@
 </header>
 <section class="cd-faq">
 	<ul class="cd-faq-categories">
-		<li><a class="selected" href="#basics">Basics</a></li>
-		<li><a href="#mobile">Mobile</a></li>
-		<li><a href="#account">Account</a></li>
-		<li><a href="#payments">Payments</a></li>
-		<li><a href="#privacy">Privacy</a></li>
-		<li><a href="#delivery">Delivery</a></li>
-	</ul> <!-- cd-faq-categories -->
+		<li><a class="selected" href="#basics">Basic Controls</a></li>
+		<li><a href="#tech">Technical Specs</a></li>
+		<li><a href="#privacy">Privacy and Security</a></li>
+		<li><a href="#back">Back to UBoard</a></li>
+
+	</ul>
 
 	<div class="cd-faq-items">
 		<ul id="basics" class="cd-faq-group">
-			<li class="cd-faq-title"><h2>Basics</h2></li>
+			<li class="cd-faq-title"><h2>Basic Controls</h2></li>
+			<div class="cd-faq-content">
+			</div> 
 			<li>
-				<a class="cd-faq-trigger" href="#0">How do I change my password?</a>
+				<a class="cd-faq-trigger" href="#0">Navigation Features</a>
 				<div class="cd-faq-content">
-					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quidem blanditiis delectus corporis, possimus officia sint sequi ex tenetur id impedit est pariatur iure animi non a ratione reiciendis nihil sed consequatur atque repellendus fugit perspiciatis rerum et. Dolorum consequuntur fugit deleniti, soluta fuga nobis. Ducimus blanditiis velit sit iste delectus obcaecati debitis omnis, assumenda accusamus cumque perferendis eos aut quidem! Aut, totam rerum, cupiditate quae aperiam voluptas rem inventore quas, ex maxime culpa nam soluta labore at amet nihil laborum? Explicabo numquam, sit fugit, voluptatem autem atque quis quam voluptate fugiat earum rem hic, reprehenderit quaerat tempore at. Aperiam.</p>
-				</div> <!-- cd-faq-content -->
-			</li>
-		</ul> <!-- cd-faq-group -->
-
-		<ul id="mobile" class="cd-faq-group">
-			<li class="cd-faq-title"><h2>Mobile</h2></li>
+					<img class="picture" src="images/navigation.png" align ='top'>
+				</div> 
+			</li> 
 			<li>
-				<a class="cd-faq-trigger" href="#0">What are uBoard's main features?</a>
+				<a class="cd-faq-trigger" href="#0">Main Interface</a>
 				<div class="cd-faq-content">
-					<img id='test' src="images/test.png" align ='top'>
-					<br>
-					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit quidem delectus rerum eligendi mollitia, repudiandae quae beatae. Et repellat quam atque corrupti iusto architecto</p>
-				</div>
-			</li>
-		</ul> <!-- cd-faq-group -->
-
-		<ul id="account" class="cd-faq-group">
-			<li class="cd-faq-title"><h2>Account</h2></li>
+					<img class="picture" src="images/main_screen.png" align ='top'>
+				</div> 
+			</li> 
 			<li>
-				<a class="cd-faq-trigger" href="#0">How do I change my password?</a>
+				<a class="cd-faq-trigger" href="#0">Default iOS Interface</a>
 				<div class="cd-faq-content">
-					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis earum autem consectetur labore eius tenetur esse, in temporibus sequi cum voluptatem vitae repellat nostrum odio perspiciatis dolores recusandae necessitatibus, unde, deserunt voluptas possimus veniam magni soluta deleniti! Architecto, quidem, totam. Fugit minus odit unde ea cupiditate ab aperiam sed dolore facere nihil laboriosam dolorum repellat deleniti aliquam fugiat laudantium delectus sint iure odio, necessitatibus rem quisquam! Ipsum praesentium quam nisi sint, impedit sapiente facilis laudantium mollitia quae fugiat similique. Dolor maiores aliquid incidunt commodi doloremque rem! Quaerat, debitis voluptatem vero qui enim, sunt reiciendis tempore inventore maxime quasi fugiat accusamus beatae modi voluptates iste officia esse soluta tempora labore quisquam fuga, cum. Sint nemo iste nulla accusamus quam qui quos, vero, minus id. Eius mollitia consequatur fugit nam consequuntur nesciunt illo id quis reprehenderit obcaecati voluptates corrupti, minus! Possimus, perspiciatis!</p>
-				</div> <!-- cd-faq-content -->
-			</li>
+					<img class="picture" src="images/default_screen.png" align ='top'>
+				</div> 
+			</li> 
+			<li>
+				<a class="cd-faq-trigger" href="#0">Hotkeys Interface</a>
+				<div class="cd-faq-content">
+					<img class="picture" src="images/hotkeys.png" align ='top'>
+				</div> 
+			</li> 
+			<li>
+				<a class="cd-faq-trigger" href="#0">New Board Interface</a>
+				<div class="cd-faq-content">
+					<img class="picture" src="images/new_keyboard.png" align ='top'>
+				</div> 
+			</li> 
+			<li>
+				<a class="cd-faq-trigger" href="#0">Edit Keys</a>
+				<div class="cd-faq-content">
+					<img class="picture" src="images/edit_keys.png" align ='top'>
+				</div> 
+			</li> 
 		</ul> <!-- cd-faq-group -->
 
-		<ul id="payments" class="cd-faq-group">
-			<li class="cd-faq-title"><h2>Payments</h2></li>
+		<ul id="tech" class="cd-faq-group">
+			<li class="cd-faq-title"><h2>Technical Specs</h2></li>
 			<li>
-				<a class="cd-faq-trigger" href="#0">Can I have an invoice for my subscription?</a>
+				<a class="cd-faq-trigger" href="#0">How uBoard Works</a>
 				<div class="cd-faq-content">
-					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit quidem delectus rerum eligendi mollitia, repudiandae quae beatae. Et repellat quam atque corrupti iusto architecto impedit explicabo repudiandae qui similique aut iure ipsum quis inventore nulla error aliquid alias quia dolorem dolore, odio excepturi veniam odit veritatis. Quo iure magnam, et cum. Laudantium, eaque non? Tempore nihil corporis cumque dolor ipsum accusamus sapiente aliquid quis ea assumenda deserunt praesentium voluptatibus, accusantium a mollitia necessitatibus nostrum voluptatem numquam modi ab, sint rem.</p>
-				</div> <!-- cd-faq-content -->
+					<img class="picture" src="images/overview.png" align ='top'>
+					<br>
+					<p>uBoard works by connecting your mobile device to a local server on your desktop. When you launch the uBoard app on your desktop, the local server starts up on port 8000. When you scan the QR code, your mobile device connects to your computer and launches a web browser to display the interface. When you interact with the mobile interface, your mobile device sends websocket signals to your computer. The server receives these signals and translates them into computer commands. </p>
+				</div>
 			</li>
 		</ul> <!-- cd-faq-group -->
 
 		<ul id="privacy" class="cd-faq-group">
 			<li class="cd-faq-title"><h2>Privacy</h2></li>
 			<li>
-				<a class="cd-faq-trigger" href="#0">Can I specify my own private key?</a>
-				<div class="cd-faq-content">
-					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit quidem delectus rerum eligendi mollitia, repudiandae quae beatae. Et repellat quam atque corrupti iusto architecto impedit explicabo repudiandae qui similique aut iure ipsum quis inventore nulla error aliquid alias quia dolorem dolore, odio excepturi veniam odit veritatis. Quo iure magnam, et cum. Laudantium, eaque non? Tempore nihil corporis cumque dolor ipsum accusamus sapiente aliquid quis ea assumenda deserunt praesentium voluptatibus, accusantium a mollitia necessitatibus nostrum voluptatem numquam modi ab, sint rem.</p>
-				</div> <!-- cd-faq-content -->
+				<a class="cd-faq-trigger" href="#0">Desktop Password Feature</a>
+				<img class="picture" src="images/desktop_password.png" align ='top'>
 			</li>
 		</ul> <!-- cd-faq-group -->
 
-		<ul id="delivery" class="cd-faq-group">
-			<li class="cd-faq-title"><h2>Delivery</h2></li>
+		<ul id="back" class="cd-faq-group">
+			<li class="cd-faq-title"><h2>Back To uBoard</h2></li>
 			<li>
-				<a class="cd-faq-trigger" href="#0">What should I do if my order hasn't been delivered yet?</a>
-				<div class="cd-faq-content">
-					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit quidem delectus rerum eligendi mollitia, repudiandae quae beatae. Et repellat quam atque corrupti iusto architecto impedit explicabo repudiandae qui similique aut iure ipsum quis inventore nulla error aliquid alias quia dolorem dolore, odio excepturi veniam odit veritatis. Quo iure magnam, et cum. Laudantium, eaque non? Tempore nihil corporis cumque dolor ipsum accusamus sapiente aliquid quis ea assumenda deserunt praesentium voluptatibus, accusantium a mollitia necessitatibus nostrum voluptatem numquam modi ab, sint rem.</p>
-				</div> <!-- cd-faq-content -->
-			</li>
+        		<a class="btn btn-primary" href="../../"> Back to UBoard </a>  
 			</li>
 		</ul> <!-- cd-faq-group -->
+
 	</div> <!-- cd-faq-items -->
 	<a href="#0" class="cd-close-panel">Close</a>
 </section> <!-- cd-faq -->

public/js/client.js

@@ -73,7 +73,11 @@ $('#new-keyboard').click(function() {
 
 $('#newBoard-save').click(function() {
 
-  if(newBoardModalInput.value.indexOf(" ") != -1 || newBoardModalInput.value === "") {
+  var newBoardName = newBoardModalInput.value
+  if (newBoardName.indexOf(" ") != -1){
+    newBoardName = newBoardName.split(' ').join('_')
+  }
+  if(newBoardModalInput.value === "") {
     return
   }
 
@@ -81,22 +85,22 @@ $('#newBoard-save').click(function() {
   console.log(boardIds)
   for(var i = 0; i < boardIds.length; i++){
     console.log(boardIds[i].innerText)
-    console.log(newBoardModalInput.value)
-    if (boardIds[i].innerText.trim() === newBoardModalInput.value.trim()){
+    console.log(newBoardName)
+    if (boardIds[i].innerText.trim() === newBoardName.trim()){
       //Should give some warning of there is a match
       console.log("found match")
       console.log(boardIds[i].innerText)
-      console.log(newBoardModalInput.value)
+      console.log(newBoardName)
       return
     }
   }
 
 
-  $('#customSelect').append('<option class = "select-item" id = "select-' + newBoardModalInput.value + '">' + newBoardModalInput.value + ' </option>')
+  $('#customSelect').append('<option class = "select-item" id = "select-' + newBoardName + '">' + newBoardName + ' </option>')
   $('#edit-wrapper').show();
   $('#add-key').show();
   $('#delete-keyboard').show();
-  var newSlide ='<div class = "custom swiper-slide swiper-slide-inner" id="custom-' + newBoardModalInput.value + '">  </div>';
+  var newSlide ='<div class = "custom swiper-slide swiper-slide-inner" id="custom-' + newBoardName + '">  </div>';
   $('#s'+swiper.activeIndex.toString()).css("background-color", "turquoise")
   $('#s4').css("background-color", "green")
   swiperInner.appendSlide(newSlide)
@@ -104,11 +108,11 @@ $('#newBoard-save').click(function() {
   console.log(swiperInner)
   console.log(swiperInner.slides.length)
   swiperInner.slideTo(swiperInner.slides.length-1, 200, false);
-  customButtonCounts['custom-' + newBoardModalInput.value] = 0
+  customButtonCounts['custom-' + newBoardName] = 0
 
   socket.emit('newBoard', {
-    id: newBoardModalInput.value});
-  $('#select-' + newBoardModalInput.value).prop("selected", true)
+    id: newBoardName});
+  $('#select-' + newBoardName).prop("selected", true)
   newBoardModal.style.display = "none";
 });
 
@@ -149,12 +153,14 @@ $('#delete-keyboard').click(function() {
 $('#edit-toggle').change(function(event) {
   console.log(event.target)
   if(move){
-
+    $('#new-keyboard').show();
+    $('#delete-keyboard').show();
     $('.custom').css({'background-color': 'white'});
     $('.custom-key').addClass('activestyle');
     move = false;
   } else{
-
+    $('#new-keyboard').hide();
+    $('#delete-keyboard').hide();
     $('.custom').css({'background-color': 'rgba(250,50,50,.5)'});
     $('.custom-key').removeClass('activestyle');
     move = true;
@@ -262,11 +268,11 @@ function hotkeyStylize(ele, page, id, url){
 
 function hotkeyDestylize(ele, page, id, url){
   $('#url-icon-' + id).remove();
-  ele.css({'max-width': '100%', 'min-width': '1%', width: 'auto', 'text-indent': '0px'});
+  ele.css({'max-width': '100%', 'min-width': '1%', width: 'auto', 'text-indent': '0px', 'font-size': '16px'});
 }
 
 function altTextStylize(ele,text,id){
-  ele.css({'width':'auto','text-indent': '-9999px', 'text-align': 'left', 'overflow': 'hidden','display': 'flex'});
+  ele.css({'width':'auto','text-indent': '-9999px', 'text-align': 'left', 'overflow': 'hidden','display': 'flex', 'font-size': '0px'});
   ele.append('<button class="alt-button" id="url-icon-' + id +'"> ' + text + '</button>')
 }
 
@@ -384,19 +390,19 @@ $( "#textfield" ).keydown(function(event) {
     emitText(document.getElementById('textfield').value);
     event.preventDefault();
     if (document.getElementById('textfield').value === '') {
-      socket.emit('functionality', 'enter');
+      socket.emit('functionality', {'pw':passcode, type:'enter'});
     }
 
     document.getElementById('textfield').value = '';
   }
   else if (event.key === 'Backspace' && document.getElementById('textfield').value === "") { // backspace
-    socket.emit('functionality', 'backspace');
+    socket.emit('functionality', {'pw':passcode, type:'backspace'});
   }
   else if (event.key.startsWith('Arrow') && document.getElementById('textfield').value === "") { // arrow keys
-    socket.emit('functionality', event.key);
+    socket.emit('functionality', {'pw':passcode, type: event.key});
   }
   else if (event.keyCode === 32 && document.getElementById('textfield').value === '') { // space
-    socket.emit('functionality', 'Space');
+    socket.emit('functionality', {'pw':passcode, type: 'Space'});
     document.getElementById('textfield').value = '';    
   }
 });
@@ -439,13 +445,13 @@ function dragMoveListener (event) {
 //Purpose: Event listener on tapping the keys
 interact('.static-key').on('tap', function (event) {
   if (event.target.id === 'go-toggle') { // enter
-    socket.emit('functionality', 'enter');
+    socket.emit('functionality', {'pw':passcode, type: 'enter'});
   }
   else if (event.target.id === 'backspace') { // backspace
-    socket.emit('functionality', 'backspace');
+    socket.emit('functionality', {'pw':passcode, type: 'backspace'});
   }
   else if (event.target.id === 'spacebar') { // backspace
-    socket.emit('functionality', 'space');
+    socket.emit('functionality', {'pw':passcode, type: 'space'});
   }
   else if(event.target.id === 'shift-toggle'){
     if(moddifier == 'shift'){
@@ -501,6 +507,7 @@ interact('.custom-key').on('doubletap', function (event) {
 });
 
 interact('.key-button').on('tap', function (event) {
+
     if (event.target.id.indexOf("url-icon") != -1){
         emitKey({text: $("#" + event.target.id).parent().clone().children().remove().end().text().trim(), moddifier: moddifier})
     }
@@ -514,10 +521,12 @@ interact('.key-button').on('tap', function (event) {
 
 interact('.url-button').on('tap', function (event) {
     if(event.target.id.indexOf("url-icon") != -1){
+      console.log("Parent")
       emitUrl($("#" + event.target.id).parent().clone().children().remove().end().text().trim())
     }
     else{
-      emitUrl(event.target.innerText);
+      console.log("Error")
+      emitUrl($("#" + event.target.id).clone().children().remove().end().text().trim());
     }
   });