Friday, June 29, 2012

Edo Towns Combo List

Just some random stuff about the Oh! Edo Towns game by Kairosoft. Kairosoft makes simulation games that run well on handheld devices and border on being addictive.

The following is a combo list. This can be found almost anywhere.

Combo list


This is a reverse combo list. I created this using the data from above. It is used to find all combos a shop or building belong to. Very useful if you like the game.

Reverse Combo List


This is combo that links a lot of shops and buildings. It is attributed to macboney and was found here.

Combo Map


Finally, this was also used as a way to investigate how Google document spreadsheets are embedded in web pages. It's pretty simple. The code is created for you by publishing it. Just cut and paste. It looks like the following:

<iframe frameborder="0" height="300" src="https://docs.google.com/spreadsheet/pub?key=0Ak1itrncGIGldHlqR24yd0syZ3dQQWV0R01TTmxaQkE&single=true&gid=0&output=html&widget=true" width="500"></iframe>

Monday, June 25, 2012

Load Select With Google Spreadsheet Worksheet Name

What follows is an example of a select box dynamically populated with the names and index of worksheets in a Google spreadsheet. If a option is selected and the load button is clicked, the text area will be loaded with the JSON interpretation of the specific sheet.

By default, the textarea is loaded with the JSON import containing information about the spreadsheet. It is where the worksheet information is obtained. Read more about this here.

Example











Thursday, June 21, 2012

Return All Worksheet Names in a Google Spreadsheet

Digging more into working with Google spreadsheets and JSON, I started looking for a way to view the sheets in a specific spreadsheet. For the worksheet with the key "0Ak1itrncGIGldHNvZk9tUkhBWFJ5LXlhekxfcF9yTHc", the following textarea shows the names of the worksheets that are contained within.





First off, any spreadsheet that will be returning JSON data needs to have been made public.  This is not a hard process.  The instruction can be found here.

Next, the JSON call to the spreadsheet is a little different. Normally, it would be a call to "values". Instead, it is a call to "basic". Here is what the call looks like:

http://spreadsheets.google.com/feeds/worksheets/0Ak1itrncGIGldHNvZk9tUkhBWFJ5LXlhekxfcF9yTHc/public/basic?alt=json&callback=loadWorksheets

The code to generate the example above follows.

<script>
function loadWorksheets(json) 
{
   $(document).ready
   (
      function() 
      {

         var jsonText = JSON.stringify(json);
   
         var jsonOBJ = $.parseJSON(jsonText);
   
         var aHold = jsonOBJ.feed.entry;
   
         var sHold = "";
   
         for (var i = 0; i < aHold.length; i++)
         {
            sHold = $("#tSheets").val();
            $("#tSheets").val(sHold + '\n' + aHold[i].title.$t);
         }
      }
   )
}
</script>

<script src="http://spreadsheets.google.com/feeds/worksheets/0Ak1itrncGIGldHNvZk9tUkhBWFJ5LXlhekxfcF9yTHc/public/basic?alt=json&callback=loadWorksheets"></script>

<br />
<br />

<textarea name="tSheets" 
   id="tSheets" 
   rows="5" 
   cols="50"></textarea>


Next up is using this method combined with the information here to dynamically load JSON by picking a spreadsheet.

The following textarea contains the whole JSON structure that the worksheets are retrieved from.

Using jQuery to Make a Read Only Select Field

There is no read only option for select boxes. If a select box is disabled, it does not submit values when a form is saved. This is my attempt to emulated a readonly property for a select box. I am sure there a dozens of other ways to do this, probably better than this, but this seems to work for me.

Here is an example. The first select box is set to "0". The second select box is set to "".



The select boxes both have a data attribute. It is "data-readonly" and it is set to "yes".

<select name="select01" id="select01" data-readonly="yes">
 <option value="" > -- </option>
 <option value="1" >1 - Yes </option>
 <option value="0" selected="selected">0 - No</option>
 <option value="-6" >-6 - Permanently Missing </option>
 <option value="-7" >-7 - Don't Know </option>
 <option value="-8" >-8 - Refused </option>
 <option value="-9" >-9 - Not on Form </option>
</select>

<select name="select02" id="select02" data-readonly="yes">
 <option value="" > -- </option>
 <option value="1" >1 - Yes</option>
 <option value="0"  >0 - No</option>
 <option value="-6" >-6 - Permanently Missing </option>
 <option value="-7" >-7 - Don't Know </option>
 <option value="-8" >-8 - Refused </option>
 <option value="-9" >-9 - Not on Form </option>
