Hgoda90 - Bezel Preset Editor

[hgoda90]

WIP

At the Early Stage of having a bezel preview for Color Vision.

[hgoda90]

FYI

To those wondering how it would work, it is going to be simply the images stacked and a colored layer on top of the bezel.

The color of the bezel will be completely controlled through CSS. Thanks to kokoko3k because going through starting bezel colors his default worked the best, rgb(128, 128, 128).

The preview isn’t going to be exact but close enough to satisfy the naked eye.

HTML

<div class="preview-wrap">
	<div class="preview-bezel">
		<span class="bezel-color"></span>
		<img src="assets/images/preview-mbz.png">
	</div>
	<img id="mbz-screen" src="assets/images/preview_mbz-screen.png">
	<img id="mbz-bg" src="assets/images/preview_mbz-bg.png">
</div>

CSS

.preview-wrap img {
    width: 100%;
    height: 100%;
    margin-left: 0;
    position: absolute;
}

.preview-bezel {
    width: 70% !important;
    height: calc(100% - 20px) !important;
    margin-left: 15% !important;
    position: absolute;
    z-index: 1;
    margin-top: 10px;
}

// Color Block on Top of Bezel
.bezel-color {
    background: #CF3311;
    mix-blend-mode: overlay;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.preview-bezel img {
    position: relative;
    margin: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
}

#mbz-screen {
    width: 71%;
    height: 93%;
    z-index: 2;
    top: 8px;
    left: 56px;
}

#mbz-bg {
    transform: scale(2.5);
}

Images

[hgoda90]

Daily Update

The preview is essentially set I just have to piece it together in the appropriate files and add the functions that change the color.

I will be finishing it after Easter .

[hgoda90]

Quick Update

– Add Color Vision Preview

[hgoda90]

Quick Update

– Add Cosmetic Changes to Buttons and Tabs

[hgoda90]

Quick Update

– Made a few more Cosmetic Changes

[hgoda90]

WIP

Working on adding a slightly modified Color Thief and will be making a few more design changes.

[hgoda90]

Mini Update

– Add Color Thief
– Change design of footer

Color Thief Notes

– Click on color swatch to change color around image
– Once color is selected Color Vision will change to selected color
– Hover over the color swatch changes the color around the image as preview
– Once color has been clicked, press Shift over image card to activate hover again
– Drop Button removes image card

Footer Notes

– Credits is self explanatory
– Popups show all available modal displays
– Settings holds Color Style and Colo(u)r spelling

[hgoda90]

WIP

Thought to add Twitch embedding

[hgoda90]

Quick Update

– Add Twitch Playability

To Use

1. Load twitch/load.twitch file
2. Enter Channel Name into prompt

Note: If using the github site, create a blank file with a extension .twitch or download file from github

[Starman99x]

Brilliant! I wish I found out about this sooner.

[hgoda90]

Bezel Preset Editor v1.1.3

Download

Add

– Color Vision Preview
– All File Types to Load
– Color Thief
– Twitch Playability

Change

– Cosmetics
– Instruction Card

Fix

– Errors

[hgoda90]

WIP

– Going to add the possible way of playing individual Twitch videos.
– It will work similar to youtube playability

Note: Just have to think of function and extension naming. The tab color will be lavender.

[hgoda90]

Quick Update

– Add Twitch Video Playability
– Change .twitch to .ttvl
– Fix Errors

To Use

1. Create .ttv file with video links
2. Load the .ttv file
3. Enter video link index into prompt

Example - krangledangle.ttv

https://www.twitch.tv/videos/2280614633  
https://www.twitch.tv/videos/2160670345

[hgoda90]

Quick Update

– Add Twitch Channels into single file
– Add Youtube Single Link prompt
– Change Youtube extension from txt to yt

To Use

• Twitch just load channel.ttvl for Channel Prompt
• Twitch load empty.ttv for Twitch Video Prompt
• Twitch can also use channels.ttvl for multiple channel selection
• Youtube Single Link prompt can be loaded with empty Link.yt file

[hgoda90]

WIP

– I am going to be adding chat for Twitch Live playability only.

Note: It will be hidable and tab specific.

[hgoda90]

Mini Update

– Add Twitch Chat

Note: There could still be some bugs and channel points are not added.
Note 2: Chat has been added to main tabs only, not mini.

[hgoda90]

WIP

– Wanted to have folders for youtube and twitch files
– Each one will use a directory txt file and check that file for the appropriate directory
– The directory file is simply the only way to have the files in their own custom folders.
– Each ttv, ttvl, and yt file can only be loaded one at a time

Note: The directory file will need to be made by the user.

directory.txt

HCBailly
LetsPlay
Movies & TV
Music
NintendoCaprisun
OrionsAngel
Ray Narvaez Jr

code

if(links != "Playlist Example.yt" && links != "Video Link.yt"){
		jQuery.get("youtube/directory.txt", function(data) {
			data = data.trim().split("\n");
			var http = new XMLHttpRequest();
			
			if(data != ""){
				for(i=0;i < data.length;i++){
					var url = "youtube/"+data[i]+"/"+links
					
					http.open('HEAD', url, false);
					http.send();
					if (http.status === 200) {
					   youtubePlay(url);
					}
					else{
						console.clear();
					}
				}
			}

		});
	}
	else{
		youtubePlay("youtube/"+links);
	}

	function youtubePlay(url){
		jQuery.get(url, function(data) {

[hgoda90]

Quick Update

– Add Youtube custom folders
– Add Twitch Live and Video folders