Sorry I am struggling badly
#hi, I am struggling with using a method in my TS file in my html
woeful zephyr
hushed vaporBOT
drowsy acorn
!ask
hushed vaporBOT
drowsy acorn
ts compiles down to js
woeful zephyr
What is disable picture in picture?
The main thing I am trying to do
Is I have a button called "Say hi"
woeful zephyr
The button is defined in a html file called scanner.html
drowsy acorn
copied text would be ideal, if not then a screenshot, but please don't use photos.
woeful zephyr
Then in scanner.ts it has a function called say hi
woeful zephyr
copied text would be ideal, if not then a screenshot, but please don't use photo...
Okie dokie
Sorry
drowsy acorn
The button is defined in a html file called scanner.html
so if you're using plain html then you'd need to compile down to js first, rather than using ts directly
woeful zephyr
so if you're using plain html then you'd need to compile down to js first, rathe...
I've done that in my build folder
In my build folder is:
Index.js
Scanner.js
Do I need to "build" scanner.html into the build folder as well?
I know you said no pictures, but I wanted to show you the webpage.
drowsy acorn
no, but you need to reference the built js files, not the src ts files
drowsy acorn
I know you said no pictures, but I wanted to show you the webpage.
screenshots exist.
woeful zephyr
Thank you for helping me btw
woeful zephyr
no, but you need to reference the built js files, not the src ts files
Ooooh
One second
So scanner.html
<script type="module" src="..build/scanner.js>
Is what it should be ?
Instead of src=scanner.ts
drowsy acorn
well first off that references a path ..build, rather than ../build, which is what you might have meant?
secondly, the path here is relative to the url, it doesn't really know about your filetree
woeful zephyr
But then I get a yellow squiggly and a warning that file cannot be resolved.
I'm using intellij Ultimate btw
woeful zephyr
secondly, the path here is relative to the url, it doesn't really know about you...
Oh ok
scanner.html is in src
Scanner/src/scanner.html
Scanner/src/scanner.ts
Scanner/build/index.js
Scanner/build/scanner.js
Scanner/index.ts
That's all my important files
drowsy acorn
scanner.html is in src
do you know what src stands for
woeful zephyr
do you know what src stands for
Source
drowsy acorn
is html for source code?
woeful zephyr
is html for source code?
I am guessing no lol
drowsy acorn
yeah
woeful zephyr
Should I move scanner.html to the main folder?
drowsy acorn
and ts is, so index.ts should also be in src, really
woeful zephyr
No, I have a index.ts
drowsy acorn
so you're opening scanner.html directly?
woeful zephyr
That serves up scanner.html
woeful zephyr
Thank you for being patient with me
Static files? I think so?
I mean, at the moment I just want to be able to print "hi"
It works when it's in the html file but not when it is in its own file
drowsy acorn
make sure you're actually getting the scanner.js
since scanner.html is in the root, that would be build/scanner.js
(sidenote though; seems like this file structure could use a redesign)
woeful zephyr
Scanner.html’s contents:
<!DOCTYPE html>
<html lang="en">
<body>
<script type="module" src="../build/scanner.js"></script>
<video></video>
<h1> Scanner </h1>
<button type="button" class="btn btn-primary" onclick="startScanning()">Start Scanning!</button>
<br>
<button type="button" class="btn btn-primary" onclick="stopScanning()">Stop Scanning!</button>
<br>
<button type="button" class="btn btn-primary" onclick="sayHi()">Hi!</button>
<br>
<button type="button" class="btn btn-primary" onclick="function sayHey() {
console.log('Hey!');
}
sayHey()">Hi (in file JS)!</button>
<br>
</body>
</html>
woeful zephyr
(sidenote though; seems like this file structure could use a redesign)
I'm open to doing whatever makes this easier
drowsy acorn
i don't do webdev much, much less with ts, so i don't know what the typical project structure for a web project using ts without any frameworks would be
i can only tell you what would work here, unfortunately
woeful zephyr
i can only tell you what would work here, unfortunately
It's ok
I feel like this should be easy
And thus I am just being stupid
drowsy acorn
Scanner.html’s contents:
<!DOCTYPE html>
<html lang="en">
<body>
<script type="...
looks like you're expecting the module to act like a script here
woeful zephyr
Is that not right?
drowsy acorn
no, modules act as individual components, while scripts put their declarations in the global scope for all to access
(they both use the script tag though)
drowsy acorn
well the file itself also has to be a script instead of a module
woeful zephyr
Oh ok
How do I do that ?
Scanner.ts’s contents:
import QrScanner from 'qr-scanner';
// import QrScanner from '/qr-scanner/qr-scanner.min.js';
// do something with QrScanner.
// To enforce the use of the new api with detailed scan results, call the constructor with an option object, see below.
const videoElem : HTMLVideoElement = '';
const qrScanner = new QrScanner(
videoElem,
result => console.log('decoded qr code:', result),
{ /* your options or returnDetailedScanResult: true if you're not specifying any other options */ },
);
export function startScanning() {
qrScanner.start();
}
export function stopScanning() {
qrScanner.stop();
}
export function sayHi() {
console.log('Hi!')
}
drowsy acorn
ok yeah that's set up fully as a module
since it has that import though, seems like you want it to be a module
yeah im not quite sure how to use modules with attribute events, since as aforementioned don't do webdev much
drowsy acorn
if you'd like to share, use bins (pastebin, srcshare, etc) or git (repo or gist) please
drowsy acorn
It's just a word doc
on a tangent, ...why that? code is generally plaintext, not rich text. using document formats kinda doesn't go well with code
woeful zephyr
on a tangent, ...why that? code is generally plaintext, not rich text. using doc...
It's just handy I guess
woeful zephyr
Sure
drowsy acorn
(or preferably upload them to dedicated code-sharing sites as mentioned before)
woeful zephyr
(or preferably upload them to dedicated code-sharing sites as mentioned before)
Ok, I'm getting dinner then I'll be back
woeful zephyr
I'm back 😁