User interface via network: What tools to use?

[JuKu]

I have a series of projects coming up, all variations of a mother project. It needs a fair number of io; relays, LEDs, couple of SPIs etc. The local user interface needs to be pretty. It needs to be remote controlled as well. Development should be fairly simple, no need to do our own CPU design, for example. A debugger (better than printf's) would be nice. We aim to build a base project that is as easy as possible to modify. Kind of like Arduino but more powerful or Rasberry but more io.

The current idea is to use Beaglebone Black for CPU (but suggestions are welcome!), and do our own hw interface, using available capes if feasible. The ui would be web based; the cpu serves nice pages with buttons etc either to a cheap tablet built in to the box or to a remote computer through the network. This can't be so original idea that the tools or framework wouldn't be out there already.

I'd like to find a Visual Studio -like tool that allows designing a web page by drawing buttons, sliders, indicators and such, when desired open another similar web page and so on. And just like in Visual Studio, get control directed to a subroutine when user presses a button, get routines to call when the cpu wants to update sliders and so on.

so, what is out there? If you have used something like this, please share your experiences! Thank you for any hints.

[nctnico]

AFAIK there are tools like dreamweaver (or what its called today) to put web pages together. The problem is mixing dynamic content. Perhaps flash would be more usefull. Flash has several good ways to get data from a webserver through an XML request over http. I have created projects based on a small ARM controller from which a flash application could retrieve information.

[alm]

I think even Adobe considers Flash a dead technology these days. Flash was never supported on iOS devices, and support for Android was discontinued. Good luck using it on a tablet.

I would use the power of modern Javascript frameworks to do most of the heavy lifting on the client side and use the light-weight JSON protocol to communicate with the server over Ajax (not unlike Gmail or Twitter.com). This simplifies the server-side code and allows you to use standard tools (eg. Firebug) to develop and test the web application.

I believe recent versions of Dreamweaver have some support for modern dynamic web applications, but I haven't used a WYSIWYG HTML editor for a long time. Don't expect it to be cheap.

[nctnico]

I didn't know it was that bad with flash. Recently I was talking to a potential customer and they want to add flash to their web-based product because flash is (still) used by many websites. Anyway, if flash is out then there is very little chance of using a wysiwyg editor. Microsoft used to push Silverlight but they already pulled the plug on that. The buzz-word-du-jour is HTML5 and there are some wysiwyg editors for that (I didn't try any of them). It seems Adobe has some add-ons to their Flash tools to convert them to HTML5. Perhaps the best way is to just hire someone to make the web pages.

[jucole]

What a great UI project to do! As a UI designer I would say that the technology to use would be dictated by the responsiveness required from the UI to the hardware.

Flash can be used on iOS and Android.   Via the Air runtime; one codebase to maintain, two platforms - pretty powerful!!

The Flash to Html export route via CreateJS in Flash is crap in my view!

The whole HTML5 thing in general is very much over-rated;  in reality the HTML5 features are almost where Flash was about 8 years ago! pretty sad really!

The problem I have with most web libraries are that customers always want something different and often you have to create custom UI.

The route I took was to work on my own Javascript layout library because I couldn't find anything that gave me the level of control I wanted, so far it's working out good, mainly because it's built on top of JQuery.


If you want help on creating a nice UI then let me know.

[MacAttak]

Not too much to add to what others have said. You should steer clear of Flash and Silverlight - those are dead-end technology paths. HTML4/5 with modern Javascript are the best bet. This isn't as simple and easy to get right as you might think though. The 1990's and garbage javascript code are behind us - modern scripting requires a great deal of engineering and design on par with good non-web code development. If you aren't a true web development professional who is up to date on current trends, libraries, and best practices, then you may want to find someone who is.

One thing I would caution you about is I suspect that you have unrealistic expectations out of the tools. The way you have described Visual Studio makes me think you are talking about entry-level Windows Forms UI development - which is very much obsolete at this point. These days nobody drags and drops buttons onto a form and then double-clicks to add event handlers (and if you know someone who does, then SHAME on them!). But even so, the tooling behind modern web development does not work that way at all.

As far as serving up the web application, I'm not familiar with BeagleBone capabilities. But you will at the very least need the ability to host an HTTP service process along with the ability to process remote requests (not just serving static content). Raspberry Pi can surely do this, and I'm guessing BB can too, but it needs to be verified. You probably don't want to be implementing your own HTTP service.

In a nutshell, you're going to have to buckle up and invest in some extensive self-training on HTML, Javascript, jQuery, and a number of other libraries before you would want to tackle a serious project like what it sounds like you are wanting to do. If that interests you, then awesome! But if not, then you probably want to start looking for a way to outsource it to professionals (and hope you don't get a charlatan).

