zach-capalbo / flammarion

The nifty ruby gui toolkit.
Other
285 stars 11 forks source link

Plot outside pane #49

Open alxx opened 4 years ago

alxx commented 4 years ago

My plot covers the left margin of the subpane it's in. I've set a thick border between panes and the plot is painted right on top of it. What can I do to force my plot inside the pane?

require 'flammarion'
require 'colorize'

f = Flammarion::Engraving.new
f.orientation = :vertical

top_pane = f.subpane('main')
top_pane.orientation = :horizontal
top_pane.style('border', '1px solid white')
top_pane.style('height', '200px')

status_pane = top_pane.subpane('status')
status_pane.style('border-right', '3px solid white')
status_pane.style('width', '40%')
status_pane.puts "Status"

buffer_pane = top_pane.subpane('buffer')
buffer_pane.style('width', '60%')
buffer_pane.style('height', '180px')
plot = buffer_pane.plot(Array.new(50).map{rand(10)},  {staticPlot: true})

Screenshot 2020-04-20 at 15 43 48

zach-capalbo commented 4 years ago

Hi @alxx,

The automatic subpane styling is not super smart, so making style changes sometimes requires some fiddling. I think this should do the trick for you, I added status_pane.style('margin-right', '0px') and buffer_pane.style('margin-left', '0px')

require 'flammarion'
require 'colorize'

f = Flammarion::Engraving.new
f.orientation = :vertical

top_pane = f.subpane('main')
top_pane.orientation = :horizontal
top_pane.style('border', '1px solid white')
top_pane.style('height', '200px')

status_pane = top_pane.subpane('status')
status_pane.style('border-right', '3px solid white')
status_pane.style('width', '40%')
status_pane.style('margin-right', '0px')
status_pane.puts "Status"

buffer_pane = top_pane.subpane('buffer')
buffer_pane.style('width', '60%')
buffer_pane.style('height', '180px')
buffer_pane.style('margin-left', '0px')
plot = buffer_pane.plot(Array.new(50).map{rand(10)},  {staticPlot: true})

Just in case you weren't aware, on most platforms you can press Ctrl+Shift+I to bring up a web developer interface, which will let you experiment with the styles without have to reopen Engravings.

Let me know if this helps with the issue you're having or not.

alxx commented 4 years ago

That did solve things, thanks, I appreciate that. I didn't know about the console, though I should've imagined that it works much like Chrome (although the keystroke is different on a Mac: Cmd-Alt-I)

You should add a note in the README saying that some CSS knowledge is required :) as it's really not my strongest point. :)

By the way, speaking about the README, you may want to fix the typo in the line

require 'colorized'

which should be

require 'colorize'

Thanks again!