diff --git a/readme.md b/readme.md index 06b02ed..40c8727 100644 --- a/readme.md +++ b/readme.md @@ -1,15 +1,15 @@ # Minimal Alt1/webpack/typescript example -how to use +How to use ```sh -#to initialize the repo and install dependencies +# To initialize the repo and install dependencies: npm i -#biuld +# Build your code: npm run build -#alternatively to auto-rebuild when source files are changed +# Or, alternatively to auto-rebuild when source files are changed: npm run watch ``` -You can open `./dist/index.html` in your browser and it will give some basic functionality based one pasted images. +You can open `./dist/index.html` in your browser and it will give some basic functionality based on pasted images. You can also open it in the Alt1 browser and click the `add app` button that appears to get some basic alt1 functionality. \ No newline at end of file diff --git a/src/index.html b/src/index.html index 1887e9f..eb5ecf4 100644 --- a/src/index.html +++ b/src/index.html @@ -1,7 +1,12 @@ - - - - + + + + +
Paste an image of rs with homeport button (or not).
+
Click to capture if on alt1.
+
+
+ \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 2e0b3a3..542f002 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,49 +1,43 @@ -import * as a1lib from "@alt1/base"; +import * as a1lib from '@alt1/base'; -//tell webpack to add index.html and appconfig.json to output +// Tell webpack to add index.html and appconfig.json to output require("!file-loader?name=[name].[ext]!./index.html"); require("!file-loader?name=[name].[ext]!./appconfig.json"); -//loads all images as raw pixel data async, images have to be saved as *.data.png -//this also takes care of srgb header bullshit -//this is async to cant acccess them instantly but generally takes <20ms -var imgs = a1lib.ImageDetect.webpackImages({ +// Loads all images as raw pixel data async, images have to be saved as *.data.png +// This also takes care of srgb header bullshit +// This is async, so can't be accessed instantly, but generally takes <20ms +const imgs = a1lib.ImageDetect.webpackImages({ homeport: require("./homebutton.data.png") }); -//only works once for some reason... whatever you get the idea a1lib.PasteInput.listen(ref => { - var pos = ref.findSubimage(imgs.homeport); - document.write("find result: " + JSON.stringify(pos)); + const loc = ref.findSubimage(imgs.homeport); + document.getElementById("result").innerText = "Found result: " + JSON.stringify(loc); }); -//You can reach exports on window.TEST because of -//config.makeUmd("testpackage", "TEST"); in webpack.config.ts +// You can reach exports on window.TEST because of +// config.makeUmd("testpackage", "TEST"); in webpack.config.ts export function capture() { - var img = a1lib.captureHoldFullRs(); - var loc = img.findSubimage(imgs.homeport); - document.write("homeport matches: " + JSON.stringify(loc)); + const img = a1lib.captureHoldFullRs(); + const loc = img.findSubimage(imgs.homeport); + document.getElementById("result").innerText = "Found result: " + JSON.stringify(loc); if (loc.length != 0) { alt1.overLayRect(a1lib.mixColor(255, 255, 255), loc[0].x, loc[0].y, imgs.homeport.width, imgs.homeport.height, 2000, 3); } else { alt1.overLayTextEx("Couldn't find homeport button", a1lib.mixColor(255, 255, 255), 20, Math.round(alt1.rsWidth / 2), 200, 2000, "", true, true); } - //get raw pixels of image and show on screen (used mostly for debug) - var buf = img.toData(100, 100, 200, 200); - buf.show(); + // Get raw pixels of image and show on screen (used mostly for debug) + const buf = img.toData(loc[0].x - 100, loc[0].y - 100, 200, 200); + document.getElementById("visual-result").innerHTML = ''; + document.getElementById("visual-result").append(buf.show()); } -//print text world -//also the worst possible example of how to use global exposed exports as described in webpack.config.json -document.write(` -
paste an image of rs with homeport button (or not)
-
Click to capture if on alt1
` -); +a1lib.on('alt1pressed', () => capture()); if (window.alt1) { - //tell alt1 about the app - //this makes alt1 show the add app button when running insane the embedded browser - //also updates app settings if they are changed + // Tell alt1 about the app (this makes alt1 show the add app button when running inside the embedded browser) + // Also updates app settings if they are changed alt1.identifyAppUrl("./appconfig.json"); } \ No newline at end of file diff --git a/webpack.config.ts b/webpack.config.ts index a3fb348..def6321 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -4,18 +4,18 @@ import * as path from "path"; var srcdir = path.resolve(__dirname, "./src/"); var outdir = path.resolve(__dirname, "./dist/"); -//wrapper around webpack-chain, most stuff you'll need are direct properties, -//more finetuning can be done at config.chain -//the wrapper gives decent webpack defaults for everything alt1/typescript/react related +// Wrapper around webpack-chain, most stuff you'll need are direct properties, +// More fine-tuning can be done at config.chain +// The wrapper gives decent webpack defaults for everything alt1/typescript/react related var config = new alt1chain(srcdir, { ugly: false }); -//exposes all root level exports as UMD (as named package "testpackege" or "TEST" in global scope) +// Exposes all root level exports as UMD (as named package "testpackage" or "TEST" in global scope) config.makeUmd("testpackage", "TEST"); -//the name and location of our entry file (the name is used for output and can contain a relative path) +// The name and location of our entry file (the name is used for output and can contain a relative path) config.entry("index", "./index.ts"); -//where to put all the stuff +// Where to output all the stuff config.output(outdir);