Archive for the ‘Javascript’ Category

Changing variables using a web interface and embedded HTTP server

Tuesday, April 21st, 2009

When walking around during the Boston Regional, I had been talking to some people about code, and they mentioned that LabView was great because they could tune their PID controllers on the fly while the robot was operating. So I thought to myself, “why can’t I do this with C++?”. And… so I did. WebDMA was created to allow our FIRST Robotics team to tune our robot in an easy to use and intuitive way via any modern web browser.

Using C++ operator overloading, WebDMA provides proxy objects that your application can use as normal variables which can be manipulated or displayed by your application via a configurable jQuery/javascript powered Web 2.0 interface hosted by an lightweight embedded web server.

Despite that WebDMA was specifically created for use in FIRST Robotics on the NI-cRio/vxWorks platform, it uses the Boost ASIO portable networking library and Boost Thread portable threads library and is usable on any platform supported by these Boost libraries (tested on Boost 1.38, requires a patch for vxWorks).

A non-functional (but very shiny) demo of the interface is available at http://www.virtualroadside.com/botface/index.html

Visit the Google Code project site for WebDMA

Update: Go here for a video: http://www.virtualroadside.com/blog/index.php/2009/04/25/webdma-demo-video/

Improved innovative Javascript/CSS enhanced resume

Monday, November 19th, 2007

I mentioned earlier this year that I had created an enhanced resume web page for myself, by using javascript and css to display either a ‘full’ or ‘condensed’ (one-page) version of the resume, and mentioned also that it would be pretty trivial for someone to make it work for different categories if they wanted.

Well, I did just that, and you can see my newly updated innovative computer engineering javascript/CSS resume on this site now! I’ve spent a lot of this weekend working on categorizing each part, and reducing each category so that they fit into one printed page (on most systems, anyways). Its pretty unique, you should check it out.

One of the things I’ve done with this is tried to refocus it to highlight my strengths in particular areas, and focus a lot more on my security/engineering background, as opposed to just my web background. I haven’t begun my job hunt yet, but with graduation in December, that may start soon if my graduate applications don’t work out. (more…)

jQuery snippet:

Thursday, July 12th, 2007

Here is a neat jQuery snippet that you can use to create extra elements in a form, underneath (mostly) the previous element. Took longer than it should have to create this since I didn’t quite understand the behavior of “before” and “after”… ie, a parent node has to exist for them to work.

<input name="field[]" type="text" /> <a href="#" onclick="$(this). before('<br/>'). before($(this). prev(). prev(). clone()); return false;" href="" >+</a>

This snippet works especially well inside of a table. 🙂 Unfortunately, I don’t have a demo of the code since I don’t have jQuery enabled on this blog.. yet. 🙂

Visual jQuery: Awesome jQuery Reference

Thursday, July 12th, 2007

This is seriously the coolest form of documentation that I’ve seen. Implemented using jQuery by jQuery developer Yehuda Katz, Visual jQuery implements the API documentation for jQuery using an expanding tree of categorized nodes. Its quite innovative, IMHO. If you develop using jQuery, definitely a plus to have around. And, there is a downloadable copy of it available too. 🙂

http://www.visualjquery.com/

jQuery rocks

Saturday, July 7th, 2007

Have you used jQuery yet? I know its been around for awhile, but I’ve only recently been using it. Of course, there are other similar javascript frameworks out there. jQuery makes javascript development ‘fun’, according to the website, and I would definitely agree. It makes so many mundane things way easy and quick to do. If you aren’t using it for your web applications, I’d definitely recommend it. I’m using it in my LOLCats generator demo page, and in my website stats analysis program (which will be formally announced and released in the near future), and it definitely allows you to do some really crazy things quickly.

http://www.jquery.com/

Codepress vs. Editarea

Friday, June 8th, 2007

A short while ago I wrote an article discussing Codepress, and some of the problems I had with it (link to Codepress Problems). There were other issues that came up as well over the past few weeks, but I found a different javascript-based highlighter called Editarea. Editarea appears to have been around about the same amount of time as Codepress, except that it seems to be harder to find. Anyways, a short table of some of the features that they both have/don’t have.

  Codepress Editarea
Syntax Highlighting
Syntax Highlighting (web things like HTML, CSS, JS) Yes Yes
Switch syntax highlighting “On the fly” Yes No
Convienence Factors
Auto Complete Yes No
Auto Indent No Yes
Change Tab Size No No
CTRL-S support Simple patch Simple patch, has save button
Find/Replace No Yes
Indent selected blocks of text Complex patch Yes
Show Cursor Information (line, column) No Yes
Word Wrap No No
Copy/Paste Removes tabs Original Text
Feel
Speed Quick Slow
Bugs Stable Stable
Misc
Dynamic Line Numbers No Yes
Browser Support IE, Firefox, Opera IE, Firefox, Opera
Ease of integration Easy, has install notes Easy, has more documentation and options

So, who wins? Right now, I say Editarea is winning, since Find/Replace, good copy/paste, and block indenting are all critical features that you don’t realize you’re missing until they’re gone. However, I feel that in the future both editors will continue to improve significantly. Hopefully they solve the tab size problem.. 🙂

Note: While writing this, I found yet another syntax highlighting editor with no official name at http://marijn.haverbeke.nl/highlight/ . This one isn’t quite as nice looking as Editarea or Codepress, BUT it does appear to do word-wrapping nicely. I’ll have to look into it more.

Javascript/CSS enhanced Resume

Sunday, May 20th, 2007

When I was looking for research projects to participate in a few years ago, I decided the best way to find them would be by emailing various professors and sharing my interests with them. However, I figured a resume would be useful to share with them as well, and I only had it in MS word format. So I put it into HTML format.

However, the biggest problem with my resume is I tend to put a lot of stuff in my ‘master copy’ of my resume, and change it according to my targeted audience. So, by putting everything on the web, printing it out results in around 3 pages at this writing. Common resume advice always says to keep it under a page.

My solution: use javascript and CSS to create a resume that can serve multiple purposes! On the top of the resume, is a listbox that when switched, switches between a ‘full’ and ‘condensed’ version of my resume. The condensed version is designed to be printed out in only one page.

Heres how it works: (more…)