mirror of
https://github.com/overte-org/overte.git
synced 2025-08-04 01:43:27 +02:00
113 lines
No EOL
14 KiB
HTML
113 lines
No EOL
14 KiB
HTML
<!--Note: change the parent postmessage second parameter due to possible security issues-->
|
|
<style>
|
|
.brushButton {
|
|
max-width: 220px,
|
|
padding: 10px,
|
|
background-color: #666666
|
|
}
|
|
.BrushIcon {
|
|
padding: 10px,
|
|
width: 130px,
|
|
}
|
|
#dynamicBrush {
|
|
margin: 20px 0;
|
|
}
|
|
.selectedBrush {
|
|
background-color: #f4e842
|
|
}
|
|
</style>
|
|
<!--<input onchange="setDynamicBrush(this)" type="checkbox" id="dynamicBrush"> Use Dynamic brush </input>-->
|
|
<div id="brushesCointainer">
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/basic.png" onclick="changePaintBrush(0)"><img width="130px" src="../content/brushes/256x256/basic.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/basic.png" onclick="changePaintBrush(1)"><img width="130px" src="../content/brushes/256x256/basic.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/bristle.png" onclick="changePaintBrush(2)"><img width="130px" src="../content/brushes/256x256/bristle.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/bristle.png" onclick="changePaintBrush(3)"><img width="130px" src="../content/brushes/256x256/bristle.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/dupuiz.png" onclick="changePaintBrush(4)"><img width="130px" src="../content/brushes/256x256/dupuiz.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/dupuiz.png" onclick="changePaintBrush(5)"><img width="130px" src="../content/brushes/256x256/dupuiz.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/gouache.png" onclick="changePaintBrush(6)"><img width="130px" src="../content/brushes/256x256/gouache.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/gouache.png" onclick="changePaintBrush(7)"><img width="130px" src="../content/brushes/256x256/gouache.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/graphite.png" onclick="changePaintBrush(8)"><img width="130px" src="../content/brushes/256x256/graphite.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/graphite.png" onclick="changePaintBrush(9)"><img width="130px" src="../content/brushes/256x256/graphite.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/hair.png" onclick="changePaintBrush(10)"><img width="130px" src="../content/brushes/256x256/hair.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/hair.png" onclick="changePaintBrush(11)"><img width="130px" src="../content/brushes/256x256/hair.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/spat-fine.png" onclick="changePaintBrush(12)"><img width="130px" src="../content/brushes/256x256/spat-fine.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/spat-fine.png" onclick="changePaintBrush(13)"><img width="130px" src="../content/brushes/256x256/spat-fine.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/spat-medium.png" onclick="changePaintBrush(14)"><img width="130px" src="../content/brushes/256x256/spat-medium.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/spat-medium.png" onclick="changePaintBrush(15)"><img width="130px" src="../content/brushes/256x256/spat-medium.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/sponge.png" onclick="changePaintBrush(16)"><img width="130px" src="../content/brushes/256x256/sponge.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/sponge.png" onclick="changePaintBrush(17)"><img width="130px" src="../content/brushes/256x256/sponge.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/basic.png" onclick="changePaintBrush(18)"><img width="130px" src="../content/brushes/256x256stretched/basic.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/basic.png" onclick="changePaintBrush(19)"><img width="130px" src="../content/brushes/256x256stretched/basic.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/bristle.png" onclick="changePaintBrush(20)"><img width="130px" src="../content/brushes/256x256stretched/bristle.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/bristle.png" onclick="changePaintBrush(21)"><img width="130px" src="../content/brushes/256x256stretched/bristle.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/gouache.png" onclick="changePaintBrush(22)"><img width="130px" src="../content/brushes/256x256stretched/gouache.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/gouache.png" onclick="changePaintBrush(23)"><img width="130px" src="../content/brushes/256x256stretched/gouache.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/sponge.png" onclick="changePaintBrush(24)"><img width="130px" src="../content/brushes/256x256stretched/sponge.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/sponge.png" onclick="changePaintBrush(25)"><img width="130px" src="../content/brushes/256x256stretched/sponge.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/basic.png" onclick="changePaintBrush(26)"><img width="130px" src="../content/brushes/basic.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/basic.png" onclick="changePaintBrush(27)"><img width="130px" src="../content/brushes/basic.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/bristle.png" onclick="changePaintBrush(28)"><img width="130px" src="../content/brushes/bristle.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/bristle.png" onclick="changePaintBrush(29)"><img width="130px" src="../content/brushes/bristle.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/gouache.png" onclick="changePaintBrush(30)"><img width="130px" src="../content/brushes/gouache.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/gouache.png" onclick="changePaintBrush(31)"><img width="130px" src="../content/brushes/gouache.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/gradient.png" onclick="changePaintBrush(32)"><img width="130px" src="../content/brushes/gradient.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/gradient.png" onclick="changePaintBrush(33)"><img width="130px" src="../content/brushes/gradient.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/gradient2.png" onclick="changePaintBrush(34)"><img width="130px" src="../content/brushes/gradient2.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/gradient2.png" onclick="changePaintBrush(35)"><img width="130px" src="../content/brushes/gradient2.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/gradient3.png" onclick="changePaintBrush(36)"><img width="130px" src="../content/brushes/gradient3.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/gradient3.png" onclick="changePaintBrush(37)"><img width="130px" src="../content/brushes/gradient3.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/koons.png" onclick="changePaintBrush(38)"><img width="130px" src="../content/brushes/koons.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/koons.png" onclick="changePaintBrush(39)"><img width="130px" src="../content/brushes/koons.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/oil.png" onclick="changePaintBrush(40)"><img width="130px" src="../content/brushes/oil.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/oil.png" onclick="changePaintBrush(41)"><img width="130px" src="../content/brushes/oil.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush1.png" onclick="changePaintBrush(42)"><img width="130px" src="../content/brushes/paintbrush1.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush1.png" onclick="changePaintBrush(43)"><img width="130px" src="../content/brushes/paintbrush1.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush2.png" onclick="changePaintBrush(44)"><img width="130px" src="../content/brushes/paintbrush2.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush2.png" onclick="changePaintBrush(45)"><img width="130px" src="../content/brushes/paintbrush2.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush3.png" onclick="changePaintBrush(46)"><img width="130px" src="../content/brushes/paintbrush3.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush3.png" onclick="changePaintBrush(47)"><img width="130px" src="../content/brushes/paintbrush3.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush4.png" onclick="changePaintBrush(48)"><img width="130px" src="../content/brushes/paintbrush4.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush4.png" onclick="changePaintBrush(49)"><img width="130px" src="../content/brushes/paintbrush4.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush5.png" onclick="changePaintBrush(50)"><img width="130px" src="../content/brushes/paintbrush5.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush5.png" onclick="changePaintBrush(51)"><img width="130px" src="../content/brushes/paintbrush5.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush6.png" onclick="changePaintBrush(52)"><img width="130px" src="../content/brushes/paintbrush6.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush6.png" onclick="changePaintBrush(53)"><img width="130px" src="../content/brushes/paintbrush6.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/pastel.png" onclick="changePaintBrush(54)"><img width="130px" src="../content/brushes/pastel.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/pastel.png" onclick="changePaintBrush(55)"><img width="130px" src="../content/brushes/pastel.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/soft.png" onclick="changePaintBrush(56)"><img width="130px" src="../content/brushes/soft.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/soft.png" onclick="changePaintBrush(57)"><img width="130px" src="../content/brushes/soft.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/sponge.png" onclick="changePaintBrush(58)"><img width="130px" src="../content/brushes/sponge.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/sponge.png" onclick="changePaintBrush(59)"><img width="130px" src="../content/brushes/sponge.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/square.png" onclick="changePaintBrush(60)"><img width="130px" src="../content/brushes/square.png" class="BrushIcon" ></button>
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/square.png" onclick="changePaintBrush(61)"><img width="130px" src="../content/brushes/square.png" class="BrushIcon" ></button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
var currentBrush = 5;
|
|
function changePaintBrush(brushIndex) {
|
|
var bruhes = document.getElementById("brushesCointainer").children;
|
|
bruhes[currentBrush].classList.remove("selectedBrush");
|
|
currentBrush = brushIndex;
|
|
bruhes[currentBrush].classList.add("selectedBrush");
|
|
debugger;
|
|
var changedBrushEvent = {
|
|
"type" : "changeBrush",
|
|
"brushName": bruhes[currentBrush].id,
|
|
"brushType": bruhes[currentBrush].getAttribute("brushType")
|
|
};
|
|
parent.postMessage(JSON.stringify(changedBrushEvent), "*");
|
|
}
|
|
|
|
/*function setDynamicBrush(checkbox) {
|
|
var switchBrushEvent = {
|
|
"type" : "switchDynamicBrush",
|
|
"isDynamicBrushEnabled": checkbox.checked
|
|
};
|
|
parent.postMessage(JSON.stringify(switchBrushEvent), "*");
|
|
}*/
|
|
</script> |