Geeks With Blogs

News Please visit me at my new blog!!

profile for Aligned at Stack Overflow, Q&A for professional and enthusiast programmers
"free in Christ Jesus from the law of sin and death." Romans 8:2 (ESV) Check out the Falling Plates video on YouTube.
more about the Gospel
And then listen to Francis Chan speaking at LifeLight in SD.

Programming and Learning from SD
I get to be a part of a project that is re-writing dashboards from a Flash implementation to all HTML5. Our lead developer liked the Wijmo gadgets (as do I), so I've been putting the gadgets to the test. At the time of this writing we are using version 2.1.6. I really like how they look and they seem to perform well. I don't like the lack of information on how to style these and some of the other behaviors. Some of the requirements are:
  • They have to be able to re-size with the browser and have the UI re-size as well.
    • You need to call the method with the "redraw" option. It's unfortunate, but it does work. I haven't tried to put 10 or more controls yet to performance test this. I wonder if using Canvas instead of SVG would allow them to dynamically re-size as in this suggestion or what about a viewbox inside of SVG?
    • My post without any responses:
  • They need to be able to be put into configurable areas and re-sizable. Drag and drop would be great to allow the user to easily re-arrange their dashboard.
    • We're looking into putting the gauges in the Wijmo dialog. I hope it works :-).
  • They need to be skinnable to provide custom looks to match current gauges, some of which look like real life gauges. The user should also be able to set colors and themes.
    • I was disappointed that some of the observables didn't work. See my jsFiddle.
    • I haven't gotten any responses yet on StackOverflow or my user voice input (vote if you feel the urge). I'll add a link to this post to give Wijmo better feedback.
    • I'm going to try returning a razor partial view with MVC that has these values databound on the server. This approach looks like it should achieve this requirement. It just won't be as dynamic when the user configures them. I'll blog about this later.
  • Performance is key. We need to have multiple gauges/charts/etc on the same page updating in real-time.
    • The browser seems to handle it well.
    • It seemed a little clunky on my Asus Transformer Infinity. I was looking at the GeoDashboard demo page. Some of the scrolling was showing blank areas for a moment.
  • We want to use Knockout.js to bind data received from SignalR. I was very excited to see Wijmo has Knockout support.
  • It should work on mobile phones and tablets. Therefore, Silverlight and Flash are out.
See my jsFiddle

In conclusion: the controls are very cool, re-sizing can be improved, I hope they soon add observables to make it dynamically visually configurable, the documentation could be improved to describe functionality better, but it was helpful. 

The next step is to hook these up with SignalR and create more custom gauges!

Thanks to Chris Bannon from Wijmo for his quick reply to my question. Looks like the next version will support more observables.

The Grid v2.2.1
I started working the Wijmo Grid and wanted to add a "no data div" when no rows were showing, filtering based on an outside textbox. Here's my results:
The "wijgrid("ensureControl", true);" has to be called to get the data to update. I wish it would just update when the observable changes. I wonder if it draws the entire grid or just updates the cell (I hope the later). I need to update these values as the status or other information of a element in the grid changes.
EDIT: the ko.observable is working in my latest update. I'm not entirely sure what I changed....
I also want to highlight a cell when data changes (a nice animation that glows it, then fades out). I wish I could do that with a knockoutJs binding to a css class or something, but I haven't figured that out yet.
Posted on Thursday, August 16, 2012 2:27 PM Wijmo , Knockout Js | Back to top

Comments on this post: Wijmo and Knockout js

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © Aligned | Powered by: