SomeGuy
/
sessioncommunities.online
Archived
1
0
Fork 1
Code Issues 13 Pull Requests 3 Activity

Add initial QR code support

Browse Source
pull/1/head
mdPlusPlus 1 year ago
parent d2d41b861c
commit 083d111794
5 changed files with 102 additions and 14 deletions
Show Stats Download Patch File Download Diff File

8
get_online_session_communities.php
Unescape Escape View File

@ -77,9 +77,11 @@
$info_arrays = generate_info_arrays($room_assignments);
// $final_join_links = generate_join_links($room_assignments);
$table_html = get_table_html($info_arrays);
$title = "Self-updating list of active Session Communities";
$final_html = create_html_page_from_html_data($table_html, $title, $timestamp);
// $modal_html = create_qr_code_modals_html($info_arrays);
// $table_html = get_table_html($info_arrays);
// $title = "Self-updating list of active Session Communities";
// $final_html = create_html_page_from_html_data($table_html, $title, $timestamp);
$final_html = generateHTML($timestamp, $info_arrays);
// print_r($wild_join_links);
// print_r($servers);

77
html_generator.php
Unescape Escape View File

@ -7,6 +7,7 @@
"<!DOCTYPE html>" . PHP_EOL .
"<html lang=\"en\">" . PHP_EOL .
" <head>" . PHP_EOL .
" <meta charset=\"UTF-8\">" . PHP_EOL .
" <link rel=\"icon\" type=\"image/svg+xml\" href=\"favicon.svg\" sizes=\"any\">" . PHP_EOL .
" <link rel=\"stylesheet\" href=\"styles.css\">" . PHP_EOL .
" <script src=\"script.js\" defer></script>" . PHP_EOL .
@ -28,9 +29,6 @@
* Token + shortened pubkey | Name | Description | Users | View Links(?) | Join URL
*/
function get_table_html($info_arrays) {
// $jl = "http://116.203.217.101/feels?public_key=2054fa3271f27ec9e55492c85d022f9582cb4aa2f457e4b885147fb913b9c131";
// $img_tag = get_qr_img_tag_from_join_url($jl);
$table_lines = array();
foreach($info_arrays as $id => $content) {
/*
@ -57,7 +55,7 @@
" <td>" . $content["description"] . "</td>" . PHP_EOL .
" <td class=\"td_users\">" . $content["active_users"] . "</td>" . PHP_EOL .
" <td><a href=\"" . $content["preview_link"] . "\">" . $content["preview_link"] . "</a></td>" . PHP_EOL .
// " <td id=\"qr_" . $id . "\">&#xf029;</td>" . PHP_EOL;
" <td><img src=\"qrcode-solid.svg\" onclick=\"displayQRModal('" . $id . "')\" alt=\"Pictogram of an QR code\"></td>" . PHP_EOL .
" <td class=\"td_join_url\"><a href=\"" . $content["join_link"] . "\">" . $content["join_link"] . "</a></td>" . PHP_EOL .
" </tr>" . PHP_EOL;
$table_lines[] = $line;
@ -74,8 +72,8 @@
" <th onclick=\"sortTable(3)\" id=\"th_description\">Description</th>" . PHP_EOL .
" <th onclick=\"sortTable(4)\" id=\"th_users\">Users</th>" . PHP_EOL .
" <th onclick=\"sortTable(5)\" id=\"th_preview\">Preview</th>" . PHP_EOL .
// " <th onclick=\"sortTable(6)\" id=\"th_qr\">QR</th>" . PHP_EOL .
" <th onclick=\"sortTable(6)\" id=\"th_join_url\">Join URL</th>" . PHP_EOL .
" <th id=\"th_qr\">QR</th>" . PHP_EOL .
" <th onclick=\"sortTable(7)\" id=\"th_join_url\">Join URL</th>" . PHP_EOL .
" </tr>" . PHP_EOL;
// suffix
@ -100,16 +98,25 @@
return $html;
}
function get_qr_img_tag_from_join_url($join_url) {
/*
* Needed until all Community servers reliably generate QR codes again
*/
function get_qr_img_element_from_join_url($join_url) {
$data = get_base64_qr_code_from_join_url($join_url);
$mime = "image/png";
$src = "data: " . $mime . ";base64," . $data;
$src = "data:" . $mime . ";base64," . $data;
$result = "<img src=\"" . $src . "\">";
$result =
"<img src=\"" . $src . "\" " .
"alt=\"Community join link encoded as QR code image\">";
// echo($result . PHP_EOL);
return $result;
}
/*
* Use Google API to generate QR codes and encode them as base64
*/
function get_base64_qr_code_from_join_url($join_url) {
// https://developers.google.com/chart/infographics/docs/qr_codes
$data = urlencode($join_url);
@ -124,4 +131,56 @@
return $img_base64;
}
/*
* TODO: Description
*/
function create_qr_code_modals_html($info_arrays) {
$html = "";
foreach($info_arrays as $id => $content) {
/*
* $id is "room token+shortened_pubkey", e.g. "example+09af"
* Each $content looks like this:
* $info_array = array(
* "name" => "Name of the room",
* "language" => "🇩🇪",
* "description" => "Some text that describes the community",
* "active_users" => 1234,
* "preview_link" => "https://example.com/r/example",
* "join_link" => "https://example.com/example?public_key=[64_hex_chars]"
* );
*/
$img_elem = get_qr_img_element_from_join_url($content["join_link"]); // TODO: incorporate ID to use in js function
$modal_html =
"<div id=\"modal_" . $id . "\" class=\"qr-code-modal\">" . PHP_EOL .
" <div class=\"qr-code-modal-content\">" . PHP_EOL .
" <span class=\"qr-code-modal-close\">&times;</span>" . PHP_EOL .
" " . $img_elem . PHP_EOL .
" </div>" . PHP_EOL .
"</div>" . PHP_EOL;
$html = $html . $modal_html;
}
return $html;
}
/*
* TODO: Description
*/
function generateHTML($timestamp, $info_arrays) {
$title = "Self-updating list of active Session Communities";
$modal_html = create_qr_code_modals_html($info_arrays);
$table_html = get_table_html($info_arrays);
$html =
$modal_html . PHP_EOL .
$table_html . PHP_EOL;
$final_html = create_html_page_from_html_data($html, $title, $timestamp);
return $final_html;
}
?>

1
output/qrcode-solid.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M48 32C21.5 32 0 53.5 0 80v96c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zm80 64v64H64V96h64zM48 288c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48V336c0-26.5-21.5-48-48-48H48zm80 64v64H64V352h64zM256 80v96c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H304c-26.5 0-48 21.5-48 48zm64 16h64v64H320V96zm32 352v32h32V448H352zm96 0H416v32h32V448zM416 288v32H352V288H256v96 96h64V384h32v32h96V352 320 288H416z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 725 B

6
output/script.js
Unescape Escape View File

@ -5,6 +5,12 @@ function onLoad(timestamp) {
createJoinLinkButtons();
}
function displayQRModal(communityID) {
var modalID = "modal_" + communityID;
modal = document.getElementById(modalID);
modal.style.display = "block";
}
function createJoinLinkButtons() {
elements = document.getElementsByClassName("td_join_url");
Array.from(elements).forEach((td_element) => {

24
output/styles.css
Unescape Escape View File

@ -5,11 +5,12 @@
#th_identifier { width:9%; }
.td_identifier { font-family: monospace; }
#th_name { width:13%; }
#th_language { width:16px }
#th_language { width:0% }
#th_description { }
#th_users { }
#th_users { width:0% }
.td_users { text-align: right; }
#th_preview { width:19%; }
#th_qr { width:0%; }
#th_join_url { width:15%; }
.td_join_url {
font-family: monospace;
@ -39,3 +40,22 @@ body { background-color: var(--session-classic-da
#tbl_communities tr:nth-child(odd) { background-color: var(--session-classic-dark-gray-two); }
#tbl_communities tr:nth-child(even) { background-color: var(--session-classic-dark-gray-three); }
*/
/* <QR code modals> */
.qr-code-modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
}
.qr-code-modal-content {
}
.qr-code-modal-close {
float: right;
font-size: 28px;
font-weight: bold;
}
.qr-code-modal-close:hover,
.qr-code-modal-close:focus {
cursor: pointer;
}