How to change color of GUI components - user-interface

I am trying following demo code of fyne:
package main
import (
"fyne.io/fyne/app"
"fyne.io/fyne/widget"
)
func main() {
a := app.New()
w := a.NewWindow("Hello")
w.SetContent(
widget.NewVBox(
widget.NewLabel("Hello Fyne!"),
widget.NewButton("Quit", func(){a.Quit()} ),
),
)
w.ShowAndRun()
}
It runs all right but I want to change color of label to blue and that of button to green. I see there is theme but that seems to be for entire application and not for individual elements.
How can different colors be applied to different GUI components? Thanks for your help.

That was proposed in fyne-io/fyne issue 255
I propose individual styles assignable to widgets:
But:
Part of our design is to promote application consistency - a user experience that cannot be trivially compromised by "this label is larger" or "this dropdown is transparent".
Fyne's approach to this is that widgets have a set style (that can be themed) but the canvas remains fully available to do whatever specific designs a developer chooses to code.
So there is no native support to change the color of an individual button.
Andy Williams, author/main contributor of fyne-io/fyne, adds in the comments:
This is quite correct.
The only way to have a widget that is is styled differently to the standard colours is to implement a custom widget and add that functionality yourself.
There are, however, some semantic styles, a button can be “primary, for example, in which case it will use the theme highlight color

As the standard widgets in Fyne do not support customisation there is no short answer to this (other than we don't advise it).
If you have to do this, for some valid reason that your users require, then you should look at our developer documentation which has a brief introduction to writing custom widgets. However we aim to make this process easier in release 1.2 later this year.
Just to re-iterate comments above the Fyne toolkit is aiming to create a consistent user experience that is simple and fast to program. Every time you create a custom widget so that you can have custom colours or styles you may be confusing your user and you will be making it much harder to maintain the code.

Related

What's the closest widget to implement this after-effects feature in Gtk

wisgetwas wondering what widget in gtk (using gtkmm) could be used to implemented the movable button looking thing in the picture. and also the dotted line.
dotted line
edit: the widget is supposed to be able to move left and right along the time-track to be able to set the play bounds. Here is a video showing how it looks like in after effects. From sescond 37 is how the behaviour for it supposed to be. https://www.youtube.com/watch?v=QxXevteeumg
edit: from what it looks like there isnt a specific widget which could simplify this. However a regular button can be used and then implementing a method for its drage using the various signal handlers associated with a Gtk button
There is no widget that does this (see the widget gallery).
You can, however, add custom widgets using Cairo. In the official Gtkmm book, there is an example for creating a custom clock widget using the Gtk::DrawingArea. The Gtk::DrawingArea offers a lot of signals which you can connect to.
I have created my own widgets in the past using this and it worked just fine. However, it was a lot of work because:
Cairo lacks good documentation. Understanding the philosophy behind this library is a lot of work, often empirical.
It can be hard to acheive acceptable performance using Cairo. One has to be really careful in how the drawing of the widget is performed. There is often a naive way to do it, which is clearer in the code, but devastating in terms of performance (it often involves useless redraws on the CPU).

Actionscript 3 - generating user created UI components

I'm creating a library of UI elements, and I want the graphics to be custom. At first, I was going to draw everything with code, and take properties such as "background-base-color", "background-gradient-color", etc. I was concerned that the user would need to modify too many properties and might get confused. I eventually talked myself into using external graphics, such as button_top_left_over.png and etc. Now I'm back and forth. I want people to easily be able to change the skin, so my options are, have them create external graphic libraries, or have them update properties in a front end that would write to XML, such as background-base-color, background-base-highlight,etc. Anyone have experience with this, and can offer advise?
You may "guess" gradients by a given single color, and it should fit in the most of the cases. Here is an algorithm: ColorUtil.as
Customizing components is a common problem. The user shouldn't need to step that deep into the implementation but we sill want a maximum of flexibility. For that, I have created a CSS framework: Jakute Styling Engine. Using Jakute you may set up your component using states.
Instead of declaring tons of properties for each state:
Button top_left_over: red.png
Button top_left_down: blue.png
Button top_left_disabled_over: grey.png
With Jakute you may specify stateful rules:
Button:over top_left: red.png
Button:down top_left: blue.png
Button:disabled:over top_left: blue.png
In this case the user only needs to know the list of button states and the single property "top_left". The styles can be loaded from an external style sheet or directly set to the component.
Finally, here is an example that shows you how to create a stateful styleable component: States Example. Even if you are not plan to incorporate Jakute, you might get an idea of how others create such components. :-)

Guidelines for application colors (background, buttons, etc.) on Windows?

What are the recommended colors for an application's background, button faces, etc.?
In the past I've just chosen a color scheme but I'd like to be more compatible with the Windows Accessibility Options, etc.
I see that VB6 has System Colors like Application Workspace.
Edit: I'd like to find an explanation of all of those colors (like what's the difference between Application Workspace and Window Background?
In my opinion, you should leave the colors as they are if you are using standard controls; they'll get the right color according to che current color scheme by themselves. You need to use the color constants only if you have to draw your own UI elements; in that case, the meaning of those constants is explained briefly in their documentation.
This PDF http://www.johnsmiley.com/cis18/Smiley009.pdf [ explanation of VB6 System Color values ]should help you. It lists all the system color constants and what they mean. For instance vbApplicationWorkspace is the "Background color of multipledocument interface (MDI) applications."
If you're interested in the whole MS Windows UI/UX guidelines, they are available online here and for download here. Page 618 deals with how to "Use theme or system Colors"
It depends on the language and framework you use. .Net for example has an entire SystemColors class full of static properties like SystemColors.Control that are 'changed' to the corresponding system color in runtime.
I think most office applications conform to the system colors, while most graphics intensive applications (e.g. games) use their own color scheme.
It is best if you try to use the colors of the current system (like the .NET SystemColors), that way if the user changes his settings (for example if he uses a high-contrast color scheme or some fancy black theme he likes) your application will adapt those colors and that way conforms to the users preferences/needs.

