Add BFHDCOMPAT

[mmosca]

This adds bfcompat support to the configurator

[mmosca]

I am currently looking into an issue in the configurator where the preview size is not updated correctly.

[rmaia3d]

I have made some changes to the reference bars, to better match what I get on my goggles (FPV V2).

The vertical red bars are basically not needed, you can go up to the very corners of the screen without a problem. I moved them to be very close to the actual edges.

The bottom area doesn't need to cover the whole width of the screen, just the rightmost corner. I have adjusted the bottom horizontal line to start at proper location, however I think that adding a small vertical line there to fully close the outline would be a good idea.

Resulting preview image:

And here's the code changes I have made (just changed the positioning numbers). All of them on the osd.css file.

Lines 438 to 452:

.tab-osd .hd_bfhdcompat_43_left {
	border-left: 2px solid red;
	position: absolute;
	/*left: 77.5px; // Calculated correct position */
    left: 2px;
	height: calc(100% - 27px);
}

.tab-osd .hd_bfhdcompat_43_right {
	border-right: 2px solid red;
	position: absolute;
	/* right: 77.5px; // Calculated correct position */
    right: 4px;
	height: calc(100% - 27px);
}

Lines 561 to 603:

.tab-osd .hd_bfhdcompat_bottom {
    border-bottom: 2px solid purple;
    position: absolute;
    bottom: 22px;
    left: 450px;
    right: 0px;
}

.tab-osd .hd_bfhdcompat_storagebox_t {
    border-top: 2px solid purple;
    position: absolute;
    top: 125px;
    height: 1px;
    right: 10px;
    width: 71px;
}

.tab-osd .hd_bfhdcompat_storagebox_b {
    border-bottom: 2px solid purple;
    position: absolute;
    top: 158px;
    height: 1px;
    right: 10px;
    width: 71px;
}

.tab-osd .hd_bfhdcompat_storagebox_l {
    border-left: 2px solid purple;
    position: absolute;
    top: 125px;
    height: 35px;
    right: 79px;
    width: 1px;
}

.tab-osd .hd_bfhdcompat_storagebox_r {
    border-right: 2px solid purple;
    position: absolute;
    top: 125px;
    height: 35px;
    right: 10px;
    width: 1px;
}

[mmosca]

@rmaia3d The red border is for 4:3 aspect ratio, if you don't want you text to extend beyond the video.

I increased the size of the storage box a bit and changed the bottom line to be a box.

I also made it bigger, to also cover the alerts, like the low power mode indicator.

[rmaia3d]

Oh!! I didn't think about the 4:3 mode (I use only 16:9), but yeah, makes total sense!! 👍

Also, increasing the size of the bottom box to also cover the DJI alert ribbon was a good idea. Nice!