A Picture Paints a Thousand URLs

Starting to look into the various drawing libraries there are out there for HTML5 and I am looking for some particular features. These are:

• Ability to draw freehand shapes within the bounds of a canvas element.
• Drag and Drop elements on the canvas and move them around.
• Dynamically generate elements onto the canvas for user.

So the closest I have come so far is sketch.js for the handling of freehand shapes and kinetic.js for the shape manipulation and the drag and drop. Both seem to work very well on their own, but when I apply to the same canvas sketch.js takes control and removes all the work that kinectic.js has done and claims the canvas for itself.

I have to figure out if there is a way for me to use sketch.js as another 'layer' within kinetic.js which will allow the user to annotate and drag and drop elements within the same canvas. 

Or alternatively simply use kinetic.js for everything. I will proceed with this line of thinking first as this would be the best outcome as sketch.js is pretty simple to begin with and should be already present within kinetic.js.

More reading and looking at the Crazy Snake Tutorial has lead me to believe it can be done, but I have stepped back and thought about what it is I am trying to do. I want the user to be able to drag fixed elements and also annotate on the same canvas? That sounds pretty screwy, in fact I don't think it has been done on a Windows/Mac app without the use of layering. As you wont want to place elements and draw at the same time, it can become messy.

I will change the process to a two step, first draw your diagram freehand using sketch.js, then drag your elements around till your hearts content, ill obviously have to provide a way to switch between the tools but I think that will be the fastest and best outcome for the client.

I am finishing off the job now, looks like sketch.js and kinetic.js did work out well, the sketch was created with sketch.js, then the dataURL string was saved into a variable and placed into a layer within kinetic.js which had the elements pre-loaded on top. This way user can't mess up what they did in step one but they have full flexibility to drag elements around the stage. After the user saves, the dataURL replaces the first dataURL, then I used mydigitalstructure to save the image as a PDF. Emailed it across to the user and then done.

One major snag I hit along the way in my app was that when I positioned a canvas outside of the iPad's viewport and had to swipe my finger down to see it, the shapes within were no longer draggable. This was not an issue with any desktop browsers, I guess it had something to do with the touch implications. Seeing as I didn't want the canvas to span multiple viewports I just hacked around it by positioning the viewport before placing the canvas and it seemed to work.

I am sure it was probably just a positioning issue with some of my HTML, as this example works on ipad fine and the canvas is first rendered off-screen. No biggie, just annoying.

All in all very interesting development project and experience that can be re-used in the future.

Modals, Edits and oOjects

Have been looking into standard objects (contacts mainly) and editing lately and have been wondering when it is best to use Modals, or Windows vs actually pushing content into a new viewport in page. Most of these approaches tie into the development widgets at Kendo UI for Web and are quite different in their approach.

Take this instance of editing a contact, a user would obviously want to search for the contact first most interfaces handle this the same way, but after they select the contact they wish to view or edit the attributes of said contact. This is where the similarities end and different interface designs take place.

Kendo UI Inline Edit

Some allow you to edit directly from where you searched inline. 

Inline Edit is great for data sets where the user only really needs access to a few fields to edit the table directly and this increases speed of users edit. However, this also means the user hasn't really established a direct view connection with the object (row) in question and may feel like they are simply editing an excel table. Also if you start having more then 5-6 fields the user can get lost quite quickly editing from left to right to complete the row. I think users would prefer a long page with a lot of elements then a wide page where the fields are listed left to right, harder to read. All in all good for maybe product price adjustment lists which don't have many fields and allow you to edit but for a contact which has lots of data not really user friendly.

Kendo UI Popup Edit

Others may use a Popup Edit Modal.

Popup Edit allows the user to actually enter a view for the object in question where they can edit the data. This edit view can be presented differently from the standard search view and will make the user feel as if they have 'opened up' the object in question. This means that your search view can be really simple and can avoid having lots of text as the editing is not done inline. 

