Shiny Web UIs #2266
Replies: 67 comments
-
Posted at 2015-05-07 by LawrenceGrif Hum this is a subject ongoing with a few of us in the Node-Red community. This is quite amazing: UI Google Polymer from Arduino http://dashboard.sidlee.com/ But there some start-ups looking to make this a whole lot easier it's early days. For now I'm putting my money on Blynk they will have a light wight device SDK so should be easy to integrate too. They have a open list of what devices people want I will add the Espruino |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-07 by @gfwilliams Ahh, I saw the sidlee one before. It'd be cool if you could prod Blynk about Espruino though - I reckon it should be pretty easy to knock some demos together for it. Personally I think a lot of the point of having a nice responsive UI is that you can actually get away with a laggy communication method under the hood while still being responsive. If you're on the other side of the world on a GPRS link WebSockets still aren't going to give you a fast update, so you have to cope for worst case anyway. Who cares if your home thermostat takes 1 second to update temperature if when you turn the dial on your phone it looks instant. Sure there are times when you need the instant feedback, but IMO they'll be relatively rare and there's no need to over-engineer when you don't need it. I just implemented a copy of the thermostat from the original post in SVG/JS/HTML - so no frameworks and only a few lines of code: https://jsfiddle.net/409Ldtrk/1/ |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-07 by @gfwilliams If anyone's got any suggestions for the jsfiddle I'd be interested. Still seems overly complicated...Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-07 by @gfwilliams Just added a tutorial for this: http://www.espruino.com/Interactive+Web+UI Not much to it, but it shows you can create something modern-looking without having to rely on any libraries loaded from third-part servers. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-07 by Spocki NetIO perhaps? http://netio.davideickhoff.de/en/ |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-08 by d0773d @gfwilliams Is your focus point for these "widgets" to load from an espruino? I think it would be a neat idea to create a widget suite : radial guage, temp guage, tank guage and ect.... small enough so an Espruino can serve the website. Although I'm not too sure if one espruino will be powerful enough run sensor code and widget code. So since the picos are small enough, the user can use two picos. Having one pico dedicated to serving the web page and the other Pico handle the sensor data. I'm all for the idea to test what the Espruino's are capable of. Also, I like the simplistic approach of not having to sign up for an account on the other websites that offer IoT services. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-08 by @gfwilliams The idea is to have some examples that show Espruino serving up a nice-looking UI - not to provide a toolkit as such, and not using someone else's service. The SVG approach seems to work really well, and the SVG and JS can be compressed a lot so the tutorial above is serving up a page that's under 3k. I think a widget suite as such is probably a bit counterproductive (for an actual polished, finished product you probably want something heavily customised anyway). It'd be interesting to provide some space-optimised JS code that automatically searched for SVG elements with certain classes (scrollbar,guage,etc) and made them interactive though. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-08 by LawrenceGrif @gfwilliams Blynk have just released an early version of their HW client (library) https://github.com/blynkkk/blynk-library/blob/master/docs/Implementing.md |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-08 by @gfwilliams Argh, no offense to the Blynk guys, but looking at that page just makes me really sad. All it's doing is using the microcontroller as a dumb endpoint, and if you were doing that why not use the firmata protocol that's got a massive following already and loads of platform support. It's not solving the UI problem at all - it's just providing yet another way to turn lights on and off remotely... And it doesn't seem like it uses MQTT either, or even has any attempt at security. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-08 by LawrenceGrif Yep, looks like MQTT is for their server. But my hope is they are just one of the early guys in this space and someone will solve this in the right way for constrained devices. On the security front what, if ever, is the likely hood of having TLS/SSL support on espruino? |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-08 by d0773d @gfwilliams The term suite is probably a poor choice of a word on my part. I was referring possibly broadening the example/tutorial page with other Interactive UI examples. Such as what people might want to use to show values of the popular sensors such as show the room temp on a Thermometer UI. By no means did I mean create a full fledged UI toolkit... |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-08 by @gfwilliams @LawrenceGrif TLS/SSL is still a strong possibility (esp on the Pico), although most solutions seem to have quite a big RAM/ROM overhead so may require a special build. I've been talking to WIZnet who say they have some TLS/SSL code that works well, and I might see if I can drag that into Espruino. Personally I'm still hoping that they'll implement TLS/SSL in the ESP8266 via AT commands. IMO that'd be really useful for a lot of people, not just Espruino but pretty much any MCU. @d0773d yes, I think that'd be a good plan... Example JS code for:
Having an SVG file full of example components that could be copy/pasted would be really interesting. It'd basically turn Inkscape into a really flexible UI designer. The stuff you can do with even just SVG and CSS animations is pretty awesome The point of the original post was to try and get someone who didn't suck as much at graphic design as I do to come up with a UI that could be used with Espruino. I guess if I come up with some basic designs for guages in SVG (and the code to make them usable) then hopefully someone will have a fiddle and make them look half decent :) |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-08 by d0773d @gfwilliams sounds like a fantastic plan! In regards to TLS/SSL, that is also an awesome idea to incorporate into the pico. A few days ago I stumbled across the stm32-cryp-lib found at: http://www.st.com/web/en/catalog/tools/PF259409 However, I'm not sure if that library supports TLS/SSL. I've been wanting to try and custom compile my own Espruino firmware to use AES encryption, but creating a custom linux environment to compile the Espruino firmware is out of my scope of know how. Also even if I successfully created the environment I still wouldn't be able to incorporate the lib because my programming know how is also limited. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-08 by @gfwilliams Thanks for the link - I didn't know that existed. Looks quite interesting, especially as it uses the hardware where available. There's actually SHA256 support already, so you can at the very least sign messages with a secret key in order to check they're correct. Back to the UI... I just added this: https://github.com/gfwilliams/SVGUI Very basic and dodgy at the moment, but you get the idea. The code will need to be a bit more complex to handle things like endstops and different kinds of widget, but hopefully we could get some interesting functionality into quite a small footprint. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-08 by @gfwilliams ... just to add that it doesn't have to be a bunch of stuff that someone else has made. A good graphic designer could come up with a really professional looking, custom UI using something like Inkscape - and instead of being an app it's a webpage that takes up <10kb. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-27 by Blynk Our protocol supports main 6 commands:
"Virtual Pins" were designed specifically for Blynk to allow sending any data (e.g String, ints) to the app and back. This is one of the reasons why we didn't use Firmata. There are two layers. 1 responsible for connection , 2nd for commands processing. We build Blynk hardware agnostic and now it supports almost every popular maker's hardware and shields on the market. You can see full list here - and it's constantly updating. BTW, We have lots of requests from Espruino owners to add it to Blynk. We would love to see Espruino there, we just have no time for it now. May be someone from that this amazing community will initiate it and we will help. There were a few comments on security. Well, it's hard to implement software security on Arduino. You can achieve it by connecting to the hub, or adding hardware security. More powerful devices will of course have more options. All the other connections (Apps <-> Server) are using mutual SSL. If you connect over USB- we also provide security. Since our server is open source - you can download it and install locally, even on the Raspberry Pi - this will give you full control of your network of devices. Regarding flexibility:
We don't plan to have a web interface, because working as a UX designer for last decade in web, mobile, automotive and IoT , I definitely feel a strong trend towards mobile. And this is where we see Blynk. We hope that Blynk will become your Magic Box in one Box :). As we add more and more widgets you might not need to design your own ones. However, I would really love to hear about your needs. What are those bits of interface you would like to use? |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-27 by @allObjects Mobile and Web are not mutually exclusive... The revolution to turn virtually everything - offline applications and fat clients - into Web in only a few years in the outgoing millenium is happening as well. Responsive with RESS is growing to the point that going native is affordable only for very specifc applications applications. All other things use the universal browser platform to show itself. Agreed, it is way easier to get something installed on a device as 20+ years ago (then it was labptop/desktop)... but a similar thing can be said about the browsers as the universal, compatible platform for applications on ANY device - small smart phone to large smart tv: there was a time the term crossbrowser compatibility was THE elephant, but this elephant is about gone. I could though see a combination of native app and server who hosts the definitions/configurations. It is still a pain for the native app provider to cover all the devices OS: iOS, Android, Windows, but the applications running within an elevated, dedicated platform, such as Blynk, share the common source from a server. Since connectivity has to be there anyway, I see no issue. To make things perform, the elevated, dedicated platform can implement a caching mechanism that supports reading the app only on update. From such a platform I would also expect to have a application selection mechanism: not all is in one (big scrollable) page, but organized in seperate distinctive, user defined view, easy to navigate through. In the end, the system is hybrid: the runtime natively implemented, and the admin Web implemented - and of course seamlessly (for the admin part, the embedded browser is used to render what is comming from the admin Web server as Web pages). |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-28 by Blynk While I agree with some of your points, mainly that "it would be great if everything worked on web", but I don't think it will happen this way. It's more of a dream thing than reality. Let me share my thoughts on it.
Again, these are my thoughts, and I bet on mobile :) definitely not web. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-28 by @gfwilliams
Thanks - that's what I'd hoped for. I didn't see that in the protocol docs on GitHub, but maybe I wasn't looking hard enough. Did you consider pushing your existing protocol over MQTT? I ask because it would make it easy to have one or more local 'hubs', that then pushed data securely to your servers. I get your points about mobile/web. Bloated, app-like websites that disable scaling frustrate me every day. I still don't believe that websites have to be like that. Still it's a shame about the lack of Web-based control for me. While more people are using mobile, if I'm at the PC (like now) it'd be nice to be able to just bring up a website to control things, rather than pulling out my phone. Out of interest, how do you implement all your widgets multi-platform? Do you reimplement everything on each platform, or do you use HTML/SVG and WebViews? |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-28 by Blynk Yes, our documentation should be better and we are working on that. It's all about resources and time :) However it's explained here: https://github.com/blynkkk/blynk-library/blob/master/docs/Implementing.md#virtual-pin-operations This document is for those who want to participate in creating support for other hardware. We also cover it in Blynk Basics doc. It will be soon on the website. MQTT support is almost ready, but right now we are focused on user's feedback. I agree that often it's more convenient to use desktop. Since we have all the assets and technology in place - we might build a web interface at some point and it would be pretty easy to do. It's just not the priority for us. And yes, we have to recreate widgets for both platforms :( This is pain, but at least design assets are reused. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-28 by @gfwilliams Thanks for the reply... All good to know. It's a shame you have to recreate all the widgets each time though. Come to think of it, are you supporting Windows Phone as well? ;)
Believe me, I know what you mean... |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-28 by @allObjects @Blynk, my point was not mobile or desktop - yes, balance has already tipped towards mobile, but how is 'mobile' defined... My point is native versus Web. Native means: application platform is the device OS and version and applications are device OS and version specifically written and have to be downloaded and installed. Web means: application platform is the universal browser and applications are written only once and run in the browser. 'Download' is transparent - dynamically and on demand, and when device storage gets tight, user has not to chose between which apps to keep and which ones to toss. The comment about Mobile Web sucks on Desktop, is correct when UX design failed and no responsive framework is used. Building a real responsive and RESS - responsive with server side components - framwork and - really real estate oriented - UI versions can be done but turns out expensive and increases development complexity, especially with maximum reuse in mind. For example, each page has a device dependent table of contents / reference list what component and which implementation of this component to include and which ones not to include, and components are different only when real estate matters... said so: widgets with more elements have to be broken down or have to have multipe versions, models' values are populated in increments as user goes from initial/superficial to depth, and controller has to strike a compromise. As imaginable, this get's pretty complex and may not by all what is expected, and becomes also partially meaningless because bandwidth and plans grow (with same user costs). Higher develoment costs - because of elaborate implementations - are justified only when ultimate performance is required. A mobile first UI approach on top of a framework good framework - that is actually/literally responsive and takes care of the hamburger and steakes - delivers good results. A framework with just CSS does not cut it, nor an application UI that uses only CSS with media query to hide and show things according to available real estate. The application UI has to be responsive as well and load only the things that actuall - can be shown right away on the device (first fit, fit above the break). A hiding or reflow to endless (vertical) scrollable pages yield not a pleasant UI. On the other hand, for users swtiching between devices with small and large real estate, UI layout and flow have to stay 'structurally familiar', otherwise the user gets lost. In other words, a lot of fine line walking and compromises are required. Btw, a 12" tablet, is it a mobile or a desk/lap top? And what about all the hybrids with flippable screens? ...with touch, mouse, or both? After all, it is real estate, that makes the decision... because the human eye sight resolution is a given ...and looses out with age :( |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-29 by LawrenceGrif At Google IO this week Polymer web components are now production ready |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-29 by @allObjects Looked into Polymer a while ago... and it is the logical continuation of extensible SGML. Since in the end it is HTML and CSS (and JavaScript) that a browser has to understand, getting the right HTML and CSS (and helping Javascript) in will get you to any place. At the time I had to go production, about 2007 and no HTML5 - the available framework and toolkit supporting such things was dojotoolkit.org. jQuery was already around as well but followed quite a different approach... With dojo - the widgets are dijit widgets - start in the code as plain divs or inputs or... you name it, and have the html extensible property data-dojo-... in them. After loading the page - or with single page applicaitons, afer loading a new 'basic' html piece with 'dojo/dijit ingredients' - a one-time-parse goes through the dom (or dom branch) and 'converts' the dom to what it has to be to show the desired look. ([Nice description of the lifecycle of a/any dijit widget] (http://justinchmura.com/2015/02/28/dojo-widget-lifecycle/). Polymer goes much further and aliminates a lot of internal plumbing (and restrictions, and also the shadow dom), and it pulls the viewmodel and view tighter together to a seamless single thing: Web component. I'm glad it has just been released as version 1.0. On top of this matured infrastructure it should not be that hard to add designer-looks vs. geek-frugalities. For sure, what ever has been done, is not just smoke and mirrors, but solid OO and M*VC implementations... and it obviusly works across browsers too. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-07-27 by vshymanskyy Hi all, just got a prototype of Blynk library. Tested it on Espruino Pico |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-09-14 by LawrenceGrif All I've working with thingstudio and they are currently implementing support for HTTP get/post/put which should mean it will talk to Espruino. They have been doing some great work under the hood. I've just created my first SVG widdgets using their template-ing system. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-09-15 by @allObjects @vshymanskyy, I tried to use it.... but run into some challenges:
@gfwilliams, is there an option to do an upload to - like - null device so no connected Espruino is required to formally verify code? |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-09-15 by @gfwilliams I think the correct usage is:
The link to the node.js module is a bit confusing... But to be honest the code itself is relatively compact, and can be auto-minified (via Web IDE settings) so shouldn't use up too much space. No, you'd have to upload to the Espruino to verify it I'm afraid - to check it more sensibly I'd really need to run an Espruino instance in the web browser :) |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-10-21 by LawrenceGrif thingstud.io 0.3.0 released support for now for HTTP and feed processors so can work with any ip enabled Espruino no need for mqtt http://blog.thingstud.io/ |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-10-21 by @gfwilliams Thanks! Someone also pointed out to me that you can use DroidScript to develop applications for Android - if you want something non-webby that also uses JavaScript. It's got built-in serial/bluetooth-serial support too... |
Beta Was this translation helpful? Give feedback.
-
Posted at 2015-05-07 by @gfwilliams
Some of you may have seen this video, where there's a nice-looking AngularJS UI talking to an Arduino: https://youtu.be/MhVgGE-pgEY?t=14m39s
In that case he's loading a tiny bit of HTML off the Arduino, and then everything else off another computer. Doing that sort of thing with Espruino is trivial, and in fact sometimes you can serve everything off of Espruino's internal memory
However what we're lacking is the nice-looking interactive UI. Are there any web developers here that could do a better job of that? I'm happy to take whatever gets developed and integrate it with Espruino...
(Looks like the video above is done using D3, although it seems to me that you could do the same thing using just SVG and
document.getElementById
like this - just better :) )Beta Was this translation helpful? Give feedback.
All reactions