mirror of
https://github.com/lnbits/lnbits.git
synced 2025-06-12 01:40:58 +02:00
Adds websocket and qrcode examples to example extension
This commit is contained in:
parent
a8fa4bd117
commit
c2bfc199e1
BIN
lnbits/extensions/example/static/qrcode-example.png
Normal file
BIN
lnbits/extensions/example/static/qrcode-example.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.8 KiB |
BIN
lnbits/extensions/example/static/qrcode-example1.png
Normal file
BIN
lnbits/extensions/example/static/qrcode-example1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 34 KiB |
BIN
lnbits/extensions/example/static/websocket-example.png
Normal file
BIN
lnbits/extensions/example/static/websocket-example.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 49 KiB |
@ -51,8 +51,8 @@
|
|||||||
<q-card flat>
|
<q-card flat>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="text-h5 q-mb-md">
|
<div class="text-h5 q-mb-md">
|
||||||
{{SITE_TITLE}} Extension Development Guide
|
Extension Development Guide
|
||||||
<small>(Collection of resources for extension developers)</small>
|
<small>(also check the <a class="text-primary" href="http://docs.lnbits.org/devs/development.html">docs</a>)</small>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-card unelevated flat>
|
<q-card unelevated flat>
|
||||||
@ -188,8 +188,7 @@
|
|||||||
<p>
|
<p>
|
||||||
LNbits uses
|
LNbits uses
|
||||||
<a href="https://vuejs.org/" class="text-primary">Vue</a>
|
<a href="https://vuejs.org/" class="text-primary">Vue</a>
|
||||||
components for best-in-class high-performance and responsive
|
for best-in-class, responsive and high-performance components.
|
||||||
performance.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>Typical example of Vue components in a frontend script:</p>
|
<p>Typical example of Vue components in a frontend script:</p>
|
||||||
@ -199,7 +198,7 @@
|
|||||||
/><br /><br />
|
/><br /><br />
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
In a page body, models can be called. <br />Content can be
|
Content can be
|
||||||
conditionally rendered using Vue's
|
conditionally rendered using Vue's
|
||||||
<code class="bg-grey-3 text-black">v-if</code>:
|
<code class="bg-grey-3 text-black">v-if</code>:
|
||||||
</p>
|
</p>
|
||||||
@ -220,6 +219,8 @@
|
|||||||
<q-tabs v-model="usefultab" align="left">
|
<q-tabs v-model="usefultab" align="left">
|
||||||
<q-tab name="magicalg">MAGICAL G</q-tab>
|
<q-tab name="magicalg">MAGICAL G</q-tab>
|
||||||
<q-tab name="exchange">EXCHANGE RATES</q-tab>
|
<q-tab name="exchange">EXCHANGE RATES</q-tab>
|
||||||
|
<q-tab name="qrcodes">QR CODES</q-tab>
|
||||||
|
<q-tab name="websockets">WEBSOCKETS</q-tab>
|
||||||
</q-tabs>
|
</q-tabs>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -255,6 +256,45 @@
|
|||||||
>:<br />
|
>:<br />
|
||||||
<img src="./static/conversion-example2.png" />
|
<img src="./static/conversion-example2.png" />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="qrcodes" class="text-body1">
|
||||||
|
<div class="text-h5 q-mb-md">QR Codes</div>
|
||||||
|
<p>For most purposes use Quasar's inbuilt VueQrcode library:</p>
|
||||||
|
<img src="./static/qrcode-example1.png" />
|
||||||
|
<p>
|
||||||
|
LNbits does also include a handy
|
||||||
|
<a
|
||||||
|
href="../docs#/default/img_api_v1_qrcode__data__get"
|
||||||
|
class="text-primary"
|
||||||
|
> QR code enpoint</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
{% raw
|
||||||
|
%} You can use via <a href="/api/v1/qrcode/some-data-you-want-in-a-qrcode" class="text-primary">{{protocol + location}}{% endraw %}/api/v1/qrcode/some-data-you-want-in-a-qrcode:</a><br />
|
||||||
|
<br />
|
||||||
|
<img src="./static/qrcode-example.png" />
|
||||||
|
<br/>
|
||||||
|
<img class="bg-white" width="300px" src="/api/v1/qrcode/some-data-you-want-in-a-qrcode" />
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
</q-tab-panel>
|
||||||
|
|
||||||
|
<q-tab-panel name="websockets" class="text-body1">
|
||||||
|
<div class="text-h5 q-mb-md">Websockets</div>
|
||||||
|
<p>Fastapi includes a great <a class="text-primary" href="https://fastapi.tiangolo.com/advanced/websockets/#websockets-client">websocket tool</a></p>
|
||||||
|
{% raw
|
||||||
|
%}
|
||||||
|
<p>
|
||||||
|
A few LNbits extensions also make use of a weird and useful websocket/GET tool built into LNbits, such as extensions Copilot and LNURLDevices<br/>
|
||||||
|
You can subscribe to websocket with <code class="bg-grey-3 text-black">wss:{{location}}/api/v1/ws/{SOME-ID}</code><br/>
|
||||||
|
You can post to any clients subscribed to the endpoint with <code class="bg-grey-3 text-black">{{protocol + location}}/api/v1/ws/{SOME-ID}/{THE-DATA-YOU-WANT-TO-POST}</code><br/>
|
||||||
|
<br/>
|
||||||
|
<strong></div><div id="text-to-change">DEMO: Hit <a target="_blank" href="/api/v1/ws/32872r23g29/blah%20blah%20blah" class="text-primary">{{protocol + location}}/api/v1/ws/32872r23g29/blah%20blah%20blah</a> in a different browser window to change this text to `blah blah blah`.</div></strong>
|
||||||
|
<br/>
|
||||||
|
Function used in this demo:<br/>
|
||||||
|
<img src="./static/websocket-example.png" />
|
||||||
|
</q-tab-panel>
|
||||||
|
{% endraw %}
|
||||||
</q-tab-panels>
|
</q-tab-panels>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
@ -296,6 +336,8 @@
|
|||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
///// Declare models/variables /////
|
///// Declare models/variables /////
|
||||||
|
protocol: window.location.protocol,
|
||||||
|
location: "//" + window.location.hostname,
|
||||||
thingDialog: {
|
thingDialog: {
|
||||||
show: false,
|
show: false,
|
||||||
data: {}
|
data: {}
|
||||||
@ -310,7 +352,7 @@
|
|||||||
},
|
},
|
||||||
///// Where functions live /////
|
///// Where functions live /////
|
||||||
methods: {
|
methods: {
|
||||||
exampleFunction(data) {
|
exampleFunction: function(data) {
|
||||||
var theData = data
|
var theData = data
|
||||||
LNbits.api
|
LNbits.api
|
||||||
.request(
|
.request(
|
||||||
@ -325,6 +367,28 @@
|
|||||||
LNbits.utils.notifyApiError(error) // Error will be passed to the frontend
|
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() {
|
sendThingDialog() {
|
||||||
console.log(this.thingDialog)
|
console.log(this.thingDialog)
|
||||||
}
|
}
|
||||||
@ -333,6 +397,7 @@
|
|||||||
created: function () {
|
created: function () {
|
||||||
self = this // Often used to run a real object, rather than the event (all a bit confusing really)
|
self = this // Often used to run a real object, rather than the event (all a bit confusing really)
|
||||||
self.exampleFunction('lorum')
|
self.exampleFunction('lorum')
|
||||||
|
self.initWs()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user