mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-04 16:49:58 +02:00
Did clean up of the code and unused files.
This commit is contained in:
Artur Gomes
parent
83cdd1739d
commit
07416951e5
65 changed files with 357 additions and 2030 deletions
|
|
@ -1,383 +0,0 @@
|
|||
// import QtQuick 2.5
|
||||
import QtQuick.Controls 1.4
|
||||
import QtQuick 2.6
|
||||
import QtQuick.Window 2.2
|
||||
import QtQuick.Controls 1.5
|
||||
import QtQuick.Dialogs 1.1
|
||||
import Hifi 1.0 as Hifi
|
||||
import QtQuick.Controls.Styles 1.4
|
||||
import QtQuick.Layouts 1.3
|
||||
import "content"
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
width: parent ? parent.width : 100
|
||||
height: parent ? parent.height : 100
|
||||
color: "transparent"
|
||||
signal moved(vector2d position);
|
||||
signal resized(size size);
|
||||
|
||||
signal sendToScript(var message);
|
||||
|
||||
property var channel;
|
||||
|
||||
TabView {
|
||||
id: frame
|
||||
anchors.fill: parent
|
||||
anchors.margins: 4
|
||||
Tab { title: "content/tabicons/colorpaletteBtn.png"
|
||||
ColorWheel{
|
||||
id: colorPicker
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
function sendToScript( message) { root.sendToScript(message)}
|
||||
}
|
||||
Tab { title: "content/tabicons/linewidthBtn.png"
|
||||
Slider {
|
||||
|
||||
value: 0.25
|
||||
onValueChanged: {
|
||||
root.sendToScript(["width", value]);
|
||||
}
|
||||
|
||||
style: SliderStyle {
|
||||
|
||||
handle: Rectangle {
|
||||
anchors.centerIn: parent
|
||||
|
||||
implicitWidth: 34
|
||||
implicitHeight: 34
|
||||
border.color: "black"
|
||||
border.width: 1
|
||||
color: "transparent"
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent; anchors.margins: 2
|
||||
border.color: "white"; border.width: 1
|
||||
color: "transparent"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Tab { title: "content/tabicons/brushesBtn.png"
|
||||
GridLayout {
|
||||
id: grid
|
||||
columns: 3
|
||||
|
||||
Layout.maximumWidth : 100
|
||||
Layout.maximumHeight : 100
|
||||
Layout.fillWidth : true
|
||||
Layout.fillHeight : true
|
||||
Button {
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
Layout.fillWidth : true
|
||||
Layout.fillHeight : true
|
||||
text: ""
|
||||
//iconSource: "content/brushes/paintbrush1.png"
|
||||
onClicked: {
|
||||
root.sendToScript(["brush", img.source]);
|
||||
}
|
||||
|
||||
Image {
|
||||
id: img
|
||||
source: "content/brushes/paintbrush1.png"
|
||||
anchors.fill: parent
|
||||
|
||||
}
|
||||
|
||||
style: ButtonStyle {
|
||||
background: Rectangle {
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
border.width: control.activeFocus ? 2 : 1
|
||||
border.color: "#888"
|
||||
radius: 4
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
|
||||
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Button {
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
Layout.fillWidth : true
|
||||
Layout.fillHeight : true
|
||||
text: ""
|
||||
//iconSource: "content/brushes/paintbrush2.png"
|
||||
//onClicked: {
|
||||
// root.sendToScript(["brush", iconSource]);
|
||||
//}
|
||||
|
||||
//iconSource: "content/brushes/paintbrush1.png"
|
||||
onClicked: {
|
||||
root.sendToScript(["brush", img2.source]);
|
||||
}
|
||||
|
||||
Image {
|
||||
id: img2
|
||||
source: "content/brushes/paintbrush2.png"
|
||||
anchors.fill: parent
|
||||
|
||||
}
|
||||
|
||||
style: ButtonStyle {
|
||||
background: Rectangle {
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
border.width: control.activeFocus ? 2 : 1
|
||||
border.color: "#888"
|
||||
radius: 4
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
|
||||
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Button {
|
||||
Layout.fillWidth : true
|
||||
Layout.fillHeight : true
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
text: ""
|
||||
//iconSource: "content/brushes/paintbrush3.png"
|
||||
//onClicked: {
|
||||
// root.sendToScript(["brush", iconSource]);
|
||||
//}
|
||||
|
||||
//iconSource: "content/brushes/paintbrush1.png"
|
||||
onClicked: {
|
||||
root.sendToScript(["brush", img3.source]);
|
||||
}
|
||||
|
||||
Image {
|
||||
id: img3
|
||||
source: "content/brushes/paintbrush3.png"
|
||||
anchors.fill: parent
|
||||
|
||||
}
|
||||
|
||||
style: ButtonStyle {
|
||||
background: Rectangle {
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
border.width: control.activeFocus ? 2 : 1
|
||||
border.color: "#888"
|
||||
radius: 4
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
|
||||
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Button {
|
||||
Layout.fillWidth : true
|
||||
Layout.fillHeight : true
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
text: ""
|
||||
//iconSource: "content/brushes/paintbrush4.png"
|
||||
//onClicked: {
|
||||
// root.sendToScript(["brush", iconSource]);
|
||||
//}
|
||||
|
||||
//iconSource: "content/brushes/paintbrush1.png"
|
||||
onClicked: {
|
||||
root.sendToScript(["brush", img4.source]);
|
||||
}
|
||||
|
||||
Image {
|
||||
id: img4
|
||||
source: "content/brushes/paintbrush4.png"
|
||||
anchors.fill: parent
|
||||
|
||||
}
|
||||
|
||||
style: ButtonStyle {
|
||||
background: Rectangle {
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
border.width: control.activeFocus ? 2 : 1
|
||||
border.color: "#888"
|
||||
radius: 4
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
|
||||
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Button {
|
||||
Layout.fillWidth : true
|
||||
Layout.fillHeight : true
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
text: ""
|
||||
//iconSource: "content/brushes/paintbrush5.png"
|
||||
//onClicked: {
|
||||
// root.sendToScript(["brush", iconSource]);
|
||||
//}
|
||||
|
||||
//iconSource: "content/brushes/paintbrush1.png"
|
||||
onClicked: {
|
||||
root.sendToScript(["brush", img5.source]);
|
||||
}
|
||||
|
||||
Image {
|
||||
id: img5
|
||||
source: "content/brushes/paintbrush5.png"
|
||||
anchors.fill: parent
|
||||
|
||||
}
|
||||
|
||||
style: ButtonStyle {
|
||||
background: Rectangle {
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
border.width: control.activeFocus ? 2 : 1
|
||||
border.color: "#888"
|
||||
radius: 4
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
|
||||
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Button {
|
||||
Layout.fillWidth : true
|
||||
Layout.fillHeight : true
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
text: ""
|
||||
//iconSource: "content/brushes/paintbrush6.png"
|
||||
//onClicked: {
|
||||
// root.sendToScript(["brush", iconSource]);
|
||||
//}
|
||||
|
||||
//iconSource: "content/brushes/paintbrush1.png"
|
||||
onClicked: {
|
||||
root.sendToScript(["brush", img6.source]);
|
||||
}
|
||||
|
||||
Image {
|
||||
id: img6
|
||||
source: "content/brushes/paintbrush6.png"
|
||||
anchors.fill: parent
|
||||
|
||||
}
|
||||
|
||||
style: ButtonStyle {
|
||||
background: Rectangle {
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
border.width: control.activeFocus ? 2 : 1
|
||||
border.color: "#888"
|
||||
radius: 4
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
|
||||
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Tab { title: "content/tabicons/eraser.png"
|
||||
|
||||
|
||||
|
||||
Button {
|
||||
width : 200
|
||||
height : 50
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "Undo"
|
||||
onClicked: {
|
||||
root.sendToScript(["undo"]);
|
||||
}
|
||||
|
||||
style: ButtonStyle {
|
||||
background: Rectangle {
|
||||
//width : Layout.fillWidth
|
||||
//height : Layout.fillHeight
|
||||
border.width: control.activeFocus ? 2 : 1
|
||||
border.color: "#888"
|
||||
radius: 4
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
|
||||
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Tab { title: "content/tabicons/pointingfinger128px.png"
|
||||
|
||||
|
||||
|
||||
Button {
|
||||
width : 200
|
||||
height : 50
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "Toggle Hand"
|
||||
onClicked: {
|
||||
root.sendToScript(["hand"]);
|
||||
}
|
||||
|
||||
style: ButtonStyle {
|
||||
background: Rectangle {
|
||||
|
||||
border.width: control.activeFocus ? 2 : 1
|
||||
border.color: "#888"
|
||||
radius: 4
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
|
||||
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
style: TabViewStyle {
|
||||
frameOverlap: 1
|
||||
tab: Rectangle {
|
||||
color: styleData.selected ? "steelblue" : "grey"
|
||||
border.color: "grey"
|
||||
implicitWidth: 100
|
||||
implicitHeight: 100
|
||||
radius: 2
|
||||
Text {
|
||||
id: text
|
||||
anchors.centerIn: parent
|
||||
text: ""
|
||||
color: styleData.selected ? "white" : "black"
|
||||
}
|
||||
Image {
|
||||
source: styleData.title
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
}
|
||||
}
|
||||
frame: Rectangle { color: "grey" }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import QtQuick 2.0
|
||||
|
||||
Grid {
|
||||
id: root
|
||||
property int cellSide: 5
|
||||
anchors.fill: parent
|
||||
rows: height/cellSide; columns: width/cellSide
|
||||
clip: true
|
||||
Repeater {
|
||||
model: root.columns*root.rows
|
||||
Rectangle {
|
||||
width: root.cellSide; height: root.cellSide
|
||||
color: (index%2 == 0) ? "gray" : "white"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
// creates color value from hue, saturation, brightness, alpha
|
||||
function hsba(h, s, b, a) {
|
||||
var lightness = (2 - s)*b;
|
||||
var satHSL = s*b/((lightness <= 1) ? lightness : 2 - lightness);
|
||||
lightness /= 2;
|
||||
return Qt.hsla(h, satHSL, lightness, a);
|
||||
}
|
||||
|
||||
function clamp(val, min, max){
|
||||
return Math.max(min, Math.min(max, val)) ;
|
||||
}
|
||||
|
||||
function mix(x, y , a)
|
||||
{
|
||||
return x * (1 - a) + y * a ;
|
||||
}
|
||||
|
||||
function hsva2rgba(hsva) {
|
||||
var c = hsva.z * hsva.y ;
|
||||
var x = c * (1 - Math.abs( (hsva.x * 6) % 2 - 1 )) ;
|
||||
var m = hsva.z - c ;
|
||||
|
||||
if (hsva.x < 1/6 )
|
||||
return Qt.vector4d(c+m, x+m, m, hsva.w) ;
|
||||
else if (hsva.x < 1/3 )
|
||||
return Qt.vector4d(x+m, c+m, m, hsva.w) ;
|
||||
else if (hsva.x < 0.5 )
|
||||
return Qt.vector4d(m, c+m, x+m, hsva.w) ;
|
||||
else if (hsva.x < 2/3 )
|
||||
return Qt.vector4d(m, x+m, c+m, hsva.w) ;
|
||||
else if (hsva.x < 5/6 )
|
||||
return Qt.vector4d(x+m, m, c+m, hsva.w) ;
|
||||
else
|
||||
return Qt.vector4d(c+m, m, x+m, hsva.w) ;
|
||||
|
||||
}
|
||||
|
||||
function rgba2hsva(rgba)
|
||||
{
|
||||
var r = rgba.x;
|
||||
var g = rgba.y;
|
||||
var b = rgba.z;
|
||||
var max = Math.max(r, g, b), min = Math.min(r, g, b);
|
||||
var h, s, v = max;
|
||||
|
||||
var d = max - min;
|
||||
s = max === 0 ? 0 : d / max;
|
||||
|
||||
if(max == min){
|
||||
h = 0; // achromatic
|
||||
} else{
|
||||
switch(max){
|
||||
case r:
|
||||
h = (g - b) / d + (g < b ? 6 : 0);
|
||||
break;
|
||||
case g:
|
||||
h = (b - r) / d + 2;
|
||||
break;
|
||||
case b:
|
||||
h = (r - g) / d + 4;
|
||||
break;
|
||||
}
|
||||
h /= 6;
|
||||
}
|
||||
|
||||
return Qt.vector4d(h, s, v, rgba.w);
|
||||
}
|
||||
|
||||
|
||||
// extracts integer color channel value [0..255] from color value
|
||||
function getChannelStr(clr, channelIdx) {
|
||||
return parseInt(clr.toString().substr(channelIdx*2 + 1, 2), 16);
|
||||
}
|
||||
|
||||
//convert to hexa with nb char
|
||||
function intToHexa(val , nb)
|
||||
{
|
||||
var hexaTmp = val.toString(16) ;
|
||||
var hexa = "";
|
||||
var size = hexaTmp.length
|
||||
if (size < nb )
|
||||
{
|
||||
for(var i = 0 ; i < nb - size ; ++i)
|
||||
{
|
||||
hexa += "0"
|
||||
}
|
||||
}
|
||||
return hexa + hexaTmp
|
||||
}
|
||||
|
||||
function hexaFromRGBA(red, green, blue, alpha)
|
||||
{
|
||||
return intToHexa(Math.round(red * 255), 2)+intToHexa(Math.round(green * 255), 2)+intToHexa(Math.round(blue * 255), 2);
|
||||
}
|
||||
|
|
@ -1,284 +0,0 @@
|
|||
import QtQuick 2.2
|
||||
import QtQuick.Window 2.0
|
||||
import QtQuick.Layouts 1.1
|
||||
|
||||
import "ColorUtils.js" as ColorUtils
|
||||
|
||||
Item {
|
||||
id: root
|
||||
width: parent.width
|
||||
height: parent.height * 0.666
|
||||
focus: true
|
||||
|
||||
// Color value in RGBA with floating point values between 0.0 and 1.0.
|
||||
|
||||
|
||||
property vector4d colorHSVA: Qt.vector4d(1, 1, 1, 1)
|
||||
QtObject {
|
||||
id: m
|
||||
// Color value in HSVA with floating point values between 0.0 and 1.0.
|
||||
property vector4d colorRGBA: ColorUtils.hsva2rgba(root.colorHSVA)
|
||||
}
|
||||
|
||||
signal accepted
|
||||
|
||||
onAccepted: {
|
||||
var rgba = ColorUtils.hsva2rgba(root.colorHSVA)
|
||||
parent.sendToScript(["color", rgba.x*255 , rgba.y*255, rgba.z*255]);
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
spacing: 20
|
||||
anchors.fill: parent
|
||||
|
||||
Wheel {
|
||||
id: wheel
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.minimumWidth: 200
|
||||
Layout.minimumHeight: 200
|
||||
|
||||
hue: colorHSVA.x
|
||||
saturation: colorHSVA.y
|
||||
onUpdateHS: {
|
||||
colorHSVA = Qt.vector4d(hueSignal,saturationSignal, colorHSVA.z, colorHSVA.w)
|
||||
}
|
||||
onAccepted: {
|
||||
root.accepted()
|
||||
}
|
||||
}
|
||||
|
||||
// brightness picker slider
|
||||
Item {
|
||||
Layout.fillHeight: true
|
||||
Layout.minimumWidth: 20
|
||||
Layout.minimumHeight: 200
|
||||
|
||||
//Brightness background
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
id: brightnessBeginColor
|
||||
position: 0.0
|
||||
color: {
|
||||
var rgba = ColorUtils.hsva2rgba(
|
||||
Qt.vector4d(colorHSVA.x,
|
||||
colorHSVA.y, 1, 1))
|
||||
return Qt.rgba(rgba.x, rgba.y, rgba.z, rgba.w)
|
||||
}
|
||||
}
|
||||
GradientStop {
|
||||
position: 1.0
|
||||
color: "#000000"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
VerticalSlider {
|
||||
id: brigthnessSlider
|
||||
anchors.fill: parent
|
||||
value: colorHSVA.z
|
||||
onValueChanged: {
|
||||
colorHSVA = Qt.vector4d(colorHSVA.x, colorHSVA.y, value, colorHSVA.w)
|
||||
}
|
||||
onAccepted: {
|
||||
root.accepted()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// text inputs
|
||||
ColumnLayout {
|
||||
Layout.fillHeight: true
|
||||
Layout.minimumWidth: 150
|
||||
Layout.minimumHeight: 200
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 10
|
||||
|
||||
// current color display
|
||||
Rectangle {
|
||||
Layout.minimumWidth: 150
|
||||
Layout.minimumHeight: 50
|
||||
CheckerBoard {
|
||||
cellSide: 5
|
||||
}
|
||||
Rectangle {
|
||||
id: colorDisplay
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
border.width: 1
|
||||
border.color: "black"
|
||||
color: Qt.rgba(m.colorRGBA.x, m.colorRGBA.y, m.colorRGBA.z)
|
||||
opacity: m.colorRGBA.w
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// current color value
|
||||
Item {
|
||||
Layout.minimumWidth: 120
|
||||
Layout.minimumHeight: 25
|
||||
|
||||
Text {
|
||||
id: captionBox
|
||||
text: "#"
|
||||
width: 18
|
||||
height: parent.height
|
||||
color: "#AAAAAA"
|
||||
font.pixelSize: 16
|
||||
font.bold: true
|
||||
}
|
||||
PanelBorder {
|
||||
height: parent.height
|
||||
anchors.left : captionBox.right
|
||||
width: parent.width - captionBox.width
|
||||
TextInput {
|
||||
id: currentColor
|
||||
color: "#AAAAAA"
|
||||
selectionColor: "#FF7777AA"
|
||||
font.pixelSize: 16
|
||||
font.capitalization: "AllUppercase"
|
||||
maximumLength: 9
|
||||
focus: true
|
||||
text: ColorUtils.hexaFromRGBA(m.colorRGBA.x, m.colorRGBA.y,
|
||||
m.colorRGBA.z, m.colorRGBA.w)
|
||||
font.family: "Droid Sans"
|
||||
selectByMouse: true
|
||||
validator: RegExpValidator {
|
||||
regExp: /^([A-Fa-f0-9]{6})$/
|
||||
}
|
||||
onEditingFinished: {
|
||||
var colorTmp = Qt.vector4d( parseInt(text.substr(0, 2), 16) / 255,
|
||||
parseInt(text.substr(2, 2), 16) / 255,
|
||||
parseInt(text.substr(4, 2), 16) / 255,
|
||||
colorHSVA.w) ;
|
||||
colorHSVA = ColorUtils.rgba2hsva(colorTmp)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// H, S, B color value boxes
|
||||
Column {
|
||||
Layout.minimumWidth: 80
|
||||
Layout.minimumHeight: 25
|
||||
NumberBox {
|
||||
id: hue
|
||||
caption: "H"
|
||||
// TODO: put in NumberBox
|
||||
value: Math.round(colorHSVA.x * 100000) / 100000 // 5 Decimals
|
||||
decimals: 2
|
||||
max: 1
|
||||
min: 0
|
||||
onAccepted: {
|
||||
colorHSVA = Qt.vector4d(boxValue, colorHSVA.y, colorHSVA.z, colorHSVA.w)
|
||||
root.accepted()
|
||||
}
|
||||
}
|
||||
NumberBox {
|
||||
id: sat
|
||||
caption: "S"
|
||||
value: Math.round(colorHSVA.y * 100) / 100 // 2 Decimals
|
||||
decimals: 2
|
||||
max: 1
|
||||
min: 0
|
||||
onAccepted: {
|
||||
colorHSVA = Qt.vector4d(colorHSVA.x, boxValue, colorHSVA.z, colorHSVA.w)
|
||||
root.accepted()
|
||||
}
|
||||
}
|
||||
NumberBox {
|
||||
id: brightness
|
||||
caption: "B"
|
||||
value: Math.round(colorHSVA.z * 100) / 100 // 2 Decimals
|
||||
decimals: 2
|
||||
max: 1
|
||||
min: 0
|
||||
onAccepted: {
|
||||
colorHSVA = Qt.vector4d(colorHSVA.x, colorHSVA.y, boxValue, colorHSVA.w)
|
||||
root.accepted()
|
||||
}
|
||||
}
|
||||
NumberBox {
|
||||
id: hsbAlpha
|
||||
caption: "A"
|
||||
value: Math.round(colorHSVA.w * 100) / 100 // 2 Decimals
|
||||
decimals: 2
|
||||
max: 1
|
||||
min: 0
|
||||
onAccepted: {
|
||||
colorHSVA.w = boxValue
|
||||
root.accepted()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// R, G, B color values boxes
|
||||
Column {
|
||||
Layout.minimumWidth: 80
|
||||
Layout.minimumHeight: 25
|
||||
NumberBox {
|
||||
id: red
|
||||
caption: "R"
|
||||
value: Math.round(m.colorRGBA.x * 255)
|
||||
min: 0
|
||||
max: 255
|
||||
decimals: 0
|
||||
onAccepted: {
|
||||
var colorTmp = Qt.vector4d( boxValue / 255,
|
||||
m.colorRGBA.y,
|
||||
m.colorRGBA.z,
|
||||
colorHSVA.w) ;
|
||||
colorHSVA = ColorUtils.rgba2hsva(colorTmp)
|
||||
root.accepted()
|
||||
}
|
||||
}
|
||||
NumberBox {
|
||||
id: green
|
||||
caption: "G"
|
||||
value: Math.round(m.colorRGBA.y * 255)
|
||||
min: 0
|
||||
max: 255
|
||||
decimals: 0
|
||||
onAccepted: {
|
||||
var colorTmp = Qt.vector4d( m.colorRGBA.x,
|
||||
boxValue / 255,
|
||||
m.colorRGBA.z,
|
||||
colorHSVA.w) ;
|
||||
colorHSVA = ColorUtils.rgba2hsva(colorTmp)
|
||||
root.accepted()
|
||||
}
|
||||
}
|
||||
NumberBox {
|
||||
id: blue
|
||||
caption: "B"
|
||||
value: Math.round(m.colorRGBA.z * 255)
|
||||
min: 0
|
||||
max: 255
|
||||
decimals: 0
|
||||
onAccepted: {
|
||||
var colorTmp = Qt.vector4d( m.colorRGBA.x,
|
||||
m.colorRGBA.y,
|
||||
boxValue / 255,
|
||||
colorHSVA.w) ;
|
||||
colorHSVA = ColorUtils.rgba2hsva(colorTmp)
|
||||
root.accepted()
|
||||
}
|
||||
}
|
||||
NumberBox {
|
||||
id: rgbAlpha
|
||||
caption: "A"
|
||||
value: Math.round(m.colorRGBA.w * 255)
|
||||
min: 0
|
||||
max: 255
|
||||
decimals: 0
|
||||
onAccepted: {
|
||||
root.colorHSVA.w = boxValue / 255
|
||||
root.accepted()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import QtQuick 2.2
|
||||
import "ColorUtils.js" as ColorUtils
|
||||
|
||||
Row {
|
||||
id: root
|
||||
property string caption: ""
|
||||
property real value: 0
|
||||
property real min: 0
|
||||
property real max: 255
|
||||
property int decimals: 2
|
||||
|
||||
QtObject {
|
||||
id: m
|
||||
// Hack: force update of the text after text validation
|
||||
property int forceTextUpdate: 0
|
||||
}
|
||||
|
||||
onValueChanged: {
|
||||
|
||||
console.debug("NumberBox root.value:" + root.value)
|
||||
}
|
||||
|
||||
width: 60
|
||||
height: 20
|
||||
spacing: 0
|
||||
anchors.margins: 5
|
||||
|
||||
signal accepted(var boxValue)
|
||||
|
||||
Text {
|
||||
id: captionBox
|
||||
text: root.caption
|
||||
width: 18; height: parent.height
|
||||
color: "#AAAAAA"
|
||||
font.pixelSize: 16; font.bold: true
|
||||
horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignBottom
|
||||
anchors.bottomMargin: 3
|
||||
}
|
||||
PanelBorder {
|
||||
height: parent.height
|
||||
anchors.leftMargin: 4;
|
||||
anchors.left: captionBox.right; anchors.right: parent.right
|
||||
TextInput {
|
||||
id: inputBox
|
||||
// Hack: force update of the text if the value is the same after the clamp.
|
||||
text: m.forceTextUpdate ? root.value.toString() : root.value.toString()
|
||||
anchors.leftMargin: 4; anchors.topMargin: 1; anchors.fill: parent
|
||||
color: "#AAAAAA"; selectionColor: "#FF7777AA"
|
||||
font.pixelSize: 14
|
||||
focus: true
|
||||
onEditingFinished: {
|
||||
var newText = ColorUtils.clamp(parseFloat(inputBox.text), root.min, root.max).toString()
|
||||
if(newText != root.value) {
|
||||
root.accepted(newText)
|
||||
}
|
||||
else {
|
||||
m.forceTextUpdate = m.forceTextUpdate + 1 // Hack: force update
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import QtQuick 2.0
|
||||
|
||||
Rectangle {
|
||||
width : 40; height : 15; radius: 2
|
||||
border.width: 1; border.color: "#FF101010"
|
||||
color: "transparent"
|
||||
anchors.leftMargin: 1; anchors.topMargin: 3
|
||||
clip: true
|
||||
Rectangle {
|
||||
anchors.fill: parent; radius: 2
|
||||
anchors.leftMargin: -1; anchors.topMargin: -1
|
||||
anchors.rightMargin: 0; anchors.bottomMargin: 0
|
||||
border.width: 1; border.color: "#FF525255"
|
||||
color: "transparent"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
import QtQuick 2.0
|
||||
import "mathUtils.js" as MathUtils
|
||||
|
||||
Item {
|
||||
id: root
|
||||
width: 15
|
||||
height: 200
|
||||
|
||||
|
||||
property real value
|
||||
signal accepted
|
||||
|
||||
states :
|
||||
// When user is moving the slider
|
||||
State {
|
||||
name: "editing"
|
||||
PropertyChanges {
|
||||
target: root
|
||||
// Initialize with the value in the default state.
|
||||
// Allows to break the link in that state.
|
||||
value: root.value
|
||||
}
|
||||
}
|
||||
|
||||
// Cursor
|
||||
Item {
|
||||
id: pickerCursor
|
||||
width: parent.width
|
||||
height: 8
|
||||
|
||||
Rectangle {
|
||||
id: cursor
|
||||
x: -4
|
||||
y: MathUtils.clamp(root.height * (1 - root.value), 0.0, root.height)
|
||||
width: parent.width + -2*x
|
||||
height: parent.height
|
||||
border.color: "black"
|
||||
border.width: 1
|
||||
color: "transparent"
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent; anchors.margins: 2
|
||||
border.color: "white"; border.width: 1
|
||||
color: "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouseAreaSlider
|
||||
anchors.fill: parent
|
||||
property bool isDrag : false
|
||||
function sliderHandleMouse(mouse){
|
||||
root.state = 'editing'
|
||||
if (mouse.buttons & Qt.LeftButton | isDrag) {
|
||||
root.value = MathUtils.clampAndProject(mouse.y, 0.0, height, 1.0, 0.0)
|
||||
}
|
||||
}
|
||||
onPositionChanged: {
|
||||
sliderHandleMouse(mouse)
|
||||
}
|
||||
onPressed: {
|
||||
isDrag = true
|
||||
sliderHandleMouse(mouse)
|
||||
}
|
||||
onReleased: {
|
||||
isDrag = false
|
||||
root.state = ''
|
||||
root.accepted()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
import QtQuick 2.0
|
||||
|
||||
Item {
|
||||
id: root
|
||||
width: 200
|
||||
height: 200
|
||||
|
||||
property real hue : 1
|
||||
property real saturation : 1
|
||||
|
||||
signal accepted()
|
||||
signal updateHS(var hueSignal, var saturationSignal)
|
||||
|
||||
states :
|
||||
// When user is moving the slider
|
||||
State {
|
||||
name: "editing"
|
||||
PropertyChanges {
|
||||
target: root
|
||||
// Better solution ? because the value is change in the fonction of mouse area
|
||||
hue: hue
|
||||
saturation: saturation
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: wheel
|
||||
//Keep the wheel round
|
||||
width: parent.width < parent.height ? parent.width : parent.height ;
|
||||
height: width ;
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: "transparent"
|
||||
ShaderEffect {
|
||||
id: shader
|
||||
anchors.fill: parent
|
||||
vertexShader: "
|
||||
uniform highp mat4 qt_Matrix;
|
||||
attribute highp vec4 qt_Vertex;
|
||||
attribute highp vec2 qt_MultiTexCoord0;
|
||||
varying highp vec2 coord;
|
||||
|
||||
void main() {
|
||||
coord = qt_MultiTexCoord0 - vec2(0.5, 0.5);
|
||||
gl_Position = qt_Matrix * qt_Vertex;
|
||||
}"
|
||||
fragmentShader: "
|
||||
varying highp vec2 coord;
|
||||
|
||||
vec3 hsv2rgb(in vec3 c){
|
||||
vec4 k = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
|
||||
vec3 p = abs(fract(c.xxx + k.xyz) * 6.0 - k.www);
|
||||
return c.z * mix(k.xxx, clamp(p - k.xxx, 0.0, 1.0), c.y);
|
||||
}
|
||||
|
||||
void main() {
|
||||
const float PI = 3.14159265358979323846264;
|
||||
float s = sqrt(coord.x * coord.x + coord.y * coord.y);
|
||||
|
||||
if( s > 0.5 ){
|
||||
gl_FragColor = vec4(0, 0, 0, 0);
|
||||
return;
|
||||
}
|
||||
|
||||
float h = - atan( coord.y / coord.x );
|
||||
s *= 2.0;
|
||||
|
||||
if( coord.x >= 0.0 ){
|
||||
h += PI;
|
||||
}
|
||||
|
||||
h = h / (2.0 * PI);
|
||||
vec3 hsl = vec3(h, s, 1.0);
|
||||
vec3 rgb = hsv2rgb(hsl);
|
||||
gl_FragColor.rgb = rgb;
|
||||
gl_FragColor.a = 1.0;
|
||||
}"
|
||||
}
|
||||
|
||||
Item {
|
||||
id: pickerCursor
|
||||
x: parent.width/2 * (1 + root.saturation * Math.cos(2 * Math.PI * root.hue - Math.PI)) - r
|
||||
y: parent.width/2 * (1 + root.saturation * Math.sin(-2 * Math.PI * root.hue - Math.PI)) - r
|
||||
property int r : 8
|
||||
Rectangle {
|
||||
width: parent.r*2; height: parent.r*2
|
||||
radius: parent.r
|
||||
border.color: "black"; border.width: 2
|
||||
color: "transparent"
|
||||
Rectangle {
|
||||
anchors.fill: parent; anchors.margins: 2;
|
||||
border.color: "white"; border.width: 2
|
||||
radius: width/2
|
||||
color: "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id : wheelArea
|
||||
property bool isDrag : false
|
||||
|
||||
// Clamp cursor to wheel
|
||||
function keepCursorInWheel(mouse, wheelArea, wheel) {
|
||||
root.state = 'editing'
|
||||
if (mouse.buttons & Qt.LeftButton | isDrag) {
|
||||
// cartesian to polar coords
|
||||
var ro = Math.sqrt(Math.pow(mouse.x-wheel.width/2,2)+Math.pow(mouse.y-wheel.height/2,2));
|
||||
var theta = Math.atan2(((mouse.y-wheel.height/2)*(-1)),((mouse.x-wheel.width/2)));
|
||||
|
||||
// Wheel limit
|
||||
if(ro > wheel.width/2)
|
||||
ro = wheel.width/2;
|
||||
|
||||
// polar to cartesian coords
|
||||
var cursor = Qt.vector2d(0, 0);
|
||||
cursor.x = Math.max(-pickerCursor.r, Math.min(wheelArea.width, ro*Math.cos(theta)+wheel.width/2)-pickerCursor.r);
|
||||
cursor.y = Math.max(-pickerCursor.r, Math.min(wheelArea.height, wheel.height/2-ro*Math.sin(theta)-pickerCursor.r));
|
||||
|
||||
hue = Math.ceil((Math.atan2(((cursor.y+pickerCursor.r-wheel.height/2)*(-1)),((cursor.x+pickerCursor.r-wheel.width/2)))/(Math.PI*2)+0.5)*100)/100
|
||||
saturation = Math.ceil(Math.sqrt(Math.pow(cursor.x+pickerCursor.r-width/2,2)+Math.pow(cursor.y+pickerCursor.r-height/2,2))/wheel.height*2*100)/100;
|
||||
root.updateHS(hue, saturation) ;
|
||||
}
|
||||
}
|
||||
anchors.fill: parent
|
||||
|
||||
onPositionChanged: {
|
||||
keepCursorInWheel(mouse, wheelArea, wheel)
|
||||
|
||||
}
|
||||
onPressed: {
|
||||
isDrag = true
|
||||
keepCursorInWheel(mouse, wheelArea, wheel)
|
||||
|
||||
}
|
||||
|
||||
onReleased: {
|
||||
isDrag = false
|
||||
root.state = ''
|
||||
root.accepted() ;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -21,11 +21,9 @@ AnimatedBrushClass.prototype.onUpdate = function(deltaSeconds, entityID) {
|
|||
* @param animatedBrushObject: the animation object (should be a subclass of animatedBrush)
|
||||
*/
|
||||
AnimatedBrushClass.prototype.updateUserData = function(entityID, animatedBrushObject) {
|
||||
//print("Saving class " + animatedBrushObject.NAME);
|
||||
var prevUserData = Entities.getEntityProperties(entityID).userData;
|
||||
|
||||
if (prevUserData) {
|
||||
print("saving on parent: " + JSON.stringify(animatedBrushObject));
|
||||
prevUserData = prevUserData == "" ? new Object() : JSON.parse(prevUserData); //preserve other possible user data
|
||||
if (prevUserData.animations != null && prevUserData.animations[animatedBrushObject.NAME] != null) {
|
||||
delete prevUserData.animations[animatedBrushObject.NAME];
|
||||
|
|
@ -9,11 +9,9 @@
|
|||
self.intervalID = Script.setInterval(function() {
|
||||
if (Vec3.withinEpsilon(MyAvatar.position, Entities.getEntityProperties(entityID).position, MIN_PLAY_DISTANCE)) {
|
||||
var userData = Entities.getEntityProperties(entityID).userData;
|
||||
//print("UserData: " + userData);
|
||||
if (userData) {
|
||||
var userDataObject = JSON.parse(userData);
|
||||
var animationObject = userDataObject.animations;
|
||||
print("Playing animation " + JSON.stringify(animationObject));
|
||||
var newAnimationObject = null;
|
||||
if (!userDataObject.timeFromLastAnimation) {
|
||||
userDataObject.timeFromLastAnimation = Date.now();
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
//Superclass
|
||||
Script.include("animatedBrush.js");
|
||||
Script.include("../../ColorUtils2.js");
|
||||
Script.include("../js/ColorUtils.js");
|
||||
|
||||
function AnimatedHueBrushClass(settings, entityID) {
|
||||
//Animated brush vars
|
||||
AnimatedBrush.call(this);
|
||||
//print("Starting animated hue brush");
|
||||
this.hsvColor = rgb2hsv(Entities.getEntityProperties(entityID).color);// {hue: 0, saturation: 1.0, value: 1.0};
|
||||
this.animatedColor = {red: 0, green: 0, blue: 0};
|
||||
}
|
||||
|
|
@ -15,7 +13,6 @@ AnimatedHueBrushClass.prototype.ANIMATED_BRUSH_INCREMENT = 0.5; //linear increme
|
|||
AnimatedHueBrushClass.prototype.NAME = "animatedHueBrush";
|
||||
|
||||
AnimatedHueBrushClass.prototype.onUpdate = function(deltaSeconds, entityID) {
|
||||
//print("Animated Hue Brush");
|
||||
this.hsvColor.hue = this.hsvColor.hue + ((deltaSeconds * this.ANIMATED_BRUSH_INCREMENT)/this.ANIMATED_BRUSH_TIME);
|
||||
this.hsvColor.hue = this.hsvColor.hue >= 360 ? 0 : this.hsvColor.hue; //restart hue cycle
|
||||
this.animatedColor = hsv2rgb(this.hsvColor);
|
||||
|
|
@ -23,7 +20,6 @@ AnimatedHueBrushClass.prototype.onUpdate = function(deltaSeconds, entityID) {
|
|||
this.parent.updateUserData(entityID, this);
|
||||
}
|
||||
|
||||
//AnimatedHueBrushClass.prototype = Object.create(AnimatedBrush.prototype);
|
||||
AnimatedHueBrushClass.prototype.constructor = AnimatedHueBrushClass;
|
||||
AnimatedHueBrushClass.prototype.parent = AnimatedBrush.prototype;
|
||||
|
||||
|
|
@ -2,9 +2,7 @@
|
|||
Script.include("animatedBrush.js");
|
||||
|
||||
function AnimatedRotationBrushClass(settings, entityID) {
|
||||
//animated brush vars
|
||||
AnimatedBrush.call(this);
|
||||
//print("Starting animated rotation brush");
|
||||
this.angle = 0;
|
||||
this.activeAxis = settings.axis;
|
||||
}
|
||||
|
|
@ -17,7 +15,6 @@ AnimatedRotationBrushClass.prototype.ANIMATED_BRUSH_INCREMENT = 5; //linear incr
|
|||
AnimatedRotationBrushClass.prototype.NAME = "animatedRotationBrush"; //linear increment of brush size;
|
||||
|
||||
AnimatedRotationBrushClass.prototype.onUpdate = function(deltaSeconds, entityID) {
|
||||
//print("Animated rotation this: " + JSON.stringify(rotation));
|
||||
this.angle = this.angle + ((deltaSeconds * this.ANIMATED_BRUSH_INCREMENT)/this.ANIMATED_BRUSH_TIME);
|
||||
this.angle = this.angle >= 360 ? 0 : this.angle; //restart hue cycle
|
||||
var rotation = Vec3.multiply(this.angle, this.activeAxis);
|
||||
|
|
@ -2,9 +2,7 @@
|
|||
Script.include("animatedBrush.js");
|
||||
|
||||
function AnimatedTranslationBrushClass(settings, entityID) {
|
||||
//Animated brush vars
|
||||
AnimatedBrush.call(this);
|
||||
//print("Starting Animated Translation brush");
|
||||
this.startingPosition = null;
|
||||
this.translation = 0;
|
||||
this.activeAxis = settings.axis;
|
||||
|
|
@ -19,9 +17,7 @@ AnimatedTranslationBrushClass.prototype.MAX_TRANSLATION = 2;
|
|||
AnimatedTranslationBrushClass.prototype.NAME = "animatedTranslationBrush"; //linear increment of brush size;
|
||||
|
||||
AnimatedTranslationBrushClass.prototype.onUpdate = function(deltaSeconds, entityID) {
|
||||
//print("translation this: " + JSON.stringify(this) + " : " + JSON.stringify(this.activeAxis));
|
||||
var currentPosition = Entities.getEntityProperties(entityID).position;
|
||||
//print("currentPosition " + JSON.stringify(currentPosition));
|
||||
if (this.startingPosition == null) {
|
||||
this.startingPosition = currentPosition;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 934 B After Width: | Height: | Size: 934 B |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 919 B |
Binary file not shown.
|
Before Width: | Height: | Size: 944 B |
Binary file not shown.
|
Before Width: | Height: | Size: 934 B |
|
Before Width: | Height: | Size: 6 KiB After Width: | Height: | Size: 6 KiB |
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 628 B After Width: | Height: | Size: 628 B |
Binary file not shown.
|
Before Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 928 B After Width: | Height: | Size: 928 B |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,21 +0,0 @@
|
|||
.pragma library
|
||||
|
||||
// FIXME(loicm) It would be better to have these functions available in a global
|
||||
// set of common native C++ functions.
|
||||
|
||||
function clamp(x, min, max) {
|
||||
return Math.max(min, Math.min(x, max));
|
||||
}
|
||||
|
||||
function lerp(x, a, b) {
|
||||
return ((1.0 - x) * a) + (x * b);
|
||||
}
|
||||
|
||||
// Linearly project a value x from [xmin, xmax] into [ymin, ymax]
|
||||
function projectValue(x, xmin, xmax, ymin, ymax) {
|
||||
return ((x - xmin) * ymax - (x - xmax) * ymin) / (xmax - xmin)
|
||||
}
|
||||
|
||||
function clampAndProject(x, xmin, xmax, ymin, ymax) {
|
||||
return projectValue(clamp(x, xmin, xmax), xmin, xmax, ymin, ymax)
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 641 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
File diff suppressed because it is too large
Load diff
|
|
@ -159,37 +159,6 @@
|
|||
<input onchange="setDynamicBrush(this)" type="checkbox" id="dynamicValue"></input>
|
||||
<label for="dynamicValue">Use Dynamic Brightness</label>
|
||||
</div>
|
||||
<!--<div>
|
||||
<div style="float: left; margin-right: 20px">
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setAnimatedBrush(this)" animationType="animatedRotationBrush" type="checkbox" id="yawRotationBrush"></input>
|
||||
<label for="yawRotationBrush">Use Yaw Rotation</label>
|
||||
</div>
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setAnimatedBrush(this)" animationType="animatedRotationBrush" type="checkbox" id="pitchRotationBrush"></input>
|
||||
<label for="pitchRotationBrush">Use Pitch Rotation</label>
|
||||
</div>
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setAnimatedBrush(this)" animationType="animatedRotationBrush" type="checkbox" id="rollRotationBrush"></input>
|
||||
<label for="rollRotationBrush">Use Roll Rotation</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setAnimatedBrush(this)" animationType="animatedTranslationBrush" type="checkbox" id="xTranslationBrush"></input>
|
||||
<label for="xTranslationBrush">Use Translation x</label>
|
||||
</div>
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setAnimatedBrush(this)" animationType="animatedTranslationBrush" type="checkbox" id="yTranslationBrush"></input>
|
||||
<label for="yTranslationBrush">Use Translation y</label>
|
||||
</div>
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setAnimatedBrush(this)" animationType="animatedTranslationBrush" 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/square.png" onclick="changePaintBrush(0)">
|
||||
|
|
@ -213,16 +182,16 @@
|
|||
<div class="brushLabel">Soft</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/dupuiz.png" onclick="changePaintBrush(3)">
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/dupuiz.png" onclick="changePaintBrush(3)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/dupuiz.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/dupuiz.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Tri</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/basic.png" onclick="changePaintBrush(4)">
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/basic.png" onclick="changePaintBrush(4)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/basic.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/basic.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Basic</div>
|
||||
</button>
|
||||
|
|
@ -234,16 +203,16 @@
|
|||
<div class="brushLabel">Oil</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/gouache.png" onclick="changePaintBrush(6)">
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gouache.png" onclick="changePaintBrush(6)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/gouache.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/gouache.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Gouache A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/gouache.png" onclick="changePaintBrush(7)">
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gouache.png" onclick="changePaintBrush(7)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256stretched/gouache.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/gouacheB.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Gouache B</div>
|
||||
</button>
|
||||
|
|
@ -255,37 +224,37 @@
|
|||
<div class="brushLabel">Koons</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/sponge.png" onclick="changePaintBrush(9)">
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/sponge.png" onclick="changePaintBrush(9)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/sponge.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/sponge.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Sponge A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/sponge.png" onclick="changePaintBrush(10)">
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/sponge.png" onclick="changePaintBrush(10)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256stretched/sponge.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/spongeB.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Sponge B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/graphite.png" onclick="changePaintBrush(11)">
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/graphite.png" onclick="changePaintBrush(11)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/graphite.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/graphite.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Graphite</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/bristle.png" onclick="changePaintBrush(12)">
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/bristle.png" onclick="changePaintBrush(12)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/bristle.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/bristle.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Bristle</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/spat-fine.png" onclick="changePaintBrush(13)">
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/spat-fine.png" onclick="changePaintBrush(13)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/spat-fine.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/spat-fine.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Spat</div>
|
||||
</button>
|
||||
|
|
@ -304,52 +273,51 @@
|
|||
<div class="brushLabel">Gradient B</div>
|
||||
</button>
|
||||
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gimickkywhite/dot.png" onclick="changePaintBrush(16)">
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/dot.png" onclick="changePaintBrush(16)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gimickkywhite/dot.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/dot.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Dot</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gimickkywhite/polka.png" onclick="changePaintBrush(17)">
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/polka.png" onclick="changePaintBrush(17)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gimickkywhite/polka.png" class="BrushIcon"/></div>
|
||||
<div imageSrc="../content/brushes/polka.png" class="BrushIcon"/></div>
|
||||
</div>
|
||||
<div class="brushLabel">Polka</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gimickkywhite/heart.png" onclick="changePaintBrush(18)">
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/heart.png" onclick="changePaintBrush(18)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gimickkywhite/heart.png" class="BrushIcon"/></div>
|
||||
<div imageSrc="../content/brushes/heart.png" class="BrushIcon"/></div>
|
||||
</div>
|
||||
<div class="brushLabel">Heart</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gimickkywhite/hearts.png" onclick="changePaintBrush(19)">
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/hearts.png" onclick="changePaintBrush(19)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gimickkywhite/hearts.png" class="BrushIcon"/></div>
|
||||
<div imageSrc="../content/brushes/hearts.png" class="BrushIcon"/></div>
|
||||
</div>
|
||||
<div class="brushLabel">Hearts</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gimickkywhite/flowers2.png" onclick="changePaintBrush(20)">
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/flowers2.png" onclick="changePaintBrush(20)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gimickkywhite/flowers2.png" class="BrushIcon"/></div>
|
||||
<div imageSrc="../content/brushes/flowers2.png" class="BrushIcon"/></div>
|
||||
</div>
|
||||
<div class="brushLabel">Flowers</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gimickkywhite/leaves.png" onclick="changePaintBrush(21)">
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/leaves.png" onclick="changePaintBrush(21)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gimickkywhite/leaves.png" class="BrushIcon"/></div>
|
||||
<div imageSrc="../content/brushes/leaves.png" class="BrushIcon"/></div>
|
||||
</div>
|
||||
<div class="brushLabel">Leaves</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gimickkywhite/snowflakes2.png" onclick="changePaintBrush(22)">
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/snowflakes2.png" onclick="changePaintBrush(22)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gimickkywhite/snowflakes2.png" class="BrushIcon"/></div>
|
||||
<div imageSrc="../content/brushes/snowflakes2.png" class="BrushIcon"/></div>
|
||||
</div>
|
||||
<div class="brushLabel">Snowflakes</div>
|
||||
</button>
|
||||
|
|
@ -361,407 +329,31 @@
|
|||
<div class="brushLabel">Stars</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/breakfast.png" onclick="changePaintBrush(24)">
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/breakfast.png" onclick="changePaintBrush(24)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/colored/breakfast.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/breakfast.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Breakfast</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/newton.png" onclick="changePaintBrush(25)">
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/newton.png" onclick="changePaintBrush(25)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/colored/newton.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/newton.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Newton</div>
|
||||
</button>
|
||||
|
||||
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/softy.png" onclick="changePaintBrush(26)">
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/softy.png" onclick="changePaintBrush(26)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/colored/softy.png" class="BrushIcon"></div>
|
||||
<div imageSrc="../content/brushes/softy.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Softbow</div>
|
||||
</button>
|
||||
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/256x256/basic.png" onclick="changePaintBrush(1)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/basic.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">basic B</div>
|
||||
</button>-->
|
||||
|
||||
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/256x256/bristle.png" onclick="changePaintBrush(3)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/bristle.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">bristle B</div>
|
||||
</button>-->
|
||||
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/256x256/dupuiz.png" onclick="changePaintBrush(5)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/dupuiz.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">dupuiz B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/256x256/gouache.png" onclick="changePaintBrush(7)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/gouache.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gouache B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/256x256/graphite.png" onclick="changePaintBrush(9)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/graphite.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">graphite B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/256x256/spat-fine.png" onclick="changePaintBrush(11)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/spat-fine.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/256x256/spat-medium.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/256x256/spat-medium.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">spat-medium B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/256x256/sponge.png" onclick="changePaintBrush(15)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256/sponge.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/256x256stretched/basic.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/256x256stretched/basic.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/256x256stretched/bristle.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/256x256stretched/bristle.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">bristle B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/gouache.png" onclick="changePaintBrush(21)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/256x256stretched/gouache.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/256x256stretched/sponge.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">sponge A</div>
|
||||
</button>-->
|
||||
|
||||
|
||||
<!--<button class="brushButton" brushType="stretch" id="content/brushes/basic.png" onclick="changePaintBrush(24)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/basic.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">basic A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/basic.png" onclick="changePaintBrush(25)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/basic.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">basic B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/bristle.png" onclick="changePaintBrush(26)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/bristle.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">bristle A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/bristle.png" onclick="changePaintBrush(27)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/bristle.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">bristle B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gouache.png" onclick="changePaintBrush(28)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gouache.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gouache A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gouache.png" onclick="changePaintBrush(29)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gouache.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gouache B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gradient.png" onclick="changePaintBrush(30)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gradient.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gradient A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gradient.png" onclick="changePaintBrush(31)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gradient.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gradient B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" brushType="stretch" id="content/brushes/gradient3.png" onclick="changePaintBrush(34)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gradient3.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gradient3 A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gradient3.png" onclick="changePaintBrush(35)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gradient3.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gradient3 B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/koons.png" onclick="changePaintBrush(37)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/koons.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">koons B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/oil.png" onclick="changePaintBrush(39)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/oil.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">oil B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush1.png" onclick="changePaintBrush(40)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/paintbrush1.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush1 A</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush2.png" onclick="changePaintBrush(42)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/paintbrush2.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush2 A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush2.png" onclick="changePaintBrush(43)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/paintbrush2.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush2 B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush3.png" onclick="changePaintBrush(44)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/paintbrush3.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush3 A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush3.png" onclick="changePaintBrush(45)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/paintbrush3.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush3 B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush4.png" onclick="changePaintBrush(46)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/paintbrush4.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush4 A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush4.png" onclick="changePaintBrush(47)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/paintbrush4.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush4 B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush5.png" onclick="changePaintBrush(48)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/paintbrush5.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush5 A</div>
|
||||
</button>
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush5.png" onclick="changePaintBrush(49)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/paintbrush5.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush5 B</div>
|
||||
</button>-->
|
||||
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush6.png" onclick="changePaintBrush(51)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/paintbrush6.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush6 B</div>
|
||||
</button>
|
||||
|
||||
<!--<button class="brushButton" brushType="stretch" id="content/brushes/pastel.png" onclick="changePaintBrush(52)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/pastel.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">pastel A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/pastel.png" onclick="changePaintBrush(53)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/pastel.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">pastel B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/soft.png" onclick="changePaintBrush(55)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/soft.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">soft B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/sponge.png" onclick="changePaintBrush(56)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/sponge.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">sponge A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/sponge.png" onclick="changePaintBrush(57)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/sponge.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">sponge B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" brushType="repeat" id="content/brushes/square.png" onclick="changePaintBrush(59)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/square.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">square B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/breakfast.png" onclick="changePaintBrush(61)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/colored/breakfast.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/colored/chique.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/colored/chique.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/colored/hawaii.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/colored/hawaii.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">hawaii B</div>
|
||||
</button>-->
|
||||
|
||||
|
||||
|
||||
<!--<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/newton.png" onclick="changePaintBrush(67)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/colored/newton.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/colored/pastels.png" class="BrushIcon"></div>
|
||||
</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">
|
||||
<div imageSrc="../content/brushes/colored/pastels.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">pastels B</div>
|
||||
</button>-->
|
||||
|
||||
<!--<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/softy.png" onclick="changePaintBrush(71)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/colored/softy.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">softy B</div>
|
||||
</button>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var currentBrush = 0;
|
||||
setStrokeColor({red: 255, green: 0, blue: 0});
|
||||
var EventBridge = parent.EventBridge;
|
||||
|
||||
function changeLineWidthRange(e) {
|
||||
|
|
@ -858,7 +450,7 @@
|
|||
}
|
||||
|
||||
function switchAnimationBrushEnabledStatus(checkbox) {
|
||||
var isAnyDynamicChecked = false;
|
||||
var isAnyDynamicChecked = false;
|
||||
$(".dynamicBrush").each(function( index ) {
|
||||
isAnyDynamicChecked |= $(this).find("input[type=checkbox]")[0].checked;
|
||||
});
|
||||
|
|
@ -921,8 +513,13 @@
|
|||
});
|
||||
|
||||
if (!$(this).parent().attr("colored")) {
|
||||
$(this).find('div').first().css("-webkit-mask-box-image", "url(" + $(this).find('div').first().attr('imageSrc') + ")");
|
||||
$(this).find('div').first().css("background-color", "rgb(" + strokeColor.red + ", " + strokeColor.green + ", " + strokeColor.blue + ")");
|
||||
|
||||
$(this).find('div').first().css("-webkit-mask-box-image",
|
||||
"url(" + $(this).find('div').first().attr('imageSrc') + ")");
|
||||
|
||||
$(this).find('div').first().css("background-color",
|
||||
"rgb(" + strokeColor.red + ", " + strokeColor.green + ", " + strokeColor.blue + ")");
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,9 +54,8 @@
|
|||
};
|
||||
parent.postMessage(JSON.stringify(chooseHandEvent), "*");
|
||||
}
|
||||
//window.addEventListener("message", restoreCurrentDrawingHand, false);
|
||||
restoreCurrentDrawingHand(JSON.parse(decodeURIComponent(window.parent.location.search).substring(1)));
|
||||
|
||||
restoreCurrentDrawingHand(JSON.parse(decodeURIComponent(window.parent.location.search).substring(1)));
|
||||
function restoreCurrentDrawingHand(handData) {
|
||||
if (handData.currentDrawingHand) {
|
||||
chooseHand(0);
|
||||
|
|
@ -64,6 +63,4 @@
|
|||
chooseHand(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -8,23 +8,32 @@
|
|||
#colorPicker {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.colorPickerCell {
|
||||
border: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#colorPickerTable {
|
||||
margin-top: 24px;
|
||||
border-collapse:collapse
|
||||
}
|
||||
|
||||
#customColorPicker {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.colorPickerCell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#selectedOverlay {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: white;
|
||||
background-color: rgba(16, 128, 184, 0.3);
|
||||
top:0;
|
||||
left:0;
|
||||
|
|
@ -38,6 +47,7 @@
|
|||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="colorpicker"></div>
|
||||
<div id="colorPickerTable"></div>
|
||||
<div id="lastPickedColors"></div>
|
||||
|
|
@ -45,6 +55,7 @@
|
|||
<script src="../../html/js/colpick.js">
|
||||
require('jquery-colpick');
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$('#colorpicker').colpick({
|
||||
flat:true,
|
||||
|
|
@ -78,7 +89,9 @@
|
|||
for (var i = 0; i < startingColors.length; i++) {
|
||||
var colorCell = document.createElement("div");
|
||||
//colorCell.type = "button";
|
||||
colorCell.style.backgroundColor = "hsl(" + startingColors[i].hue + ",100%," + ((80-(80*j/(ROWS-1))) + 10) + "%)";
|
||||
colorCell.style.backgroundColor = "hsl(" + startingColors[i].hue
|
||||
+ ",100%," + ((80-(80*j/(ROWS-1))) + 10) + "%)";
|
||||
|
||||
colorCell.className = "colorPickerCell";
|
||||
colorCell.onclick = function() {
|
||||
updateColorFromTable(this, "table")
|
||||
|
|
@ -125,12 +138,13 @@
|
|||
}
|
||||
|
||||
function selectButton(button) {
|
||||
if (lastSelectedButton != null) {
|
||||
if (lastSelectedButton != null) {
|
||||
lastSelectedButton.removeChild(document.getElementById("selectedOverlay"));
|
||||
}
|
||||
if (button) {
|
||||
var selectedOverlay = document.createElement("div");
|
||||
selectedOverlay.id = "selectedOverlay";
|
||||
selectedOverlay.id = "selectedOverlay";
|
||||
selectedOverlay.innerHTML = "✔";
|
||||
button.appendChild(selectedOverlay);
|
||||
lastSelectedButton = button;
|
||||
} else {
|
||||
|
|
@ -165,15 +179,18 @@
|
|||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (lastPickedColors.length + 1 > COLUMNS) {
|
||||
lastPickedColorsContainer.removeChild(lastPickedColors[lastPickedColors.length-1]);
|
||||
}
|
||||
|
||||
var colorCell = document.createElement("div");
|
||||
colorCell.style.backgroundColor = "rgb(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2] + ")";
|
||||
colorCell.className = "colorPickerCell";
|
||||
colorCell.id = "user(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2] + ")";
|
||||
colorCell.onclick = function() { updateColorFromTable(this, "user") };
|
||||
lastPickedColorsContainer.insertBefore(colorCell, lastPickedColorsContainer.firstChild);
|
||||
|
||||
if (notify) {
|
||||
var addCustomColorEvent = {
|
||||
"type" : "addCustomColor",
|
||||
|
|
@ -188,7 +205,6 @@
|
|||
|
||||
restoreLastColor(JSON.parse(decodeURIComponent(window.parent.location.search).substring(1)));
|
||||
function restoreLastColor(palleteData) {
|
||||
//var palleteData = JSON.parse(event.data);
|
||||
if ("customColors" in palleteData) {
|
||||
var customColors = palleteData.customColors;
|
||||
for (var i = 0; i < customColors.length; i++) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue