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.