• The tabs need to be attractive and look like tabs, not like buttons with panels
• The tabs need to have been drawn using the editor GUIDE so that the contents of the tab panel can be easily edited
• The tabs can be easily added and removed without significant code additions. They must be simple to use in different projects and tasks

The sophisticated user of Matlab might think that this is a trivial objective, seeing as there are numerous solutions for this problem in the Matlab Exchange and since Matlab R2014b, it supports creating native tabs with the help of uitab and uitabgroup functions. Also, with the addition of App Designer, it might appear that this issue will be solved with the new interface for GUI creation; tabs can be created right in the editor. However, in this post, we will attempt to explain why none of the methods above fit the three criteria stated and we will present our own solution for the tabs.
Regardless of the fact that we only took on the problem in 2013, when we first started creating our WFAToolbox, at the moment of writing this article (January 2016), this problem is still a relevant issue for many Matlab users. After the release of R2016a, it is doubtful the problem will be entirely solved. This is why we created our own example of a code which we have released on the Matlab File Exchange (see below).

Tab-enabled WFAToolbox (Matlab app for algorithmic trading)

1. The tabs have to look like tabs

When we created WFAToolbox, our goal was to create an application which would allow everyone interested to create a strategy for trading on the financial markets to be able to do so, along with having the opportunity to use the full potential of Matlab and its progressive tools, including genetic algorithms, parallel computing, econometrics, neural networks, and much, much more (basically, any data analysis that can be done in Matlab). At the same time, we do not want our users to spend time on developing an advanced software environment for testing, analysis, and strategy execution, but rather to do it from an easy-to use GUI. Thus, in WFAToolbox, you can create, test, and, finally, launch your own trading strategy or test a hypothesis within minutes, even with little prior knowledge of Matlab programming.
Of course, in order to fit these features into a single application, guarantee that it would be easy to understand even by beginners, and that it would be simple to operate, it was necessary to pay special attention to the graphic interface. In our opinion, perhaps the most intelligent solution for placing the many controls and functions necessary for sophisticated applications is by creating tabs. Because we knew that we were not the only ones who thought this way, we started looking for examples of codes that were previously created in the Matlab Exchange. We were very surprised when we found only a few solutions, most of which did not even match our first criteria of tab attractiveness! Unfortunately, a majority of them were old and quite unattractive (they looked more like buttons with panels). Even the new App Designer has tabs that in our eyes look more like buttons than tabs.
Having tried a lot of these utilities in our test versions, we came to the conclusion that Tab Panel Constructor v.2.8 would be the best option for us. It fits all three criteria above. In 2013, we used it quite successfully in our first versions of WFAToolbox. Everything looked great, but, unfortunately, it later turned out that the problem was far from being solved.

Tab-enabled WFAToolbox (Matlab app for algorithmic trading)

2. The tabs need to be created through GUIDE

Unfortunately, with time, it turned out that with the newer version of Matlab it didn’t work smoothly and the code we wanted to use as our solution practically fell apart in front of us. After adding a couple of elements in GUI, partial formatting was lost and we had to redo everything. The process of adding the tags created a lot of bugs which needed to be solved immediately.
In 2014, we already had more than 500 clients using our application. We started hearing, more and more often, that it would be great if the colors and locations of the tabs could be changed. It turned out that, depending on the operating system and Matlab version, the tab format changes. So, we made the decision to change our tabs.
By that time, a new version of Matlab was released, R2014b. It allowed us to build tabs with the help of the uitabgroup and uitab functions. The results looked exactly how we wanted: attractive, pleasant, and appeared like real tabs: UI With Tab Panel in Matlab R2014b. However, we were discouraged that they could not be created in GUIDE!
During that time, we were developing a module for WFAToolbox which would allow users to download data from Google Finance: 10,000+ free daily and intraday quotes from 20+ exchanges. Tabs were the easiest to use when switching between downloading free data from Google Finance and downloading custom user data from the Matlab Workspace. But entering so many elements through code and not through an editor? What will happen when we add 100,000+ free historical data from Yahoo Finance for futures, bonds, currency, stocks and others? We didn’t want to create all of this without the GUIDE editor! This is why we came to the conclusion that it is necessary for us to create a code of tabs, starting from scratch, so that they would correspond with all three of our criteria.

