Skip to content

Various features added #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 21 commits into from
Mar 25, 2019
Merged

Various features added #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
0810e7b
UITable: added a utility function that converts cell [r,c] to JS ids.
Dev-iL Jul 24, 2018
38c49bd
Stabilized waitTillWebwindowLoaded()
Dev-iL Jul 25, 2018
d25f7e8
Added support in setStyle for non-scalar IDs
Dev-iL Jul 25, 2018
0278728
Cosmetic changes to the code
Dev-iL Jul 25, 2018
96b5336
Merge remote-tracking branch 'origin/issue/18' into develop
Dev-iL Aug 5, 2018
a6fc482
Merge remote-tracking branch 'origin/feature/uitable-cell-ids' into d…
Dev-iL Aug 5, 2018
4dfe18a
Minor refactoring in fontColor
Dev-iL Aug 7, 2018
afd8065
Added the `addClasses` and `addCssToHead` methods
Dev-iL Aug 7, 2018
8daf390
Fixed certificate checking logic to avoid an uninitialized variable.
Dev-iL Aug 7, 2018
162af02
Getting the widgetID of a uitable is now possible.
Dev-iL Aug 12, 2018
e426025
The IDs returned by getTableCellID now correspond to `mwTextField` objs
Dev-iL Aug 12, 2018
055ea1e
Renamed "addCssToHead" to "addToHead"
Dev-iL Aug 17, 2018
8c13979
Consistent input and output argument naming
Dev-iL Aug 17, 2018
70c1ecc
Adding functionSignatures.json (part 1)
Dev-iL Aug 17, 2018
89998c9
Adding functionSignatures.json (part 2)
Dev-iL Aug 28, 2018
c3cb07a
Fixed readme entry related to `setTimeout`
Dev-iL Oct 9, 2018
6068af3
Added a utility function for getting node descendants of a certain type
Dev-iL Mar 24, 2019
5a52ddd
Added handling for uiaxes in getWebElements
Dev-iL Mar 24, 2019
76d8e70
Adaptation for R2019a in getWebElements() for uiaxes inputs
Dev-iL Mar 25, 2019
ae586ae
Added a note about support for uifigure "unlocking" in various releases
Dev-iL Mar 25, 2019
f4d2bc4
Merge remote-tracking branch 'Dev-iL/develop' into develop
Dev-iL Mar 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 78 additions & 28 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ published Wednesday, September 7th, 2016.
## Methods

