It is me or Openflow WEB UI is broken?

OpenFlow
1

Hi @Allan_Zimmermann
I did a quick search on the forum about openflow design but I haven’t found anything like what I’m experiencing.

I’m experiencing a lot of UI unconsistencies in Openflow.
I have done some website design/css coding for work and I have to say that I’m having headaches.

weird_ui_01
weird_ui_012540×1121 146 KB

Here, you can see some of those unconsistencies.
Spacing here but not there. Strange vertical align here and there etc…
If this something that can be improved with a github PR then I might give it a try!

Also, every time I reload a page, I get a page without css for a milisecond.

weird_ui_02
weird_ui_021223×540 21.8 KB

Is it me only?
Checking the browser console logs or looking a the network tab doesn’t highlight anything.
Clearing cache didn’t help.

Thank you

2

You caught me. I give up, and admit everything.

I’m not a web designer.

I’m an farmer, turned self taught system administrator, turned self taught developer, with a love for building scalable solutions, but ui/ux has never been anything i find interesting. And that shows.
Yes, PR’s are welcome ( if they are small an manageable. )
On that specific page, I have long wanted to update it, to place the buttons at the top, so they don’t move when you are starting/stopping the instance.

The partly rendered page, is “normal”. The browser needs to have downloaded enough JavaScript in order to start rendering. I often see this when i work on installations located far away ( I’m in Denmark, so working on installation in Africa, US, Australia, etc I see this too. but when i connect to installations located in Europa, i never see that )
So my guess is, you are not located in Europa ?

1 Like
3

Well you’re doing a very good job with OpenRPA/OpenFlow!

I think I will be using OpenFlow at home for personal project so then I will try to see if I could get my hands dirty by fixing those minor UI details.

Yes, I’m in Japan right now but OpenFlow run locally so the loading shouldn’t be an issue but then why?

Maybe by moving css & js code into <head></head> at the top of the index file will help…

<script src="bundle.js"></script>
<script src="angular-localization.min.js"></script>
<link rel="stylesheet" href="fonts/all.min.css">
<link rel="stylesheet" href="fonts/formio.full.min.css">
<link rel="stylesheet" href="bundle.css">
<script>
angular.lowercase = text => (text == undefined || text == null ? "" : text.toLowerCase());
</script>
4

I have no idea. angularjs has a tag you can add, that tells it to hide stuff before fully loaded, but that does not really help, since the issue here is, that it takes a few milliseconds downloading the JavaScript bundle.
I have specifically disable all caching. That would ofc fix the problem for all subsequent re-loads of the page, but there are soooo many other issues when using caching.
for many many monthd I have tried working a little bit on migrating the web ui from angularjs ( the first an oldest version of angular ) to vue3
https://web.app.openiap.io/

This does not seem to have the same issue, but it’s a massive task migrating it all, and since i don’t have access to someone who can help with the UI i felt a little bit pointless migrating from ugly → to ugly ( but lifting the tech stack of the webapp into 2023 would be nice )

5

I see, so the current web ui is using the old old old old angularjs.
Before migrating from angularjs, I think just fixing few css/html part from here and there should do a trick for now.
I’m not an expert UI/UX web designer but I might give it a try in a near future.
(Can’t right now, I have a young child, don’t have free time…)

2 Likes
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.