Use icons in button-mode

[eugene.litvinov]

I use next ui-layout:

			<vbox width="220" height="44">
				<icon align="overlap,background" texture="source/textures/gui/quest_icons/beginning.png"/>
				<label align="center"> 
					<text rich="1"/>
				</label>
			</vbox>

Icon has 4 states, and it behaviors like button: mouse over/out/click... Than, I use next code:

		WidgetVBox item = new WidgetVBox(_gui);
		item.setWidth(228);
		item.setHeight(83);

		WidgetSprite icon = new WidgetSprite(_gui, "source/textures/gui/quest_icons/beginning.png");
		WidgetLabel caption = new WidgetLabel(_gui);
		caption.setFontRich(true);
		caption.setText("caption"));

		item.addChild(icon, GUI_ALIGN_OVERLAP | GUI_ALIGN_BACKGROUND);
		item.addChild(caption, GUI_ALIGN_LEFT);

		icon.arrange();
		caption.arrange();

		questList.addChild(item, GUI_ALIGN_LEFT);

		item.arrange();

But in this case icon is showed all states, like simple picture... why this behaviors is different from each other? What I missed? Thanks

[danni.coy]

I suspect GUI_ALIGN_BACKGROUND is the culprit.

I use vbox + icon + label a lot except that I place the label above or below the icon (not on top) and I haven't experienced this behaviour.

