app

Esiur.Examples.StandaloneWebServerDemo/Demo.cs

@@ -13,24 +13,41 @@ namespace Esiur.Examples.StandaloneWebServerDemo
     {
         [Export] int color;
         [Export] string label = "Hello World";
-        [Export] public ResourceEventHandler<int> Cleared;
+        [Export] public event ResourceEventHandler<int> Cleared;
-        [Export] public ResourceEventHandler<Point> Drawn;
+        [Export] public event ResourceEventHandler<Point> Drawn;
 
-        [Export] List<List<int>> points;
+        [Export] List<List<byte>> points;
 
-        [Export] public void Draw(int x, int y, int color)
+        [Export] public void Draw(int x, int y, byte 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<List<int>>();
+            points = new List<List<byte>>();
-            for (var x = 0; x < 400; x++)
+            for (var x = 0; x < 100; x++)
             {
-                var p = new List<int>();
+                var p = new List<byte>();
                 points.Add(p);
-                for (var y = 0; y < 300; y++)
+                for (var y = 0; y < 80; y++)
                     p.Add(0);
             }
 

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;
+}

Esiur.Examples.StandaloneWebServerDemo/Web/index.html

@@ -46,36 +46,63 @@
         </div>
 
         <div class="title-bar" >
-            <!--<i-button css-class="ripple" onclick="toggleNav()">
-            <img src="img/menu.png" style="height: 40px" />
-        </i-button>-->
-
-
             <img src="img/coie.jpg" class="logo desktop">
-
             <h1 class="desktop">Esiur Demo</h1>
             <h3 class="desktop">${FORMAT_CONNECTION_STATUS(d?.status ?? 0)}</h3>
-
-
-            <input class="search-button" required type="search" autocomplete="off" />
-
-            <div class="location desktop" id="location"></div>
-
-            <!--<i-link href="tasks" class="inbox"><img src="img/icon/inbox.png"> <span id="spnInbox">0</span></i-link>-->
-            <!--<div class="profile desktop">
-            <div class="profile-type"></div>
-            <i-link class="profile-username" href="/profile"></i-link>
-            <i-link onclick="logout()" style="padding: 0px 10px"><img style="width: 30px" src="img/icon/logout.png" /></i-link>
-        </div>-->
-
             <div ::class="`logo connection-${(d?.status ?? 0)}`"></div>
-
-
         </div>
 
         
         <div class="content" async:data="d?.get('sys/demo')">
-            <i-input auto field="Label"></i-input>
+            <div id="label" contenteditable="true" oninput="this.data.Label = this.innerText" class="label">
+                ${d.Label}
+
+            </div>
+            <!--<div>
+                <input type="range" id="volume" name="volume" min="0" max="100" :value="d.Color" @input="this.data.Color = this.value" />
+            </div>-->
+            
+            <canvas id="canvas" width="400" height="320"></canvas>
+            <div style="padding: 10px; background: #e3e3e3; border-radius: 10px">
+
+                <input type="radio" name="color" id="black" value="1" checked/>
+                <label for="black"><span class="black"></span></label>
+
+                <input type="radio" name="color" id="white" value="0" />
+                <label for="white"><span class="white"></span></label>
+
+                <input type="radio" name="color" id="red" value="2" />
+                <label for="red"><span class="red"></span></label>
+
+                <input type="radio" name="color" id="green" value="3"/>
+                <label for="green"><span class="green"></span></label>
+
+                <input type="radio" name="color" id="yellow" value="4"/>
+                <label for="yellow"><span class="yellow"></span></label>
+
+                <input type="radio" name="color" id="olive" value="5"/>
+                <label for="olive"><span class="olive"></span></label>
+
+                <input type="radio" name="color" id="orange" value="6"/>
+                <label for="orange"><span class="orange"></span></label>
+
+                <input type="radio" name="color" id="teal" value="7"/>
+                <label for="teal"><span class="teal"></span></label>
+
+                <input type="radio" name="color" id="blue" value="8"/>
+                <label for="blue"><span class="blue"></span></label>
+
+                <input type="radio" name="color" id="violet" value="9"/>
+                <label for="violet"><span class="violet"></span></label>
+
+                <input type="radio" name="color" id="purple" value="10"/>
+                <label for="purple"><span class="purple"></span></label>
+
+                <input type="radio" name="color" id="pink" value="11"/>
+                <label for="pink"><span class="pink"></span></label>
+            </div>
+
+            <i-button style="margin: 10px" onclick="demo.Clear();">Clear</i-button>
         </div>
 </i-app>
 </body>

Esiur.Examples.StandaloneWebServerDemo/Web/js/app.js

@@ -9,6 +9,87 @@ 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)
     {
@@ -18,3 +99,5 @@ async function init() {
 
 
 const FORMAT_CONNECTION_STATUS = (x) => ["Offline", "Connecting...", "Online"][x];
+
+