Skip to content

Commit

Permalink
tweak server side webside
Browse files Browse the repository at this point in the history
  • Loading branch information
Mario Bodemann committed Mar 26, 2024
1 parent e506488 commit cc61598
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 51 deletions.
96 changes: 59 additions & 37 deletions zeapp/server/src/main/resources/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<head>
<title>
ZeBadge Web
ZeBadge Web App
</title>
<meta charset="UTF-8">
<script src="zebadge.js"></script>
Expand All @@ -11,43 +11,65 @@

</head>

<body>
<h1>ZeBadge Web - Create your badge online</h1>

<canvas id="canvas" width="296" height="128" style="border:1px solid #000000;"></canvas>

<img src="" id="preview" width="296" height="128" style="border:1px solid #000000;">

<table>
<thead>
<tr>
<th>Name</th>
<th>Contact</th>
</tr>
</thead>
<tr>
<td>
<input type="text" id="name" name="name" value="Jane Doe" oninput="badge_updated()">
</td>
<td>
<input type="text" id="contact" name="contact" value="github.com/dt-developers/zebadge" oninput="badge_updated()">
</td>
</tr>
<tr>
<td>
<input type="text" id="name_size" name="name_size" value="44" oninput="badge_updated()">
</td>
<td>
<input type="text" id="contact_size" name="contact_size" value="18" oninput="badge_updated()">
</td>
</tr>
</table>

<p>
<button onclick="preview_badge()">Preview Badge</button>
<button onclick="send_to_badge()">Send to Badge</button>
</p>
<body style="padding-left: 25vw; padding-right: 25vw; padding-top: 10vh; background: darkgray; text-align: center;">

<div id="main" style="background:white;border-radius: 1em; padding: 1em;">
<h1>ZeBadge Web App - Create Your Digital Badge Online</h1>

<canvas id="canvas" width="296" height="128" style="border:1px solid #000000;"></canvas>

<img src="" id="preview" width="296" height="128" style="border:1px solid #000000;" alt="preview of badge.">

<img src="" id="background_image" width="296" height="128" alt="Invisible background image">

<table>
<thead>
<tr>
<th></th>
<th>Text</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tr>
<td>Background</td>
<td colspan="2">
<input type="file" id="background_file" name="background_file" value="" oninput="background_uploaded()" multiple>
</td>
<td>
<input type="checkbox" id="draw_bars" name="draw_bars" checked oninput="badge_updated()">
</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" id="name" name="name" value="Jane Doe" oninput="badge_updated()">
</td>
<td>
<input type="text" id="name_size" name="name_size" value="44" oninput="badge_updated()">
</td>
<td>
<input type="text" id="name_color" name="name_color" value="#000" oninput="badge_updated()">
</td>
</tr>
<tr>
<td>Contact</td>
<td>
<input type="text" id="contact" name="contact" value="github.com/dt-developers/zebadge" oninput="badge_updated()">
</td>
<td>
<input type="text" id="contact_size" name="contact_size" value="18" oninput="badge_updated()">
</td>
<td>
<input type="text" id="contact_color" name="contact_color" value="#000" oninput="badge_updated()">
</td>
</tr>
</table>

<p>
<button onclick="send_to_badge()">Send to Badge</button>
</p>
</div>
<script>
window.onload = function () {
if(check_serial()) {
Expand Down
50 changes: 36 additions & 14 deletions zeapp/server/src/main/resources/static/zebadge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@ async function do_port(port, data) {
})
sleepFor(delay)

console.log("post open")
console.log(port.getInfo())

const writer = port.writable.getWriter()
sleepFor(delay)

Expand Down Expand Up @@ -94,8 +91,6 @@ async function send_to_badge() {
{filters: [{usbVendorId:usbVendorId}]}
)

console.log(data)

const encoder = new TextEncoder()
do_port(port, encoder.encode(data))
} else {
Expand All @@ -104,7 +99,7 @@ async function send_to_badge() {
}
}

function draw_badge(name, name_size, contact, contact_size) {
function draw_badge(name, name_size, name_color, contact, contact_size, contact_color, background_image, draw_bars) {
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.textAlign = "center"
Expand All @@ -113,18 +108,23 @@ function draw_badge(name, name_size, contact, contact_size) {
ctx.fillStyle = "#FFFFFF"
ctx.fillRect(0, 0, canvas.width, canvas.height)

ctx.fillStyle = "#FF0000"
ctx.fillRect(0, 0, canvas.width, 30)
ctx.fillRect(0, canvas.height - 30 , canvas.width, canvas.height)
ctx.drawImage(background_image, 0, 0, 296, 128 )

ctx.fillStyle = "#FFFFFF"
ctx.font = `bold 22px Arial`
ctx.fillText("My name is", canvas.width / 2, 30 / 2)
if (draw_bars) {
ctx.fillStyle = "#FF0000"
ctx.fillRect(0, 0, canvas.width, 30)
ctx.fillRect(0, canvas.height - 30 , canvas.width, canvas.height)

ctx.fillStyle = contact_color
ctx.font = `bold 22px Arial`
ctx.fillText("My name is", canvas.width / 2, 30 / 2)
}

ctx.fillStyle = contact_color
ctx.font = `${contact_size}px Arial`
ctx.fillText(contact, canvas.width / 2, canvas.height - 30 / 2)

ctx.fillStyle = "#000000"
ctx.fillStyle = name_color
ctx.font = `${name_size}px Arial`
ctx.fillText(name, canvas.width / 2, canvas.height/2)
}
Expand All @@ -133,16 +133,38 @@ function badge_updated() {
draw_badge(
document.getElementById("name").value,
document.getElementById("name_size").value,
document.getElementById("name_color").value,
document.getElementById("contact").value,
document.getElementById("contact_size").value,
document.getElementById("contact_color").value,
document.getElementById("background_image"),
document.getElementById("draw_bars").checked,
)

preview_badge()
}

function background_uploaded() {
const file = document.getElementById("background_file").files[0];

if (!file || !file.type.startsWith("image")) {
window.alert("No image file selected, please try again.")
} else {
bg = document.getElementById("background_image"),

reader = new FileReader()
reader.onload = (e) => {
bg.src = e.target.result
badge_updated();
}

reader.readAsDataURL(file)
}
}

function check_serial() {
if (!navigator.serial) {
const body = document.getElementsByTagName("body")[0]
const body = document.getElementById("main")
body.innerHTML = "<h1>NO WEB SERIAL</h1>\n" +
"<p>This app only works with those browsers:\n" +
"<a href='https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility'>see web serial compatibility.</a>"
Expand Down

0 comments on commit cc61598

Please sign in to comment.