faressoft / terminalizer

🦄 Record your terminal and generate animated gif images or share a web player
https://terminalizer.com
MIT License
15.4k stars 502 forks source link

Does watermark work? #48

Open timsehn opened 5 years ago

timsehn commented 5 years ago

Here's my test:

timsehn:quick-test timsehn$ cat test.yml 
# The configurations that used for the recording, feel free to edit them
config:

  # Specify a command to be executed
  # like `/bin/bash -l`, `ls`, or any other commands
  # the default is bash for Linux
  # or powershell.exe for Windows
  command: bash -l

  # Specify the current working directory path
  # the default is the current working directory path
  cwd: /Users/timsehn/liquidata/terminalizer-videos/quick-test

  # Export additional ENV variables
  env:
    recording: true

  # Explicitly set the number of columns
  # or use `auto` to take the current
  # number of columns of your shell
  cols: 88

  # Explicitly set the number of rows
  # or use `auto` to take the current
  # number of rows of your shell
  rows: 44

  # Amount of times to repeat GIF
  # If value is -1, play once
  # If value is 0, loop indefinitely
  # If value is a positive number, loop n times
  repeat: 0

  # Quality
  # 1 - 100
  quality: 100

  # Delay between frames in ms
  # If the value is `auto` use the actual recording delays
  frameDelay: auto

  # Maximum delay between frames in ms
  # Ignored if the `frameDelay` isn't set to `auto`
  # Set to `auto` to prevent limiting the max idle time
  maxIdleTime: 2000

  # The surrounding frame box
  # The `type` can be null, window, floating, or solid`
  # To hide the title use the value null
  # Don't forget to add a backgroundColor style with a null as type
  frameBox:
    type: floating
    title: Terminalizer
    style:
      border: 0px black solid
      boxShadow: none
      # margin: 0px

  # Add a watermark image to the rendered gif
  # You need to specify an absolute path for
  # the image on your machine or a URL, and you can also
  # add your own CSS styles
  watermark:
    imagePath: /Users/timsehn/liquidata/git/logo/dolt/Dolt.png
    style:
      position: absolute
      right: 15px
      top: 15px
      height: 50px
      width: 50px

  # Cursor style can be one of
  # `block`, `underline`, or `bar`
  cursorStyle: block

  # Font family
  # You can use any font that is installed on your machine
  # in CSS-like syntax
  fontFamily: "Monaco, Lucida Console, Ubuntu Mono, Monospace"

  # The size of the font
  fontSize: 12

  # The height of lines
  lineHeight: 1

  # The spacing between letters
  letterSpacing: 0

  # Theme
  theme:
    background: "transparent"
    foreground: "#afafaf"
    cursor: "#c7c7c7"
    black: "#232628"
    red: "#fc4384"
    green: "#b3e33b"
    yellow: "#ffa727"
    blue: "#75dff2"
    magenta: "#ae89fe"
    cyan: "#708387"
    white: "#d5d5d0"
    brightBlack: "#626566"
    brightRed: "#ff7fac"
    brightGreen: "#c8ed71"
    brightYellow: "#ebdf86"
    brightBlue: "#75dff2"
    brightMagenta: "#ae89fe"
    brightCyan: "#b1c6ca"
    brightWhite: "#f9f9f4"

# Records, feel free to edit them
records:
  - delay: 1056
    content: "Restored session: Fri Mar  1 14:15:33 PST 2019\r\n"
  - delay: 13
    content: "\e]7;file://timsehn.hopto.org/Users/timsehn/liquidata/terminalizer-videos/quick-test\a\e[?1034htimsehn:quick-test timsehn$ "
  - delay: 1391
    content: l
  - delay: 101
    content: s
  - delay: 135
    content: ' '
  - delay: 191
    content: '-'
  - delay: 428
    content: a
  - delay: 270
    content: l
  - delay: 697
    content: "\r\n"
  - delay: 6
    content: "total 0\r\ndrwxr-xr-x  2 timsehn  staff   64 Mar  1 14:48 .\r\ndrwxr-xr-x  6 timsehn  staff  192 Mar  1 14:48 ..\r\n\e]7;file://timsehn.hopto.org/Users/timsehn/liquidata/terminalizer-videos/quick-test\atimsehn:quick-test timsehn$ "
  - delay: 2172
    content: "logout\r\nSaving session..."
  - delay: 11
    content: "\r\n...saving history..."
  - delay: 11
    content: "truncating history files...\r\n...completed.\r\n"

I can change the image to any image on the web such as:

https://www.liquidata.co/Liquidata-main-logo-RGB.png

I also messed around with the CSS properties. Can't get it to work.

I tried poking around in the code to see if I could figure out my error but alas, my javascript is weak. The last render is attached.

render1551483793993

AshNaz87 commented 5 years ago

I also cannot get it to work.

Please help!

anden-dev commented 5 years ago

I'll just leave this here...

I can get the watermark to show up with

watermark:
    imagePath: https://www.liquidata.co/Liquidata-main-logo-RGB.png
       style:
         position: absolute
         right: 15px
         top: 1px
         width: 50px

I haven't figured out yet why positioning is not working as expected.