This however, can fall apart, if you have a variety of object links in context to the current object. For example "I have a contact which has actions linked to it, in the edit modal, I would like the user to be able to view the actions in the same modal" having this in a window could create confusion with the user as they could open the modal at the contact search screen, but lose context as they navigate across to the action object. If you are going to use a modal for editing an object it cannot be too complicated, should be a single screen should avoid cross object issues. If you want to create a view where a user can view a contact and all the actions they have linked then it should probably be part of your contact view, not the edit screen.

Custom Edit Screen

A Custom Edit screen can be created and is probably the approach of choice in most situations and is the most popular. These usually mix in read only structure with editable fields, this allows the user to have a nice view of summary information about the object and also a separate area for editing of details, all of this is contained in the same view of the object, just containing specific areas for edit.

The approach also allows for cross object linking so a user could navigate from a contact to a linked action and change object views without being confused as to where they are in relation to the objects they are working on.

Overall

These approaches are definitely not the only ones available as a developer but I think it is worth having a look at each, it all relates back to your audience and what the users are looking for in the app. Custom Edit is obviously the most used, but in some cases an inline or window might be best for the user.

Kendo UI, mydigitalstructure, PhoneGap native on Android

Set out to create a simple HTML5 web app with Kendo UI, then use PhoneGap to port it across to Android to see how difficult the process would be. The answer, not difficult at all which makes sense as it is noted on Kendo's website that PhoneGap and Kendo play nice together, I didn't think it would be this easy though.

First thing I set out to do was to use Kendo UI tabstrip to create a simple HTML5 page where I would use mydigitalstructure to allow a user to login and have the tabs of Actions, Contacts at the bottom of the page and when they switched between each they would be shown the actions or contacts based on a remote source represented in the Kendo UI datasource.

After creating the HTML5 app using Kendo UI mobile I had two html pages, the home page (which contained the login Modal View and a page called apphome which contained the tabstrip items. Both pages contained references to the relevant kendo files and to the master01.js file (this is my javascript that contains the details what GET and POST commands to send to mydigitalstructure).

Beginning to port, I once again followed the information at PhoneGap for Android and fired up Eclipse and built my page and ended up with an index.html swapped in the cordova js file and then started to copy and paste in my header scripts from the HTML5 app, namely kendo.mobile.all.min.css (mobile css for Kendo), 1466site.css (an additional css for my app),  jquery.min.js (a helper js library), kendo.all.min.js (all js for Kendo) and my master01.js.

All went well I created copied across my HTML from the home page and created a new file called apphome.html, since I changed the name of my apphome page I had to change references in the master to read app.navigate("apphome.html"); instead of app.navigate("apphome"); but easy fixes all round.

Then i tested and sent the result to my Android HTC Desire, and the login screen was displayed with the details and basically looked exactly like the HTML5 experience minus the chrome, great stuff, now all going well but after logging in I was encountered with an issue

08-05 11:01:10.932: E/Web Console(19937): Uncaught TypeError: Cannot call method 'replace' of null at file:///android_asset/www/kendo.all.min.js:8

What the hell is this? This appeared in the LogCat logger of items, and since this was the first time I had hit an issue with Eclipse I was truly scratching my head wondering what is going on. My only option was to start commenting out HTML elements to see what is causing the issue. After basically taking the app back to grass roots and slowly building up I suspected the issue was caused whenever I was trying to load content in from the datasource??

Found it finally I had made the simple mistake of not copying across the templates script snippets from the HTML5 app, so Kendo UI was trying to create the listview but had no template as a reference, I added and tried again and everything was fine my contacts and actions would load when each tabstrip option was pressed, very nice, now I have a native app on Android which uses Kendo UI, mydigitalstructure and PhoneGap. 

Now since I am not using any native phone features (location, filesystem, camera etc) that will be my next step to incorporate these features into the app too, also I want to see how I can maintain a session so the user has no need to constantly log in.