Ha-bridge: New UI

[gorstj]

Just upgraded to latest 4.1.4 from a old 3.5 version

The new UI for editing entries is odd in that it seems to truncate the entries e.g. 'target' into a dropdown box with single letters on each line.

Is this intentional? Or just because I am running chrome? Internet explorer shows a different view but is completely blank.

[gorstj]

view with Internet Explorer 11 (this was editing a device rather tan creating a new device)

[bwssytems]

The first post is correct in the editor. The way the framework works is it tries to adjust the fields dynamically to the width. You can grab the lower left corners of the fields and expand them.

For the second post, there is a character in the field that the ui is having an issue with as it tries to convert the data to a json message.

[digiltd]

I was also wondering the same thing as I am finding it very awkward to work with.

You might be interested to know I have been working on some frontend improvements, notably making the tables responsive and reducing the use of tables to make things a little more flexible.

It is still very much a work in progress, with a couple of weeks between these two examples. Using a different method for each.

[bwssytems]

@digiltd Those are some nice designs....

[Frenchgrey11]

Hi,
I must say that UI looks much cleaner and nicer.
What would be really handy for new users is good guide (video? ) what can be put in to the fields.
I was using V 3.5.1 and I decided to install new one, but get in to trouble with logitech harmony.
Some of the devices stopped to work, but after recreating they are OK now
I have about 30 devices , 2 Harmony bridges.
In V3.5.1 with no problem I could successfully set the TARGET IP's to each Logitech bridge hiding unneeded devices.
How hard I'm trying to make it works, both of my remote see all my devices.
All command work with no problem on all devices
I'm using this metod to target as shown below

inside it looks like that:

Does bridge need to be unpaired and paired again with Logitech account on both ends - Logitech and HABridge?
I'm sure I've been doing something wrong. Could you please guide me how to make it .
Thanks

[bwssytems]

@Frenchgrey11 This has nothing to do with this post. Please post a new issue on why it is not working

[Frenchgrey11]

I did already and that was issue nr 457 with not solved problem.

[digiltd]

@bwssytems I have been working on the UI but I have to ask something for the sake of my sanity.

So far my workflow consists of me making a change in the src/main/resources/public to a frontend file, then having to run mvn package and then java -jar ha-bridge-4.2.1.jar in order to see the result.

Usually I would be using gulp and browsersync to automate everything so having to package the jar each time is not much fun.

I have tried making a fake folder of files with static html devices and running that in little server. That worked fine, though then I went to try it on the build there was loads that didn't work. So I need ideally to find a way to be running the jar using like data, but having access to the the front end public folder so I can drag that into Sublime and get things moving.

Is there something very simple I am missing, maybe a way to not Jar the file up, just run it from the ide? Or perhaps a way to jar up the java stuff (I am not touching that) but have it pull in the front end from a different location?

I have maven installed and use it to build the occasional thing but am clueless to the rest of it. I also have eclipse if that helps. I am fine with Node, Python, PHP, HTML, Sass and all that jazz but can never get my head around Java.

[bwssytems]

@digiltd I use Eclipse to develop it, os I just run it within the IDE. But I do have to stop the process before I update anything in the resources folder as it won't take other wise, but I don't have to repackage. Unfortunately, it is the way spark java accesses that folder.

[digiltd]

I still can't work out how to run it from the IDE, I'm seeing Error: Could not find or load main class src.main.java.com.bwssystems.HABridge.HABridge.

In the meantime....

You know how it is, you go in to change one thing and find yourself spotting other bits that could do with some additional thinking. It is certainly not a criticism or a complaint as your time is better spent working your magic on the actual software than the UI 😇 . I happy to contribute but I don't want to go too far without some feedback because design is a conversation (or at least it should be)

scrolling

The strange horizontal scrolling where it all started, it is very awkward when trying to add or edit a custom device. Especially awkward when the Target item and HTTP body fields are super small 😉

WIth added frustration when my browser would jump back to the previous page when trying to scroll left as my trackpad thought I was trying to do a swipe gesture 😒

The gifs i posted in Feb are using responsive tables as a potential solution. I think they work well and do the job, when stacked they are much easier to use. So what would be the point of making them rows again when the rows are still hard to use. Maybe the stacked version should be the main version.

I was also looking at ways of sorting the devices which made me think of Isotope which I have used many times before. I had a play, and this is where I am now.