Tab-enabled WFAToolbox (Matlab app for algorithmic trading)

3. The tabs should be easy to add and edit

We chose the Simple Tab Panel, which has existed in the Matlab File Exchange since 2007, as a base for our new code because we considered it to be the most elegant and attractive example of GUIDE tabs. This solution fit our first two criteria, but we really wanted it to be universal and easy to use. We also wanted to have a simplified process of tab addition and deletion so that instead of having to copy and rewrite a large amount of code and other details, we could just add a single line of code. We wanted to save on labor costs, because we often add new features to WFAToolbox and this includes having to constantly add new elements to existing tabs, as well as adding new tabs.
So, we rewrote the code and created our own universal example so that everyone could use it to their advantage. We uploaded the code to the Matlab File Exchange, where it can be freely downloaded: Simple Optimized GUI Tab.
Next, we will describe how to use this code for tab addition and how to use the process for the implementation of tasks.

1. Open GUIDE and apply uipanel and uitext in a way that will make uipanel easier to work with in the future, and place uitext in a place where the tab switch will be located.
2. Rename the Tag of the uitext to [‘tab’,N,’text’], where N is the tab index. In our example, we are creating the 3rd tab, so our tag would be ‘tab3text’. Using this same principle, [‘tab’,N,’Panel’] needs to be renamed to tag of uipanel in the ‘tab3Panel’.
3. Add the name of the new tab to the TabNames variable. In our example, we use ‘Tab3’ (but you can use any name).

TabNames = {'Tab 1','Tab 2','Tab3'};

How the code was created

The primary principle of how our code works is that we create the uipanel and uitext objects in GUIDE, then we take the uitext coordinates and replace the objects to the axes and text objects. We assign a callback function to them which works when the object is clicked on. The function makes the uipanels visible/invisible and changes the colors of tab.
Let’s look at the function code SimpleOptimizedTabs2.m, which is part of the Simple Optimized GUI Tab submission.

1. Tab settings

% Settings
TabFontSize = 10;
TabNames = {'Tab 1','Tab 2'};
FigWidth = 0.265;

If we change the parameters under Settings, we can control the appearance of our GUI and tabs. So, the parameter of TabFontSize changes the font size on the tab switch, and, with the help of TabNames we can rename or add tab names, and with FigWidth, we can determine the normalized width of the GUI.

2. Changing the figure width

% Figure resize
set(handles.SimpleOptimizedTab,'Units','normalized')
pos = get(handles. SimpleOptimizedTab, 'Position');
set(handles. SimpleOptimizedTab, 'Position', [pos(1) pos(2) FigWidth pos(4)])

The GUI width changes in the code because it isn’t comfortable to manually stretch and narrow the figure. It is more beneficial to see the contents of all tabs and work with them without having to change the width every time you make a small change. If you want to make your uipanels bigger than in the example, then do this with the GUIDE editor. However, don’t forget to change the FigWidth parameter.
Please note that, due to the peculiarities of the editor, you cannot narrow a figure by height without shifting tab locations. You can only do this if you are changing the width, so we only recommend adding tabs by increasing the width of the figure and not the length.

3. Creating tabs

Do the following for each tab: obtain the uitext coordinates, which we entered into the GUI panel, and position the axes and text using these coordinates (using the necessary settings of external apparel). Using the ButtonDownFcn parameter, we can link the callback function, called ClickOnTab, in order to switch tabs when clicking on the text or axes.

