ini
This commit is contained in:
Ilusha
IlyaShurupov
parent
f7f0d6e5be
commit
83d51d3e83
30 changed files with 1186 additions and 208 deletions
281
Widgets/examples/ExampleGUI.hpp
Normal file
281
Widgets/examples/ExampleGUI.hpp
Normal file
|
|
@ -0,0 +1,281 @@
|
|||
#pragma once
|
||||
|
||||
#include "Widgets.hpp"
|
||||
|
||||
namespace tp {
|
||||
|
||||
template <typename Events, typename Canvas>
|
||||
class UserWidget : public Widget<Events, Canvas> {
|
||||
public:
|
||||
UserWidget() {
|
||||
this->createConfig("User");
|
||||
this->addColor("Base", "Base");
|
||||
this->addValue("Size", "FontSize");
|
||||
this->addValue("Padding", "Padding");
|
||||
this->addColor("ColUser", "Front");
|
||||
this->addColor("Accent", "Accent");
|
||||
this->addValue("Rounding", "Rounding");
|
||||
}
|
||||
|
||||
void proc(const Events& events, const RectF& areaParent, const RectF& aArea) override {
|
||||
this->mArea = aArea;
|
||||
this->mArea.w = 30;
|
||||
this->mVisible = areaParent.isOverlap(aArea);
|
||||
if (!this->mVisible) return;
|
||||
mIsHover = aArea.isInside(events.getPos());
|
||||
}
|
||||
|
||||
void draw(Canvas& canvas) const override {
|
||||
if (!this->mVisible) return;
|
||||
|
||||
if (mIsHover) canvas.rect(this->mArea, this->getColor("Accent"), this->getValue("Rounding"));
|
||||
else canvas.rect(this->mArea, this->getColor("Base"), this->getValue("Rounding"));
|
||||
|
||||
const auto padding = this->getValue("Padding");
|
||||
const auto size = this->getValue("Size");
|
||||
const auto colUser = this->getColor("ColUser");
|
||||
|
||||
canvas.text(mUser.read(), this->mArea, size, Canvas::CC, padding, colUser);
|
||||
}
|
||||
|
||||
public:
|
||||
String mUser = "UserName";
|
||||
bool mIsHover = false;
|
||||
};
|
||||
|
||||
template <typename Events, typename Canvas>
|
||||
class MessageWidget : public Widget<Events, Canvas> {
|
||||
public:
|
||||
MessageWidget() {
|
||||
this->createConfig("Message");
|
||||
this->addColor("Base", "Base");
|
||||
this->addValue("Size", "FontSize");
|
||||
this->addValue("SizeUser", "FontSizeDim");
|
||||
this->addValue("Padding", "Padding");
|
||||
this->addColor("ColUser", "Front");
|
||||
this->addColor("Col", "FrontDim");
|
||||
this->addValue("Rounding", "Rounding");
|
||||
}
|
||||
|
||||
void proc(const Events& events, const RectF& areaParent, const RectF& aArea) override {
|
||||
this->mArea = aArea;
|
||||
this->mArea.w = 50;
|
||||
this->mVisible = areaParent.isOverlap(aArea);
|
||||
if (!this->mVisible) return;
|
||||
mIsHover = aArea.isInside(events.getPos());
|
||||
}
|
||||
|
||||
void draw(Canvas& canvas) const override {
|
||||
if (!this->mVisible) return;
|
||||
|
||||
if (mIsHover) canvas.rect(this->mArea, this->getColor("Base"), this->getValue("Rounding"));
|
||||
|
||||
const auto padding = this->getValue("Padding");
|
||||
const auto size = this->getValue("Size");
|
||||
const auto sizeUser = this->getValue("SizeUser");
|
||||
const auto col = this->getColor("Col");
|
||||
const auto colUser = this->getColor("ColUser");
|
||||
|
||||
auto userName = this->mArea;
|
||||
userName.w = 25;
|
||||
|
||||
auto content = this->mArea;
|
||||
content.y = userName.y + userName.w;
|
||||
content.w = this->mArea.w - userName.w;
|
||||
|
||||
canvas.text(mContent.read(), content, size, Canvas::LC, padding, col);
|
||||
canvas.text(mUser.read(), userName, sizeUser, Canvas::LC, padding, colUser);
|
||||
}
|
||||
|
||||
public:
|
||||
String mContent = "Message Content";
|
||||
String mUser = "UserName";
|
||||
bool mIsHover = false;
|
||||
};
|
||||
|
||||
template <typename Events, typename Canvas>
|
||||
class LoginWidget : public Widget<Events, Canvas> {
|
||||
public:
|
||||
explicit LoginWidget() {
|
||||
this->createConfig("Login");
|
||||
this->addColor("Back", "Background");
|
||||
mPass.mId = "pass";
|
||||
mUser.mId = "user";
|
||||
mButton.mLabel.mLabel = "Login";
|
||||
}
|
||||
|
||||
void proc(const Events& events, const RectF& areaParent, const RectF& aArea) override {
|
||||
this->mArea = aArea;
|
||||
mLogged = false;
|
||||
|
||||
const auto xval = aArea.z / 2 - 100;
|
||||
mUser.proc(events, aArea, { xval, 10, 200, 30 });
|
||||
mPass.proc(events, aArea, { xval, 50, 200, 30 });
|
||||
mButton.proc(events, aArea, { xval, 90, 200, 30 });
|
||||
|
||||
if (mButton.mIsReleased) {
|
||||
mButton.mIsReleased = false;
|
||||
mLogged = true;
|
||||
}
|
||||
}
|
||||
|
||||
void draw(Canvas& canvas) const override {
|
||||
canvas.rect(this->mArea, this->getColor("Back"));
|
||||
mButton.draw(canvas);
|
||||
mUser.draw(canvas);
|
||||
mPass.draw(canvas);
|
||||
}
|
||||
|
||||
public:
|
||||
TextInputWidget<Events, Canvas> mUser;
|
||||
TextInputWidget<Events, Canvas> mPass;
|
||||
ButtonWidget<Events, Canvas> mButton;
|
||||
bool mLogged = false;
|
||||
};
|
||||
|
||||
template <typename Events, typename Canvas>
|
||||
class ActiveChatWidget : public Widget<Events, Canvas> {
|
||||
public:
|
||||
ActiveChatWidget() {
|
||||
this->createConfig("ActiveChat");
|
||||
this->addColor("Back", "Background");
|
||||
this->addValue("Padding", "Padding");
|
||||
mSend.mLabel.mLabel = "Send";
|
||||
mMessage.mId = "Message";
|
||||
}
|
||||
|
||||
void proc(const Events& events, const RectF& areaParent, const RectF& aArea) override {
|
||||
this->mArea = aArea;
|
||||
|
||||
auto history = this->mArea;
|
||||
history.w -= 50;
|
||||
|
||||
auto input = this->mArea;
|
||||
input.y = history.w + 10;
|
||||
input.w = 40 - this->getValue("Padding");
|
||||
input.x += this->getValue("Padding");
|
||||
input.z -= this->getValue("Padding");
|
||||
|
||||
auto inputMessage = input;
|
||||
inputMessage.z -= 100;
|
||||
|
||||
auto inputSend = input;
|
||||
inputSend.x = inputMessage.x + inputMessage.z + this->getValue("Padding");
|
||||
inputSend.z = 100 - this->getValue("Padding") * 2;
|
||||
|
||||
mSend.proc(events, this->mArea, inputSend);
|
||||
mMessage.proc(events, this->mArea, inputMessage);
|
||||
|
||||
if (mSend.mIsReleased) {
|
||||
mSend.mIsReleased = false;
|
||||
}
|
||||
|
||||
mHistoryView.proc(events, this->mArea, history);
|
||||
}
|
||||
|
||||
void draw(Canvas& canvas) const override {
|
||||
canvas.rect(this->mArea, this->getColor("Back"));
|
||||
mHistoryView.draw(canvas);
|
||||
mMessage.draw(canvas);
|
||||
mSend.draw(canvas);
|
||||
}
|
||||
|
||||
public:
|
||||
Buffer<MessageWidget<Events, Canvas>> mMessages;
|
||||
ScrollableWindow<Events, Canvas> mHistoryView;
|
||||
TextInputWidget<Events, Canvas> mMessage;
|
||||
ButtonWidget<Events, Canvas> mSend;
|
||||
};
|
||||
|
||||
template <typename Events, typename Canvas>
|
||||
class ChattingWidget : public Widget<Events, Canvas> {
|
||||
public:
|
||||
explicit ChattingWidget() {
|
||||
this->createConfig("Chatting");
|
||||
this->addColor("Back", "Background");
|
||||
this->addValue("Padding", "Padding");
|
||||
|
||||
// todo : fetch code
|
||||
mUsers.append(UserWidget<Events, Canvas>());
|
||||
mUsers.append(UserWidget<Events, Canvas>());
|
||||
mUsers.append(UserWidget<Events, Canvas>());
|
||||
|
||||
mUsers[0].mArea = { 0, 0, 100, 100 };
|
||||
mUsers[1].mArea = { 0, 0, 100, 100 };
|
||||
mUsers[2].mArea = { 0, 0, 100, 100 };
|
||||
|
||||
for (auto message : mUsers) {
|
||||
mSideView.mContents.append(&message.data());
|
||||
}
|
||||
|
||||
mActive.mMessages.append(MessageWidget<Events, Canvas>());
|
||||
mActive.mMessages.append(MessageWidget<Events, Canvas>());
|
||||
mActive.mMessages.append(MessageWidget<Events, Canvas>());
|
||||
|
||||
mActive.mMessages[0].mArea = { 0, 0, 100, 100 };
|
||||
mActive.mMessages[1].mArea = { 0, 0, 100, 100 };
|
||||
mActive.mMessages[2].mArea = { 0, 0, 100, 100 };
|
||||
|
||||
for (auto message : mActive.mMessages) {
|
||||
mActive.mHistoryView.mContents.append(&message.data());
|
||||
}
|
||||
}
|
||||
|
||||
void proc(const Events& events, const RectF& areaParent, const RectF& aArea) override {
|
||||
this->mArea = aArea;
|
||||
|
||||
mSplitView.proc(events, aArea, aArea);
|
||||
|
||||
const auto padding = this->getValue("Padding");
|
||||
mSideView.proc(events, this->mArea, mSplitView.getSecond());
|
||||
|
||||
mActive.proc(events, aArea, mSplitView.getFirst());
|
||||
}
|
||||
|
||||
void draw(Canvas& canvas) const override {
|
||||
canvas.rect(this->mArea, this->getColor("Back"));
|
||||
mSplitView.draw(canvas);
|
||||
mSideView.draw(canvas);
|
||||
mActive.draw(canvas);
|
||||
}
|
||||
|
||||
public:
|
||||
Buffer<UserWidget<Events, Canvas>> mUsers;
|
||||
ScrollableWindow<Events, Canvas> mSideView;
|
||||
ActiveChatWidget<Events, Canvas> mActive;
|
||||
SplitView<Events, Canvas> mSplitView;
|
||||
};
|
||||
|
||||
template <typename Events, typename Canvas>
|
||||
class ComplexWidget : public Widget<Events, Canvas> {
|
||||
public:
|
||||
ComplexWidget() {
|
||||
this->createConfig("chat");
|
||||
this->addColor("Back", "Background");
|
||||
}
|
||||
|
||||
void proc(const Events& events, const RectF& areaParent, const RectF& aArea) override {
|
||||
this->mArea = aArea;
|
||||
if (mLogged) {
|
||||
mChatting.proc(events, aArea, aArea);
|
||||
} else {
|
||||
mLogin.proc(events, aArea, aArea);
|
||||
mLogged = mLogin.mLogged;
|
||||
if (mLogged) {
|
||||
mChatting.proc(events, aArea, aArea);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void draw(Canvas& canvas) const override {
|
||||
canvas.rect(this->mArea, this->getColor("Back"));
|
||||
if (mLogged) mChatting.draw(canvas);
|
||||
else mLogin.draw(canvas);
|
||||
}
|
||||
|
||||
private:
|
||||
bool mLogged = false;
|
||||
LoginWidget<Events, Canvas> mLogin;
|
||||
ChattingWidget<Events, Canvas> mChatting;
|
||||
};
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue