Graphical user interface

[ivandokov]

Creating a cross platform GUI will be the best thing that can happen for this software and I think this could be the major feature for v2 milestone.

Since I have zero experience with coding GUIs for desktop apps and especially with Pyton any help will be appreciated.

I made a research some time ago about which library to use in order to accomplish full cross platform GUI solution but haven't found any easy to use solution. Any suggestions are welcome!

[pauloup]

Would you rather go for a native design on each platform or a unique design for all like Spotify? In the past (veeery far) I've made some mockups for a LibreOffice ui proposal, so I guess could help with the design tasks.

[apat183]

I was going to take phockup and put it in a electron app to provide a GUI for personal use, I'll share here when I get time to try it out. That way it would be universal.

[ivandokov]

I don't like Electron apps because they are heavy but any GUI is better than no GUI.

[apat183]

Ok, i was looking at appjar as well since it's for python, it's just that it's not that pretty. But maybe that's better since it's all in python then. I'll have look at report back.

[ivandokov]

I'm not completely against Electron since I am web developer and it will be much easier for me to code the desired interface, but if it can be accomplished with something lighter it will be better.

[pauloup]

I was reading about CEF Python (Chromium Embedded Framework for Python) which seems to be an alternative to electron, though I got no experience with anything of it.

It's nice to know you're a web developer. A couple days ago I started playing with a proposal of UI for phockup: https://pauloup.github.io/phockup-gui.html. Please, active input and output and interact with the options to preview a phockup call at the bottom. Maybe you can take some ideas from it, since my code may be very amateur to be of any use.

[apat183]

So I created a GUI using electronjs just because it's the fastest for me to create concept.

Check this video of it running. It's working with no issues and has all options. I took your design but just changed a little to make it consistent.

Couple of issues/points:

• its electron/javascript and not python, and as you saying electron is heavy.
• Since it's electron and it just uses your code as a lib, not sure how I would fork or do a pull request, alternative is creating a new repository and using your repo as a sub-module etc or refer to this project. To handle this I've actually made it in the settings that you can refer to different phockup code directory so it doesn't need to be bundled. But that also means you could run custom versions of your code (e.g. I changed some code for cleaner results output as you will see in video). But it would be best to somehow include a GUI to take this project to next level.
• Currently can't create the same results look as the mockup (unless I parse text print results), since current version phockup python code doesn't group or handle results other then printing in line, would be good to store in array or object.

Features:

• cross platform
• responsive design
• can have different code sets of phockup and run based on use case
• stores all settings so quick to run again
• could just use it to generate terminal command and then copy and paste command.

Things that still need to be done:

• Cleanup code and testing
• Better results display
• get your guys feedback on if it should be a separate repo or somehow bundle with phockup?

https://www.youtube.com/watch?v=rbR6Kzt3wys&feature=youtu.be

[ivandokov]

I prefer the GUI to be part of the main software. My initial plan for the GUI was to make the default way to use the software and keep the cli as fallback just in case you do not want to use the GUI but all the options should be available at both interfaces.

Yesterday I thought about using WebSockets to communicate with the Electron based GUI. For example if we add a flag --gui the process will launch a WebSocket server and the JavaScript can connect to it. There we can send JSON data and it will be super easy for the GUI to display whatever info we send to it. Thoughts?

The video is unavailable on YouTube. Maybe it is private? If so you can change its visibility to unlisted.

[apat183]

Fixed video :) try now.

When you say websocket server do you mean like this example?

https://github.com/fyears/electron-python-example

The current solution is basically like that but is using python shell to communicate but I could easily update to update to use websocket. But again, example linked spawns python server from electron. So as you saying to provide option to launch GUI with flag --gui, I'm not sure how that would work? If you could explain I could try looking into it.

[ivandokov]

The interface looks basic but it can do the job for initial version. Maybe we can polish it for v2.0. I really like the look of Etcher.

Using the Python shell will limit us of how we send over the output to the GUI as we have to parse the stdout in JavaScript and this is tedious. If we send JSON data through websockets alongside the normal stdout the GUI can use this data directly and we can ignore the stdout for the GUI.
The example that you show is actually doing what I suggested. It only makes a call to the Python backend and the backend spawns the server. Electron only initiates the call to tell Python to start the server. In our case the --gui flag will spawn the websockets server and alongside the regular stdout we will also send JSON data through a socket and the JavaScript will connect to that websocket server and read the data. I hope I explained it well this time. Please let me know if I didn't.

[apat183]

Yeah I've just taken @pauloup design but it's html/css so can make it look like etcher.

Yep I noted the limitations of using Python shell in other comment so definitely better to do the websockets server. The thing I don't understand with the electron/python solution is how it will be distributed? Currently you just download python script and run from terminal. But if you use electron will it be an electron bundle that you download and just run that and no need to run anything in terminal?

I'll share what i've done so far so if someone else wants to pick it up. It should be hard since the example I linked does what we trying. I wont have time at the moment to clean up code and test on other platforms. I'll update with github link once I upload.

[Chipwingg]

That gui in the video is beautiful. I wish it could run on the docker version as a webpage.

[apat183]

That gui in the video is beautiful. I wish it could run on the docker version as a webpage.

The code is here, I haven't touched it for a while but you could update and probably easy to put in a docker image. https://github.com/apat183/phockup-ui