% Tabs Execution
handles = TabsFun(handles,TabFontSize,TabNames);
% --- TabsFun creates axes and text objects for tabs
function handles = TabsFun(handles,TabFontSize,TabNames)
% Set the colors indicating a selected/unselected tab
handles.selectedTabColor=get(handles.tab1Panel,'BackgroundColor');
handles.unselectedTabColor=handles.selectedTabColor-0.1;
% Create Tabs
TabsNumber = length(TabNames);
handles.TabsNumber = TabsNumber;
TabColor = handles.selectedTabColor;
for i = 1:TabsNumber
    n = num2str(i);
    % Get text objects position
    set(handles.(['tab',n,'text']),'Units','normalized')
    pos=get(handles.(['tab',n,'text']),'Position');
    % Create axes with callback function
    handles.(['a',n]) = axes('Units','normalized',...
                    'Box','on',...
                    'XTick',[],...
                    'YTick',[],...
                    'Color',TabColor,...
                    'Position',[pos(1) pos(2) pos(3) pos(4)+0.01],...
                    'Tag',n,...
                    'ButtonDownFcn',[mfilename,'(''ClickOnTab'',gcbo,[],guidata(gcbo))']);
    % Create text with callback function
    handles.(['t',n]) = text('String',TabNames{i},...
                    'Units','normalized',...
                    'Position',[pos(3),pos(2)/2+pos(4)],...
                    'HorizontalAlignment','left',...
                    'VerticalAlignment','middle',...
                    'Margin',0.001,...
                    'FontSize',TabFontSize,...
                    'Backgroundcolor',TabColor,...
                    'Tag',n,...
                    'ButtonDownFcn',[mfilename,'(''ClickOnTab'',gcbo,[],guidata(gcbo))']);
    TabColor = handles.unselectedTabColor;
end
% Manage panels (place them in the correct position and manage visibilities)
set(handles.tab1Panel,'Units','normalized')
pan1pos=get(handles.tab1Panel,'Position');
set(handles.tab1text,'Visible','off')
for i = 2:TabsNumber
    n = num2str(i);
    set(handles.(['tab',n,'Panel']),'Units','normalized')
    set(handles.(['tab',n,'Panel']),'Position',pan1pos)
    set(handles.(['tab',n,'Panel']),'Visible','off')
    set(handles.(['tab',n,'text']),'Visible','off')
end

Actually, if you have long tab names and you want to change the switch size, then it you may possibly need to correct the Position parameter for the text object by adding the correcting coefficients to it. Unfortunately, this is also a feature of GUIDE. If someone can solve this problem so that the text would always be shown in the middle of the switch tab regardless of the width, we would be happy to read any suggestions in the comments to this post.

4. The callback function ClickOnTab

The callback function ClickOnTab is used every time when clicking on the tab switch and the result of the switches are visible/invisible in the uipanels and in changes to the colors of the switches.

% --- Callback function for clicking on tab
function ClickOnTab(hObject,~,handles)
m = str2double(get(hObject,'Tag'));
for i = 1:handles.TabsNumber;
    n = num2str(i);
    if i == m
        set(handles.(['a',n]),'Color',handles.selectedTabColor)
        set(handles.(['t',n]),'BackgroundColor',handles.selectedTabColor)
        set(handles.(['tab',n,'Panel']),'Visible','on')
    else
        set(handles.(['a',n]),'Color',handles.unselectedTabColor)
        set(handles.(['t',n]),'BackgroundColor',handles.unselectedTabColor)
        set(handles.(['tab',n,'Panel']),'Visible','off')
    end
end

More information about our Walk-Forward Analysis Toolbox for Algorithmic Trading (WFAToolbox) can be found at wfatoolbox.com.

The post Simple GUI Tabs for Advanced Matlab Trading App appeared first on Undocumented Matlab.

Overview

The Plotly Matlab API enables leveraging the power of Plotly graphs conveniently from your Matlab environment, meaning that you can make a graph like this in Matlab:

A simple example

First, we need to start a Matlab server. In the IPython Notebook:

In [1]:
import pymatbridge as pymat
ip = get_ipython()
pymat.load_ipython_extension(ip, matlab='C:\Users\Andrey\matlab_shortcut.lnk')

This starts Matlab on the local computer and we can now enter Matlab commands in our IPython Notebook:

Starting Matlab on http://localhost:60199
 visit http://localhost:60199/exit.m to shut down same
...Matlab started and connected!

Note to Windows users: Python doesn’t like file paths with spaces! Above, a shortcut to matlab.exe was created and placed it in a path that did not contain spaces. It’s a bit of a hack, there are better ways to do it I’m sure.
Now we are ready to run Matlab. Let’s set up the Plotly environment next. This needs to be done only once per session. The next few lines import the Plotly Matlab API and sign in to your account. For these examples we are using the Matlab-demos account. You can sign up at Plotly to get a username and key (more info), or just use the Matlab-demos username and key below to make these examples work. In Matlab:

