Code Monkey home page Code Monkey logo

hyper-transparent-bg's Introduction

Hyper.app Transparent Background Plugin

An emulated transparent background for Hyper.app!

WAT HOW DOES IT WORK

alt wat

It's an HTML5 <video /> of the entire screen that's moved when the window moves. CSS is used to make it transparent and add other effects.

If you don't want a blur or other effects added to your background, but you still want it to be transparent, just use an rgba color as your config.backgroundColor (ex config.backgroundColor: 'rgba(0, 0, 0, 0.3)'). The alpha transparency must be greater than 0 for this to work..

Demo

alt demo

Configuration

Usage with themes

Yes, it works with themes! All that is needed is to add this package anywhere after the theme package and it will automatically apply the effects from the config.transparentBg property below to the background from the theme.

For example using the hyperterm-material theme:

module.exports = {
  plugins: [
    'hyperterm-material',
    'hyper-transparent-bg',
  ],
};
Properties

Add these properties to your ~/.hyper.js file to configure hyper-transparent-bg.

config.backgroundColor
  • Type: string (hex or rgba color)
  • Default: '#000'

The normal background property for Hyper.app.

config.transparentBg
  • Type: object
  • Default: { WebkitFilter: 'blur(5px)', opacity: '0.3' }

This object can be any CSSStyleDeclaration allowed. Essentially pass an inline style object the same way you would with React.

By default there is blur and opacity applied. A value of opacity: 1 will have no background color applied to it. A value of opacity: 0 for opacity will have no "transparency" and only have color.

Development / Debugging / More WAT

Setting the DEBUG environmental variable to a truthy value will make the plugin console.log the commands that are being sent to the window.

hyper-transparent-bg's People

Contributors

dfrankland avatar

Stargazers

Jaidyn E. avatar JC avatar Aashutosh Rathi avatar GT Deng avatar Martin van Driel avatar Justin Woodward avatar Charlike Mike Reagent avatar Mu hun avatar Helton Carlos de Souza avatar Mike Pruett avatar Jessica M. avatar Monte Thakkar avatar Yerko Palma avatar Matt Groth avatar Jørgen Vatle avatar Christopher Patty avatar ✨ Kathryn Gonzalez ✨ avatar Tomas Echeverri avatar Josh Buchea avatar Yineng Shen avatar Brett Lamy avatar Phred Lane avatar Michael Yang avatar Michael Yang avatar SwhGo_oN avatar  avatar Fernando Guisso avatar Yoshiya Hinosawa avatar karen avatar Patrick Lienau avatar Gabriel Almeida avatar John Johnson avatar Dan Kaplun avatar Valentin Semirulnik avatar  avatar

Watchers

SwhGo_oN avatar James Cloos avatar  avatar Matt Groth avatar  avatar

Forkers

prodject

hyper-transparent-bg's Issues

Uncaught TypeError Windows 10 - Cannot read property

Current running windows 10, Hyper version 1.2.1. The only plugin I have installed is hyper-transparent-bg, but it does not render anything. If I move the window I get thousands of Uncaught TypeError: Cannot read property 'style' of null in the dev console. Any ideas?

I guess this plugin is broken?

Doesn't seem to work on Manjaro Linux;

image

it doesn't seem to understand the syntax for the config in ~/.hyper.js file.

image

it just completely breaks hyper and ignores my config altogether and uses a fallback mode.

opening DevTools shows no valuable information but a bunch of errors being repeated on loop.

Not working on Windows 10

I've tried several methods to get this to work on Windows 10 but apparently it can't. Here's the error I'm getting:

Error while loading devtools extensions Error: Unable to parse color from string "#00000000"

More details:

C:\Users\prubi> running in prod mode electron will open file://C:\Users\prubi\AppData\Local\hyper\app-1.1.0\resources\app\index.html **Error while loading devtools extensions Error: Unable to parse color from string "#00000000"** at Object.Color (C:\Users\prubi\AppData\Local\hyper\app-1.1.0\resources\app\node_modules\color\index.js:34:10) at Color (C:\Users\prubi\AppData\Local\hyper\app-1.1.0\resources\app\node_modules\color\index.js:11:10) at module.exports.bgColor (C:\Users\prubi\AppData\Local\hyper\app-1.1.0\resources\app\utils\to-electron-background-color.js:7:17) at createWindow (C:\Users\prubi\AppData\Local\hyper\app-1.1.0\resources\app\index.js:139:24) at installDevExtensions.then (C:\Users\prubi\AppData\Local\hyper\app-1.1.0\resources\app\index.js:357:3)

Please look it up, I'd really like to have this functionality added to Hyper! ;D

A JavaScript error occurred in the main process

A JavaScript error occurred in the main process

