Font size/family and colors/palette customisations?

[v20z]

Hello Soren.

Thanks for your work. Please point to ways on subject. It looks like those are being hardcoded at build time (when performing npx install dependencies, xterm.js, creating gotty.js) and does not apply settings from the config file at run time like font_size/font_family/color_palette_overrides as in originator's (yudai) version.

Thank You.

[sorenisanerd]

Font size and family are pretty easy, but the color palette thing looks tricky. hterm is going away and xterm uses a slightly different way to specify the colors.

[v20z]

Hello Soren.

Thank you for reply.

I've looked around on github and found https://github.com/ysk2014/xterm-theme

Also googled and collected some code snippets. May be it will helpful for you to interpret and adopt when next time paying attention to project .

--term value     Terminal name to use on the browser, one of xterm or hterm. (default: "xterm") [$GOTTY_TERM]

import { Terminal } from 'xterm';

var terminal = new Terminal({
	fontSize: 15,
	//fontWeight: '800',
	//lineHeight: 1.1,
	//letterSpacing: 1,
	fontFamily: `'Fira Mono', monospace`,
	cursorBlink: true,
	cursorStyle: 'underline',
        //cols: 80, rows: 25,
	theme: {
		cursor: 'gray',
		foreground: '#dddddd',
		background: '#090c0f'
	},

	//theme: defaultTheme
	//theme: AdventureTime // xtermTheme.AdventureTime
});

terminal.setOption('fontSize', 14);
terminal.setOption('cursorBlink', true);
terminal.setOption('cursorStyle', 'block');

terminal.setOption('theme', theme)
terminal.setOption('fontSize', theme.fontSize || '10')
terminal.setOption('fontWeight', theme.fontWeight || 'normal')

terminal.setOption('theme', {
	foreground: green,
	background: black,
});

https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts

export interface ITheme {
    /** The default foreground color */
    foreground?: string;
    /** The default background color */
    background?: string;
    /** The cursor color */
    cursor?: string;
    /** The accent color of the cursor (fg color for a block cursor) */
    black?: string;
    /** ANSI bright black (eg. `\x1b[1;30m`) */
    brightBlack?: string;
    /** ANSI bright red (eg. `\x1b[1;31m`) */
    brightRed?: string;
}

setOption(key: 'theme', value: ITheme): void;

setOption(key: 'fontSize' | 'letterSpacing' | 'lineHeight' | 'tabStopWidth' | 'scrollback', value: number): void;

[v20z]

Ok there, just extended your function setPreferences to apply settings for xterm.js with several parameters so that there is no need to change my config file. Couple inplace sed patches

sed -i \
'/UserCss/a\
	CursorStyle		string		`hcl:"cursor_style" json:"cursor-style,omitempty"`\
	ScrollbackLines		int		`hcl:"scrollback_lines" json:"scrollback-lines,omitempty"`\
	CursorAccent		string		`hcl:"cursor_accent" json:"cursor-accent,omitempty"`\
	SelectionColor		string		`hcl:"selection_color" json:"selection-color,omitempty"`\
' server/options.go

sed -i \
'/    setPreferences(value: object) {/,/    };/c\
    setPreferences(value: object) {\
	var color = new Array(5);\
	var palette = new Array(16);\
        Object.keys(value).forEach((key) => {\
            if (key == "EnableWebGL" && key) {\
                this.term.loadAddon(new WebglAddon());\
            } else if (key == "font-size") {\
                this.term.setOption("fontSize", value[key])\
            } else if (key == "font-family") {\
                this.term.setOption("fontFamily", value[key])\
            } else if (key == "width") {\
                this.term.setOption("cols", value[key])\
            } else if (key == "height") {\
                this.term.setOption("rows", value[key])\
            } else if (key == "cursor-blink") {\
                this.term.setOption("cursorBlink", value[key])\
            } else if (key == "cursor-style") {\
                this.term.setOption("cursorStyle", value[key])\
            } else if (key == "scrollback-lines") {\
                this.term.setOption("scrollback", value[key])\
            } else if (key == "foreground-color") {\
		color[0] = value[key]\
            } else if (key == "background-color") {\
		color[1] = value[key]\
            } else if (key == "cursor-color") {\
		color[2] = value[key]\
            } else if (key == "cursor-accent") {\
		color[3] = value[key]\
            } else if (key == "selection-color") {\
		color[4] = value[key]\
            } else if (key == "color-palette-overrides") {\
		palette = value[key]\
            }\
        });\
	this.term.setOption("theme", {\
		foreground:	color[0],\
		background:	color[1],\
		cursor:		color[2],\
		cursorAccent:	color[3],\
		selection:	color[4],\
		black:		palette[0],\
		red:		palette[1],\
		green:		palette[2],\
		yellow:		palette[3],\
		blue:		palette[4],\
		magenta:	palette[5],\
		cyan:		palette[6],\
		white:		palette[7],\
		brightBlack:	palette[8],\
		brightRed:	palette[9],\
		brightGreen:	palette[10],\
		brightYellow:	palette[11],\
		brightBlue:	palette[12],\
		brightMagenta:	palette[13],\
		brightCyan:	palette[14],\
		brightWhite:	palette[15]\
	})\
    }\
' js/src/xterm.ts 

setOption(theme and setTheme wants fully filled object and then parses for correctness and internally assigns default values for missed or incorrect.

Or for those parameters in type HtermPrefernces struct necessary to assign and track default values as done in type Options struct

Here is my several years old config which remains unchanged although some of the parameters are now not used/applied by xterm.js

port = "591"
address = "0.0.0.0"
enable_tls = false
permit_write = true

//enable_basic_auth = true
//credential = "R5u:T8;5f,fd.Cd~"

timeout = 0
max_connection = 20
reconnect_time = 10
enable_reconnect = false

once = false
close_on_exit = false

//width = 80
//height = 25

//path = "/gotty"
//index_file = "/etc/opt/gotty/index.html"

preferences {

	close_on_exit = true
	enable_8_bit_control = true
	environment = {"TERM" = "xterm"}

	pass_meta_v = true
	ctrl_c_copy = false
	ctrl_v_paste = false
	pass_alt_number = false
	pass_ctrl_number = false
	home_keys_scroll = false
	backspace_sends_backspace = true
	ctrl_plus_minus_zero_zoom = false

	font_size = 20
	font_family = "Consolas, monospace"

	scrollback_lines = 1000

	cursor_blink = true
	//cursor_style = "bar"
	cursor_style = "block"
	//cursor_style = "underline"
	//cursor_blink_cycle = [1000, 500]

	foreground_color = "rgb(170, 170, 170)"
	background_color = "rgb(0, 0, 0)"
	cursor_color = "rgba(255, 255, 255, 0.9)"
	//cursor_accent = "#000000"
	selection_color = "rgba(255, 255, 255, 0.4)"

	color_palette_overrides = [
		// dark:
		"#000000",
		"#AA0000",
		"#00AA00",
		"#AA5500",
		"#0000AA",
		"#AA00AA",
		"#00AAAA",
		"#AAAAAA",
		// bright:
		"#555555",
		"#FF5555",
		"#55FF55",
		"#FFFF55",
		"#5555FF",
		"#FF55FF",
		"#55FFFF",
		"#FFFFFF"
	]
}

Please add elegance whenever possible.

Thank You.