In [2]:
%%matlab
api_path = 'C:\Users\Andrey\Dropbox\ANDREY\PLOTLY\Matlab-api\plotly';
addpath(genpath(api_path))
signin('Matlab-demos', '3qhoowzv5n');  % account username & key

We are now signed in and can convert and publish the Matlab figures in Plotly. The Plotly Matlab API helps generate data and layout data structures that contain all the information needed to make a plot. The plotly command sends these to the server and the result is displayed via the response variable. In it, a URL points to the generated plot online. In this notebook, we focus of the Plotly wrapper. The fig2plotly command at the end of the code will convert the current figure into a format that Plotly understands and publish it.
Let’s make a simple plot in Matlab and publish it to Plotly:

In [3]:
% some random points
my_random_data = rand(20,4);
% a 2D scatter plot with size and color inputs
figure
scatter(my_random_data(:,1), my_random_data(:,2), 100*my_random_data(:,3), my_random_data(:,4), 'filled')
% Convert the static figure into an online Plotly chart
response = fig2plotly();
High five! You successfully sent some data to your account on Plotly. View your plot in your browser at https://plot.ly/~Matlab-demos/0 or inside your plot.ly account where it is named 'untitled'.

The plot has been sent to the Matlab-demos account and the command returns the unique URL https://plot.ly/~Matlab-demos/0 where anyone can view the rendered graph. By default, the plot is named “untitled”. In the following examples, we see how the command allows the user to give a custom name, otherwise it will try to extract it from the figure title.
Every plotly graph URL can be embedded in HTML as wrapped in an IFrame. In fact, the Plotly figure above can be embedded in an HTML (as in this webpage) using the following HTML code:

In [4]:
from IPython.display import HTML
def show_plot(url, width=700, height=500):
    s = '' %\
    (height+50, "/".join(map(str,[url, width, height])), width+50)
    return HTML(s)

To see the resulting plot, we only need to input the following command:

In [5]:
show_plot('https://plot.ly/~Matlab-demos/0')

(resulting in a display of the interactive chart above)

Example 2: Convex Hull

Note: The original example data can be found at the Matlab Plot Gallery.

In [6]:
%%matlab
% This is an example of how to add text to a plot in Matlab.
% Read about the  function in the Matlab documentation.
% Go to 
% Load the points for creating a spline curve
load('C:\Users\Andrey\Dropbox\ANDREY\PLOTLY\Matlab_Examples\Add_Text_to_Plot_1\splineData');
% Plot the points for the spline curve
figure;
plot(points(:,1), points(:,2), ':ok');
hold on;
% Plot the spline curve
plot(x, y, 'LineWidth', 2);
axis([0.5 7 -0.8 1.8]);
% Add a title and axis labels
title('The Convex-Hull Property');
xlabel('x');
ylabel('y');
% Label points 3, 4, & 5 of the spline curve
xt = points(3,1) - 0.05;
yt = points(3,2) - 0.10;
text(xt, yt, 'Point 3', 'FontSize',12);
xt = points(4,1) - 0.05;
yt = points(4,2) + 0.10;
text(xt, yt, 'Point 4', 'FontSize',12);
xt = points(5,1) + 0.15;
yt = points(5,2) - 0.05;
text(6.1,.5, 'Point 5', 'FontSize',12);
% Convert the static figure into an online Plotly chart
response = fig2plotly();

This time, the plot was named “The Convex Hull Property”. Back in the IPython Notebook:

In [7]:
show_plot('https://plot.ly/~Matlab-demos/1')
Out [7]:

% Convert the static figure into an online Plotly chart
hFig = gcf;  % any figure, for now we use the current
response = fig2plotly(hFig, 'strip',true, 'open',false, 'name','Stripped plot');

In [8]:
show_plot('https://plot.ly/~Matlab-demos/2')
Out [8]:

Example 3: Multiple Plots

