Room Widget Camera updates

This commit is contained in:
MyNameIsBatman 2021-06-20 06:39:44 -03:00
parent 6090fdf6ee
commit 47994a9ae4
4 changed files with 144 additions and 98 deletions

View File

@ -425,222 +425,242 @@
"name":"shadow_multiply_02",
"colorMatrix": [],
"minLevel": 0,
"blendMode": 2,
"enabled": true
},
{
"name":"color_1",
"colorMatrix": [0.393, 0.769, 0.189, 0, 0, 0.349, 0.686, 0.168, 0, 0, 0.272, 0.534, 0.131, 0, 0, 0, 0, 0, 1, 0],
"minlevel": 1,
"minLevel": 1,
"enabled": true
},
{
"name":"hue_bright_sat",
"colorMatrix": [1, 0.6, 0.2, 0, -50, 0.2, 1, 0.6, 0, -50, 0.6, 0.2, 1, 0, -50, 0, 0, 0, 1, 0],
"minlevel": 1,
"minLevel": 1,
"enabled": true
},
{
"name":"hearts_hardlight_02",
"colorMatrix": [],
"minlevel": 1,
"minLevel": 1,
"blendMode": 9,
"enabled": true
},
{
"name":"texture_overlay",
"colorMatrix": [],
"minlevel": 1,
"minLevel": 1,
"blendMode": 4,
"enabled": true
},
{
"name":"pinky_nrm",
"colorMatrix": [],
"minlevel": 1,
"minLevel": 1,
"blendMode": 0,
"enabled": true
},
{
"name":"color_2",
"colorMatrix": [0.333, 0.333, 0.333, 0, 0, 0.333, 0.333, 0.333, 0, 0, 0.333, 0.333, 0.333, 0, 0, 0, 0, 0, 1, 0],
"minlevel": 2,
"minLevel": 2,
"enabled": true
},
{
"name":"night_vision",
"colorMatrix": [0, 0, 0, 0, 0, 0, 1.1, 0, 0, -50, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
"minlevel": 2,
"minLevel": 2,
"enabled": true
},
{
"name":"stars_hardlight_02",
"colorMatrix": [],
"minlevel": 2,
"minLevel": 2,
"blendMode": 9,
"enabled": true
},
{
"name":"coffee_mpl",
"colorMatrix": [],
"minlevel": 2,
"minLevel": 2,
"blendMode": 2,
"enabled": true
},
{
"name":"security_hardlight",
"colorMatrix": [],
"minlevel": 3,
"minLevel": 3,
"blendMode": 9,
"enabled": true
},
{
"name":"bluemood_mpl",
"colorMatrix": [],
"minlevel": 3,
"minLevel": 3,
"blendMode": 2,
"enabled": true
},
{
"name":"rusty_mpl",
"colorMatrix": [],
"minlevel": 3,
"minLevel": 3,
"blendMode": 2,
"enabled": true
},
{
"name":"decr_conrast",
"colorMatrix": [0.5, 0, 0, 0, 50, 0, 0.5, 0, 0, 50, 0, 0, 0.5, 0, 50, 0, 0, 0, 1, 0],
"minlevel": 4,
"minLevel": 4,
"enabled": true
},
{
"name":"green_2",
"colorMatrix": [0.5, 0.5, 0.5, 0, 0, 0.5, 0.5, 0.5, 0, 90, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 1, 0],
"minlevel": 4,
"minLevel": 4,
"enabled": true
},
{
"name":"alien_hrd",
"colorMatrix": [],
"minlevel": 4,
"minLevel": 4,
"blendMode": 9,
"enabled": true
},
{
"name":"color_3",
"colorMatrix": [0.609, 0.609, 0.082, 0, 0, 0.309, 0.609, 0.082, 0, 0, 0.309, 0.609, 0.082, 0, 0, 0, 0, 0, 1, 0],
"minlevel": 5,
"minLevel": 5,
"enabled": true
},
{
"name":"color_4",
"colorMatrix": [0.8, -0.8, 1, 0, 70, 0.8, -0.8, 1, 0, 70, 0.8, -0.8, 1, 0, 70, 0, 0, 0, 1, 0],
"minlevel": 5,
"minLevel": 5,
"enabled": true
},
{
"name":"toxic_hrd",
"colorMatrix": [],
"minlevel": 5,
"minLevel": 5,
"blendMode": 9,
"enabled": true
},
{
"name":"hypersaturated",
"colorMatrix": [2, -1, 0, 0, 0, -1, 2, 0, 0, 0, 0, -1, 2, 0, 0, 0, 0, 0, 1, 0],
"minlevel": 6,
"minLevel": 6,
"enabled": true
},
{
"name":"Yellow",
"colorMatrix": [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
"minlevel": 6,
"minLevel": 6,
"enabled": true
},
{
"name":"misty_hrd",
"colorMatrix": [],
"minlevel": 6,
"minLevel": 6,
"blendMode": 9,
"enabled": true
},
{
"name":"x_ray",
"colorMatrix": [0, 1.2, 0, 0, -100, 0, 2, 0, 0, -120, 0, 2, 0, 0, -120, 0, 0, 0, 1, 0],
"minlevel": 7,
"minLevel": 7,
"enabled": true
},
{
"name":"decrease_saturation",
"colorMatrix": [0.7, 0.2, 0.2, 0, 0, 0.2, 0.7, 0.2, 0, 0, 0.2, 0.2, 0.7, 0, 0, 0, 0, 0, 1, 0],
"minlevel": 7,
"minLevel": 7,
"enabled": true
},
{
"name":"drops_mpl",
"colorMatrix": [],
"minlevel": 8,
"minLevel": 8,
"blendMode": 2,
"enabled": true
},
{
"name":"shiny_hrd",
"colorMatrix": [],
"minlevel": 9,
"minLevel": 9,
"blendMode": 9,
"enabled": true
},
{
"name":"glitter_hrd",
"colorMatrix": [],
"minlevel": 10,
"minLevel": 10,
"blendMode": 9,
"enabled": true
},
{
"name":"frame_gold",
"colorMatrix": [],
"minlevel": 10,
"minLevel": 10,
"blendMode": 0,
"enabled": true
},
{
"name":"frame_gray_4",
"colorMatrix": [],
"minlevel": 10,
"minLevel": 10,
"blendMode": 0,
"enabled": true
},
{
"name":"frame_black_2",
"colorMatrix": [],
"minlevel": 10,
"minLevel": 10,
"blendMode": 0,
"enabled": true
},
{
"name":"frame_wood_2",
"colorMatrix": [],
"minlevel": 10,
"minLevel": 10,
"blendMode": 0,
"enabled": true
},
{
"name":"finger_nrm",
"colorMatrix": [],
"minlevel": 10,
"minLevel": 10,
"blendMode": 0,
"enabled": true
},
{
"name":"color_5",
"colorMatrix": [3.309, 0.609, 1.082, 0.2, 0, 0.309, 0.609, 0.082, 0, 0, 1.309, 0.609, 0.082, 0, 0, 0, 0, 0, 1, 0],
"minlevel": 10,
"minLevel": 10,
"enabled": true
},
{
"name":"black_white_negative",
"colorMatrix": [-0.5, -0.5, -0.5, 0, 0, -0.5, -0.5, -0.5, 0, 0, -0.5, -0.5, -0.5, 0, 0, 0, 0, 0, 1, 0],
"minlevel": 10,
"minLevel": 10,
"enabled": true
},
{
"name":"blue",
"colorMatrix": [0.5, 0.5, 0.5, 0, -255, 0.5, 0.5, 0.5, 0, -170, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 1, 0],
"minlevel": 10,
"minLevel": 10,
"enabled": true
},
{
"name":"red",
"colorMatrix": [0.5, 0.5, 0.5, 0, 0, 0.5, 0.5, 0.5, 0, -170, 0.5, 0.5, 0.5, 0, -170, 0, 0, 0, 1, 0],
"minlevel": 10,
"minLevel": 10,
"enabled": true
},
{
"name":"green",
"colorMatrix": [0.5, 0.5, 0.5, 0, -170, 0.5, 0.5, 0.5, 0, 0, 0.5, 0.5, 0.5, 0, -170, 0, 0, 0, 1, 0],
"minlevel": 10,
"minLevel": 10,
"enabled": true
}
],

View File

@ -60,11 +60,21 @@
width: 600px;
.effects {
height: 363px;
min-height: 363px;
max-height: 363px;
.btn-remove-effect {
z-index: 10;
min-height: 0px;
border-radius: 100px;
width: 20px;
}
.effect-thumbnail {
border-color: $grid-border-color !important;
background-color: $grid-bg-color;
height: 60px;
&.active {
border-color: $grid-active-border-color !important;
@ -73,8 +83,8 @@
.effect-thumbnail-image {
img {
width: 56px;
height: 56px;
width: 40px;
height: 40px;
}
}
}
@ -88,5 +98,10 @@
background-size: 636px;
background-position: center;
}
.slider {
background: linear-gradient(180deg, transparent, black);
text-shadow: 1px 1px rgba(0, 0, 0, .5);
}
}
}