Just in case anyone looking at it is not familiar with the design "process". It should be seen at as rough sketch, something used to quickly prototype ideas. Not "this is what I want it to look like".

FIlter by type

Responsive layout

Grid to rows

Sort rows by type

That could also be responsive

(though a bit wonky at the moment)

Live demo

You can have play with it in a browser here:

http://s.codepen.io/digisam/debug/8165ee1e2cc935d38fc86441a5c522f7

There is another version here that includes filterby and well as sortby

http://s.codepen.io/digisam/debug/RpQgRX

---

But as I mentioned earlier, there only raised more questions, like...

Do we need to have a column that says "Active: False" or can we change the appearance of the deactivated cards to communicate the same thing?

The same might be true for "no state: false", but I am not sure what it actually means and there is a bit of double negative overload when combined with: __No State (Do not update state for device)__ 😕

I did have the test buttons hidden from view and you had to click a button for them to slide up into the card. Which whilst pretty, it was annoying having to deal with an extra click and the idea is to make things easier not to change things for the sake of changing them 😄

[bwssytems]

@digiltd THose are very nice designs. I assume you are UI/UX guy from the way you look at these layouts. So, my only concern is getting into a library that may be "flash in the pan". Also, the "keep it simple and stupid" principle needs to be considered as the UI is just a way to get the system configured. After that, it is not the focal point. We do need to fix the editing page is that is everyone's issue. I am not a bug UI/UX person and my background is in server side and communications, as you can tell.

As far as the Eclispe IDE, make sure that the project is setup with the execution environment for JRE 1.8 and that it us tagged a java project. The "Run As"-> "Java Application" from the right click should then pull up the selection list if it is done at the project list, or run the class if you selected the HABridge class. Otherwise, there is some configuration that is missing for your project in the IDE.

[digiltd]

You assume correct 🏆

So, my only concern is getting into a library that may be "flash in the pan"

I agree, and Isotope is definitely not a flavour of the week. It is the original "Filter & sort magical layout" package and has been for the past 7 years. Lightweight and actively maintained.

DId you try the codepen link? I have added a second link that demonstrates both the filter and sort functions of Isotope.

I also agree with you about KISS, but I disagree that: _"the UI is just a way to get the system configured"_ But I'm not going to try to convince you otherwise 😁

For me a UI is very important, whilst visual things like colour and type do play a part, it is only a tiny part as design should always be about solving problems rather than "making it pretty" :man_artist:

But I won't waffle on. There are reasons behind the decisions made and now when looking for a device (the codepens use my actual devices) I can do so with one or two clicks/keys.

Do try the codepen links and feedback is welcome from anyone who wants to give it. Imaginations will have to used a little bit when playing and try to not look too closely at the details.

It is different which some might be jarring to some, and that is why I included a "row" option.

Note that all the filtering, sorting and dynamic layout is handled by one 35kb javascript file .

[bwssytems]

And of course, my comments reflect my UI capabilities...lol. I was just putting my view out there. The UI design you have is very cool and would make it 100 times better than I already have. I did look at the codepen and played with it. So, do you want to integrate these into the ha-bridge? I'll give you a branch to fork form.

[digiltd]

Cool, glad you approve, I think there a little way to go yet before integrating. Baby steps. The way I have been fiddling so far is with what I thought was a regular fork and snapping off a dev branch that I use as if it was my own repo. Where possible I try to rebase any new changes that come through. Is that any different from what you're suggesting?

I think it would be easier and less intrusive to you if I manage my own fork and then when I have something for you to try in a build you can clone it or just take the resources folder. Then pr back to your upstream when happy. Sound ok?

[bwssytems]

I am suggesting something very similar. I would request you do the work on a fork of the branch (UIUpdates) that I created. It still is in your repo, but when you do a pull request it goes to this branch instead of master.

[digiltd]

Sure, happy to follow your lead

[bwssytems]

@digiltd So, it doesn't matter which branch you work on in your fork. It's just the pull request should go to the UIUpdate branch on my end. Go ahead and have fun...

[digiltd]

cool, hopefully you are not waiting for anything from me just yet. But just to update you, I haven't faded away I am still working on this but am in the middle of moving house at the moment so my time is limited :)

[bwssytems]

This isn't getting any traction so I will let this go.