Uncaught Exception:
Error: Unable to parse color from string "#00000000"
at Object.Color (/Applications/Hyper.app/Contents/Resources/app/node_modules/color/index.js:34:10)
at Color (/Applications/Hyper.app/Contents/Resources/app/node_modules/color/index.js:11:10)
at module.exports.bgColor (/Applications/Hyper.app/Contents/Resources/app/utils/to-electron-background-color.js:7:17)
at createWindow (/Applications/Hyper.app/Contents/Resources/app/index.js:113:24)
at click (/Applications/Hyper.app/Contents/Resources/app/menu.js:69:11)
at MenuItem.click (/Applications/Hyper.app/Contents/Resources/electron.asar/browser/api/menu-item.js:59:9)
at Function.executeCommand (/Applications/Hyper.app/Contents/Resources/electron.asar/browser/api/menu.js:121:15)

Very resource intensive

Considering that this takes a full screen video of the entire current screen, this easily makes HyperTerm take up an additional 50% CPU. This is especially true when running on 4K monitors.

Maybe we could switch over to using requestAnimationFrame and the electron desktop capturer? This way electron could inform when it's necessary to update the screen.

Usage with themes

There were two problems I had initially when using this plugin with other themes. One was that the background color from a theme would go over top the transparent background and it would be opaque. This was fixed by reordering the plugins and restarting hyperterm. (I put the theme before the hyperterm-transparent-bg plugin)

The other problem I was wondering if it could be fixed is whether the header (the tab section at the top) background could be changed to match the theme (the previous config before extension). I'm guessing the current coloring (black) that I am getting is coming from background-color being set by the transparent-bg plugin. The header could be targeted specifically with the header_header class, but that may not be good practice to change.

Error: Unable to parse color from string "#00000000" after adding plugin

When I trigger a restart I get:

Uncaught Exception:
Error: Unable to parse color from string "#00000000"
    at Object.Color (/Applications/Hyper.app/Contents/Resources/app/node_modules/color/index.js:34:10)
    at Color (/Applications/Hyper.app/Contents/Resources/app/node_modules/color/index.js:11:10)
    at module.exports.bgColor (/Applications/Hyper.app/Contents/Resources/app/utils/to-electron-background-color.js:7:17)
    at Server.rpc.on (/Applications/Hyper.app/Contents/Resources/app/index.js:195:30)
    at emitOne (events.js:96:13)
    at Server.emit (events.js:188:7)
    at Server.ipcListener (/Applications/Hyper.app/Contents/Resources/app/rpc.js:34:11)
    at emitTwo (events.js:106:13)
    at EventEmitter.emit (events.js:191:7)
    at WebContents.<anonymous> (/Applications/Hyper.app/Contents/Resources/electron.asar/browser/api/web-contents.js:222:13)

How to achieve 100% transparency ?

Is it possible to achieve 100% transparency ?

Opacity is working for as low as 0.1, but "as you said" 0 is just no color.

... why is that ?

Doesn't work with Monokai-deluxe?

I'm probably doing something wrong, but can't seem to figure out why its not working.

Here's my config:

`// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.

module.exports = {
  config: {
    // Choose either "stable" for receiving highly polished,
    // or "canary" for less polished but more frequent updates
    updateChannel: 'stable',

    // default font size in peixels for all tabs
    fontSize: 12,

    // font family with optional fallbacks
    fontFamily: 'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgba(248,28,229,0.8)',

    // `BEAM` for |, `UNDERLINE` for _, `BLOCK` for █
    cursorShape: 'BLOCK',

    // set to true for blinking cursor
    cursorBlink: false,

    // color of the text
    foregroundColor: '#fff',

    // terminal background color
    backgroundColor: '#000',
    transparentBg: { WebkitFilter: 'blur(5px)', opacity: '0.3' },

    // border color (window, tabs)
    borderColor: '#333',

    // custom css to embed in the main window
    css: '',

    // custom css to embed in the terminal window
    termCSS: '',

    // set to `true` (without backticks) if you're using a Linux setup that doesn't show native menus
    // default: `false` on Linux, `true` on Windows (ignored on macOS)
    showHamburgerMenu: '',

    // set to `false` if you want to hide the minimize, maximize and close buttons
    // additionally, set to `'left'` if you want them on the left, like in Ubuntu
    // default: `true` on windows and Linux (ignored on macOS)
    showWindowControls: '',

    // custom padding (css format, i.e.: `top right bottom left`)
    padding: '12px 14px',

    // the full list. if you're going to provide the full color palette,
    // including the 6 x 6 color cubes and the grayscale map, just provide
    // an array here instead of a color map object
    colors: {
      black: '#000000',
      red: '#ff0000',
      green: '#33ff00',
      yellow: '#ffff00',
      blue: '#0066ff',
      magenta: '#cc00ff',
      cyan: '#00ffff',
      white: '#d0d0d0',
      lightBlack: '#808080',
      lightRed: '#ff0000',
      lightGreen: '#33ff00',
      lightYellow: '#ffff00',
      lightBlue: '#0066ff',
      lightMagenta: '#cc00ff',
      lightCyan: '#00ffff',
      lightWhite: '#ffffff'
    },

    // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
    // if left empty, your system's login shell will be used by default
    //
    // Windows
    // - Make sure to use a full path if the binary name doesn't work
    // - Remove `--login` in shellArgs
    //
    // Bash on Windows
    // - Example: `C:\\Windows\\System32\\bash.exe`
    //
    // Powershell on Windows
    // - Example: `C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
    // shell: 'C:\\Windows\\System32\\bash.exe',
    shell: 'C:\\Program Files\\Git\\git-cmd.exe',

    // for setting shell arguments (i.e. for using interactive shellArgs: ['-i'])
    // by default ['--login'] will be used
    // shellArgs: ['--login'],
    shellArgs: ['--command=usr/bin/bash.exe', '-l', '-i'],

    // for environment variables
    env: {
    TERM: "cygwin"
    },

    // set to false for no bell
    bell: 'SOUND',

    // if true, selected text will automatically be copied to the clipboard
    copyOnSelect: false

    // if true, on right click selected text will be copied or pasted if no
    // selection is present (true by default on Windows)
    // quickEdit: true

    // URL to custom bell
    // bellSoundURL: 'http://example.com/bell.mp3',

    // for advanced config flags please refer to https://hyper.is/#cfg
  },

  // a list of plugins to fetch and install from npm
  // format: [@org/]project[#version]
  // examples:
  //   `hyperpower`
  //   `@company/project`
  //   `project#1.0.1`
  plugins: ['hyper-monokai-deluxe', "hyper-transparent-bg"],

  // in development, you can create a directory under
  // `~/.hyper_plugins/local/` and include it here
  // to load it and avoid it being `npm install`ed
  localPlugins: [],

  keymaps: {
    // Example
    // 'window:devtools': 'cmd+alt+o',
  }
};


