My thoughts for a GUI 1.0 | looking for a frontend developer :)

Development UX
1

hi there! as I said, I made some thoughts about a new interface. These are my results:

clean Desktop with

  • Device-identifikation by color (for unconscious recognition of devices)
  • chart for up & download-speed
  • chart for CPU & RAM usage
  • future feature?: pause syncing >> delete!

LARGE @ 1920x1080 Dashboard (folderview) (default view)

syncthing_desk.jpg1920Ă—1080 308 KB

Dashboard with popups

syncthing_desk_with_popups.jpg1920Ă—1080 329 KB

Device /Syncthing-Settings (own device)

syncthing_settings.jpg1920Ă—1080 380 KB

Device-Settings (node)

syncthing_dev_edit.jpg1920Ă—1080 312 KB

Folder-Settings

syncthing_foldersettings.jpg1920Ă—1080 315 KB

filesync details

syncthing_filesyncdetails.jpg1920Ă—1080 326 KB

add folder modal cxl (see popup)

add device modal cxl (see popup)

(restart) modal cxl (see popup)

Opened Device and Folderdetails (accordion) cancelled tnx2 @calmh

MEDIUM @ 1024x768 Dashboard (folderview) (default view)

m_syncthing_desk.jpg799Ă—549 130 KB

Device /Syncthing-Settings (own device)

m_syncthing_settings.jpg1920Ă—1080 365 KB

Device-Settings (node)

m_syncthing_dev_edit.jpg1920Ă—1080 298 KB

Folder-Settings

m_syncthing_foldersettings.jpg1920Ă—1080 298 KB

filesync details

m_syncthing_filesyncdetails.jpg1920Ă—1080 314 KB

(restart) modal cxl (see popup)

add folder modal cxl (see popup)

add device modal cxl (see popup)

SMALL @ 540x960 Dashboard (folderview) (default view)

s_syncthing_desk.jpg481Ă—893 170 KB

Device /Syncthing-Settings (own device)

s_syncthing_settings.jpg1920Ă—1080 324 KB

Device-Settings (node)

s_syncthing_dev_edit.jpg1920Ă—1080 252 KB

Folder-Settings

s_syncthing_foldersettings.jpg1920Ă—1080 253 KB

filesync details

s_syncthing_filesyncdetails.jpg1920Ă—1080 274 KB

(restart) modal cxl (see popup)

add folder modal cxl (see popup)

add device modal cxl (see popup)

looking forward to your feedback :yum:

9 Likes
2

Looks nice.

1 Like
3

…bit too colorful in my opinion. I love using boxed, clean and flat designs - but couldn’t (yet) transpose it to syncthing :relaxed:

4

btw: what about some pause feature to pause syncing?

5
1 Like
6

Looks nice, to me, defintely better than the current.

Maybe reusing the node specific icons from the current ui in the “Share with” column and device box would be better.

1 Like
7

thanks! I know from work that recognising thinks works much better with colors than with “forms”. By using colors we could color the corner of the navbar as the devices color is chosen. Honestly I dont like the color-boxes in the “shared with” column too. :stuck_out_tongue_closed_eyes:

8

A few more cents :wink:

  • Rename the column “local/global” to “State” and use the small font with the existing local/global logos on two lines. Also do this for “Size” to have local & global info here too.
  • “Foldername” is not such a nice column name.
  • What is the meaning of the red pause button? If red means the folder is paused maybe it should display a play sign instead of pause.
  • Last, the memory gauge might be better off with actual value rather than percentage.
1 Like
9

Just to make sure that previous work isn’t overlooked:

10

cross post from /custom-gui-mockups-and-programming/

Is there anybody who would develop this GUI (with me)? I could do any needed graphical-work - but developing :unamused: not.

11

the red pause button has two features:

  • it indicates the process of syncing (red 0-33%, orange 34-66%, green 67-99,99%)
  • it’s the button to pause and resume syncing so this one button shows the sync-process (running and paused) and allows you to pause and to resume :relaxed:
12

Personally I would find such dual-meaning confusing :smile:

1 Like
13

already changed it :slight_smile:

14

Are you working and updating this design: https://projects.invisionapp.com/share/AB2A6DYZN#/screens out of this issue?

15

nope… it could be a alternative UI or in the end some idea. I think the mockups of Brennan are really nice but imho too flat or plain. (dont know the right words)

and there are some points I would not do like in these mockups - important features are missing.

16

I would be interested to develop this. Just figured out how to edit the GUI.

My goal is to use this at work where we do projects in teams. Lots of folders/devices. The plan is to first hide useless information and make better use of screen estate. Expect something more like BTS2.

1 Like
17

what is/are the useless information for you?

18

Let me tell you what I think is useful:

  • folder
    • size + itemcount + peers for synced folders
    • progress for syncing folders
    • error/status for other
  • device
    • ip (+ maybe last statechange) for connected devices
    • last seen for disconnected devices
    • error/status for other
  • appearance:
    • mostly the basic options
    • option to disable help text
  • settings
  • advanced

Moved some code around to get a more “firefox/chrome settings”-like screen

st2.PNG1128Ă—565 77.5 KB

19

[quote=“thgh, post:18, topic:3002”]foldersize[/quote] watch the mockups

[quote=“thgh, post:18, topic:3002”]itemcount[/quote] watch the mockups

[quote=“thgh, post:18, topic:3002”]peers for synced folders[/quote] watch the mockups

[quote=“thgh, post:18, topic:3002”]ip (+ maybe last statechange) for connected deviceslast seen for disconnected deviceserror/status for other[/quote] ok

[quote=“thgh, post:18, topic:3002”]last seen for disconnected devices[/quote] ok

[quote=“thgh, post:18, topic:3002”]error/status for other[/quote] whats other in this context?

[quote=“thgh, post:18, topic:3002”]mostly the basic options[/quote] ok - not yet layouted

[quote=“thgh, post:18, topic:3002”]option to disable help text[/quote] which help text? you mean the description text below the option-fields riight?

20

I personally would like to be able to group the devices and folders. I’m starting to get a lot of both and it would be nice if I could organize them.