In [9]:
%%matlab
% Create data
t = linspace(0,2*pi);
t(1) = eps;
y = sin(t);
% Place axes at (0.1,0.1) with width and height of 0.8
figure;
handaxes1 = axes('position', [0.1 0.1 0.8 0.8]);
% Main plot
plot(t, y);
xlabel('t');
ylabel('sin(t)');
set(handaxes1, 'box', 'off');
% Adjust X/Y label font
set(get(gca, 'xlabel'), 'fontsize',16, 'fontweight','bold');
set(get(gca, 'ylabel'), 'fontsize',16, 'fontweight','bold');
% Place second set of axes on same plot
handaxes2 = axes('position', [0.6 0.6 0.2 0.2]);
fill(t, y.^2, 'g');
set(handaxes2, 'box', 'off');
xlabel('t');
ylabel('(sin(t))^2');
% Adjust X/Y label font
set(get(handaxes2,'xlabel'), 'fontname','times')
set(get(handaxes2,'ylabel'), 'fontname','times')
% Add another set of axes
handaxes3 = axes('position', [0.25 0.25 0.2 0.2]);
plot(t, y.^3);
set(handaxes3, 'box','off');
xlabel('t');
ylabel('(sin(t))^3');
% Convert the static figure into an online Plotly chart
response = fig2plotly(gcf, 'name','Multiple_Plots');

In [10]:
show_plot('https://plot.ly/~Matlab-demos/3')
Out [10]:

The post Plotly graphs in IPython Notebook appeared first on Undocumented Matlab.

Creating Plotly graphs in Matlab

Plotly has a Matlab interface. From Matlab, you send data to plotly where it will be stored and made into a graph that you view in your browser. Let’s get started.

1. download the Plotly-Matlab API package.
    
2. Add folder and subfolders to your Matlab path:

   path_to_downloaded_folder = '/User/chris/Downloads/plotly'; % fill in with your path
   addpath(genpath(path_to_downloaded_folder))
   

3. Sign up through the API, or sign-in with a demo account:

   % To sign up, run:
   r = signup('my_desired_plotly_username', 'my_desired_plotly_username@my_email.com') % plotly generates a temp password and api_key for you
   signin(r.un, r.api_key); % then, sign in with your newly created account
   % OR to use the demo account, do:
   plotly_username = 'MATLAB_example' % a demo username you can use
   plotly_key = 'h5n38rzyjo' % a demo api key you can use
   signin(plotly_username, plotly_key)  % sign in to plotly
   

4. Create a new chart using the API’s plotly function:

   % Here's a simple line chart example:
   >> x = linspace(0, 6*pi, 100);
   >> y1 = exp(-0.2*x).*sin(x);
   >> y2 = exp(-0.3*x).*sin(x);
   >> r = plotly(x,y1,x,y2) % call plotly instead of plot
   High five! You successfully sent some data to your account on plotly.
   View your plot in your browser at https://plot.ly/~MATLAB_example/3 or inside your plot.ly account where it is named 'plot from API (3)'
   ans =
      url: 'https://plot.ly/~MATLAB_example/3'
      message: [1x205 char]
      warning: [1x0 char]
      filename: 'plot from API (3)'
      error: [1x0 char]
   

And here’s the graph that you just generated: https://plot.ly/~MATLAB_example/3
Note that the graph won’t actually appear in a Matlab figure, nor can it be viewed in Matlab’s limited built-in browser (web). Instead, you view all of your plots in your “real” web browser, at the URL that plotly has returned. You can also have Matlab automatically open up the browser by running dos(['open ' r.url]) on a Mac, or dos(['start ' r.url]) on Windows. Within a webpage, you can embed it using an iframe tag (as I have done in this article), as follows:

Here is a side-by-side comparison with the corresponding Matlab plot:

Customizing Plotly graphs

Every aspect of the plotly graph can be customized online. This means no more 500-line styling scripts! To open up the plot into the GUI, click the “Save a copy” button. You can also download the graphs to EPS, SVG, PNG, and PDF:

samples = randn(500,1); % 500 normally distributed samples
trace1 = struct('y', samples, ...
                'type', 'histogramy', ... % make a histogram type plot
                'histnorm', 'probability density'); % normalized by probability density distribution
