CODEWITHSUNDEEP
three.jsdat.gui
Avner Moshkovitz
Avner Moshkovitz

Reputation: 1374

Represent a three.js GUI button with an icon

I want to communicate a "Go Left" button, in a three.js application, by using a left-arrow icon (instead of just labelling it "left") Many of the three.js examples use dat.GUI to set up GUI control (e.g. button, slider). In all these examples the buttons show up as rectangular boxes

Is it possible to represent a dat.GUI button with an icon? (or at least place a background image behind the button?) Otherwise, are there other GUI alternatives that are easy to use with three.js?

EDIT:

I'm having trouble to embed the css code inside javascript. I added the code below and when I click on the button it displays in the console "BEG setStyle", i.e. the function setStyle() is executed. But I don't see a change in the color or the background image of the "Nukeem all!" button.

@prisoner849 Can you help me with this?

Thanks

var gui = new dat.GUI(),

var obj = {
    add:function()
    {
        console.log("clicked")
        updateTheta();
        this.setStyle();
    },
    setStyle:function()
    {
        console.log("BEG setStyle")
        this.color = "#00ff00";
        this.backgroundImage = "url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Radiation.png')";
    }
};

gui.add(obj, 'add').name('Nukeem all!');

Thanks.

Upvotes: 2

Views: 3908

Answers (1)

prisoner849
prisoner849

Reputation: 17596

TheJim01 is right. You can do the trick with CSS.

Here is just a rough concept:

var gui = new dat.GUI();
var obj = {
  add: function() {
    alert("clicked!")
  }
};
gui.add(obj, "add").name("Nuke'em all!");
gui.add(obj, "add").name("I'm Fine!");
gui.add(obj, "add").name("Harmony");

var fourth = gui.add(obj, "add").name("CSS is awesome!");
var fourthStyle = fourth.domElement.previousSibling.style;

fourthStyle.backgroundImage = 'url(https://cdn1.iconfinder.com/data/icons/hawcons/32/700035-icon-77-document-file-css-16.png)';
fourthStyle.backgroundRepeat = 'no-repeat';
fourthStyle.backgroundPosition = 'left';
fourthStyle.backgroundColor = 'white';
fourthStyle.color = 'black';

console.log(fourthStyle);
.function:nth-child(1) .property-name {
  background-image: url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Radiation.png');
  background-repeat: no-repeat;
  background-position: right;
  background-color: gray;
  color: yellow;
}

.function:nth-child(2) .property-name {
  background-image: url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/OK.png');
  background-repeat: no-repeat;
  background-position: center;
  background-color: teal;
  color: aqua;
}

.function:nth-child(3) .property-name {
  background-image: url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/In-yang.png');
  background-repeat: no-repeat;
  background-position: left;
  background-color: pink;
  color: red;
  text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.min.js"></script>

Upvotes: 2

Related Questions