shifathosn
/
nxemu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI: More work on the input config

This commit is contained in:
N3xoX1 2025-10-07 11:36:05 +10:30
parent caa1abc9a2
commit 176ef08ce6
7 changed files with 191 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
external/sciterui vendored

@ -1 +1 @@
Subproject commit a11af8a0b09fd53d66b8f78e4522eb15d6ab5aae
Subproject commit 6479f023ef21aac51f0580154a6363377c4c6f2f

1
lang/english/css/base.css
View File

@ -18,6 +18,7 @@ html
{
border: 1px solid var(--color-window-border);
background-color: var(--color-main-background);
box-sizing: border-box;
}
html[window-state="maximized"]

35
lang/english/css/config.css
View File

@ -27,15 +27,10 @@ popup.tooltip
font-size: 0.8rem;
}
button
.config-header button
{
color: #eff0f1;
background: #232728;
border: 1px solid #55575a;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 0.8rem;
padding: 0.2rem;
min-width: 5rem;
padding: 0.15rem;
margin: 0 0 0 0.3rem;
}
button:hover
@ -84,17 +79,35 @@ button:active
border-bottom: 1px solid var(--color-config-page);
}
.controller-body
.controller-config
{
background: var(--color-config-page);
border: 1px solid var(--color-config-page-border);
width: 100%%;
height: 100%%;
flow: horizontal;
padding: 1em;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 0.8rem;
color: #eff0f1;
padding: 1em;
}
.controller-config .config-header
{
flow: horizontal;
}
.controller-config .config-header .group
{
position: relative;
background-color: var(--color-config-page);
border: 1px solid #55575a;
padding: 1.2rem 0.5rem 0.5rem 0.5rem;
margin: 0 0 1rem 0;
}
.controller-body
{
flow: horizontal;
}
.config-left,

131
lang/english/html/input_config.html
View File

