Wednesday, January 6, 2016

XOS Simulator Work



Working on the ROV simulator, had never demo'd the old versions onhere but here is pic

Alot of my updates have been over at http://www.rovx.xyz

Posted by at No comments:

Hiding Information in Locations

Okay Lets hack a google spreadsheet, I'll explain in a minute:


Notice this part is what stays constant in different google forms:

    <div class="ss-form"><form action="https://docs.google.com/forms/d/YOUR CODE/formResponse" method="POST" id="ss-form" target="_self" onsubmit=""><ol role="list" class="ss-question-list" style="padding-left: 0">
<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_464585175"><div class="ss-q-title">Description
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.464585175" value="" class="ss-q-short" id="entry_464585175" dir="auto" aria-label="Description  " title="">
<div class="error-message" id="667802394_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div> <div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1801456818"><div class="ss-q-title">Lat
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.1801456818" value="" class="ss-q-short" id="entry_1801456818" dir="auto" aria-label="Lat  " title="">
<div class="error-message" id="1641482710_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div> <div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1412176452"><div class="ss-q-title">Long
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.1412176452" value="" class="ss-q-short" id="entry_1412176452" dir="auto" aria-label="Long  " title="">
<div class="error-message" id="733292993_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div>
<input type="hidden" name="draftResponse" value="[,,&quot;-7722594897214563767&quot;]
">
<input type="hidden" name="pageHistory" value="0">

<input type="hidden" name="fvv" value="0">


<input type="hidden" name="fbzx" value="-7722594897214563767">

<div class="ss-item ss-navigate"><table id="navigation-table"><tbody><tr><td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr">
<input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action ">
<div class="ss-password-warning ss-secondary-text">Never submit passwords through Google Forms.</div></td>
</tr></tbody></table></div></ol></form></div>
</html>

with some variation in different constants(the alphanumeric strings).

Now to access the form in JS


Preview (hint: you can copy and paste the preview into Microsoft Word):
document.getElementById("entry_1801456818").value=event.latLng.lat();
     document.getElementById("entry_1412176452").value=event.latLng.lng();
       document.getElementById("entry_464585175").value=document.getElementById("text").value;
       document.getElementById('ss-submit').click();


Which causes button clicks like we did in the famous (kidding) facebook hacks. Okay now we
 can hook up a map to this, why? We can hide information at locations so that a client cannot 
access until at a location which might be useful in some interesting scenarios.




Okay so we add a map to our spreadsheet site and hide all the form stuff:


<!DOCTYPE html>
<html>
  <head>
    <title>HackAsheeT</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: transparent;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
  
}

    </style>
  </head>
  <body>
    <div id="floating-panel">
      <img src="trash.png" onclick="deleteMarkers();" width="20px" height="20px">
     
      <img src="usercompass.png" onclick="getit();" width="20px" height="20px">
    <input type="text" id="text">
    </div>
    <div id="map"></div>
    <p>Click on the map to add markers.</p>
    <script>

// In the following example, markers appear when the user clicks on the map.
// The markers are stored in an array.
// The user can then click an option to hide, show or delete the markers.
var map;
var markers = [];

function initMap() {
  var haightAshbury = {lat: 37.769, lng: -122.446};

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // This event listener will call addMarker() when the map is clicked.
  map.addListener('click', function(event) {
    addMarker(event.latLng);
 
      
      
    document.getElementById("entry_1801456818").value=event.latLng.lat();
     document.getElementById("entry_1412176452").value=event.latLng.lng();
       document.getElementById("entry_464585175").value=document.getElementById("text").value;
       document.getElementById('ss-submit').click();
  });

  // Adds a marker at the center of the map.
  addMarker(haightAshbury);
}

// Adds a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setMapOnAll(null);
}

// Shows any markers currently in the array.
function showMarkers() {
  setMapOnAll(map);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}
function getit(){
    

}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=urkeyin=true&callback=initMap"></script>
  </body>
    
    <div class="ss-form"><form action="form" method="POST" id="ss-form" target="_self" onsubmit=""><ol role="list" class="ss-question-list" style="padding-left: 0">
<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_464585175"><div class="ss-q-title">Description
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.464585175" value="" class="ss-q-short" id="entry_464585175" dir="auto" aria-label="Description  " title="">
<div class="error-message" id="667802394_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div> <div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1801456818"><div class="ss-q-title">Lat
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.1801456818" value="" class="ss-q-short" id="entry_1801456818" dir="auto" aria-label="Lat  " title="">
<div class="error-message" id="1641482710_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div> <div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1412176452"><div class="ss-q-title">Long
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.1412176452" value="" class="ss-q-short" id="entry_1412176452" dir="auto" aria-label="Long  " title="">
<div class="error-message" id="733292993_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div>
<input type="hidden" name="draftResponse" value="[,,&quot;-7722594897214563767&quot;]
">
<input type="hidden" name="pageHistory" value="0">

<input type="hidden" name="fvv" value="0">


<input type="hidden" name="fbzx" value="-7722594897214563767">

<div class="ss-item ss-navigate"><table id="navigation-table"><tbody><tr><td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr">
<input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action ">
<div class="ss-password-warning ss-secondary-text">Never submit passwords through Google Forms.</div></td>
</tr></tbody></table></div></ol></form></div>
</html>






Now that peice of garbage will add data to our spreadsheet with location and 


