Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

corrections for DexedTheme v2 #443

Merged
merged 2 commits into from
Jul 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 38 additions & 6 deletions Documentation/DexedTheme.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
Dexed Theme
===========
Last update: 26 July 2024


Dexed UI can be themed if you want a different colour combination or background images.

You need need to create a file named "DexedTheme.xml" and it must be placed in the same directory where "Dexed.xml" is created. On Windows, this is C:\Users\\<your user name>\AppData\Roaming\DigitalSuburban" and on Mac it is "~/Library/Application Support/DigitalSuburban"
You need need to create a file named "DexedTheme.xml" and it must be placed in the same directory where "Dexed.xml" is created. On Windows, this is "C:\Users\&lt;your user name&gt;\AppData\Roaming\DigitalSuburban\Dexed" and on Mac it is "~/Library/Application Support/DigitalSuburban/Dexed" (FIXME!), and in Linux it is "~/.local/share/DigitalSuburban/Dexed".

Colour id are analogous to JUCE color ID; see [DXLookNFeel() class](../Source/DXLookNFeel.cpp) for a complete list a defined colours id. Colour value is the hexa decimal values (from 0 to 0xFF) for ALPHA RED BLUE GREEN.
For ALPHA, 0x00 is completely transparent, 0xFF is opaque.

Known colour keys; simply override those you want different.

Expand All @@ -28,18 +31,47 @@ PopupMenu::backgroundColourId
PopupMenu::textColourId
PopupMenu::highlightedTextColourId
PopupMenu::highlightedBackgroundColourId
TreeView::backgroundColourId
DirectoryContentsDisplayComponent::highlightColourId
DirectoryContentsDisplayComponent::textColourId
ScrollBar::thumbColourId
Dexed::backgroundId
Dexed::fillColourId
```

Image id are the file name defined in [ui folder](../Resources/ui). If it cannot find the file, the image will no longer be rendered. The image path is relative to the path where "DexedTheme.xml" is defined.
Note that sizes in pixels and structures of the images should be same as original ones, because the layout of GUI based on these hardcoded fix sizes. Recently, the following image ids could be specified:

Knob_68x68.png
Switch_96x52.png
SwitchLighted_48x26.png
Switch_64x64.png
ButtonUnlabeled_50x30.png
Slider_52x52.png
Scaling_36_26.png
Light_28x28.png
LFO_36_26.png
OperatorEditor_574x436.png
GlobalEditor_1728x288.png


Example configuration
---------------------
Example ``DexedTheme.xml`` configuration
----------------------------------------

```xml
<dexedTheme>
<colour id="TextEditor::textColourId" value="0xFFFF33FF"/>
<image id="Knob_34x34.png" path="myTheme/Knob_34x34.png"/>
<colour id="PopupMenu::backgroundColourId" value="0xff0000ff"/>
<colour id="PopupMenu::textColourId" value="0xffffffff"/>
<colour id="PopupMenu::highlightedTextColourId" value="0xffffff00"/>
<colour id="PopupMenu::highlightedBackgroundColourId" value="0xff00ffff"/>
<colour id="ScrollBar::thumbColourId" value="0xFFC0C0C0"/>
<image id="Light_28x28.png" path="myTheme/GreenLight_28x28.png"/>
</dexedTheme>
```
```

As the result:
- the colors of the background of popup menus, the text of normal menu items, and the text and background of highlighted menu items are changed to opaque blue, white, yellow, and cyan,
- the color of thumbnail of scrollbars is changed to opaque lightgray,
- the color of bright LEDs are changed to green from red (if there is a folder named ``myTheme`` within the subdirectory where your ``Dexed.xml`` and ``DexedTheme.xml`` files are located, and there is the file ``GreenLight_28x28.png`` containing the image of a red LED inside that ``myTheme`` subdirectory).

Note that ``DexedTheme.xml``are loaded only once during the initialization when Dexed (either the Standalone or the plugin version) is launched.
Binary file added Documentation/GreenLight_28x28.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
252 changes: 181 additions & 71 deletions Source/DXLookNFeel.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -18,28 +18,81 @@
*
*/

#include <inttypes.h>
#include <stdint.h>