Try GUI_ALIGN_OVERLAP on the text item without using the GUI_ALIGN_BACKGROUND flag (assuming that you are trying to get the label on top of the icon.

[eugene.litvinov]

I try to use:

WidgetVBox item = new WidgetVBox(_gui);
		item.setWidth(228);
		item.setHeight(83);

		WidgetSprite icon = new WidgetSprite(_gui, "source/textures/gui/quest_icons/beginning.png");
		WidgetLabel caption = new WidgetLabel(_gui);
		caption.setFontRich(true);
		caption.setText("caption");

		item.addChild(icon, GUI_ALIGN_OVERLAP); // GUI_ALIGN_CENTER, GUI_ALIGN_LEFT
		item.addChild(caption, GUI_ALIGN_LEFT);

		icon.arrange();
		caption.arrange();

		questList.addChild(item, GUI_ALIGN_LEFT);

		item.arrange();

Result the same - image in vbox align right, but consists from all states.

[danni.coy]

Why is the overlap on the Icon and not on the label?

I am assuming you want the label on top of the icon.

Also try manually specifying Icons width and height as image.getWidth()/2,image.getHeight()/2.

[eugene.litvinov]

Why is the overlap on the Icon and not on the label?

I am assuming you want the label on top of the icon.

I need to create not a button with label, it is set of images with labels (descriptions) in bottom.

I need exactly this:

			<vbox width="220" height="44">
				<icon align="left" texture="source/textures/gui/quest_icons/beginning.png"/>
				<label align="left"> 
					<text rich="1">AAAAAAA</text>
				</label>
			</vbox>

But when I do the same via script, I have not the same result, maybe this is a bug? I tried set width/height of image - it is not help (

[danni.coy]

Icon class is WidgetIcon.

You are using WidgetSprite. Can't believe I didn't spot that before.

You can make it work with WidgetSprite (I needed widgets that could be controlled from both touchscreen and joystick).

Here is a class I made for it.

	class touchIcon  {
	enum {TICO_NONE=0,TICO_DOWN,TICO_OVER,TICO_CLICK,};
	WidgetSprite 	sprite;
	WidgetLabel		label;
	WidgetVBox	 	container;
	int state;
	int toggled = 0,toggleable = 1;
	string callback;
	string args[0];
	vec4 coords[0] = (
		vec4(0.0f,0.0f,0.5f,0.5f),
		vec4(0.0f,0.5f,0.5f,1.0f),
		vec4(0.5f,0.0f,1.0f,0.5f),
		vec4(0.5f,0.5f,1.0f,1.0f)
	);
	touchIcon(string texture, string caption, int caption_size=10, int caption_align = TOP) {
		Gui gui = engine.getGui();
		sprite  = new WidgetSprite(gui);
		Image img =  new Image(texture);
		sprite.setImage(img);
		sprite.setWidth(img.getWidth()/2);
		sprite.setHeight(img.getHeight()/2);
		sprite.setTexCoord(coords[TICO_NONE]);
		label = new WidgetLabel(gui,caption);
		label.setFontRich(true);
		label.setFontSize(caption_size);
		label.setFontColor(vec4(0.75,0.75,0.75,0.75));
		container = new WidgetVBox(gui);
		if (caption_align == TOP) {
			container.addChild(label,GUI_ALIGN_TOP);
			container.addChild(sprite,GUI_ALIGN_BOTTOM);
		} else {
			container.addChild(sprite,GUI_ALIGN_LEFT);
			container.addChild(label,GUI_ALIGN_BOTTOM);
		}
		container.setSpace(4,4);
		sprite.setCallback(GUI_ENTER,"Interface::touchIcon::onMouseOver",this);
		sprite.setCallback(GUI_LEAVE,"Interface::touchIcon::onMouseOut",this);
		sprite.setCallback(GUI_CLICKED,"Interface::touchIcon::onMouseClick",this);
		sprite.setCallback(GUI_PRESSED,"Interface::touchIcon::onMousePressed",this);
	}
	void setSize(int size) {
		int w = sprite.getWidth();
		int h = sprite.getHeight();
		float pw = float(size)/float(w);
		float ph = float(size)/float(h);
		coords.clear();
		coords = (
			vec4(0.0f,0.0f,0.5f*pw,0.5f*ph),
			vec4(0.0f,0.5f,0.5f*pw,0.5f+(0.5*ph)),
			vec4(0.5f,0.0f,0.5f+(0.5f*pw),0.5f*ph),
			vec4(0.5f,0.5f,0.5f+(0.5f*pw),0.5f+(0.5*ph))
		);
		sprite.setWidth(size);
		sprite.setHeight(size);
	}

	void setNormal() {sprite.setTexCoord(coords[TICO_NONE]);toggled=0;}
	void setOver() {sprite.setTexCoord(coords[TICO_OVER]);}
	void setDown() {sprite.setTexCoord(coords[TICO_DOWN]);toggled=1;}
	void setClicked() {sprite.setTexCoord(coords[TICO_CLICK]);}
	void setToggleable(int t) {
		toggleable = t;
	}
	void setToggled(int i, int safe = false) {
		toggled = i;
		if(toggled)setDown();
		else setNormal();
		if(callback == NULL || safe == true) return;
		switch (args.size()) {
			case 0: return call(callback);
			case 1: return call(callback,args[0]);
			case 2: return call(callback,args[0],args[1]);
		}
	}
	int isToggled() { return toggled;}
	void onMouseOver(touchIcon ico) {ico.setOver();}
	void mouseOut() {
		if(toggled)setDown();
		else setNormal();
	}
	void onMouseOut(touchIcon ico) {ico.mouseOut();}
	void mouseClick() {
		if(toggleable && !toggled)setDown();
		else setNormal();
		if(callback == NULL) return;
		switch(args.size()) {
			case 0: return call(callback);
			case 1: return call(callback,args[0]);
			case 2: return call(callback,args[0],args[1]);
		}
	}
	void onMouseClick(touchIcon ico) {
		ico.mouseClick();
	}
	void mousePressed() {
		setClicked();
	}
	void onMousePressed(touchIcon ico) {
		ico.mousePressed();
	}
	void setCallback(string fn,string arg1=NULL) {
		callback = fn;
		args.clear();
		args.append(arg1);
	}
	void setCallback(string fn, int arg1, int arg2) {
		callback = fn;
		args.clear();
		args.append(arg1);
		args.append(arg2);
	}
	void getWidget(){return container;}
	void getIcon(){return sprite;}
	void setHidden(int h) {container.setHidden(h);}
	int isHidden() {return container.isHidden();}
	void setFocus(){setOver();container.setFocus();}
	void removeFocus(){
		if(toggled) setDown();
		else setNormal();
		container.removeFocus();
	}
	void isFocused() {
		return container.isFocused();
	}
};

[eugene.litvinov]

Icon class is WidgetIcon.

You are using WidgetSprite. Can't believe I didn't spot that before.

 

Oh, yes! With WidgetIcon this work like I need. Thank for implementation with WidgetSprite - make a note of this :blink:

 

It always confuse me, why in .ui files uses different syntax... it's more convenient to write like:

		<WidgetVBox width="220" height="44">
			<WidgetIcon align="overlap,background" texture="source/textures/gui/button.png">
				<callback type="clicked">Source::MainMenu::eventNewGameButtonClick</callback>
			</WidgetIcon>
			<WidgetLabel name="Source::MainMenu::newGameLabel" export="1" align="center" pos_x="35" pos_y="10"> 
				<text rich="1"/>
			</WidgetLabel>
		</WidgetVBox>

maybe to more characters to write, but this is clear.

[danni.coy]

I don't mind the current system to go from Uniginescript to XML just drop the widget and convert from camelcase to lowercase.