Code can be found here: https://www.dropbox.com/sh/ihbq5jsb5vrz ... M7Jya?dl=0
Current version: 1.3
- Updated the Gradient Library to a new version that now supports several different interpolation methods. The parameter GRADIENT.interpMethod$ can be set to "linear", "cosine", "poly5", "cubic", or "cubicM". See the documentation in the Gradient Library file for more information.
- Added the ability to change gradient drawing parameters from the Preview screen options. These are GRADIENT.bandWidth, GRADIENT.interpMethod$, and GRADIENT.easeAccel. NOTE: Cubic interpolation methods are supported, but gradients will not be updated until touches are stopped due to the long draw times.
- Expanded the code that is written to gradient.txt to now include shape data and gradient drawing parameters from the Preview screen. The file is now also a standalone script that can be run. It will draw the last saved gradient onto a blank graphics window.
This program is designed to expedite the design of gradients that can be drawn using matt7's Gradient Library (https://kibernetik.pro/forum/viewtopic.php?f=20&t=2229).
The core of this program is the Edit screen, where color and alpha gradient stops can be added, modified, and removed. Modifications to gradient stops include moving their position in the gradient and altering the color or alpha values they contain. Color adjustments can be made in the RGB or HSL color space.
Saving and Loading Gradients:
A full-fledged Save screen and Load screen where multiple gradients can be saved and reopened for editing is planned, but for now only the following basic functionality is implemented:
Selecting "Save" in the menu will do two things. The first thing is it will update the gradient.dat file that is loaded on program startup, so the next time the program is started it will load the last saved gradient from this file. The second thing is it will update the gradient.txt file that contains a standalone script for drawing the last saved gradient. This is provided so that the code can be copy-pasted into another program for use with the Gradient Library.
Selecting "Load" in the menu will reset the gradient being edited or previewed to the last saved gradient.
While editing a gradient, it may be desired to see how that gradient will look drawn across a shape other than the fixed horizontal rectangle on the Edit screen. The Preview screen allows you to see the gradient across any shape in any direction supported by the Gradient Library. Handles also allow the resizing of these shapes. The list on the left side of the screen provides various display options, such as toggling outline visibility, toggling handle visibility, and cycling through different backgrounds (grid, white, black, and clear).
- To add a gradient stop, touch and hold the (+) button on the left side of the screen. A new gradient stop will appear, which can be dragged onto the gradient as either a color or an alpha gradient stop. While dragging to select the position the gradient stop will automatically update to match the current color or alpha value at that position in the gradient. This is useful for fine-tuning gradient transitions to lean more towards one color or alpha value than another.
- To remove a gradient stop, touch and hold the gradient stop and drag your touch down to the bottom third of the screen. This will remove the gradient stop, but it will still be held for as long as your touch remains active, so you can drag it back onto the gradient if you change your mind.
- While adjusting color and alpha values in the RGB, HSL, or Alpha slider page at the bottom of the screen, you can make finer adjustments by moving your touch towards the top of the screen. In the top third of the screen, your horizontal movements will adjust the slider by 1/5th of your touch movement. This is especially useful when adjusting the hue on the HSL page!
- Touch and drag anywhere on the shape other than a gradient handle to move the gradient.
- When touching a gradient handle, a dashed line guide will show where the handle can be moved.
- To reset the default gradient that is loaded at program startup, simply delete gradient.dat.
- If gradient updating is causing slow performance (during slider and gradient handle adjustments), go to the Global Parameters section in GradientEditor.sb and increase the GRADIENT.bandWidth parameter. 0.5 is the highest resolution (which is unnecessary for this program). 1 is standard, and increasing to 2 or higher will improve performance, though banding may appear in some or all of the gradients.
Scope and Variable Info
With a program this large and extensive, I try to keep scope and variable names organized and grouped logically, but also very short. This helps keep the code more readable and in my opinion, makes it much easier to develop and change. However, for anyone else who wants to look through the code, it may be difficult to tell what all the prefixes and abbreviations used in variable names mean. For help deciphering variable names, see the following file:
One interesting feature of this program is object registration and configuration. ("Objects" refer to pages, sprites, and fields.) I have developed some file scanning features to count the number of each object type for array declarations ahead of their configuration and creation. This allows me to simply add new objects to a screen's config file and never have to worry about resizing the arrays. The code also frequently calls a MATCH function (library file) that looks up an object index from its name, so I never have to worry about inserting new objects ahead of existing ones and changing their index in the page, sprite, or field structures (PG, SP, and FD). The code for the file scanning is found in src/startup/configure_objects.
Some may also be interested in the library files that this program uses. I have provided full documentation for each library file in that file's header. Of particular interest to some may be the following:
- Inspired by sneepy's Click and drag library, TAPPOLL (https://kibernetik.pro/forum/viewtopic.php?f=20&t=661)
- Provides a polling routine for tracking touch 0. This populates the scope TP (for "touchpoll") with many useful variables about the current touch. For example, in this program, adjusting a slider requires the user to touch the slider handle and then move a small amount before the touch is considered a "movement". You can see in my processing code (src/screens/edit/process_E and src/screens/preview/process_P) that handles are moved by subtracting the current touch location from the location of the touch when it was first considered a "movement". I believe this provides a more stable-feeling experience for the user, instead of an object on screen starting to move/jiggle immediately upon being touched. Also provided, though not used anywhere currently in this program, is the ability to detect the direction of the initial movement (TP.d0$), so processing can be altered depending on the direction of the movement. This is similar to scrolling on a webpage, where scrolling up or down locks the scrolling to the vertical axis, but dragging at an angle allows movement in both x,y directions.
- I have not incorporated some of the more advanced touch detections such as double clicks or classifying touches as taps, drags, swipes, etc., like sneepy's TAPPOLL routine. I instead opted for more of a minimalistic approach for processing speed, though I may consider developing some alternative, expanded touchpoll libraries with similar advanced features or even for tracking multiple touches.
- provides RGB <-> HSL conversions
- provides functions for drawing and filling rounded rectangles
- provides easing functions for smoother page and sprite movement (could be expanded, but serves the purposes of this program for now)