aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-18 23:14:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

guide: making a desktop app, update look, pear-ctrl, tweaks

Browse Source
This commit is contained in:
dmc
2024-01-30 22:00:48 +01:00
parent 2b3fc63df6
commit 025ab50d05
8 changed files with 93 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/chat-app-3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 42 KiB

BIN
assets/chat-app-4a.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 53 KiB

BIN
assets/chat-app-4b.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 46 KiB

BIN
assets/chat-app-5a.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 69 KiB

BIN
assets/chat-app-5b.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 69 KiB

BIN
assets/chat-app-6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 78 KiB

127
guide/making-a-pear-desktop-app.md
View File

@@ -21,10 +21,47 @@ Start by defining the app's layout in `index.html`:
<html> <html>
<head> <head>
<style> <style>
pear-ctrl {
margin-top: 9px;
margin-left: 9px;
position: absolute;
}
pear-ctrl[data-platform="darwin"] { float: left; margin-top: 4px; }
pear-ctrl:after {
content: '';
display: block;
height: 1.8rem;
position: fixed;
z-index: -1;
left: 0;
top: 0;
width: 100%;
background-color: #B0D94413;
filter: drop-shadow(2px 10px 6px #888);
}
button, input {
all: unset;
border: 1px ridge #B0D944;
background: #000;
color: #B0D944;
padding: .45rem;
font-family: monospace;
font-size: 1rem;
line-height: 1rem;
}
body { body {
background-color: #001601;
font-family: monospace;
margin: 0;
padding: 0;
}
main {
display: flex; display: flex;
height: 100vh; height: 100vh;
background-color: #3592C3;
color: white; color: white;
justify-content: center; justify-content: center;
margin: 0; margin: 0;
@@ -35,6 +72,10 @@ Start by defining the app's layout in `index.html`:
display: none !important; display: none !important;
} }
#or {
margin: 1.5rem auto;
}
#setup { #setup {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -50,9 +91,15 @@ Start by defining the app's layout in `index.html`:
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100vw; width: 100vw;
padding: .75rem;
} }
#header { #header {
margin-top: 2.2rem;
margin-bottom: 0.75rem;
}
#details {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
@@ -74,35 +121,40 @@ Start by defining the app's layout in `index.html`:
<script type='module' src='./app.js'></script> <script type='module' src='./app.js'></script>
</head> </head>
<body> <body>
<div id="setup"> <pear-ctrl></pear-ctrl>
<div> <main>
<button id="create-chat-room">Create chat room</button> <div id="setup">
<div>
<button id="create-chat-room">Create</button>
</div>
<div id="or">
- or -
</div>
<form id="join-form">
<button type="submit" id="join-chat-room">Join</button>
<input required id="join-chat-room-topic" type="text" placeholder="Chat room Topic" />
</form>
</div> </div>
<div> <div id="loading" class="hidden">Loading ...</div>
- or - <div id="chat" class="hidden">
</div> <div id="header">
<div> <div id="details">
<button id="join-chat-room">Join chat room</button> <div>
<input id="join-chat-room-topic" type="text" placeholder="Topic for chat room" /> Topic: <span id="chat-room-topic"></span>
</div>
<div>
Peers: <span id="peers-count">0</span>
</div>
</div>
</div>
<div id="messages"></div>
<form id="message-form">
<input id="message" type="text" />
<input type="submit" value="Send" />
</form>
</div> </div>
</div> </div>
<div id="loading" class="hidden">Loading ...</div> </main>
<div id="chat" class="hidden">
<div id="header">
<div>
Topic: <span id="chat-room-topic"></span>
</div>
<div>
Peers: <span id="peers-count">0</span>
</div>
</div>
<div id="messages"></div>
<form id="message-form">
<input id="message" type="text" />
<input type="submit" value="Send" />
</form>
</div>
</body>
</html> </html>
``` ```
@@ -124,7 +176,7 @@ The app uses these modules:
Install the dependencies with: Install the dependencies with:
``` ```
npm i hyperswarm hypercore-crypto b4a npm install hyperswarm hypercore-crypto b4a
``` ```
@@ -158,7 +210,7 @@ swarm.on('update', () => {
}) })
document.querySelector('#create-chat-room').addEventListener('click', createChatRoom) document.querySelector('#create-chat-room').addEventListener('click', createChatRoom)
document.querySelector('#join-chat-room').addEventListener('click', joinChatRoom) document.querySelector('#join-form').addEventListener('submit', joinChatRoom)
document.querySelector('#message-form').addEventListener('submit', sendMessage) document.querySelector('#message-form').addEventListener('submit', sendMessage)
async function createChatRoom() { async function createChatRoom() {
@@ -167,7 +219,8 @@ async function createChatRoom() {
joinSwarm(topicBuffer) joinSwarm(topicBuffer)
} }
async function joinChatRoom () { async function joinChatRoom (e) {
e.preventDefault()
const topicStr = document.querySelector('#join-chat-room-topic').value const topicStr = document.querySelector('#join-chat-room-topic').value
const topicBuffer = b4a.from(topicStr, 'hex') const topicBuffer = b4a.from(topicStr, 'hex')
joinSwarm(topicBuffer) joinSwarm(topicBuffer)
@@ -214,17 +267,21 @@ function onMessageAdded (from, message) {
Open two app instances by running `pear dev` in two terminals. Open two app instances by running `pear dev` in two terminals.
In the first app, click on `Create chat room`. A random topic will appear at the top. In the first app, click on `Create`. A random topic will appear at the top.
Note that topics consist of 64 hexadecimal characters (32 bytes). Note that topics consist of 64 hexadecimal characters (32 bytes).
Paste the topic into the second app, then click on `Join chat room`.
<p align="center"> <p align="center">
<img src="../assets/chat-app-4a.png" alt="The first app, with the topic"> <img src="../assets/chat-app-4b.png" alt="Second app, using topic from the first"> <img src="../assets/chat-app-4a.png" alt="The first app, with the topic">
</p> </p>
Once connected, messages can be send between the applications. Paste the topic into the second app, then click on `Join`.
<p align="center">
<img src="../assets/chat-app-4b.png" alt="Second app, using topic from the first">
</p>
Once connected, messages can be sent between each chat application.
<p align="center"> <p align="center">
<img src="../assets/chat-app-5a.png" alt="View from the first app"> <img src="../assets/chat-app-5b.png" alt="View from the second app"> <img src="../assets/chat-app-5a.png" alt="View from the first app"> <img src="../assets/chat-app-5b.png" alt="View from the second app">

2
guide/starting-a-pear-desktop-project.md
View File

@@ -56,7 +56,7 @@ Open `package.json` and update it to:
... ...
"pear": { "pear": {
"gui": { "gui": {
"backgroundColor": "#3592C3", "backgroundColor": "#012a02",
"height": 400, "height": 400,
"width": 700 "width": 700
} }