omar/panopainter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added settings popup and icon node

Browse Source
This commit is contained in:
omigamedev
2017-02-21 01:00:48 +00:00
parent ee5e4c2d98
commit a2714f513a
8 changed files with 1231 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
data/layout.xml
View File

@@ -1,7 +1,7 @@
<?xml version="1.0"?>
<root>
<layout id="button">
<border width="50" margin="0 5 0 0" color=".1" thickness="2" border-color=".5">
<border width="50" margin="0 5 0 0" color=".1" thickness="1" border-color=".5">
<text text="A" font-face="arial" font-size="11"/>
</border>
</layout>
@@ -19,12 +19,12 @@
</node>
</layout>
<layout id="rounded-inside">
<border thickness="2" border-color=".9" color=".4" height="100%" pad="10">
<border thickness="1" border-color=".9" color=".4" height="100%" pad="10">
</border>
</layout>
<layout id="message-box">
<border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
<border thickness="5" border-color=".2" pad="3">
<border thickness="1" border-color=".2" pad="3">
<border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
<text text="Just a test message" font-face="arial" font-size="11"></text>
</border>
@@ -38,33 +38,79 @@
</border>
</border>
</layout>
<!--settings window-->
<layout id="settings">
<border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
<border thickness="1" border-color=".2" pad="3" width="80%" min-width="400">
<border width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
<text text="Global Settings" font-face="arial" font-size="11"></text>
</border>
<border width="100%" color="0 0 0 .9" pad="10" dir="col">
<!--window content-->
<node dir="row">
<!--sidebar-->
<node width="100" flood-events="1">
<border height="30" width="100%" color=".2" pad="0 0 0 10" align="flex-begin" justify="center">
<text text="Viewport" font-face="arial" font-size="11"/>
</border>
<button-custom height="30" width="100%" color=".1" pad="0 0 0 10" align="flex-begin" justify="center">
<text text="Registers" font-face="arial" font-size="11"/>
</button-custom>
<button-custom height="30" width="100%" color=".1" pad="0 0 0 10" align="flex-begin" justify="center">
<text text="Toolbar" font-face="arial" font-size="11"/>
</button-custom>
<button-custom height="30" width="100%" color=".1" pad="0 0 0 10" align="flex-begin" justify="center">
<text text="Panorama" font-face="arial" font-size="11"/>
</button-custom>
</node>
<!--settings tab-->
<border color=".2" width="100%"></border>
</node>
<!--footer buttons-->
<node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
<button id="btn-ok" text="Ok" width="50" height="30" margin="0 10 0 0"/>
<button text="Cancel" width="60" height="30" pad="10"/>
</node>
</border>
</border>
</border>
</layout>
<!--popup menu-->
<layout id="popup-menu">
<popup-menu positioning="absolute" position="100 100" width="100" pad="2" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
<popup-menu positioning="absolute" position="100 100" width="100" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
<button text="Menu" height="25"/>
<button text="Menu" height="25"/>
<button text="Menu" height="25"/>
<button text="Menu" height="25"/>
</popup-menu>
</layout>
<!--main-->
<layout id="main">
<node dir="col" wrap="0" width="100%" height="100%" pad="5">
<border margin="0 0 5 0" pad="3 0 3 3" color=".3" width="100%" height="25" dir="row" align="center">
<button height="100%" margin="0 5 0 0" text="File"/>
<button height="100%" margin="0 5 0 0" text="Edit"/>
<button height="100%" margin="0 5 0 0" text="View"/>
<!-- menu bar -->
<border flood-events="1" margin="0 0 5 0" pad="3 0 3 3" color=".3" width="100%" height="25" dir="row" align="center">
<button-custom id="menu-file" height="100%" margin="0 5 0 0" justify="center" align="center" pad="8">
<text text="File" font-face="arial" font-size="11"/>
</button-custom>
<button-custom id="menu-edit" height="100%" margin="0 5 0 0" justify="center" align="center" pad="8">
<text text="Edit" font-face="arial" font-size="11"/>
</button-custom>
<button-custom id="menu-layers" height="100%" margin="0 5 0 0" justify="center" align="center" pad="8">
<text text="Layers" font-face="arial" font-size="11"/>
</button-custom>
</border>
<!-- toolbar -->
<border id="toolbar" height="50" width="100%" pad="5" dir="row" color=".2">
<button id="btn-close" width="50" height="100%" margin="0 5 0 0" text="Close"/>
<button id="btn-popup" width="50" height="100%" margin="0 5 0 0" text="Popup"/>
<ref id="multi-button"/>
<border width="50" margin="0 5 0 0" color=".1" thickness="2" border-color=".5" justify="center" align="center">
<border width="50" margin="0 5 0 0" color=".1" thickness="1" border-color=".5" justify="center" align="center">
<text text="button" font-face="arial" font-size="11"/>
</border>
<separator width="10"/>
<button-custom width="50" margin="0 5 0 0" color=".1" thickness="2" border-color=".5" justify="center" align="center"><text text="red" font-face="arial" font-size="11" color="1 0 0 1"/></button-custom>
<button-custom width="50" margin="0 5 0 0" color=".3" thickness="2" border-color=".5" justify="center" align="center"><text text="green" font-face="arial" font-size="11" color="0 1 0 1"/></button-custom>
<button-custom width="50" margin="0 5 0 0" color=".2" thickness="2" border-color=".5" justify="center" align="center"><text text="blue" font-face="arial" font-size="11" color=".4 .4 1 1"/></button-custom>
<button-custom width="50" margin="0 5 0 0" color=".1" thickness="1" border-color=".5" justify="center" align="center"><text text="red" font-face="arial" font-size="11" color="1 0 0 1"/></button-custom>
<button-custom width="50" margin="0 5 0 0" color=".3" thickness="1" border-color=".5" justify="center" align="center"><text text="green" font-face="arial" font-size="11" color="0 1 0 1"/></button-custom>
<button-custom width="50" margin="0 5 0 0" color=".2" thickness="1" border-color=".5" justify="center" align="center"><text text="blue" font-face="arial" font-size="11" color=".4 .4 1 1"/></button-custom>
<separator width="10"/>
<!--button with image-->
<button-custom width="50" margin="0 5 0 0" thickness="1" border-color=".0" pad="8">
@@ -72,11 +118,14 @@
<!--<text text="Groups" font-face="arial" font-size="11" color=".1"/>-->
</image>
</button-custom>
<button-custom width="50" margin="0 5 0 0" thickness="1" border-color=".0" pad="8">
<button-custom id="btn-settings" width="50" margin="0 5 0 0" thickness="1" border-color=".0" pad="8">
<image path="data/icons.png" region="143 155 203 215" width="100%" height="100%" align="center" justify="flex-end">
<!--<text text="Settings" font-face="arial" font-size="11"/>-->
</image>
</button-custom>
<button-custom width="50" margin="0 5 0 0" thickness="1" border-color=".0" pad="8" align="center" justify="center">
<icon width="100%" height="100%" icon="accept"/>
</button-custom>
<!--<border width="50" margin="0 5 0 0" color=".1" thickness="2" border-color=".7" pad="4">
<image path="data/uvs.jpg" region="0 0 50 50" width="100%" height="100%" align="center" justify="flex-end">
<text text="atlas" font-face="arial" font-size="11"/>
@@ -101,34 +150,57 @@
<node grow="1" dir="row" wrap="1" height="0">
<border width="60" color=".2" margin="0 10 0 0" dir="col" pad="4">
<border height="4" margin="-4 0 0 0"/>
<button-custom width="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="8">
<image path="data/icons.png" region="143 155 203 215" width="100%" height="30" align="center" justify="flex-end"/>
<button-custom width="50" height="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="12" align="center" justify="center">
<icon width="100%" height="100%" icon="accept"/>
</button-custom>
<button-custom width="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="8">
<image path="data/icons.png" region="143 155 203 215" width="100%" height="30" align="center" justify="flex-end"/>
<button-custom width="50" height="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="12" align="center" justify="center">
<icon width="100%" height="100%" icon="arrow_branch"/>
</button-custom>
<button-custom width="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="8">
<image path="data/icons.png" region="143 155 203 215" width="100%" height="30" align="center" justify="flex-end"/>
<button-custom width="50" height="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="12" align="center" justify="center">
<icon width="100%" height="100%" icon="arrow_refresh"/>
</button-custom>
<button-custom width="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="8">
<image path="data/icons.png" region="143 155 203 215" width="100%" height="30" align="center" justify="flex-end"/>
<button-custom width="50" height="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="12" align="center" justify="center">
<icon width="100%" height="100%" icon="disk"/>
</button-custom>
</border>
<!-- side bar -->
<node width="200" height="100%" dir="col" color=".2">
<node width="30%" min-width="150" height="100%" dir="col" color=".2">
<border pad="15" margin="10 0 10 0" color=".3" width="100%" height="auto">
<border height="30" color=".5" align="center" justify="center">
<text text="Common Tools" font-face="arial" font-size="11" color="1 1 1 1"/>
<text text="Emoticons" font-face="arial" font-size="11" color="1 1 1 1"/>
</border>
<border color=".4" pad="5" dir="row" wrap="1">
<button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
<icon width="100%" height="100%" icon="emoticon_evilgrin"/>
</button-custom>
<button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
<icon width="100%" height="100%" icon="emoticon_smile"/>
</button-custom>
<button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
<icon width="100%" height="100%" icon="emoticon_surprised"/>
</button-custom>
<button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
<icon width="100%" height="100%" icon="emoticon_tongue"/>
</button-custom>
<button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
<icon width="100%" height="100%" icon="emoticon_unhappy"/>
</button-custom>
<button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
<icon width="100%" height="100%" icon="emoticon_waii"/>
</button-custom>
<button-custom width="30" height="30" margin="5 5 0 0" thickness="1" border-color=".0" pad="4" align="center" justify="center">
<icon width="100%" height="100%" icon="emoticon_wink"/>
</button-custom>
</border>
<border height="30" color=".4" />
<border height="30" color=".4" />
<border height="30" color=".4" />
</border>
<border pad="15" margin="0 0 10 0" color=".3" width="100%" height="auto">
<border height="30" color=".5" align="center" justify="center">
<text text="Statistics" font-face="arial" font-size="11" color="1 1 1 1"/>
</border>
<border height="30" color=".4" />
<border height="30" color=".5" />
<border height="30" color=".4" />
<border height="30" color=".4" />
<border height="30" color=".4" />
<border height="30" color=".5" />
</border>
</node>
<!-- content panel -->
@@ -145,5 +217,6 @@
<text text="#opengl #fromscratch #c++" font-face="arial" font-size="11" margin="0 0 0 10" color=".2 .5 1 1"/>
</border>
</node>
<!--<ref id="settings"/>-->
</layout>
</root>

