-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.xhtml
101 lines (89 loc) · 4.86 KB
/
index.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>filtr</title>
<link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="styles/editor.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="styles/library.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/jquery.event.drag.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/library.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad()
{
filters = [
{"name": "Gaussian Blur", "icon": "gaussian-blur.svg", "inputs": ["in"], "displayName": "feGaussianBlur", "parameters": {"stdDeviation": {"type": "number", "min": 0, "max": 20, "default": 5, "name": "Amount"}}},
{"name": "Blend", "icon": "blend.svg", "inputs": ["in", "in2"], "displayName": "feBlend", "parameters": {"mode": {"type": "choice", "choices": ["normal", "multiply", "screen", "darken", "lighten"], "default": "normal", "name": "Mode"}}},
{"name": "Turbulence", "icon": "turbulence.svg", "inputs": [], "displayName": "feTurbulence",
"parameters": {
"type": {"type": "choice", "choices": ["fractalNoise", "turbulence"], "default": "fractalNoise", "name": "Type"},
"baseFrequency": {"type": "number", "min": 0.01, "max": 1.5, "default": 0.1, "name": "Frequency"},
"numOctaves": {"type": "integer", "min": 1, "max": 10, "default": 2, "name": "Octaves"}
}
},
{"name": "Displacement Map", "icon": "displacement.svg", "inputs": ["in", "in2"], "displayName": "feDisplacementMap",
"parameters": {
"xChannelSelector": {"type": "choice", "choices": ["R", "G", "B", "A"], "default": "R", "name": "X Channel"},
"yChannelSelector": {"type": "choice", "choices": ["R", "G", "B", "A"], "default": "G", "name": "Y Channel"},
"scale": {"type": "number", "min": 0.1, "max": 100, "default": 20, "name": "Scale"}
}
},
{"name": "Composite", "icon": "composite.svg", "inputs": ["in", "in2"], "displayName": "feComposite",
"parameters": {
"operator": {"type": "choice", "choices": ["over", "in", "out", "atop", "xor"], "default": "over", "name": "Operator"}
}
},
{"name": "Morphology", "icon": "gaussian-blur.svg", "inputs": ["in"], "displayName": "feMorphology",
"parameters": {
"radius": {"type": "number", "min": 1, "max": 20, "default": 3, "name": "Radius"},
"operator": {"type": "choice", "choices": ["erode", "dilate"], "default": "erode", "name": "Operator"}
}
},
{"name": "Flood", "icon": "gaussian-blur.svg", "inputs": [], "displayName": "feFlood",
"parameters": {
"flood-opacity": {"type": "number", "min": 0, "max": 1, "default": 1, "name": "Opacity"},
"flood-color": {"type": "color", "default": "rgb(255,0,0)", "name": "Color"}
}
}
];
loadFilters(filters);
setupMasterInput();
updateFilter();
$("#previewContainer").drag("start", function() {
$(this).appendTo(this.parentNode);
}).drag(function(ev, dd) {
$(this).css({
top: Math.min(Math.max(dd.offsetY, 20), $("#body").height() - $(this).height() - 20),
left: Math.min(Math.max(dd.offsetX, 20), $("#body").width() - $(this).width())
});
});
}
function updateSelectedPreview()
{
var newImageURL = "images/" + $("#previewChooser").get(0).value;
$("#previewInnerImage").get(0).setAttributeNS("http://www.w3.org/1999/xlink", "href", newImageURL);
}
</script>
</head>
<body id="body" onload="onLoad()">
<div id="libraryContainer">
<div class="heading">filter library</div>
<span id="dragMessageContainer"><div id="dragMessage">Drag Filter to Editor<div id="dragArrow"></div><div id="dragArrowHead"></div></div></span>
<ul id="libraryList" />
</div>
<div id="editorContainer">
<div class="heading">editor</div>
<div id="editor" />
</div>
<div id="previewContainer">
<select id="previewChooser" onchange="updateSelectedPreview()">
<option value="butterfly.svg">Butterfly</option>
<option value="tiger.svg">Tiger</option>
</select>
<svg id="previewImage" width="320px" height="320px" xmlns="http://www.w3.org/2000/svg">
<defs id="defs">
</defs>
<image id="previewInnerImage" x="0" y="0" width="320px" height="320px" xlink:href="images/butterfly.svg" filter="url(#filt)"/>
</svg>
</div>
</body>
</html>