@ -7,75 +7,76 @@
<header>
<window-caption role=window-caption><img src="window-icon-32.png" /><span>Configure input</span></window-caption>
<window-buttons>
<window-button role="window-minimize"></window-button>
<window-button role="window-close"></window-button>
</window-buttons>
</header>
<style>
html {
margin: 0;
padding: 0;
overflow: hidden;
width: max-content;
height: max-content;
}
#MainTabNav
{
flow: horizontal;
}
#MainTabNav Page
{
white-space: nowrap;
}
.tab-button {
text-align: center;
min-width: 2.5rem;
}
.tab-button:visited {
background: var(--color-config-page);
border-color: var(--color-config-page-border);
border-bottom: 1px solid var(--color-config-page);
}
.connect {
position: absolute;
top: -0.5rem;
left: 0.2rem;
background: var(--color-config-page);
padding: 0 8px;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.controller-select
{
width: 100%%;
}
button
{
color: #eff0f1;
background: #232728;
border: 1px solid #55575a;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 0.8rem;
padding: 0.2rem;
min-width: 5rem;
}
</style>
<body>
<div class="tabs">
<button class="tab-button active" data-tab="player1">Player 1</button><button class="tab-button" data-tab="player2">Player 2</button><button class="tab-button" data-tab="player3">Player 3</button>
<button class="tab-button" data-tab="player4">Player 4</button>
<button class="tab-button" data-tab="player5">Player 5</button>
<button class="tab-button" data-tab="player6">Player 6</button>
<button class="tab-button" data-tab="player7">Player 7</button>
<button class="tab-button" data-tab="player8">Player 8</button>
</div>
<div class="controller-body">
<div class="config-left">
<div class="input-group">
<div class="group-title">Left Stick</div>
<div class="input-grid-directional">
<div class="input-row"><span>Up</span><button>W</button></div>
<div class="input-row"><span>Left</span><button>A</button></div>
<div class="input-row"><span>Right</span><button>D</button></div>
<div class="input-row"><span>Down</span><button>S</button></div>
<div class="input-row"><span>Pressed</span><button>F</button></div>
<div class="input-row"><span>Modifier</span><button>Shift</button></div>
<label>Modifier Range: <span>51%</span></label>
<input type="range" min="0" max="100" value="51" />
</div>
</div>
<div class="input-group">
<div class="group-title">D-Pad</div>
<div class="input-grid-directional">
<div class="input-row"><span>Up</span><button>Up</button></div>
<div class="input-row"><span>Left</span><button>Left</button></div>
<div class="input-row"><span>Right</span><button>Right</button></div>
<div class="input-row"><span>Down</span><button>Down</button></div>
</div>
</div>
</div>
<div class="config-center">
<!-- Controller image goes here -->
</div>
<div class="config-right">
<div class="input-group">
<div class="group-title">Face Buttons</div>
<div class="input-grid-directional">
<div class="input-row"><span>X</span><button>V</button></div>
<div class="input-row"><span>Y</span><button>Z</button></div>
<div class="input-row"><span>A</span><button>C</button></div>
<div class="input-row"><span>B</span><button>X</button></div>
</div>
</div>
<div class="input-group">
<div class="group-title">Right Stick</div>
<div class="input-grid-directional">
<div class="input-row"><span>Up</span><button>I</button></div>
<div class="input-row"><span>Left</span><button>J</button></div>
<div class="input-row"><span>Right</span><button>L</button></div>
<div class="input-row"><span>Down</span><button>K</button></div>
<div class="input-row"><span>Pressed</span><button>G</button></div>
<div class="input-row"><span>Modifier</span><button>&nbsp;</button></div>
<label>Modifier Range: <span>51%</span></label>
<input type="range" min="0" max="100" value="51" />
</div>
</div>
</div>
<div class="InputPage">
<PageNav id="MainTabNav" target="InputContents">
<Page contents="input_config_player.html" label="Player 1" Name="Player1" class="tab-button" />
<Page contents="input_config_player.html" label="Player 2" Name="Player2" class="tab-button" />
<Page contents="input_config_player.html" label="Player 3" Name="Player3" class="tab-button" />
<Page contents="input_config_player.html" label="Player 4" Name="Player4" class="tab-button" />
<Page contents="input_config_player.html" label="Player 5" Name="Player5" class="tab-button" />
<Page contents="input_config_player.html" label="Player 6" Name="Player6" class="tab-button" />
<Page contents="input_config_player.html" label="Player 7" Name="Player7" class="tab-button" />
<Page contents="input_config_player.html" label="Player 8" Name="Player8" class="tab-button" />
</PageNav>
<div id="InputContents"/>
</div>
<div class="footer">
<button>OK</button>

83
lang/english/html/input_config_player.html Normal file
View File

@ -0,0 +1,83 @@
<div class="controller-config">
<div class="config-header">
<div class="group" style="min-width: 9rem; margin-right: 0.4rem;">
<div class="connect">
<input type="checkbox" id="connect-controller">
<label for="connect-controller">Connect Controller</label>
</div>
<select id="controller-type" class="controller-select"></select>
</div>
<div class="group" style="min-width: 14rem; margin-right: 0.4rem;">
<div class="group-title">Input Device</div>
<select id="input-device" class="controller-select"></select>
</div>
<div class="group" style="width: 100%%">
<div class="group-title">Profile</div>
<select id="profile" style="width: 100%%">
<option value="">Select Profile</option>
<option value="default">Default</option>
<option value="custom1">Custom 1</option>
<option value="custom2">Custom 2</option>
</select>
<button id="profile-save-btn">Save</button>
<button id="profile-new-btn">New</button>
<button id="profile-delete-btn">Delete</button>
</div>
</div>
<div class="controller-body">
<div class="config-left">
<div class="input-group">
<div class="group-title">Left Stick</div>
<div class="input-grid-directional">
<div class="input-row"><span>Up</span><button>W</button></div>
<div class="input-row"><span>Left</span><button>A</button></div>
<div class="input-row"><span>Right</span><button>D</button></div>
<div class="input-row"><span>Down</span><button>S</button></div>
<div class="input-row"><span>Pressed</span><button>F</button></div>
<div class="input-row"><span>Modifier</span><button>Shift</button></div>
<label>Modifier Range: <span>51%</span></label>
<input type="range" min="0" max="100" value="51" />
</div>
</div>
<div class="input-group">
<div class="group-title">D-Pad</div>
<div class="input-grid-directional">
<div class="input-row"><span>Up</span><button>Up</button></div>
<div class="input-row"><span>Left</span><button>Left</button></div>
<div class="input-row"><span>Right</span><button>Right</button></div>
<div class="input-row"><span>Down</span><button>Down</button></div>
</div>
</div>
</div>
<div class="config-center">
<img src="controller.svg" />
</div>
<div class="config-right">
<div class="input-group">
<div class="group-title">Face Buttons</div>
<div class="input-grid-directional">
<div class="input-row"><span>X</span><button>V</button></div>
<div class="input-row"><span>Y</span><button>Z</button></div>
<div class="input-row"><span>A</span><button>C</button></div>
<div class="input-row"><span>B</span><button>X</button></div>
</div>
</div>
<div class="input-group">
<div class="group-title">Right Stick</div>
<div class="input-grid-directional">
<div class="input-row"><span>Up</span><button>I</button></div>
<div class="input-row"><span>Left</span><button>J</button></div>
<div class="input-row"><span>Right</span><button>L</button></div>
<div class="input-row"><span>Down</span><button>K</button></div>
<div class="input-row"><span>Pressed</span><button>G</button></div>
<div class="input-row"><span>Modifier</span><button>&nbsp;</button></div>
<label>Modifier Range: <span>51%</span></label>
<input type="range" min="0" max="100" value="51" />
</div>
</div>
</div>
</div>
</div>

13
lang/english/image/controller.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

10
src/nxemu/user_interface/settings/input_config.cpp
View File

@ -13,14 +13,10 @@ InputConfig::~InputConfig()
void InputConfig::Display(void * parentWindow)
{
enum
{
WINDOW_HEIGHT = 300,
WINDOW_WIDTH = 300,
};
if (!m_sciterUI.WindowCreate(parentWindow, "input_config.html", 0, 0, WINDOW_WIDTH, WINDOW_HEIGHT, SUIW_CHILD, m_window))
if (!m_sciterUI.WindowCreate(parentWindow, "input_config.html", 0, 0, 300, 300, SUIW_CHILD, m_window))
{
return;
}
m_window->FixMinSize();
m_window->CenterWindow();
}