instrument window's width is too small #2528
Comments
|
How does other software handle this? Are the windows resizeable there? Options would be to scale some parts, to rearrange some icons etc. |
|
Although, I don't want to continue arguing about this point, and I totally accept and respect grejpii and umcaruje's opinions, I would like to add some information to the discussion:
|
|
Could it be an option to simply automatically reduce/increase padding adaptively to the length of words, so they exactly fit the space given? Also the font size could be lowered (adaptively to the needed size). |
|
To reply to claell: I have no idea how other softwares do that. My guess is that they also try to manage that with translation or icons as much as they can. But, also, that they use several rows when their translations become so short that they don't make sense anymore |
|
I think that padding is actually automatically adapted to the length of words (I'm not sure what you mean here): Tabs' width currently depends on tab's label (ie: a tab with a shorter label, like "FX", is shorter than a tab with a longer label like "ENV/LFO") |
|
For reference, should I delete my branch, here's what I did so far regarding the automatic addition of rows: --- a/src/gui/widgets/TabWidget.cpp
+++ b/src/gui/widgets/TabWidget.cpp
@@ -72,8 +72,8 @@ void TabWidget::addTab( QWidget * _w, const QString & _name, int _idx )
}
}
m_widgets[_idx] = d;
- _w->setFixedSize( width() - 4, height() - 14 );
- _w->move( 2, 13 );
+ _w->setFixedSize( width() - 4, height() - 34 );
+ _w->move( 2, 33 );
_w->hide();
if( m_widgets.contains( m_activeTab ) )
@@ -108,20 +108,37 @@ void TabWidget::setActiveTab( int _idx )
void TabWidget::mousePressEvent( QMouseEvent * _me )
{
- if( _me->y() > 1 && _me->y() < 13 )
+ if( _me->y() > 1 && _me->y() < 13 + m_tabheight )
{
+ int twidth = 0;
+ int row = 1;
int cx = ( ( m_caption == "" ) ? 4 : 14 ) +
fontMetrics().width( m_caption );
+
+ // Parse the tab widgets to find out which one was clicked on
for( widgetStack::iterator it = m_widgets.begin();
it != m_widgets.end(); ++it )
{
+ // Switch to next row when we reach maximum width
+ twidth += ( *it ).nwidth;
+ if ( twidth >= width() )
+ {
+ cx = m_caption.isEmpty() ? 4 : 14 + fontMetrics().width( m_caption );
+ row++;
+ twidth = 0;
+ }
+
if( _me->x() >= cx &&
- _me->x() <= cx + ( *it ).nwidth )
+ _me->x() <= cx + ( *it ).nwidth &&
+ _me->y() >= 1 + m_tabheight * ( row - 1 ) &&
+ _me->y() <= 1 + m_tabheight * row )
+
{
setActiveTab( it.key() );
update();
return;
}
+
cx += ( *it ).nwidth;
}
}
@@ -169,7 +186,7 @@ void TabWidget::paintEvent( QPaintEvent * _pe )
p.drawRect( 1, 1, width() - 3, height() - 3 );
p.fillRect( 2, 2, width() - 4, m_tabheight, g );
- p.drawLine( 2, m_tabheight + 2, width() - 3, m_tabheight + 2);
+ p.drawLine( 2, m_tabheight * 2 + 2, width() - 3, m_tabheight * 2 + 2);
if( ! m_caption.isEmpty() )
{
@@ -192,17 +209,31 @@ void TabWidget::paintEvent( QPaintEvent * _pe )
}
p.setPen( cap_col );
-
+ int twidth = 0;
+ int row = 1;
for( widgetStack::iterator it = m_widgets.begin();
it != m_widgets.end(); ++it )
{
+ // Create a new row of tabs when there is no more space
+ twidth += ( *it ).nwidth;
+ if ( twidth >= width() )
+ {
+ tab_x_offset = m_caption.isEmpty() ? 4 : 14 + fontMetrics().width( m_caption );
+ row++;
+ twidth = 0;
+ }
+
+ // highlight the active tab
if( it.key() == m_activeTab )
{
p.setPen( QColor( 32, 48, 64 ) );
- p.fillRect( tab_x_offset, 2, ( *it ).nwidth - 6, 10, cap_col );
+ p.fillRect( tab_x_offset, 2 + m_tabheight * ( row - 1 ), ( *it ).nwidth - 6, 10, cap_col );
}
- p.drawText( tab_x_offset + 3, m_tabheight, ( *it ).name );
+
+ // draw tab's label
+ p.drawText( tab_x_offset + 3, m_tabheight * row , ( *it ).name );
p.setPen( cap_col );
+
tab_x_offset += ( *it ).nwidth;
}
}
diff --git a/src/tracks/InstrumentTrack.cpp b/src/tracks/InstrumentTrack.cpp
index 545c82c..96fe01c 100644
--- a/src/tracks/InstrumentTrack.cpp
+++ b/src/tracks/InstrumentTrack.cpp
@@ -1407,7 +1407,7 @@ InstrumentTrackWindow::InstrumentTrackWindow( InstrumentTrackView * _itv ) :
m_tabWidget = new TabWidget( "", this );
- m_tabWidget->setFixedHeight( INSTRUMENT_HEIGHT + 10 );
+ m_tabWidget->setFixedHeight( INSTRUMENT_HEIGHT + 30 );
// create tab-widgets
(END)
+ p.drawLine( 2, m_tabheight * 2 + 2, width() - 3, m_tabheight * 2 + 2);
if( ! m_caption.isEmpty() )
{
@@ -192,17 +209,31 @@ void TabWidget::paintEvent( QPaintEvent * _pe )
}
p.setPen( cap_col );
-
+ int twidth = 0;
+ int row = 1;
for( widgetStack::iterator it = m_widgets.begin();
it != m_widgets.end(); ++it )
{
+ // Create a new row of tabs when there is no more space
+ twidth += ( *it ).nwidth;
+ if ( twidth >= width() )
+ {
+ tab_x_offset = m_caption.isEmpty() ? 4 : 14 + fontMetrics().width( m_caption );
+ row++;
+ twidth = 0;
+ }
+
+ // highlight the active tab
if( it.key() == m_activeTab )
{
p.setPen( QColor( 32, 48, 64 ) );
- p.fillRect( tab_x_offset, 2, ( *it ).nwidth - 6, 10, cap_col );
+ p.fillRect( tab_x_offset, 2 + m_tabheight * ( row - 1 ), ( *it ).nwidth - 6, 10, cap_col );
}
- p.drawText( tab_x_offset + 3, m_tabheight, ( *it ).name );
+
+ // draw tab's label
+ p.drawText( tab_x_offset + 3, m_tabheight * row , ( *it ).name );
p.setPen( cap_col );
+
tab_x_offset += ( *it ).nwidth;
}
}
diff --git a/src/tracks/InstrumentTrack.cpp b/src/tracks/InstrumentTrack.cpp
index 545c82c..96fe01c 100644
--- a/src/tracks/InstrumentTrack.cpp
+++ b/src/tracks/InstrumentTrack.cpp
@@ -1407,7 +1407,7 @@ InstrumentTrackWindow::InstrumentTrackWindow( InstrumentTrackView * _itv ) :
m_tabWidget = new TabWidget( "", this );
- m_tabWidget->setFixedHeight( INSTRUMENT_HEIGHT + 10 );
+ m_tabWidget->setFixedHeight( INSTRUMENT_HEIGHT + 30 );
// create tab-widgets
|
|
With padding I meant the space between the words. It an still get a bit smaller. Also one could change it so that the whole space of the line gets used, even if the words are smaller. Currently in the English version there is some space on the right. |
|
Resizing the instrument window is not possible at the moment. The most instruments use move() for layout their knobs and buttons. And the background is a bitmap. Perhaps we can double the width and show at the right side the envelope tab. Gradually we redesign the instruments to double width. |
Yeah, that's another idea that comes to mind. If done well, it could be a winner. |
I was referring to this one:
|
|
Overflowing tabs isn't a new concept. In regards to avoiding the translation, perhaps we entertain wordless artwork in its place and remove the text altogether. |
|
@tresf that sounds like a good idea
|
|
Hello, I must say I'm not convinced at all by this idea of artwork. First, I don't think wordless artworks would make this tab bar's height smaller than 2 rows of icons. Though, I would like to continue this discussion in the hope to find a solution to this overflowing tab bar. So, here are some possible artwork ideas that I found on the Internet:
The other solutions evoked are:
Cheers, Cyril |
|
Maybe I'm wrong here but I don't think the icons need to exactly convey the
The only thing I'm not sure of is how to make these look good together, brb |
|
Here are small/abstract icons: They don't look incredible but I'd say that's down to my mockup skills (no antialiasing etc.) and not the concept. They could probably actually be drawn with a font/vectors which is an added bonus. If we decide to have two rows we could also make the existing row taller and use bigger icons, which could better represent some of the icons in a less abstract way, similar to (but much smaller than) these: |
|
I like your idea @Spekular just simple symbols ... connected to (translated?) tooltips ... with the currently selected symbol highlighted ... maybe the artwork fans will win this argument :-) .... Hopefully their will be winners, and a solution will be implemented :-) Cheers, Cyrille |
If we go this direction, I would advise we make the tabs slightly taller to accommodate a legible icon. We can still use the translation for a tooltip. Here are some placeholders. tagging @RebeccaDeField.
|
|
Hopefully, producers should be able to get an idea of what each icon is supposed to mean at a glance, so somthing literal and simple is always a good idea. I'm not a producer myself, so I can't judge what icons would make the most sense for this instance, but I'm sure you guys can work that out. We will probably want a little more space on that bar for legibility. I agree that using a tooltip is also a good idea. |
|
Hi guys, I just wanted to let you know that I've started a possible implementation of "artworkable" TabWidgets. I've a working PoC here: https://github.com/StCyr/lmms/tree/StCyr_ArtworkTabs Please tell me what you think about it. Regards, Cyrille |
|
Hi, I've updated my artwork tab PoC so that it can handle both pixmap and text tabs. It works as follow: 1* When given a pixmapName, TabWidget will draw an artwork tab using "pixmapName" PoC is here: https://github.com/StCyr/lmms/tree/StCyr_ArtworkTabs It seems that I failed to properly compile my previous commit. It will compile properly now. Please tell me what you think about it. Regards, Cyrille |
|
That sounds like a pretty grear way to implement it!
|
|
Cool, The problem now is that I'm really not a design guy. So, creating new artworks might be terrible. But, I can try. Anyway, I need new artworks to find out how to embed them in LMMS binary. So, I'll create (probably awful) new ones. Any idea for a good icon's size? Currently, the TabWidget for the "PLUGIN", "ENV/LFO", "FUNC",... tabs is 14 pixels tall, and 254 pixels large if I'm not mistaken. And, there are 6 tabs to be displayed. Cyrille |
|
Ok, so I've given a try with 14x28 icons. Here there are:
PoC has been updated: https://github.com/StCyr/lmms/tree/StCyr_ArtworkTabs PS: I told you they would be ugly ;-) |
|
But they show the concept (and I don't think they are ugly). Maybe if this should get integrated into the main version, some designers will create some? |
|
These are great. Mockup? |
|
@StCyr Actually, that is a great start. Maybe you have more designer in you than you thought ;) I wouldn't mind creating vector versions when I have a few minutes to spare, but I first need to know if the icons he attached make sense to everyone. |
|
Hi, Thanks for the compliment :-) @tresf : I'm not sure I understand what you mean (french native here). If this is the source images that you want, I've created them with gimp and can attach them here tomorrow CEST. But, too bad, I didn't bother using 2 layers to ease rework :-/ I'll also try to add tooltips; I doesn't look too complicated (http://doc.qt.io/qt-4.8/qt-widgets-tooltips-example.html) Cyrille |
Sorry, I meant a sample of these new icons in action (on the actual tabs on a sample instrument) 👍 |
|
Ah, ok. Sure, I can take a snapshot tomorrow also. Otherwise my branch https://github.com/StCyr/lmms/tree/StCyr_ArtworkTabs compiles and shows the artwork tabs in action :-) C. |
|
Here's a mockup where you can see TabWidget displaying both artwork and text tabs:
I'm up for improving them a little, but I guess I won't be able to do anything approching what @RebeccaDeField could do. |
|
The thicker lined fits better in row. |
|
I also prefer the thicker line |
|
👍 for the thicker one. |
|
👍 thicker one |
|
👍 thick |
1 similar comment
|
👍 thick |
|
Well, I guess that has been decided then :) Here is the download link --> https://www.dropbox.com/s/trd1ombn4kws03e/TabIcons.svg?dl=0 Looking at the screenshots, I can see that the bar is 14px including the borders. This makes it so that the 12px icons overlap the borders. The bar will probably need to be a few pixels (I'm guessing 2px) higher to compensate. |
|
This is waiting on a few items...
Once these items are completed, we'll be happy to merge and close this issue out. |
|
I believe it would make more sense if the plugin (instrument tab) icon was used for the FX plugin tab, and using the icon originally meant for the envelope tab for the instrument control tab. My reasoning is that the instrument tab controls the actual generation of the sound (sound wave/sine), while the FX tab adds plugins (puzzle piece) onto that source audio. Mockup: |
|
The white highlighting behind a selected tab still overlaps the tabbar about one pixel in height. Is this wanted? |
|
@claell no i isn't wanted. Where do you think it overlaps? At the top of the tabbar, that's it? |
|
If I zoom it to the highlighting behind the envelope icon the light grey space seems to overlap about 1px at the top and about 2px at the bottom. |
If no one is attached to that embossed background image, let's see what we can do with the larger tabs. Feel free to steal a pixel or two from the VOL/PAN/PITCH area. 👍 I'd even go as far as to ask @Umcaruje or @RebeccaDeField to assist here.
👍 |
|
I'll be glad to asist. I vote we get rid of the gradient. Gradients on such small surfaces take the clarity off. |
|
@StCyr Now it looks like the whole tab got smaller? At least some icons are overlapping it. But maybe this was already the case before the cange. I am also for increasing the tab size. And @Umcaruje if you think that gradients are not good on small surfaces, might it make sense to remove them from all those surfaces? Would need some rework of design, maybe one should give lmms a complete overhaul designwise. |
|
@claell I didn't change the tab's height yet; It was already the case. Hmm, the idea of changing the tab 'size was actually a little bit invasive 'cause TabWidgets are used at some other places too. For the record, here's the list of files were they may be in use: cyr@opennms-dev:~/lmms$ grep -Rl TabWidget src/ But, with my changes artwork tabs can be treated differently than text tabs. And, artworks tabs would currently only be used in "src/tracks/InstrumentTrack.cpp" (concern of this issue). So, I guess I can change only this tab's height and also only remove gradient from this tab. There was also this idea of @StakeoutPunch to change the icon for the plugin and fx tabs. I'm not in favor of changing the fx tab's icon as it has the same look as the "show/hide FX mixer" icon in LMMS' general toolbar. But, its reasoning for the plugin tab (the plugin tab is the sound source for the InstrumentTrack) actually makes sense. I'm not convinced though that the simple sine-wave icon is good enough. Earlier @Spekular also suggested an icon like the followings for this tab: Looking for "turbine" icons on google also returns interesting results: https://www.google.com/search?q=turbine&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiknt7ciZXLAhXH1xQKHTr6B-sQ_AUIBygB&biw=1680&bih=953#q=turbine&tbm=isch&tbs=isz:i |
|
I've updated my branch. TabWidgets with artwork tabs are now 17 pixels tall while TabWidgets with text tabs are kept to 14 pixels height. |
That's what we're doing in #2587 ;) And yes, I'll look into flattening all of those line things. |
|
@Umcaruje thanks for the link, did not know about this. |
|
Hello @tresf Your last request (25 Feb. in this issue) was to investigate the possibilty of having a larger (ie: taller) TabWidget for this specific toolbar. I made this in commits dccf9f4 and 7aad86e In addition:
By re-reading the discussion, it seems that 2 other requests might have been raised:
Cheers, Cyrille |
|
Reviewed the code, it looks ok to me, I made some remarks over magic numbers and the fact that the tab widget is not themeable using css, but one could argue that the themeablity is out of scope for that PR, but it would definitely be a nice thing to have. I haven't tested the branch yet though, I'll try to get around it, but can't make any promises :) But anyways, if those minor things get fixed, this looks good to be merged 👍 |
|
Oh and I just read that gradients are still there, I'll look into that too when I get around testing this. |
|
As I said, the highlighting of tabs doesn't have gradient. I'll have a look For what concerne the themeability, I don't have any idea how to do that. I'll look at your other remarks and address them eventually. Cheers, Cyrille 2016-04-26 23:32 GMT+02:00 Umcaruje [email protected]:
|
|
Closed via #3569 |
Hello,
I'm creating this issue in order to keep track of the discussions held about this problem.
I originally reported this problem in issue in #2519. In that issue, it as been considered as a translation issue and has been solved accordingly.
Though, not everybody agree about the real cause of this problem (me being the first tbh).
Here are the opinions that were exchanged on the IRC about this problem so far:
(2016/01/27)
15:48:03 - StCyr: bah I'll send you an updated fr translation
15:48:27 - StCyr: but why aren't these windows resizeable?
15:49:16 - StCyr: I understand it wouldn't probably be very nice when resized, but hey what a nightmare to see this tab
15:49:51 - umcaruje: its a bad idea to make the window resizeable
15:50:12 - umcaruje: its up to the translator to use abbrevation to keep the width small
15:51:00 - umcaruje: bad design, maybe, but it most probably won't change
15:51:26 - StCyr: when you say "bad idea" you mean "would become ugly"?
15:51:37 - StCyr: (that's not such a bad idea)
15:51:50 - StCyr: (well at least I can understand it)
15:54:20 - umcaruje: well, what would happen to the instrument GUI?
15:54:36 - umcaruje: we'd need to add padding, and it would get really really ugly
15:55:21 - umcaruje: so yeah, if we actually had 2 rows
15:55:48 - umcaruje: with 3 items of the same, constant width, that'd be better tbh
15:57:51 - StCyr: that maybe an easier (and perfectly valid) fix
15:59:45 - StCyr: well not easier than updating the translation, but more robust
15:59:50 - umcaruje: yeah
...
(2016/01/28)
16:38:26 - StCyr1: should some developer wanna have a look: https://github.com/StCyr/lmms/tree/StCyr_2ndRow
16:38:43 - StCyr1: (for a better solution to #2519)
16:51:03 - grejppi: StCyr1: tbh adding a second row feels like only treating a symptom and not the cause which is the tiny size of instrument windows
16:52:06 - grejppi: the piano roll toolbar was recently split into two rows and it looks absolutely hideous
16:54:55 - umcaruje: grejppi: I'm the cause of that lol
16:55:18 - umcaruje: I said that instruments windows shouldn't be resizeable
16:55:32 - umcaruje: since of the fixed size that the artwork has
16:55:38 - grejppi: well it wouldn't make sense because of that
16:55:48 - umcaruje: yeah
16:55:58 - umcaruje: so I said, if we actually had 2 rows
16:56:11 - umcaruje: where we had 3 buttons of the same width
16:56:16 - umcaruje: that could fix the problem
16:56:49 - grejppi: tabs on two rows is never a good thing
16:57:29 - umcaruje: but its not a problem in french only
17:14:55 - umcaruje: so StCyr1 I built your branch
17:15:57 - umcaruje: I don't really think this is a solution
17:16:06 - umcaruje: after seeing the extra space it adds
17:16:23 - grejppi: shrink the text size then? GENIUS
17:18:21 - grejppi: using abbreviations would probably the most sane thing to do
17:30:17 - Babbage_: icons
17:34:27 - Babbage_: plug icon, envelope icon with a wave for on int,
Fn,FXboth common in the world, 5 pin mini plug, and somethingThe text was updated successfully, but these errors were encountered: