Skip to content

Commit

Permalink
GuiScrollBar implementation
Browse files Browse the repository at this point in the history 
IMGUI theme improvements.
  • Loading branch information
@davidbuzatto
davidbuzatto committed Feb 2, 2025
1 parent 7f1ac91 commit 9254332
Show file tree
Hide file tree
Showing 10 changed files with 640 additions and 126 deletions.
2 changes: 0 additions & 2 deletions TODO.txt
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
Desenvolver componentes:
Barra de rolagem;
Painel de rolagem?
Área de texto.

Separar o exemplos futuramente.
2 changes: 1 addition & 1 deletion nbproject/project.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ jnlp.signed=false
jnlp.signing=
jnlp.signing.alias=
jnlp.signing.keystore=
main.class=br.com.davidbuzatto.jsge.examples.JSGEShowcaseWindow
main.class=br.com.davidbuzatto.jsge.examples.basic.IMGUIExample
# Optional override of default Application-Library-Allowable-Codebase attribute identifying the locations where your signed RIA is expected to be found.
manifest.custom.application.library.allowable.codebase=
# Optional override of default Caller-Allowable-Codebase attribute identifying the domains from which JavaScript code can make calls to your RIA without security prompts.
Expand Down
2 changes: 1 addition & 1 deletion src/br/com/davidbuzatto/jsge/Bundle.properties
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
JSGE.version=v1.5.1
JSGE.version=v1.5.2
84 changes: 54 additions & 30 deletions src/br/com/davidbuzatto/jsge/examples/basic/IMGUIExample.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,11 +102,9 @@ public class IMGUIExample extends EngineFrame {
private GuiInputDialog inputDialog;
private GuiConfirmDialog confirmDialog;

private GuiWindow glueWindow;
private GuiLabel glueLabel;
private GuiButton glueButton;
private GuiDropdownList glueDropdownList;
private GuiColorPicker glueColorPicker;
private GuiWindow themeWindow;
private GuiButton themeButton;
private GuiColorPicker themeColorPicker;
private GuiGlue glue;

private GuiToolTip toolTipLabel1;
Expand All @@ -133,6 +131,7 @@ public class IMGUIExample extends EngineFrame {
private GuiTheme lightTheme;
private GuiTheme darkTheme;
private GuiTheme currentTheme;
private GuiTheme coloredTheme;
private ChangeThemeButton changeThemeButton;

private Image sunIcon;
Expand All @@ -154,6 +153,7 @@ public void create() {

lightTheme = GuiTheme.buildLightTheme();
darkTheme = GuiTheme.buildDarkTheme();
coloredTheme = GuiTheme.buildColoredTheme( EngineFrame.BLUE );
currentTheme = lightTheme;

int x = 20;
Expand Down Expand Up @@ -280,21 +280,17 @@ public void create() {

x = 820;
y = 30;
glueWindow = new GuiWindow( x, y, 240, 160, "Glue Example (drag me!)" );
glueLabel = new GuiLabel( 0, 0, 100, 30, "Glued Label" );
glueButton = new GuiButton( 0, 0, 100, 30, "Glued Button" );
glueDropdownList = new GuiDropdownList( 0, 0, 100, 30, List.<String>of( "1", "2", "3", "4", "5", "6" ) );
glueColorPicker = new GuiColorPicker( 0, 0, 85, 85, Color.RED );

glue = new GuiGlue( glueWindow );
glue.addChild( glueLabel, 10, 40 );
glue.addChild( glueButton, 10, 80 );
glue.addChild( glueDropdownList, 10, 120 );
glue.addChild( glueColorPicker, glueDropdownList.getX() - glueWindow.getX() + glueDropdownList.getWidth() + 10, 40 );
themeWindow = new GuiWindow( x, y, 240, 160, "Theme Color (drag me!)" );
themeButton = new GuiButton( 0, 0, 100, 85, "Apply Color" );
themeColorPicker = new GuiColorPicker( 0, 0, 85, 85, EngineFrame.BLUE );

glue = new GuiGlue( themeWindow );
glue.addChild( themeColorPicker, 10, 40 );
glue.addChild( themeButton, 130, 40 );
components.add( glue );

vSpacing = 30;
y += glueWindow.getHeight() + 10;
y += themeWindow.getHeight() + 10;
checkEnabled = new GuiCheckBox( x, y, 100, 20, "Enabled" );
checkEnabled.setSelected( true );
checkVisible = new GuiCheckBox( x, y += vSpacing, 100, 20, "Visible" );
Expand Down Expand Up @@ -382,11 +378,11 @@ public void update( double delta ) {
draggedComponent = windowUntitled;
}

if ( glueWindow.isCloseButtonPressed() ) {
if ( themeWindow.isCloseButtonPressed() ) {
glue.setVisible( false );
}

if ( glueWindow.isTitleBarPressed() ) {
if ( themeWindow.isTitleBarPressed() ) {
draggedComponent = glue;
}

Expand Down Expand Up @@ -470,6 +466,15 @@ public void update( double delta ) {
draggedComponent = confirmDialog;
}

if ( themeButton.isMousePressed() ) {
coloredTheme = GuiTheme.buildColoredTheme( themeColorPicker.getColor() );
currentTheme = coloredTheme;
currentTheme.apply( components );
currentTheme.apply( interactionComponents );
currentTheme.install();
changeThemeButton.activeTheme = ChangeThemeButton.COLORED_THEME;
}

checkEnabled.update( delta );
checkVisible.update( delta );
checkDrawBounds.update( delta );
Expand Down Expand Up @@ -501,11 +506,18 @@ public void update( double delta ) {
}

if ( changeThemeButton.isMousePressed() ) {
changeThemeButton.darkThemeActive = !changeThemeButton.darkThemeActive;
if ( changeThemeButton.darkThemeActive ) {
currentTheme = darkTheme;
} else {
currentTheme = lightTheme;
changeThemeButton.activeTheme = (changeThemeButton.activeTheme++) % 3 + 1;
switch ( changeThemeButton.activeTheme ) {
case ChangeThemeButton.LIGHT_THEME:
currentTheme = lightTheme;
break;
case ChangeThemeButton.DARK_THEME:
currentTheme = darkTheme;
break;
case ChangeThemeButton.COLORED_THEME:
currentTheme = coloredTheme;
break;

}
currentTheme.apply( components );
currentTheme.apply( interactionComponents );
Expand Down Expand Up @@ -603,7 +615,7 @@ public void draw() {

drawText( messageDialogStatus, 650, buttonShowMessageDialog.getBounds().y + buttonShowMessageDialog.getBounds().height / 2 - 3, 12, currentTheme.borderColor );
drawText( inputDialogStatus, 650, buttonShowInputDialog.getBounds().y + buttonShowInputDialog.getBounds().height / 2 - 3, 12, currentTheme.borderColor );
drawText( confirmDialogStatus, 650, buttonShowConfirmDialog.getBounds().y + buttonShowConfirmDialog.getBounds().height / 2 - 3, 12, GRAY );
drawText( confirmDialogStatus, 650, buttonShowConfirmDialog.getBounds().y + buttonShowConfirmDialog.getBounds().height / 2 - 3, 12, currentTheme.borderColor );

drawColoredRectangle( 675, colorPicker.getBounds().y + colorPicker.getBounds().height / 2 - 40, colorPicker.getColor() );

Expand Down Expand Up @@ -663,29 +675,41 @@ private void drawColoredRectangle( double x, double y, Color color ) {

private class ChangeThemeButton extends GuiComponent {

private boolean darkThemeActive;
private static final int LIGHT_THEME = 1;
private static final int DARK_THEME = 2;
private static final int COLORED_THEME = 3;

private int activeTheme;
private Image sunIcon;
private Image moonIcon;

public ChangeThemeButton( double x, double y, double width, double height, Image sunIcon, Image moonIcon ) {
super( x, y, width, height );
this.sunIcon = sunIcon;
this.moonIcon = moonIcon;
this.activeTheme = LIGHT_THEME;
}

public ChangeThemeButton( double x, double y, double width, double height, Image sunIcon, Image moonIcon, EngineFrame engine ) {
super( x, y, width, height, engine );
this.sunIcon = sunIcon;
this.moonIcon = moonIcon;
this.activeTheme = LIGHT_THEME;
}

@Override
public void draw() {
fillRectangle( bounds, backgroundColor );
if ( darkThemeActive ) {
drawImage( moonIcon, bounds.x, bounds.y );
} else {
drawImage( sunIcon, bounds.x, bounds.y );
switch ( activeTheme ) {
case LIGHT_THEME:
drawImage( sunIcon, bounds.x, bounds.y );
break;
case DARK_THEME:
drawImage( moonIcon, bounds.x, bounds.y );
break;
case COLORED_THEME:
drawText( "C", bounds.x + 10, bounds.y + 7, 50, textColor );
break;
}
drawRectangle( bounds, borderColor );
}
Expand Down
7 changes: 5 additions & 2 deletions src/br/com/davidbuzatto/jsge/imgui/GuiComponent.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,9 @@ public abstract class GuiComponent {
/** Raio do componente deslizante. */
public static final double SLIDER_RADIUS = 10;

/** Tamanho do botão da barra de rolagem. */
public static final double SCROLL_BAR_BUTTON_SIZE = 20;

//**************************************************************************
// Cores.
// Os nomes são mantidos em maiúsculas para não misturar com os atributos.
Expand Down Expand Up @@ -128,9 +131,9 @@ public abstract class GuiComponent {
/** Cor de fundo para os contâineres de itens dos componentes de lista desabilitados. */
public static Color DISABLED_LIST_CONTAINER_BACKGROUND_COLOR;

/** Cor de fundo para a trila dos sliders usados como barras de rolagem. */
/** Cor de fundo para a trila das barras de rolagem. */
public static Color SCROLL_BAR_TRACK_COLOR;
/** Cor de fundo para a trila dos sliders desabiltiados usados como barras de rolagem. */
/** Cor de fundo para a trila das barras de rolagem desabiltiadas. */
public static Color DISABLED_SCROLL_BAR_TRACK_COLOR;

/** Cor da sobreposição do seletor de cor quando está desabilitado. */
Expand Down
36 changes: 0 additions & 36 deletions src/br/com/davidbuzatto/jsge/imgui/GuiDropdownList.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,24 +236,6 @@ public boolean isDropdownListVisible() {
return itemsList.isVisible();
}

/**
* Obtém a cor do caminho da barra de rolagem.
*
* @return A cor do caminho da barra de rolagem.
*/
public Color getScrollBarTrackColor() {
return itemsList.scrollBarTrackColor;
}

/**
* Configura a cor do caminho da barra de rolagem.
*
* @param scrollBarTrackColor A cor do caminho da barra de rolagem.
*/
public void setScrollBarTrackColor( Color scrollBarTrackColor ) {
this.itemsList.scrollBarTrackColor = scrollBarTrackColor;
}

/**
* Obtém a cor do fundo da barra de rolagem.
*
Expand Down Expand Up @@ -307,24 +289,6 @@ public Color getScrollBarTextColor() {
public void setScrollBarTextColor( Color textColor ) {
itemsList.scrollBar.setTextColor( textColor );
}

/**
* Obtém a cor do preenchimento da barra de rolagem.
*
* @return A cor do preenchimento.
*/
public Color getScrollBarTrackFillColor() {
return itemsList.scrollBar.getTrackFillColor();
}

/**
* Confira a cor do preenchimento da barra de rolagem.
*
* @param trackFillColor A cor do preenchimento.
*/
public void setScrollBarTrackFillColor( Color trackFillColor ) {
itemsList.scrollBar.setTrackFillColor( trackFillColor );
}

@Override
public void setBackgroundColor( Color backgroundColor ) {
Expand Down
57 changes: 9 additions & 48 deletions src/br/com/davidbuzatto/jsge/imgui/GuiList.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,14 @@ public class GuiList extends GuiComponent {
private List<ListItem> items;
private double itemTextHeight;

protected GuiSlider scrollBar;
protected GuiScrollBar scrollBar;
private boolean useScrollBar;
private double itemsHeight;
private double heightDiff;

private double scrollOffset;
private double prevScrollOffset;

protected Color scrollBarTrackColor;

/**
* Cria o componente.
*
Expand Down Expand Up @@ -117,16 +115,15 @@ public GuiList( Rectangle bounds, List<String> itemsText ) {
private void initComponents( EngineFrame engine, List<String> itemsText ) {

if ( engine == null ) {
scrollBar = new GuiSlider( bounds.x + bounds.width, bounds.y, SLIDER_RADIUS * 2, bounds.height, itemsText.size(), 0, itemsText.size(), GuiSlider.VERTICAL );
scrollBar = new GuiScrollBar( bounds.x + bounds.width, bounds.y, SLIDER_RADIUS * 2, bounds.height, itemsText.size(), 0, itemsText.size(), GuiSlider.VERTICAL );
} else {
scrollBar = new GuiSlider( bounds.x + bounds.width, bounds.y, SLIDER_RADIUS * 2, bounds.height, itemsText.size(), 0, itemsText.size(), GuiSlider.VERTICAL, engine );
scrollBar = new GuiScrollBar( bounds.x + bounds.width, bounds.y, SLIDER_RADIUS * 2, bounds.height, itemsText.size(), 0, itemsText.size(), GuiSlider.VERTICAL, engine );
}

this.itemsText = itemsText;
this.items = new ArrayList<>();
this.useScrollBar = true;
this.backgroundColor = LIST_CONTAINER_BACKGROUND_COLOR;
this.scrollBarTrackColor = SCROLL_BAR_TRACK_COLOR;

}

Expand Down Expand Up @@ -210,17 +207,17 @@ public void draw() {
if ( enabled ) {
switch ( mouseState ) {
case MOUSE_OVER:
drawList( MOUSE_OVER_BORDER_COLOR, backgroundColor, scrollBarTrackColor );
drawList( MOUSE_OVER_BORDER_COLOR, backgroundColor );
break;
case MOUSE_DOWN:
drawList( MOUSE_OVER_BORDER_COLOR, backgroundColor, scrollBarTrackColor );
drawList( MOUSE_OVER_BORDER_COLOR, backgroundColor );
break;
default:
drawList( borderColor, backgroundColor, scrollBarTrackColor );
drawList( borderColor, backgroundColor );
break;
}
} else {
drawList( DISABLED_BORDER_COLOR, DISABLED_LIST_CONTAINER_BACKGROUND_COLOR, DISABLED_SCROLL_BAR_TRACK_COLOR );
drawList( DISABLED_BORDER_COLOR, DISABLED_LIST_CONTAINER_BACKGROUND_COLOR );
}

drawBounds();
Expand All @@ -229,9 +226,9 @@ public void draw() {

}

private void drawList( Color borderColor, Color containerColor, Color scrollBarTrackColor ) {
private void drawList( Color borderColor, Color containerColor ) {

engine.fillRectangle( scrollBar.bounds, scrollBarTrackColor );
//engine.fillRectangle( scrollBar.bounds, scrollBarTrackColor );
engine.fillRectangle( bounds, containerColor );

engine.beginScissorMode( bounds );
Expand Down Expand Up @@ -351,24 +348,6 @@ protected double getItemTextHeight() {
public boolean isMouseOutEntirely() {
return mouseState == GuiComponentMouseState.MOUSE_OUT && scrollBar.mouseState == GuiComponentMouseState.MOUSE_OUT;
}

/**
* Obtém a cor do caminho da barra de rolagem.
*
* @return A cor do caminho da barra de rolagem.
*/
public Color getScrollBarTrackColor() {
return scrollBarTrackColor;
}

/**
* Configura a cor do caminho da barra de rolagem.
*
* @param scrollBarTrackColor A cor do caminho da barra de rolagem.
*/
public void setScrollBarTrackColor( Color scrollBarTrackColor ) {
this.scrollBarTrackColor = scrollBarTrackColor;
}

/**
* Obtém a cor do fundo da barra de rolagem.
Expand Down Expand Up @@ -424,24 +403,6 @@ public void setScrollBarTextColor( Color textColor ) {
scrollBar.setTextColor( textColor );
}

/**
* Obtém a cor do preenchimento da barra de rolagem.
*
* @return A cor do preenchimento.
*/
public Color getScrollBarTrackFillColor() {
return scrollBar.getTrackFillColor();
}

/**
* Confira a cor do preenchimento da barra de rolagem.
*
* @param trackFillColor A cor do preenchimento.
*/
public void setScrollBarTrackFillColor( Color trackFillColor ) {
scrollBar.setTrackFillColor( trackFillColor );
}

@Override
public void move( double xAmount, double yAmount ) {
bounds.x += xAmount;
Expand Down
Loading

0 comments on commit 9254332

Please sign in to comment.