Wednesday, May 28, 2014

Changes 5/28/14

jQuery:

  • I'm still trying to make elements shake.  I almost have it, but I have this weird problem when trying to programatically animate an element.
  • I'm using the code $(selector).animate({next_dir : sign + '=15px'}); to animate, where selector is something passed into the surrounding code, and next_dir and sign change depending on the number of iterations.
  • This code does not work for some reason, and there is something wrong with next_dir.  It's super weird because passing the function as $(selector).animate({"left" : sign + '=15px'}); works correctly but setting next_dir = "left" and passing $(selector).animate({next_dir : sign + '=15px'}); does not work, saying that there is an invalid property id.

Saturday, May 24, 2014

Changes 5/24/14 (Bonus!)

jQuery:

  • Script visible at http://students.gctaa.net/~ahirschberg/, actual script here.  Note that these may change.
  • Got my script working; image elements fade in and out at random locations.
  • Now the elements actually get removed correctly, instead of sitting invisible and slowing down the browser
  • I implemented an id delegation system which I had originally written for the movable window project I was working on.  I then improved it by allowing for ids to be deassigned and "recycled".  I ran into some interesting problems.
  • For example, look at code snippet 1. Substituting $(this).attr("id") for ele_id in the timeoutManager.addElement(...); line should be the same thing, right?  The .attr("id") method just pulls the id out of the element being created, which had its id set to ele_id.  There SHOULD be no difference between them.  However, these two are NOT necessarily the same.  Javascript is super weird, and when I was testing I entered into the console a for loop which would call generateMLGElement() many times with no delay, and I found that the function itself would fully execute, but queue the .load() statements, which would be executed later (So if you ran generateMLGElement() 4 times extremely rapidly, it would execute all the code in the body excluding the stuff in .load() 4 times, then execute the stuff within .load() for each element after all that was completed).  This caused the ele_id to always be set to the id of the greatest element created for every single element.  So if the four elements were created, the ele_id accessed by every .load() function would be 4, regardless of what the id was supposed to be.  I worked around this by pulling the id out of the element itself rather than relying on the element id.
  • If you couldn't quite understand what I was talking about, try modifying mlg.js so that the timeoutManager is sent ele_id rather than than .attr("id") in its addElement method (the one shown in the code snippet).  If you enter into the console a for loop such as for (var i = 0; i <=5; i++) {generateMLGElement();}, you will see that the elements with ids 0 through 4 will not be removed but instead remain on the page (faded, but still there), because the id 5 will have been removed and registered for every element.

 Code:

  1. function generateMLGElement() {
      ...
      ele_id = ID_PREFIX + idManager.assign()
      element = 
        $('<img class="mlg" src="'+ imagesrc +'" ' + 'id="' + ele_id + '">').load(function() {
          ... 
          timeoutManager.addElement($(this).attr("id"), 2000);
        }) 
      ...
    }

Friday, May 23, 2014

Changes 5/23/14

Nothing:

  • Didn't really do anything because of the workplace readiness picture and having to leave early.
  • jQuery: Realized that I need to set element ids in order to fade and remove elements a specific time after they are created, since remove is not queueable after a delay().

Thursday, May 22, 2014

Changes 5/22/14

jQuery:

  • I kind of gave up on the thing which will add something at the pointer when you click, because it was really finnicky and glitched out a lot
  • Now I am trying to have elements fade in and out at random locations on a loop, which works, but I can not remove the elements at the end, which causes the page to eventually have an infinite number of elements
  • The main problem I'm having is an inability to distinguish between different elements of the same class.  For example, I want to remove a specific element of the "mlg" class 800ms after creation, but the only thing I can do is $(".mlg").remove(), which will remove all elements.  I need some sort of data binding scheme in order to get this stuff to work.

Tuesday, May 20, 2014

Changes 5/20/14

jQuery:

  • Made my homepage just a bit more MLG
  • It was really frustrating, though.  I've been learning about onclick events, setTimeout(), element creation, image loading, and other stuff for the last two days, and by far the most frustrating stuff has just been the wierd quirks in javascript
  • For example, you cannot get the width or height of an image directly, only after it has been added to the page.  You also have to make at least one integer a float when dividing in order to get a decimal answer (seen when setting the height variable in mlg.js).
  • The setTimeout method was also really confusing because you can't pass a variable into the method within setTimeout, or it will not delay.  I was trying to pass this  in and it would not work.  It took me like 20 minutes to figure out the proper way to do it, even with googling, which ended up being setTimeout(function() { element.remove(); }, 125); where element = $(this).
  • Getting the cursor position from the mousemove event was also really confusing, as a guy on stackoverflow said that you needed to use event.offsetX to get mouse position from the event variable.  Then someone else said that on firefox, you needed to use event.layerX.  I tried both of these and neither worked, so I investigated and I believe that these two methods are for getting mouse position relative to an element, whereas I wanted location relative to the page.  I ended up using event.pageX, which I should have just done from the beginning.
  • All this stuff can be seen in the file here (UPDATE: changed to mlg_old.js), which is loaded into index.html

Monday, May 19, 2014

Changes 5/19/14

