paweld/pas2js
1
0
Fork 0
mirror of https://gitlab.com/freepascal.org/fpc/pas2js.git synced 2025-04-08 05:48:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

* Really simple event handler demo

Browse Source
This commit is contained in:
Michael Van Canneyt 2024-07-29 15:38:07 +02:00
parent 8ea30c73c1
commit b81e313402
8 changed files with 327 additions and 0 deletions

10
demo/wasienv/job/onclick/README.md Normal file
View File

@ -0,0 +1,10 @@
This is a demo to show that you can set an event handler for a DOM element
from within a Webassembly program that uses JOB.
You need the job_web.pas unit which is distributed in the Free Pascal
sources, see packages/wasm-job/examples/job_web.pas
Compile both the host program and webassembly program, and then you can see
the onclick event in action.

1
demo/wasienv/job/onclick/bulma.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
demo/wasienv/job/onclick/host-config.js Normal file
View File

@ -0,0 +1,2 @@
var
wasmFilename = "wasmdemo.wasm";

33
demo/wasienv/job/onclick/index.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wasm Javascript Object Bindings - Test bed</title>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <!-- Prevents caching -->
<meta http-equiv="Pragma" content="no-cache"> <!-- Legacy HTTP 1.0 backward compatibility -->
<meta http-equiv="Expires" content="0"> <!-- Proxies -->
<link href="bulma.min.css" rel="stylesheet">
<link type="stylesheet" src="bulma.min.css">
<script src="host-config.js"></script>
<script src="wasmjobhost.js"></script>
</head>
<body>
<div class="box">
<div/>
<div class="box">
<p class="title is-3">Webassembly test bed</p>
<p class="subtitle is-5">Console output:</p>
<div id="pasjsconsole">
</div>
</div>
<div class="box">
<button id="btnOK" class="button is-primary">Click me, please!</button>
<div/>
<script>
rtl.showUncaughtExceptions=true;
rtl.run();
</script>
</body>
</html>

71
demo/wasienv/job/onclick/wasmdemo.lpi Normal file
View File

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="UTF-8"?>
<CONFIG>
<ProjectOptions>
<Version Value="12"/>
<General>
<Flags>
<MainUnitHasCreateFormStatements Value="False"/>
<MainUnitHasTitleStatement Value="False"/>
<MainUnitHasScaledStatement Value="False"/>
</Flags>
<SessionStorage Value="InProjectDir"/>
<Title Value="wasmdemo"/>
<UseAppBundle Value="False"/>
<ResourceType Value="res"/>
</General>
<BuildModes>
<Item Name="Default" Default="True"/>
</BuildModes>
<PublishOptions>
<Version Value="2"/>
<UseFileFilters Value="True"/>
</PublishOptions>
<RunParams>
<FormatVersion Value="2"/>
</RunParams>
<Units>
<Unit>
<Filename Value="wasmdemo.lpr"/>
<IsPartOfProject Value="True"/>
</Unit>
</Units>
</ProjectOptions>
<CompilerOptions>
<Version Value="11"/>
<Target>
<Filename Value="wasmdemo.wasm"/>
</Target>
<SearchPaths>
<IncludeFiles Value="$(ProjOutDir)"/>
<UnitOutputDirectory Value="lib/$(TargetCPU)-$(TargetOS)"/>
</SearchPaths>
<CodeGeneration>
<RelocatableUnit Value="True"/>
<TargetCPU Value="wasm32"/>
<TargetOS Value="wasi"/>
<Subtarget Value="browser"/>
</CodeGeneration>
<Linking>
<Debugging>
<GenerateDebugInfo Value="False"/>
<UseLineInfoUnit Value="False"/>
</Debugging>
<Options>
<ExecutableType Value="Library"/>
</Options>
</Linking>
</CompilerOptions>
<Debugging>
<Exceptions>
<Item>
<Name Value="EAbort"/>
</Item>
<Item>
<Name Value="ECodetoolError"/>
</Item>
<Item>
<Name Value="EFOpenError"/>
</Item>
</Exceptions>
</Debugging>
</CONFIG>

46
demo/wasienv/job/onclick/wasmdemo.lpr Normal file
View File

@ -0,0 +1,46 @@
library wasmdemo;
{$mode objfpc}{$H+}
uses
Classes,
job.js,
job_web;
Type
{ TApplication }
TApplication = class(TComponent)
Procedure Run;
private
function HandleClick(event: IJSEvent): Variant;
end;
{ TApplication }
procedure TApplication.Run;
var
EL : IJSElement;
HTMLEl : IJSHtmlElement;
begin
El:=JSDocument.getelementbyid('btnOK');
HTMLEl:=TJSHTMLELement.Cast(El);
HTMLEl.OnClick:=@HandleClick;
end;
function TApplication.HandleClick(event: IJSEvent): Variant;
begin
Writeln('Here in webassembly handleclick');
Result:=UnAssigned;
JSWindow.alert('You clicked the button.');
end;
begin
With TApplication.Create(nil) do
Run;
end.

