improved bindings
This commit is contained in:
parent
acc7d4fa34
commit
aae349f803
8 changed files with 69 additions and 82 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,2 +1,4 @@
|
|||
build/
|
||||
bin/
|
||||
samples/HelloWorld/bin
|
||||
samples/HelloWorld/build
|
||||
|
|
@ -22,6 +22,7 @@ module;
|
|||
#include <cstddef>
|
||||
#include <cstdint>
|
||||
#include <cstdlib>
|
||||
#include <string>
|
||||
export module Crafter.CppDOM;
|
||||
|
||||
extern "C" {
|
||||
|
|
@ -36,8 +37,16 @@ extern "C" {
|
|||
|
||||
|
||||
|
||||
export namespace Crafter::CppDOM {
|
||||
__attribute__((import_module("env"), import_name("setInnerHTML"))) void SetInnerHTML(const char* id, std::size_t idLenght, const char* html, std::size_t htmlLenght);
|
||||
export namespace Crafter::CppDOM::Bindings {
|
||||
__attribute__((import_module("env"), import_name("getElementById"))) void* GetElementById(const char* id, std::size_t idLenght);
|
||||
inline void* GetElementById(const std::string& id){
|
||||
return GetElementById(id.c_str(), id.size());
|
||||
}
|
||||
__attribute__((import_module("env"), import_name("setInnerHTML"))) void SetInnerHTML(void* ptr, const char* html, std::size_t htmlLenght);
|
||||
inline void SetInnerHTML(void* ptr, const std::string& html){
|
||||
SetInnerHTML(ptr, html.c_str(), html.size());
|
||||
}
|
||||
__attribute__((import_module("env"), import_name("freeJs"))) void FreeJs(void* ptr);
|
||||
// __attribute__((import_module("env"), import_name("strokeRect"))) void StrokeRect(std::uint64_t id, std::uint32_t x, std::uint32_t y, std::uint32_t width, std::uint32_t height, const char* color, std::size_t colorLenght);
|
||||
// __attribute__((import_module("env"), import_name("putImageData"))) void PutImageData(std::uint64_t id, Crafter::Web::Pixel* buffer, std::uint32_t width, std::uint32_t height);
|
||||
// __attribute__((import_module("env"), import_name("fetch"))) void Fetch(void* obj, const char* url, std::size_t urlCallback, char* buffer, void (*listener)(void* obj, std::uint32_t, char*));
|
||||
|
|
|
|||
|
|
@ -18,86 +18,29 @@ License along with this library; if not, write to the Free Software
|
|||
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
|
||||
*/
|
||||
|
||||
function setInnerHTML(id, idLenght, html, htmlLenght) {
|
||||
const decoder = new TextDecoder();
|
||||
document.getElementById(decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, id, idLenght))).innerHTML = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, html, htmlLenght));
|
||||
const decoder = new TextDecoder();
|
||||
|
||||
let memorycounter = -1;
|
||||
const jsmemory = new Map();
|
||||
|
||||
function freeJs(ptr) {
|
||||
jsmemory.delete(ptr);
|
||||
}
|
||||
|
||||
function strokeRect(id, x, y, width, height, color, colorLenght) {
|
||||
const decoder = new TextDecoder();
|
||||
const canvas = document.getElementById(id.toString());
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.strokeStyle = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, color, colorLenght));
|
||||
ctx.strokeRect(x, y, width, height);
|
||||
function getElementById(id, idLenght) {
|
||||
const obj = document.getElementById(decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, id, idLenght)));
|
||||
jsmemory.set(++memorycounter, obj);
|
||||
return memorycounter;
|
||||
}
|
||||
|
||||
function putImageData(id, buffer, width, height) {
|
||||
const decoder = new TextDecoder();
|
||||
const canvas = document.getElementById(id.toString());
|
||||
const ctx = canvas.getContext("2d");
|
||||
const view = new Uint8ClampedArray(window.crafter_webbuild_wasi.instance.exports.memory.buffer, buffer, 640*360*4);
|
||||
const imageData = new ImageData(view, 640, 360);
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
function setInnerHTML(ptr, html, htmlLenght) {
|
||||
jsmemory.get(ptr).innerHTML = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, html, htmlLenght));
|
||||
}
|
||||
|
||||
function draw(id, x, y, text, textLenght){
|
||||
const decoder = new TextDecoder();
|
||||
const canvas = document.getElementById("1");
|
||||
let ctx = canvas.getContext("2d")
|
||||
|
||||
ctx.fillStyle = "red";
|
||||
ctx.font = '20px sans-serif';
|
||||
|
||||
var textString = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, text, textLenght))
|
||||
let textWidth = ctx.measureText(textString).width;
|
||||
|
||||
ctx.fillText(textString , x - (textWidth / 2), y);
|
||||
}
|
||||
|
||||
function setTimeoutt(obj, time, callback) {
|
||||
setTimeout(() => {
|
||||
window.crafter_webbuild_wasi.instance.exports.__indirect_function_table.get(callback)(obj);
|
||||
}, time);
|
||||
}
|
||||
|
||||
function addEventListener(id, eventId, listener) {
|
||||
|
||||
}
|
||||
|
||||
function fetchh(obj, url, urlLenght, buffer, callback) {
|
||||
const decoder = new TextDecoder();
|
||||
const view = new Uint8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, buffer);
|
||||
fetch(decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, url, urlLenght)), {
|
||||
// Adding Get request
|
||||
method: "GET",
|
||||
|
||||
// Setting headers
|
||||
headers: {
|
||||
'Content-Type': 'application/octet-stream',
|
||||
},
|
||||
// Setting response type to arraybuffer
|
||||
responseType: "arraybuffer"
|
||||
}).then(x => x.arrayBuffer()).then(
|
||||
y => {
|
||||
const outputBytes = new Uint8Array(y);
|
||||
for(let i = 0; i < outputBytes.length; i++) {
|
||||
view[i] = outputBytes[i]
|
||||
}
|
||||
window.crafter_webbuild_wasi.instance.exports.__indirect_function_table.get(callback)(obj, outputBytes.length, buffer);
|
||||
}
|
||||
);
|
||||
return 1;
|
||||
}
|
||||
|
||||
|
||||
let env = {
|
||||
freeJs:freeJs,
|
||||
getElementById:getElementById,
|
||||
setInnerHTML:setInnerHTML,
|
||||
addEventListener:addEventListener,
|
||||
strokeRect:strokeRect,
|
||||
fetch:fetchh,
|
||||
putImageData:putImageData,
|
||||
setTimeout:setTimeoutt,
|
||||
draw:draw
|
||||
}
|
||||
|
||||
if(window.crafter_webbuild_env){
|
||||
|
|
|
|||
15
README.md
15
README.md
|
|
@ -37,13 +37,14 @@ Create a basic project file, that describes your web project.
|
|||
```
|
||||
Save and close the file, create a ``main.cpp``
|
||||
```cpp
|
||||
import Crafter.Web;
|
||||
using namespace Crafter::Web;
|
||||
import Crafter.CppDOM;
|
||||
|
||||
int main() {
|
||||
const char id[] = "body";
|
||||
const char content = "<h1>Hello from C++!</h1>";
|
||||
Crafter::CppDOM::SetInnerHTML(id, sizeof(id)-1, content.c_str(), content.size()-1);
|
||||
int main(){
|
||||
void* body = Crafter::CppDOM::Bindings::GetElementById("body");
|
||||
Crafter::CppDOM::Bindings::SetInnerHTML(body, "Hello World!");
|
||||
Crafter::CppDOM::Bindings::FreeJs(body);
|
||||
}
|
||||
```
|
||||
Save and close, then run ``crafter-webbuild serve -c debug``. Now you can open the browser at ``http://localhost:8080/`` and ``Hello from C++!`` will appear in the browser.
|
||||
Save and close, then run ``crafter-webbuild serve -c debug``. Now you can open the browser at ``http://localhost:8080/`` and ``Hello World!`` will appear in the browser.
|
||||
|
||||
This sample can also be viewed in the [Hello World sample](https://github.com/Catcrafts/Crafter.CppDOM/tree/master/samples/HelloWorld)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "crafter-web",
|
||||
"name": "crafter-cppdom",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "base",
|
||||
|
|
|
|||
2
samples/HelloWorld/README.md
Normal file
2
samples/HelloWorld/README.md
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
This sample demonstrates a simple hello world.
|
||||
Run ``crafter-webbuild serve -c debug`` and go to ``localhost:8080`` to view it.
|
||||
7
samples/HelloWorld/main.cpp
Normal file
7
samples/HelloWorld/main.cpp
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import Crafter.CppDOM;
|
||||
|
||||
int main(){
|
||||
void* body = Crafter::CppDOM::Bindings::GetElementById("body");
|
||||
Crafter::CppDOM::Bindings::SetInnerHTML(body, "Hello World!");
|
||||
Crafter::CppDOM::Bindings::FreeJs(body);
|
||||
}
|
||||
23
samples/HelloWorld/project.json
Normal file
23
samples/HelloWorld/project.json
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "hello-world",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "debug",
|
||||
"standard": "c++26",
|
||||
"source_files": ["main"],
|
||||
"module_files": [],
|
||||
"additional_files": [],
|
||||
"build_dir": "./build",
|
||||
"output_dir": "./bin",
|
||||
"optimization_level": "0",
|
||||
"target": "wasm32-unknown-wasi",
|
||||
"type": "executable",
|
||||
"dependencies": [
|
||||
{
|
||||
"path":"/home/jorijn/repos/Crafter.CppDOM/project.json",
|
||||
"configuration":"debug"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue