Consider a HTML/CSS style GUI for manager and Reporter

[damies13]

Is your feature request related to a problem? Please describe. Using HTML should make constructing the GUI easier to control and CSS should enable a prettier UI as well as making dark/light mode switching easier

Describe the solution you'd like Consider a HTML/CSS style GUI for manager and Reporter

Additional context The original idea I've been pondering for quite a while is to build an "electron" style app, but never knew how to do this with python apps, until a few days ago I found python-eel

I believe the pro's should outweigh the con's, here are what I think they are:

Pro's:

• Easier to implement dark/light mode (Issue #102)
• Easier to implement a pretty UI
• Easier for others for contributor's to maintain the GUI (HTML is more well known than TkInter)
• Ability to make the GUI available to multiple desktops, so another performance tester can take over for long running tests
• Ability to make a read only "watching" GUI for project members to watch the test while running
• Potential for more consistent GUI across all platforms
• GUI will be easier to test (can use SeleniumLibrary or Browser Library to test GUI)

Con's:

• GUI might be styled in line with the OS
• Need to re-write the entire GUI (need to this mostly for Issue #86 anyway)

[damies13]

I've created a mock up of just the about screen to give an idea what the UI could look like if this change

Light Mode	Dark Mode

Firefox (remote access)

[damies13]

These are the files from the mock up for future reference eel-test.zip

[damies13]

@PyHar, I think enough time has passed, and it's only been positive feedback so lets proceed with this idea.

There is an issue remaining to figure out, eel creates a http server (on port 8000 by default, though it's configurable) and rfswarm manager already has a http server on port 8138 by default, so no conflict, though I would rather have only 1 http server port if possible, so the first issue to figure out will be if we can tell eel to use the existing http server in rfswarm or get eel's http server to provide rfswarm's existing rest api (even if that means re-writhing the api code?

Do you want to start investigating what our options will be for this issue?

[damies13]

Today was out but had some time for research, I think I found the answer how to do the existing rest api in eel:

• under App options is the section app
• this let me to look at the custom_app.py example
• which eventually led me to HTTP Request Methods

So it seems we'll need to create a POST bottle route for each rest endpoint and re-write the rest API this way.

[Krata4]

Hello, I think the most effective way is to create support for Django Framework which is pure Python based. Do we have API for retrieving data for reporting for example?

[damies13]

@Krata4 I don't know enough about Django to know if this is something that would be a good idea or not, I will need to understand what the benefits of Django are but also what the requirements are to see if they are a good fit for rfswarm.

To put this in perspective the manager and reporter are currently stand alone desktop applications in tkinter, the plan with this feature request was to keep them as stand alone desktop applications, but using a html + css based gui similar to an electron app, rather than a as a client server web app.

So this is why I'm not sure if Django will be a good fit, there will not be any Apache web server or anything like that available, and all the Django stuff I've seen was running in an Apache web server environment, not sure if that's a requirement for Django or not?

As for the API question, yes there is currently an API, it follows the REST model, but currently it's only used for communication between the manager and agent, it will need to be expanded for this feature request.

[Krata4]

Hi @damies13 , Django is framework for writing GUI for backend app. So, when we would develop library which is providing feature for start of manager and providing API for retriving data from manager and reporting, then you can wirte any GUI web app, based on customer needs. I think to prepare only one GUI is not right way, beter option is, to have library as API and all consumers of your tool can create theirown GUI based on thier requirements. When we would create library it can be used with Python Flask also and you do not need any apatche server for run it on local machine.

Obviously, we can create template.html for Django or Flask as standard GUI. But Importand is to have API to your manager and reporting APP for start and finishing app and retriving the data.

One more information for you, Django can be easily used with ReactJS framework, so you can create modern and nice web GUI :-).

[damies13]

@Krata4 I created Issue #317 for further discussion about Django, lets move this discussion there, i want to leave this issue more for as a base issue for the new UI and have separate issues for the each of the dependencies.

[damies13]

With issue #319 now merged into the v2.0.0 branch the basic framework for the V2 GUI using eel is now in place, but there is still lots to do:

• manager
  • write api functions for all the api calls (the manager folder now has RFSwarmV2API.py file and class to hold these functions and get you started)
  • write the V2GUI components and get the V2GUI working (RFSwarmGUIhtml.py file and class have been created as a starting point as well as the V2UI folder with the initial basic html and css above)
• Reporter
  • Reporter GUI base framework needs to be built
  • Reporter API base framework needs to be built
  • determine what API calls are needed and write api functions for all the api calls
  • write the V2GUI components and get the V2GUI working