-
Notifications
You must be signed in to change notification settings - Fork 123
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
move some more complex scripts out of the uidesc file
- Loading branch information
Showing
4 changed files
with
284 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
189 changes: 189 additions & 0 deletions
189
vstgui/standalone/examples/standalone/resource/scripts/customslider.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,189 @@ | ||
| view.data = { | ||
| backColor: "control.back", | ||
| frameColor: "control.frame", | ||
| valueColor: "control.value", | ||
| valueFrameColor: "control.valueframe", | ||
| lineColor: "control.line", | ||
| isVertical: false, | ||
| handleWidth: 10, | ||
| handleRange: 0, | ||
| handleRect: {}, | ||
| numLines: 9, | ||
| lineInset: 3, | ||
| secondLineInset: 3, | ||
| mouseDownStart: {x: -1, y: -1}, | ||
| }; | ||
|
|
||
| view.onSizeChanged = function(view, newRect) { | ||
| bounds = view.getBounds (); | ||
| view.data.handleRect = bounds; | ||
| view.data.handleRect.left += 2; | ||
| view.data.handleRect.right -= 2; | ||
| view.data.handleRect.top += 2; | ||
| view.data.handleRect.bottom -= 2; | ||
| var width = bounds.getWidth(); | ||
| var height = bounds.getHeight(); | ||
| view.data.isVertical = width < height; | ||
| if(view.data.isVertical) | ||
| { | ||
| view.data.handleRect.bottom = view.data.handleRect.top + view.data.handleWidth; | ||
| view.data.handleRange = height - view.data.handleWidth; | ||
| } | ||
| else | ||
| { | ||
| view.data.handleRect.right = view.data.handleRect.left + view.data.handleWidth; | ||
| view.data.handleRange = width - view.data.handleWidth; | ||
| } | ||
| }; | ||
|
|
||
| view.getHandleRect = function() { | ||
| var handle = view.data.handleRect.clone(); | ||
| var offset = view.data.handleRange * view.getValue(); | ||
| if(view.data.isVertical) | ||
| { | ||
| handle.top += offset; | ||
| handle.bottom += offset; | ||
| } | ||
| else | ||
| { | ||
| handle.left += offset; | ||
| handle.right += offset; | ||
| } | ||
| return handle; | ||
| }; | ||
|
|
||
| view.draw = function(context, dirtyRect) { | ||
| var bounds = view.getBounds(); | ||
|
|
||
| roundRect = context.createRoundGraphicsPath(bounds, 4); | ||
|
|
||
| context.setFillColor(view.data.backColor); | ||
| context.setFrameColor(view.data.frameColor); | ||
| context.setLineWidth(1); | ||
| context.drawGraphicsPath(roundRect, "filled"); | ||
| context.drawGraphicsPath(roundRect, "stroked"); | ||
|
|
||
| context.setFrameColor(view.data.lineColor); | ||
| context.setLineWidth(1); | ||
| var handle = view.getHandleRect(); | ||
|
|
||
| numLines = view.data.numLines + 1; | ||
| drawOffset = view.data.handleRange / numLines; | ||
| lineInset = view.data.lineInset; | ||
| if(view.data.isVertical) | ||
| { | ||
| y = drawOffset + view.data.handleWidth / 2; | ||
| for(i = 1; i < numLines; i++) | ||
| { | ||
| start = {x: handle.left + lineInset, y: Math.round (y)}; | ||
| end = {x: handle.right - lineInset, y: Math.round (y)}; | ||
| if(!(i%2)) | ||
| { | ||
| start.x += view.data.secondLineInset; | ||
| end.x -= view.data.secondLineInset; | ||
| } | ||
| context.drawLine(start, end); | ||
| y += drawOffset; | ||
| } | ||
| } | ||
| else | ||
| { | ||
| x = drawOffset + view.data.handleWidth / 2; | ||
| for(i = 1; i < numLines; i++) | ||
| { | ||
| start = {x: Math.round (x), y: handle.top + lineInset}; | ||
| end = {x: Math.round (x), y: handle.bottom - lineInset}; | ||
| if(!(i%2)) | ||
| { | ||
| start.y += view.data.secondLineInset; | ||
| end.y -= view.data.secondLineInset; | ||
| } | ||
| context.drawLine(start, end); | ||
| x += drawOffset; | ||
| } | ||
| } | ||
|
|
||
| roundRect = context.createRoundGraphicsPath(handle, 3); | ||
| context.setFillColor(view.data.valueColor); | ||
| context.setFrameColor(view.data.valueFrameColor); | ||
| context.setLineWidth(1); | ||
| context.drawGraphicsPath(roundRect, "filled"); | ||
| context.drawGraphicsPath(roundRect, "stroked"); | ||
| }; | ||
|
|
||
| view.onMouseDown = function(view, event) { | ||
| if(!event.mouseButtons.left) | ||
| return; | ||
| if (event.modifiers.control) | ||
| { | ||
| // pass thru to default implementation for default handling | ||
| return; | ||
| } | ||
| view.data.mouseDownStart = event.mousePosition; | ||
| view.beginEdit(); | ||
| view.onMouseMove(view, event); | ||
| event.consumed = true; | ||
| }; | ||
|
|
||
| view.onMouseUp = function(view, event) { | ||
| if(!event.mouseButtons.left || view.data.mouseDownStart.x == -1.0) | ||
| return; | ||
| view.data.mouseDownStart = {x: -1.0, y: -1.0}; | ||
| view.endEdit(); | ||
| event.consumed = true; | ||
| }; | ||
|
|
||
| view.onMouseMove = function(view, event) { | ||
| if(!event.mouseButtons.left || view.data.mouseDownStart.x === -1.0) | ||
| return; | ||
| var pos; | ||
| if(view.data.isVertical) | ||
| { | ||
| event.mousePosition.y -= view.data.handleWidth / 2; | ||
| pos = 1 - (view.data.handleRange - event.mousePosition.y) / view.data.handleRange; | ||
| } | ||
| else | ||
| { | ||
| event.mousePosition.x -= view.data.handleWidth / 2; | ||
| pos = 1 - (view.data.handleRange - event.mousePosition.x) / view.data.handleRange; | ||
| } | ||
| if(pos < 0) | ||
| pos = 0; | ||
| else if(pos > 1) | ||
| pos = 1; | ||
| view.setValueNormalized(pos); | ||
| event.consumed = true; | ||
| }; | ||
|
|
||
| view.onMouseWheel = function(view, event) { | ||
| if(view.data.isVertical) | ||
| { | ||
| if(event.mouseWheel.deltaY != 0) | ||
| { | ||
| if(event.mouseWheel.directionInvertedFromDevice) | ||
| event.mouseWheel.deltaY = -event.mouseWheel.deltaY; | ||
| if (event.modifiers.shift) | ||
| event.mouseWheel.deltaY = event.mouseWheel.deltaY * 0.1; | ||
| view.beginEdit(); | ||
| view.setValueNormalized(view.getValueNormalized() + event.mouseWheel.deltaY / 10); | ||
| view.endEdit(); | ||
| } | ||
| } | ||
| else | ||
| { | ||
| if(event.mouseWheel.deltaX != 0) | ||
| { | ||
| if(event.mouseWheel.directionInvertedFromDevice) | ||
| event.mouseWheel.deltaX = -event.mouseWheel.deltaX; | ||
| if (event.modifiers.shift) | ||
| event.mouseWheel.deltaX = event.mouseWheel.deltaX * 0.1; | ||
| view.beginEdit(); | ||
| view.setValueNormalized(view.getValueNormalized() + event.mouseWheel.deltaX / 10); | ||
| view.endEdit(); | ||
| } | ||
| } | ||
| event.consumed = true; | ||
| }; | ||
|
|
||
| view.onSizeChanged(view, view.getBounds()); | ||
|
|
112 changes: 92 additions & 20 deletions
112
vstgui/standalone/examples/standalone/resource/scripts/hoveranim.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,106 @@ | ||
| view.default_opacity = 0.5; | ||
| view.opacity = view.default_opacity; | ||
| view.opacityTimer = createTimer (view, 16, function (view) { | ||
| view.opacity += view.opacityChange; | ||
| if (view.opacityChange > 0) | ||
| // Hover Opacity Animation Script | ||
| // This example script changes the opacity of the view | ||
| // when the mouse enters or exits the view | ||
|
|
||
| // option: use full opacity on focus | ||
| // when true the opacity is 1 when the view has focus, even if the mouse is outside | ||
| // otherwise the view will use the default opacity instead | ||
| view.option.use_full_opacity_on_focus = true; | ||
|
|
||
| // the opacity to use when the view is not hovered by the mouse | ||
| view.option.default_opacity = 0.6; | ||
|
|
||
| // the current opacity of the view is stored in view.opacity | ||
| view.opacity = view.option.default_opacity; | ||
|
|
||
| // the function which is called when the timer fires (see view.opacity_timer) | ||
| view.onOpacityTimer = function(view) { | ||
| view.opacity += view.opacity_change; | ||
| if (view.opacity_change > 0) | ||
| { | ||
| if (view.opacity > 1) | ||
| { | ||
| view.opacity = 1; | ||
| view.opacityTimer.stop(); | ||
| view.opacity_timer.stop(); | ||
| } | ||
| } | ||
| else | ||
| { | ||
| if (view.opacity <= view.default_opacity) | ||
| if (view.opacity <= view.option.default_opacity) | ||
| { | ||
| view.opacity = view.default_opacity; | ||
| view.opacityTimer.stop(); | ||
| view.opacity = view.option.default_opacity; | ||
| view.opacity_timer.stop(); | ||
| } | ||
| } | ||
| view.setAttribute("opacity", view.opacity); | ||
| }); | ||
| view.setAttribute("mouse-enabled", true); | ||
| view.setAttribute("opacity", view.opacity); | ||
| view.onRemoved = function (view) { view.opacityTimer.stop(); }; | ||
| view.onMouseEnter = function (view, event) { | ||
| view.opacityChange = 0.1; | ||
| view.opacityTimer.start(); | ||
| }; | ||
| view.onMouseExit = function (view, event) { | ||
| view.opacityChange = -0.05; | ||
| view.opacityTimer.start(); | ||
| event.consume = 1; | ||
|
|
||
| // the timer to change the opacity is stored in view.opacity_timer | ||
| view.opacity_timer = createTimer(view, 16, view.onOpacityTimer); | ||
|
|
||
| // variable to remember the state of the focus | ||
| view.has_focus = false; | ||
|
|
||
| // variable to remember if the mouse is inside when the view took focus | ||
| 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 if the option is set | ||
| view.onTookFocus = function(view) { | ||
| if(view.option.use_full_opacity_on_focus) | ||
| { | ||
| 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 if the option is set | ||
| view.onLostFocus = function(view) { | ||
| if(view.option.use_full_opacity_on_focus) | ||
| { | ||
| 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); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters