Layout

Examples/AspNet/Controllers/MainController.cs

@@ -0,0 +1,25 @@
+using Esiur.Core;
+using Esiur.Resource;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Esiur.AspNetCore.Example
+{
+    [ApiController]
+    [Route("[controller]")]
+    public class MainController : ControllerBase
+    {
+   
+        private readonly ILogger<MainController> _logger;
+
+        public MainController(ILogger<MainController> logger)
+        {
+            _logger = logger;
+        }
+
+        [HttpGet(Name = "Get")]
+        public async AsyncReply<MyResource> Get()
+        {
+            return await Warehouse.Default.Get<MyResource>("/sys/demo");
+        }
+    }
+}

Examples/AspNet/Esiur.Examples.AspNet.csproj

@@ -0,0 +1,19 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.8.1" />
+  </ItemGroup>
+
+  <ItemGroup>
+
+       <ProjectReference Include="..\..\Integrations\Esiur.AspNetCore\Esiur.AspNetCore.csproj" />
+     <ProjectReference Include="..\..\Libraries\Esiur\Esiur.csproj" OutputItemType="Analyzer" />
+	    </ItemGroup>
+
+</Project>

Examples/AspNet/Esiur.Examples.AspNet.http

@@ -0,0 +1,6 @@
+@Esiur.ASPNet_HostAddress = http://localhost:5141
+
+GET {{Esiur.ASPNet_HostAddress}}/weatherforecast/
+Accept: application/json
+
+###

Examples/AspNet/MyResource.cs

@@ -0,0 +1,43 @@
+/*
+
+MIT License
+
+Copyright (c) 2024 Esiur Foundation, Ahmed Kh. Zamil.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+using Esiur.Resource;
+
+namespace Esiur.AspNetCore.Example
+{
+    [Resource]
+    public partial class MyResource
+    {
+        
+        [Annotation("A1","B2")][Export] int number;
+
+        [Export]
+        
+        public string[] GetInfo() => new string[] { Environment.MachineName, Environment.UserName, Environment.CurrentDirectory,
+            Environment.CommandLine, Environment.OSVersion.ToString()};
+
+    }
+}

Examples/AspNet/Program.cs

@@ -0,0 +1,69 @@
+/*
+
+MIT License
+
+Copyright (c) 2024 Esiur Foundation, Ahmed Kh. Zamil.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+using Esiur.AspNetCore;
+using Esiur.AspNetCore.Example;
+using Esiur.Core;
+using Esiur.Net.Sockets;
+using Esiur.Protocol;
+using Esiur.Resource;
+using Esiur.Stores;
+using Microsoft.AspNetCore.Hosting.Server;
+using System.Net.WebSockets;
+using System.Reflection;
+using System.Text;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+
+//builder.Services.AddControllers();
+// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
+//builder.Services.AddEndpointsApiExplorer();
+//builder.Services.AddSwaggerGen();
+
+builder.WebHost.UseUrls("http://localhost:8080");
+
+var app = builder.Build();
+
+var webSocketOptions = new WebSocketOptions()
+{
+    KeepAliveInterval = TimeSpan.FromSeconds(120), 
+};
+
+app.UseWebSockets(webSocketOptions);
+
+ 
+await Warehouse.Default.Put("sys", new MemoryStore());
+await Warehouse.Default.Put("sys/service", new MyResource());
+var server = await Warehouse.Default.Put("sys/server", new EpServer());
+
+await Warehouse.Default.Open();
+
+app.UseEsiur(new EsiurOptions() { Server = server });
+
+
+await app.RunAsync();

Examples/AspNet/Properties/launchSettings.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "http://json.schemastore.org/launchsettings.json",
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:24282",
+      "sslPort": 44358
+    }
+  },
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "applicationUrl": "http://localhost:5141",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "applicationUrl": "https://localhost:7282;http://localhost:5141",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

Examples/AspNet/appsettings.Development.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

Examples/AspNet/appsettings.json

@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}

Examples/StandaloneWebServer/Demo.cs

@@ -0,0 +1,64 @@
+using Esiur.Data;
+using Esiur.Resource;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Esiur.Examples.StandaloneWebServerDemo
+{
+    [Resource]
+    public partial class Demo
+    {
+        [Export] int color;
+        [Export] string label = "Hello World";
+        [Export] public event ResourceEventHandler<int>? Cleared;
+        [Export] public event ResourceEventHandler<Point>? Drawn;
+
+        [Export] List<List<byte>> points;
+
+        [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<byte>>();
+            for (var x = 0; x < 100; x++)
+            {
+                var p = new List<byte>();
+                points.Add(p);
+                for (var y = 0; y < 80; y++)
+                    p.Add(0);
+            }
+
+        }
+    }
+
+    [Export]
+    public class Point : IRecord
+    {
+        public int X { get; set; }
+        public int Y { get; set; }
+        public int Color { get; set; }
+    }
+}

Examples/StandaloneWebServer/Esiur.Examples.StandaloneWebServer.csproj

@@ -0,0 +1,24 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <OutputType>Exe</OutputType>
+    <TargetFramework>net10.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.1.1" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Folder Include="Web\js\" />
+    <Folder Include="Web\img\" />
+  </ItemGroup>
+
+  <ItemGroup>
+ 	  <ProjectReference Include="..\..\Libraries\Esiur\Esiur.csproj" OutputItemType="Analyzer" />
+
+  </ItemGroup>
+
+</Project>

Examples/StandaloneWebServer/Program.cs

@@ -0,0 +1,60 @@
+
+using Esiur.Examples.StandaloneWebServerDemo;
+using Esiur.Net.Http;
+using Esiur.Net.Packets.Http;
+using Esiur.Protocol;
+using Esiur.Resource;
+using Esiur.Stores;
+using Microsoft.AspNetCore.StaticFiles;
+
+internal class Program
+{
+
+    static FileExtensionContentTypeProvider MIMEProvider = new FileExtensionContentTypeProvider();
+
+    private static async Task Main(string[] args)
+    {
+        var wh = new Warehouse();
+
+        // Create a store to keep objects.
+        var system = await wh.Put("sys", new MemoryStore());
+        // Create a distibuted server
+        var esiurServer = await wh.Put("sys/server", new EpServer());
+        // Add your object to the store
+        var service = await wh.Put("sys/demo", new Demo());
+
+        var http = await wh.Put<HttpServer>("sys/http", new HttpServer() { Port = 8888 });
+
+
+        http.MapGet("{url}", (string url, HttpConnection sender) =>
+        {
+            var fn = "Web/" + (sender.Request.Filename == "/" ? "/index.html" : sender.Request.Filename);
+
+            if (File.Exists(fn))
+            {
+
+                string contentType;
+
+                if (!MIMEProvider.TryGetContentType(fn, out contentType))
+                    contentType = "application/octet-stream";
+
+                sender.Response.Headers["Content-Type"] = contentType;
+                sender.SendFile(fn).Wait(20000);
+            }
+            else
+            {
+                sender.Response.Number = HttpResponseCode.NotFound;
+                sender.Send("`" + fn + "` Not Found");
+                sender.Close();
+            }
+
+        });
+
+
+        // Start your server
+        await wh.Open();
+
+        Console.WriteLine("Running on http://localhost:8888");
+
+    }
+}

Examples/StandaloneWebServer/Properties/launchSettings.json

@@ -0,0 +1,8 @@
+{
+  "profiles": {
+    "Esiur.Examples.StandaloneWebServerDemo": {
+      "commandName": "Project",
+      "workingDirectory": "."
+    }
+  }
+}

Examples/StandaloneWebServer/Web/css/style.css

@@ -0,0 +1,501 @@
+
+@font-face {
+    font-family: def;
+    src: url(/font/Catamaran/Catamaran-Regular.ttf);
+}
+
+html {
+    font-family: def;
+}
+body {
+    overflow: hidden;
+}
+
+i-router {
+    height: 100vh;
+    flex: 1;
+}
+
+i-app {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.logo {
+    height: 50px;
+}
+
+.label {
+    padding: 10;
+    margin: 10;
+    border: 1px solid #7b7b7b;
+    border-radius: 10px;
+    color: #000000;
+    background: #e3e3e3;
+    font-size: 32px;
+    width: calc(100% - 50px);
+}
+
+canvas {
+    border: 1px solid #b5b5b5;
+    height: 320px;
+    width: 400px;
+    margin: 10px;
+}
+
+i-router {
+    padding: 10px 35px;
+    height: calc(100vh - 150px);
+    overflow: auto;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.iui-error {
+    display: none;
+}
+
+/* row */
+.row label {
+    display: flex;
+    align-items: center;
+}
+
+.row-wrap {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+    .row-wrap > .row {
+        flex-grow: 1;
+    }
+
+        .row-wrap > .row > div {
+            flex-grow: 1;
+            align-items: center;
+        }
+
+            .row-wrap > .row > div > * {
+                flex: 1;
+            }
+
+.row-center {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.row > div:last-child {
+    border-left: 0;
+}
+
+.row, .row-slim {
+    border: 1px solid #ddd;
+    display: flex;
+}
+
+
+    .row-slim > div, .row-slim > div {
+        border-left: 1px solid #ddd;
+        display: flex;
+        align-items: center;
+    }
+
+    .row > div, .row > span {
+        border-left: 1px solid #ddd;
+        padding: 5px;
+        display: flex;
+        align-items: center;
+    }
+
+    .row > .column, .column > .row {
+        padding: 0;
+    }
+
+    .row > span, .column > span {
+        font-weight: bold;
+    }
+
+/* column */
+.column > div, .column > span {
+    border-bottom: 1px solid #ddd;
+    padding: 5px;
+    display: flex;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+}
+
+    .column > div:last-child {
+        border-bottom: 0;
+        flex: 1;
+    }
+
+
+.table-form {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+    .table-form > tbody > tr > td:nth-child(1) {
+        /*background-color: #4ebeec; */
+        /* color: white; */
+        font-weight: bold;
+        padding: 8px;
+        width: 120px;
+    }
+
+
+/* table-list */
+.table-list {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+    .table-list td, .table-form > tbody > tr > td {
+        border: 1px solid #ddd;
+        padding: 8px;
+    }
+
+    .table-list tr:nth-child(even) {
+        background-color: #f2f2f2;
+    }
+
+    .table-list tbody > tr:hover {
+        background-color: #ddd;
+    }
+
+    .table-list thead {
+        font-weight: bold;
+        padding-top: 12px;
+        padding-bottom: 12px;
+        background-color: #4ebeec;
+        color: white;
+    }
+
+    .table-list td > img {
+        max-height: 36px;
+        max-width: 36px;
+    }
+
+/* table-print */
+
+.table-print {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+    .table-print > thead {
+        font-weight: bold;
+        text-align: center;
+        background: #e2e2e2;
+    }
+
+    .table-print > tbody > tr > td:first-child {
+        font-weight: bold;
+    }
+
+    .table-print > tfoot {
+        background: #e2e2e2;
+    }
+
+    .table-print td {
+        padding: 2px;
+        border: 1px solid #ddd;
+    }
+
+/* actions */
+
+.actions {
+    padding: 7px 8px;
+    background-color: #f1f1f1;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    display: flex;
+    gap: 3px;
+}
+
+.footer {
+    height: 42px;
+    text-align: center;
+    background: linear-gradient(0deg, #c3c3c3, #f7f7f7);
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+}
+
+.loading-panel {
+    position: absolute;
+    z-index: 1001;
+    width: 100%;
+    height: 100%;
+    background: #545454;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    font-size: 12px;
+    box-shadow: inset 0px 0px 9vh 5vh #3e3e3e;
+    color: #9c9c9c;
+    transition: all ease-out .5s .2s;
+}
+
+.loading-panel-hidden {
+    opacity: 0;
+    visibility: hidden;
+    transition: all ease-out .5s .2s;
+}
+
+
+.title-bar {
+    display: flex;
+    background-color: #66788600;
+    color: black;
+    height: 60px;
+    align-items: center;
+    box-shadow: 0px 1px 3px 1px #dedede;
+    background: #fff;
+    margin: 10px;
+    padding: 5px;
+}
+
+    .title-bar h1 {
+        flex-grow: 1;
+        font-size: 24px;
+        margin: 9px;
+        color: #4ebeec;
+    }
+
+i-router {
+    padding: 10px 35px;
+    height: calc(100vh - 150px);
+    overflow: auto;
+}
+
+.loading {
+    margin: 15vh auto;
+    display: flex;
+    font-weight: bold;
+    /*color: #303030;*/
+    align-items: center;
+    flex-direction: column;
+}
+
+
+.app {
+    transition: margin-left .5s;
+    display: flex;
+    flex-direction: column;
+}
+
+.app-shrunk {
+    margin-left: 250px;
+}
+
+.side-bar {
+    height: calc(100% - 132px);
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 81px;
+    left: 10px;
+    background-color: #efefef;
+    transition: 0.5s;
+    display: flex;
+    flex-direction: column;
+    box-shadow: inset -6px 0px 4px 2px #dfdfdf;
+    overflow: hidden;
+}
+
+html[dir='rtl'] .side-bar {
+    box-shadow: inset 6px 0px 4px 2px #dfdfdf;
+}
+
+.side-bar i-link {
+    padding: 4px 8px 4px 4px;
+    text-decoration: none;
+    font-size: 15px;
+    color: #818181;
+    display: flex;
+    align-items: center;
+    height: 27px;
+}
+
+.side-bar span {
+    width: 100%;
+}
+
+
+.side-bar i-link:hover {
+    color: #4ebeec;
+    background-color: #f8f8f8;
+}
+
+.side-bar i-link[selected]:hover {
+    background-color: #4ebeec;
+    color: #fff;
+}
+
+.side-bar-visible {
+    width: 240px;
+}
+
+
+i-modellist > i-repeat {
+    max-height: 260px;
+    overflow-y: scroll;
+    display: block;
+    box-shadow: 1px 1px 2px 2px #d4d4d4;
+    border: white 1px solid;
+    padding: 10px;
+    margin: 5px;
+    margin-bottom: 10px;
+}
+
+.connection-0 {
+    background: red;
+}
+
+
+.connection-1 {
+    background: yellow;
+    transition: background 2s;
+}
+
+
+.connection-2 {
+    background: #5de198;
+    transition: background 2s;
+}
+
+.navbar-item img {
+    height: 20px;
+    width: 20px;
+    padding: 0px 6px 0px 4px;
+}
+
+.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;
+}

Examples/StandaloneWebServer/Web/index.html

@@ -0,0 +1,106 @@
+
+<html lang="ar-iq">
+<head>
+
+    <base href="/" target="_blank">
+
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta charset="utf-8">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="img/fi/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="img/fi/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="img/fi/favicon-16x16.png">
+    <link rel="manifest" href="img/fi/site.webmanifest">
+    <link rel="mask-icon" href="img/fi/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
+
+    <script src="node_modules/esiur/src/esiur.js" type="module"></script>
+    <script src="node_modules/@esiur/iui/src/iui.js" type="module"></script>
+
+
+    <title>Esiur Demo</title>
+
+    <script src="js/app.js"></script>
+
+    <!--IUI 2.0 -->
+    <link href="node_modules/@esiur/iui/css/iui.css" rel="stylesheet" />
+    <link href="css/style.css" rel="stylesheet" />
+
+
+</head>
+
+<body>
+
+    <i-app onload="init()">
+
+        <div class="footer">
+            Esiur Foundation
+            <br />
+            Nahrain University, College of Information Technology Engineering
+        </div>
+
+        <div class="title-bar" >
+            <img src="img/coie.jpg" class="logo desktop">
+            <h1 class="desktop">Esiur Demo</h1>
+            <h3 class="desktop">${FORMAT_CONNECTION_STATUS(d?.status ?? 0)}</h3>
+            <div ::class="`logo connection-${(d?.status ?? 0)}`"></div>
+        </div>
+
+        
+        <div class="content" async:data="d?.get('sys/demo')">
+            <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>
+</html>

Examples/StandaloneWebServer/Web/js/app.js

@@ -0,0 +1,129 @@
+async function init() {
+    try {
+
+        connection = await wh.get(`EP://${window.location.hostname}`, {
+            autoReconnect: true
+        });
+
+        window.demo = await connection.get("sys/demo");
+
+        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("touchstart", (e) => {
+            drawing = true;
+            colorId = document.querySelector('input[name="color"]:checked').value;
+        });
+
+        canvas.addEventListener("mouseup", function (e) {
+            drawing = false;
+        }, false);
+
+        canvas.addEventListener("touchend", function (e) {
+            drawing = false;
+        }, false);
+
+
+        canvas.addEventListener("mousemove", function (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);
+            }
+        });
+
+        canvas.addEventListener("touchmove", function (e) {
+
+            var rect = canvas.getBoundingClientRect();
+
+            let x = e.touches[0].clientX - rect.left;
+            let y = e.touches[0].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);
+            }
+        });
+
+
+        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);
+    }
+}
+
+
+const FORMAT_CONNECTION_STATUS = (x) => ["Offline", "Connecting...", "Online"][x];
+
+ 

