diff --git a/README.md b/README.md new file mode 100644 index 0000000..82d4e37 --- /dev/null +++ b/README.md @@ -0,0 +1,13 @@ +# webui-qrcode-generator + +Adds a tab to generate QR Codes. Supports the following data types. +- Text +- SMS +- Email +- WiFi Network +- vCard +- MeCard +- Location + +## Installation +Install from `Available` on the `Extensions` tab. diff --git a/javascript/qrcode.js b/javascript/qrcode.js index b91986c..f64c7b0 100644 --- a/javascript/qrcode.js +++ b/javascript/qrcode.js @@ -1,38 +1,55 @@ +onUiLoaded(function() { + gradioApp().querySelector("#qrcode_geo_latitude input").addEventListener("input", (event) => { + let target = event.originalTarget || event.composedPath()[0]; + let value = target.value; + if (value < -90 || value > 90) { + target.value = clamp(value, -90, 90) + updateInput(target); + } + }); + + gradioApp().querySelector("#qrcode_geo_longitude input").addEventListener("input", (event) => { + let target = event.originalTarget || event.composedPath()[0]; + let value = target.value; + if (value < -180 || value > 180) { + target.value = clamp(value, -180, 180) + updateInput(target); + } + }); +}); + +function clamp(num, min, max) { + return Math.min(Math.max(num, min), max); +}; + async function sendToControlnet(img, tab, index) { const response = await fetch(img); - const blob = await response.blob(); - const file = new File([blob], "image.png", { type: "image/png" }); + const blob = await response.blob(); + const file = new File([blob], "image.png", { type: "image/png" }); const dt = new DataTransfer(); dt.items.add(file); const list = dt.files; - const selector = `#${tab}_script_container`; + window["switch_to_" + tab](); - if (tab === "txt2img"){ - switch_to_txt2img(); - } else if (tab === "img2img") { - switch_to_img2img(); - } - - const accordion = gradioApp().querySelector(selector).querySelector("#controlnet > .label-wrap > .icon") - if (accordion.style.transform == "rotate(90deg)") { + const controlnet = gradioApp().querySelector(`#${tab}_script_container #controlnet`); + const accordion = controlnet.querySelector(":scope > .label-wrap") + if (!accordion.classList.contains("open")) { accordion.click(); } - const controlnetDiv = gradioApp().querySelector(selector).querySelector("#controlnet"); - const tabs = controlnetDiv.querySelectorAll("div.tab-nav > button"); + const tabs = controlnet.querySelectorAll("div.tab-nav > button"); if (tabs !== null && tabs.length > 1) { tabs[index].click(); } - let input = gradioApp().querySelector(selector).querySelector("#controlnet").querySelectorAll("input[type='file']")[index * 2]; + const input = controlnet.querySelectorAll("input[type='file']")[index * 2]; if (input == null) { const callback = (observer) => { - input = gradioApp().querySelector(selector).querySelector("#controlnet").querySelector("input[type='file']"); + input = controlnet.querySelector("input[type='file']"); if (input == null) { - console.error('input[type=file] NOT exists'); return; } else { setImage(input, list); @@ -40,7 +57,7 @@ async function sendToControlnet(img, tab, index) { } } const observer = new MutationObserver(callback); - observer.observe(gradioApp().querySelector(selector).querySelector("#controlnet"), { childList: true }); + observer.observe(controlnet, { childList: true }); } else { setImage(input, list); } @@ -48,9 +65,9 @@ async function sendToControlnet(img, tab, index) { function setImage(input, list) { try { - if (input.previousElementSibling - && input.previousElementSibling.previousElementSibling - && input.previousElementSibling.previousElementSibling.querySelector("button[aria-label='Clear']")) { + if (input.previousElementSibling && + input.previousElementSibling.previousElementSibling && + input.previousElementSibling.previousElementSibling.querySelector("button[aria-label='Clear']")) { input.previousElementSibling.previousElementSibling.querySelector("button[aria-label='Clear']").click() } } catch (e) { @@ -58,6 +75,6 @@ function setImage(input, list) { } input.value = ""; input.files = list; - const event = new Event('change', { 'bubbles': true, "composed": true }); + const event = new Event("change", { "bubbles": true, "composed": true }); input.dispatchEvent(event); -} \ No newline at end of file +} diff --git a/scripts/qrcode.py b/scripts/qrcode.py index c434d2a..7f0da51 100644 --- a/scripts/qrcode.py +++ b/scripts/qrcode.py @@ -19,22 +19,22 @@ def generate(selected_tab, keys, *values): args["wifi_password"] = args["wifi_security"] = None data = helpers.make_wifi_data(ssid=args["wifi_ssid"], password=args["wifi_password"], security=args["wifi_security"], hidden=args["wifi_hidden"]) elif selected_tab == "tab_vcard": - data = helpers.make_vcard_data(name=args["vcard_name"], displayname=args["vcard_displayname"], nickname=args["vcard_nickname"], street=args["vcard_address"], city=args["vcard_city"], region=args["vcard_state"], zipcode=args["vcard_zipcode"], country=args["vcard_country"], birthday=args["vcard_birthday"], email=args["vcard_email"], phone=args["vcard_phone"], fax=args["vcard_fax"]) + name = f'{args["vcard_name_last"]};{args["vcard_name_first"]};{args["vcard_name_middle"]}' + data = helpers.make_vcard_data(name, displayname=args["vcard_displayname"], nickname=args["vcard_nickname"], street=args["vcard_address"], city=args["vcard_city"], region=args["vcard_state"], zipcode=args["vcard_zipcode"], country=args["vcard_country"], birthday=args["vcard_birthday"], email=args["vcard_email"], phone=args["vcard_phone"], fax=args["vcard_fax"], memo=args["vcard_memo"], org=args["vcard_organization"], title=args["vcard_title"], cellphone=args["vcard_phone_mobile"], url=args["vcard_url"]) + elif selected_tab == "tab_mecard": + data = helpers.make_mecard_data(name=args["mecard_name"], reading=args["mecard_kananame"], nickname=args["mecard_nickname"], houseno=args["mecard_address"], city=args["mecard_city"], prefecture=args["mecard_state"], zipcode=args["mecard_zipcode"], country=args["mecard_country"], birthday=args["mecard_birthday"], email=args["mecard_email"], phone=args["mecard_phone"], memo=args["mecard_memo"]) elif selected_tab == "tab_sms": data = f'smsto:{args["sms_number"]}:{args["sms_message"]}' elif selected_tab == "tab_email": data = helpers.make_make_email_data(to=args["email_address"], subject=args["email_subject"], body=args["email_body"]) elif selected_tab == "tab_geo": - data = f'geo:{args["geo_latitude"]},{args["geo_longitude"]}' + data = f'geo:{"{0:.8f}".format(args["geo_latitude"]).rstrip("0").rstrip(".")},{"{0:.8f}".format(args["geo_longitude"]).rstrip("0").rstrip(".")}' else: data = args["text"] - - try: - qrcode = segno.make(data, micro=args["micro"], error=args["error"], boost_error=args["boost_error"]) - except segno.encoder.DataOverflowError: - qrcode = segno.make(data, micro=False, error=args["error"], boost_error=args["boost_error"]) + + qrcode = segno.make(data, micro=False, error=args["setting_error_correction"], boost_error=False) out = io.BytesIO() - qrcode.save(out, kind='png', scale=args["scale"], border=args["border"], dark=args["dark"], light=args["light"]) + qrcode.save(out, kind='png', scale=args["setting_scale"], border=args["setting_border"], dark=args["setting_dark"], light=args["setting_light"]) return Image.open(out) def on_ui_tabs(): @@ -43,7 +43,7 @@ def on_ui_tabs(): with gr.Row(): with gr.Column(): with gr.Tab("Text") as tab_text: - inputs["text"] = gr.Textbox(show_label=False, lines=3) + inputs["text"] = gr.Textbox(show_label=False, lines=3, placeholder="Plain text / URL / Custom format") with gr.Tab("WiFi") as tab_wifi: inputs["wifi_ssid"] = gr.Text(label="SSID") @@ -52,20 +52,46 @@ def on_ui_tabs(): inputs["wifi_security"] = gr.Radio(value="None", label="Security", choices=["None", "WEP", "WPA"]) with gr.Tab("vCard") as tab_vcard: - inputs["vcard_name"] = gr.Text(label="Name") + with gr.Row(): + inputs["vcard_name_first"] = gr.Text(label="First Name") + inputs["vcard_name_middle"] = gr.Text(label="Middle Name") + inputs["vcard_name_last"] = gr.Text(label="Last Name") inputs["vcard_displayname"] = gr.Text(label="Display Name") inputs["vcard_nickname"] = gr.Text(label="Nickname") + with gr.Row(): + inputs["vcard_email"] = gr.Text(label="Email") + inputs["vcard_url"] = gr.Text(label="URL") + with gr.Row(): + inputs["vcard_phone"] = gr.Text(label="Phone") + inputs["vcard_phone_mobile"] = gr.Text(label="Mobile Phone") + inputs["vcard_organization"] = gr.Text(label="Organization") + inputs["vcard_title"] = gr.Text(label="Title") inputs["vcard_address"] = gr.Text(label="Address") with gr.Row(): inputs["vcard_city"] = gr.Text(label="City") inputs["vcard_state"] = gr.Text(label="State") with gr.Row(): inputs["vcard_zipcode"] = gr.Text(label="ZIP Code") - inputs["vcard_country"] = gr.Dropdown(label="Country", choices=constants.countries) + inputs["vcard_country"] = gr.Dropdown(label="Country", allow_custom_value=True, choices=constants.countries) inputs["vcard_birthday"] = gr.Text(label="Birthday") - inputs["vcard_email"] = gr.Text(label="Email") - inputs["vcard_phone"] = gr.Text(label="Phone") inputs["vcard_fax"] = gr.Text(label="Fax") + inputs["vcard_memo"] = gr.Text(label="Memo") + + with gr.Tab("MeCard") as tab_mecard: + inputs["mecard_name"] = gr.Text(label="Name") + inputs["mecard_kananame"] = gr.Text(label="Kana Name") + inputs["mecard_nickname"] = gr.Text(label="Nickname") + inputs["mecard_email"] = gr.Text(label="Email") + inputs["mecard_phone"] = gr.Text(label="Phone") + inputs["mecard_address"] = gr.Text(label="Address") + with gr.Row(): + inputs["mecard_city"] = gr.Text(label="City") + inputs["mecard_state"] = gr.Text(label="State") + with gr.Row(): + inputs["mecard_zipcode"] = gr.Text(label="ZIP Code") + inputs["mecard_country"] = gr.Dropdown(label="Country", allow_custom_value=True, choices=constants.countries) + inputs["mecard_birthday"] = gr.Text(label="Birthday") + inputs["mecard_memo"] = gr.Text(label="Memo") with gr.Tab("SMS") as tab_sms: inputs["sms_number"] = gr.Text(label="Number") @@ -76,21 +102,18 @@ def on_ui_tabs(): inputs["email_subject"] = gr.Text(label="Subject") inputs["email_body"] = gr.Textbox(label="Message", lines=3) - with gr.Tab("Coordinates") as tab_geo: + with gr.Tab("Location") as tab_geo: with gr.Row(): - inputs["geo_latitude"] = gr.Number(0, label="Latitude") - inputs["geo_longitude"] = gr.Number(0, label="Longitude") + inputs["geo_latitude"] = gr.Number(0, label="Latitude", elem_id="qrcode_geo_latitude") + inputs["geo_longitude"] = gr.Number(0, label="Longitude", elem_id="qrcode_geo_longitude") with gr.Accordion("Settings", open=False): - inputs["scale"] = gr.Slider(label="Scale", minimum=1, maximum=50, value=10, step=1) - inputs["border"] = gr.Slider(label="Border", minimum=0, maximum=10, value=4, step=1) + inputs["setting_scale"] = gr.Slider(label="Scale", minimum=1, maximum=50, value=10, step=1) + inputs["setting_border"] = gr.Slider(label="Border", minimum=0, maximum=10, value=4, step=1) with gr.Row(): - inputs["dark"] = gr.ColorPicker("#000000", label="Dark Color") - inputs["light"] = gr.ColorPicker("#ffffff", label="Light Color") - inputs["error"] = gr.Dropdown(value="L", label="Error Correction Level", choices=["L", "M", "Q", "H"]) - with gr.Row(): - inputs["boost_error"] = gr.Checkbox(True, label="Boost Error Correction Level") - inputs["micro"] = gr.Checkbox(False, label="Micro QR Code") + inputs["setting_dark"] = gr.ColorPicker("#000000", label="Module Color") + inputs["setting_light"] = gr.ColorPicker("#ffffff", label="Background Color") + inputs["setting_error_correction"] = gr.Radio(value="H", label="Error Correction Level", choices=["L", "M", "Q", "H"]) button_generate = gr.Button("Generate", variant="primary") @@ -118,6 +141,7 @@ def on_ui_tabs(): tab_text.select(lambda: "tab_text", None, selected_tab) tab_wifi.select(lambda: "tab_wifi", None, selected_tab) tab_vcard.select(lambda: "tab_vcard", None, selected_tab) + tab_mecard.select(lambda: "tab_mecard", None, selected_tab) tab_sms.select(lambda: "tab_sms", None, selected_tab) tab_email.select(lambda: "tab_email", None, selected_tab) tab_geo.select(lambda: "tab_geo", None, selected_tab)