-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
252 lines (217 loc) · 13.4 KB
/
index.html
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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="en" id="Website">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Openframe</title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900' rel='stylesheet' type='text/css'>
<link rel='shortcut icon' type='image/x-icon' href='https://openframeproject.github.io/img/favicon.ico' />
<link rel="stylesheet" type="text/css" href="https://openframeproject.github.io/vendor/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://openframeproject.github.io/css/landing-manual.css">
<!--<link rel="stylesheet" type="text/css" href="/css/landing-manual.css">-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://openframe.io/stream">Artwork stream</a></li>
<li><a href="https://docs.openframe.io/">Documentation</a></li>
<li><a href="https://openframe.discourse.group/">Forum</a></li>
<li><a href="https://github.com/OpenFrameProject">Contribute</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<div class="container-wide">
<div class="row page-header splash-header">
<div class="col-md-12">
<img class="logo" src="https://openframeproject.github.io/img/OF_Logo2.svg" />
<h3 class="openframe">
<span>
<strong>openframe</strong>
<span class="alpha hidden-xs">alpha 0.4</span>
</span>
is a platform for displaying digital art
</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="preview">
<img class="hidden-xs" src="https://openframeproject.github.io/img/topbox.jpg" />
<img class="visible-xs"src="https://openframeproject.github.io/img/topbox-mobile.jpg" />
</div>
</div>
</div>
</div>
<!-- END Nav, Page Heading, Preview Image -->
<!-- Intro, Feature List -->
<div class="container-wide" style="padding-top: 0px">
<div class="container">
<div class="row">
<div class="col-sm-12">
<section class="intro">
<p>
Openframe is an <strong>open source</strong> platform for artists, curators and art enthusiasts to share, discover and display digital art.
</p>
<p>
Openframe is <strong>free</strong>. Anyone can set up a frame using an HDMI display and a Raspberry Pi.
</p>
<p>
Openframe is a <strong>collaborative</strong>, on-going project. The platform consists of an API, a web app, and software for the RPi that currently supports images, video, web-based artwork, and shaders. Our goal is to create a system that is accessible and extensible, allowing artists to easily add support for new digital formats.
</p>
</section>
<div class="get-started">
<a class="btn btn-default btn-get-started" href="https://docs.openframe.io/#getting-started">Setup a frame</a>
</div>
<div class="get-started">
<a href="https://openframe.io/stream">Visit the web app</a>
</div>
<div class="updates-twitter">
Follow us on
<a class="follow" href="https://twitter.com/openframe_"><img src="https://openframeproject.github.io/img/twitter_black.svg">Twitter</a> for updates
</div>
<!-- <ul class='features'>
<li class="done">Display content from the internet, or your own</li>
<li class="done">Publish your artwork to the public stream</li>
<li class="done">Browse, display and save artwork made by the community</li>
<li class="not-done">Tune in to an art station, or curate your own</li>
<li class="not-done">Tune in to a live performance, or stream your own</li>
</ul>
<ul class="features more">
<li class="see-more"><a href="#">See more</a></li>
</ul> -->
<!-- <p class="fine-print"><sup>*</sup>Currently supporting images (jpeg and png's). Other types of content coming soon (websites, shaders, Processing and Openframeworks sketches, etc.).</p> -->
</div>
</div>
</div>
</div>
<!-- END Intro, Feature List -->
<!-- Step-by-Step -->
<!-- <div class="container-wide setup" >
<div class="row">
<div class="col-sm-12">
<h4><strong>For everyone.</strong> Free and easy to set up.</h4>
</div>
</div>
<div class="row row-step">
<div class="col-sm-12">
<img class="setup-account" src="http://openframeproject.github.io/img/Account.svg" />
<h5>1. Create an account.</h5>
<p>For now, <a href="mailto:hello@openframe.io?subject=Openframe Account Request">request one</a>. Soon you'll be able to create an account without a request.</p>
</div>
</div>
<div class="row row-step">
<div class="col-sm-12">
<img class="setup-display" src="http://openframeproject.github.io/img/GetDisplay.svg" />
<h5>2. Get a display.</h5>
<p>Any display works — a new one, or that old one sitting in your parent's basement.</p>
</div>
</div>
<div class="row row-step">
<div class="col-sm-12">
<img class="setup-pi" src="http://openframeproject.github.io/img/RPi.svg" />
<h5>3. Get a Raspberry Pi.</h5>
<p>Get one from <a href="https://www.sparkfun.com/search/results?term=raspberry+pi">here</a> or <a href="http://www.adafruit.com/products/2358">there</a>. Follow these <a href="https://github.com/OpenFrameProject/OpenFrame-NodeClient/wiki/Setup-Instructions">instructions</a> to set up the application on the Pi.</p>
</div>
</div>
<div class="row row-step">
<div class="col-sm-12">
<img class="setup-display" src="http://openframeproject.github.io/img/DisplayArt.svg" />
<h5>4. Display art.</h5>
<p>Go to openframe.io on your phone, log in and send art to your frame.</p>
</div>
</div>
</div> -->
<!-- END Step-by-Step -->
<!-- For Whom? -->
<div class="container-wide for-whom">
<!-- <div class="container-wide setup" > -->
<div class="container-mid">
<div class="row">
<div class="col-sm-4">
<h4>For artists.</h4>
<h5>Don't be limited by the platform.</h5>
<p>Write an extension that supports your artwork, whatever it may be.</p>
</div>
<div class="col-sm-4">
<h4>For galleries and museums.</h4>
<h5>Manage your digital art displays.</h5>
<p>Contact us at <a href="mailto:hello@openframe.io">hello@openframe.io</a>. We'd like to learn more about how Openframe can work for you.</p>
</div>
<div class="col-sm-4">
<h4>For developers.</h4>
<h5>Contribute on <a href="https://github.com/OpenFrameProject">Github</a>.</h5>
<p>Send us an email at <a href="mailto:hello@openframe.io">hello@openframe.io</a> if you have ideas on how to improve or expand Openframe.</p>
</div>
</div>
</div>
</div>
<!-- END For Whom? -->
<div class="container-wide q-a" >
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4 class="footer-heading"><strong>Questions</strong> and answers.</h4>
<section>
<h5>Why this project?</h5>
<!-- <p>A while back we started seeing a number of commercial projects that aimed to bring artwork from the internet into our homes. We'd been thinking along these lines too, but were interested in seeing what could happen if we put the power fully in the hands of the artists, programmers, and art viewers.</p>
-->
<p>In the same way painters stretch their own canvases, digital media artists need to have full control over their tools. Openframe promotes experimentation with this new medium — it allows artists to explore new artwork formats and new ways to reach an audience.</p>
<p>We want to build an open source platform that can be modified and extended to support new media types and sensor-based artwork, and that can be easily set up using a range of inexpensive hardware (Raspberry Pi, Odroid, etc.). With Openframe, we want to create a conduit through which an audience can experience and appreciate art in new ways, and which allows artists to give new life to their work.</p>
</section>
<section>
<h5>Where can I find help?</h5>
<p>First, have a look at our <a href="https://docs.openframe.io/">documentation</a> and check if you might find a solution to your problem on the <a href="https://openframe.discourse.group/">forum</a>.</p>
<p>In addition, it might be worth checking if your issue has been described in the <a href="https://github.com/OpenframeProject/Openframe/issues">Openframe for Raspberry Pi</a> and <a href="https://github.com/OpenframeProject/Openframe-WebApp/issues">Openframe Web App</a> issue trackers.</p>
</section>
<section>
<h5>What artwork can I display?</h5>
<p>The platform uses 'format' plugins which describe how to run artworks. At present, we'll be releasing plugins for images, video, websites, and shaders, but artists are free to create extensions which can run other types of artwork.</p>
<p>No content is stored on the Openframe server. It's up to you to make sure you have the permission of the content owner to display the work.</p>
</section>
<section>
<h5>The installation seems complicated, I just want to buy a frame.</h5>
<p>Openframe is not a product. However, there are an ever growing number of existing commercial products that you can buy, plug to the wall, and <em>voilà</em> — they work. Check out <a href="https://www.electricobjects.com/" target="_blank">Electric Objects</a> or <a href="https://frm.fm/" target="_blank">Framed</a>.</p>
</section>
</div>
</div>
</div>
</div>
<div class="container-wide footer" >
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4 class="footer-contact-us">More questions? Contact us at <a href="mailto:hello@openframe.io">hello@openframe.io</a></h4>
<h6><a href="http://jonathanwohl.com/">Jon Wohl</a> and <a href="http://ishback.com/">Ishac Bertran</a> started Openframe in spring 2015.</h6>
<div class="icons-footer">
<a href="https://twitter.com/openframe_"><img class="twitter-footer" src="http://openframeproject.github.io/img/twitter_white.svg"></a>
<a href="https://github.com/OpenframeProject"><img class="github-footer" src="http://openframeproject.github.io/img/github.svg"></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://openframeproject.github.io/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-65575814-1', 'auto');
ga('send', 'pageview');
</script>
</html>