Skip to content

Fix app only working once + refactor/add some of the existing functionality #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yentlprojects wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix app only working once + refactor/add some of the existing functionality #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
13 changes: 9 additions & 4 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="./index.bundle.js"></script>
</body>
<head>
<script src="./index.bundle.js"></script>
</head>
<body>
<div>Paste an image of rs with homeport button (or not).</div>
<div><a href="#" onclick='TEST.capture()'>Click</a> to capture if on alt1.</div>
<div id="result"></div>
<div id="visual-result" style="position: relative;"></div>
</body>
</html>
46 changes: 20 additions & 26 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(`
<div>paste an image of rs with homeport button (or not)<div>
<div onclick='TEST.capture()'>Click to capture if on alt1</div>`
);
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");
}
12 changes: 6 additions & 6 deletions webpack.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);


Expand Down