104
demo/wasienv/job/onclick/wasmjobhost.lpi Normal file
View File

@ -0,0 +1,104 @@
<?xml version="1.0" encoding="UTF-8"?>
<CONFIG>
<ProjectOptions>
<Version Value="12"/>
<General>
<Flags>
<MainUnitHasCreateFormStatements Value="False"/>
<MainUnitHasTitleStatement Value="False"/>
<MainUnitHasScaledStatement Value="False"/>
<Runnable Value="False"/>
</Flags>
<SessionStorage Value="InProjectDir"/>
<Title Value="BrowserDomTest1"/>
<UseAppBundle Value="False"/>
<ResourceType Value="res"/>
</General>
<CustomData Count="4">
<Item0 Name="MaintainHTML" Value="1"/>
<Item1 Name="Pas2JSProject" Value="1"/>
<Item2 Name="PasJSLocation" Value="BrowserTixeoDom"/>
<Item3 Name="PasJSWebBrowserProject" Value="1"/>
</CustomData>
<BuildModes>
<Item Name="Default" Default="True"/>
</BuildModes>
<PublishOptions>
<Version Value="2"/>
<UseFileFilters Value="True"/>
</PublishOptions>
<RunParams>
<FormatVersion Value="2"/>
</RunParams>
<Units>
<Unit>
<Filename Value="wasmjobhost.lpr"/>
<IsPartOfProject Value="True"/>
</Unit>
<Unit>
<Filename Value="index.html"/>
<IsPartOfProject Value="True"/>
<CustomData Count="1">
<Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
</CustomData>
</Unit>
<Unit>
<Filename Value="../../../packages/job/job_browser.pp"/>
<IsPartOfProject Value="True"/>
<UnitName Value="JOB_Browser"/>
</Unit>
<Unit>
<Filename Value="../../../packages/job/job_shared.pp"/>
<IsPartOfProject Value="True"/>
<UnitName Value="JOB_Shared"/>
</Unit>
</Units>
</ProjectOptions>
<CompilerOptions>
<Version Value="11"/>
<Target FileExt=".js">
<Filename Value="wasmjobhost"/>
</Target>
<SearchPaths>
<IncludeFiles Value="$(ProjOutDir)"/>
<OtherUnitFiles Value="../../../packages/job"/>
<UnitOutputDirectory Value="js"/>
</SearchPaths>
<Parsing>
<SyntaxOptions>
<AllowLabel Value="False"/>
<UseAnsiStrings Value="False"/>
<CPPInline Value="False"/>
</SyntaxOptions>
</Parsing>
<CodeGeneration>
<TargetOS Value="browser"/>
</CodeGeneration>
<Linking>
<Debugging>
<GenerateDebugInfo Value="False"/>
<UseLineInfoUnit Value="False"/>
</Debugging>
</Linking>
<Other>
<CustomOptions Value="-Jeutf-8
-Jirtl.js
-Jc
-Jminclude"/>
<CompilerPath Value="$(pas2js)"/>
</Other>
</CompilerOptions>
<Debugging>
<Exceptions>
<Item>
<Name Value="EAbort"/>
</Item>
<Item>
<Name Value="ECodetoolError"/>
</Item>
<Item>
<Name Value="EFOpenError"/>
</Item>
</Exceptions>
</Debugging>
</CONFIG>

60
demo/wasienv/job/onclick/wasmjobhost.lpr Normal file
View File

@ -0,0 +1,60 @@
program wasmjobhost;
{$mode objfpc}
uses
BrowserConsole, JS, Types, Classes, SysUtils, Web, WasiEnv, WasiHostApp, JOB_Browser, JOB_Shared;
var
wasmFilename : string; external name 'wasmFilename';
Type
{ TMyApplication }
TMyApplication = class(TBrowserWASIHostApplication)
Private
FWADomBridge : TJSObjectBridge;
Public
constructor Create(aOwner : TComponent); override;
procedure DoRun; override;
end;
constructor TMyApplication.Create(aOwner: TComponent);
begin
inherited Create(aOwner);
FWADomBridge:=TJSObjectBridge.Create(WasiEnvironment);
RunEntryFunction:='_initialize';
end;
procedure TMyApplication.DoRun;
var
wasmmodule : string;
begin
// Your code here
Terminate;
if isString(wasmFilename) then
WasmModule:=wasmFilename
else
begin
WasmModule:=ParamStr(1);
if WasmModule='' then
WasmModule:='demo.wasm';
end;
StartWebAssembly(wasmmodule,true);
end;
var
Application : TMyApplication;
begin
ConsoleStyle:=DefaultCRTConsoleStyle;
HookConsole;
Application:=TMyApplication.Create(nil);
Application.Initialize;
Application.Run;
end.