diff --git a/lnbits/extensions/example/static/qrcode-example.png b/lnbits/extensions/example/static/qrcode-example.png new file mode 100644 index 00000000..29781f53 Binary files /dev/null and b/lnbits/extensions/example/static/qrcode-example.png differ diff --git a/lnbits/extensions/example/static/qrcode-example1.png b/lnbits/extensions/example/static/qrcode-example1.png new file mode 100644 index 00000000..a6c748f1 Binary files /dev/null and b/lnbits/extensions/example/static/qrcode-example1.png differ diff --git a/lnbits/extensions/example/static/websocket-example.png b/lnbits/extensions/example/static/websocket-example.png new file mode 100644 index 00000000..52171d30 Binary files /dev/null and b/lnbits/extensions/example/static/websocket-example.png differ diff --git a/lnbits/extensions/example/templates/example/index.html b/lnbits/extensions/example/templates/example/index.html index 03f66b5f..645e0ce4 100644 --- a/lnbits/extensions/example/templates/example/index.html +++ b/lnbits/extensions/example/templates/example/index.html @@ -51,8 +51,8 @@
- {{SITE_TITLE}} Extension Development Guide - (Collection of resources for extension developers) + Extension Development Guide + (also check the docs)
@@ -188,8 +188,7 @@

LNbits uses Vue - components for best-in-class high-performance and responsive - performance. + for best-in-class, responsive and high-performance components.

Typical example of Vue components in a frontend script:

@@ -199,7 +198,7 @@ />

- In a page body, models can be called.
Content can be + Content can be conditionally rendered using Vue's v-if:

@@ -220,6 +219,8 @@ MAGICAL G EXCHANGE RATES + QR CODES + WEBSOCKETS @@ -255,6 +256,45 @@ >:
+ +
QR Codes
+

For most purposes use Quasar's inbuilt VueQrcode library:

+ +

+ LNbits does also include a handy + QR code enpoint +

+ {% raw + %} You can use via {{protocol + location}}{% endraw %}/api/v1/qrcode/some-data-you-want-in-a-qrcode:
+
+ +
+ + +
+ +
+ + +
Websockets
+

Fastapi includes a great websocket tool

+ {% raw + %} +

+ A few LNbits extensions also make use of a weird and useful websocket/GET tool built into LNbits, such as extensions Copilot and LNURLDevices
+ You can subscribe to websocket with wss:{{location}}/api/v1/ws/{SOME-ID}
+ You can post to any clients subscribed to the endpoint with {{protocol + location}}/api/v1/ws/{SOME-ID}/{THE-DATA-YOU-WANT-TO-POST}
+
+

DEMO: Hit {{protocol + location}}/api/v1/ws/32872r23g29/blah%20blah%20blah in a different browser window to change this text to `blah blah blah`.
+
+ Function used in this demo:
+ +
+ {% endraw %} @@ -296,6 +336,8 @@ data: function () { return { ///// Declare models/variables ///// + protocol: window.location.protocol, + location: "//" + window.location.hostname, thingDialog: { show: false, data: {} @@ -310,7 +352,7 @@ }, ///// Where functions live ///// methods: { - exampleFunction(data) { + exampleFunction: function(data) { var theData = data LNbits.api .request( @@ -325,6 +367,28 @@ LNbits.utils.notifyApiError(error) // Error will be passed to the frontend }) }, + initWs: async function () { + if (location.protocol !== 'http:') { + localUrl = + 'wss://' + + document.domain + + ':' + + location.port + + '/api/v1/ws/32872r23g29' + } else { + localUrl = + 'ws://' + + document.domain + + ':' + + location.port + + '/api/v1/ws/32872r23g29' + } + this.ws = new WebSocket(localUrl) + this.ws.addEventListener('message', async ({data}) => { + const res = data.toString() + document.getElementById("text-to-change").innerHTML = res + }) +}, sendThingDialog() { console.log(this.thingDialog) } @@ -333,6 +397,7 @@ created: function () { self = this // Often used to run a real object, rather than the event (all a bit confusing really) self.exampleFunction('lorum') + self.initWs() } })