Mini Kabibi Habibi
layout referenceImageFlyout
{
constant:
bar_button_height: 40;
bar_button_width: 180;
text_button_height: bar_button_height - 8;
text_button_corner_radius : text_button_height / 2;
bar_button_font_size: 12;
text_size: 12;
heading_font_size: 13;
subheading_font_size: 12;
heading_text_width : 200;
flyout_margin: 15;
flyout_spacing: 15;
flyout_edge: 2;
reference_thumbnail_dim: 150;
flyout_description_width: 180;
gallery_description_text_size: 11;
ref_preset_thumb_size: 65; // This value is being read in cpp file to set the thumbnail size of synthetic_reference_image_presets_cellview
ref_preset_margin: 10; // This value is being read in cpp file to set the thumbnail size of synthetic_reference_image_presets_cellview
presetGalleryCellViewHeight: 178;
back_button_dims: 14;
headingText_content: '$$$/generateImageReferenceFlyout/ContentReferenceHeading=Content reference';
headingText_style: '$$$/generateImageReferenceFlyout/StyleReferenceHeading=Style reference';
headingText_composition: '$$$/generateImageReferenceFlyout/CompositionReferenceHeading=Composition reference';
imageDescription_content: '$$$/generateImageReferenceFlyout/ContentReferenceFlyoutDescription=Upload an image you^r^nwant to reference.';
imageDescription_style: '$$$/generateImageReferenceFlyout/StyleReferenceFlyoutDescription=Match the style from^r^nyour own reference image.';
imageDescription_composition: '$$$/generateImageReferenceFlyout/CompositionReferenceFlyoutDescription=Match the composition from^r^nyour own reference image.';
interface:
showThumbnailImage_content: false;
showThumbnailImage_style: false;
showThumbnailImage_composition: false;
showChooseImageText_content: true;
showPresetGallery <== !showMultiReferenceImage && (showPresetGallery_composition || showPresetGallery_content || showPresetGallery_style);
showPresetGallery_content: false;
showPresetGallery_style: false;
showPresetGallery_composition: false;
showRefImageIsolateSubjectCheckbox_style: false;
showRefImageIsolateSubjectCheckbox_composition: false;
showRefImageIsolateSubject_content: false; // Radio buttons
showPreserveBackground_content: true;
showChooseImageButton_content: true;
showMultiReferenceImage: false;
showMultiReferenceImage_content: false;
showMultiReferenceImage_style: false;
showMultiReferenceImage_composition: false;
showSliderValue: false; // controls visibility of text field for TEditSlider
view reference_image_flyout_view(placement: place_column,
font: staticSmallFont,
margin: [flyout_edge, 0, flyout_margin, flyout_edge],
spacing: 0)
{
column(horizontal: align_fill, margin: [0, flyout_margin, 0, 0]) {
row(horizontal: align_fill, child_vertical: align_center)
{
TOptional(bind: @showMultiReferenceImage, horizontal: align_fill, value: false) {
column(margin: [flyout_margin-flyout_edge, 0, flyout_margin, 0], spacing: flyout_spacing-5)
{
TStaticText(name: '$$$/referenceImageFlyout/Title=Reference image',
horizontal: align_left,
customFontSize: subheading_font_size,
useDefaultColor: true,
width: heading_text_width,
font: boldFont);
TOptional(bind: @showPresetGallery, horizontal: align_fill) {
TStaticText(name: '$$$/referenceImageFlyout/SelectFromGallery/Name=Select from the gallery or choose your own image',
horizontal: align_left,
useDefaultColor: true,
customFontSize: gallery_description_text_size);
}
}
}
TIconButton(identifier: @closeFlyout,
tooltip: '$$$/referenceImageFlyout/CloseButton=Close',
width: 28,
height: 28,
dataType: 'int32',
iconRootName: 'CloseControl',
vertical: align_top,
horizontal: align_right);
}
}
TView(horizontal: align_fill, vertical: align_fill, placement: place_overlay) {
TView(identifier: @multiReferenceView, horizontal: align_fill, placement: place_column, spacing: flyout_spacing) {
// This is where the GenFill flyout content lives.
TOptional(bind: @showMultiReferenceImage_content, horizontal: align_fill) {
column(horizontal: align_fill, spacing: flyout_spacing, margin: [0, 0, 0, 0]) {
TOptional(bind: @showMultiReferenceImage, value: true) {
row(horizontal: align_fill, vertical: align_fill) {
TStaticText(identifier: @multiRefHeadingText_content,
name: headingText_content,
horizontal: align_left,
customFontSize: heading_font_size,
useDefaultColor: true,
width: heading_text_width,
font: boldFont);
}
}
column(horizontal: align_center, margin: [0, 0, 0, 0],
child_vertical: align_fill, spacing: flyout_spacing)
{
overlay(horizontal: align_center)
{
document_thumbnail_view(bind: @showThumbnailImage_content, horizontal: align_center, value: true,
identifier: @referenceThumbnail_content, width: reference_thumbnail_dim,
height: reference_thumbnail_dim);
TOptional(bind: @showChooseImageText_content) {
column(horizontal: align_fill, child_vertical: align_center) {
RoundedIconImageView(bind: @showThumbnailImage_content, horizontal: align_fill, vertical: align_center,
value: false, identifier: @placeholderIconThumbnail_content, iconRootName : 'MatchImageStyleThumbnail');
TStaticText(identifier: @chooseImageDesc_content, // Match the content from^r^nyour own reference image.
name: imageDescription_content,
horizontal: align_center,
vertical: align_center,
width: flyout_description_width,
customFontSize: text_size);
}
}
}
column(spacing: flyout_spacing, margin: [0, 0, 0, 0], child_vertical: align_center, horizontal: align_center) {
TOptional(bind: @showChooseImageButton_content, horizontal: align_center) {
TIconButton(identifier: @chooseReferenceButton_content,
name: '$$$/SyntheticReferenceImage/Settings/ChooseImage=Choose image',
layoverText: '$$$/SyntheticReferenceImage/Settings/ChooseImage=Choose image',
tooltip: '$$$/SyntheticTextToImage/Settings/ChooseImage/Tooltip=Choose your own image',
layoverTextPosition: align_center,
cornerRadius: text_button_corner_radius,
width: bar_button_width,
height: text_button_height,
customFontSize: bar_button_font_size,
dataType: 'int32',
variant : cta1,
useDefaultIcon: false,
horizontal: align_center,
font: boldFont);
}
TOptional(bind: @showMultiReferenceImage, value: true, horizontal: align_center) {
TOptional(bind: @showPresetGallery_content, horizontal: align_fill) {
TIconButton(identifier: @browseGalleryButton_content,
name: '$$$/SyntheticReferenceImage/Settings/BrowseGallery=Browse gallery',
layoverText: '$$$/SyntheticReferenceImage/Settings/BrowseGallery=Browse gallery',
layoverTextPosition: align_center,
cornerRadius: text_button_corner_radius,
width: bar_button_width,
height: text_button_height,
customFontSize: bar_button_font_size,
dataType: 'int32',
variant : cta2,
useDefaultIcon: false,
horizontal: align_center,
font: boldFont,
fontColorFromTheme: true
);
}
}
TOptional(bind: @showRefImageIsolateSubject_content, horizontal: align_left) {
column(horizontal: align_left, margin: 0, child_vertical: align_fill, spacing: 5) {
TStaticText(name: '$$$/referenceImageFlyout/PreserveBGCluster/ReferenceTo=Reference to',
horizontal: align_left,
customFontSize: text_size,
font: boldFont);
TRadioCluster(identifier: @isolate_subject_content, placement: place_column,
horizontal: align_left, margin: 0, spacing: gGap) {
TRadio(identifier: @isolate_subject_on_content,
name: '$$$/SyntheticReferenceImage/IsolateSubjectOn=Object', font: staticFont,
tooltip: '$$$/SyntheticReferenceImage/IsolateSubjectOnTooltip=Remove the background and just refere to the object');
TRadio(identifier: @isolate_subject_off_content,
name: '$$$/SyntheticReferenceImage/IsolateSubjectOff=Whole Image', font: staticFont,
tooltip: '$$$/SyntheticReferenceImage/IsolateSubjectOffTooltip=Use the whole image including the background');
}
}
}
TOptional(bind: @showPreserveBackground_content, horizontal: align_left) {
column(horizontal: align_left, margin: 0, child_vertical: align_fill, spacing: 5) {
TStaticText(name: '$$$/referenceImageFlyout/PreserveBGCluster/Title=Intent',
horizontal: align_left,
customFontSize: text_size,
font: boldFont);
TRadioCluster(identifier: @preserve_background_content, placement: place_column,
horizontal: align_left, margin: 0, spacing: gGap) {
TRadio(identifier: @preserve_background_off_content,
name: '$$$/SyntheticReferenceImage/PreserveBackgroundRemove=Swap the selected area', font: staticFont,
tooltip: '$$$/SyntheticReferenceImage/PreserveBackgroundReplaceTooltip=Replace an existing object in the selected area');
TRadio(identifier: @preserve_background_on_content,
name: '$$$/SyntheticReferenceImage/PreserveBackgroundInsert=Place into the selected area', font: staticFont,
tooltip: '$$$/SyntheticReferenceImage/PreserveBackgroundInsertTooltip=Add an object while keeping the original background intact');
}
}
}
}
}
}
TOptional(bind: @showMultiReferenceImage, value: true, horizontal: align_fill) {
TNarrowGroupSeparator(height: 1, horizontal: align_fill);
}
}
TOptional(bind: @showMultiReferenceImage_style, horizontal: align_fill) {
column(horizontal: align_fill, spacing: flyout_spacing, margin: [0, flyout_margin, flyout_margin, 0]) {
TOptional(bind: @showMultiReferenceImage, value: true) {
row(horizontal: align_fill, vertical: align_fill) {
TStaticText(identifier: @multiRefHeadingText_style,
name: headingText_style,
horizontal: align_left,
customFontSize: heading_font_size,
useDefaultColor: true,
width: heading_text_width,
font: boldFont);
}
}
row(horizontal: align_fill, margin: [0, 0, 0, flyout_margin-flyout_edge],
child_vertical: align_center, spacing: flyout_spacing)
{
overlay()
{
RoundedIconImageView(bind: @showThumbnailImage_style, horizontal: align_fill, vertical: align_fill, value: false, identifier: @placeholderIconThumbnail_style, iconRootName : 'MatchImageStyleThumbnail');
document_thumbnail_view(bind: @showThumbnailImage_style, horizontal: align_fill, value: true, identifier: @referenceThumbnail_style, width: reference_thumbnail_dim,
height: reference_thumbnail_dim);
}
column(spacing: flyout_spacing, margin: [0, flyout_margin, 0, 0], child_vertical: align_center, horizontal: align_center) {
TIconButton(identifier: @chooseReferenceButton_style,
name: '$$$/SyntheticReferenceImage/Settings/ChooseImage=Choose image',
layoverText: '$$$/SyntheticReferenceImage/Settings/ChooseImage=Choose image',
layoverTextPosition: align_center,
cornerRadius: text_button_corner_radius,
width: bar_button_width,
height: text_button_height,
customFontSize: bar_button_font_size,
dataType: 'int32',
variant : cta1,
useDefaultIcon: false,
horizontal: align_center,
font: boldFont
);
TOptional(bind: @showMultiReferenceImage, value: true, horizontal: align_center) {
TOptional(bind: @showPresetGallery_style, horizontal: align_fill) {
TIconButton(identifier: @browseGalleryButton_style,
name: '$$$/SyntheticReferenceImage/Settings/BrowseGallery=Browse gallery',
layoverText: '$$$/SyntheticReferenceImage/Settings/BrowseGallery=Browse gallery',
layoverTextPosition: align_center,
cornerRadius: text_button_corner_radius,
width: bar_button_width,
height: text_button_height,
customFontSize: bar_button_font_size,
dataType: 'int32',
variant : cta2,
useDefaultIcon: false,
horizontal: align_center,
font: boldFont,
fontColorFromTheme: true
);
}
}
TStaticText(identifier: @chooseImageDesc_style,
name: imageDescription_style,
horizontal: align_center,
vertical: align_center,
width: flyout_description_width,
customFontSize: text_size);
TOptional(bind: @showRefImageIsolateSubjectCheckbox_style, horizontal: align_center) {
TCheckBox(identifier: @isolateSubjectCheckBox_style,
name: '$$$/SyntheticReferenceImage/IsolateSubject=Remove background',
tooltip: '$$$/SyntheticReferenceImage/IsolateSubjectTooltip=For better results, be sure to have a clear focal point in the image.',
horizontal: align_center, font: staticFont, customFontSize: text_size);
}
}
}
}
TOptional(bind: @showMultiReferenceImage, value: true, horizontal: align_fill) {
TNarrowGroupSeparator(height: 1, horizontal: align_fill);
}
}
TOptional(bind: @showMultiReferenceImage_composition, horizontal: align_fill) {
column(horizontal: align_fill, spacing: flyout_spacing, margin: [0, flyout_margin, 0, 0]) {
TOptional(bind: @showMultiReferenceImage, value: true) {
row(horizontal: align_fill, vertical: align_fill, margin: [0, 0, 0, 0]) {
TStaticText(identifier: @multiRefHeadingText_composition,
name: headingText_composition,
horizontal: align_left,
customFontSize: heading_font_size,
useDefaultColor: true,
width: heading_text_width,
font: boldFont);
}
}
row(horizontal: align_fill, margin: [0, 0, 0, flyout_margin-flyout_edge],
child_vertical: align_center, spacing: flyout_spacing)
{
overlay()
{
RoundedIconImageView(bind: @showThumbnailImage_composition, horizontal: align_fill, vertical: align_fill, value: false, identifier: @placeholderIconThumbnail_composition, iconRootName : 'MatchImageStyleThumbnail');
document_thumbnail_view(bind: @showThumbnailImage_composition, horizontal: align_fill, value: true, identifier: @referenceThumbnail_composition, width: reference_thumbnail_dim,
height: reference_thumbnail_dim);
}
column(spacing: flyout_spacing, margin: [0, flyout_margin, 0, 0], child_vertical: align_center, horizontal: align_center) {
TIconButton(identifier: @chooseReferenceButton_composition,
name: '$$$/SyntheticReferenceImage/Settings/ChooseImage=Choose image',
layoverText: '$$$/SyntheticReferenceImage/Settings/ChooseImage=Choose image',
layoverTextPosition: align_center,
cornerRadius: text_button_corner_radius,
width: bar_button_width,
height: text_button_height,
customFontSize: bar_button_font_size,
dataType: 'int32',
variant : cta1,
useDefaultIcon: false,
horizontal: align_center,
font: boldFont
);
TOptional(bind: @showMultiReferenceImage, value: true, horizontal: align_center) {
TOptional(bind: @showPresetGallery_composition, horizontal: align_fill) {
TIconButton(identifier: @browseGalleryButton_composition,
name: '$$$/SyntheticReferenceImage/Settings/BrowseGallery=Browse gallery',
layoverText: '$$$/SyntheticReferenceImage/Settings/BrowseGallery=Browse gallery',
layoverTextPosition: align_center,
cornerRadius: text_button_corner_radius,
width: bar_button_width,
height: text_button_height,
customFontSize: bar_button_font_size,
dataType: 'int32',
variant : cta2,
useDefaultIcon: false,
horizontal: align_center,
font: boldFont,
fontColorFromTheme: true
);
}
}
TStaticText(identifier: @chooseImageDesc_composition,
name: imageDescription_composition,
horizontal: align_center,
vertical: align_center,
width: flyout_description_width,
customFontSize: text_size);
TOptional(bind: @showRefImageIsolateSubjectCheckbox_composition, horizontal: align_center) {
TCheckBox(identifier: @isolateSubjectCheckBox_composition,
name: '$$$/SyntheticReferenceImage/IsolateSubject=Remove background',
tooltip: '$$$/SyntheticReferenceImage/IsolateSubjectTooltip=For better results, be sure to have a clear focal point in the image.',
horizontal: align_center, font: staticFont, customFontSize: text_size);
}
}
}
column(horizontal: align_fill, margin: [0, 0, 0, flyout_margin-flyout_edge])
{
TStaticText(horizontal: align_left,
name: '$$$/SyntheticReferenceImage/Settings/StrengthSlider/Heading=Strength',
width: flyout_description_width,
vertical: align_center,
customFontSize: text_size,
useDefaultColor: true);
TEditSlider(identifier: @strengthSlider_composition,
placement: place_row, horizontal: align_fill, margin: [0, 0, 0, 0]) {
TNewLookSliderSet(identifier: @strength_composition,
horizontal: align_fill,
height: 15,
tooltip: '$$$/SyntheticReferenceImage/Settings/Composition/StrengthSlider/Tooltip=Adjust the strength of outline and depth adherence');
TOptional(bind: @showSliderValue, horizontal: align_fill) {
TFixedPoint(identifier: @strengthSliderEdit_composition,
horizontal: align_right,
maxDigits: 5,
places: 1,
isSigned: false,
required: false);
}
}
}
}
}
}
TView(identifier: @multiReferenceGalleryView, horizontal: align_fill, vertical: align_fill, placement: place_column) {
column(margin: [0, flyout_margin, 0, flyout_margin-flyout_edge], spacing: flyout_spacing, horizontal: align_fill, vertical: align_fill) {
row(horizontal: align_fill, vertical: align_top) {
TIconButton(identifier: @backToMultiReferenceViewButton,
dataType: 'int32',
width: back_button_dims,
height: back_button_dims,
horizontal: align_left,
vertical: align_center,
iconRootName: 'CxUI_ArrowLeft',
drawDepressed: false);
TStaticText(identifier: @galleryHeading,
name: '$$$/referenceImageFlyout/GalleryHeadingFirst/Name=Gallery',
horizontal: align_left,
vertical: align_center,
customFontSize: heading_font_size,
useDefaultColor: true,
width: heading_text_width,
font: boldFont);
}
row(horizontal: align_fill, vertical: align_fill, child_vertical: align_center, spacing: 0)
{
TScroller(
identifier : @multiRefPresetsScroller,
horizontal : align_fill,
vertical : align_fill,
horizontalScroll : false,
verticalScroll : true)
{
synthetic_reference_image_presets_cellview(identifier: @multiReferencePresetsList, horizontal: align_fill, vertical: align_fill);
}
}
}
}
}
TOptional(bind: @showMultiReferenceImage, horizontal: align_fill, value: false) {
TOptional(bind: @showPresetGallery, horizontal: align_fill) {
column(margin: [0, flyout_margin, 0, flyout_margin-flyout_edge], spacing: flyout_spacing, horizontal: align_fill) {
TStaticText(name: '$$$/referenceImageFlyout/Gallery/Name=Gallery',
horizontal: align_left,
customFontSize: subheading_font_size,
useDefaultColor: true,
font: boldFont);
row(horizontal: align_fill, child_vertical: align_center, spacing: 0)
{
TScroller(
identifier : @singleRefPresetsScroller,
horizontal : align_fill,
vertical : align_fill,
horizontalScroll : false,
verticalScroll : true,
height : presetGalleryCellViewHeight)
{
synthetic_reference_image_presets_cellview(identifier: @referencePresetsList, horizontal: align_fill, vertical: align_fill);
}
}
}
}
}
}
}