Monogame: Pipeline Tool Windows look

[Jjagg]

@Linchy mentioned in a PR that the Pipeline Tool does not look as nice as it could because of inconsistent colors. I agree! :) It looks like the icons were scrapped together a bit and colors are quirky. I took a screenshot and added some remarks:

So IMO it's mostly the icons and the build indicators. Can't we use icons from the Visual Studio Image Library or other actual Windows icons (not sure about licensing but surely we should be able to use Windows icons)?

cc @cra0zy By the way, awesome job on the Linux version, it looks great! I also like the cogs with settings for the Build Output and Properties :) I think there are a bunch of open issues on the Pipeline Tool that you already fixed. I'll go through them in a while to see which can be closed.

[harry-cpp]

@Linchy mentioned in a PR that the Pipeline Tool does not look as nice as it could because of inconsistent colors. I agree! :)

If you want to do some per platform customization there are 2 files to be aware of:

• https://github.com/MonoGame/MonoGame/blob/develop/Tools/Pipeline/Styles.Windows.cs
  
  
  
  • contains per control customization, all that needs to be done is (ie,) call .Style="MainWindow" on control for it to take effect
  
  
• https://github.com/MonoGame/MonoGame/blob/develop/Tools/Pipeline/Global.Windows.cs
  
  
  
  • contains per platform functions
  
  

Not the same color

They are 2 different icons for 2 different things...

Really bright... Maybe icons would look better

Yea, icons would look better but we had none so I used what I could.

So dark

Menu icons don't have disabled colors... in WPF toolbar icons also don't have disabled color but I made a lazy opacity change code: https://github.com/MonoGame/MonoGame/blob/develop/Tools/Pipeline/Styles.Windows.cs#L42 you could probably do the same to menubar.

So IMO it's mostly the icons and the build indicators. Can't we use icons from the Visual Studio Image Library or other actual Windows icons (not sure about licensing but surely we should be able to use Windows icons)?

They can only be used on Windows, and I also remember their license being bad with open source stuff, that is you can't upload them to the GitHub at all.

On Linux I am loading system icons: https://github.com/MonoGame/MonoGame/blob/develop/Tools/Pipeline/Global.Linux.cs#L146 , the same can be done on Windows: https://github.com/MonoGame/MonoGame/blob/develop/Tools/Pipeline/Global.Windows.cs#L111

I think there are a bunch of open issues on the Pipeline Tool that you already fixed. I'll go through them in a while to see which can be closed.

Better leave that to me since I know what was fixed, with #5161 most of them will be fixed.

[Linchy]

For reference, my comment from the other PR:

Might I suggest using a colour palette tool for the indicators, so you get a more cohesive look and feel to the tool. This is a good one: http://paletton.com/#uid=51q1o0kAlhyriqAu6lyKHcTTC7w

Here is one I quickly made that gives a same distance adjacent red, green and yellow: http://paletton.com/palette.php?uid=51q1o0kutnjkbvmqVt3AwihMubI

To copy into code, just click on the colour on the right panel and a popup will come up with RGB values, which you can plonk into Color.FromArgb(140, 7, 0).

For some easy wins, you can play around with that palette selector and change the build colours to match. You could also edit those icons in paint.net/photoshop etc, and swap their current colour for something from the palette too.

Also the treeview explorer and property inspector are squished into smaller quadrants of the screen than they should be, and would suit being given more space to look less compacted. One idea could be to have a tabcontrol to switch between the build output and property inspector, so the explorer is free to take up the whole left side of the tool instead.

[energyuser]

Another thing I've noticed is the clean-up icon that has an inconsistent size compared to the other icons on the toolbar. They are all 16x16 pixels and consist of 2x2 pixels (even count). The bottom part of the clean-up icon contains 1x1 pixels (odd count). As a pixel artist I can notice such things and it's been bugging me out for a while. Here's how I imagine the icon should look:
It now has a consistent 16x16 size (instead of 16x15). I just made sure the bottom part contains 2 rows of 2x2 pixels instead of 1 row of 2x2 and 1 row of 1x1. Symmetry is golden when regarding to pixel art. If you can replace this it'd be nice @cra0zy and if you guys are in need of custom icons I may endeavor to draw some for you.

[harry-cpp]

if you guys are in need of custom icons I may endeavor to draw some for you.

We definitely need better icons for toolbar, the ones we are using were added by me in #4389 and they suck...

[Jjagg]

