add example script to documentation

vstgui/standalone/examples/standalone/resource/test.uidesc

@@ -202,7 +202,7 @@
 							"opacity": "1",
 							"origin": "15, 200",
 							"row-height": "16",
-							"script": "// Hover Opacity Animation Script\n// This example script changes the opacity of the view\n// when the mouse enters or exits the view\n\n/* the default opacity of the view is stored in view.default_opacity */\nview.default_opacity = 0.6;\n\n/* the current opacity of the view is stored in view.opacity */\nview.opacity = view.default_opacity;\n\n/* the timer to change the opacity is stored in view.opacity_timer */\nview.opacity_timer = createTimer (view, 16, function (view) {\n\tview.opacity += view.opacity_change;\n\tif (view.opacity_change > 0)\n\t{\n\t\tif (view.opacity > 1)\n\t\t{\n\t\t\tview.opacity = 1;\n\t\t\tview.opacity_timer.stop();\n\t\t}\n\t}\n\telse\n\t{\n\t\tif (view.opacity <= view.default_opacity)\n\t\t{\n\t\t\tview.opacity = view.default_opacity;\n\t\t\tview.opacity_timer.stop();\n\t\t}\n\t}\n\tview.setAttribute(\"opacity\", view.opacity);\n});\n\n/* we install a mouse enter listener\n   when the mouse enters the view we start the opacity change timer \n*/\nview.onMouseEnter = function (view, event) {\n\tview.opacity_change = 0.075;\n\tview.opacity_timer.start();\n\tevent.consumed = true;\n\tvar val = view.getControllerProperty (\"integer\");\n\tlog (val);\n};\n\n/* we also install a mouse exit listener\n   when the mouse exits the view we start the opacity change timer again \n   now with a negative opacity_change variable so that in the timer callback \n   the opacity is going back to the default opacity \n*/\nview.onMouseExit = function (view, event) {\n\tview.opacity_change = -0.05;\n\tview.opacity_timer.start();\n\tevent.consumed = true;\n};\n\n/* we also install a view removed listener so that we can cleanup and stop the timer */\nview.onRemoved = function (view) {\n\t// cleanup, when the view is removed, stop the timer\n\tview.opacity_timer.stop();\n};\n\nview.setAttribute(\"mouse-enabled\", true);\nview.setAttribute(\"opacity\", view.opacity);\n\n",
+							"script": "// Hover Opacity Animation Script\n// This example script changes the opacity of the view\n// when the mouse enters or exits the view\n\n/* the default opacity of the view is stored in view.default_opacity */\nview.default_opacity = 0.6;\n\n/* the current opacity of the view is stored in view.opacity */\nview.opacity = view.default_opacity;\n\n/* the timer to change the opacity is stored in view.opacity_timer */\nview.opacity_timer = createTimer(view, 16, function(view) {\n\tview.opacity += view.opacity_change;\n\tif (view.opacity_change > 0)\n\t{\n\t\tif (view.opacity > 1)\n\t\t{\n\t\t\tview.opacity = 1;\n\t\t\tview.opacity_timer.stop();\n\t\t}\n\t}\n\telse\n\t{\n\t\tif (view.opacity <= view.default_opacity)\n\t\t{\n\t\t\tview.opacity = view.default_opacity;\n\t\t\tview.opacity_timer.stop();\n\t\t}\n\t}\n\tview.setAttribute(\"opacity\", view.opacity);\n});\n\n/* the view will be shown with full opacity when focused so the state of the focus is stored in view.hasFocus */\nview.has_focus = false;\n\n/* to correctly restore the hover state after focus lost, the state if the mouse is inside the view or outside \n   is stored in view.mouseInside\n*/\nview.mouse_inside = false;\n\n/* we install a mouse enter listener\n   when the mouse enters the view we start the opacity change timer \n*/\nview.onMouseEnter = function(view, event) {\n\tview.mouse_inside = true;\n\tif (view.has_focus)\n\t\treturn;\n\tview.opacity_change = 0.075;\n\tview.opacity_timer.start();\n\tevent.consume = true;\n};\n\n/* we also install a mouse exit listener\n   when the mouse exits the view we start the opacity change timer again \n   now with a negative opacity_change variable so that in the timer callback \n   the opacity is going back to the default opacity \n*/\nview.onMouseExit = function(view, event) {\n\tview.mouse_inside = false;\n\tif (view.has_focus)\n\t\treturn;\n\tview.opacity_change = -0.05;\n\tview.opacity_timer.start();\n\tevent.consumed = true;\n};\n\n/* we also install a view removed listener so that we can cleanup and stop the timer */\nview.onRemoved = function(view) {\n\t// cleanup, when the view is removed, stop the timer\n\tview.opacity_timer.stop();\n};\n\n/* when the view takes focus we show the view with full opacity */\nview.onTookFocus = function(view) {\n\tview.has_focus = true;\n\tview.opacity_timer.stop();\n\tview.setAttribute(\"opacity\", 1);\n\tview.opacity = 1;\n};\n\n/* when the view lost focus we start the opacity animation when the mouse is not inside this view */\nview.onLostFocus = function(view) {\n\tview.has_focus = false;\n\tif (!view.mouse_inside)\n\t{\n\t\tview.onMouseExit(view, undefind);\n\t}\n};\n\n/* enable the mouse, otherwise no mouse listener is called */\nview.setAttribute(\"mouse-enabled\", true);\n\n/* set the initial view opacity*/\nview.setAttribute(\"opacity\", view.opacity);\n\n",
 							"size": "110, 144",
 							"style-hover": "true",
 							"sub-controller": "WeekdaysController",

