diff --git a/Nasal/canvas/gui/dialogs/WidgetsFactoryDialog.nas b/Nasal/canvas/gui/dialogs/WidgetsFactoryDialog.nas index ca9b18844..9b702ee2b 100644 --- a/Nasal/canvas/gui/dialogs/WidgetsFactoryDialog.nas +++ b/Nasal/canvas/gui/dialogs/WidgetsFactoryDialog.nas @@ -84,6 +84,15 @@ var WidgetsFactoryDialog = { }); m.tab_2.addItem(m.resize_button, 5); + m.numericControlsTab = VBoxLayout.new(); + m.tabs.addTab("ncTab", "Numeric Controls", m.numericControlsTab); + m.slider = gui.widgets.Slider.new(m.tabsContent, style, + {"max-value" : 100, + "page-step" : 20, + "tick-count" : 10}) + .setValue(42); + m.numericControlsTab.addItem(m.slider); + return m; }, diff --git a/Nasal/canvas/gui/styles/DefaultStyle.nas b/Nasal/canvas/gui/styles/DefaultStyle.nas index 2c28da5f8..4d572f8ea 100644 --- a/Nasal/canvas/gui/styles/DefaultStyle.nas +++ b/Nasal/canvas/gui/styles/DefaultStyle.nas @@ -709,61 +709,87 @@ DefaultStyle.widgets.frame = { }; -# a horionztal or vertical slider, for selecting / +# a horizontal or vertical slider, for selecting / # dragging over a numerical range DefaultStyle.widgets.slider = { new: func(parent, cfg) { me._root = parent.createChild("group", "slider"); me._createElement("bg", "image") - .set("slice", "10 10"); + .set("slice", "2 6"); - me._createElement("thumb", "image") - .set("slice", "10 10"); + me._createElement("fill", "image") + .set("slice", "2 6"); - me._ticks = 0; - me._ticksPath = nil; + me._fillHeight = me._fill.imageSize()[1]; + me._createElement("thumb", "image"); + me._thumbSize = me._thumb.imageSize(); + + me._ticks = 0; + me._ticksPath = nil; }, setNormValue: func(model, normValue) { var (w, h) = model._size; - var availWidthPos = w - h; # pixel range the thumb can move over - me._thumb.setTranslation(round(availWidthPos * normValue), 0); + var halfThumbWidth = me._thumbSize[0] * 0.5; + var availWidthPos = w - me._thumbSize[0]; + var thumbX = math.round(availWidthPos * normValue); + var thumbY = (h - me._thumbSize[1]) * 0.5; + me._thumb.setTranslation(thumbX - halfThumbWidth, thumbY); + me._fill.setSize(thumbX, me._fillHeight); }, update: func(model) { + var direction = "horizontal"; # set background state var file = me._style._dir_widgets ~ "/"; - file ~= "backdrop-"; + file ~= "scale-" ~ direction ~ "-trough"; if( !model._enabled ) file ~= "-disabled"; me._bg.set("src", file ~ ".png"); + # fill state + var file = me._style._dir_widgets ~ "/"; + file ~= "scale-" ~ direction ~ "-fill"; + if( !model._enabled ) { + file ~= "-disabled"; + } else { + + } + + me._fill.set("src", file ~ ".png"); + # set thumb state file = me._style._dir_widgets ~ "/"; - file ~= "button-"; # should we use a seperate thumb? - if( !model._enabled ) + file ~= "slider-" ~ direction; + if( !model._enabled ) { file ~= "-disabled"; - else if (model._down) - file ~= "-down"; - elsif (model._hover) - file ~= "-hovered"; + } else { + if (model._down) + file ~= "-focused"; + if (model._hover) + file ~= "-hover"; + } me._thumb.set("src", file ~ ".png"); - # set thumb size - var (w, h) = model._size; - # fixme assumes horizonal for now - me._thumb.setSize(h, h); - # update the position as well, since other stuff # may have changed me.setNormValue(model, model._normValue()); }, + setSize: func(model, w, h) + { + var fillTop = (h - me._fillHeight) * 0.5; + me._bg.setTranslation(0, fillTop); + me._fill.setTranslation(0, fillTop); + me._bg.setSize(w, me._fillHeight); + me.setNormValue(model, model._normValue()); + }, + updateRanges: func(minValue, maxValue, numTicks = 0) { if (me._ticks != numTicks) { diff --git a/Nasal/canvas/gui/widgets/Slider.nas b/Nasal/canvas/gui/widgets/Slider.nas index fb425c2f4..44536959d 100644 --- a/Nasal/canvas/gui/widgets/Slider.nas +++ b/Nasal/canvas/gui/widgets/Slider.nas @@ -22,36 +22,62 @@ gui.widgets.Slider = { # TODO : select where value is shown # TODO : select where tick marks are shown - if( style != nil ) { - m._setView( style.createWidget(parent, cfg.get("type", "slider"), cfg) ); - m._view.updateRanges(m._minValue, m._maxValue, m._numTicks); - } + m._setView( style.createWidget(parent, cfg.get("type", "slider"), cfg) ); + m._view.updateRanges(m._minValue, m._maxValue, m._numTicks); return m; }, setValue: func(val) { + me._value = val; if( me._view != nil ) { - me._view.setNormValue(me._normValue()); + me._view.setNormValue(me, me._normValue()); } return me; }, - + setDown: func(down = 1) + { + if (me._down == down ) + return me; + + me._down = down; + me._onStateChange(); + return me; + }, # protected: _setView: func(view) { call(gui.Widget._setView, [view], me); - # var el = view._root; - # el.addEventListener("mousedown", func if( me._enabled ) me.setDown(1)); - # el.addEventListener("mouseup", func if( me._enabled ) me.setDown(0)); + var el = view._root; + el.addEventListener("mousedown", func if( me._enabled ) me.setDown(1)); + el.addEventListener("mouseup", func if( me._enabled ) me.setDown(0)); # el.addEventListener("click", func if( me._enabled ) me.toggle()); + el.addEventListener("mouseleave",func me.setDown(0)); + + view._thumb.addEventListener("drag", func(e) { + me._dragThumb(e); + e.stopPropagation(); + }); + }, - # el.addEventListener("mouseleave",func me.setDown(0)); - # el.addEventListener("drag", func(e) e.stopPropagation()); + _dragThumb: func(event) + { + var vr = me._view._root; + var viewPosX = vr.canvasToLocal([event.clientX, event.clientY])[0]; + var width = me._size[0]; + + if (viewPosX < 0) { + me.setValue(me._minValue); + } elsif (viewPosX > width) { + me.setValue(me._maxValue); + } else { + var norm = viewPosX / width; + me.setValue(norm * ( me._maxValue - me._minValue)); + } }, # return value as its normalised equivalent diff --git a/gui/styles/AmbianceClassic/widgets/scale-horizontal-fill-backdrop.png b/gui/styles/AmbianceClassic/widgets/scale-horizontal-fill-backdrop.png new file mode 100644 index 000000000..4b51a9464 Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/scale-horizontal-fill-backdrop.png differ diff --git a/gui/styles/AmbianceClassic/widgets/scale-horizontal-fill-disabled.png b/gui/styles/AmbianceClassic/widgets/scale-horizontal-fill-disabled.png new file mode 100644 index 000000000..f82c81823 Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/scale-horizontal-fill-disabled.png differ diff --git a/gui/styles/AmbianceClassic/widgets/scale-horizontal-fill.png b/gui/styles/AmbianceClassic/widgets/scale-horizontal-fill.png new file mode 100644 index 000000000..6d077f03c Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/scale-horizontal-fill.png differ diff --git a/gui/styles/AmbianceClassic/widgets/scale-horizontal-trough-backdrop.png b/gui/styles/AmbianceClassic/widgets/scale-horizontal-trough-backdrop.png new file mode 100644 index 000000000..459e0d853 Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/scale-horizontal-trough-backdrop.png differ diff --git a/gui/styles/AmbianceClassic/widgets/scale-horizontal-trough-disabled.png b/gui/styles/AmbianceClassic/widgets/scale-horizontal-trough-disabled.png new file mode 100644 index 000000000..3c69d5106 Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/scale-horizontal-trough-disabled.png differ diff --git a/gui/styles/AmbianceClassic/widgets/scale-horizontal-trough.png b/gui/styles/AmbianceClassic/widgets/scale-horizontal-trough.png new file mode 100644 index 000000000..3c69d5106 Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/scale-horizontal-trough.png differ diff --git a/gui/styles/AmbianceClassic/widgets/scale-vertical-fill-backdrop.png b/gui/styles/AmbianceClassic/widgets/scale-vertical-fill-backdrop.png new file mode 100644 index 000000000..c13366d15 Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/scale-vertical-fill-backdrop.png differ diff --git a/gui/styles/AmbianceClassic/widgets/scale-vertical-fill-disabled.png b/gui/styles/AmbianceClassic/widgets/scale-vertical-fill-disabled.png new file mode 100644 index 000000000..63b077000 Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/scale-vertical-fill-disabled.png differ diff --git a/gui/styles/AmbianceClassic/widgets/scale-vertical-fill.png b/gui/styles/AmbianceClassic/widgets/scale-vertical-fill.png new file mode 100644 index 000000000..7de2b8c86 Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/scale-vertical-fill.png differ diff --git a/gui/styles/AmbianceClassic/widgets/scale-vertical-trough-backdrop.png b/gui/styles/AmbianceClassic/widgets/scale-vertical-trough-backdrop.png new file mode 100644 index 000000000..0b6653139 Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/scale-vertical-trough-backdrop.png differ diff --git a/gui/styles/AmbianceClassic/widgets/scale-vertical-trough-disabled.png b/gui/styles/AmbianceClassic/widgets/scale-vertical-trough-disabled.png new file mode 100644 index 000000000..98764752c Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/scale-vertical-trough-disabled.png differ diff --git a/gui/styles/AmbianceClassic/widgets/scale-vertical-trough.png b/gui/styles/AmbianceClassic/widgets/scale-vertical-trough.png new file mode 100644 index 000000000..101e157fd Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/scale-vertical-trough.png differ diff --git a/gui/styles/AmbianceClassic/widgets/slider-horizontal-disabled.png b/gui/styles/AmbianceClassic/widgets/slider-horizontal-disabled.png new file mode 100644 index 000000000..296875af1 Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/slider-horizontal-disabled.png differ diff --git a/gui/styles/AmbianceClassic/widgets/slider-horizontal-focused-hover.png b/gui/styles/AmbianceClassic/widgets/slider-horizontal-focused-hover.png new file mode 100644 index 000000000..a40bb9c98 Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/slider-horizontal-focused-hover.png differ diff --git a/gui/styles/AmbianceClassic/widgets/slider-horizontal-focused.png b/gui/styles/AmbianceClassic/widgets/slider-horizontal-focused.png new file mode 100644 index 000000000..235ef4268 Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/slider-horizontal-focused.png differ diff --git a/gui/styles/AmbianceClassic/widgets/slider-horizontal-hover.png b/gui/styles/AmbianceClassic/widgets/slider-horizontal-hover.png new file mode 100644 index 000000000..a5f98690d Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/slider-horizontal-hover.png differ diff --git a/gui/styles/AmbianceClassic/widgets/slider-horizontal.png b/gui/styles/AmbianceClassic/widgets/slider-horizontal.png new file mode 100644 index 000000000..93a7ae8ea Binary files /dev/null and b/gui/styles/AmbianceClassic/widgets/slider-horizontal.png differ