From d00c983429f9f604b8066a40c8e883b04117e007 Mon Sep 17 00:00:00 2001 From: James Turner Date: Tue, 10 Jan 2023 13:30:39 +0000 Subject: [PATCH] Canvas widgets: style for Slider Only horizontal mode for now, and not quite right visually, but usable enough to start with. --- .../gui/dialogs/WidgetsFactoryDialog.nas | 9 +++ Nasal/canvas/gui/styles/DefaultStyle.nas | 66 ++++++++++++------ Nasal/canvas/gui/widgets/Slider.nas | 48 ++++++++++--- .../scale-horizontal-fill-backdrop.png | Bin 0 -> 156 bytes .../scale-horizontal-fill-disabled.png | Bin 0 -> 217 bytes .../widgets/scale-horizontal-fill.png | Bin 0 -> 256 bytes .../scale-horizontal-trough-backdrop.png | Bin 0 -> 153 bytes .../scale-horizontal-trough-disabled.png | Bin 0 -> 249 bytes .../widgets/scale-horizontal-trough.png | Bin 0 -> 249 bytes .../widgets/scale-vertical-fill-backdrop.png | Bin 0 -> 193 bytes .../widgets/scale-vertical-fill-disabled.png | Bin 0 -> 213 bytes .../widgets/scale-vertical-fill.png | Bin 0 -> 257 bytes .../scale-vertical-trough-backdrop.png | Bin 0 -> 163 bytes .../scale-vertical-trough-disabled.png | Bin 0 -> 243 bytes .../widgets/scale-vertical-trough.png | Bin 0 -> 246 bytes .../widgets/slider-horizontal-disabled.png | Bin 0 -> 373 bytes .../slider-horizontal-focused-hover.png | Bin 0 -> 597 bytes .../widgets/slider-horizontal-focused.png | Bin 0 -> 575 bytes .../widgets/slider-horizontal-hover.png | Bin 0 -> 510 bytes .../widgets/slider-horizontal.png | Bin 0 -> 459 bytes 20 files changed, 92 insertions(+), 31 deletions(-) create mode 100644 gui/styles/AmbianceClassic/widgets/scale-horizontal-fill-backdrop.png create mode 100644 gui/styles/AmbianceClassic/widgets/scale-horizontal-fill-disabled.png create mode 100644 gui/styles/AmbianceClassic/widgets/scale-horizontal-fill.png create mode 100644 gui/styles/AmbianceClassic/widgets/scale-horizontal-trough-backdrop.png create mode 100644 gui/styles/AmbianceClassic/widgets/scale-horizontal-trough-disabled.png create mode 100644 gui/styles/AmbianceClassic/widgets/scale-horizontal-trough.png create mode 100644 gui/styles/AmbianceClassic/widgets/scale-vertical-fill-backdrop.png create mode 100644 gui/styles/AmbianceClassic/widgets/scale-vertical-fill-disabled.png create mode 100644 gui/styles/AmbianceClassic/widgets/scale-vertical-fill.png create mode 100644 gui/styles/AmbianceClassic/widgets/scale-vertical-trough-backdrop.png create mode 100644 gui/styles/AmbianceClassic/widgets/scale-vertical-trough-disabled.png create mode 100644 gui/styles/AmbianceClassic/widgets/scale-vertical-trough.png create mode 100644 gui/styles/AmbianceClassic/widgets/slider-horizontal-disabled.png create mode 100644 gui/styles/AmbianceClassic/widgets/slider-horizontal-focused-hover.png create mode 100644 gui/styles/AmbianceClassic/widgets/slider-horizontal-focused.png create mode 100644 gui/styles/AmbianceClassic/widgets/slider-horizontal-hover.png create mode 100644 gui/styles/AmbianceClassic/widgets/slider-horizontal.png 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 0000000000000000000000000000000000000000..4b51a9464f0812817a2937f9bf5ec061fbace57e GIT binary patch literal 156 zcmeAS@N?(olHy`uVBq!ia0vp@K+MX)1|;Y0ND~B7$(}BbAr-f#_E~ZrP!Msktyj1% zwEh0h2Spsoq8=ysl`9y!!_TlO@AeQKl#k!DZiFX+0)S0Kc~Zu9IoSXJ literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..f82c818236e7d03aa0fa85ae76738c46f9b96f6b GIT binary patch literal 217 zcmeAS@N?(olHy`uVBq!ia0vp@K+MX)1|;Y0ND~B73p`yMLn>}f?K#cWY#`$D`Kb~| zlSuH(C`GL52MzxJhXnjBvpDB>~ci9qJ8cOu6MkC^ygh&n9M zTsd#%nug-jKIVA{eT>9F*oo{#ktF^zfaYtgLTd@w% Otqh*7elF{r5}E+1uw5?z literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..6d077f03c798ab5bca544fe2134f4f9b15694fdf GIT binary patch literal 256 zcmV+b0ssDqP)6qc^l(o@W4jPOd9zXoqrd_Qs z%Zb~f6no5zq1UY7{Z2D(ng~upgR#ReVD=dP&CKZdN zO$+L}5>@}8?f=sk3;PBA`;&TBcjdm?`}@`93PzW?H&;0?K7I*k7lWs(pUXO@geCw& C-?)JUISV`@i-D@H zgD|6$#_S59pk#?_L`iUdT1k0gQ7S`udAVL@UUqSEVnM22eo^}DcQ#T$MHQYdjv*Y; zx+gdC9x@Pdz4-gh4L3&(SFr_YOjcrvTx^M4E@xS$ykRt5DInPQv}V?vZ!e10sGD88 zHS1av*W!IrKYwh_d!Kv%fdF6P842Uo=NC#=yF@tMm^4rCRjDkWY2*y$gL|}&`f8nB ozyEaE8&4G_PJdP7i6?FTEmzd;Y3cp+8t4WFPgg&ebxsLQ01u>CkN^Mx literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..3c69d5106e18aa2ad208c2bfe6445a199f21e5bd GIT binary patch literal 249 zcmeAS@N?(olHy`uVBq!ia0vp@K+MX)0whf~uA2p-?)JUISV`@i-D@H zgD|6$#_S59pk#?_L`iUdT1k0gQ7S`udAVL@UUqSEVnM22eo^}DcQ#T$MHQYdjv*Y; zx+gdC9x@Pdz4-gh4L3&(SFr_YOjcrvTx^M4E@xS$ykRt5DInPQv}V?vZ!e10sGD88 zHS1av*W!IrKYwh_d!Kv%fdF6P842Uo=NC#=yF@tMm^4rCRjDkWY2*y$gL|}&`f8nB ozyEaE8&4G_PJdP7i6?FTEmzd;Y3cp+8t4WFPgg&ebxsLQ01u>CkN^Mx literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..c13366d1574d963fc8e800cd3d0e95bf502b3dab GIT binary patch literal 193 zcmeAS@N?(olHy`uVBq!ia0vp^tROZAGms2>6tW9Q83g!*xPJQh;p)|^SFT(+bLPz1 zvu97AK7H!csgoy9o;Y#h*s){Ru3fu+{rb(DH*ej#b^G@1J9qBniDk?O>g6m6@(X6@ z>izWT$L~M?wDv!&1qzybx;TbZ-16-{&Bq|XbHM7@jO+jZukG-Nsmh2t;^S~vH0V9& tCke?@b68(ReSQ9Qdu46TbKbN@UiUYQmzVi|y8twT!PC{xWt~$(69C*nT@C;M literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..63b077000936fac11c64a124313c84cc373619a7 GIT binary patch literal 213 zcmV;`04o29P)_*zQ-skNJyT5p@#mEvmPFn8{pD9`h=l=7{V+LmQG zt+#6wWm$GF%MxwdqU*YqV49}Ss;bcUJ({L@5KNL}bIxHH27Kp>Am@Cq>l))Y!dkl% zWQ>IvrfEV^6d)MKF_p~o46QW|HV!*Txr=Osl-c`IFBhD+%jF)5Q$21!;KkdjHsz(gVg<)ZWUKXA8@ zyL<54ByK~LWDe~?K0OWRfXFX!}kIufIUo3& z99v_V&iJP@>ha_h}i>KD@v0BvRP MboFyt=akR{0K^_XYybcN literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..98764752c545e59c7e0abd5e404d1fcb21485824 GIT binary patch literal 243 zcmeAS@N?(olHy`uVBq!ia0vp^tROZA3y?f*n!^mFn2Mb|LpV4>-?)JUISV`@i-9Vx zgD|6$#_S59pk#?_L`iUdT1k0gQ7S`udAVL@UUqSEVnM22eo^}DcQ#T$MMa)2jv*Yf z$uUBQjT`6trZ)RXKR#4k)h5GZKmXNrL%lt@YYrX!@NjLR?&GHAX+dvz-rLQ*Vtnp@ z!ol+gKfG#}obdB>*VMTWpT=)?J68EWSK@}`JmVSWO5I8;U5yw|-f4aQh4-dposIE| iRF>V1&XtpMxEWNBn(3Qgez^l^JA-?)JUISV`@i-9Vx zgD|6$#_S59pk#?_L`iUdT1k0gQ7S`udAVL@UUqSEVnM22eo^}DcQ#T$MWvoDjv*Yf z$uYAITs?n&)vmy0Qwtwj+B);K&G-NMT0;DuS=hsbA0Mvmm{xc&*jTfyt$e=EE6L~e z8y-AQsQ7xA=ft1Xqo>Y&__RJ!`SG6rW;}0r&P$$=p6EL9iqg!6ly`@Uf3>~gv7aY- n#YnI7;miZ)7w+-g#>$}f)XZ?A?!7%g2QYZL`njxgN@xNAm-k;9 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..296875af1547b63d2f14368dc672373d7571075d GIT binary patch literal 373 zcmeAS@N?(olHy`uVBq!ia0vp^d_XM3!3-p0n&d%Ldw@@f>!*(&_V3?+{`~o4$Bvyn zd-gOKKo~%g!-o$afq_GZ4jnvr5J&>m1Hs*~zZZlIGSOM?7@8CV2_?9&U1YtCG{eD&7jr_bJh`2OebzkmO>_QZz)6}5P} zIEGZ*%01&L)MOyydU3&m1tv}}cx&gU{D1v2ujXby^f|i0I5_d?sCZ`k20F8tsae&VxA zOj}c!IqP)V{wNt&;7ro!+2{+o6czrjF*Rkk5^B z&Wv%@m3h#OanX%&%Y$Xhgk|TVhtPy&!gW^Mi)-VObK#0-ziddrY)Q#zK*@Ml%5Y1{ zgJjNcNYQmr(UW=9dsp6pT;Gdp<;}w9#<}m^*6;7{@Xo>T@bK~L>GAC9@$vEU^78Z5 z%JcE>^YQTW^Yird^!4@i_UGdE@b32Z_V@Sq`0?)e^YQrg^!WJr`R?lZ`T6?v^85Sy z{QCN58<$f6001y_QchC<0RaLE4iFR^9Vsd+E;BVcJwZZ8NJ~piP*GoDh^x1`zU}Yu z^7Hfe_xJn!{r&#(6oQxl007BJL_t(|+AYV`7J@(k1;8tID~j0N-5soAfGwi_|Ch+w zv-36p=kNviaF`GH9Go$Ks^0F*=bd&v<>z2eFAnd|@Ar8h7HK;?dFiWDUn%ba-@51; zrC(Y+gxTZHJZ1vK$@9iMCnBQb*O_^Zqloo2mC^b!M21&|xeg-;HrC3XQr3+iyrq>Y zQ|hYZg)=ue%ETZa2RSE9q4M-ZHXCx9RzfDgnyij?gltE(gcSx`yx3bVyM?$7ltsuk jn;F3Z#_SSBw;6^%LeVbm@V0J%=P)vVM+igkzfI#YiK>vV1@o`7yb3pTSM(KJ(>v~7)c17)WN%nS0_jg3^b3*TU zNbqz<@OVV)fLG^|aqO9S?833@#kl6Ppysup=D4Nfx~koxiQc1$->H+{ql(;`fZ?^H z+nIjaoPyVna@wJb+o+V;qKwgoX48vq)QfJ^kaX3DX4RE@)tiFWh-cW6b=jhg+nImf zsFCZ?#q8C~?AFZg*UsN^78ZY@$>WZ^z!iZ^z`-Y z=k@jV_VV!d_V)Mp_xSPd`1A4j_4D}l_4xSs`S|$x`T6?x^!xk!{QLTb_{jbM001g< zQchC<0R#pI2n-Ao6c!g58XO!RA0QzjCN?*0mZ77p>Few6@AdWe`uqL;{)5yO>;M1& z#Ysd#RCwAg!37qAKmY~6kBI@w+TGnPu3{i|f!_Zt^7icvAb9*iIUJUQevbekkgPOY z!(ppgNd^FSYO=mtzn^tqPf~7(IrVEYUo|H}Zk)_FW1bo^l)>Z1Jq8L$?|J2(J%UK* zb>?232%_ze!F}3MknTn2E?oktw$b;DzNty@73YS=81teJ-t73OQJZ!gXT3nEG&|7M ziXLXA5CCVQI^9vaotEQH*j%x~Xu0U;V=gcbB~!1b6$dy$Bt#To`vb$!Dx)U)J&^za N002ovPDHLkV1j=2LDK*L literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..a5f98690de0318b6c89417f0cd32f323c154a289 GIT binary patch literal 510 zcmeAS@N?(olHy`uVBq!ia0vp^d_XM3!3-p0n&d&$$pD`a*H0fm0GVV185x(;I7)~!2q=+N@z%U7;kId|^d9Xobx*sx*KrcEHf}1yQzJC4sty{P5-Mjbr@#AODp1phb?*04sA3l8e`0?YX zPoF-2{`}?3m#<&He*5=UIH7mJ;#JRIy?*=t%hzAO|NQ+Ie(o5ua6fx^dghV+?80l$db>=j$c<9q?swfHVwmsPaPQm642hs`cfS2wc=DfEkkp-T z$&ssiul2pRULD9g$!vyv|K@#cOE1as^>TUH%ZRDUzKmM@3lxQ(u6{1-oD!Md-fbYeE8V0W9!zf+qP}n`t|FVFJFG>(4l$r=B-@0a^uF0J9g~Y zv}x0f88hb2ox5=1!ez^r0TrxSvj!-*dGltVIk#@zx_9s1Ca=g*(NfB&}2E^h(4Qm!P(FPMRmiJ66! zjh%y&i(gJLvUBRph0k8Te)r|euU~)u{4?8Fe+j5^i>HfYNX0GFlh=g~DG0PabPhB4 zcF(kPuL_Gt?SFG&$v=8!-_Gzi2nH@s=5Ka={PttX-g$ku4R4z5+*^8e+tj-IYCKyi zw)S4$C&p6eG5c2LCFXXE*{6)t87GP?4Od~hyF+J>(L1G{tjAXaGge=kw<+|EeU#;| z&EgMMx1W^#98q||CUEDLqN!&%Ij)zhZuVLA+lob?$85UKsV|!(*?zn|XjEml_^Cp} m;i}Dd^KK>oc>H%?!Flmc1DVrVC#GBh#fPV>pUXO@geCxBu;)4e literal 0 HcmV?d00001