[nctnico]

The king is dead, long live the king! Its seems Flash got renamed into a different product:
http://en.wikipedia.org/wiki/Adobe_Integrated_Runtime

@MacAttack: You can run vanilla Debian Linux on the Beagle board. So that includes a full blown Apache webserver.

[alm]

Yes, AIR will run on iOS/Android, but I'm pretty sure the apps won't run from the browser, like flash apps used to do. It requires you to develop a 'native' app and publish it in the app store (or sideload it). So much for it being a web application framework. Might as well use any other framework for developing native apps.

[IanB]

I'd like to find a Visual Studio -like tool that allows designing a web page by drawing buttons, sliders, indicators and such...

Have you considered Visual Studio?

Not a joke. Although I have not used it, my understanding is that with Visual Studio 2012 you should be able to do web app design around HTML5 and Javascript as easily as with C# and .NET. The idea is that you design the UI visually and the system generates the appropriate code to make it work according to the platform you are targeting.

Maybe worth a second look?

[kt315]

Pretty much what MacAttack said.

I'd stay away from any sort of visual editors for UI design, if you want it to look any where close to professional.

It is rather trivial to come with a simple web page that can send the button pushes over http -- there are plenty of tutorials regarding it on the web. You will have to invest time into learning JavaScript, HTML and AJAX if you want to come up with a decent web ui.

To very large extend you should think of HTTP in a similar terms as you would think of a serial interface: you send commands one way, you get the data back. The client application (the javascript and browser) will have to know how to make sense  out of the data and send the commands back. There is a fair share of details you need to understand to make this simple schema work, but in a nutshell it is all it boils down to.

On the client side it is Javascript, AJAX, JQuery, and JSON.

On the server side, it will very much depend on the requirements for the project. You can make it as simple as cgi scripts, or pick one of the ton of apache modules. There are in fact more lightweight web servers available for linux, but again, it would all depend on what you actually want to do with it.

The bright side of it (or the dark one depending on the point of view), you can do most of the programming and debugging on your regular PC (or Mac for that matter).

[MacAttak]

I'd like to find a Visual Studio -like tool that allows designing a web page by drawing buttons, sliders, indicators and such...

Have you considered Visual Studio?

Not a joke. Although I have not used it, my understanding is that with Visual Studio 2012 you should be able to do web app design around HTML5 and Javascript as easily as with C# and .NET. The idea is that you design the UI visually and the system generates the appropriate code to make it work according to the platform you are targeting.

Maybe worth a second look?

Those are misconceptions. VS 2012 doesn't have anything major over the competition when it comes to basic modern web development. Unless, obviously, if you are writing the server-side portion of your application using ASP.NET MVC. Which I doubt the OP would be doing since you would have one heck of a time running ASP.NET on any of these embedded systems. It's not a bad platform - just not appropriate for this task. And it is a very expensive tool compared to the competition if the only thing you are using it for is HTML and javascript.

There is no visual UI design involved with that, nor does it generate any multiplatform code.


WebStorm from JetBrains is a decent javascript environment (and quite cheap). I'm sure there are others too. Probably some good free ones. I don't know enough about the alternatives to recommend one or the other - I spend 60+ hours a week in Visual Studio. And that makes me exceptionally comfortable with saying that I am 100% confident that VS is not the right tool for this scenario.

[HackedFridgeMagnet]

I think the Beaglebone Black is a good choice, though I haven't used it.

Running some sort of linux and apache.
Maybe use a python web framework like Django. Though I personally prefer Java language if it is possible.

Client side I would use as others have said Javascript, AJAX, JQuery, and JSON.

I was involved with a similar project but based on the BeagleBoard. Unexpectedly the first prototype went into the field and was conspicuously stable.

[jucole]

This is something I did a couple of years ago; the tools I used were Flash and Air Runtime with the communication using xml sockets; the end result was rolled out to some iPads.   That workflow is not something you'd even attempt unless you've done a UI in Flash before.  You are much safer going with HTML and a nice library such as JQuery etc and then if you need a custom UI widget you can extend JQuery, and write your own plugin.

[amyk]

Ask yourself whether you even need JS in the first place; unless you're doing very extensive fancy clientside stuff, for controlling some hardware HTML forms work just fine.

Agree with HTML5 being overrated, but I don't think getting out the Flash is warranted for playing around with some GPIOs (not sure of OP's requirements; that's all I could glean.)

[HackedFridgeMagnet]

You need ajax, js etc if you are doing live data.
Otherwise it's too much data and to many page redraws.

Also if you use json or xml for your data transfer format then you can later do other types of client side apps which use the same data.
The server side stays the same as long as the data is the same.

