moodleou · atlantisUnity · May 13, 2016 · May 13, 2016 · May 13, 2016 · May 13, 2016
diff --git a/canvas/css/style.css b/canvas/css/style.css
@@ -0,0 +1,154 @@
+*{
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
+    font-family: sans-serif;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#clear{
+    background:rgba(184, 184, 191, 1);
+    height: 50px;
+    border-radius: 20px;
+    font-size: 125%;
+    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
+    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
+    margin-right: 0;
+}
+
+p{
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    font-size: 125%;
+}
+
+#toolbar{
+    width: 100%;
+    height: 90px;
+    padding-top: 1.5%;
+    padding-right: 0.5%;
+    padding-left: 0.5%;
+    position: fixed;
+    top: 0;
+    background-color: #2f2f2f;
+    color: white;
+    display: inline-block;
+}
+
+.radcontrol{
+    width: 50px;
+    height: 50px;
+    border-radius: 30px;
+    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
+    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
+    background-color: #4f4f4f;
+    display: inline-block;
+    text-align: center;
+    font-size: 175%;
+    padding: 5px;
+}
+
+#rad{
+    float: left;
+}
+
+#color{
+    background-color: blue;
+    float: right;
+    position: relative;
+    margin-top: 0;
+    display: inline-block;
+    list-style-type: none;
+}
+
+.swatch,#deploy{
+    border-radius: 30px;
+    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
+    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
+    display: inline-block;
+    margin-left: 10px;
+    margin-top: 0;
+}
+
+.swatch.active{
+    border: 2px solid silver;
+    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+#canvas {
+    display: block;
+}
+
+#decrad{
+    cursor: pointer;
+}
+
+#incrad{
+    cursor: pointer;
+}
+li{
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    top:0;
+    left:0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -ms-transition: all 0.3s;
+    -o-transition: all 0.3s;
+    transition: all 0.3s;
+    z-index: -50;
+}
+
+#deploy{
+    z-index: 100;
+    background-image: url("../icon/paletteIcon.png");
+}
+
+#erase{
+    background-image: url("../icon/eraseIcon.png");
+    height: 50px;
+    width: 50px;
+    border-radius: 20px;
+    font-size: 125%;
+    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
+    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
+    margin-right: 0;
+    float: right;
+
+}
+
+ul{
+    margin-right: 25px;
+}
+
+a{
+    -webkit-border-radius: 30px;
+    -moz-border-radius: 30px;
+    border-radius: 20px;
+    border: solid thin rgba(255, 255, 255, 0.5);
+    box-shadow: inset 1.5px 1.5px 0px rgba(255, 255, 255, 0.5), 0px 3px 3px rgba(0, 0, 0, 0.5);
+    text-shadow: none;
+    background: rgba(184, 184, 191, 1);
+    color: buttontext;
+    padding: 13px 13px;
+    margin: 2px;
+    text-decoration: none;
+    font-family: Arial;
+    font-size: 125%;
+}
+
+a:hover {
+    background: rgba(184, 184, 191, 1);
+    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.5), 0px 2px 0px rgba(255, 255, 255, 0.5);
+}
diff --git a/canvas/icon/eraseIcon.png b/canvas/icon/eraseIcon.png
diff --git a/canvas/icon/paletteIcon.png b/canvas/icon/paletteIcon.png
diff --git a/canvas/index.php b/canvas/index.php
@@ -0,0 +1,33 @@
+<?php
+$html = <<<HTML
+    <!DOCTYPE HTML>
+    <html lang="en">
+    <head>
+        <title>Editeur</title>
+        <link rel="stylesheet" href="css/style.css">
+        <script src="js/jquery.min.js"></script>
+        <script type="text/javascript" src="js/resize.js"></script>
+        <script type="text/javascript" src="js/save.js"></script>
+    </head>
+    <body style="margin: 0">
+        <div id="toolbar">
+                <div id="decrad" class="radcontrol">-</div>
+                <p>Taille <span id="radval"></span></p>
+                <div id="incrad" class="radcontrol">+</div>
+                <button id="clear" onclick="context.clearRect(0,0,context.canvas.width,context.canvas.height);">Clear</button>
+                <a href="#" class="button" id="save" download="dessin.png">Save</a>
+                <button id="erase" onclick="erase()"></button>
+                <ul id = "color"><li id="deploy"></li><li></li></ul>
+        </div>
+        <canvas id='canvas'>
+        </canvas>
+        <script type="text/javascript" src="js/computer.js"></script>
+        <script type="text/javascript" src="js/touch.js"></script>
+        <script type="text/javascript" src="js/animation.js"></script>
+        <script type="text/javascript" src="js/radius.js"></script>
+        <script type="text/javascript" src="js/color.js"></script>
+    </body>
+    </html>
+HTML;
+echo $html;
+
diff --git a/canvas/js/animation.js b/canvas/js/animation.js
@@ -0,0 +1,34 @@
+//Animation of the color palette
+var bool = false;
+
+/*
+* Unwind colors by pressing the button
+* */
+function menu() {
+    if (!bool){
+        var list = $('li');
+        var x = 55;
+        for (var i = 1; i<list.length; i++){
+            list.eq(i).css('transform', 'translateY(80px) translateX(' + x + 'px)');
+            x += -55;
+        }
+        bool = true;
+    }else{
+        var list = $('li');
+        for (var i = 1; i<list.length; i++){
+            list.eq(i).css('transform', 'translateY(0) translateX(0)');
+        }
+        bool = false;
+    }
+
+}
+
+$(function(){
+    if(!bool){
+        $('#deploy').click(menu);
+    }else{
+        $('#deploy').click(menu);
+    }
+
+});
+
diff --git a/canvas/js/color.js b/canvas/js/color.js
@@ -0,0 +1,34 @@
+//Creation of colors
+var colors = ['black', 'grey', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
+
+for(var i=0, n=colors.length; i<n; i++){
+    var swatch = document.createElement('li');
+    swatch.className = 'swatch';
+    swatch.style.backgroundColor = colors[i];
+    swatch.addEventListener('click', setSwatch);
+    document.getElementById('color').appendChild(swatch);
+}
+
+
+function erase(){
+    var swatch = document.getElementById('erase');
+    swatch.addEventListener('click', setColor('white'));
+}
+
+function setColor(color){
+    context.fillStyle = color;
+    context.strokeStyle = color;
+    var active = document.getElementsByClassName('active')[0];
+    if(active){
+        active.className = 'swatch';
+    }
+}
+
+function setSwatch(e){
+    var swatch = e.target;
+    setColor(swatch.style.backgroundColor);
+    swatch.className += ' active';
+
+}
+
+setSwatch({target: document.getElementsByClassName('swatch')[0]});
diff --git a/canvas/js/computer.js b/canvas/js/computer.js
@@ -0,0 +1,41 @@
+var canvas = document.getElementById('canvas');
+var context = canvas.getContext("2d");
+
+var radius = 1;
+var dragging = false;
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+context.lineWidth =radius*2;
+
+var putPoint = function (e){
+    if(dragging) {
+        context.lineTo(e.clientX,e.clientY);
+        context.stroke();
+        context.beginPath();
+        context.arc(e.clientX, e.clientY, radius, 0, Math.PI * 2);
+        context.fill();
+        context.beginPath();
+        context.moveTo(e.clientX,e.clientY);
+    }
+}
+
+var engage = function (e) {
+    dragging = true;
+    putPoint(e);
+}
+
+var disengage = function () {
+    dragging = false;
+    context.beginPath();
+}
+
+
+canvas.addEventListener('mousedown', engage);
+canvas.addEventListener('mousemove', putPoint);
+canvas.addEventListener('mouseup', disengage);
+
+$('canvas').mouseleave(function () {
+    disengage();
+});
diff --git a/canvas/js/jquery.min.js b/canvas/js/jquery.min.js
diff --git a/canvas/js/radius.js b/canvas/js/radius.js
@@ -0,0 +1,28 @@
+var setRadius = function(newRadius) {
+    if(newRadius<minRad){
+        newRadius = minRad;
+    }else if(newRadius>maxRad){
+        newRadius = maxRad;
+    }
+    radius = newRadius;
+    context.lineWidth =radius*2;
+
+    radSpan.innerHTML = radius;
+}
+
+var minRad = 1,
+    maxRad = 10,
+    defaultRad = 1,
+    interval = 1,
+    radSpan = document.getElementById('radval'),
+    decRad = document.getElementById('decrad'),
+    incRad = document.getElementById('incrad');
+
+decRad.addEventListener('click', function(){
+    setRadius(radius-interval);
+});
+incRad.addEventListener('click', function(){
+    setRadius(radius+interval);
+});
+
+setRadius(defaultRad);
diff --git a/canvas/js/resize.js b/canvas/js/resize.js
@@ -0,0 +1,19 @@
+$(document).ready( function() {
+    var c = $('canvas');
+    var container = $(c).parent();
+    $(window).resize(respondCanvas);
+    function respondCanvas() {
+        c.attr('width', $(container).width());
+        c.attr('height', $(container).height());
+        context.lineWidth =radius*2;
+    }
+    respondCanvas();
+
+    //Create a white background
+    context.beginPath();
+    context.fillStyle="white";
+    context.rect(0,0,canvas.width,canvas.height);
+    context.fill();
+    context.beginPath();
+    context.fillStyle="black";
+});
diff --git a/canvas/js/save.js b/canvas/js/save.js
@@ -0,0 +1,9 @@
+$(document).ready( function() {
+    var canvas = document.getElementById('canvas');
+    var button = document.getElementById('save');
+    button.addEventListener('click', function () {
+        var dataURL = canvas.toDataURL('image/png');
+        console.log(dataURL);
+        button.href = dataURL;
+    });
+});