</select>


The script follows. It looks for all select boxes with "data-readonly='yes'" and then stores their value in another data attribute. A change function is then bound to the select that always restores the prior value on change.

<script language="JavaScript" type="text/javascript">
$(document).ready
(
 function()
 {
  var sel = $("select[data-readonly='yes']");
  
  sel.each
  (
   function()
   {
    $(this).data("prev",$(this).val());
    
    $(this).change
    (
     function(data)
     {
      var obj = $(this);
      
      obj.val(obj.data("prev"));
      obj.data("prev",obj.val());
     }
    );
   }
  )
 }
);
</script>

Wednesday, June 20, 2012

Client-side Blowfish Encryption Gadget



This gadget encapsulates the javascript encryption routine detailed here. I built it to use in Google spreadsheets as a replacement for the encryption function detailed here.  I had some reservations about that function since values are put into a cell first and then potentially saved via an AJAX call before they could be encrypted.    With this gadget, all encryption takes place client side and then it can be put into the cell.


Using the gadget is simple enough. A default key is automatically entered. Change it to a new key. Click "Set Key". Paste the text that is to be encrypted into the first text area. Click "Encode". The encrypted text will appear in the next textarea.

To decrypt text, set the proper key and post the encrypted text into the the middle textarea. Click "Decode".

To install the gadget do that following:
  1. Open the desired spreadsheet.
  2. Click "Insert" on the documents menu and then click "Gadget" from the drop down box.
  3. A dialogue box will open.
  4. Click "Custom".
  5. Paste the url http://hosting.gmodules.com/ig/gadgets/file/110597293445997135731/blowfish.xml into the text box labelled "URL of your own gadget".
  6. Click "Add".
  7. Click "Apply & close" on the setting dialogue box.
  8. The gadget should appear.


Tuesday, June 19, 2012

Javascript Encryption

On a whim, curiosity struck me and I looked up encryption with javascript. Probably when I was looking at encrypting data in a Google spreadsheet. I found several blowfish encryption routines that are javascript based. What is interesting is that this makes it possible to encrypt something completely on the client-side without the key ever being sent to a server.

