Posts Tagged JQuery
Basic Authorization fails for special characters with JQuery on mobile-web-kit
Posted by Morten in Uncategorized on June 20, 2011
We are using Basic Authorization for our REST-api at RemoteX and it’s no surprise that we have a lot of special characters in our usernames (åäö and spaces). What’s interesting is that using JQuery.ajax() with just username and password will fail for these special characters.
Encoding the username and password options to the .ajax() call will make it work on Android but still will not work on iOS.
After some research started using the method outlined here: http://blog.rassemblr.com/2011/05/jquery-ajax-and-rest-http-basic-authentication-done-deal/
Where they set the Request header before sending the request to the server. What we noticed is that doing this will work only if you also clear the username and password options to .ajax()
so for us it became something like:
options.beforeSend = function(xhr) {
xhr.setRequestHeader("Authorization", "Basic " + options.base64);
};
var base64 = Base64.encode(options.username + ":" + options.password);
options.base64 = base64;
options.username = "";
options.password = "";
Also we used the Base64 encoder found here: http://www.webtoolkit.info/javascript-base64.html
The crypto-js base64 encoding didn’t work for us for some reason.
Home automation using TellStick and Linux
Posted by Morten in Uncategorized on December 30, 2010
I got a Tellstick for Christmas together with some Nexa remote controllers for the lighting at home.
I knew that this type of project needed to be started immediately or else it would just loose it self in a drawer somewhere. So I added some tasks to Track and Shuffle and got to it.
I wanted to stick installed in my Linux server that sits in my closet and acts as my home’s central information system. So I was natural to install it there.
Tellstick has more software available for Mac and Windows, but they do have software for Linux as well.
Install the tell stick software on the Linux machine according to the following guide: http://developer.telldus.se/wiki/TellStickInstallationUbuntu
Configuration of devices can be found here: http://developer.telldus.se/wiki/TellStick_conf
Software page seems promising: http://developer.telldus.se/wiki/Software
The install for Linux is just a C library, so I’ll have to set up some services to use the stick, but first. How to set up a device?
Apparently all you have to do is edit the configuration in /etc/tellstick.conf. This is how I did it.
deviceNode = "/dev/tellstick" device { id = 1 name = "Spotligh bokhylla" protocol = "arctech" model = "selflearning-switch" parameters { house = "1" unit = "1" } } device { id = 2 name = "Taklampor bokhylla" protocol = "arctech" model = "selflearning-switch" parameters { house = "1" unit = "2" } }
I spent a long time to figure out how to find out which house code to use. It turned out that all you do is select on and teach it to the Nexa receiver.
Now for the services?
I want to have it as a webpage, and some way I’m used to programming against. a Rest service comes to mind since I enjoy that model. So I need to create a wrapper for the C library. So what to use: Python? NodeJS?
Bingo, Apparently there is a restful web service already available.
https://github.com/pakerfeldt/remotestick/wiki/rest-api
I even has a Android app for the server.
With this setup all I had to do was to write a little JavaScript page that turns the lights on or off.
So I did just that, here is the result of the first version.
It has support for dimmers, however I haven’t been able to try that out fully due to lack of well… dimmers.
I tried to get it contributed to the remotestick repro, however the author pointed out that it was better to have this as an add-on to the remotestick-server. So the end result is that you can find the GUI here: https://github.com/morkeleb/remotestick-webgui
The all you need to set it up is to download a release available under downloads, and then extract the static directory to the static directory under remotestick-server.
Now I wanted the webpage to be accessible through port 80 without interrupting any of the services already running on my box, luckily this holiday I configured my Linux box to run with NGINX to front all the different services available through HTTP on my box.
Configuring NGINX to run proxy remotestick and handle my JavaScript page
location /remotestick/ {
proxy_pass http://localhost:8422/;
proxy_redirect off;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
There is a problem with hosting it under NGINX since it changes the url and the Android app for Remotestick currently only works with IP-addresses, however I haven’t tried the latest version which was released just a few days ago. It should be able to handle more general addresses to the server.
I hope to add a simple guide for adding new devices trough the web interface, since it would greatly improve the setup experience of adding receivers to my home.
Currently the greatest problem with the TellStick is that it’s not quite easy to install and setup, however I hear that TellStick is working on a service called TellStick Live! that is in beta for Windows and Mac users.
We’ll see how this evolves 
Presenting JS-Analytics
Posted by Morten in Uncategorized on May 4, 2010
With the success we had with EQATEC Analytics at RemoteX I started looking around for something similar, but for JavaScript. I didn’t find anything that satisfied my needs.
Thus I created my own error collecting and analysis tool, and named it JS-Analytics.
You use it similar to how you use Google Analytics, you add a few given script tags to your website and JS-Analytics will try to collect any unhandled JavaScript error that occurs, and send information about it back to JS-Analytics website.
JS-Analytics uses a combination of window events to collect errors. These events aren’t available on all browsers so JS-Analytics will use JQuery to provide cross browser support. This means that cross browser support is only available for JQuery code.
For more information about how it works I recommend this page.
Right now this JS-Analytics provides just some basic analysis. But I felt that it was better to announce it and hopefully get some feedback on it, than to carry on without any feedback.
Functional TagEditor
Posted by Morten in Uncategorized on November 29, 2009
I notice now that I cannot use the tag editor I’ve created from RemoteX Applications on my personal laptop. In requires a larger screen than what I have.
Anyway, this is a working version of the design I showed to mock-up earlier
Each row has a sub-class handling each option in the drop down (Strategy pattern). Selecting an option changes the available controls for editing the tag.
Target acquired
Posted by Morten in Uncategorized on November 26, 2009
I ran into a designers block while working on a new feature for the online configuration editor for RemoteX Applications. (notice the name change?)
An interesting observation was that the risk for the design has shifted. In previous features I started with QUnit and the highest risk part, isolated it, TDD:ed it and got it working. I work with the same tactic now, but the issues have moved to different parts of the view.
Now the complexity is in the editing fields all of a sudden. Forcing me to start my testing on those components.
To unblock my designers block I used Balsamiq Mocks to draw up a UI. I hade a vague idea to begin with, and Balsamiq helped me finalize my thoughts into the following UI.
(Looking at it now I notice that I forgot the “Add” button)
Are you writing JavaScript or JQuery?
Posted by Morten in Uncategorized on November 22, 2009
I’ve noticed that more and more, when I search for infromation for JavaScript I search for JQuery not JavaScript. Have I reached the point that I consider developing JavaScript code to be JQuery development? It is of sort natural, as JQuery close to eliminates alot of the work required for multi-browser support, it is better to have a JQuery backed solution.
I can only speak for myself, but it would seem that a lot of people are doing the same thing.
A library that acctually positions itself above the language it is written in? Accepted by both Google and Microsoft? The impact of JQuery on the web-development community is truly facinating,
RemoteX Localization Editor final touches
Posted by Morten in Uncategorized on November 19, 2009
I’ve been working on a JavaScript client for our REST-service. So far it’s an editor for Localization and pick list options. But I was on a roll!
So we charge by the amount of users each installation, lets add an easy way to calculate the amount of users. Download the list of users, and just count them. Pretty easy when then REST server is already in place. To the right here you can see the end result of the view of the users. I did a similar one to calculate what we call resources.
While I was on that I figured I could add some graphs. I have a small thing for visual data. I found the JQuery Flot plugin, which suited my needs quite well.
I combined the flot plugin with our REST based search API and created some graphs. All cooked together I could produce a statistics view like this:
To finish things up I added the style used on RemoteX website, to get a consistent feel. This took some sweat, as the style sheet is generated HTML and CSS from dotNetNuke, and not exactly the same as my carefully handcrafted HTML. In the end I got it in and here is the end result.
RemoteX Applications Localization Editor next step
Posted by Morten in Uncategorized on November 17, 2009
In a previous post I mentioned that I started working on a localization editor for RemoteX Applications. This last week I started change a few things on the server side.
In RemoteX Applications there are certain combobox’es where you can change the content to customer specific lists. Previously they have been stored as XML files on the server, but this caused long process round trips for changing them. It also added cost to our Operations department at RemoteX. Currently were trying to reduce process costs and delays for our Operations to free up resources for tasks with higher value.
The list configurations are now stored in the database of the system, and is accessible through the REST service. Allowing me to create yet another web based editor.
This one was very similar to the first. Pick a list to edit, add or remove some keyword; then save.
The work was straight forward as it was so similar to the precious editor. The separation of concerns between the classes allowed me to just implement a few classes to get a first prototype up and running. The whole solution was completed in a couple of hours.
I added both editors to the same page, and quickly noticed one thing. If you changed editor you needed to enter your password and username again. This couldn’t do.
So I used the technique outlined in my other post about AJAX and Basic Auth, to add a single login dialog forcing the user to login when the page loads.
With some JQuery UI I got the above login dialog. Now the login state is available the entire duration of the “visit”.
Testing JQuery AJAX communication code
Posted by Morten in Uncategorized on November 15, 2009
I developed a JQuery Application using TDD these last couple of days. During the testing I used a new technique for testing my AJAX calls, so I thought I’d blog about how I test AJAX calls done by JQuery.
First of you have to see that there are several things to test in just a simple $.ajax call. There is not only all the combinations of the options, there is the behaviour of what to do when the call fails, or is successfull, or times out. There is a boundary between the JavaScript code and the server, will you pass it? Will you test the communication with a server, or even a mocked server using an XML file?
I’ve been testing $.ajax get operations using XML files as a mocked server backend for a while, but recently I mocked it instead.
Mocking $.Ajax requests is quite easy. Before you execute the code that will make the AJAX call, you exchange the ajax function.
$.ajax() = function(options) { options.fail(); };
The above line of codes forces the following ajax calls to automatically execute their fail callbacks. The function can easily be changed to simulate different behaviour of the AJAX requests.
Using this technique there is a risk, that the tests your writing become whitebox testing. The ajax mocking code becomes twins of the code your testing, resulting in a verification that the code is written as is, but not testing that it does what it should do.
Localization editor for Applications
Posted by Morten in Uncategorized on November 7, 2009
I don’t realy know what to do right now, so I thought I’d share some of the latest work on RemoteX Applications.
RemoteX Applications has support for multiple languages being used in the same hosted installation. Basically we install a set of languages for each installation. Now most of our customers want to make some changes to the standard localization. These changes were made by our operations team, who would verify the installed language on each system installation.
While this is all fine and good, the problem is when we update the localizations. All of a sudden there is a lot of different customer specific language packs which needs to be updated with new keywords and translations. Others might need to be removed.
What we have done now is to separate out customer specific changes from the standard language packs. The operations teams can handle the standard language packs and the customer specific details are separated out and can be managed independently, thus not slowing down upgrade scenarios.
But it doesn’t end here, I finally got some use for my JQuery work for RemoteX Applications. I just completed a minor web application to handle the customer specific changes in an AJAX interface, talking with our REST-service.
RemoteX Applications Localization Editor
The screenshot above shows the interface. The editor allows the user to make changes to different languages on different applications. The interface displays the keyword, and the standard translation, allowing the user to enter his or her own translations in the text box.
Changing Localization details
The text box saves the override to the server. There are also options for adding new keywords, updating specific keywords without finding the specific text box to edit.
What is fun about this application is that the idea just popped into my head a few days ago. The implementation time is around 2 days of TDD work. There are roughly 84 tests checking the Javascript using QUnit.
There are two things I especially like with the implementation. One is that the separation of concerns was separated out quite nicely, this was greatly beneficial for the testing. I also noticed that there are some quirks in the interface which wouldn’t have been there if I hadn’t used TDD.
I had an idea of how I wanted to make the interface from the start. But my initial plan was to write it using WPF and host it in the Windows Client. However since I made this in JavaScript using JQuery the approach was a bit different. I’ll walk you through roughly how my plans evolved during the development process.
- The greatest risk I was was with the XML generation which was to create the messages I sent to the server. To mitigate this I started by isolating this functionality in a “class”.
- Once I saw that the tests were achieving the behaviour I needed from the XML Writer I started with the interface. I knew roughly how I wanted it, so I focused mainly on the behaviour. I work heavily with DIV’s, if I know I need to display something I add a DIV for it. This allows my to do formatting later as a separate step.
- The third class was the controls for selecting languages and buttons for loading. I knew from the start that I didn’t want any logic in these classes, instead I wanted to create a Controller pattern to handle all logic. This turned out great.
- The fourth class is where I started to notice some interesting synergies popping out from the code. The isolation level of the components allows me to reuse previous components to solve business needs through composition.
- Lastly, the controller logic is tied in to complete the application. The controller mainly ties all the UI together using AJAX. Interesting to note here is that I tested the AJAX by mocking the AJAX calls. Previously I’ve tested AJAX for doing GETs by having a static XML document to fetch. Testing it with mocking was quite easy and allowed for different kinds of testing.
The editor is now tested to be working in IE8, Chrome and FireFox.