Examples/StandaloneWebServer/Web/package-lock.json

@@ -0,0 +1,252 @@
+{
+  "name": "Web",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@esiur/iui": "^1.2.1",
+        "esiur": "^2.3.3"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esiur/iui": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@esiur/iui/-/iui-1.2.1.tgz",
+      "integrity": "sha512-+fa/rzEBwcDK5J+HFDhLVOMtXqCSoYKXcHQHAqCdcFbhz6xFFeULVPKcBN1K3e8+4N6OEe53tr/Lneu3cX/xeA=="
+    },
+    "node_modules/bl": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-2.2.1.tgz",
+      "integrity": "sha512-6Pesp1w0DEX1N550i/uGV/TqucVL4AM/pgThFSN/Qq9si1/DF9aIHs1BxD8V/QU0HoeHO6cQRTAuYnLPKq1e4g==",
+      "dependencies": {
+        "readable-stream": "^2.3.5",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "node_modules/bson": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/bson/-/bson-1.1.6.tgz",
+      "integrity": "sha512-EvVNVeGo4tHxwi8L6bPj3y3itEvStdwvvlojVxxbyYfoaxJ6keLgrTuKdyfEAszFK+H3olzBuafE0yoh0D1gdg==",
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
+    "node_modules/denque": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-1.5.1.tgz",
+      "integrity": "sha512-XwE+iZ4D6ZUB7mfYRMb5wByE8L74HCn30FBN7sWnXksWc1LO1bPDl67pBR9o/kC4z/xSNAwkMYcGgqDV3BE3Hw==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esiur": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/esiur/-/esiur-2.3.3.tgz",
+      "integrity": "sha512-enPAhnwuN2FXebfrtSfuCV7xWtVBcb9263ZMab1Vt4UVSoiUueY9/gR75yXqz9smVvSFhWylJ4Zf9vQtD8H6Lw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "mongodb": "^3.6.9",
+        "ws": "^7.5.0"
+      },
+      "bin": {
+        "esiur": "bin/esiur.cjs"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/memory-pager": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz",
+      "integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==",
+      "optional": true
+    },
+    "node_modules/mongodb": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.7.4.tgz",
+      "integrity": "sha512-K5q8aBqEXMwWdVNh94UQTwZ6BejVbFhh1uB6c5FKtPE9eUMZPUO3sRZdgIEcHSrAWmxzpG/FeODDKL388sqRmw==",
+      "dependencies": {
+        "bl": "^2.2.1",
+        "bson": "^1.1.4",
+        "denque": "^1.4.1",
+        "optional-require": "^1.1.8",
+        "safe-buffer": "^5.1.2"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "optionalDependencies": {
+        "saslprep": "^1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "aws4": {
+          "optional": true
+        },
+        "bson-ext": {
+          "optional": true
+        },
+        "kerberos": {
+          "optional": true
+        },
+        "mongodb-client-encryption": {
+          "optional": true
+        },
+        "mongodb-extjson": {
+          "optional": true
+        },
+        "snappy": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/optional-require": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/optional-require/-/optional-require-1.1.8.tgz",
+      "integrity": "sha512-jq83qaUb0wNg9Krv1c5OQ+58EK+vHde6aBPzLvPPqJm89UQWsvSuFy9X/OSNJnFeSOKo7btE0n8Nl2+nE+z5nA==",
+      "dependencies": {
+        "require-at": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
+    "node_modules/require-at": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/require-at/-/require-at-1.0.6.tgz",
+      "integrity": "sha512-7i1auJbMUrXEAZCOQ0VNJgmcT2VOKPRl2YGJwgpHpC9CE91Mv4/4UYIUm4chGJaI381ZDq1JUicFii64Hapd8g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/saslprep": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/saslprep/-/saslprep-1.0.3.tgz",
+      "integrity": "sha512-/MY/PEMbk2SuY5sScONwhUDsV2p77Znkb/q3nSVstq/yQzYJOH/Azh29p9oJLsl3LnQwSvZDKagDGBsBwSooag==",
+      "optional": true,
+      "dependencies": {
+        "sparse-bitfield": "^3.0.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/sparse-bitfield": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
+      "integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==",
+      "optional": true,
+      "dependencies": {
+        "memory-pager": "^1.0.2"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

Examples/StandaloneWebServer/Web/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@esiur/iui": "^1.2.1",
+    "esiur": "^2.3.3"
+  }
+}