diff --git a/vstgui/standalone/examples/standalone/resource/test.uidesc b/vstgui/standalone/examples/standalone/resource/test.uidesc index b1cda82e7..2f3df0fa1 100644 --- a/vstgui/standalone/examples/standalone/resource/test.uidesc +++ b/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", diff --git a/vstgui/uidescription-scripting/uiscripting.md b/vstgui/uidescription-scripting/uiscripting.md index 4b587ed7a..a19045901 100644 --- a/vstgui/uidescription-scripting/uiscripting.md +++ b/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); +```