Also the treeview explorer and property inspector are squished into smaller quadrants of the screen than they should be, and would suit being given more space to look less compacted.

There's already an open issue for this #4942

[harry-cpp]

There's already an open issue for this #4942

Do note that there is a splitter that you can just move to expand after the app starts...

[Jjagg]

Do note that there is a splitter that you can just move to expand after the app starts...

Yes, but that issue is about the initial size.

I have to adjust the size of the left tool panel and/or the name/value splitter within the propertygrid every single time i launch the pipeline tool in order to have a usable amount of space to work with the value-column.

[energyuser]

Firstly, since most icons are 1x1 pixels I decided to follow that style instead of 2x2. These are the icons I have come up with so far, compiled all in a single file:

Notice that they all now have the same height. The icons on the first row are in order as you see them on the pipeline app's toolbar. The second row shows the build icons (build started/building/skipping/cancel build), which are currently squares with a single color. So with this out of the way I want to point out:
The idea behind the MonoGame logo shown on some of the icons came from my own confusion when I first opened the pipeline tool. There were multiple file/folder icons which confused @Jjagg as well. What I wanted to do with the MonoGame logo was to show that the first 3 icons in the above image are related to Content Project and NOT Content Assets. I think it is easier to understand that way. Secondly I edited the save icon and the add new/existing folder icons as well. I have left the gear icons the way they are because I like them. The only problem is I just can't come up with an idea for a clean icon (currently gray square)... I'll have to figure out something about it. I tried to keep color consistency as good as possible.

Btw. @cra0zy you may want to check the redo/undo code of the pipeline tool, I tried using that and the app crashed. Also if you have any concerns/suggestion about the icons just tell me.

[harry-cpp]

I see you were trying to mimic the current style, but the current style is bad, it's way too cartoony. I like the idea on making new/open and file/folder icons more distinguished but right now it may be even more confusing, a good way of doing it would probably be to redesign the file/folder icons and leave the new/open icons with the standard looking way.

You are missing some filter view stuff: https://github.com/MonoGame/MonoGame/tree/develop/Tools/Pipeline/Icons/Build

---

Too everyone on this thread: Besides icons, is there anything else that Windows Pipeline Tool should have changed look wise?

PS. I'll include toolbar progressbar in next PR

PPS. WinRT / UWP is horrible, you don't want that...

[Jjagg]

Too everyone on this thread: Besides icons, is there anything else that Windows Pipeline Tool should have changed look wise?

Aren't those three dots on the left of the toolbar supposed to indicate that you can drag it around? The cursor changes when you mouse over it to indicate that it's movable too, but it's not. Do you intend to make it draggable?

[energyuser]

Yeah I can redesign the current icons and add the filter ones but, define cartoony. You mean something less pixelated and more realistic, similar to (but not) Windows icons? Maybe something more rounded as opposed to sharp pixels @cra0zy ?
EDIT: Added missing filter icons, still have no idea what to draw for clean...

[harry-cpp]

Yeah I can redesign the current icons and add the filter ones but, define cartoony. You mean something less pixelated and more realistic, similar to (but not) Windows icons? Maybe something more rounded as opposed to sharp pixels @cra0zy ?

Everything you just said sounds so perfect... O o

[energyuser]

I'll see what I can do on that matter then...

[Jjagg]

@energyuser The icons also look cartoonish because of the highly saturated colors. Toning that down a bit will help too I expect.

[tomspilman]

@energyuser

I can't say what style they should be because I don't know how best to describe that. I would say if the icons look professional... something that would look natural in professional tools like VisualStudio or Xamarin Studio or Unity or Unreal or Photoshop, etc.

If they are just minor tweaks to the ones we currently have we have no interest in them.

It is hard say more than that. It is subjective... and @KonajuGames and I will make the call on if it is good enough. I hate saying no to people's work, but in this case we would have to.

[energyuser]

No problem, @tomspilman I'm a pixel artist and making the above ones took roughly an hour (more time thinking than drawing).