#include "DXLookNFeel.h"
#include "DXComponents.h"
#include "Dexed.h"
#include "PluginProcessor.h"

#define REG_COLOUR(id, value) setColour(id, value); colourMap.set(#id, id)

/*
// Loads an image from the file specified by ``path`` and
// returns it.
// Otherwise it returns ``nullptr``, if the image was not loaded successfully.
//
// I propose it for deprecation.
//
Image findImage(String path) {
Image img;
if ( path.length() <= 3 )
return img;
File imgFile(path);
//File imgFile(path); // it might cause an assertion in juce_File.cpp
File imgFile = File::getCurrentWorkingDirectory().getChildFile(path);
img = ImageCache::getFromFile(imgFile);
if (img.isNull()) {
TRACE("img.isNull() == true: cannot load image from the path=%s", path.toRawUTF8());
}
return img;
}
*/


// Loads an image from the file specified by ``path`` and
// strore it in variable ``image``, only if the image was
// loaded successfully from the file.
// Otherwise, content of variable ``image`` is not altered.
void replaceImage(String path, Image &image) {
Image img;
if (path.length() <= 3) {
return;
}
File imgFile = File::getCurrentWorkingDirectory().getChildFile(path);
img = ImageCache::getFromFile(imgFile);
if (!img.isNull()) {
// check sizes
int hnew = img.getHeight();
int wnew = img.getWidth();
int horig = image.getHeight();
int worig = image.getWidth();
if (horig != hnew || worig != wnew) {
TRACE("WARNING: new image sizes (h=%d,w=%d) differ from original ones (h=%d, w=%d)", hnew, wnew, horig, worig);
}

// store the new image
//
// TODO: if we really do not want allow to replace the original image
// with a new one having different size, then the previous ``if`` statement
// should be supplemented with an ``else`` branch, and the following
// assignment should be moved into this ``else`` branch.
image = img;
}
else {
TRACE("ERROR: img.isNull() == true: cannot load image from the path=%s", path.toRawUTF8());
}
}

