Hgoda90 - Bezel Preset Editor

[hgoda90]

This is essentially an editor that allows for the editing of RetroArch presets using a web browser. It has been made to be specifically be used for the bezel shaders, koko-aio and Mega Bezel, under RetroArch shaders folder.

Presets can be custom made, loaded, saved, copied and edited. There is also the availability to convert multiple different color formats to Mega Bezel HSB and koko-aio’s Color: RGB style.

To use go to https://hgoda90.github.io/bezel-preset-editor/ or download the releases under Github releases and use a localhost ie xampp.

GitHub - hgoda90/bezel-preset-editor: Load, Edit and Save koko-aio and Mega...

Instructions

Popups

Color Vision

Load

[hunterk]

neato! this looks like a super-useful tool. Thanks for making and sharing it!

[hgoda90]

I definitely enjoyed making it. I think given time somebody would have eventually made it.

[hgoda90]

Add

– Custom Preset button to allow for copying over custom changes

Change

– Put pathtofile for image and preset paths

[alexb3d]

What is color conversion needed for?

[hgoda90]

The conversion helps mainly with koko-aio but Mega Bezel is in HSB format. It started out as a HEX to koko-aio Color: RGB with custom equations. I just thought to go ahead and add RGB, HSB and HSL format as well along with Mega Bezel.

To get #553A99 with koko-aio

BEZEL_R = "-0.1326953125"
BEZEL_G = "-0.2160156250"
BEZEL_B = "0.0771484375"

[hgoda90]

If anyone wants to follow the production you can start at

Koko-aio shader discussions and updates

Made a quick php version of the same thing myself. <?php $HEX = "808080"; $contrast = "1.30"; $HEXError = $contrastError = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["hex"])) { $HEXError = "HEX is required"; } else if(check_hex($_POST["hex"]) == 1){ $HEX = strtoupper(str_replace("#", "", $_POST["hex"])); list($R, $G, $B) = sscanf("#".$HEX, "#%02x%02x%02x"); } else{ $HEXError = "Input needs to be a RRGGBB value"; } if(empty($_POST["contrast"])){ $contr…

Second

Koko-aio shader discussions and updates

I went ahead and created a github page for the converter. If anybody runs into a problem with it then let me know. https://hgoda90.github.io/HEX-koko-aio-Color-Converter/ Edit: Tweaked the equation some more. if(contrast < 1){ $('#bezel-r').text((((hexToRgb(hex).r - 128) * (0.395 - (contrast - 1.30) * ((3.75 - contrast) * (contrast * .1 + .105) + (contrast * .01 + .0105))) / 128)).toFixed(10)); $('#bezel-g').text((((hexToRgb(hex).g - 128) * (0.395 - (contrast - 1.30) * ((3.75 - contrast)…

Follow the rest starting at

Hgoda90 - Mega Bezel Graphics + Varieties

Did another full day of working on HEX to koko-aio Color Converter github page. Add – Small personal watermark – Console Color Swatches Change – Only Contrast Settings 0.70 to 2.40 can be selected Note: The Console Color Swatches settings are copied to the clipboard once clicked on. Preview [HEX to koko-aio Color Converter update]

It just started as a HEX to koko-aio color converter and grew really quick from there, 2 weeks.

[hgoda90]

An idea, just have figure out where to place Color Vision.

Edit: Figured it out.

[hgoda90]

Add

– Side text

Change

– Color Vision square is now based around what Sample shape is used.

[hgoda90]

Thought of a grid layout for those that would want to load more presets. It would still be two but changeable to 4 and I am also thinking of adding drag and drop to load presets.

For those wondering the first text-box will be the only one with changeable settings.

[hgoda90]

Add

– Drag and Drop Loading
– Grid View

Note: Text Box has to be set to edit for drag and drop loading to work.

[hgoda90]

Did a quick change of removing edit from text 2-4 and rearrange the action buttons. I removed the edit buttons since those are meant to be used for rearranging the presets and the button just switched in and out of readonly.

[hgoda90]

Quick Update

– Add koko-aio image slider

[hgoda90]

Bezel Preset Editor v1.0.1

Download

Add

– Load Button
– HSL Format
– Color2Color for color conversion
– Side Text and Grid View
– Drag and Drop Loading
– koko-aio Image Slider

Change

– Swatches
– Remove Edit Buttons
– Rearrange Action Buttons

[hgoda90]

Thinking of getting rid of grid view and go with navigation tabs instead. Only looks have been changed to show the concept first.

Feedback and suggestions are welcome.

[hgoda90]

Add

– Pass Text Button

Change

– Grid View to Navigation Dots

Note: Navigation Dots can be changed using arrow keys.

[hgoda90]

Quick Update

– Add Multiple File Drag & Drop

Note: Works only on the first side text area and up to five files

[hgoda90]

Changed navigation dot keys to page down and page up. Using the editor with the arrows keys got frustrating.

[hgoda90]

WIP

I thought to move the navigation to the bottom of the textarea and treat it like carousel navigation. I came to the idea since I want to have the most open presets at one time as possible. So with the change up to 10 preset files can be edited at the same time.

I have also preemptively created a clear all button.

[hgoda90]

Add

– Preset Title
– Clear All Button

Change

– Move nav dots to below textarea
– Add 5 more nav dots
– Make submit button change with Color Vision