[`aboutJSLibs`](#aboutJSLibs) - Return the loaded versions of Dojo and React.
[`addClasses`](#addClasses) - Add specified CSS classes to one or more DOM nodes.
[`addToHead`](#addToHead) - Inject inline CSS or JS into the `<head>` section of the figure's HTML.
[`fontColor`](#fontColor) - Modify font color.
[`fontWeight`](#fontWeight) - Modify font weight.
[`getChildNodeIDs`](#getChildNodeIDs) - Get all children DOM nodes of a specified node.
Expand Down Expand Up @@ -59,14 +61,59 @@ ans =
react_js: '0.14.7'
```

-----------------
<a name="addClasses"></a>

#### *mlapptools*.**addClasses**(*hUIElement*, *cssClasses*)

##### Description

Adds the specified CSS class (if `char` vector) or classes (if `cell` array of `char` vectors) to a UI element.

##### Examples

Using the demo GUI generated by `./Demo/DOMdemoGUI.m`

```MATLAB
% Create a figure:
hFig = DOMdemoGUI;

% Get a handle to the webwindow and the TextArea:
[hWin, widgetID] = mlapptools.getWebElements(hFig.TextArea);

% Define inline CSS animation and add it to the figure HTML:
cssText = ['"<style>'...
'@-webkit-keyframes mymove {50% {background-color: blue;}}'...
'@keyframes mymove {50% {background-color: blue;}}</style>"'];
mlapptools.addToHead(hWin, cssText);

% Activate animation on control:
mlapptools.setStyle(hWin, '-webkit-animation', 'mymove 5s infinite', widgetID);
```

Another example is available in the blog post "[Customizing web-GUI uipanel](https://undocumentedmatlab.com/blog/customizing-web-gui-uipanel)" by Khris Griffis.

-----------------
<a name="addToHead"></a>

#### *mlapptools*.**addToHead**(*hWin*, *cssText*)

##### Description

A method for adding inline CSS to the HTML `<head>` section.
See also: [`stringify.m`](https://github.com/Khlick/matlabUiHacks/blob/master/utils/stringify.m).

##### Examples
See example for [`addClasses`](#addClasses).

-----------------
<a name="fontColor"></a>

#### *mlapptools*.**fontColor**(*uiElement*, *newcolor*)
#### *mlapptools*.**fontColor**(*hUIElement*, *color*)

##### Description

Set the font color of the specified UI element, `'uiElement'`, to the input color, `newcolor`. `newcolor` can be a
Set the font color of the specified UI element, `'hUIElement'`, to the input color, `color`. `color` can be a
predefined color string or a string containing a valid CSS color method call.

Valid color specifications are:
Expand Down Expand Up @@ -96,11 +143,11 @@ mlapptools.fontColor(myGUI.TextArea, 'rgb(255,165,0)');
-----------------
<a name="fontWeight"></a>

#### *mlapptools*.**fontWeight**(*uiElement*, *weight*)
#### *mlapptools*.**fontWeight**(*hUIElement*, *weight*)

##### Description

Set the font weight of the specified UI element, `uiElement`, to the input weight string or integer, `weight`.
Set the font weight of the specified UI element, `hUIElement`, to the input weight string or integer, `weight`.
For this setting to have an effect, the font being used must have built-in faces that match the specified weight.

Valid font weight property values are:
Expand Down Expand Up @@ -129,7 +176,7 @@ mlapptools.fontWeight(myGUI.TextArea, 600);
-----------------
<a name="getChildNodeIDs"></a>

#### *mlapptools*.**getChildNodeIDs**(*hWebWindow*,*widgetID*)
#### *mlapptools*.**getChildNodeIDs**(*hWin*,*widgetID*)

##### Description

Expand All @@ -138,13 +185,13 @@ A method for getting all children nodes (commonly `<div>` elements) of a specifi
##### Examples

```MATLAB
tg = uitabgroup(uifigure());
uitab(tg);
[win, widgetID] = mlapptools.getWebElements(tg);
[childIDs] = mlapptools.getChildNodeIDs(win, widgetID);
mlapptools.setStyle(win,'background','blue',childIDs(2));
[childIDs] = mlapptools.getChildNodeIDs(win, childIDs(2));
mlapptools.setStyle(win,'background','green',childIDs(4));
hTG = uitabgroup(uifigure());
uitab(hTG);
[hWin, widgetID] = mlapptools.getWebElements(hTG);
[childIDs] = mlapptools.getChildNodeIDs(hWin, widgetID);
mlapptools.setStyle(hWin,'background','blue',childIDs(2));
[childIDs] = mlapptools.getChildNodeIDs(hWin, childIDs(2));
mlapptools.setStyle(hWin,'background','green',childIDs(4));
```

-----------------
Expand All @@ -171,7 +218,7 @@ web(['text://' fullHTML]);
-----------------
<a name="getParentNodeID"></a>

#### *mlapptools*.**getParentNodeID**(*hWebWindow*,*widgetID*)
#### *mlapptools*.**getParentNodeID**(*hWin*,*widgetID*)

##### Description

Expand All @@ -183,15 +230,15 @@ Using the demo GUI generated by `./Demo/DOMdemoGUI.m`

```MATLAB
tg = uitabgroup(uifigure());
[win, widgetID] = mlapptools.getWebElements(tg);
mlapptools.setStyle(win,'background','linear-gradient(red, pink, white)',...
mlapptools.getParentNodeID(win, widgetID));
[hWin, widgetID] = mlapptools.getWebElements(tg);
mlapptools.setStyle(hWin,'background','linear-gradient(red, pink, white)',...
mlapptools.getParentNodeID(hWin, widgetID));
```

-----------------
<a name="getWebElements"></a>

#### *mlapptools*.**getWebElements**(*uiElement*)
#### *mlapptools*.**getWebElements**(*hUIElement*)

##### Description

Expand All @@ -202,7 +249,7 @@ widget ID can be used to call the 4-parameter variant of [`setStyle`](#setStyle)

```MATLAB
myGUI = DOMdemoGUI;
[win, widgetID] = mlapptools.getWebElements(myGUI.TextArea);
[hWin, widgetID] = mlapptools.getWebElements(myGUI.TextArea);
```

-----------------
Expand All @@ -220,13 +267,13 @@ Using the demo GUI generated by `./Demo/DOMdemoGUI.m`

```MATLAB
myGUI = DOMdemoGUI;
win = mlapptools.getWebWindow(myGUI.UIFigure);
hWin = mlapptools.getWebWindow(myGUI.UIFigure);
```

-----------------
<a name="getWidgetInfo"></a>

#### *mlapptools*.**getWidgetInfo**(*hWebwindow*, *widgetID*, *verbosityFlag*)
#### *mlapptools*.**getWidgetInfo**(*hWin*, *widgetID*, *verbosityFlag*)

##### Description

Expand All @@ -239,8 +286,8 @@ Using the demo GUI generated by `./Demo/DOMdemoGUI.m`

```MATLAB
myGUI = DOMdemoGUI;
[win, widgetID] = mlapptools.getWebElements(myGUI.TextArea);
nfo = mlapptools.getWidgetInfo(win, widgetID);
[hWin, widgetID] = mlapptools.getWebElements(myGUI.TextArea);
nfo = mlapptools.getWidgetInfo(hWin, widgetID);
```

-----------------
Expand All @@ -264,13 +311,13 @@ nfoList = mlapptools.getWidgetList(myGUI.UIFigure);
-----------------
<a name="setStyle"></a>

#### *mlapptools*.**setStyle**(*uiElement*, *styleAttr*, *styleValue*)
#### *mlapptools*.**setStyle**(*hUIElement*, *styleAttr*, *styleValue*)

#### *mlapptools*.**setStyle**(*hWin*, *styleAttr*, *styleValue*, *ID_object*)

##### Description

Set the style attribute `styleAttr` of the specified UI element, `'uiElement'`, to the value `styleValue`. `styleAttr`
Set the style attribute `styleAttr` of the specified UI element, `'hUIElement'`, to the value `styleValue`. `styleAttr`
should be any valid CSS attribute, and `styleValue` a valid setting thereof.

This method provides a general interface to change CSS style attributes, with minimal input testing and error reporting,
Expand All @@ -291,7 +338,7 @@ mlapptools.setStyle(myGUI.TextArea, 'background-image',...
-----------------
<a name="setTimeout"></a>

#### *mlapptools*.**setTimeout**(*hUIFig*)
#### *mlapptools*.**setTimeout**(*hUIFig*, *newTimeoutInSec*)

##### Description

Expand All @@ -308,10 +355,10 @@ mlapptools.setTimeout(myGUI.UIFigure, 3); % This will wait less for dojo queries
-----------------
<a name="textAlign"></a>

#### *mlapptools*.**textAlign**(*uiElement*, *alignment*)
#### *mlapptools*.**textAlign**(*hUIElement*, *alignment*)

##### Description
Set the horizontal text alignment of the specified UI element, `uiElement`, to that specified by the input alignment
Set the horizontal text alignment of the specified UI element, `hUIElement`, to that specified by the input alignment
string, `alignment`.

Valid alignment strings are:
Expand Down Expand Up @@ -345,6 +392,8 @@ mlapptools.textAlign(myGUI.TextArea, 'right');

This method modifies the properties of the UIFigure controller such that opening the UIFigure in a browser (using the webwindow URL) becomes possible. This method has no effect on MATLAB releases before R2017b (where no such restriction exists in the first place).

_NOTE:_ this method works as expected in releases ≤R2018a. In newer releases, the unlocked figure can only be viewed in the built-in web browser using `web(hWW.URL,'-new')`. This way one can view the source code of the webpage (useful to examine the DOM's hierarchy etc.), but not modify it (by editing the nodes manually or issuing console commands).

##### Examples

Using the demo GUI generated by `./Demo/DOMdemoGUI.m`
Expand All @@ -361,7 +410,8 @@ web(hWW.URL,'-browser'); pause(3);
mlapptools.unlockUIFig(myGUI.UIFigure);

% Attempt to open again:
web(hWW.URL,'-browser');
web(hWW.URL,'-browser'); % Works on R2016a-R2018a
web(hWW.URL,'-new'); % Works on all releases (probably)
```
The 1<sup>st</sup> browser window should be empty, whereas the 2<sup>nd</sup> should correctly show the contents of the UIFigure.

Expand Down
Loading