View File

@ -16,7 +16,7 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
const { availableEffects = null, onCloseClick = null, onCancelClick = null } = props;
const TABS: string[] = [ CameraWidgetEditorTabs.COLORMATRIX, CameraWidgetEditorTabs.COMPOSITE ];
const MY_LEVEL: number = 0;
const MY_LEVEL: number = 6;
const cameraWidgetContext = useCameraWidgetContext();
@ -31,11 +31,7 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
for(const effect of availableEffects)
{
let alpha = 126;
if(effect.colorMatrix) alpha = 0.5;
thumbnails.push({name: effect.name, image: GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], [ new RoomCameraWidgetSelectedEffect(effect, alpha) ])});
thumbnails.push({name: effect.name, image: GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], [ new RoomCameraWidgetSelectedEffect(effect, 1) ], false)});
}
setEffectsThumbnails(thumbnails);
@ -64,36 +60,30 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
const getCurrentPicture = useCallback(() =>
{
return GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], cameraWidgetContext.selectedEffects);
}, [ cameraWidgetContext.selectedEffects ]);
return GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], cameraWidgetContext.selectedEffects, isZoomed);
}, [ cameraWidgetContext.selectedEffects, isZoomed ]);
const getEffectRangeConfig = useCallback(() =>
const getCurrentEffectAlpha = useCallback(() =>
{
if(!selectedEffectName) return [0, 0];
if(!selectedEffectName) return 0;
const selectedEffect = cameraWidgetContext.selectedEffects.find(effect => effect.effect.name === selectedEffectName);
if(!selectedEffect) return [0, 0];
if(!selectedEffect) return 0;
let isColormatrix = selectedEffect.effect.colorMatrix != null;
let max = 255;
let step = 1;
if(isColormatrix)
{
max = 1;
step = 0.01;
}
return [max, step, selectedEffect.alpha];
return selectedEffect.alpha;
}, [ selectedEffectName, cameraWidgetContext.selectedEffects ]);
const getEffectIndex = useCallback((effectName) =>
{
return cameraWidgetContext.selectedEffects.findIndex(effect => effect.effect.name === effectName);
}, [ cameraWidgetContext.selectedEffects ])
const setSelectedEffectAlpha = useCallback((newAlpha: number) =>
{
if(!selectedEffectName) return;
const selectedEffectIndex = cameraWidgetContext.selectedEffects.findIndex(effect => effect.effect.name === selectedEffectName);
const selectedEffectIndex = getEffectIndex(selectedEffectName);
if(selectedEffectIndex === -1) return;
@ -120,32 +110,27 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
setCurrentTab(String(value));
return;
case 'select_effect':
{
let existingIndex = -1;
if(cameraWidgetContext.selectedEffects.length > 0)
{
existingIndex = cameraWidgetContext.selectedEffects.findIndex(effect => effect.effect.name === value);
/*if(existingIndex > -1)
{
const clone = Array.from(cameraWidgetContext.selectedEffects);
clone.splice(existingIndex, 1);
cameraWidgetContext.setSelectedEffects(clone);
}*/
existingIndex = getEffectIndex(value);
}
let effect = null;
if(existingIndex === -1)
{
const effect = availableEffects.find(effect => effect.name === value);
effect = availableEffects.find(effect => effect.name === value);
let alpha = 126;
if(effect.minLevel > MY_LEVEL) return;
if(effect.colorMatrix) alpha = 0.5;
cameraWidgetContext.setSelectedEffects([...cameraWidgetContext.selectedEffects, new RoomCameraWidgetSelectedEffect(effect, alpha)]);
cameraWidgetContext.setSelectedEffects([...cameraWidgetContext.selectedEffects, new RoomCameraWidgetSelectedEffect(effect, 0.5)]);
}
if(effect && effect.minLevel > MY_LEVEL) return;
if(selectedEffectName !== value)
{
setSelectedEffectName(value);
@ -154,6 +139,27 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
{
setSelectedEffectName(null);
}
}
return;
case 'remove_effect':
{
const existingIndex = getEffectIndex(value);
if(existingIndex > -1)
{
const effect = cameraWidgetContext.selectedEffects[existingIndex];
if(effect.effect.name === selectedEffectName)
{
setSelectedEffectName(null);
}
const clone = Array.from(cameraWidgetContext.selectedEffects);
clone.splice(existingIndex, 1);
cameraWidgetContext.setSelectedEffects(clone);
}
}
return;
case 'clear_effects':
setSelectedEffectName(null);
@ -185,11 +191,16 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
{ getEffectList().map(effect =>
{
return (
<div key={ effect.name } className="col mb-3" onClick={ event => processAction('select_effect', effect.name) }>
<div title={ LocalizeText('camera.effect.name.' + effect.name) } className="effect-thumbnail cursor-pointer position-relative border border-2 rounded d-flex flex-column justify-content-center align-items-center py-1">
<div className="effect-thumbnail-image rounded">
<img alt="" className="rounded" src={ getEffectThumbnail(effect.name) } />
</div>
<div key={ effect.name } className="col mb-3 position-relative">
{ getEffectIndex(effect.name) > -1 && <button className="btn btn-danger btn-sm p-0 position-absolute btn-remove-effect" onClick={ event => processAction('remove_effect', effect.name) }><i className="fas fa-times"></i></button> }
<div title={ effect.minLevel <= MY_LEVEL ? LocalizeText('camera.effect.name.' + effect.name) : LocalizeText('camera.effect.required.level') + ' ' + effect.minLevel } onClick={ event => processAction('select_effect', effect.name) } className={"effect-thumbnail cursor-pointer position-relative border border-2 rounded d-flex flex-column justify-content-center align-items-center py-1" + classNames({' active': selectedEffectName === effect.name})}>
{ effect.minLevel <= MY_LEVEL && <div className="effect-thumbnail-image border">
<img alt="" src={ getEffectThumbnail(effect.name) } />
</div> }
{ effect.minLevel > MY_LEVEL && <div className="text-center text-black">
<div><i className="fas fa-lock"></i></div>
<div className="fw-bold">{ effect.minLevel }</div>
</div> }
</div>
</div>
);
@ -201,10 +212,10 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
<div className="w-100">
<NitroCardTabsView></NitroCardTabsView>
<NitroCardContentView>
<div className={ 'd-flex align-items-end picture-preview' + classNames({ ' zoomed': isZoomed }) } style={ { backgroundImage: 'url(' + getCurrentPicture().src + ')' } }>
{ selectedEffectName && <div className="w-100 p-2 d-flex flex-column justify-content-center bg-black">
<div className="w-100 text-center">{ LocalizeText('camera.effect.name.' + selectedEffectName) + ' - ' + getEffectRangeConfig()[2] }</div>
<input type="range" min="0" max={ getEffectRangeConfig()[0] } step={ getEffectRangeConfig()[1] } value={ getEffectRangeConfig()[2] } onChange={ event => setSelectedEffectAlpha(Number(event.target.value)) } className="form-range w-100" />
<div className="d-flex align-items-end picture-preview" style={ { backgroundImage: 'url(' + getCurrentPicture().src + ')' } }>
{ selectedEffectName && <div className="w-100 p-2 d-flex flex-column justify-content-center slider">
<div className="w-100 text-center">{ LocalizeText('camera.effect.name.' + selectedEffectName) + ' - ' + getCurrentEffectAlpha() }</div>
<input type="range" min="0" max="1" step="0.01" value={ getCurrentEffectAlpha() } onChange={ event => setSelectedEffectAlpha(Number(event.target.value)) } className="form-range w-100" />
</div> }
</div>
<div className="d-flex justify-content-between mt-2">

View File

@ -37,7 +37,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
if(furniData.roomControllerLevel >= RoomControllerLevel.MODERATOR) godMode = true;
}
if((((furniData.usagePolicy === RoomWidgetFurniInfoUsagePolicyEnum._Str_18353) || ((furniData.usagePolicy === RoomWidgetFurniInfoUsagePolicyEnum._Str_18194) && isValidController)) || ((furniData.extraParam === RoomWidgetEnumItemExtradataParameter.JUKEBOX) && isValidController)) || ((furniData.extraParam === RoomWidgetEnumItemExtradataParameter.USABLE_PRODUCT) && isValidController)) setCanUse(true);
if((((furniData.usagePolicy === RoomWidgetFurniInfoUsagePolicyEnum.EVERYBODY) || ((furniData.usagePolicy === RoomWidgetFurniInfoUsagePolicyEnum.CONTROLLER) && isValidController)) || ((furniData.extraParam === RoomWidgetEnumItemExtradataParameter.JUKEBOX) && isValidController)) || ((furniData.extraParam === RoomWidgetEnumItemExtradataParameter.USABLE_PRODUCT) && isValidController)) setCanUse(true);
if(furniData.extraParam)
{