Doesn't work on 2nd monitor

Hey I really like your plugin. I just used it today on a second monitor. It seems to just black out the background when dragged to a second monitor. Thought I might bring this to your attention.

Plugin load error "hyperterm-transparent-bg" failed to load in the renderer process.

http://stackoverflow.com/questions/42582846/hyperterm-cannot-find-module-error-when-installing-plugins

bundle.js:1 Error: Cannot find module '/Users/leongaban/.hyper_plugins/node_modules/hyperterm-transparent-bg' at Module._resolveFilename (module.js:455:15)

I re-installed Hyperterm and it doesn't look like it can rebuild the npm-debug.log file :(

[Here is the gist to the last one I had saved off.][4]


Update after reinstalling HyperTerm, when I add hyperterm-transparent-bg HyperTerm does not run :( the only command from the menu bar is Quit.

My .hyper.js config file:

  module.exports = {
        config: {
        // default font size in pixels for all tabs
        fontSize: 12,

        // font family with optional fallbacks
        fontFamily: 'Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

        // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
        cursorColor: 'rgba(248,28,229,0.75)',

        // `BEAM` for |, `UNDERLINE` for _, `BLOCK` for █
        cursorShape: 'BLOCK',

        // color of the text
        foregroundColor: '#fff',

        // terminal background color
        // backgroundColor: 'rgba(2, 40, 50, 0.5)',
        backgroundColor: '#000',

        transparentBg: { WebkitFilter: 'blur(5px)', opacity: '0.3' },

        // border color (window, tabs)
        borderColor: 'rgba(255,255,255,.1)',

        // custom css to embed in the main window
        css: '',

        // custom css to embed in the terminal window
        termCSS: '',

        // custom padding (css format, i.e.: `top right bottom left`)
        padding: '12px 14px',

        // the full list. if you're going to provide the full color palette,
        // including the 6 x 6 color cubes and the grayscale map, just provide
        // an array here instead of a color map object
        colors: {
          black: '#000000',
          red: '#ff0000',
          green: '#33ff00',
          yellow: '#ffff00',
          blue: '#0066ff',
          magenta: '#cc00ff',
          cyan: '#00ffff',
          white: '#d0d0d0',
          lightBlack: '#808080',
          lightRed: '#ff0000',
          lightGreen: '#33ff00',
          lightYellow: '#ffff00',
          lightBlue: '#0066ff',
          lightMagenta: '#cc00ff',
          lightCyan: '#00ffff',
          lightWhite: '#ffffff'
        },

        // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
        // if left empty, your system's login shell will be used by default
        shell: 'zsh',

        // for setting shell arguments (i.e. for using interactive shellArgs: ['-i'])
        // by default ['--login'] will be used
        shellArgs: ['--login'],

        // for environment variables
        env: {},

        // set to false for no bell
        bell: 'SOUND',

        // if true, selected text will automatically be copied to the clipboard
        copyOnSelect: false

        // URL to custom bell
        // bellSoundURL: 'http://example.com/bell.mp3',

        // for advanced config flags please refer to https://hyperterm.org/#cfg
      },

      // a list of plugins to fetch and install from npm
      // format: [@org/]project[#version]
      // examples:
      //   `hyperpower`
      //   `@company/project`
      //   `project#1.0.1`
      plugins: [
        'hyperterm-material',
        'hyperterm-transparent-bg',
        'hyperterm-blink'
      ],

      // in development, you can create a directory under
      // `~/.hyperterm_plugins/local/` and include it here
      // to load it and avoid it being `npm install`ed
      localPlugins: []
    };`

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.