首页 发现 帮助
登录
TC
/
arozos
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Added shitty paint app (WIP)

tobychui 3 年之前
父节点
4f59c27e97
当前提交
78fb30612e
共有 11 个文件被更改，包括 184 次插入 和 0 次删除
合并视图 显示文件统计
  1. 二进制
      web/Paint/img/baseline_brush_black_48dp.png
  2. 二进制
      web/Paint/img/desktop_icon.png
  3. 二进制
      web/Paint/img/desktop_icon.psd
  4. 二进制
      web/Paint/img/small_icon.png
  5. 二进制
      web/Paint/img/small_icon.psd
  6. 25 0
      web/Paint/index.html
  7. 21 0
      web/Paint/init.agi
  8. 53 0
      web/Paint/main.js
  9. 65 0
      web/Paint/style.css
  10. 3 0
      web/SystemAO/locale/desktop.json
  11. 17 0
      web/desktop.system

二进制
web/Paint/img/baseline_brush_black_48dp.png
查看文件


二进制
web/Paint/img/desktop_icon.png
查看文件


二进制
web/Paint/img/desktop_icon.psd
查看文件


二进制
web/Paint/img/small_icon.png
查看文件


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

+ 17 - 0
web/desktop.system
查看文件 

@@ -5304,6 +5304,7 @@
 
             //Append the new folder option first
 
             //Append the new folder option first
 
             addContextMenuItem($("#subcontextmenu"), lcontex('Folder'), "<i class='folder icon'></i>", "newfolder", true);
 
             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('Shortcut'), "<i class='external icon'></i>", "newshortcut", true);
 
+            addContextMenuItem($("#subcontextmenu"), lcontex('Upload'), "<i class='cloud upload icon'></i>", "upload", true);
 
             addContextMenuSeperator($("#subcontextmenu"));
 
             addContextMenuSeperator($("#subcontextmenu"));
 
             requestCSRFToken(function(token){
 
             requestCSRFToken(function(token){
 
                 $.ajax({
 
                 $.ajax({
 
@@ -5756,6 +5757,22 @@
 
             return uploadIconUUID;
 
             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) {
 
         function uploadFile(file, callback=undefined, uploadingIconUUID = undefined) {
 
             if (lowMemoryMode){
 
             if (lowMemoryMode){
 
                 /*
 
                 /*