-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
199 lines (150 loc) · 8.79 KB
/
index.html
File metadata and controls
199 lines (150 loc) · 8.79 KB
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0055)http://homes.cs.washington.edu/~mdixon/research/prefab/ -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Prefab | Pixel-Based Reverse Engineering Toolkit</title>
<meta name="keywords" content="prefab, pixels, toolkit, reverse engineering, interaction, user, C#, tree, layout">
<meta name="robots" content="index,follow">
<!-- link rel="shortcut icon" href="http://prefab.org/favicon.ico" -->
<link rel="stylesheet" type="text/css" href="./images/prefab.css">
<style type="text/css"></style><style type="text/css"></style><style id="style-1-cropbar-clipper">/* Copyright 2014 Evernote Corporation. All rights reserved. */
.en-markup-crop-options {
top: 18px !important;
left: 50% !important;
margin-left: -100px !important;
width: 200px !important;
border: 2px rgba(255,255,255,.38) solid !important;
border-radius: 4px !important;
}
.en-markup-crop-options div div:first-of-type {
margin-left: 0px !important;
}
</style></head>
<body>
<!-- include header -->
<div id="header">
<div id="header">
<table class="top" cellspacing="0" cellpadding="0">
<tbody><tr><td class="top"><div class="topleader"> </div></td>
<td id="toplogo" class="top"><a href="index.html"><img src="./images/prefab-logo.png" width="170px" style="margin-top:-12px" border="0" alt="Prefab: The Pixel-Based Reverse Engineering Toolkit"></a></td>
<td id="toplinks" class="top" width="100%">
<div class="top">
<a href="http://prefab.github.io" title="Go to the home page">Home</a> |
<!-- <a href="./gallery.html" title="View the gallery of featured Prefab applications">Examples</a> | -->
<a href="papers.html" title="View Prefab publications">Papers</a> |
<a href="videos.html" title="View prefab videos">Videos</a>
</div>
</td>
<td class="top"><div class="topleader"> </div></td>
</tr></tbody></table>
</div>
<div id="subtitle" style="margin-top:1px">
Pixel-Based Reverse Engineering
</div>
<!-- <div id="search">
<form id="searchform" method="get" class="inline" action="http://google.com/search">
<input id="searchbox" type="text" name="q" size="30" value="">
<input class="searchcmd" type="submit" name="btnG" value="Search">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<input type="hidden" name="domains" value="prefuse.org">
<input type="hidden" name="sitesearch" value="prefuse.org">
</form>
</div> -->
<div></div>
<div id="content">
<div class="navwrap"><div id="navbar">
<h6 class="spaced">Papers</h6>
<span><a class="download" href="/publications/mdixon-prefab-chi2010-final.pdf">Original Prefab</a></span>
<span><a class="download" href="/publications/mdixon-content-hierarchy-chi2011-final.pdf">Content and Hierarchy</a></span>
<span><a class="download" href="/publications/mdixon-general-purpose-target-chi2012-final.pdf">Target-Aware Pointing</a></span>
<span><a class="download" href="/publications/mdixon-chi2014-sliding-states-styles.pdf">Sliding Widgets</a></span>
<span><a class="download" href="/publications/uist2014.pdf">Toolkit</a></span>
<h6 class="spaced">Videos</h6>
<a class="minigallery" href="http://www.youtube.com/watch?v=lju6IIteg9Q&feature=player_embedded">
<img class="gallery" src="./images/phosphor.png" width="140px" border="0"><br>
<b>Original Prefab</b>
</a>
<a class="minigallery" href="http://www.youtube.com/watch?v=w4S5ZtnaUKE&feature=player_embedded">
<img class="gallery" src="./images/uicustom.png" width="140px" border="0"><br>
<b>Content and Hierarchy</b>
</a>
<a class="minigallery" href="http://www.youtube.com/watch?v=46EopD_2K_4&feature=player_embedded">
<img class="gallery" src="./images/bubble.png" width="140px" style="margin-top:-3px" border="0"><br>
<b>Target-Aware Pointing</b>
</a>
<a class="minigallery" href="http://www.youtube.com/watch?v=8LMSYI4i7wk">
<img class="gallery" src="./images/chi2014-prefab.png" height="60px" width="140px" style="margin-top:0px" border="0"><br>
<b>Sliding Widgets</b>
</a>
<!-- <h6 class="spaced">GitHub Repository</h6>
<a class="download" href="https://github.com/prefuse/Prefuse">
<span class="dl-link">GitHub Page</span><br>
</a>
<h6 class="spaced"><a href="http://prefuse.org/download/">Download</a></h6>
<a class="download" href="http://prdownloads.sourceforge.net/prefuse/prefuse-beta-20071021.zip?download">
<span class="dl-link">Prefab beta</span><br>
release 2012.10.21<br>
source zip (.zip) 4.1mb
</a>
-->
<br clear="all">
<!-- <h6 class="spaced"><a href="http://prefuse.org/gallery/">Examples</a></h6>
<a class="minigallery" href="http://www.youtube.com/watch?v=46EopD_2K_4&feature=player_embedded">
<img class="gallery" src="./prefab_files/bubble.png" width="140px" style="margin-top:-3px" border="0"><br>
<b>The Bubble Cursor</b>
</a>
<a class="minigallery" href="http://www.cs.toronto.edu/~ccollins/research/docuburst.html">
<img class="gallery" src="./prefab_files/phosphor.png" width="140px" border="0"><br>
<b>Phosphor</b>
</a>
<a class="minigallery" href="http://www.studianalyse.de.vu/">
<img class="gallery" src="./prefab_files/translation.png" width="140px" border="0"><br>
<b>UI Translation</b>
</a>
<a class="minigallery" href="http://www.cs.umd.edu/hcil/socialaction/">
<img class="gallery" src="./prefab_files/uicustom.png" width="140px" border="0"><br>
<b>UI Customization</b>
</a>
<a class="minigallery" href="http://graphics.stanford.edu/papers/flow_map_layout">
<img class="gallery" src="./prefab_files/stencils.png" width="140px" border="0"><br>
<b>In-Context Help</b>
</a>
<br clear="all"><br>-->
</div></div>
<!-- page content -->
<div id="article-column">
<div id="article">
<p><img src="./images/banner.png" height="60px" alt="prefuse visualization collage">
</p>
<h1 class="pagetitle">Prefab: The Pixel-Based Reverse Engineering Toolkit</h1>
<p>Prefab is a system for reverse engineering the interface structure of graphical interfaces from their pixels. In other words, Prefab looks at the pixels of an existing interface and returns a tree structure, like a web-page's Document Object Model, that you can then use to modify the original interface in some way. <strong>Prefab</strong> works from example images of widgets; it decomposes those widgets into small parts, and exactly matches those parts in screenshots of an interface. Prefab does this many times per second to help you modify interfaces in real time. Imagine if you could modify any graphical interface? With Prefab, you can explore this question!
<!-- <p> Prefab development is opened to the community and the source is available at <a href="https://github.com/prefab">GitHub</a>. -->
</p><hr style="border: none; border-bottom: 1px solid #dddddd">
<p>Prefab helps you implement your ideas in the <em>real world</em>. It provides tools for reverse engineering the appearance of widgets and interpreting the semantics about interfaces. Prefab is written in C# and runs on windows, but it can reverse engineer interfaces from any OS. Check out our <a href="http://videos.html">videos</a> where Prefab interprets the pixels of a remote desktop application to reverse engineer Mac OS X interfaces.
</p><p>The <a href="videos.html">demonstration videos</a>
provide numerous examples of the types of applications that can be built with the Prefab toolkit.</p>
<p>Prefab code is available on <a href="https://github.com/prefab">GitHub</a>. Build something cool!</p>
<!-- <h2>releases</h2>
<p><strong>2012.06.09:</strong> <a href="http://prdownloads.sourceforge.net/prefuse/prefuse-beta-20071021.zip?download">Prefab-alpha <small>2012.06.10</small></a> released. See the <a href="http://sourceforge.net/project/shownotes.php?release_id=548630&group_id=98962">release notes</a> for more.</p>
-->
</div>
</div>
<br clear="all"><br>
</div>
<!--include footer-->
<div id="footer">
<table class="bottom" width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td id="badges" class="bottom"><div class="bottom">
</div></td>
<td class="bottom"><div class="bottom">
This page was last modified on January 28, 2014.
</div></td>
<td id="" class="bottom">
<a href="http://dub.washington.edu/" title="Created at the DUB Group at the University of Washington">
<img src="./images/dub-logo.png" height="53" style="margin-top:-13px; margin-right:-50px" border="0" alt="Created at the University of Washington DUB Group"></img></a>
</td>
</tr></tbody></table>
<br>
</div>
</div>
</body></html>