whatever we ut in the text box we made, I am not going to walk through building


 the form or the spreadsheet.














Now our "client" code:






Okay we are going to use a js lib called sheetrock.js and make a call to it to


 grab stuff from our hacked spreadsheet and dump it into a <div> based html table.


<!DOCTYPE html>
<html> 
<head> 
    
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>QWest</title> 
    
    
    
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
  <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.0/dist/sheetrock.min.js"></script>  

    
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        margin-left: auto;
  margin-right: auto;
       left:30px;
           right:auto;
        z-index: 5;
        background-color: #FFF;
        padding: 5px;
        border: 1px solid transparent;
          opacity: .9;
          align-content: center;
      }
        input{
            border: none;
border-color: transparent;
            border-style:none;
             -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
            
    overflow: auto;
    outline: none;

        }
        
         #holder{
              position: absolute;
        top: 5px;
        right: 0%;
        margin-left: 0;
        z-index: 5;
        background-color: transparent;
        padding: 5px;
        border: transparent;
          opacity: .8;
          align-content: left;
        }
         
         #holdertwo{
              position: absolute;
        top: 55px;
        right: 0%;
        margin-left: 0;
        z-index: 5;
        background-color: transparent;
        padding: 5px;
        border: transparent;
          opacity: .8;
          align-content: left;
        }

               statistics, tr{
         
    border-color: lighten(#34495E, 10%);
  
        }
    statistics,  td {
        
    border: 0px solid grey;
        border-radius: 5px;
    border-collapse: separate;
    background-color:#34495E;
    font-family:monospace;
         color: white;
}
        statistics,th{
                border: 0px solid grey;
        border-radius: 5px;
    border-collapse: separate;
    background-color:#000;
    font-family:monospace;
         color: white;
            
            
        }
    </style>
    
    
    
    
</head> 
<body onload="showtog()">
    <div id="holder">
    <img src="hackericon.png" width="50" height="50" align="left" onclick="showtwo()"><br>
  
        </div>
    <div id="holdertwo">
      <img src="usercompass.png" width="50" height="50" align ="left" onclick="showtog()"><br>
    <img src="facebookapipic.jpg" width="50" height="50" align="left" onclick="gof()">
    </div>
    <div id="tabler">
      <table id="statistics" class="table table-striped table-hover" ></table>
       
          </div>
    
    
    <script>
        
        function showtwo(){
            $('#holdertwo').fadeToggle(); 
            
        }
     function showtog(){
  
 $('#tabler').fadeToggle();
  

}
        function gof(){
         window.open("https://m.facebook.com/buddylist.php")  ;
        }
        
</script>
    
    
  
  <div id="map" style="width: 100%; height: 100%;"></div>

  <script type="text/javascript">
     /* 
      var table = document.getElementById('tabler'), 
    rows = table.getElementsByTagName('tr'),
    i, j, cells, customerId;

for (i = 0, j = rows.length; i < j; ++i) {
    cells = rows[i].getElementsByTagName('td');
    if (!cells.length) {
        continue;
    }
    customerId = cells[0].innerHTML;
}
      */
      
      
      
      
      
    var locations = [
    
['Tisch Library',42.406561, -71.119475  ],
['Bookstore',   42.405737   -71.120344  ],
['Dewick',  42.405294,  -71.121106  ],
['Cannon',  42.407167,  -71.119857  ],
['Campus Center',   42.405809   ,-71.119681 ],
['Arts Center', 42.404755   ,-71.118764 ],
['Gym'  ,42.408966  ,-71.114869 ],
['Residential Quad' ,42.408407  ,-71.121718 ],
['Academic Quad'    ,42.407583  ,-71.119586]
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: new google.maps.LatLng(-39.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
       // disableDefaultUI: true
    });
      

    
    var infowindow = new google.maps.InfoWindow();
    var marker, i;

    var markers = new Array();
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      markers.push(marker);
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
            window.setTimeout(function snappy(){marker.setVisible(false);infowindow.close();}, 2000);
            
        }
      })(marker, i));
    }
        AutoCenter();
      map.setZoom(3);
    function AutoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      $.each(markers, function (index, marker) {
      bounds.extend(marker.position);
      });
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    AutoCenter();
 
 
   var infoWindow = new google.maps.InfoWindow({map: map});
 if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
       var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('You');
      map.setCenter(pos);
        
        
           for (i = 0; i < locations.length; i++) {  
         
            if(position.coords.lat-locations[i][3]>.0002){
             if(position.coords.long-locations[i][4]>.0002){
             alert("Found it");
             }
            }
            
        }
            
        
    
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }

 
      map.setZoom(3);

 
    </script>
    
    
    
    <script>
var mySpreadsheet='https://docs.google.com/spreadsheets/d/YOUR PUBLIC SPREADSHEET URL';
 $('#statistics').sheetrock({
  url: mySpreadsheet
});
    
    </script>
</body>
</html>











Which gives us:































Posted by



at





No comments:
  






































evelIN










Lets get posting again, alot of what I have been up to lately has been for profit projects and stuff I can't reveal yet but anyway:





Chrome based app using speech for the deaf, allow communication to a deaf person by speaking and the app produces large text, handled scrolling through css and clearing through timeouts:



Before:









Once Started:















Posted by



at





No comments:
  





























        

      









Subscribe to:
Posts (Atom)