Set color of Graph with uisetcolor

Hi Guys,

I have a small Problem in Appdesigner. I got a DropDownMenu which where I can choose different Options for a Graph. Now I want that the user of the App can choose the colors for the different DropDown Options. I created a Tab in my app with a DropDown Menu with the same Options and Properties as the one for the Graph and now want that if you choose your Option you can open the Color Picker to choose your color.

So far:

function farbauswahl(app)

for i = app.R.(app.FarbauswahlDropDown.Value(3:14))

Farben(i,:)=uisetcolor;

end

end

This is my Error:

Error using matlab_projekt2_0/FarbeAuswhlenButtonPushed

Index exceeds the number of array elements. Index must not exceed 1.

I don´t really understand what the Error means, neither how to solve it.

Maybe I have the wrong approach?

Thank you

[Voss]

First, is the function you call "farbauswahl" here actually called "FarbeAuswhlenButtonPushed" in your code?

Second, what is the value of app.FarbauswahlDropDown.Value when the error happens? Maybe set a break point and find out.

[Frank]

No, "FarbeAuswhlenButtonPushed" is a button that opens the color picker. Which I can use now after writing

function FarbeAuswhlenButtonPushed(app, event)

uisetcolor(app.meine_farben);

But, question is how do I now link the different colors to the different values in my drop down menu?

I tried it like this:

b1 = bar(app.UIAxes,app.R.DatumUhrzeit,app.R.(app.EnergietrgerDropDown.Value));

for i = 1:1

b1(i).FaceColor = app.meine_farben(i,:);

end

and the property "meine_farben" is just a color matrix

app.meine_farben = [0 0 5

1 0 1

0 0 1

2 0 0

2 0 1

0 0 2

3 0 0

3 0 1

0 0 3

4 0 0

4 0 1

0 0 4];

I think I lack communication between the different parts? The thought was to "link" the first row of the color matrix to the first option in the DropDown Menu. And than being able to change color via the button "FarbeAuswhlenButtonPushed", opening the color picker.

[Voss]

I guess I was confused because the error was in FarbeAuswhlenButtonPushed, but you shared the code for farbauswahl.

Answer 1

[Voss]

I'm not sure which dropdown menu should be linked to the color matrix, so I call it app.DropDown.

This assumes the color matrix app.meine_farben is already populated (otherwise you'll potentially get rows of zeros):

function FarbeAuswhlenButtonPushed(app, event)
    
    new_color = uisetcolor();
    
    if isequal(new_color,0) % User didn't pick a color
        return
    end
    
    idx = find(strcmp(app.DropDown.Items,app.DropDown.Value),1);
    
    app.meine_farben(idx,:) = new_color;
    
end

I'm also not sure how [0 0 5] is a color, or [3 0 1], etc. Usually RGB colors are between 0 and 1 in each channel (or between 0 and 255, etc., depending on the class). Are those on a 0 to 255 scale? If so they're all so close to [0 0 0] as to be basically indistinguishable from black.

[Frank]

Well, I thought I doesnt really matter which colors they are because they are going to get changed anyway.

with:

app.meine_farben(idx,:) = new_color;

I get the error:

Unable to perform

assignment because the

indices on the left side

are not compatible with

the size of the right

side.

Is that because my DropDown Menu includes more coloumns and I only choose one new color?

Thank you very much for helping :)

[Voss]

Set a breakpoint on that line and check the values/sizes of app.meine_farben (which should be an n-by-3 matrix), idx (should be a scalar), and new_color (should be a 1-by-3 vector).

"Is that because my DropDown Menu includes more coloumns and I only choose one new color?"

• I don't think so; idx should be a scalar, and you're setting only one row of app.meine_farben to the new color. One color at a time <-> one row at a time.

Oh, I also meant to say in my answer: you may consider using the dropdown menu's ItemsData property to store the colors, rather than the separate app property app.meine_farben. It may make some things more convenient.

https://www.mathworks.com/help/matlab/ref/matlab.ui.control.dropdown-properties.html

[Frank]

ok,

app.meine_farben is an empty 0x0 double

idx is an 1x0 empty double row vector

and new_color is an 1x3 double

Guess something went wrong there.. Why is app.meine_farben empty when I before wrote the color matrix? Do I have to put the app.meine_farben = [0 0 0 ....(and so on)] in the function "function FarbeAuswhlenButtonPushed(app, event)" aswell? right now its still in the function "farbauswahl(app)"

Dont really know whats going on with idx.

You are my hero, thank you :)

[Voss]

"Do I have to put the app.meine_farben = [0 0 0 ....(and so on)] in the function "function FarbeAuswhlenButtonPushed(app, event)" aswell? right now its still in the function "farbauswahl(app)""

• No, you don't have to put it in FarbeAuswhlenButtonPushed, but it probably doesn't belong in farbauswahl either. app.meine_farben should be initialized in your startupFcn.
• And also make sure that meine_farben is declared as an app property at the top of your app (where you see "properties"), so that it can be seen by all the functions that use it or set it. https://www.mathworks.com/help/matlab/creating_guis/share-data-across-callbacks-in-app-designer.html

