I looked into editvoxel.js but thats hugh to understand everything.
Is there a small example script howto create a button on the screen ?
Is there a small example script howto create a button on the screen?
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
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.
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
Hey Dave, thats a usefull snip which I am gonna steal thx
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();
}
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.
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 ?
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.