Change Confirmation UI Layout to touch button
For a physical device, touch buttons might not the most
secure inputs. For cuttlefish, it does not make a difference
against physical buttons. Besides, it is harder to implement
physical button actions. We are eventually to change cuttlefish
o use touch buttons instead.
Note that this CL changes the layout only.
Bug: 201691842
Test: Run locally, Vts test
Change-Id: I09ce2513f19625a271adfd4029c760695af3be7e
diff --git a/host/libs/confui/host_renderer.cc b/host/libs/confui/host_renderer.cc
index e47953c..cbd80c5 100644
--- a/host/libs/confui/host_renderer.cc
+++ b/host/libs/confui/host_renderer.cc
@@ -65,7 +65,8 @@
is_magnified_(magnified),
ctx_(6.45211, 400.0 / 412.0),
is_setup_well_(false) {
- SetDeviceContext(current_width_, current_height_, is_magnified_);
+ SetDeviceContext(current_width_, current_height_, is_inverted_,
+ is_magnified_);
layout_ = teeui::instantiateLayout(teeui::ConfUILayout(), ctx_);
if (auto error = UpdateLocale()) {
ConfUiLog(ERROR) << "Update Translation Error: " << Enum2Base(error.code());
@@ -119,21 +120,30 @@
void ConfUiRenderer::SetDeviceContext(const unsigned long long w,
const unsigned long long h,
+ const bool is_inverted,
const bool is_magnified) {
using namespace teeui;
const auto screen_width = operator""_px(w);
const auto screen_height = operator""_px(h);
- ctx_.setParam<RightEdgeOfScreen>(screen_width);
- ctx_.setParam<BottomOfScreen>(screen_height);
- ctx_.setParam<PowerButtonTop>(20.26_mm);
- ctx_.setParam<PowerButtonBottom>(30.26_mm);
- ctx_.setParam<VolUpButtonTop>(40.26_mm);
- ctx_.setParam<VolUpButtonBottom>(50.26_mm);
- ctx_.setParam<DefaultFontSize>(14_dp);
- ctx_.setParam<BodyFontSize>(16_dp);
+ ctx_.setParam<RightEdgeOfScreen>(pxs(screen_width));
+ ctx_.setParam<BottomOfScreen>(pxs(screen_height));
if (is_magnified) {
ctx_.setParam<DefaultFontSize>(18_dp);
ctx_.setParam<BodyFontSize>(20_dp);
+ } else {
+ ctx_.setParam<DefaultFontSize>(14_dp);
+ ctx_.setParam<BodyFontSize>(16_dp);
+ }
+ if (is_inverted) {
+ ctx_.setParam<ShieldColor>(kColorShieldInv);
+ ctx_.setParam<ColorText>(kColorTextInv);
+ ctx_.setParam<ColorBG>(kColorBackgroundInv);
+ ctx_.setParam<ColorButton>(kColorShieldInv);
+ } else {
+ ctx_.setParam<ShieldColor>(kColorShield);
+ ctx_.setParam<ColorText>(kColorText);
+ ctx_.setParam<ColorBG>(kColorBackground);
+ ctx_.setParam<ColorButton>(kColorShield);
}
}
diff --git a/host/libs/confui/host_renderer.h b/host/libs/confui/host_renderer.h
index 8e4f181..45340c3 100644
--- a/host/libs/confui/host_renderer.h
+++ b/host/libs/confui/host_renderer.h
@@ -113,7 +113,7 @@
teeui::Error UpdateTranslations();
teeui::Error UpdateLocale();
void SetDeviceContext(const unsigned long long w, const unsigned long long h,
- bool is_magnified);
+ bool is_inverted, bool is_magnified);
// a callback function to be effectively sent to TeeUI library
teeui::Error UpdatePixels(TeeUiFrameWrapper& buffer, std::uint32_t x,
@@ -158,17 +158,19 @@
teeui::Color shield_color_;
bool is_inverted_;
bool is_magnified_;
- teeui::context<teeui::ConUIParameters> ctx_;
+ teeui::context<teeui::ConfUIParameters> ctx_;
bool is_setup_well_;
- static constexpr const teeui::Color kColorEnabled = 0xff212121;
- static constexpr const teeui::Color kColorDisabled = 0xffbdbdbd;
- static constexpr const teeui::Color kColorEnabledInv = 0xffdedede;
- static constexpr const teeui::Color kColorDisabledInv = 0xff424242;
static constexpr const teeui::Color kColorBackground = 0xffffffff;
static constexpr const teeui::Color kColorBackgroundInv = 0xff212121;
- static constexpr const teeui::Color kColorShieldInv = 0xffc4cb80;
+ static constexpr const teeui::Color kColorDisabled = 0xffbdbdbd;
+ static constexpr const teeui::Color kColorDisabledInv = 0xff424242;
+ static constexpr const teeui::Color kColorEnabled = 0xff212121;
+ static constexpr const teeui::Color kColorEnabledInv = 0xffdedede;
static constexpr const teeui::Color kColorShield = 0xff778500;
+ static constexpr const teeui::Color kColorShieldInv = 0xffc4cb80;
+ static constexpr const teeui::Color kColorText = 0xff212121;
+ static constexpr const teeui::Color kColorTextInv = 0xffdedede;
};
} // end of namespace confui
} // end of namespace cuttlefish
diff --git a/host/libs/confui/layouts/layout.h b/host/libs/confui/layouts/layout.h
index bb40b67..4f6c4dc 100644
--- a/host/libs/confui/layouts/layout.h
+++ b/host/libs/confui/layouts/layout.h
@@ -29,38 +29,13 @@
DECLARE_PARAMETER(RightEdgeOfScreen);
DECLARE_PARAMETER(BottomOfScreen);
-DECLARE_PARAMETER(PowerButtonTop);
-DECLARE_PARAMETER(PowerButtonBottom);
-DECLARE_PARAMETER(VolUpButtonTop);
-DECLARE_PARAMETER(VolUpButtonBottom);
DECLARE_PARAMETER(DefaultFontSize); // 14_dp regular and 18_dp magnified
DECLARE_PARAMETER(BodyFontSize); // 16_dp regular and 20_dp magnified
DECLARE_TYPED_PARAMETER(ShieldColor, ::teeui::Color);
DECLARE_TYPED_PARAMETER(ColorText, ::teeui::Color);
DECLARE_TYPED_PARAMETER(ColorBG, ::teeui::Color);
-NEW_PARAMETER_SET(ConUIParameters, RightEdgeOfScreen, BottomOfScreen,
- PowerButtonTop, PowerButtonBottom, VolUpButtonTop,
- VolUpButtonBottom, DefaultFontSize, BodyFontSize, ShieldColor,
- ColorText, ColorBG);
-
CONSTANT(BorderWidth, 24_dp);
-CONSTANT(PowerButtonCenter, (PowerButtonTop() + PowerButtonBottom()) / 2_px);
-CONSTANT(VolUpButtonCenter, (VolUpButtonTop() + VolUpButtonBottom()) / 2.0_px);
-CONSTANT(GrayZone, 12_dp);
-CONSTANT(RightLabelEdge, RightEdgeOfScreen() - BorderWidth - GrayZone);
-CONSTANT(LabelWidth, RightLabelEdge - BorderWidth);
-
-CONSTANT(SQRT2, 1.4142135623_dp);
-CONSTANT(SQRT8, 2.828427125_dp);
-
-CONSTANT(ARROW_SHAPE,
- CONVEX_OBJECTS(
- CONVEX_OBJECT(Vec2d{.0_dp, .0_dp}, Vec2d{6.0_dp, 6.0_dp},
- Vec2d{6.0_dp - SQRT8, 6.0_dp}, Vec2d{-SQRT2, SQRT2}),
- CONVEX_OBJECT(Vec2d{6.0_dp - SQRT8, 6.0_dp}, Vec2d{6.0_dp, 6.0_dp},
- Vec2d{0.0_dp, 12.0_dp},
- Vec2d{-SQRT2, 12.0_dp - SQRT2})));
DECLARE_FONT_BUFFER(RobotoMedium, RobotoMedium, RobotoMedium_length);
DECLARE_FONT_BUFFER(RobotoRegular, RobotoRegular, RobotoRegular_length);
@@ -68,63 +43,32 @@
CONSTANT(DefaultFont, FONT(RobotoRegular));
-BEGIN_ELEMENT(LabelOK, teeui::Label)
-FontSize(DefaultFontSize());
-LineHeight(20_dp);
-NumberOfLines(2);
-Dimension(LabelWidth, HeightFromLines);
-Position(BorderWidth, PowerButtonCenter - dim_h / 2.0_px);
-DefaultText("Press Power Button Confirm");
-RightJustified;
-VerticallyCentered;
-TextColor(ColorText());
-Font(FONT(RobotoMedium));
-TextID(TEXT_ID(TranslationId::CONFIRM_PWR_BUTTON_DOUBLE_PRESS));
-END_ELEMENT();
+DECLARE_TYPED_PARAMETER(ColorButton, ::teeui::Color);
-BEGIN_ELEMENT(IconPower, teeui::Button, ConvexObjectCount(2))
-Dimension(BorderWidth, PowerButtonBottom() - PowerButtonTop());
-Position(RightEdgeOfScreen() - BorderWidth, PowerButtonTop());
-CornerRadius(3_dp);
-ButtonColor(ColorText());
-RoundTopLeft;
-RoundBottomLeft;
-ConvexObjectColor(ColorBG());
-ConvexObjects(ARROW_SHAPE);
-END_ELEMENT();
+NEW_PARAMETER_SET(ConfUIParameters, RightEdgeOfScreen, BottomOfScreen,
+ DefaultFontSize, BodyFontSize, ShieldColor, ColorText,
+ ColorBG, ColorButton);
-BEGIN_ELEMENT(LabelCancel, teeui::Label)
-FontSize(DefaultFontSize());
-LineHeight(20_dp);
-NumberOfLines(2);
-Dimension(LabelWidth, HeightFromLines);
-Position(BorderWidth, VolUpButtonCenter - dim_h / 2.0_px);
-DefaultText("Press Menu Button to Cancel");
-RightJustified;
-VerticallyCentered;
-TextColor(ColorText());
-Font(FONT(RobotoMedium));
-TextID(TEXT_ID(TranslationId::CANCEL));
-END_ELEMENT();
-
-BEGIN_ELEMENT(IconVolUp, teeui::Button, ConvexObjectCount(2))
-Dimension(BorderWidth, VolUpButtonBottom() - VolUpButtonTop());
-Position(RightEdgeOfScreen() - BorderWidth, VolUpButtonTop());
-CornerRadius(5_dp);
-ButtonColor(ColorBG());
-ConvexObjectColor(ColorText());
-ConvexObjects(ARROW_SHAPE);
-END_ELEMENT();
+CONSTANT(IconShieldDistanceFromTop, 100_dp);
+CONSTANT(LabelBorderZone, 4_dp);
+CONSTANT(RightLabelEdge, RightEdgeOfScreen() - BorderWidth);
+CONSTANT(LabelWidth, RightLabelEdge - BorderWidth);
+CONSTANT(ButtonHeight, 72_dp);
+CONSTANT(ButtonPositionX, 0);
+CONSTANT(ButtonPositionY, BottomOfScreen() - ButtonHeight);
+CONSTANT(ButtonWidth, 130_dp);
+CONSTANT(ButtonLabelDistance, 12_dp);
BEGIN_ELEMENT(IconShield, teeui::Label)
FontSize(24_dp);
LineHeight(24_dp);
NumberOfLines(1);
Dimension(LabelWidth, HeightFromLines);
-Position(BorderWidth, BOTTOM_EDGE_OF(LabelCancel) + 40_dp);
+Position(BorderWidth, IconShieldDistanceFromTop);
DefaultText(
"A"); // ShieldTTF has just one glyph at the code point for capital A
TextColor(ShieldColor());
+HorizontalTextAlignment(Alignment::CENTER);
Font(FONT(Shield));
END_ELEMENT();
@@ -132,8 +76,8 @@
FontSize(20_dp);
LineHeight(20_dp);
NumberOfLines(1);
-Dimension(RightEdgeOfScreen() - BorderWidth, HeightFromLines);
-Position(BorderWidth, BOTTOM_EDGE_OF(IconShield) + 12_dp);
+Dimension(LabelWidth, HeightFromLines);
+Position(BorderWidth, BOTTOM_EDGE_OF(IconShield) + 16_dp);
DefaultText("Android Protected Confirmation");
Font(FONT(RobotoMedium));
VerticallyCentered;
@@ -141,12 +85,56 @@
TextID(TEXT_ID(TranslationId::TITLE));
END_ELEMENT();
+BEGIN_ELEMENT(IconOk, teeui::Button, ConvexObjectCount(1))
+Dimension(ButtonWidth, ButtonHeight - BorderWidth);
+Position(RightEdgeOfScreen() - ButtonWidth - BorderWidth,
+ ButtonPositionY + ButtonLabelDistance);
+CornerRadius(4_dp);
+ButtonColor(ColorButton());
+RoundTopLeft;
+RoundBottomLeft;
+RoundTopRight;
+RoundBottomRight;
+END_ELEMENT();
+
+BEGIN_ELEMENT(LabelOK, teeui::Label)
+FontSize(BodyFontSize());
+LineHeight(BodyFontSize() * 1.4_px);
+NumberOfLines(1);
+Dimension(ButtonWidth - (LabelBorderZone * 2_dp),
+ ButtonHeight - BorderWidth - (LabelBorderZone * 2_dp));
+Position(RightEdgeOfScreen() - ButtonWidth - BorderWidth + LabelBorderZone,
+ ButtonPositionY + ButtonLabelDistance + LabelBorderZone);
+DefaultText("Confirm");
+Font(FONT(RobotoMedium));
+HorizontalTextAlignment(Alignment::CENTER);
+VerticalTextAlignment(Alignment::CENTER);
+TextColor(ColorBG());
+TextID(TEXT_ID(TranslationId::CONFIRM));
+END_ELEMENT();
+
+BEGIN_ELEMENT(LabelCancel, teeui::Label)
+FontSize(BodyFontSize());
+LineHeight(BodyFontSize() * 1.4_px);
+NumberOfLines(1);
+Dimension(ButtonWidth - (LabelBorderZone * 2_dp),
+ ButtonHeight - BorderWidth - (LabelBorderZone * 2_dp));
+Position(BorderWidth + LabelBorderZone,
+ ButtonPositionY + ButtonLabelDistance + LabelBorderZone);
+DefaultText("Cancel");
+HorizontalTextAlignment(Alignment::LEFT);
+Font(FONT(RobotoMedium));
+VerticallyCentered;
+TextColor(ColorButton());
+TextID(TEXT_ID(TranslationId::CANCEL));
+END_ELEMENT();
+
BEGIN_ELEMENT(LabelHint, teeui::Label)
FontSize(DefaultFontSize());
LineHeight(DefaultFontSize() * 1.5_px);
NumberOfLines(4);
Dimension(LabelWidth, HeightFromLines);
-Position(BorderWidth, BottomOfScreen() - BorderWidth - dim_h);
+Position(BorderWidth, ButtonPositionY - dim_h - 48_dp);
DefaultText(
"This confirmation provides an extra layer of security for the action "
"you're "
@@ -161,7 +149,7 @@
FontSize(BodyFontSize());
LineHeight(BodyFontSize() * 1.4_px);
NumberOfLines(20);
-Position(BorderWidth, BOTTOM_EDGE_OF(LabelTitle) + 18_dp);
+Position(BorderWidth, BOTTOM_EDGE_OF(LabelTitle) + 16_dp);
Dimension(LabelWidth, LabelHint::pos_y - pos_y - 24_dp);
DefaultText(
"12345678901234567890123456789012345678901234567890123456789012345678901234"
@@ -171,7 +159,7 @@
Font(FONT(RobotoRegular));
END_ELEMENT();
-NEW_LAYOUT(ConfUILayout, LabelOK, IconPower, LabelCancel, IconVolUp, IconShield,
- LabelTitle, LabelHint, LabelBody);
+NEW_LAYOUT(ConfUILayout, IconShield, LabelTitle, LabelHint, LabelBody, IconOk,
+ LabelOK, LabelCancel);
} // namespace teeui
