-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdessin.html
executable file
·63 lines (56 loc) · 3.77 KB
/
dessin.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lumoveo - Light painting</title>
<script src="js/libs/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/libs/depth.js"></script>
<script src="js/brushes/ribbon.js" type="text/javascript" charset="utf-8"></script>
<script src="js/application.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/application.css" type="text/css" media="screen" title="Style principal" charset="utf-8">
</head>
<body>
<div id="zoneDessin">
<div id="splash_accueil">
<div id="titleAppli"></div>
<p>Bienvenue sur Lumoveo !<br />Avant de commencer l’expérience, vérifiez que votre Kinect est correctement branché sur une prise de courant ainsi qu’à votre Mac. N’oubliez pas de télécharger et d’installer correctement l’extension Chrome Depth.js, nécessaire au fonctionnement de l’application, depuis <a href="https://github.com/doug/depthjs" target="_blank">ce lien</a>.<br />Et que la lumière soit !</p>
<p><a href="#" id="commencerDessin">Commencez l’expérience</a><span>Vous devez connecter Kinect pour utiliser l’application</span></p>
</div>
<canvas id="posKinect" width="870" height="600"></canvas>
<div id="canvasSlider">
<div id="canvasSliderContent">
<div id="configuration" class="floatLeft">
<p id="choixCouleur">Choisissez votre couleur</p>
<a href="#" id="colorBlue" class="colorSelector" data-color="[0,144,255]">Bleu</a>
<a href="#" id="colorRed" class="colorSelector" data-color="[255,24,0]">Rouge</a>
<a href="#" id="colorGreen" class="colorSelector" data-color="[0,237,11]">Vert</a>
<a href="#" id="colorFuchsia" class="colorSelector" data-color="[255,0,216]">Fuchsia</a>
<a href="#" id="colorYellow" class="colorSelector" data-color="[255,228,78]">Jaune</a>
<a href="#" id="colorWhite" class="colorSelector" data-color="[255,255,255]">Blanc</a>
<p id="cadreCouleurActuelle"></p>
<p id="couleurActuelle">Couleur Actuelle</p>
<p id="enregistrerImage">Enregistrez votre image</p>
<a href="#" id="savePng"></a>
<p id="retourScene">Faire glisser sur la gauche pour fermer les outils</p>
<div id="popUpBackground"></div>
<div id="form-finalisation" class="popUp">
<a href="#"><img src="assets/popup-close.png" alt="Close"></a>
<p>Finaliser la création</p>
<p>Retournez à votre clavier pour écrire</p>
<form action="#">
<fieldset>
<label for="pseudo">Pseudo</label><input type="text" name="pseudo" value="" id="pseudo">
<label for="nom-creation">Nom de la création</label><input type="text" name="nom-creation" value="" id="nom-creation">
</fieldset>
<!-- You won't save using PHP like I was doing, a version based client-side only will come soon
input type="submit" value="Enregistrer" -->
</form>
</div>
</div><!-- end #configuration -->
<canvas id="toile" class="floatLeft" width="800" height="600"></canvas>
</div><!-- end #canvasSliderContent -->
</div><!-- end #canvasSlider-->
</div><!-- end zoneDessin -->
</body>
</html>