Ok, so I just compiled another icon pack (I didn't make them) but their license is not very descriptive. I contacted the creators to ask them whether the license applies to free software, such as MonoGame. This is the image:

Notice the differences between file/folder icons... Would that be clear enough to the end user?
Icons are in the same order as shown above, and if you think an icon doesn't fit with the rest and should be replaced there are other options as well. Just waiting for the creators to respond on my question.

[tomspilman]

Just waiting for the creators to respond on my question.

Yeah lets see what they say. We specifically didn't use the Microsoft icon packs because of licensing issues.

[theZMan]

What part of the license is bad? I'm no lawyer but it really doesn't seem very restrictive to me other than you must use Visual Studio to develop the product, which we do. VS is now happy to make android and VS Code runs on Macs..

"• Images. You may copy, distribute, and deploy the images in the Image Library in applications that you develop with the Visual Studio Family of products."

https://www.microsoft.com/en-us/download/details.aspx?id=35825

Also found this thread with a reply from a Microsoft legal guy https://connect.microsoft.com/VisualStudio/feedback/details/629031/visual-studio-image-library-license

[harry-cpp]

Problem is hosting the images on GitHub:

Distribution Requirements. For any Distributable Code you distribute, you must
add significant primary functionality to it in your programs;
require distributors and external end users to agree to terms that protect it at least as much as this agreement; 
display your valid copyright notice on your programs;

Distribution Restrictions. You may not

bla bla

oothers have the right to modify it.

[tomspilman]

@energyuser

But what do you think about the icons?

Can you list out what each icon is? It is hard to look at a row of icons and figure out if the image is appropriate to the functionality without knowing what each one is for.

[energyuser]

Wait, I just got word from the authors, they said this specific set of icons is for personal use only and gave me a link to similar icons with a different license and they look just as good. Assembling the image now (gonna put name next to each icon so you can understand better).

[theZMan]

In the Microsoft EULA

1. DISTRIBUTABLE CODE. The software contains code that you are permitted to distribute (“Distributable Code”)

Distributable code refers to code that comes with VS. It doesn't apply to images.

So this wouldn't seem to apply to the images.

c. Distribution Restrictions. You may not use Microsoft’s trademarks in your applications’ names or branding in a way that suggests your applications come from or are endorsed by Microsoft; or modify or distribute the source code of any Distributable Code so that any part of it becomes subject to an Excluded License. An Excluded License is one that requires, as a condition of use, modification or distribution, that (i) the code be disclosed or distributed in source code form; or (ii) others have the right to modify it.

This is the only rule about the images

a. Right to Use and Distribute.
• Images. You may copy, distribute, and deploy the images in the Image Library in applications that you develop with the Visual Studio Family of products.

[energyuser]

EDIT: Can't believe I miss-spelled "skipping"...
Waiting for opinions @tomspilman @KonajuGames . How comfortable are you guys with giving credit to the author? Because that's the condition of using these icons for free. Maybe something among the lines of:

Icons made by Madebyoliver from www.flaticon.com is licensed by CC 3.0 BY

Perhaps put this on the "about" form?

[harry-cpp]

Since it turned out we can use the VS icons, maybe we should just use them?

Would anyone want me to try and apply this theme to the Pipeline Tool?

[tomspilman]

Since it turned out we can use the VS icons, maybe we should just use them?

So the confusion came from our previous investigation of this in which we only looked at the VS2012 icon license. It said that "You may not ... distribute Distributable Code to run on a platform other than Microsoft operating systems, run-time technologies or application platforms". That suggested we couldn't use them.

However the VS2015 and the VS2013 icon packages licenses doesn't say this.

So I guess we can use icons from the VS2015 or VS2013 packages safely if we wanted to use them.

Would anyone want me to try and apply this theme to the Pipeline Tool?

Maybe... i'll let @KonajuGames make that call. What I don't want is to support multiple themes or make the tool feel non-Windows.

[jamesford42]

Please please use the visual studio image library. It would look sooooo good.

I suggested this quite a long time ago. I am 100% sure there is not a legal problem, this is in fact what they are for. The only real requirement is that you use the icon's for their appropriate function. That is, you use the icon designed to mean 'save' for the button that saves, and not the button that loads.

[ghost]

One thing that annoyed me the most when i used the Content Pipeline Tool was how big the build output was

I wanted to manage my assets, and the panel to manage them was the smallest one

I think the build output should be an hiddeable dock at the bottom

And the properties panel should be at the right, to mimic visual studio

Also, why not something new? a render panel just in the middle, like this:

It would make the content pipeline tool a bit more usefull since it could be used to check/test assets

[harry-cpp]

@Scellow I will be adding a way to setup custom layouts, I already did the ground work with #5156. As for the Preview tab, do open a separate issue about it.

[harry-cpp]

New icons PR is ready: #5183

[tomspilman]

The original issue in this thread was solved by #5183, so going to close this.