CL_Eye-Catching_User_Interfaces.pdf

Command line interfaces (CLIs) can be as interactive, exciting, and beautiful as any desktop or web app. Like when building web apps, building an interactive CLI affords the developer many features, but comes with a frightening matrix of incompatibilities and quirks. James’ tutorial session will teach you how to use the many features and techniques available for building interactive CLIs, from progress bars and color to mouse input and animated graphics on the command line. You will learn how to detect when these features are available in a terminal and how to ensure your program works across different operating systems and terminals.

Transcript

1. CL EYE-CATCHING CL EYE-CATCHING USER INTERFACES USER INTERFACES GopherCon August 29, 2018 https://bit.ly/cli-ui
2. James Bowes Technical Lead @ Worked on many CLI tools no-one uses any more (up2date, yum) Loves Cats Loves Terminals ABOUT ME ABOUT ME  @jrbowes Manifold
5. YOU WILL LEARN HOW TO YOU WILL LEARN HOW TO make progress bars and spinners decorate text draw anywhere on the terminal collect input do fancy things with mice and images ...safely, for any operating system
6. YOU WILL LEARN HOW TO YOU WILL LEARN HOW TO make progress bars and spinners decorate text draw anywhere on the terminal collect input do fancy things with mice and images ...safely, for any operating system*
7. * Recent versions of Mac OS, Linux, and Windows
8. * Recent versions of Mac OS, Linux, and Windows**
9. * Recent versions of Mac OS, Linux, and Windows** ** For common terminals
10. NOTABLY ABSENT NOTABLY ABSENT Command line argument parsing Environment variables
11. NOT JUST FOR GO NOT JUST FOR GO Share these system calls and escape sequences with your non-gopher friends.
12. NOT JUST FOR GO NOT JUST FOR GO Share these system calls and escape sequences with your non-gopher friends. Use a package for real code.
13. GO IS AWESOME FOR CLIS GO IS AWESOME FOR CLIS Great support for Windows, Mac OS, Linux Easy cross compilation with GOOS and GOARCH Self-contained binary (as long as you don't need Cgo)
14. HIERARCHY OF USER HIERARCHY OF USER INTERFACES INTERFACES Command Line Interface (CLI) Text-based User Interface (TUI) Graphical User Interface (GUI)
15. HIERARCHY OF USER HIERARCHY OF USER INTERFACES INTERFACES Command Line Interface (CLI) Text-based User Interface (TUI) ☜ Graphical User Interface (GUI)
16. PART 1 PART 1 ☞ CHARACTERS ☞ CHARACTERS
17. CARRIAGE RETURN CARRIAGE RETURN YOUR NEW SECRET WEAPON YOUR NEW SECRET WEAPON
19. BUILDING A PROGRESS BAR BUILDING A PROGRESS BAR
20. BUILDING A PROGRESS BAR BUILDING A PROGRESS BAR func drawBar(percent int) { cols := 10 prog := strings.Repeat("=", cols*percent/100.0) fmt.Printf("\rdemo progress: %3[1]d%% |%-[3]*[2]s|", percent, prog, cols) }
21. BUILDING A PROGRESS BAR (CON'T) BUILDING A PROGRESS BAR (CON'T) fmt.Printf("\rdemo progress: %3[1]d%% |%-[3]*[2]s|", percent, prog, cols)
22. BUILDING A PROGRESS BAR (CON'T) BUILDING A PROGRESS BAR (CON'T) \r Move to start of line fmt.Printf("\rdemo progress: %3[1]d%% |%-[3]*[2]s|", percent, prog, cols)
23. BUILDING A PROGRESS BAR (CON'T) BUILDING A PROGRESS BAR (CON'T) \r Move to start of line %3[1]d Print the int value of arg 1 fmt.Printf("\rdemo progress: %3[1]d%% |%-[3]*[2]s|", percent, prog, cols)
24. BUILDING A PROGRESS BAR (CON'T) BUILDING A PROGRESS BAR (CON'T) \r Move to start of line %3[1]d Print the int value of arg 1 %% Literal percent fmt.Printf("\rdemo progress: %3[1]d%% |%-[3]*[2]s|", percent, prog, cols)
25. BUILDING A PROGRESS BAR (CON'T) BUILDING A PROGRESS BAR (CON'T) \r Move to start of line %3[1]d Print the int value of arg 1 %% Literal percent -[3]* Left justify and pad by the value of arg 3 fmt.Printf("\rdemo progress: %3[1]d%% |%-[3]*[2]s|", percent, prog, cols)
26. BUILDING A PROGRESS BAR (CON'T) BUILDING A PROGRESS BAR (CON'T) \r Move to start of line %3[1]d Print the int value of arg 1 %% Literal percent -[3]* Left justify and pad by the value of arg 3 [2]s Print the string value of arg 2 fmt.Printf("\rdemo progress: %3[1]d%% |%-[3]*[2]s|", percent, prog, cols)
27. UNICODE UNICODE YOUR YOUR OTHER OTHER NEW SECRET WEAPON NEW SECRET WEAPON
28. UNICODE SPINNERS UNICODE SPINNERS Carriage return ❤ unicode
29. UNICODE SPINNERS UNICODE SPINNERS Carriage return ❤ unicode var ( braille = []rune{'⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', clock = []rune{' ', ' ', ' ', ' ', ' ', ' ', ' ', ' )
30. SPICE UP YOUR USER SPICE UP YOUR USER INTERACTIONS INTERACTIONS ✅ Success! ⚠ Your password needs more entropy ???
31. WHAT C
32. MISSING CHARACTERS IN A MISSING CHARACTERS IN A TYPEFACE TYPEFACE missing := "The power symbol is new in Unicode 9:
33. MISCOUNTING MULTIBYTE MISCOUNTING MULTIBYTE CHARACTERS CHARACTERS miscounted := " " fmt.Println(miscounted, "has len", len(miscounted)) fmt.Println(miscounted, "has runes", utf8.RuneCount([]byte(miscounted))) has len 4 has runes 1
34. WIDE CHARACTERS WIDE CHARACTERS wide := " 十" fmt.Println(wide) fmt.Println("01") fmt.Println("runes:", utf8.RuneCount([]byte(wide))) fmt.Println("width:", runewidth.StringWidth(wide)) 十 01 runes: 1 width: 2
35. SINGLE-WIDTH CHARACTERS THAT SINGLE-WIDTH CHARACTERS THAT RENDER AS WIDE RENDER AS WIDE wrongWidth := "☛" fmt.Println(wrongWidth) fmt.Println("01") fmt.Println("runes:", utf8.RuneCount([]byte(wrongWidth))) fmt.Println("width:", runewidth.StringWidth(wrongWidth)) fmt.Printf("%sOver top\n", wrongWidth) ☛ 01 runes: 1 width: 1 ☛Over top
36. PART 2 PART 2 ☞ ESCAPE CODES ☞ ESCAPE CODES
37. In-band signalling that starts with \033[.
38. In-band signalling that starts with \033[. Thank you, American National Standards Institute!
39. TEXT DECORATION TEXT DECORATION AND COLOR AND COLOR
40. DECORATIONS DECORATIONS Mostly supported
41. CHARACTER SIZE CHARACTER SIZE Not well supported, but really neat!
42. COLOR COLOR So many options!
43. MULTILINE OUTPUT MULTILINE OUTPUT WITH CURSOR MOVEMENT WITH CURSOR MOVEMENT
44. LINEAR-FEEDBACK SHIFT REGISTER LINEAR-FEEDBACK SHIFT REGISTER SCREEN CLEARING SCREEN CLEARING http://fabiensanglard.net/fizzlefade/index.php
45. SO MUCH MORE! SO MUCH MORE! Relative cursor movement Partial screen clearing
46. INTERLUDE INTERLUDE ☞ CAN I USE... ☞ CAN I USE...
47. HOW BAD CAN IT BE? HOW BAD CAN IT BE? That's a teapot in ReGIS 0kc5N/d|NkuKboHmhDdc4_.f~Y`zTevNbsHipCjn3^`mZlVkkRdkPkkM` lLnlJkmIinIhoIlpImqIorImsJotJiuKkvKawLnwLdxMixMayMfyMjyM nyMoyMczMMgzMMMhzNNizNjzNhzOizOkzOizPjzPhzQfzQczQmyRjyRg yR`yShxSmwSmvSivS`vShuS`uSmtSftSctSlsTjsTesUlrVhrWdrXarY jqZbq[gp\ko]in^gm^cl^ej^dh]f[mcXbaT-f~O{IbxBlt2ZiqPjnEnk 1YjiLmg0^jfOdl@nl/QomCjo.VmqJet-_`wUzLa}D.b`,]obWieSchOi jMlKenJooIgqIdrJgsJctKotLguMluO`vPdvQkvQnvRawSgwShwTmwTa xTexTixTlxT`yTgySfySiySmyS`zSczRRRbzRRnyRRjyReyRayRlxRkx QfxQaxQlwQnwPiwPgwOawOovNivNgvMevM`vMkuLfuLntLjtLosLgsLi
48. HOW CAN WE TELL HOW CAN WE TELL WHAT IS WHAT IS SUPPORTED? SUPPORTED?
49. ENVIRONMENT VARIABLES ENVIRONMENT VARIABLES TERM=xterm-256color COLORTERM=truecolor Terminal specific values
50. TERMINFO TERMINFO A database of terminal names (from TERM) and capabilities that started in ncurses. Includes escape codes.
51. TERMINFO TERMINFO A database of terminal names (from TERM) and capabilities that started in ncurses. Includes escape codes. For better portability, use a terminfo database for in-band signalling.
52. RELY ON THE USER RELY ON THE USER Provide flags and configuration for color and interactivity
53. HANDLING WINDOWS HANDLING WINDOWS Windows 10 can enable VT processing For other versions, wrap the output and parse escape codes
54. WINDOWS SUBSYSTEM FOR WINDOWS SUBSYSTEM FOR LINUX LINUX ANSI escape codes and POSIX syscalls under Windows The console related APIS don't work across environments
55. PART 3 PART 3 ☞ SYSTEM CALLS ☞ SYSTEM CALLS
56. Out-of-band signalling through system calls.
57. Out-of-band signalling through system calls. Thank you, IEEE Computer Society
58. Out-of-band signalling through system calls. Thank you, IEEE Computer Society And Microsoft
59. DETECTING TERMINAL SIZE DETECTING TERMINAL SIZE Great for columnar output and wrapping.
60. MULTI-LINE INTERACTIVE MULTI-LINE INTERACTIVE INLINE INPUTS INLINE INPUTS Raw mode
61. PART 4 PART 4 ☞ POTPOURRI ☞ POTPOURRI
62. FULLSCREEN INTERFACES FULLSCREEN INTERFACES Combine: Raw mode Direct tty access Alternate buffer
63. DISPLAYING GRAPHICS DISPLAYING GRAPHICS SIXEL: raster graphics from DEC ReGIS: vector graphics from DEC Custom formats for assorted modern terminals
64. CAPTURING MOUSE INPUT CAPTURING MOUSE INPUT Broad support Not supported in Windows VT Processing. You have to fall back to the input buffer API.
65. APPENDIX APPENDIX ☞ LEARN MORE ☞ LEARN MORE
66. GREAT LIBRARIES GREAT LIBRARIES chzyer/readline manifoldco/promptui gdamore/tcell mattn/go-runewidth
67. READING LIST READING LIST Windows console reference ANSI escape codes termios(3) XTerm Control Sequences
68. THANK YOU! THANK YOU!  @jrbowes  this presentation (https://bit.ly/cli-ui)