I decided to experiment with on of the algorithms (http://theweekly.co.uk/blowfish_remix/). I wrote mock up that follows. You can test it using the existing key or entering a new one, typing or pasting a string in the text field or use the text already there, and then encoding it. Finally, you can decode it again.

So for the example, after picking a key, click "Set Key".  Then click "Encode".  The encrypted text will appear in the middle textbox.  To decode this text, just click "Decode" and the decoded text will appear in the last box.

Key
Text
Encrypted
Out


As stated above, all actions take place client-side. This means data can be encrypted and then sent via email, stored in an online document (spreadsheet or document), or anything else along these lines.  A good idea with Google spreadsheets since an entry into a cell can be saved via and AJAX call before you encrypt it with something like the function in the post above.

There is one quirk with the alorithm. The text that is being encrypted needs to have a length that is a multiple of 8. If it isn't, when the encrypted code is decrypted, it will be padded with 0's (you still get the original back). I added some code to pad the data with spaces so that the original is returned.

The following textarea contains the code used to generate the example above.

Monday, June 18, 2012

Returning JSON From Google Spreadsheet Using jQuery

The ability to return the data in a Google Spreadsheet in JSON format is powerful. Unfortunately, I tend to forget how to do this. I have to spend too much time searching in order to figure it out. So, I thought I would write this up as a reminder for myself.

First off, any spreadsheet that will be returning JSON data needs to have been made public. This is not a hard process. The instruction can be found here.

Here is an example for returning the data from spreadsheet with the key 0Ak1itrncGIGldHNvZk9tUkhBWFJ5LXlhekxfcF9yTHc

JSON from sheet 1



Here is the code for returning the data above.



In order to do the same for your spreadsheets, just change the key so that it points to the proper workbook and the sheet reference ("od6" in the example above) to the desired sheet.

Sunday, June 17, 2012

Publish a Google Spreadsheet.


  1. Open the spreadsheet that needs to be made public.
  2. Click "File" and select "Publish to the Web".
  3. A new dialog box will open.  Click "Start publishing".

  4. A message will appear in the text box.  It should resemble the following:

    https://docs.google.com/spreadsheet/pub?key=0Ak1itrncGIGldEVCX3B3bHdLeXN2T3ZNX0pqLW92dlE&output=html


  5. Click close.  The spreadsheet is now available (read only) for anyone who has the link described in number 4.

Thursday, June 7, 2012

Customized Random Quote Gadget for Gmail

This Google Gadget will return quotes saved in a Google Documents spreadsheet.  It is specifically designed for use with Gmail.  There are options to return a random quote, go to the next or previous quote and search for a quote.



The gadget is easy to set up.  Use the following instructions.


  1. Create a new spreadsheet in Google Documents.
  2. Enter your quotes in the first column.  It should resemble the following:
  3. Click "File" and then "Rename".  Enter a name for the spreadsheet.  You can give it any name that you desire.
    ab
  4. Click "File" again.  Select  "Publish to the Web".
  5. Click "Start publishing".

  6. A message will appear in the text box.  It should resemble the following:


    It should resemble the following link: https://docs.google.com/spreadsheet/pub?key=0Ak1itrncGIGldEVCX3B3bHdLeXN2T3ZNX0pqLW92dlE&output=html


  7. Copy or make note of the the KEY from the text field (There is another copy and paste operation below that happens before the key can be used).  The key is the long string of alphanumeric letters that follows "key=" and comes before "&output=html".  In the image above, the key is:

    0Ak1itrncGIGldEVCX3B3bHdLeXN2T3ZNX0pqLW92dlE

    This key will be used when the gadget is installed.

  8. To install the gadget in Gmail, go the gadget's directory page.

  9. Click on the button in the top right corner named "Webmaster tools".  When the menu drops, Click "View source".  The page will relocate to a page showing the code for the gadget.




  10. The important part here is the URL.  Copy it.

  11. Open Gmail.

    1. From Gmail, go to the Labs tab of Gmail Settings.
    2. Look for the Lab “Add any gadget by URL.” Enable it, then click “Save changes.”
    3. Go to the new “Gadgets” tab under “Settings”.

  12. If done correctly, the gadget should now contain quotes from the newly designated spreadsheet.
  13. Paste the URL into the field and click "Add".  If done correctly, the gadget should then appear in the left panel.  It still has the default spreadsheet. 


  14. Click on the "Help" tab.

  15. Scroll down until a text field is visible.  Paste in the key found in step 7 and click "Set".  At this point, the gadget should point to the designated spreadsheet.





The gadget is now ready.

Please note that this is not the best option to install on an iGoogle page or a generic web page. There is another option here.




Saturday, June 2, 2012

Customized Random Quote Gadget

This Google Gadget will return quotes saved in a Google Documents spreadsheet.  There are options to return a random quote, go to the next or previous quote and search for a quote.



The gadget is easy to set up.  Use the following instructions.


  1. Create a new spreadsheet in Google Documents.
  2. Enter your quotes in the first column.  It should resemble the following:
  3. Click "File" and then "Rename".  Enter a name for the spreadsheet.  You can give it any name that you desire.
    ab
  4. Click "File" again.  Select to "Publish to the Web".
  5. Click "Start publishing".

  6. A message will appear in the text box.  It should resemble the following:


    It should resemble the following link: https://docs.google.com/spreadsheet/pub?key=0Ak1itrncGIGldEVCX3B3bHdLeXN2T3ZNX0pqLW92dlE&output=html


  7. Copy the KEY from the text field.  The key is the long string of alphanumeric letters that follows "key=" and comes before "&output=html".  In the image above, the key is:

    0Ak1itrncGIGldEVCX3B3bHdLeXN2T3ZNX0pqLW92dlE

    This key will be used when the gadget is installed.
  8. To install the gadget, go the gadget's directory page.



  9. The gadget can be added to an iGoogle page by clicking on "Add it now".



  10. The gadget should now appear on the iGoogle page.  Click the settings icon (the gear and down arrow).  Click "Edit settings".
  11. Paste the key value copied from above into the revealed "Quote Sheet" field and then click "Save".


  12. If done correctly, the gadget should now contain quotes from the newly designated spreadsheet.
  13. In order to embed the gadget on a website, click "Webmaster tools" and then "Embed this gadget" on the directory page.


  14. After the page relocates, paste the copied key into the "Quote Sheet" and the click "Get Code".

  15. A text field will be populated with a script tag that will need to be pasted into the HTML of the desired webpage.




This gadget is not compatible with Gmail. At this time, Gmail does not allow users to set preferences.  Any installation would be stuck with the default spreadsheet.


A version does exist for Gmail. Click here for more information on the Gmail version.