Bläddra i källkod

Added shitty paint app (WIP)

tobychui 3 år sedan
förälder
incheckning
78fb30612e

BIN
web/Paint/img/baseline_brush_black_48dp.png


BIN
web/Paint/img/desktop_icon.png


BIN
web/Paint/img/desktop_icon.psd


BIN
web/Paint/img/small_icon.png


BIN
web/Paint/img/small_icon.psd


+ 25 - 0
web/Paint/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <script src="../script/jquery.min.js"></script>
+    <script src="../script/ao_module.js"></script>
+    <title>Paint</title>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <div class="nav">
+        <div class="clr" data-clr="#000"></div>
+        <div class="clr" data-clr="#EF626C"></div>
+        <div class="clr" data-clr="#fdec03"></div>
+        <div class="clr" data-clr="#24d102"></div>
+        <div class="clr" data-clr="#fff"></div>
+        <button class="clear">clear</button>
+        <button class="save">save</button>
+    </div>
+    <script src="main.js"></script>
+</body>
+</html>

+ 21 - 0
web/Paint/init.agi

@@ -0,0 +1,21 @@
+/*
+	Simple Paint WebApps
+*/
+
+
+//Define the launchInfo for the module
+var moduleLaunchInfo = {
+    Name: "Paint",
+	Desc: "A basic drawing apps",
+	Group: "Utilities",
+	IconPath: "Paint/img/small_icon.png",
+	Version: "1.0",
+	StartDir: "Paint/index.html",
+	SupportFW: true,
+	LaunchFWDir: "Paint/index.html",
+	SupportEmb: false,
+	InitFWSize: [640, 480]
+}
+
+//Register the module
+registerModule(JSON.stringify(moduleLaunchInfo));

+ 53 - 0
web/Paint/main.js

@@ -0,0 +1,53 @@
+let canvas = document.getElementById("canvas")
+canvas.height = window.innerHeight
+canvas.width = window.innerWidth
+let ctx = canvas.getContext("2d")
+ctx.lineWidth = 5
+
+let prevX = null
+let prevY = null
+
+let draw = false
+
+let clrs = document.querySelectorAll(".clr")
+clrs = Array.from(clrs)
+clrs.forEach(clr => {
+    clr.addEventListener("click", () => {
+        ctx.strokeStyle = clr.dataset.clr
+    })
+})
+
+let clearBtn = document.querySelector(".clear")
+clearBtn.addEventListener("click", () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+})
+
+let saveBtn = document.querySelector(".save")
+saveBtn.addEventListener("click", () => {
+    let data = canvas.toDataURL("imag/png")
+    let a = document.createElement("a")
+    a.href = data
+    a.download = "sketch.png"
+    a.click()
+})
+
+window.addEventListener("mousedown", (e) => draw = true)
+window.addEventListener("mouseup", (e) => draw = false)
+
+window.addEventListener("mousemove", function(e){
+    if(prevX == null || prevY == null || !draw){
+        prevX = e.clientX
+        prevY = e.clientY
+        return
+    }
+
+    let mouseX = e.clientX
+    let mouseY = e.clientY
+    ctx.beginPath()
+    ctx.moveTo(prevX, prevY)
+    ctx.lineTo(mouseX, mouseY)
+    ctx.stroke()
+
+    prevX = e.clientX
+    prevY = e.clientY
+})

+ 65 - 0
web/Paint/style.css

@@ -0,0 +1,65 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    background-color: white;
+    overflow: hidden;
+}
+
+.nav{
+    width: 310px;
+    height: 50px;
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    opacity: .3;
+    transition: opacity .5s;
+}
+.nav:hover{
+    opacity: 1;
+}
+
+.clr{
+    height: 30px;
+    width: 30px;
+    background-color: blue;
+    border-radius: 50%;
+    border: 3px solid rgb(214, 214, 214);
+    transition: transform .5s;
+}
+.clr:hover{
+    transform: scale(1.2);
+}
+.clr:nth-child(1){
+    background-color: #000;
+}
+.clr:nth-child(2){
+    background-color: #EF626C;
+}
+.clr:nth-child(3){
+    background-color: #fdec03;
+}
+.clr:nth-child(4){
+    background-color: #24d102;
+}
+.clr:nth-child(5){
+    background-color: #fff;
+}
+
+button{
+    border: none;
+    outline: none;
+    padding: .6em 1em;
+    border-radius: 3px;
+    background-color: #03bb56;
+    color: #fff;
+}
+.save{
+    background-color: #0f65d4;
+}

+ 3 - 0
web/SystemAO/locale/desktop.json

@@ -78,6 +78,7 @@
                 "contextmenu/Big": "大",
                 "contextmenu/Folder": "資料夾",
                 "contextmenu/Shortcut": "捷徑",
+                "contextmenu/Upload": "上載",
 
                 "power/shutdown/title":"關機 - 輸入密碼以作確認",
                 "power/shutdown/text":"關閉伺服器主機",
@@ -168,6 +169,7 @@
                 "contextmenu/Big": "大",
                 "contextmenu/Folder": "資料夾",
                 "contextmenu/Shortcut": "捷徑",
+                "contextmenu/Upload": "上載",
 
                 "power/shutdown/title":"關機 - 輸入密碼以作確認",
                 "power/shutdown/text":"關閉伺服器主機",
@@ -259,6 +261,7 @@
                 "contextmenu/Big": "大",
                 "contextmenu/Folder": "文件夹",
                 "contextmenu/Shortcut": "捷径",
+                "contextmenu/Upload": "上传",
 
                 "power/shutdown/title":"关机-输入密码以作确认",
                 "power/shutdown/text":"服务器关机",

+ 17 - 0
web/desktop.system

@@ -5304,6 +5304,7 @@
             //Append the new folder option first
             addContextMenuItem($("#subcontextmenu"), lcontex('Folder'), "<i class='folder icon'></i>", "newfolder", true);
             addContextMenuItem($("#subcontextmenu"), lcontex('Shortcut'), "<i class='external icon'></i>", "newshortcut", true);
+            addContextMenuItem($("#subcontextmenu"), lcontex('Upload'), "<i class='cloud upload icon'></i>", "upload", true);
             addContextMenuSeperator($("#subcontextmenu"));
             requestCSRFToken(function(token){
                 $.ajax({
@@ -5756,6 +5757,22 @@
             return uploadIconUUID;
         }
 
+        function upload(){
+            var input = document.createElement('input');
+            input.type = 'file';
+            input.multiple = true;
+            input.onchange = e => { 
+                var files = e.target.files; 
+                for (var i = 0; i < files.length; i++){
+                    uploadFile(files[i], function(){
+                        refresh(undefined, true);
+                    });
+                }
+            }
+            input.click();
+            hideAllContextMenus();
+        }
+
         function uploadFile(file, callback=undefined, uploadingIconUUID = undefined) {
             if (lowMemoryMode){
                 /*