Jump to content
_Stevie_

Whats the best way to automate this task? (GUI slider creation)

Recommended Posts

Hey all,

I'm designing a silder for a touch application and I was wondering:
what is the fastest way to get 128 different slider positions?
(got Designer and Photo).

Example of 3 different positions:

1.png.363818470c125b27c7303ed270c1481d.png2.png.9598d69b72b685e46ee47dfe9fc64428.png3.png.1261144f4c78b9c13a20eed070a479ff.png


Cheers,

Stevie

Edited by _Stevie_

Share this post


Link to post
Share on other sites

Welcome to the forum Stevie.
I might have a solution for you but it depends on a “bug” being fixed in Designer (if it is indeed a bug).
I’ll try and remember to keep checking the beta updates to see if anything happens and to update this thread if my possible solution is actually workable.

Share this post


Link to post
Share on other sites
On 6/16/2019 at 3:31 AM, _Stevie_ said:

Hey all,

I'm designing a silder for a touch application and I was wondering:
what is the fastest way to get 128 different slider positions?
(got Designer and Photo).

Example of 3 different positions:

1.png.363818470c125b27c7303ed270c1481d.png2.png.9598d69b72b685e46ee47dfe9fc64428.png3.png.1261144f4c78b9c13a20eed070a479ff.png


Cheers,

Stevie

Hi Stevie,

Welcome to the forums :)

As far as I'm aware there is no way to do this I'm afraid.

Thanks

C


Please tag me using @ in your reply so I can be sure to respond ASAP.

Share this post


Link to post
Share on other sites

Hey guys,

thanks for the welcome and the feedback!

For the time being, I’m doing the graphics in Designer and the button creation takes place in Knobman. That’s a workable solution :)

Cheers,

Stevie

Share this post


Link to post
Share on other sites

No solution to offer, but I am astounded if the best way to create a slider in an app is to export 128 different graphics!

Surely you only need two: empty and full. Then use code to crossfade between the two at the appropriate point?

For a simple slider (essentially a coloured rectangle) why use an image at all? A few lines of javascript and css should surely do it?


Win10 Home x64   |   AMD Ryzen 7 2700X @ 3.7GHz   |   16 GB RAM   |   1TB SSD   |   nVidia GTX 1660   |   Huion 1060 Plus

How I make GIFs >>> ScreenToGIF (Windows only, Open Source, Portable, ~600kB)

Share this post


Link to post
Share on other sites
1 hour ago, Aammppaa said:

No solution to offer, but I am astounded if the best way to create a slider in an app is to export 128 different graphics!

Surely you only need two: empty and full. Then use code to crossfade between the two at the appropriate point?

For a simple slider (essentially a coloured rectangle) why use an image at all? A few lines of javascript and css should surely do it?

I would have thought it would be the frame (as image?) and then the colour (plus co-ordinates) for the filling.


MacBook Pro (13-inch, Mid 2012) Mac OS 10.12.6 || Mac Pro (Late 2013) Mac OS 10.14.5

Affinity Designer 1.8.3 | Affinity Photo 1.8.3 | Affinity Publisher 1.8.3 | Affinity Designer Beta 1.8.3.2 | Affinity Photo Beta 1.8.3.180 | Affinity Publisher Beta 1.8.3.651

Share this post


Link to post
Share on other sites

Hmm the need of 128 slider images just for one slider sounds somehow to be app related very inefficient to me. Suppose you have to setup different colored sliders, that would mean to setup a bunch of images then just for simpler UI elements. It would be probably more efficient to programatically build a custom drawn slider.

However, since the Affinity line doesn't support scripting your best choice is possibly to code some SVG script here then, meaning to either draw a two rects one positioned over the over and variing the cover size/height of the top filled rect, or to use one rect and a apply various different dimensioned gradient fills for that. In order to build 128 or more of those, perform the whole through a loop with variing loop index and var settings for the positions, size and fill values.


☛ Affinity Designer 1.8.3 ◆ Affinity Photo 1.8.3 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

It's possible with some javascript code and fmbling with SVG's XML.

But I had to use inkScape to get more human readable code an simple SVG... In the zip archive, there's a HTML page with a form. There're input for begining and end of SVG code, and the part that's be repeated (128 times here).

The script repeat 128 times the code, giving different IDs to each paths, etc., and calculating the growth of the rectangle with the gradient.

It was a fun puzzle, and as usual, I suspect it take as much time creating the script as it would take doing the sliders manually :D But it's more fun.

 

I end up with code for a SVG file containing the 128 sliders, but AD wasn't able to open it properly (only one slider).
I had to create 2 SVG files: one with sliders from 1 to 64, one with sliders from 65 to 128. It looks like a bug.

Once those SVG files opened in AD, I only had to create slices and export them to PNG, and I used Gimp to import those 128 sliders as layers and export them as GIF.

silders.gif.f59c08f83f5892897981ac21b35e80af.gif   silders_repeat.gif.cfa331dff8322aceb3457752336e7ac0.gif

sliders_project.zip

Share this post


Link to post
Share on other sites

Amazing work Wosven, thanks so much! Gonna check that out in a few.

@v_kyr, it’s a bit more complex actually. I’m using Reaper (digital audio workstation) and the devs created a very in-depth API.

So, users can write their own scripts in LUA. A very talented coder named Leon created this powerful script called LBX Stripper, which enables us to control Reaper from a touch screen.

Since this is a LUA script, of course there are limits. I don’t think the API provides SVG support. That’s why things are the way they are.

Share this post


Link to post
Share on other sites
2 hours ago, _Stevie_ said:

Since this is a LUA script, of course there are limits. I don’t think the API provides SVG support. That’s why things are the way they are.

 

But that ReaScript API supports in it's ReaScript/EEL and ReaScript/Lua API (so in both) to create/draw filled/unfilled rectangles...

Quote

EEL: gfx_rect(x,y,w,h[,filled])

Fills a rectangle at x,y, w,h pixels in dimension, filled by default.



EEL: gfx_rectto(x,y)

Fills a rectangle from gfx_x,gfx_y to x,y. Updates gfx_x,gfx_y to x,y.



EEL: gfx_roundrect(x,y,w,h,radius[,antialias])

Draws a rectangle with rounded corners.

... and for LUA the same functions ...

Quote

Lua: gfx.rect(x,y,w,h[,filled])

Fills a rectangle at x,y, w,h pixels in dimension, filled by default.



Lua: gfx.rectto(x,y)

Fills a rectangle from gfx.x,gfx.y to x,y. Updates gfx.x,gfx.y to x,y.



Lua: gfx.roundrect(x,y,w,h,radius[,antialias])

Draws a rectangle with rounded corners.

...so with these functions via a loop which alters a rect with gfx.rectto(x,y) it should be easy to do that directly via Reaper scripting.


☛ Affinity Designer 1.8.3 ◆ Affinity Photo 1.8.3 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

That's great info, thanks. I'll pass that on. Leon is extremely busy, since he's doing all that in his free time and his todo list is already VERY long :D

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.