BIN
data/spritesheet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 364 KiB

1006
data/spritesheet.txt Normal file
View File

File diff suppressed because it is too large Load Diff

33
engine/app.cpp
View File

@@ -122,6 +122,9 @@ void App::init()
FontManager::init();
FontManager::load(kFont::Arial_11, ttf, 15);
FontManager::load(kFont::Arial_30, ttf, 30);
NodeBorder::static_init();
NodeImage::static_init();
NodeIcon::static_init();
layout.on_loaded = [&] {
layout[main_id].update(width, height);
@@ -136,9 +139,34 @@ void App::init()
msgbox->m_manager = &layout;
msgbox->init();
layout[main_id].add_child(msgbox);
layout[main_id].update(width, height);
layout[main_id].update();
};
}
if (auto* button = layout[main_id].find<NodeButtonCustom>("btn-settings"))
{
button->on_click = [this] {
settings = new NodeSettings();
settings->m_manager = &layout;
settings->init();
layout[main_id].add_child(settings);
layout[main_id].update();
};
}
if (auto* menu_file = layout[main_id].find<NodeButtonCustom>("menu-file"))
{
menu_file->on_click = [=] {
glm::vec2 pos = menu_file->m_pos + glm::vec2(0, menu_file->m_size.y);
popup = (NodePopupMenu*)layout[const_hash("popup-menu")].m_children[0]->clone();
popup->SetPositioning(YGPositionTypeAbsolute);
popup->SetPosition(pos.x, pos.y);
layout[main_id].add_child(popup);
layout[main_id].update();
};
}
if (auto* toolbar = layout[main_id].find<Node>("toolbar"))
{
toolbar->m_flood_events = true;
}
};
layout.load("data/layout.xml");
@@ -152,8 +180,6 @@ void App::init()
ShaderManager::create(kShader::UVs, shader_v, shader_uv_f);
ShaderManager::create(kShader::Font, shader_font_v, shader_font_f);
ShaderManager::create(kShader::Atlas, shader_atlas_v, shader_atlas_f);
NodeBorder::static_init();
NodeImage::static_init();
if (!tex.load("data/uvs.jpg"))
printf("error loading image\n");
@@ -239,7 +265,6 @@ void App::mouse_down(int button, float x, float y)
popup->SetPositioning(YGPositionTypeAbsolute);
popup->SetPosition(x, y);
layout[main_id].add_child(popup);
layout[main_id].update(width, height);
}
layout[main_id].update();
}

