mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-04 22:45:17 +02:00
766 lines
No EOL
34 KiB
HTML
766 lines
No EOL
34 KiB
HTML
<!--Note: change the parent postmessage second parameter due to possible security issues-->
|
|
<link rel="stylesheet" type="text/css" href="../../html/css/edit-style.css">
|
|
<script type="text/javascript" src="../../html/js/keyboardControl.js"></script>
|
|
<script src="../../html/js/jquery-2.1.4.min.js"></script>
|
|
|
|
<style>
|
|
/*range style: http://danielstern.ca/range.css/#/*/
|
|
input[type=range] {
|
|
-webkit-appearance: none;
|
|
background: #2e2e2e;
|
|
height: 1.8rem;
|
|
border-radius: 1rem;
|
|
}
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance:none;
|
|
width: 0.6rem;
|
|
height: 1.8rem;
|
|
padding:0;
|
|
margin: 0;
|
|
background-color: #696969;
|
|
border-radius: 1rem;
|
|
}
|
|
input[type=range]::-webkit-slider-thumb:hover {
|
|
background-color: white;
|
|
}
|
|
input[type=range]:focus { /*#252525*/
|
|
outline: none;
|
|
}
|
|
.sliderWrapper {
|
|
display: table;
|
|
padding: 0.4rem 0;
|
|
}
|
|
.property.range input[type=number] {
|
|
margin-left: 0.8rem;
|
|
width: 5.4rem;
|
|
height: 1.8rem;
|
|
}
|
|
.brushButton {
|
|
width: 66px;
|
|
background-color: #2e2e2e;
|
|
border:none;
|
|
margin: 1px 0px;
|
|
}
|
|
.checkbox {
|
|
margin: 0px;
|
|
}
|
|
.BrushIcon {
|
|
width: 100%;
|
|
}
|
|
#dynamicBrush {
|
|
margin: 20px 0;
|
|
}
|
|
.selectedBrush {
|
|
position: relative;
|
|
}
|
|
#selectedOverlay {
|
|
background-color: rgba(16, 128, 184, 0.7);
|
|
top:0;
|
|
left:0;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 1;
|
|
background-image: url("../content/chosen.png");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
#brushesCointainer {
|
|
margin-bottom: 100px;
|
|
}
|
|
.imageContainer {
|
|
/*float: left;*/
|
|
display: block;
|
|
position: relative;
|
|
margin-bottom: 5px;
|
|
}
|
|
.brushLabel {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: white;
|
|
width: 100%;
|
|
z-index: 800;
|
|
word-wrap: break-word;
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
#strokeWidthWidget {
|
|
position: fixed;
|
|
background-color: #404040;
|
|
z-index: 1;
|
|
top: -1px;
|
|
margin: 0px;
|
|
padding: 15px 0px;
|
|
border: none;
|
|
}
|
|
</style>
|
|
|
|
<div id="strokeWidthWidget" class="property range">
|
|
<label style="display: block">Stroke Width</label>
|
|
<div class="sliderWrapper">
|
|
<input type="range" id="lineWidthRange" value=0.25 min=0 max=1 step=0.01 onchange="changeLineWidthRange(this)"/>
|
|
<input type="number" id="lineWidthText" value=0.25 min=0 max=1 step=0.01 onchange="changeLineWidthNumber(this)"/>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 75px">
|
|
<div class="behavior-group property checkbox">
|
|
<input onchange="setDynamicBrush(this)" animationType="DynamicHueBrush" type="checkbox" id="dynamicBrush"></input>
|
|
<label for="dynamicBrush">Use Dynamic Hue </label>
|
|
</div>
|
|
<!--<div>
|
|
<div style="float: left; margin-right: 20px">
|
|
<div class="behavior-group property checkbox">
|
|
<input onchange="setDynamicBrush(this)" animationType="DynamicRotationBrush" type="checkbox" id="yawRotationBrush"></input>
|
|
<label for="yawRotationBrush">Use Yaw Rotation</label>
|
|
</div>
|
|
<div class="behavior-group property checkbox">
|
|
<input onchange="setDynamicBrush(this)" animationType="DynamicRotationBrush" type="checkbox" id="pitchRotationBrush"></input>
|
|
<label for="pitchRotationBrush">Use Pitch Rotation</label>
|
|
</div>
|
|
<div class="behavior-group property checkbox">
|
|
<input onchange="setDynamicBrush(this)" animationType="DynamicRotationBrush" type="checkbox" id="rollRotationBrush"></input>
|
|
<label for="rollRotationBrush">Use Roll Rotation</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="behavior-group property checkbox">
|
|
<input onchange="setDynamicBrush(this)" animationType="DynamicTranslationBrush" type="checkbox" id="xTranslationBrush"></input>
|
|
<label for="xTranslationBrush">Use Translation x</label>
|
|
</div>
|
|
<div class="behavior-group property checkbox">
|
|
<input onchange="setDynamicBrush(this)" animationType="DynamicTranslationBrush" type="checkbox" id="yTranslationBrush"></input>
|
|
<label for="yTranslationBrush">Use Translation y</label>
|
|
</div>
|
|
<div class="behavior-group property checkbox">
|
|
<input onchange="setDynamicBrush(this)" animationType="DynamicTranslationBrush" type="checkbox" id="zTranslationBrush"></input>
|
|
<label for="zTranslationBrush">Use Translation z</label>
|
|
</div>
|
|
</div>
|
|
</div>-->
|
|
|
|
|
|
<div id="brushesCointainer">
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/basic.png" onclick="changePaintBrush(0)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/basic.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">basic A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/basic.png" onclick="changePaintBrush(1)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/basic.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">basic B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/bristle.png" onclick="changePaintBrush(2)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/bristle.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">bristle A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/bristle.png" onclick="changePaintBrush(3)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/bristle.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">bristle B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/dupuiz.png" onclick="changePaintBrush(4)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/dupuiz.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">dupuiz A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/dupuiz.png" onclick="changePaintBrush(5)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/dupuiz.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">dupuiz B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/gouache.png" onclick="changePaintBrush(6)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/gouache.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">gouache A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/gouache.png" onclick="changePaintBrush(7)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/gouache.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">gouache B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/graphite.png" onclick="changePaintBrush(8)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/graphite.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">graphite A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/graphite.png" onclick="changePaintBrush(9)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/graphite.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">graphite B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/spat-fine.png" onclick="changePaintBrush(10)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/spat-fine.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">spat-fine A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/spat-fine.png" onclick="changePaintBrush(11)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/spat-fine.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">spat-fine B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/spat-medium.png" onclick="changePaintBrush(12)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/spat-medium.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">spat-medium A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/spat-medium.png" onclick="changePaintBrush(13)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/spat-medium.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">spat-medium B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/sponge.png" onclick="changePaintBrush(14)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/sponge.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">sponge A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/sponge.png" onclick="changePaintBrush(15)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256/sponge.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">sponge B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/basic.png" onclick="changePaintBrush(16)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256stretched/basic.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">basic A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/basic.png" onclick="changePaintBrush(17)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256stretched/basic.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">basic B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/bristle.png" onclick="changePaintBrush(18)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256stretched/bristle.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">bristle A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/bristle.png" onclick="changePaintBrush(19)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256stretched/bristle.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">bristle B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/gouache.png" onclick="changePaintBrush(20)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256stretched/gouache.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">gouache A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/gouache.png" onclick="changePaintBrush(21)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256stretched/gouache.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">gouache B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/sponge.png" onclick="changePaintBrush(22)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256stretched/sponge.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">sponge A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/sponge.png" onclick="changePaintBrush(23)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/256x256stretched/sponge.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">sponge B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/basic.png" onclick="changePaintBrush(24)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/basic.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">basic A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/basic.png" onclick="changePaintBrush(25)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/basic.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">basic B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/bristle.png" onclick="changePaintBrush(26)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/bristle.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">bristle A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/bristle.png" onclick="changePaintBrush(27)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/bristle.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">bristle B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/gouache.png" onclick="changePaintBrush(28)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/gouache.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">gouache A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/gouache.png" onclick="changePaintBrush(29)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/gouache.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">gouache B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/gradient.png" onclick="changePaintBrush(30)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/gradient.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">gradient A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/gradient.png" onclick="changePaintBrush(31)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/gradient.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">gradient B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/gradient2.png" onclick="changePaintBrush(32)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/gradient2.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">gradient2 A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/gradient2.png" onclick="changePaintBrush(33)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/gradient2.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">gradient2 B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/gradient3.png" onclick="changePaintBrush(34)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/gradient3.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">gradient3 A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/gradient3.png" onclick="changePaintBrush(35)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/gradient3.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">gradient3 B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/koons.png" onclick="changePaintBrush(36)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/koons.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">koons A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/koons.png" onclick="changePaintBrush(37)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/koons.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">koons B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/oil.png" onclick="changePaintBrush(38)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/oil.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">oil A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/oil.png" onclick="changePaintBrush(39)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/oil.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">oil B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush1.png" onclick="changePaintBrush(40)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/paintbrush1.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">paintbrush1 A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush1.png" onclick="changePaintBrush(41)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/paintbrush1.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">paintbrush1 B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush2.png" onclick="changePaintBrush(42)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/paintbrush2.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">paintbrush2 A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush2.png" onclick="changePaintBrush(43)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/paintbrush2.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">paintbrush2 B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush3.png" onclick="changePaintBrush(44)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/paintbrush3.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">paintbrush3 A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush3.png" onclick="changePaintBrush(45)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/paintbrush3.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">paintbrush3 B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush4.png" onclick="changePaintBrush(46)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/paintbrush4.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">paintbrush4 A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush4.png" onclick="changePaintBrush(47)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/paintbrush4.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">paintbrush4 B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush5.png" onclick="changePaintBrush(48)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/paintbrush5.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">paintbrush5 A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush5.png" onclick="changePaintBrush(49)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/paintbrush5.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">paintbrush5 B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush6.png" onclick="changePaintBrush(50)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/paintbrush6.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">paintbrush6 A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush6.png" onclick="changePaintBrush(51)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/paintbrush6.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">paintbrush6 B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/pastel.png" onclick="changePaintBrush(52)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/pastel.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">pastel A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/pastel.png" onclick="changePaintBrush(53)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/pastel.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">pastel B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/soft.png" onclick="changePaintBrush(54)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/soft.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">soft A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/soft.png" onclick="changePaintBrush(55)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/soft.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">soft B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/sponge.png" onclick="changePaintBrush(56)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/sponge.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">sponge A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/sponge.png" onclick="changePaintBrush(57)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/sponge.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">sponge B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="stretch" id="content/brushes/square.png" onclick="changePaintBrush(58)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/square.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">square A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" brushType="repeat" id="content/brushes/square.png" onclick="changePaintBrush(59)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/square.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">square B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/breakfast.png" onclick="changePaintBrush(60)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/colored/breakfast.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">breakfast A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/breakfast.png" onclick="changePaintBrush(61)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/colored/breakfast.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">breakfast B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/chique.png" onclick="changePaintBrush(62)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/colored/chique.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">chique A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/chique.png" onclick="changePaintBrush(63)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/colored/chique.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">chique B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/hawaii.png" onclick="changePaintBrush(64)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/colored/hawaii.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">hawaii A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/hawaii.png" onclick="changePaintBrush(65)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/colored/hawaii.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">hawaii B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/newton.png" onclick="changePaintBrush(66)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/colored/newton.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">newton A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/newton.png" onclick="changePaintBrush(67)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/colored/newton.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">newton B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/pastels.png" onclick="changePaintBrush(68)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/colored/pastels.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">pastels A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/pastels.png" onclick="changePaintBrush(69)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/colored/pastels.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">pastels B</div>
|
|
</button>
|
|
|
|
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/softy.png" onclick="changePaintBrush(70)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/colored/softy.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">softy A</div>
|
|
</button>
|
|
|
|
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/softy.png" onclick="changePaintBrush(71)">
|
|
<div class="imageContainer">
|
|
<img s src="../content/brushes/colored/softy.png" class="BrushIcon"/>
|
|
</div>
|
|
<div class="brushLabel">softy B</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
var currentBrush = 0;
|
|
var EventBridge = parent.EventBridge;
|
|
|
|
function changeLineWidthRange(e) {
|
|
document.getElementById("lineWidthText").value = e.value;
|
|
notifyLineWidthChanged(e);
|
|
}
|
|
|
|
function changeLineWidthNumber(e) {
|
|
if (e.value > 1) {
|
|
document.getElementById("lineWidthText").value = 1;
|
|
}
|
|
document.getElementById("lineWidthRange").value = e.value > 1 ? 1 : e.value;
|
|
notifyLineWidthChanged(e);
|
|
}
|
|
|
|
function notifyLineWidthChanged(e) {
|
|
var changeLineWidthEvent = {
|
|
"type" : "changeLineWidth",
|
|
"brushWidth": e.value
|
|
};
|
|
parent.postMessage(JSON.stringify(changeLineWidthEvent), "*");
|
|
}
|
|
|
|
function changePaintBrush(brushIndex) {
|
|
var brushes = document.getElementById("brushesCointainer").children;
|
|
brushes[currentBrush].classList.remove("selectedBrush");
|
|
if (document.getElementById("selectedOverlay"))
|
|
document.getElementById("selectedOverlay").remove();
|
|
|
|
currentBrush = brushIndex;
|
|
brushes[currentBrush].classList.add("selectedBrush");
|
|
|
|
var selectedOverlay = document.createElement("div");
|
|
selectedOverlay.id = "selectedOverlay";
|
|
brushes[currentBrush].children[0].appendChild(selectedOverlay);
|
|
|
|
var changedBrushEvent = {
|
|
"type" : "changeBrush",
|
|
"brushName": brushes[currentBrush].id,
|
|
"brushType": brushes[currentBrush].getAttribute("brushType"),
|
|
"isColored": brushes[currentBrush].getAttribute("colored"),
|
|
"brushID" : brushIndex
|
|
};
|
|
|
|
parent.postMessage(JSON.stringify(changedBrushEvent), "*");
|
|
}
|
|
|
|
function calculateDynamicAxis(checkbox) {
|
|
if (checkbox.getAttribute("animationType") == "DynamicRotationBrush") {
|
|
return {
|
|
axis: {
|
|
x: document.getElementById("pitchRotationBrush").checked ? 1 : 0,
|
|
y: document.getElementById("rollRotationBrush").checked ? 1 : 0,
|
|
z: document.getElementById("yawRotationBrush").checked ? 1 : 0
|
|
}
|
|
}
|
|
}
|
|
if (checkbox.getAttribute("animationType") == "DynamicTranslationBrush") {
|
|
return {
|
|
axis: {
|
|
x: document.getElementById("xTranslationBrush").checked ? 1 : 0,
|
|
y: document.getElementById("yTranslationBrush").checked ? 1 : 0,
|
|
z: document.getElementById("zTranslationBrush").checked ? 1 : 0
|
|
}
|
|
}
|
|
} else return null;
|
|
}
|
|
|
|
function calculateEnabledStatus(checkbox, settings) {
|
|
if (checkbox.getAttribute("animationType") == "DynamicHueBrush") {
|
|
return checkbox.checked;
|
|
}
|
|
return settings.axis.x == 1 || settings.axis.y == 1 || settings.axis.z == 1;
|
|
}
|
|
|
|
function setDynamicBrush(checkbox) {
|
|
var settings = calculateDynamicAxis(checkbox);
|
|
var switchDynamicBrushEvent = {
|
|
"type" : "switchDynamicBrush",
|
|
"dynamicBrushName": checkbox.getAttribute("animationType"),
|
|
"enabled" : calculateEnabledStatus(checkbox, settings),
|
|
"settings" : settings,
|
|
"dynamicBrushID" : checkbox.id
|
|
};
|
|
parent.postMessage(JSON.stringify(switchDynamicBrushEvent), "*");
|
|
}
|
|
|
|
restoreSavedBrushes(JSON.parse(decodeURIComponent(window.parent.location.search).substring(1)));
|
|
function restoreSavedBrushes(brushData) {
|
|
if ("currentTexture" in brushData) {
|
|
changePaintBrush(brushData.currentTexture.brushID);
|
|
}
|
|
|
|
if ("dynamicBrushes" in brushData) {
|
|
var dynamicBrushes = brushData.currentDynamicBrushes;
|
|
for (var i = 0; i < dynamicBrushes.length; i++) {
|
|
document.getElementById(dynamicBrushes[i]).checked = true;
|
|
}
|
|
}
|
|
|
|
if ("currentStrokeWidth" in brushData) {
|
|
document.getElementById("lineWidthRange").value = brushData.currentStrokeWidth;
|
|
changeLineWidthRange({value: brushData.currentStrokeWidth});
|
|
changeLineWidthNumber({value: brushData.currentStrokeWidth});
|
|
}
|
|
}
|
|
|
|
$(window).load(function(){
|
|
setUpKeyboardControl();
|
|
});
|
|
|
|
|
|
</script> |