As for why idx is empty, check the values of app.DropDown.Items and app.DropDown.Value. It appears that Value is not an element of Items somehow, or maybe Items is empty.

[Frank]

I alread had meine_farben as a property and the values of app.FarbauswahlDropDown.Items and app.FarbauswahlDropDown.Value seemt to be right?

They seem to have the data they should and also the drop down menu named the options right.

For

app.meine_farben(idx,:) = new_color;

I get:

Unable to perform assignment because the size of the left side is 0-by-3 and the size of the right side is 1-by-3.

Is that because the left part is adressing the idx, which in my case is still 1x0?

So the problem is in the variable idx which for some reason doesnt gets the data from the dropdown as it is supposed? Do i have to adress the the .csv-file where the app.FarbauswahlDropDown.Items gets the values?

Like I have a function before where I read in a csv-file in a Property (R) where all the data in the app comes from.

app.FarbauswahlDropDown.Items = app.R.Properties.VariableNames(3:14);

app.FarbauswahlDropDown.ItemsData = 3:14;

app.FarbauswahlDropDown.Value = 3;

Stuff is getting more confusing, I´m way in over my Matlab-Head haha

Thank you :)

[Voss]

OK. I didn't realize you were using ItemsData (in which case Value can be an element of ItemsData and doesn't have to be an element of Items). In that case, try this:

function FarbeAuswhlenButtonPushed(app, event)
    
    new_color = uisetcolor();
    
    if isequal(new_color,0) % User didn't pick a color
        return
    end
    
    idx = find(app.DropDown.ItemsData == app.DropDown.Value,1);
    
    app.meine_farben(idx,:) = new_color;
    
end

That may fix the empty idx problem, but it doesn't address the empty app.meine_farben problem.

[Frank]

So I dont get an Error anymore and the app.meine_farben is not empty anymore, its an 12x3 double.

Changing the color in the colorpicker doesnt affect the graph however, I guess its because I need to change the settings in the graph?

b1= bar(app.UIAxes,app.R.DatumUhrzeit,app.R.(app.EnergietrgerDropDown.Value));

for i = 1:1

b1(i).FaceColor = app.meine_farben(i,:);

end

This approach didnt really help.

Does the uisetcolor change the values in the color matrix now?

Thank you! :)

[Frank]

I dont really get how the uisetcolor changes the color in the code you sent me? Because every value from the dropdown is automaticly linked to a a color? But how does the code know which line of the color matrix to adress?

[Voss]

"I guess its because I need to change the settings in the graph?"

Yes, you would need to apply the new color(s) to whatever they should be applied to. If that's a bar graph, you probably want to apply the different colors to each bar (for i = 1:numel(b1)), instead of just the first bar (for i = 1:1).

And it's best to create the bar graph once, and just update the colors when necessary, rather than creating the whole bar graph again whenever a color is selected. This would involve storing the handle(s) to the bar graph (b1), say as an app property such as "app.b1".

"how does the code know which line of the color matrix to adress?"

function FarbeAuswhlenButtonPushed(app, event)

new_color = uisetcolor();

if isequal(new_color,0) % User didn't pick a color
    return
end

% the row in the color matrix is the index of Value in ItemsData (since
% Value is an element of ItemsData):
idx = find(app.DropDown.ItemsData == app.DropDown.Value,1);

app.meine_farben(idx,:) = new_color;

end

[Frank]

But the idx doesnt exist anymore?

new_color = uisetcolor();

if isequal(new_color,0) % User didn't pick a color

return

end

app.meine_farben(app.FarbauswahlDropDown.Value,:) = new_color;

this is the code right now? Or did I get something wrong?

Color still doesnt change after picking another color :/

Still, you are quite a matlab genius, knowing this stuff with just the few lines of code I gave you.

Thanks :)

[Voss]

I made a mistake in a previous comment, which I later corrected. Please check the code there again. idx should exist.

Also, the push button callback for selecting a color only stores that new color in the color matrix; you still have to update the bar color, as I said in a previous comment.

[Frank]

Ok, so

uisetcolor(app.meine_farben);

new_color = uisetcolor();

if isequal(new_color,0)

return

end

idx = find(app.FarbauswahlDropDown.ItemsData == app.FarbauswahlDropDown.Value,1);

app.meine_farben(idx,:) = new_color;

should be the function for the colors, and

app.b1= bar(app.UIAxes,app.R.DatumUhrzeit,app.R.(app.EnergietrgerDropDown.Value));

for i=1:numel(app.b1)

app.b1(i).FaceColor = app.meine_farben(i,:);

end

should acces the color matrix? I added b1 as a property.

When I change the colors with the color picker and look into the value of the color Matrix, the values do change. So changing the colors via the drop down menu works, I guess there is just a mistake in the plotting?

Thanks again!

[Voss]

Well, you have to make the colors take effect on the bars. The code you show, setting a bar's FaceColor to a row of app.meine_farben presumably works to set the bars' colors to the existing app.meine_farben, but when app.meine_farben changes, you have to do something to make that change take effect. So either (1) delete and re-create the bars whenever a color is selected, or (2) better, create the bars once and update their colors when a color is selected.

[Frank]

Ok, thank you! :) I´ll let you know if it worked!

Thanks for taking the time, you really helped me out here!