1
engine/app.h
View File

@@ -12,6 +12,7 @@ class App
Texture2D tex;
LayoutManager layout;
NodeMessageBox* msgbox;
NodeSettings* settings;
NodePopupMenu* popup = nullptr;
const uint16_t main_id = const_hash("main");
public:

14
engine/layout.cpp
View File

@@ -5,6 +5,7 @@
Plane NodeBorder::m_plane;
Plane NodeImage::m_plane;
Sampler NodeImage::m_sampler;
std::map<std::string, glm::vec4> NodeIcon::m_icons;
kEventResult Node::on_event(Event* e)
{
@@ -164,9 +165,6 @@ void Node::parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* attr)
}
break;
case kAttribute::MinWidth:
if (strchr(attr->Value(), '%'))
YGNodeStyleSetMinWidthPercent(y_node, attr->FloatValue());
else
YGNodeStyleSetMinWidth(y_node, attr->FloatValue());
break;
case kAttribute::MaxWidth:
@@ -313,6 +311,9 @@ void Node::parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* attr)
}
break;
}
case kAttribute::FloodEvents:
m_flood_events = attr->IntValue() > 0;
break;
default:
break;
}
@@ -355,6 +356,13 @@ void Node::load_internal(const tinyxml2::XMLElement* x_node)
n->load_internal(x_child);
break;
}
case kWidget::Icon:
{
auto n = new NodeIcon();
add_child(n);
n->load_internal(x_child);
break;
}
case kWidget::Text:
{
auto n = new NodeText();

88
engine/layout.h
View File

@@ -8,8 +8,8 @@ enum class kAttribute : uint16_t
{
id = const_hash("id"),
Width = const_hash("width"),
MinWidth = const_hash("max-width"),
MaxWidth = const_hash("min-width"),
MinWidth = const_hash("min-width"),
MaxWidth = const_hash("max-width"),
Height = const_hash("height"),
MinHeight = const_hash("min-height"),
MaxHeight = const_hash("max-height"),
@@ -35,6 +35,8 @@ enum class kAttribute : uint16_t
Region = const_hash("region"),
Position = const_hash("position"),
Positioning = const_hash("positioning"),
FloodEvents = const_hash("flood-events"),
Icon = const_hash("icon"),
};
enum class kWidget : uint16_t
@@ -43,6 +45,7 @@ enum class kWidget : uint16_t
Shape = const_hash("shape"),
Text = const_hash("text"),
Image = const_hash("image"),
Icon = const_hash("icon"),
Button = const_hash("button"),
ButtonCustom = const_hash("button-custom"),
PopupMenu = const_hash("popup-menu"),
@@ -300,7 +303,7 @@ public:
glm::vec4 pad;
int n = sscanf(attr->Value(), "%f %f %f %f", &pad.x, &pad.y, &pad.z, &pad.w);
if (n == 1)
m_color = glm::vec4(pad.x);
m_color = glm::vec4(pad.x, pad.x, pad.x, 1);
else
m_color = pad;
break;
@@ -628,7 +631,6 @@ public:
virtual void init() override
{
m_flood_events = true;
SetPadding(10, 10, 10, 10);
SetPosition(0, 0);
SetWidth(100);
SetHeight(400);
@@ -658,8 +660,8 @@ public:
}
virtual void loaded() override
{
m_thinkness = 1;
m_border_color = glm::vec4(0, 0, 0, 1);
//m_thinkness = 1;
//m_border_color = glm::vec4(0, 0, 0, 1);
m_color = color_normal;
}
virtual kEventResult handle_event(Event* e) override
@@ -686,3 +688,77 @@ public:
return kEventResult::Consumed;
}
};
class NodeSettings : public Node
{
Node* m_template;
NodeButton* btnOk;
public:
virtual Node* clone_instantiate() const override { return new NodeButtonCustom(); }
virtual void init() override
{
SetPosition(0, 0);
SetWidthP(100);
SetHeightP(100);
SetPositioning(YGPositionTypeAbsolute);
m_template = (*m_manager)[const_hash("settings")].m_children[0]->clone();
add_child(m_template);
btnOk = m_template->find<NodeButton>("btn-ok");
btnOk->on_click = [&] { destroy(); };
}
virtual kEventResult handle_event(Event* e) override
{
return kEventResult::Consumed;
}
};
class NodeIcon : public NodeImage
{
static std::map<std::string, glm::vec4> m_icons;
std::string m_icon_name;
public:
static void static_init()
{
// spritesheet maker: https://draeton.github.io/stitches/
// icons: http://www.famfamfam.com/lab/icons/silk/
// regex css -> spritesheet.txt: \.([^{]+) {\s+width: (\d+)px;\s+height: (\d+)px;\s+.*: -(\d+)px -(\d+)px;\s+}\s+
// to: "\1",\2,\3,\4,\5\n
static char str[256];
int x, y, w, h;
FILE* f = fopen("data/spritesheet.txt", "r");
while (!feof(f) && fscanf(f, "%s %d %d %d %d", str, &w, &h, &x, &y) == 5)
{
m_icons[str] = glm::vec4(x, y, x+w, y+h);
}
fclose(f);
}
virtual Node* clone_instantiate() const override { return new NodeIcon(); }
virtual void clone_copy(Node* dest) const override
{
NodeImage::clone_copy(dest);
NodeIcon* n = static_cast<NodeIcon*>(dest);
n->m_icon_name = m_icon_name;
}
virtual void create() override
{
m_region = m_icons[m_icon_name];
m_path = "data/spritesheet.png";
m_tex_id = const_hash(m_path.c_str());
m_use_atlas = true;
NodeImage::create();
auto tex_sz = TextureManager::get(m_tex_id).size();
YGNodeStyleSetAspectRatio(y_node, tex_sz.x / tex_sz.y);
}
virtual void parse_attributes(kAttribute ka, const tinyxml2::XMLAttribute* attr) override
{
NodeImage::parse_attributes(ka, attr);
switch (ka)
{
case kAttribute::Icon:
m_icon_name = attr->Value();
break;
default:
break;
}
}
};

1
engine/pch.h
View File

@@ -16,6 +16,7 @@
#include <map>
#include <cmath>
#include <stack>
#include <regex>
#include <memory>
#include <string>
#include <vector>