[JuKu]

Thank you all for your insight and pointers to stuff for further reading. For basic user interface, it seems that Google Web Toolkit is just what we need, except for the general problem of pushing data to the ui without full redraw, preferably without polling also. Some clever js should be able to do that. (?)

[jucole]

except for the general problem of pushing data to the ui without full redraw, preferably without polling also. Some clever js should be able to do that. (?)

I would have thought you'd have to use polling, as how would you know when to update the ui?      In your code you would ask the hardware for the data,  then you push data to only the ui elements that required updating;  the best thing about modern html is you don't have to refresh the entire page to update ui like in the old days;  this makes web ui feel seamless and so much easier to create!

[HackedFridgeMagnet]

Although you can push data, it is so much easier to poll the server from the client.
It makes more sense too, as generally the server is always up and the clients come and go as they please.
Routing on the client side is also seamless if the client is polling, just ask them 'do you have internet access?'.

[amyk]

Polling can work like interrupts too: the client sends its request but the server doesn't reply until it actually has something to send, then the client can update. If the connection times out the client just requests again.

[JuKu]

I did some more learning: Pushing data to the client does not get much cleaner than websockets. 

[jucole]

I did some more learning: Pushing data to the client does not get much cleaner than websockets. 

hehe cool! sounds like a man on a mission! ;-)

[MacAttak]

WebSockets is a pretty new thing though and only some browsers will support it. Make sure you know which ones those are and if you can live with that limitation in your design.

[jucole]

http://caniuse.com/#search=websocket

[MacAttak]

Right. Browser support is pretty sparse according to that data.

http://www.webmonkey.com/2013/05/internet-explorer-10-doubles-market-share/

If that data is correct then roughly 65% of deployed browsers do not have websockets support right now.

[JuKu]

If we count the latest browser versions, only Android is not supported. Big deal, install Opera. In other words, 99.999% of devices that has screen big enough for this application can also use it. This is not an issue here, other than one sentence in the manual. We are not planning to support Lynx either.  (Extra points if you get the point without looking what Lynx is in this context. )

[amyk]

If we count the latest browser versions, only Android is not supported. Big deal, install Opera. In other words, 99.999% of devices that has screen big enough for this application can also use it. This is not an issue here, other than one sentence in the manual. We are not planning to support Lynx either.  (Extra points if you get the point without looking what Lynx is in this context. )

Unless you know the majority of your targeted userbase is going to have a browser supporting websockets, you may be excluding quite a large potential userbase. It seems polling via long-lived connection will work just as well for your application, and you have the benefit of being compatible with basically any GUI browser with JS that someone might be using.

There's also this... http://socket.io/

[JuKu]

There's also this... http://socket.io/

That looks cool. Thank you for the link.

[MacAttak]

If we count the latest browser versions, only Android is not supported...

That was my point. You cannot assume that a user will have the latest browser version - especially when talking about Internet Explorer which in this case nobody on Windows 7 / Vista / XP will be running the latest (IE10 is only available on Windows 8 ). So even when you assume that all of your users have the latest version of their preferred browser, you can still only hope to reach 35% of them.

If you can, I would go with socket.io as amyk mentioned. That library will use websockets if running on a compatible browser, but it will fallback to other communication options if there is no websockets support. It will even drop all the way back to simple polling if it needs to (which in most cases is the most appropriate choice anyways since http is designed to be stateless without long-term connection lifetime).

[David_AVD]

That was my point. You cannot assume that a user will have the latest browser version - especially when talking about Internet Explorer which in this case nobody on Windows 7 / Vista / XP will be running the latest (IE10 is only available on Windows 8 ).

Huh?  I just checked and my Windows 7 machines have IE10.   

[MacAttak]

From the IE system requirements page: http://windows.microsoft.com/en-us/internet-explorer/ie-system-requirements#ie=ie-10




I've been on Windows 8 x64 since 2011, so I can only go by what that page says 

[David_AVD]

From the IE system requirements page: http://windows.microsoft.com/en-us/internet-explorer/ie-system-requirements#ie=ie-10

How odd.  This IE10 page from Microsoft mentions Windows 7 specifically.  Maybe a left hand., right hand situation.   

You can download Internet Explorer 10 in the language that matches your version of Windows or choose the English version, which works with all versions of Windows 7.

[lapm]

I would say that unless you have need to real time data displays for some reason, go for simple solutions first. I once went even as old protocol as telnet since dint need fast speed and it was enough to have text only display to configure the machine.

Standard html is good too since it works on any browser out there. So client can use what ever they have now without need to learn something new.

From simple solutions is easy to expand later when you see better how things works.