Nifty gui border

Development
1

Hi,



i have another problem with nifty.



The border of a component is not displayed correctly and i don't have any idea how to solve it.

<screen id="startUp" controller="model.scene.ui.hud.controller.LoginController">
      <layer id="login" childLayout="center">
         <panel childLayout="vertical" align="center" valign="center"
            width="300px" style="nifty-panel">
            <label id="labelName" text="Name:" width="100px" align="center"
               textVAlign="center" textHAlign="center" />
            <panel id="namePanel" childLayout="horizontal" align="center">
               <control id="name" name="textfield" text="" />
               <panel id="nameSeparator" width="10px" height="0px"></panel>
               <control id="nameCheck" name="checkbox" checked="false" />
            </panel>
            <panel childLayout="horizontal" height="10px" />
            <label id="labelName" text="Password:" width="100px" align="center"
               textVAlign="center" textHAlign="center" />
            <panel id="passwordPanel" childLayout="horizontal" align="center">
               <control id="password" name="textfield" />
               <panel id="passwordSeparator" width="10px" height="0px"></panel>
               <control id="passwordCheck" name="checkbox" checked="false" />
            </panel>
            <panel childLayout="horizontal" height="20px" />
            <control id="loginButton" name="button" align="center"
               label="Login"></control>
         </panel>
      </layer>

      <layer id="option" childLayout="center" align="right" valign="bottom" childClip="true">
         <panel id="optionPanel" width="160px" height="60px" childLayout="center" align="right" valign="bottom"
            style="nifty-panel">
            <control id="loginButton" name="button" align="center" valign="center"
               label="Options"></control>
         </panel>
      </layer>
      
      <layer id="createAccount" childLayout="center">
         <panel id="createAccountPanel" width="160px" height="60px" childLayout="center" align="left" valign="bottom"
            style="nifty-panel">
            <control id="createAccountButton" name="button" align="center" valign="center"
               label="Create Account"></control>
         </panel>
      </layer>
   </screen>



Does anyone( void :) ) has any hints, what i'm doing wrong?
2

yep, the style requires a minimum size of 256px x 256px for a panel. lower sizes will currently f*ck up.



this is just an annoyance of the nifty-panel.xml style and the image used:


<attributes backgroundImage="grey-style/panel/grey-panel.png" imageMode="resize:125,6,125,125,125,6,125,6,125,6,125,125" padding="23px"/>



The funny numbers are explained in an old blog post http://nifty-gui.lessvoid.com/archives/25#more-25 and altough it is missing some of the xml the funny numbers are explained there.

why is this restriction? it's probably because of resizing stuff with keeping rounded edges and I couldn't decide on the roundness. if you would have a 100px round panel corner you'll need to restrict the window to 200 px minimum size to have a 100px left and 100px right rounded corner. the current style doesn't use such extreme corners and therefore shouldn't really restrict this big size but that's the way things currently are.

you should create your own image and/or style tho :P
3

Hmmm, damn  :|, ok thx for the answer, i'll look how to make it.



Do you have a short abstract description what do i have to do? (e.g. look at this and do this)

4

sure. look at the file: nifty-panel.xml in the nifty-grey-style project.



you'll find this there:


<?xml version="1.0" encoding="UTF-8"?>
<nifty-styles>
  <!-- style for a nifty panel -->
  <style id="nifty-panel">
    <attributes backgroundImage="grey-style/panel/grey-panel.png" imageMode="resize:125,6,125,125,125,6,125,6,125,6,125,125" padding="23px"/>
    <effect>
      <onActive name="imageOverlay" post="false" filename="grey-style/panel/grey-panel-background.png" inset="11px" imageMode="repeat:0,0,100,100" />
    </effect>
  </style>
</nifty-styles>



And that's all of the style code there is! You could try to use a different background image or you could even simply use a plain color. Or you could learn how the funny numbers work and fix the image. I mean make the image smaller but keep the round edges. I think you can get probably down to 50 x 50px.

And creating your own style is easy too. just add a:

<style id="my-panel-style">...


and use it instead of nifty-panel everywhere you'll need it.
5

Thx, i'll try it tomorrow. It's 4 am now in germ.

6

Ich wusste das es um 4 ist als ich den Text geschrieben habe :wink:

1 Like