Skip to content

Commit f4d2bc4

Browse files
Dev-iLDev-iL
committed
Merge remote-tracking branch 'Dev-iL/develop' into develop
Manual conflict resolution
2 parents 62f8638 + ae586ae commit f4d2bc4

File tree

3 files changed

+1774
-764
lines changed

3 files changed

+1774
-764
lines changed

‎README.md

Lines changed: 78 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ published Wednesday, September 7th, 2016.
2020
## Methods
2121

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

64+
-----------------
65+
<a name="addClasses"></a>
66+
67+
#### *mlapptools*.**addClasses**(*hUIElement*, *cssClasses*)
68+
69+
##### Description
70+
71+
Adds the specified CSS class (if `char` vector) or classes (if `cell` array of `char` vectors) to a UI element.
72+
73+
##### Examples
74+
75+
Using the demo GUI generated by `./Demo/DOMdemoGUI.m`
76+
77+
```MATLAB
78+
% Create a figure:
79+
hFig = DOMdemoGUI;
80+
81+
% Get a handle to the webwindow and the TextArea:
82+
[hWin, widgetID] = mlapptools.getWebElements(hFig.TextArea);
83+
84+
% Define inline CSS animation and add it to the figure HTML:
85+
cssText = ['"<style>'...
86+
'@-webkit-keyframes mymove {50% {background-color: blue;}}'...
87+
'@keyframes mymove {50% {background-color: blue;}}</style>"'];
88+
mlapptools.addToHead(hWin, cssText);
89+
90+
% Activate animation on control:
91+
mlapptools.setStyle(hWin, '-webkit-animation', 'mymove 5s infinite', widgetID);
92+
```
93+
94+
Another example is available in the blog post "[Customizing web-GUI uipanel](https://undocumentedmatlab.com/blog/customizing-web-gui-uipanel)" by Khris Griffis.
95+
96+
-----------------
97+
<a name="addToHead"></a>
98+
99+
#### *mlapptools*.**addToHead**(*hWin*, *cssText*)
100+
101+
##### Description
102+
103+
A method for adding inline CSS to the HTML `<head>` section.
104+
See also: [`stringify.m`](https://github.com/Khlick/matlabUiHacks/blob/master/utils/stringify.m).
105+
106+
##### Examples
107+
See example for [`addClasses`](#addClasses).
108+
62109
-----------------
63110
<a name="fontColor"></a>
64111

65-
#### *mlapptools*.**fontColor**(*uiElement*, *newcolor*)
112+
#### *mlapptools*.**fontColor**(*hUIElement*, *color*)
66113

67114
##### Description
68115

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

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

99-
#### *mlapptools*.**fontWeight**(*uiElement*, *weight*)
146+
#### *mlapptools*.**fontWeight**(*hUIElement*, *weight*)
100147

101148
##### Description
102149

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

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

132-
#### *mlapptools*.**getChildNodeIDs**(*hWebWindow*,*widgetID*)
179+
#### *mlapptools*.**getChildNodeIDs**(*hWin*,*widgetID*)
133180

134181
##### Description
135182

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

140187
```MATLAB
141-
tg = uitabgroup(uifigure());
142-
uitab(tg);
143-
[win, widgetID] = mlapptools.getWebElements(tg);
144-
[childIDs] = mlapptools.getChildNodeIDs(win, widgetID);
145-
mlapptools.setStyle(win,'background','blue',childIDs(2));
146-
[childIDs] = mlapptools.getChildNodeIDs(win, childIDs(2));
147-
mlapptools.setStyle(win,'background','green',childIDs(4));
188+
hTG = uitabgroup(uifigure());
189+
uitab(hTG);
190+
[hWin, widgetID] = mlapptools.getWebElements(hTG);
191+
[childIDs] = mlapptools.getChildNodeIDs(hWin, widgetID);
192+
mlapptools.setStyle(hWin,'background','blue',childIDs(2));
193+
[childIDs] = mlapptools.getChildNodeIDs(hWin, childIDs(2));
194+
mlapptools.setStyle(hWin,'background','green',childIDs(4));
148195
```
149196

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

174-
#### *mlapptools*.**getParentNodeID**(*hWebWindow*,*widgetID*)
221+
#### *mlapptools*.**getParentNodeID**(*hWin*,*widgetID*)
175222

176223
##### Description
177224

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

184231
```MATLAB
185232
tg = uitabgroup(uifigure());
186-
[win, widgetID] = mlapptools.getWebElements(tg);
187-
mlapptools.setStyle(win,'background','linear-gradient(red, pink, white)',...
188-
mlapptools.getParentNodeID(win, widgetID));
233+
[hWin, widgetID] = mlapptools.getWebElements(tg);
234+
mlapptools.setStyle(hWin,'background','linear-gradient(red, pink, white)',...
235+
mlapptools.getParentNodeID(hWin, widgetID));
189236
```
190237

191238
-----------------
192239
<a name="getWebElements"></a>
193240

194-
#### *mlapptools*.**getWebElements**(*uiElement*)
241+
#### *mlapptools*.**getWebElements**(*hUIElement*)
195242

196243
##### Description
197244

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

203250
```MATLAB
204251
myGUI = DOMdemoGUI;
205-
[win, widgetID] = mlapptools.getWebElements(myGUI.TextArea);
252+
[hWin, widgetID] = mlapptools.getWebElements(myGUI.TextArea);
206253
```
207254

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

221268
```MATLAB
222269
myGUI = DOMdemoGUI;
223-
win = mlapptools.getWebWindow(myGUI.UIFigure);
270+
hWin = mlapptools.getWebWindow(myGUI.UIFigure);
224271
```
225272

226273
-----------------
227274
<a name="getWidgetInfo"></a>
228275

229-
#### *mlapptools*.**getWidgetInfo**(*hWebwindow*, *widgetID*, *verbosityFlag*)
276+
#### *mlapptools*.**getWidgetInfo**(*hWin*, *widgetID*, *verbosityFlag*)
230277

231278
##### Description
232279

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

240287
```MATLAB
241288
myGUI = DOMdemoGUI;
242-
[win, widgetID] = mlapptools.getWebElements(myGUI.TextArea);
243-
nfo = mlapptools.getWidgetInfo(win, widgetID);
289+
[hWin, widgetID] = mlapptools.getWebElements(myGUI.TextArea);
290+
nfo = mlapptools.getWidgetInfo(hWin, widgetID);
244291
```
245292

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

267-
#### *mlapptools*.**setStyle**(*uiElement*, *styleAttr*, *styleValue*)
314+
#### *mlapptools*.**setStyle**(*hUIElement*, *styleAttr*, *styleValue*)
268315

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

271318
##### Description
272319

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

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

294-
#### *mlapptools*.**setTimeout**(*hUIFig*)
341+
#### *mlapptools*.**setTimeout**(*hUIFig*, *newTimeoutInSec*)
295342

296343
##### Description
297344

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

311-
#### *mlapptools*.**textAlign**(*uiElement*, *alignment*)
358+
#### *mlapptools*.**textAlign**(*hUIElement*, *alignment*)
312359

313360
##### Description
314-
Set the horizontal text alignment of the specified UI element, `uiElement`, to that specified by the input alignment
361+
Set the horizontal text alignment of the specified UI element, `hUIElement`, to that specified by the input alignment
315362
string, `alignment`.
316363

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

346393
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).
347394

395+
_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).
396+
348397
##### Examples
349398

350399
Using the demo GUI generated by `./Demo/DOMdemoGUI.m`
@@ -361,7 +410,8 @@ web(hWW.URL,'-browser'); pause(3);
361410
mlapptools.unlockUIFig(myGUI.UIFigure);
362411
363412
% Attempt to open again:
364-
web(hWW.URL,'-browser');
413+
web(hWW.URL,'-browser'); % Works on R2016a-R2018a
414+
web(hWW.URL,'-new'); % Works on all releases (probably)
365415
```
366416
The 1<sup>st</sup> browser window should be empty, whereas the 2<sup>nd</sup> should correctly show the contents of the UIFigure.
367417

0 commit comments

Comments
 (0)