Best language for quickly creating user interfaces without drag and drop? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I'm a blind college student who is taking an introduction to programming class that focuses on user interface design. The class is using Processing, which is completely inaccessible. I'm looking for a language that will allow me to create GUI's without drag and drop and hopefully be smart enough to do most of the layout without forcing me to specify control positions in pixels.
I know Perl, Java, C/C++, c#, and HTML. I was considering creating HTA applications. My only requirements are that the language must run under MS Windows, and must not use SWING or GTK as the underlying toolkit.
I would say that xaml would be a good choice:
Pixel manipulation is not needed
Item functionality in code behind
Can add pixels changing for control
later on
There is a lot of documentation on
how to use it
Maybe if you give us an idea of what you will need the language for we can give you better suggestions.
Speaking as a blind programmer:
C# + WinForms: You can either create the code by hand and use layout managers or calculate the sizes in your head, or if you're using the JAWS screen reader then there are scripts which will help you in the WinForms designer.
C# + WPF: Here you define your UI in XML, but it is more complex to get your head around. Certainly look at this as it is a very nice solution. the other problem with WPF at the moment is that not all screen readers support this newer technology.
Jamal Mazrui at www.EmpowermentZone.com has created something called "Layout By Code", but I have no experience with this.
HTML+Javascript would be nice, but I doubt it'd be allowed in your course.
WXWidgets: I don't have a lot of experience with this cross-platform, multi-language UI toolkit, but I believe it has layout managers and is thus used by several blind programmers I know.
Finally, I used to design Win32 resource scripts by hand, calculating sizes in my head (no layout managers). This is certainly achievable if you wanted to take this route.
In summary, WPF's nice, but make sure your screen reader works with this kind of app. The next best alternative is probably WinForms. If you like Layout By Code then use it, but if this is a skill you want for employment, then keep that in mind.
take a look on XAML. I think it could be a good start for both modern Windows and Web UI creators.
Tcl/Tk will do exactly what you want. The pack and grid layout managers are based on logical relative placement of the widgets.
Although the "native" language of Tk is Tcl, many other languages have a Tk binding.
label .l -text "this is a label"
button .b -text 'quit' -command "exit"
pack .l .b
Check out this project on codeplex. It may help you (as an alternative to processing&java)
http://bling.codeplex.com/
ling is a C#-based library for easily programming images, animations, interactions, and visualizations on Microsoft's WPF/.NET. Bling is oriented towards design technologists, i.e., designers who sometimes program, to aid in the rapid prototyping of rich UI design ideas. Students, artists, researchers, and hobbyists will also find Bling useful as a tool for quickly expressing ideas or visualizations. Bling's APIs and constructs are optimized for the fast programming of throw away code as opposed to the careful programming of production code.
Bling as the following features that aid in the rapid prototyping of rich UIs:
* Declarative constraints that maintain dynamic relationships in the UI without the need for complex event handling. For example, button.Width = 100 - slider.Value causes button to shrink as the slider thumb is moved to the right, or grow as it is moved to the left. Constraints have many benefits: they allow rich custom layouts to be expressed with very little code, they are easy animate, and they support UIs with lots of dynamic behavior.
* Simplified animation with one line of code. For example, button.Left.Animate.Duration(500).To = label.Right will cause button to move to the right of label in 500 milliseconds.
* Pixel shader effects without the need to write HLSL code or boilerplate code! For example, canvas.CustomEffect = (input, uv) => new ColorBl(new Point3DBl(1,1,1) - input[uv].ScRGB, input[uv].ScA); defines and installs a pixel shader on a canvas that inverts the canvas's colors. Pixel shading in Bling takes advantage of your graphics card to create rich, pixel-level effects.
* Support for multi-pass bitmap effects such as diffuse lighting.
* An experimental UI physics engine for integrating physics into user interfaces! The physics supported by Bling is flexible, controllable, and easy to program.
* Support for 2.5D lighting.
* A rich library of geometry routines; e.g., finding where two lines intersect, the base of a triangle, the area of triangle, or a point on Bezier curve. These routines are compatible with all of Bling's features; e.g., they can be used in express constraints, pixel shaders, or physical constraints. Bling also provides a rich API for manipulating angles in both degrees and radians.
* And many smaller things; e.g., a frame-based background animation manager and slide presentation system.
* As a lightweight wrapper around WPF, Bling code is completely compatible with conventional WPF code written in C#, XAML, or other .NET languages.
Bling is an open source project created by Sean McDirmid and friends to aid in design rapid prototyping. We used Bling to enhance our productivity and would like to share it with other WPF UI design prototypers.
I'd probably try using C#. It has reasonably friendly interfaces to windows common controls and the like even without making use of Drag and Drop. Just don't make use of the designer and code as normal.
I don't program in Java but I know that Java provides for the programmatic creation of the UI AND provides some wonderful Layout Management components (Native to Java without requiring SWING). I first got exposed to Layout Managers back in the good-old-days of X11 with X Toolkits (anybody remember Motif, OpenLook, HP Open View?) and Java seems to have adopted similar technology.
You can create Windows, Dialogs and Menus all from simple layout managers.
Being sighted myself and not having worked too closely on anything that has ever been audited for accessibility or heavily accessed by blind users, I don't think my answer will be terribly thorough. My first instinct however is to say that some kind of dynamic web server architecture that generates HTML like C#, PHP or ColdFusion is going to fit your description of handling most of the layout for you without requiring that you specify control positions in pixels. There certainly is the availability to specify control positions in pixels via CSS, but it's not required. And I know HTML also has well defined standards for accessibility, whereas I'm not sure what the status is on accessibility standards with other kinds of software.
You could use javascript and html. There's a port of processing to javascript, so you know that it is powerful enough for the things that your class will cover. You can author html without knowing a single thing about what it looks like. In fact that is the preferred way to author html.
The main downside of javascript is not javascript itself, but the browser dom. That is the interface into controlling the html elements. However, a library like jquery, or mootools, or dojo can take care of most of those problems.
As for accessiblity, have a look at WAI ARIA also opera's intro to WAI ARIA.a
WAI ARIA is a way to build rich javascript applications while playing nice with screen readers. It's very cool. I've not seen more work and passion put into making the web stack accessible in any other programming stack.