Ruby:

  • Worked on arguments parsing, improved clarity of program function to the user
  • DRYed out repeated code
  • Commit is here

jQuery:

  • Started working on a javascript file to enhance the website experience

Friday, May 16, 2014

Changes 5/16/14

jQuery:

  • Started adding javascript to website

Thursday, May 15, 2014

Changes 5/13/14

Javascript:

  • Worked on two way data structures from the jQuery example here.
  • It took a bit to get working, but I eventually figured it out.  Basically if you have a textbox or whatever with an attribute called data-bind-123="name" and change the value in it, it will update the name attribute of a User class that has a uid 123 as well.  Likewise, if you use console to update the name in the object, it will also update in the textbox.

Changes 5/15/14

jQuery:

  • Worked on the movable window thing
  • Combined the 2 way datastructures thing with the movable windows, and wrote a function to assign uids on demand.
  • I'm not really that good with javascript syntax though.

Monday, May 12, 2014

Changes 5/12/14

jQuery:

  • Worked on the movable window thing some more, but I'm kind of out of my depth because I'm trying to create an object which binds itself to a div, so that someone interfacing with the object can change stuff in the div
  • This functionality seems pretty complex to implement.

Friday, May 9, 2014

Changes 5/8/14 Part 2

NSFPatents:

  • Went to NSF and talked to Kevin about moving forward with the project
  • He wants to split the program into an apps script and a grants script, which makes sense because the two are separate...except that as I'm typing this I realized that I think it is in fact valid to have ranges with both apps and grants using the "both" keyword, which didn't come up in our discussion.
  • I agree that the two are relatively separate, but in my (inexperienced) vision of what a split script would look like, there would be a lot of repeated code.
  • Kevin said he would start off on it so I could see an example, which I am pretty excited about.  Our goal is to make the program more testable and able to withstand change, things that I am not very good at because I have never done them before.

Changes 5/8/14 Part 1

NSFPatents:

  • Worked on the functionality map some more
  • Played around with modulating the code:  Moved FileRange functionality and FileArgument functionality into their own modules within the NSFArguments module to better illustrate their separartion.  I'm not really sure if this will be our final structure, though.

Javascript:

  • I know that jQuery UI has a lot of the same functionality that I am trying to do with my windows thing, but I am doing it as more of a side project/learning experience so I've decided to keep using vanilla jQuery and writing my own thing
  • Got elements with the windowed class to be independent of each other: previously if you moved one they would all stack to the location being set to the first.  However, I added proper checking for the mouseover class that is added to the box being moused on.

Wednesday, May 7, 2014

Changes 5/7/14

NSFPatents:

  • I was listening to a guy talk about his experience on death row, so I only worked for about 40 minutes today.  
  • I drew a diagram of the current functionality of the patent program to look at how the different parts of the program interact.  Our end goal is to start splitting up the one large file into smaller files.

The diagram:

Tuesday, May 6, 2014

Changes 5/6/14

Ruby:

  • Figured out ruby multi-file structure - For this example I'll use 2 files, a run.rb and a my_module.rb in the same directory.  my_module.rb has a module called MyModule defined within it.
  • A separate file can have its own modules, and to get access those modules, one must add a require statement to run.rb:
  • require './my_module'
  • Without the ./, ruby cannot find the file because it doesn't look in the run directory of run.rb
  • To get at MyModule, one must then add an include statement to run.rb:
  • include MyModule
  • Note that there are not quotes around MyModule.
  • With this done, run.rb should be able to access the classes within my_module.rb.  See the code box for a real example.
  • In the code, you can see that the ArgumentsHandler class is referenced with a ::.  I'm not exactly sure what this means, but it is the way that you reference classes within modules in ruby.
  • I started trying to split up processFile, but I ran into some design questions.  For example, I have a set of methods that lend themselves well to an enclosed class, but since the class is only used in the arguments parser (its own module), I'm not sure if the whole program or just the arguments parsing module should know about the third module.  I should probably just introduce classes on a need to know basis to avoid extra dependencies, and only have the arguments parser know about the filenames lister module

Ruby Code:

  1. #require statements
    #... 
    require './nsf_user_input'
    include NSFUserInput
    #code
    #... 
    args_handler = NSFUserInput::ArgumentsHandler.new

Javascript:

  • Got working a div that you can drag around with the mouse as a very primitive window.  I don't have a whole lot of time to work on it because I am mainly focusing on ruby, but I think this kind of thing is pretty cool
  • Learned about jQuery UI, a library to do stuff exactly like what I was doing

Project Proposal:

  • I'm going to present my ruby thing

Monday, May 5, 2014

Changes 5/5/14

Stuff:

  • I don't really want to work on processFile.rb until Kevin replies back.
  • We are going to be significantly restructuring the file, and I want his input
  • I did a bit of ruby experimentation.
  • I also started working a bit with jquery, and it was pretty confusing switching to the language, as it is just similar enough to be confusing.  Ruby is a lot more forgiving with syntax than javascript.

Thursday, May 1, 2014

Changes 5/1/14

Ruby:

  • Looked at restructuring processFile.rb to be more object oriented or agile or whatever you would call it.