trace2 = struct('x', linspace(-3,3,100), ...
                'y', 1./sqrt(2*pi)*exp(-linspace(-3,3,100).^2/2.), ...
                'fill', 'tozeroy') % "fill" the curve to the "zero-y" line i.e. make an area plot
response = plotly({trace1, trace2});  % => https://plot.ly/~MATLAB_example/5

x = linspace(0,6*pi,100);
trace1 = struct('x',x, 'y',sin(x).*exp(-0.3*x));
trace2 = struct('x',x, 'y',10*sin(x-2*pi/3).*exp(-0.3*x), 'yaxis','y2'); % this trace will correspond to 2nd y-axis, 'y2'
trace3 = struct('x',x, 'y',100*sin(x-4*pi/3).*exp(-0.3*x), 'yaxis','y3'); % this trace will correspond to 3rd y-axis, 'y3'
layout = struct('xaxis', struct('domain',[0,0.9]), ... % set x-axis to span 90% of plot width, like Matlab's 'Position' property
                'yaxis2', struct('anchor','x', 'side','right', 'overlaying','y'), ... % places another y-axis on the right side of the plot
                'yaxis3', struct('anchor','side', 'right','free', 'position',1.0, 'overlaying','y')) % places 3rd y-axis at 100% plot width
r = plotly({trace1, trace2, trace3}, struct('layout', layout));  % => https://plot.ly/~MATLAB_example/13
dos(['open ', r.url])

x1 = [1, 2, 3];  y1 = [2,3,4];
x2 = [20,30,40]; y2 = [3,4,5];
x3 = [2, 3, 4];  y3 = [600,700,800];
x4 = [4000,5000,6000]; y4 = [7000,8000,9000];
% build structs describing the plot traces and assigning data to axes
trace1 = struct('x',x1, 'y',y1);
trace2 = struct('x',x2, 'y',y2, 'xaxis','x2', 'yaxis','y');  % new x-axis but same y-axis as trace1; 'x2' is shorthand for 'xaxis2' below
trace3 = struct('x',x3, 'y',y3, 'xaxis','x',  'yaxis','y3'); % same x-axis as trace 1 but a new y-axis
trace4 = struct('x',x4, 'y',y4, 'xaxis','x4', 'yaxis','y4'); % new x-axis and new y-axis
% build a layout struct describing the layout of the different axes
xaxis =  struct('domain', [0, 0.45]); % let the first x-axis span the first 45% of the plot width
yaxis =  struct('domain', [0, 0.45]); % and let the first y-axis span the first 45% of the plot height
xaxis2 = struct('domain', [0.55, 1]); % and let the second axis span the latter 45% of the plot width
yaxis3 = struct('domain', [0.55,1]);
xaxis4 = struct('domain', [0.55, 1], 'anchor','y4'); % anchor axis vertical position to start of yaxis4
yaxis4 = struct('domain', [0.55, 1], 'anchor','x4'); % anchor axis horizontal position to start of xaxis4
layout = struct('xaxis',xaxis, 'yaxis',yaxis, 'xaxis2',xaxis2, 'yaxis3',yaxis3, 'xaxis4',xaxis4, 'yaxis4',yaxis4);
r = plotly({trace1,trace2,trace3,trace4}, struct('=> layout', layout))  % => https://plot.ly/~MATLAB_example/15
dos(['open ', r.url])

y1 = randn(50,1); y2 = rand(50,1);
r = plotly({struct('y',y1, 'type','box'), struct('y',y2, 'type','box')}) % => https://plot.ly/~MATLAB_example/17
dos(['open ', r.url])

r = plotly({struct('z',randn(50,50), 'type','heatmap')}) % => https://plot.ly/~matlab_example/18
dos(['open ', r.url])

Additional resources

• Online-documentation: https://plot.ly/api/MATLAB/
• An online gallery: https://plot.ly/api/MATLAB/gallery/
• Plotly File Exchange utility: http://www.mathworks.com/matlabcentral/fileexchange/42202-plotly-api
• The Matlab interface is open source on GitHub: https://github.com/plotly/MATLAB-api (note that the plotly engine is not open-source, only the API)
• Plotly’s homepage: https://plot.ly/
• Email: chris [at] plot [dot] ly

The post Plotly graphs appeared first on Undocumented Matlab.