Is there a small example script howto create a button on the screen?

#1

I looked into editvoxel.js but thats hugh to understand everything.
Is there a small example script howto create a button on the screen ?

#2

I used this methodology for the animation controller. The following script puts a clickable image right in the middle of your screen:

var backgroundX = Window.innerWidth/2 -14;
var backgroundY = Window.innerHeight/2 - 14;
var overlayImage = Overlays.addOverlay(ā€œimageā€, {
bounds: { x: backgroundX, y: backgroundY, width: 29, height: 28},
imageURL: ā€œhttp://highfidelity-public.s3-us-west-1.amazonaws.com/images/reset.pngā€,
color: { red: 255, green: 255, blue: 255},
alpha: 1
});
function mousePressEvent(event) {
var clickedOverlay = Overlays.getOverlayAtPoint({x: event.x, y: event.y});
if(clickedOverlay===overlayImage) print(ā€˜mousePressEvent on overlay image detected - time to hide the original overlay and show a button depressed overlay insteadā€¦ā€™);
}
function mouseReleaseEvent(event) {
var clickedOverlay = Overlays.getOverlayAtPoint({x: event.x, y: event.y});
if(clickedOverlay===overlayImage) print(ā€˜mouseReleaseEvent on overlay image detected - the button has been pressed - put the original overlay back now.ā€™);
}
// Script ending
Script.scriptEnding.connect(function() {
// clean up our mess
Overlays.deleteOverlay(overlayImage);
});
Controller.mousePressEvent.connect(mousePressEvent);
Controller.mouseReleaseEvent.connect(mouseReleaseEvent);

Basically, create an overlay, then detect when itā€™s been clicked in a mouse event hander and display a button pressed image instead. Donā€™t forget to delete your overlays at the end!

For the animation controller, I created images for every button state, then displayed them at appropriate times.

Oh, how I wish we could use HTML5 / CSS3 / jQuery for this stuff!

  • davedub
#3

Thanks @davedubā€¦
ow i need to figure out how the did made buttons without images. like the voxel color select. Good example.

question, i dont see where it start to draw the image. Only the declaration.
and clickedOverlay===overlayImage this one is new for me in programming 3x = ?
oh i need to relearn much.

#4

I think the voxel select colour image youā€™re talking about is an overlay image like the one I used in the example above - is this one no?

http://highfidelity-public.s3-us-west-1.amazonaws.com/images/swatches.svg

The position is set using the backgroundImageX and backgroundImageY variables. To get screen centre, we use: Window.innerWidth/2 and Window.innerHeight/2

Again, if only we could use HTML5 / CSS3 / jQuery for buttons would be so much prettier, quicker and less bandwidth intensiveā€¦

  • davedub
#5

Hey Dave, thats a usefull snip which I am gonna steal thx :smile:

Hi Rich, I dont know if this will work for what you are doing, but I use menus for buttons.

I have simplified the menu script down to 2 menus with 2 categories each, and you will appreciate that I included a remove menus function because they dont go away on their own, every time you start the script it gives you a new set of menus. So with the click of a button you can clean it all up.

// Function that adds two categories to the menu.
function setupMenus()
{
	//Add menu named Create
	Menu.addMenu("Create");	
	
	// Add menu item named Create Red Voxel.
	Menu.addMenuItem({
		menuName: "Create", // Put it in the Create Menu
		menuItemName: "Create Red Voxel",
		isCheckable: false
		});
	// Add another menu item named Create Green Voxel.			
	 Menu.addMenuItem({
		menuName: "Create",
		menuItemName: "Create Green Voxel",
		isCheckable: false
		});

	// Add another menu called Remove.
	Menu.addMenu("Remove");
	 
	// Add menu item named Remove Voxel.
	Menu.addMenuItem({
		menuName: "Remove", // Put it in the Remove Menu
		menuItemName: "Remove Voxel",
		isCheckable: false
		});
	Menu.addMenuItem({
		menuName: "Remove",
		menuItemName: "Remove Menu",
		isCheckable: false
		});	
	}
	 
	// Function that defines the menu items.
	function menuItemEvent(menuItem)
	{
		if (menuItem == "Create Red Voxel"){
		// Call placeRedVoxel function.
		placeRedVoxel();
		}
		if (menuItem == "Create Green Voxel"){
		placeGreenVoxel();
		}	

		if (menuItem == "Remove Voxel"){
		// Call removeVoxel function.
		removeVoxel();
		}
		if (menuItem == "Remove Menu"){
		// Call removeMenu function.
		removeMenu();
		}	
	}
	 
	// Call setupMenus function.
	setupMenus();
	 
	// Connect menuItemEvent.
	Menu.menuItemEvent.connect(menuItemEvent);
	 
	// Create variable buildingRoot and initialize values.
	var buildingRoot = {x:0, y:0, z:0};
	 
	// Function that parses the values of the current avatar position and assigns them to the absolute values of the buildingRoot variable.
	function startBuilding(){
		buildingRoot.x = Math.round(MyAvatar.position.x);
		buildingRoot.y = Math.round(MyAvatar.position.y);
		buildingRoot.z = Math.round(MyAvatar.position.z);
	}
 
	// Function that defines the creation of a relative voxel placement based on the buildingRoot.
	function placeVoxel(x, y, z, s, r, g, b){
		Voxels.setVoxel(buildingRoot.x + x - 1, buildingRoot.y + y - 1, buildingRoot.z + z - 1, s, r, g, b);
	}
	 
	// Function that defines the removal of a relative voxel placement based on the buildingRoot.
	function eraseVoxel(x, y, z, s){
		Voxels.eraseVoxel(buildingRoot.x + x - 1, buildingRoot.y + y - 1, buildingRoot.z + z - 1, s);
	}

	 function placeRedVoxel(){
		// get building root position
		startBuilding(); 
		// Call placeVoxel() function with size and color data
		placeVoxel(0, 0, 0, 1, 255, 1, 1);
	}
 
	 function placeGreenVoxel(){
		startBuilding();
		placeVoxel(0, 0, 0, 1, 1, 245, 1);
	}
					
	 //removal
	function removeVoxel(){
		startBuilding();
		eraseVoxel(0, 0, 0, 1);
	}

	//remove menu
	function removeMenu(){
		Menu.removeMenu("Create");
		Menu.removeMenu("Remove"); 
		Script.stop();		
	}
#6

The voxel color select does use images, look at editVoxels.js to see how they did it, you can also look at overlaysExample.js too.

#7

Whats the best way to change the color of button at runtime ? tried to look in editvoxels.js but it gives me the feeling its not something simple like say change for that button the color without loading every time the image ?

Im correct or is there a more easy way ?

#8

if you look at the buttons used in the interface, youā€™ll see both ā€œonā€ and ā€œoffā€ configurations stored in the graphic, and a ā€œsub imageā€ is defined when the overlay is created, so when a button is pressed, you can edit the overlay and tell it to display the other image. Again, study overaysExample.js to see how itā€™s done.