DXLookNFeel::DXLookNFeel() {
Colour ctrlBackground;

DexedAudioProcessor::dexedAppDir.setAsCurrentWorkingDirectory();
ctrlBackground = Colour(20,18,18);

// WARNING! If you modify the colour IDs here, please actualize the file ''DexedTheme.md''
// in the subdirectory ``~/dexed/Documentation/``

REG_COLOUR(TextButton::buttonColourId,Colour(0xFF0FC00F));
REG_COLOUR(TextButton::textColourOnId, Colours::white);
REG_COLOUR(TextButton::textColourOffId, Colours::white);
Expand All @@ -61,7 +114,12 @@ DXLookNFeel::DXLookNFeel() {
REG_COLOUR(TreeView::backgroundColourId, background);
REG_COLOUR(DirectoryContentsDisplayComponent::highlightColourId, fillColour);
REG_COLOUR(DirectoryContentsDisplayComponent::textColourId, Colours::white);


// Register ``Scrollbar::thumbColourId`` to allow its redefinion in ``DexedTheme.xml``.
REG_COLOUR(ScrollBar::thumbColourId, background.darker());

// WARNING! If you modify the images here, please actualize the file ''DexedTheme.md''
// in the subdirectory ``~/dexed/Documentation/``
imageKnob = ImageCache::getFromMemory(BinaryData::Knob_68x68_png, BinaryData::Knob_68x68_pngSize); // 2x
imageSwitch = ImageCache::getFromMemory(BinaryData::Switch_96x52_png, BinaryData::Switch_96x52_pngSize); // 2x
imageSwitchLighted = ImageCache::getFromMemory(BinaryData::SwitchLighted_48x26_png, BinaryData::SwitchLighted_48x26_pngSize);
Expand All @@ -74,87 +132,138 @@ DXLookNFeel::DXLookNFeel() {
imageOperator = ImageCache::getFromMemory(BinaryData::OperatorEditor_574x436_png, BinaryData::OperatorEditor_574x436_pngSize); // 2x
imageGlobal = ImageCache::getFromMemory (BinaryData::GlobalEditor_1728x288_png, BinaryData::GlobalEditor_1728x288_pngSize); // 2x

//---
// load and parse the file ``DexedTheme.xml``
//---

File dexedTheme = DexedAudioProcessor::dexedAppDir.getChildFile("DexedTheme.xml");

if ( ! dexedTheme.existsAsFile() )
if ( ! dexedTheme.existsAsFile() ) {
TRACE("file \"%s\" does not exists", dexedTheme.getFullPathName().toRawUTF8());
return;

}

std::unique_ptr<XmlElement> root = XmlDocument::parse(dexedTheme);
if ( root == NULL )
{
TRACE("ERROR: XmlDocument::parse(): failed");
return;
}

//---
// Get custom ARGB color codes specified by the
// ``colour id`` - ``value`` pairs in ``DexedTheme.xml`` file.
//---

forEachXmlChildElementWithTagName(*root, colour, "colour") {
String name = colour->getStringAttribute("id", "");
if ( name == "" )
continue;
String value = colour->getStringAttribute("value", "");
if ( value == "" )
continue;
if ( value.length() < 8 )
continue;
int conv = strtol(value.toRawUTF8(), NULL, 16);
if ( colourMap.contains(name) ) {
setColour(colourMap[name], Colour(conv));
} else {
if ( name == "Dexed::backgroundId" ) {
background = Colour(conv);
//forEachXmlChildElementWithTagName(*root, colour, "colour") { // deprecated!
for (XmlElement* colour = root->getFirstChildElement(); colour != nullptr; colour = colour->getNextElement()) {
if (colour->hasTagName("colour")) {
String name = colour->getStringAttribute("id", "");
if ( name == "" )
continue;
String value = colour->getStringAttribute("value", "");
if ( value == "" )
continue;
if ( value.length() < 8 ) {
TRACE("ERROR: illegal value=\"%s\" at color id=\"%s\"; skipped", value.toRawUTF8(), name.toRawUTF8());
continue;
}
if ( name == "Dexed::fillColourId" ) {
fillColour = Colour(conv);
//int conv = strtol(value.toRawUTF8(), NULL, 16); // as alpha (MSB) could be above 0x7F, hence ``strtol()`` is inappropiate to convert values exceeding ``0x7FFFFFFF``
char* endptr = NULL;
uint64_t conv = strtoull(value.toRawUTF8(), &endptr, 16);
//TRACE("color id=\"%s\" value=\"%s\": conv=0x%" PRIx64 "", name.toRawUTF8(), value.toRawUTF8(), conv);
if (endptr != nullptr && *endptr != '\0') {
TRACE("ERROR: illegal char #%d in value=\"%s\" at color id=\"%s\"; skipped", (int)(*endptr), value.toRawUTF8(), name.toRawUTF8());
continue;
}
}
if (conv > 0xFFFFFFFFULL) {
TRACE("ERROR: value 0x%" PRIx64 " exceeded the limit at color id=\"%s\"; skipped", conv, name.toRawUTF8());
continue;
}
if ( colourMap.contains(name) ) {
setColour(colourMap[name], Colour((uint32_t)conv));
} else {
if ( name == "Dexed::backgroundId" ) {
background = Colour((uint32_t)conv);
continue;
}
else if ( name == "Dexed::fillColourId" ) {
fillColour = Colour((uint32_t)conv);
continue;
}
TRACE("ERROR: color id=\"%s\" not found in colourMap; skipped.", name.toRawUTF8());
}
}
}

// TODO: THIS IS DEAD CODE. NOBODY IS USING THIS.
forEachXmlChildElementWithTagName(*root, image, "image") {
String name = image->getStringAttribute("id", "");
String path = image->getStringAttribute("path", "");
if ( name == "Knob_34x34.png" ) {
imageKnob = findImage(path);
continue;
}
if ( name == "Switch_48x26.png" ) {
imageSwitch = findImage(path);
continue;
}
if ( name == "SwitchLighted_48x26.png" ) {
imageSwitchLighted = findImage(path);
continue;
}
if ( name == "Switch_32x64.png" ) {
imageSwitchOperator = findImage(path);
continue;
}
if ( name == "ButtonUnlabeled_50x30.png" ) {
imageButton = findImage(path);
continue;
}
if ( name == "Slider_26x26.png" ) {
imageSlider = findImage(path);
continue;
}
if ( name == "Scaling_36_26.png" ) {
imageScaling = findImage(path);
continue;
}
if ( name == "Light_14x14.png" ) {
imageLight = findImage(path);
continue;
}
if ( name == "LFO_36_26.png" ) {
imageLFO = findImage(path);
continue;
}
if ( name == "OperatorEditor_287x218.png" ) {
imageOperator = findImage(path);
continue;
}
if ( name == "GlobalEditor_864x144.png" ) {
imageGlobal = findImage(path);
continue;
}
//---
// Get the custom images specified by the
// ``image`` - ``path`` pairs in the "Dexed.xml" file.
//---

//forEachXmlChildElementWithTagName(*root, image, "image") { // deprecated!
for (XmlElement* image = root->getFirstChildElement(); image != nullptr; image = image->getNextElement()) {
if (image->hasTagName("image")) {
String name = image->getStringAttribute("id", "");
String path = image->getStringAttribute("path", "");
//TRACE("image id=\'%s\' path=\'%s\'", name.toRawUTF8(), path.toRawUTF8());
if (name == /*"Knob_34x34.png"*/"Knob_68x68.png") { // 2x
//imageKnob = findImage(path); // if the new image was not loaded successfully, ``findImage()`` returns ``nullptr``, so the existing ``imageKnob`` is lost
replaceImage(path, imageKnob);
continue;
}
if (name == /*"Switch_48x26.png"*/ "Switch_96x52.png") { // 2x
//imageSwitch = findImage(path);
replaceImage(path, imageSwitch);
continue;
}
if (name == "SwitchLighted_48x26.png") {
//imageSwitchLighted = findImage(path);
replaceImage(path, imageSwitchLighted);
continue;
}
if (name == /*"Switch_32x64.png"*/ "Switch_64x64.png") { // 2x
//imageSwitchOperator = findImage(path);
replaceImage(path, imageSwitchOperator);
continue;
}
if (name == "ButtonUnlabeled_50x30.png") {
//imageButton = findImage(path);
replaceImage(path, imageButton);
continue;
}
if (name == /*"Slider_26x26.png"*/ "Slider_52x52.png") { // 2x
//imageSlider = findImage(path);
replaceImage(path, imageSlider);
continue;
}
if (name == "Scaling_36_26.png") {
//imageScaling = findImage(path);
replaceImage(path, imageScaling);
continue;
}
if (name == /*"Light_14x14.png"*/ "Light_28x28.png") { // 2x
//imageLight = findImage(path);
replaceImage(path, imageLight);
continue;
}
if (name == "LFO_36_26.png") {
//imageLFO = findImage(path);
replaceImage(path, imageLFO);
continue;
}
if (name == /*"OperatorEditor_287x218.png"*/ "OperatorEditor_574x436_png") { // 2x
//imageOperator = findImage(path);
replaceImage(path, imageOperator);
continue;
}
if (name == /*"GlobalEditor_864x144.png"*/ "GlobalEditor_1728x288_png") { // 2x
//imageGlobal = findImage(path);
replaceImage(path, imageGlobal);
continue;
}
TRACE("ERROR: unknown image id=\"%s\"; skipped", name.toRawUTF8());
}
}
}

Expand All @@ -173,7 +282,8 @@ void DXLookNFeel::drawRotarySlider( Graphics &g, int x, int y, int width, int he
const int nFrames = imageKnob.getHeight()/imageKnob.getWidth(); // number of frames for vertical film strip
const int frameIdx = (int)ceil(fractRotation * ((double)nFrames-1.0) ); // current index from 0 --> nFrames-1

const float radius = jmin (width / 2.0f, height / 2.0f) ;
//const float radius = jmin (width / 2.0f, height / 2.0f) ; // float multiplication by 0.5 is faster than division by 2.0
const float radius = jmin(width * 0.5f, height * 0.5f);
const float centreX = x + width * 0.5f;
const float centreY = y + height * 0.5f;
const float rx = centreX - radius - 1.0f;
Expand Down