mirror of
https://github.com/esiur/esiur-dotnet.git
synced 2026-04-04 12:28:21 +00:00
Layout
This commit is contained in:
64
Examples/StandaloneWebServer/Demo.cs
Normal file
64
Examples/StandaloneWebServer/Demo.cs
Normal file
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
60
Examples/StandaloneWebServer/Program.cs
Normal file
60
Examples/StandaloneWebServer/Program.cs
Normal file
@@ -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");
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"profiles": {
|
||||
"Esiur.Examples.StandaloneWebServerDemo": {
|
||||
"commandName": "Project",
|
||||
"workingDirectory": "."
|
||||
}
|
||||
}
|
||||
}
|
||||
501
Examples/StandaloneWebServer/Web/css/style.css
Normal file
501
Examples/StandaloneWebServer/Web/css/style.css
Normal file
@@ -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;
|
||||
}
|
||||
BIN
Examples/StandaloneWebServer/Web/img/coie.jpg
Normal file
BIN
Examples/StandaloneWebServer/Web/img/coie.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
106
Examples/StandaloneWebServer/Web/index.html
Normal file
106
Examples/StandaloneWebServer/Web/index.html
Normal file
@@ -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>
|
||||
129
Examples/StandaloneWebServer/Web/js/app.js
Normal file
129
Examples/StandaloneWebServer/Web/js/app.js
Normal file
@@ -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];
|
||||
|
||||
|
||||
252
Examples/StandaloneWebServer/Web/package-lock.json
generated
Normal file
252
Examples/StandaloneWebServer/Web/package-lock.json
generated
Normal file
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
6
Examples/StandaloneWebServer/Web/package.json
Normal file
6
Examples/StandaloneWebServer/Web/package.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"@esiur/iui": "^1.2.1",
|
||||
"esiur": "^2.3.3"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user