From 10fd7199020a8c0476d57846bb15eec16aa152be Mon Sep 17 00:00:00 2001 From: Ahmed Zamil Date: Mon, 10 Jun 2024 20:34:54 +0300 Subject: [PATCH] app --- .../Demo.cs | 35 +++-- .../Web/css/style.css | 139 +++++++++++++++++- .../Web/index.html | 75 +++++++--- .../Web/js/app.js | 85 ++++++++++- 4 files changed, 299 insertions(+), 35 deletions(-) diff --git a/Esiur.Examples.StandaloneWebServerDemo/Demo.cs b/Esiur.Examples.StandaloneWebServerDemo/Demo.cs index 3b6ecd1..91a9819 100644 --- a/Esiur.Examples.StandaloneWebServerDemo/Demo.cs +++ b/Esiur.Examples.StandaloneWebServerDemo/Demo.cs @@ -13,24 +13,41 @@ namespace Esiur.Examples.StandaloneWebServerDemo { [Export] int color; [Export] string label = "Hello World"; - [Export] public ResourceEventHandler Cleared; - [Export] public ResourceEventHandler Drawn; + [Export] public event ResourceEventHandler Cleared; + [Export] public event ResourceEventHandler Drawn; - [Export] List> points; + [Export] List> points; - [Export] public void Draw(int x, int y, int color) + [Export] public void Draw(int x, int y, byte color) { - Drawn?.Invoke(new Point() { X = x, Y = y, Color = color }); + try + { + points[x][y] = color; + Drawn?.Invoke(new Point() { X = x, Y = y, Color = color }); + } + catch + { + + } + } + + [Export] public void Clear() + { + foreach (var pa in points) + for (var i = 0; i < pa.Count; i++) + pa[i] = 0; + + Cleared?.Invoke(0); } public Demo() { - points = new List>(); - for (var x = 0; x < 400; x++) + points = new List>(); + for (var x = 0; x < 100; x++) { - var p = new List(); + var p = new List(); points.Add(p); - for (var y = 0; y < 300; y++) + for (var y = 0; y < 80; y++) p.Add(0); } diff --git a/Esiur.Examples.StandaloneWebServerDemo/Web/css/style.css b/Esiur.Examples.StandaloneWebServerDemo/Web/css/style.css index 3c0143a..1de8808 100644 --- a/Esiur.Examples.StandaloneWebServerDemo/Web/css/style.css +++ b/Esiur.Examples.StandaloneWebServerDemo/Web/css/style.css @@ -23,6 +23,24 @@ i-app { height: 50px; } +.label { + padding: 10; + margin: 10; + border: 1px solid #7b7b7b; + border-radius: 10px; + color: #000000; + background: #e3e3e3; + font-size: 32px; + width: 500px; +} + +canvas { + border: 1px solid #b5b5b5; + height: 320px; + width: 400px; + margin: 10px; +} + i-router { padding: 10px 35px; height: calc(100vh - 150px); @@ -30,7 +48,9 @@ i-router { } .content { - + display: flex; + flex-direction: column; + align-items: center; } .iui-error { @@ -239,6 +259,7 @@ i-router { box-shadow: 0px 1px 3px 1px #dedede; background: #fff; margin: 10px; + padding: 5px; } .title-bar h1 { @@ -359,3 +380,119 @@ i-modellist > i-repeat { .link { display: flex; } + + +input[type=radio] { + display: none; +} + +input[type=radio]:checked + label span { + transform: scale(1.25); +} + +input[type=radio]:checked + label .red { + border: 2px solid #711313; +} + +input[type=radio]:checked + label .orange { + border: 2px solid #873a08; +} + +input[type=radio]:checked + label .yellow { + border: 2px solid #816102; +} + +input[type=radio]:checked + label .olive { + border: 2px solid #505a0b; +} + +input[type=radio]:checked + label .green { + border: 2px solid #0e4e1d; +} + +input[type=radio]:checked + label .teal { + border: 2px solid #003633; +} + +input[type=radio]:checked + label .blue { + border: 2px solid #103f62; +} + +input[type=radio]:checked + label .violet { + border: 2px solid #321a64; +} + +input[type=radio]:checked + label .purple { + border: 2px solid #501962; +} + +input[type=radio]:checked + label .pink { + border: 2px solid #851554; +} + +label { + display: inline-block; + width: 25px; + height: 25px; + margin-right: 10px; + cursor: pointer; +} + +label:hover span { + transform: scale(1.25); +} + +label span { + display: block; + width: 100%; + height: 100%; + transition: transform 0.2s ease-in-out; +} + +label span.black { + background: #000000; +} + +label span.white { + background: #ffffff; +} + +label span.red { + background: #DB2828; +} + +label span.orange { + background: #F2711C; +} + +label span.yellow { + background: #FBBD08; +} + +label span.olive { + background: #B5CC18; +} + +label span.green { + background: #21BA45; +} + +label span.teal { + background: #00B5AD; +} + +label span.blue { + background: #2185D0; +} + +label span.violet { + background: #6435C9; +} + +label span.purple { + background: #A333C8; +} + +label span.pink { + background: #E03997; +} \ No newline at end of file diff --git a/Esiur.Examples.StandaloneWebServerDemo/Web/index.html b/Esiur.Examples.StandaloneWebServerDemo/Web/index.html index b405639..544bab8 100644 --- a/Esiur.Examples.StandaloneWebServerDemo/Web/index.html +++ b/Esiur.Examples.StandaloneWebServerDemo/Web/index.html @@ -45,38 +45,65 @@ Nahrain University, College of Information Technology Engineering -
- - - +
-

Esiur Demo

${FORMAT_CONNECTION_STATUS(d?.status ?? 0)}

- - - - -
- - - -
- -
- +
+ ${d.Label} + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Clear
- + \ No newline at end of file diff --git a/Esiur.Examples.StandaloneWebServerDemo/Web/js/app.js b/Esiur.Examples.StandaloneWebServerDemo/Web/js/app.js index e908051..f54bba0 100644 --- a/Esiur.Examples.StandaloneWebServerDemo/Web/js/app.js +++ b/Esiur.Examples.StandaloneWebServerDemo/Web/js/app.js @@ -9,7 +9,88 @@ async function init() { await app.setData(connection); console.log(connection); - } + + let label = document.getElementById("label"); + + demo.on(":Label", () => { + const range = document.createRange(); + const selection = window.getSelection(); + range.setStart(label, label.childNodes.length); + range.collapse(true); + selection.removeAllRanges(); + selection.addRange(range); + }); + + let canvas = document.getElementById("canvas"); + let ctx = canvas.getContext("2d"); + + let drawing = false; + + let colors = [ + '#ffffff', + '#000000', + '#DB2828', + '#21BA45', + '#FBBD08', + '#B5CC18', + '#F2711C', + '#00B5AD', + '#2185D0', + '#6435C9', + '#A333C8', + '#E03997', + ]; + + let colorId = 1; + + + canvas.addEventListener("mousedown", function (e) { + drawing = true; + colorId = document.querySelector('input[name="color"]:checked').value; + }, false); + + canvas.addEventListener("mouseup", function (e) { + drawing = false; + }, false); + + canvas.addEventListener("mousemove", function (e) { + //console.log(e); + + var rect = canvas.getBoundingClientRect(); + + let x = e.clientX - rect.left; + let y = e.clientY - rect.top; + + if (drawing) { + ctx.fillStyle = colors[colorId]; + + ctx.beginPath(); + ctx.arc(x, y, 4, 0, 2 * Math.PI); + ctx.fill(); + demo.Draw(x / 4, y / 4, colorId); + //ctx.fillRect(x, y, 10, 10); + } + }); + + demo.on("Drawn", (pt) => { + ctx.fillStyle = colors[pt.Color]; + ctx.beginPath(); + ctx.arc(pt.X * 4, pt.Y * 4, 8, 0, 2 * Math.PI); + ctx.fill(); + }); + + demo.on("Cleared", () => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + }); + + for (var x = 0; x < demo.Points.length; x++) + for (var y = 0; y < demo.Points[x].length; y++) { + ctx.fillStyle = colors[demo.Points[x][y]]; + ctx.beginPath(); + ctx.arc(x * 4, y * 4, 8, 0, 2 * Math.PI); + ctx.fill(); + } + } catch (ex) { alert(ex); @@ -18,3 +99,5 @@ async function init() { const FORMAT_CONNECTION_STATUS = (x) => ["Offline", "Connecting...", "Online"][x]; + + \ No newline at end of file