User Interfaces - Colors and Layout

Although I'm specifically interested in web application information, I would also be somewhat curious about desktop application development as well. This question is driven by my work on my personal website as well as my job, where I have developed a few features, but left it to others to integrate into the look and feel of the site.
Are there any guides or rules of thumb for things like color schemes, layouts, formatting, etc? I want to ensure readability and clarity for visitors, but not be bland and dull at the same time.
As for my knowledge in this area - If you hand me a picture, I have enough knowledge to reproduce it on the screen, but if you ask me to design a new interface or redesign an existing one, I wouldn't know where to begin.
Usually, each operating System has user Interface Guidelines. For Windows, have a look here. (Edit: The links in that post are broken. But a Search for "User Interface Guidelines" on MSDN has articles about everything)
Apple has it's own as well. Also, you may want to keep accessibility in mind.
One tip to check if your colors have good contrast is taking a snapshot of it and converting to grayscale. If you can't read something, colors were surely bad choosen.
Plus, although it's not about user interfaces, Before & After Magazine can give you some pretty good hints about color, design and related topics. It even has got some free pdf's to download.
The book Designing Interfaces, by Jenifer Tidwell has a entire chapter on the subject (Chapter 9, excerpts accesible online).
The entire book is worth recommending.
For web UI, I'm going to go out on a limb here and say that the most important color in web design is white, or "light". This is the color on top of which you place dense tracts of content.
Dark text, light background, always, when it comes to your primary content areas.
And the most important rule in layouting is whitespace. Let the content breathe.
Following these two simple rules is worth more than most "user interface usability" guidelines.
And by the way, the MS user interface guidelines are (by and large) horrible. Read Jakob Nielsen, look at Apple design aesthetics, but stay away from the MS "neutral gray/blue crunchbox" 12-step Wizard 10pt text philosophy of UI.
(And I say that as a long-time MS GUI programmer)
I'm horrible at finding colors that look good together, so I cheat and use pictures from nature that are mostly the color I want (say, green) and then I use this website to pull out the main color scheme. Generally nature does a pretty good job of setting its own nice color schemes.
Use high contrast color combos; Black text on white background is the best example of a high contrast combo.
A bad combo is green text on red background. It's horrible for color blind people (like myself).
See what your site looks like to a color blind person: colorfilter.wickline.org
As for desktop applications: Whatever you do, do not use hand-picked colors. Stick with the named system colors such as "Window Background", "Menu Text", etc. Otherwise, people relying on OS accessibility features will be locked with your color choices (unable to choose a high-contrast theme, for instance) and to people who like to customize their desktop themes will think your application is fugly.
Here are some simple pointers for usability in your typography. These things mainly address readability and accessibility concerns.
DOs:
Use relative font sizing (em)
Identify language changes within a document using the LANG attribute
Black text on a white background
For headings, use H1, H2, etc. and nest them appropriately
Chunk up content and organize with headings that fit what your users are looking for
Write clear and simple copy
Align left, ragged right
Text-to-background color must be high contrast
DONTs:
Use "click here" or "more" as link text
Use underline for emphasis
More than 2 font-type families
Italics
Blocks of text using all caps
Use true red or true blue text on white background (chromatic aberration)

Resources