vstgui/uidescription-scripting/uiscripting.md

@@ -208,3 +208,102 @@ You can set any attribute as shown in the WYSIWYG editor.
 - `Math.pow(a,b)`
 - `Math.sqr(a)`
 - `Math.sqrt(a)`
+
+### Example
+
+```js
+// Hover Opacity Animation Script
+// This example script changes the opacity of the view
+// when the mouse enters or exits the view
+
+/* the default opacity of the view is stored in view.default_opacity */
+view.default_opacity = 0.6;
+
+/* the current opacity of the view is stored in view.opacity */
+view.opacity = view.default_opacity;
+
+/* the timer to change the opacity is stored in view.opacity_timer */
+view.opacity_timer = createTimer(view, 16, function(view) {
+	view.opacity += view.opacity_change;
+	if (view.opacity_change > 0)
+	{
+		if (view.opacity > 1)
+		{
+			view.opacity = 1;
+			view.opacity_timer.stop();
+		}
+	}
+	else
+	{
+		if (view.opacity <= view.default_opacity)
+		{
+			view.opacity = view.default_opacity;
+			view.opacity_timer.stop();
+		}
+	}
+	view.setAttribute("opacity", view.opacity);
+});
+
+/* the view will be shown with full opacity when focused so the state of the focus is stored in view.hasFocus */
+view.has_focus = false;
+
+/* to correctly restore the hover state after focus lost, the state if the mouse is inside the view or outside 
+   is stored in view.mouseInside
+*/
+view.mouse_inside = false;
+
+/* we install a mouse enter listener
+   when the mouse enters the view we start the opacity change timer 
+*/
+view.onMouseEnter = function(view, event) {
+	view.mouse_inside = true;
+	if (view.has_focus)
+		return;
+	view.opacity_change = 0.075;
+	view.opacity_timer.start();
+	event.consume = true;
+};
+
+/* we also install a mouse exit listener
+   when the mouse exits the view we start the opacity change timer again 
+   now with a negative opacity_change variable so that in the timer callback 
+   the opacity is going back to the default opacity 
+*/
+view.onMouseExit = function(view, event) {
+	view.mouse_inside = false;
+	if (view.has_focus)
+		return;
+	view.opacity_change = -0.05;
+	view.opacity_timer.start();
+	event.consumed = true;
+};
+
+/* we also install a view removed listener so that we can cleanup and stop the timer */
+view.onRemoved = function(view) {
+	// cleanup, when the view is removed, stop the timer
+	view.opacity_timer.stop();
+};
+
+/* when the view takes focus we show the view with full opacity */
+view.onTookFocus = function(view) {
+	view.has_focus = true;
+	view.opacity_timer.stop();
+	view.setAttribute("opacity", 1);
+	view.opacity = 1;
+};
+
+/* when the view lost focus we start the opacity animation when the mouse is not inside this view */
+view.onLostFocus = function(view) {
+	view.has_focus = false;
+	if (!view.mouse_inside)
+	{
+		view.onMouseExit(view, undefind);
+	}
+};
+
+/* enable the mouse, otherwise no mouse listener is called */
+view.setAttribute("mouse-enabled", true);
+
+/* set the initial view opacity*/
+view.setAttribute("opacity", view.opacity);
+```