_Stevie_ Posted June 16, 2019 Share Posted June 16, 2019 (edited) 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: Cheers, Stevie Edited June 16, 2019 by _Stevie_ Quote Link to comment Share on other sites More sharing options...
GarryP Posted June 17, 2019 Share Posted June 17, 2019 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. Quote Link to comment Share on other sites More sharing options...
Staff Callum Posted June 17, 2019 Staff Share Posted June 17, 2019 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: 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 Quote Please tag me using @ in your reply so I can be sure to respond ASAP. Link to comment Share on other sites More sharing options...
_Stevie_ Posted June 17, 2019 Author Share Posted June 17, 2019 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 Quote Link to comment Share on other sites More sharing options...
Aammppaa Posted June 17, 2019 Share Posted June 17, 2019 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? Quote Win10 Home x64 | AMD Ryzen 7 2700X @ 3.7GHz | 48 GB RAM | 1TB SSD | nVidia GTX 1660 | Wacom Intuos Pro Link to comment Share on other sites More sharing options...
Old Bruce Posted June 17, 2019 Share Posted June 17, 2019 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. Quote Mac Pro (Late 2013) Mac OS 12.7.4 Affinity Designer 2.4.0 | Affinity Photo 2.4.0 | Affinity Publisher 2.4.0 | Beta versions as they appear. I have never mastered color management, period, so I cannot help with that. Link to comment Share on other sites More sharing options...
_Stevie_ Posted June 17, 2019 Author Share Posted June 17, 2019 Yes, I also thought that two states would be enough. But the software I’m using unfortunately needs the whole shebang. Aammppaa 1 Quote Link to comment Share on other sites More sharing options...
v_kyr Posted June 18, 2019 Share Posted June 18, 2019 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. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
Wosven Posted June 19, 2019 Share Posted June 19, 2019 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 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. sliders_project.zip v_kyr 1 Quote Link to comment Share on other sites More sharing options...
_Stevie_ Posted June 19, 2019 Author Share Posted June 19, 2019 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. Quote Link to comment Share on other sites More sharing options...
v_kyr Posted June 19, 2019 Share Posted June 19, 2019 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. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
_Stevie_ Posted June 19, 2019 Author Share Posted June 19, 2019 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.