Beiträge von draexler

draexler · 11. August 2023

Wenn ich in das Eingabefeld klicke und etwas eingebe, kommen keine Vorschläge die in der Datalist stehen. Normalerweise erscheint ja schon beim draufklicken in die Eingabemaske ein Dropdownfeld mit den Eingabemöglichkeiten.

draexler · 11. August 2023

So jetzt bin ich mit meiner Analyse ein Stück weiter:

Verwende ich die .html lokal bzw. die .html liegt auf einen ESP den ich mit http:// aufrufe -funktioniert es nicht.
Verwende ich den Link, der über https:// https://www.fully-kiosk.com/fully/test-datalist.html -> funktioniert es.

Lustige Sache.

draexler · 10. August 2023

Leider auch kein Erfolg. Habe mal die" datalist-polyfill.min.js" Datei in jedes Verzeichnis gelegt das ich habe. Natürlich mit Pfad Anpassungen. Kein Erfolg.

Code

            },
            datalistLieder = document.querySelector('#datalist-lieder'),
            inputLiednamen = document.querySelector('#input-liedname');
        for (const [key, value] of Object.entries(liednamen)) {
            const html = `<option value="${key}: ${value}"></option>`;
            datalistLieder.insertAdjacentHTML('beforeend', html);
        }
        function liedHolen(sel) {
            inputLied = document.querySelector(sel);
            const matches = inputLied.value.match(/(\d+):( .+)/);
            if (matches) {
                return { nr: matches[1], name: matches[2], invalid: false };
            }
            return { nr: '', name: '', invalid: true };
        }
    </script>
    <script src="datalist-polyfill.min.js"></script>
</body>

</html>

Alles anzeigen

Ach Mensch, gestern noch so erfreut und heute wegen so einer kleinen Sachen wieder Probleme.....

draexler · 10. August 2023

Kinderleicht das sagst du so einfach

Meinen Verständnis zufolge lege ich die "datalist-polyfill.min.js" (eine Datei, obwohl in dem Package mehr gedownloadet wurde) in das gleiche Verzeichnis wo auch meine .html liegt. Dann ergänze ich mein .html mit den script:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Notenpult Anzeigesteuerung Musikkapelle Riedering-Söllhuben</title>
    <script src="datalist-polyfill.min.js"></script>
    <script>
        function jsonupload() {
            var json;
            var isValid = true;
            var verein = document.querySelector('input[name="verein"]:checked').value;

Alles anzeigen

Aber leider funktioniert es trotzdem nicht, vorausgesetzt mein vorgehen war richtig...

draexler · 10. August 2023

Oh, wie recht du doch hast...

Wollte das ganze jetzt auf einen Android tablet einrichten mit der Fully Browser Kiosk App. Usecase ist, Tablet wird eingeschaltet und die App startet sich und blockiert denn ganzen Rest, Kiosk Modus halt.

Das ganze funktioniert über Android WebView, was ja Chromium entspricht.

Leider funktionieren anscheinend aber über Android WebView "Datalists" nicht.

Konnte ich relativ schnell rausfinden mit dem Code:

Zitat

<!DOCTYPE html>

<html>

<body>

<h1>The datalist element</h1>

<form action="/action_page.php" method="get">

<label for="browser">Choose your browser from the list:</label>

<input list="browsers" name="browser" id="browser">

<datalist id="browsers">

<option value="Edge">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</form>

<p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>

</body>

</html>

Alles anzeigen

Funktioniert nicht.

Deswegen jetzt die Frage... Gibt es irgendeine alternative? Mir fällt leider nichts ein. Notfalls müsste ich mit einer Normalen Dropdownliste arbeiten.

draexler · 9. August 2023

Perfekt, damit ist geschafft Keine Ideen mehr.

Vielen Dank

draexler · 9. August 2023

Ah das ist besser. Ich hatte es so gemacht.

Code

<input style="height: 30px; width: 308px; font-size:20px; color:#fafafa; background-color: #cf0a35;" type="button" value="Reset" onClick="location.href=location.href">

Deines ist aber besser

Siehst du eine Möglichkeit wenn die Übertragung erfolgreich war, das Formular auch zurücksetzen?

draexler · 8. August 2023

Eigentlich logisch, das wars. Danke dir

draexler · 8. August 2023

Mensch was soll ich sagen, es läuft. Danke, danke dir

Die Prüfung funktioniert aber so wie ich den Code verstehe aber nur bei den Eingabefeldern die die Function liedholen durchlaufen. Denn nur da wird ja der Wert auf invalid gesetzt, was ja hier abgeprüft wird, oder?

Zitat

const invalidElems = document.querySelectorAll('form :invalid');

if (invalidElems.length == 0 && isValid) {

params = new FormData();

params.append('json', JSON.stringify(json));

params.append('mac', "0000021EDF033B15");

fetch('/jsonupload', {

method: 'post',

Alles anzeigen

Wie kann ich es jetzt noch schaffen das die anderen Felder, sollte nichts eingetragen werden, auch einen Fehlermeldung erzeugen? Also wenn z.B. nichts im "Freitext" Feld eingetragen worden ist?

Braucht es hier auch noch eine extra Function?

draexler · 8. August 2023

Also irgendwie schaffe ich es nicht. Habe es eigentlich genauso gemacht wie du beschrieben hast (und was nach meiner Logik auch passen würde).

Aber leider hat dann der Absendebutton keinerlei Funktion.

Wie müsste man eigentlich dann hier die Funktion mit der Inputüberprüfung integrieren? Also Die Werte der "Liednamen" prüfen? Das hattest du schon vorher mal beschrieben. Habe aber leider keine Ahnung wie ich das dann auch noch integrieren müsste.

Langsam werden es soviele verschachtelte Funktionen und viel zu viel Nice to have

Aber wenn das geht, dann wars das. Mehr kommt dann nicht mehr. Muss dann auch mal reichen.

draexler · 7. August 2023

Sobald ich es in ein paar Eingabefelder eintrage greift nur noch:

Code

            } else {
                alert('Eingaben nicht korrekt');
            }

Ergänzung: Wenn ich es nur bei einen Eingabefeld eingebe funktioniert es. Problem ist ja das ich durch die Auswahlfelder ja immer andere Eingabefelder nicht ausfülle. Sind aber als required gekennzeichnet...

draexler · 7. August 2023

Habe jetzt das mit dem Fetch hinbekommen (Keine Weiterleitung mehr)

Das läuft jetzt auf jeden Fall, musste den Code folgendermaßen anpassen:

Code

            } else if (verein === "freitext") {
                        var freitextfeld = document.getElementById("freitextfeld").value;
                json = [
                            {"text":[148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                            {"text":[148,63,freitextfeld,"t0_14b_tf",1,1]},
                            {"text":[148,106,"ORT","fonts/bahnschrift20",1,1]}
                ];
      }
            const invalidElems = document.querySelectorAll('form :invalid');
            if (invalidElems.length == 0) {
                params = new FormData();
                params.append('json', JSON.stringify(json));
                params.append('mac', "0000021EDF033B15");
                fetch('/jsonupload', {
                    method: 'post',
                    body: params
                }).then(() => {
                    alert('Eingabe wurde an die TAGS übertragen');
                }).catch(reason => alert(reason));
            } else {
                alert('Eingaben nicht korrekt');
            }
        }
    </script>

Alles anzeigen

Leider funktioniert aber die Prüfung nicht ob etwas eingetragen ist oder nicht. Es springt nicht in die Else Schleife obwohl das Feld leer ist.

Steht vermutlich im Zusammenhang weil ich das Script aus #34 ist nicht mehr implementiert habe (Prüfung ob die Eingabe zum Wertevorrat passt), weil sonst ein abschicken auch nicht mehr möglich ist. Wahrscheinlich muss das auch in dieses Stück Code von Post #39 hinein? Keine Ahnung.

draexler · 7. August 2023

Hatte ja versprochen zu zeigen was der eigentliche Output ist, um ein besseres Verständnis zu bekommen.

draexler · 7. August 2023

Hallo (sorry war unterwegs),

habe das jetzt wie im #34 umgesetzt. Funktioniert (wobei keine Fehlermeldung kommt wenn gar keine Eingabe gemacht wurde).

Anschließend habe ich das ganze einfach mal in den bestehenden Button eingesetzt.

Code

<input style="height: 40px; width: 100px;" id="send-it" type="button" value="Übertragen" onclick="jsonupload();"><br><br>

Die Prüfung funktioniert hier auch, aber natürlich wird der josonupload trotzdem durchgeführt (Hatte ich auch so erwartet). Wie könnte man das verhindern, wie müsste das ganze aussehen?

Vielleicht wäre hier auch der passende Zeitpunkt das Thema zu betrachten, das nach dem Klick ich nicht auf eine Bestätigungsseite geleitet werde, sonder auf der Seite bleibe.

Im Post #31 hattest du ja schon gefragt. Also die Eingabe .html öffne ich einfach über EspIP-Adresse/steuerung.html (Name der von mir hinterlegten .html)

Die Bestätigungseite ist aber in dem Projekt hartvercoded, da komme ich also nicht ran. Im Post #23 wurde AJAX vorgeschlagen?!

draexler · 5. August 2023

So geschafft, was eine eckige Klammer zuviel so ausmacht....

Jetzt zu der nächsten Frage. Kann man das Eingabefeld so beschränken das nur der Wertevorrat möglich ist? Aktuell kann ich ja alles eingeben, was dann ja zu einer nicht verarbeitbaren JSON führt.

draexler · 5. August 2023

Also irgendwie funzt es nicht

Das hier gehört:

Code

        function liedHolen(sel) {
            inputLied = document.querySelector(sel);
            const splitted = inputLied ? inputLied.value.split(': ') : ['', ''];
            return { nr: splitted[0], name: splitted[1] };
        }

for dem Abschließenden Body in die Script Sektion? Richtig?

Also:

Code

        </form>
      <script>
        const
            liednamen = {
                '1': 'Sternenbanner',
                '2': 'Weil ich dich gerne mag',
                '3': 'Posaunenparade',
                '10': 'Lieblingstück',
                '11': 'Trompetenserenade',
                '12': 'Hinter dem Wald',
                '123': 'Walzerliebe',
                '123': 'Wiener Marsch',
                '312': 'Dixie Land Parade',
                '402': 'Schritt für Schritt'
            },
            datalistLieder = document.querySelector('#datalist-lieder'),
            inputLiednamen = document.querySelector('#input-liedname');
        for (const [key, value] of Object.entries(liednamen)) {
            const html = `<option value="${key}: ${value}"></option>`;
            datalistLieder.insertAdjacentHTML('beforeend', html);
        }
        
              function liedHolen(sel) {
            inputLied = document.querySelector(sel);
            const splitted = inputLied ? inputLied.value.split(': ') : ['', ''];
            return { nr: splitted[0], name: splitted[1] };
        }
      </script>
</body>

</html>

Alles anzeigen

Aber ich denke hier ist auf jeden Fall ein Problem

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Tagsteuerung Musikkapelle ORT</title> 
    <script>
        function jsonupload(){
        var json;
        var verein = document.querySelector('input[name="verein"]:checked').value;
        const splitted = inputLiednamen.value.split(': ');
        let nr1= splitted[0];
        let name1= splitted[1]
       if (verein === "liednummer1") {
                json = [
                            {"text":[148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                            {"text":[148,26,nr1,"fonts/calibrib80",1,1]},
                            {"text":[148,97,name1,"t0_14b_tf",1,1]},
                            {"text":[148,106,"ORT","fonts/bahnschrift20",1,1]}
                ];
            } else if (verein === "liednummer2") {
                var lied1 = liedHolen('#input-liedname-1');
                var lied2 = liedHolen('#input-liedname-2');
                json = [
                        {"text": [148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                              {"text": [7,26,lied1.nr,"fonts/calibrib80",1]},
                            {"text":[10,97,lied1.name,"t0_14b_tf",1]},
                              {"triangle": [134,51,134,81,164,66,1]},
                              {"text": [165,26,lied2.nr,"fonts/calibrib80",1]},
                            {"text":[160,97,lied2.name,"t0_14b_tf",1]},
                              {"text": [148,106,"ORT", "fonts/bahnschrift20",1,1]}
                ];
            lied1 = liedHolen('#input-liedname-1');
            lied2 = liedHolen('#input-liedname-2');
                ];
            } else if (verein === "liednummerprosit") {
                json = [
                        {"text": [148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                              {"text": [7,26,nr1,"fonts/calibrib80",1]},
                            {"text":[95,97,name1,"t0_14b_tf",1]},
                              {"triangle": [134,51,134,81,164,66,1]},
                              {"text": [185,55,"PROSIT","fonts/calibrib30",1]},
                              {"text": [148,106,"ORT", "fonts/bahnschrift20",1,1]}
                ];
            } else if (verein === "hallo") {
                json = [
                            {"text": [148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                            {"text": [75,36,"GRIAS EICH","fonts/calibrib30",1]},
                            {"text": [17,70,"Schee dasds do seits","fonts/calibrib30" ,1]},
                            {"text": [148,106,"ORT","fonts/bahnschrift20",1,1]}

Alles anzeigen

oder?

Nochmal vielen Dank für deine geduldige Hilfe Parallel lese ich mich in deine genannten Funktion etc. ein. Ist aber doch ganz schön viel Input auf einmal. Wenn es aber mal funktionsfähig ist, macht es beim mir immer klick.

Lass uns mal das zum laufen bringen. Dann schauen wir mal wegen der Buttonfunktion aus Post #31

draexler · 5. August 2023

Is es auch möglich das nur dieser Wertevorrat eingeben werden kann?

draexler · 5. August 2023

Ok ich habs hingebracht.

Aber was muss ich jetzt machen um das ganze auch für das zweite Liedstück hinzubekommen?

Code

<script>
        function jsonupload(){
        var json;
        var verein = document.querySelector('input[name="verein"]:checked').value;
        const splitted = inputLiednamen.value.split(': ');
        let nr1= splitted[0];
        let name1= splitted[1]
        if (verein === "liednummer1") {
                json = [
                            {"text":[148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                            {"text":[148,26,nr1,"fonts/calibrib80",1,1]},
                            {"text":[148,97,name1,"t0_14b_tf",1,1]},
                            {"text":[148,106,"ORT","fonts/bahnschrift20",1,1]}
                ];
            } else if (verein === "liednummer2") {
                var nummer1 = document.getElementById("nummer1").value;
                var nummer2 = document.getElementById("nummer2").value;
                var liedname1 = liednamen[nummer1];
                var liedname2 = liednamen[nummer2];
                json = [
                        {"text": [148,5,"MUSIKKAPELLE","fonts/bahnschrift20",1,1]},
                              {"text": [7,26,nummer1,"fonts/calibrib80",1]},
                            {"text":[10,97,liedname1,"t0_14b_tf",1]},
                              {"triangle": [134,51,134,81,164,66,1]},
                              {"text": [165,26,nummer2,"fonts/calibrib80",1]},
                            {"text":[160,97,liedname2,"t0_14b_tf",1]},
                              {"text": [148,106,"ORT", "fonts/bahnschrift20",1,1]}
                ];

Alles anzeigen

draexler · 5. August 2023

Fehler gefunden. Ich hatte vergessen eine wichtige Zeile auszuklammern. Fremdschäm...

Aber das mit der Aufteilung verstehe ich noch nicht so ganz.

Wie muss jetzt der Bereich mit dem JSON Aufbau aufgebaut sein?

Und wo muss der Bereich hin?

Zitat

Und dann kannst Du Nummer und Name so ermitteln:

Code

            const splitted = inputLiednamen.value.split(': ');            let nr1= splitted[0];            let name1= splitted[1]

draexler · 4. August 2023

Danke für die schnelle Antwort.

Ist das so richtig?
Habe das jetzt mal eingefügt, aber wenn ich etwas in das Feld eingebe kommt da nichts, also kein Vorschlag.

Code

<p id="p1">
<label for="nummer1"><big><span style="font-size:16px;"><span style="font-family:tahoma,geneva,sans-serif;">Titelnummer:</span></span></big></label><br>
<label>Liednamen: <input id="input-liedname" list="datalist-lieder" type="text"></label>
<datalist id="datalist-lieder">
</datalist>
<big><span style="font-size:10px;"><span style="font-family:tahoma,geneva,sans-serif;">Max 3 Zeichen</span></span></big>
</p>
<p style="display:none;" id="p2">
<label for="nummer2"><big><span style="font-size:16px;"><span style="font-family:tahoma,geneva,sans-serif;">Titelnummer 2:</span></span></big></label><br>
<input type="text" id="nummer2" style="width:50px;height:20px;" maxlength="3"><br>
<big><span style="font-size:10px;"><span style="font-family:tahoma,geneva,sans-serif;">Max 3 Zeichen</span></span></big>
</p>
<p style="display:none;" id="p3">
<label for="freitextfeld"><big><span style="font-size:16px;"><span style="font-family:tahoma,geneva,sans-serif;">Freitext:</span></span></big></label><br>
<input type="text" id="freitextfeld" style="width:300px;height:20px;" maxlength="40"><br>
<big><span style="font-size:10px;"><span style="font-family:tahoma,geneva,sans-serif;">Max 40 Zeichen</span></span></big>
</p>
<p style="display:none;" id="p4">
<label for="pauseundzeit"><big><span style="font-size:16px;"><span style="font-family:tahoma,geneva,sans-serif;">Bis wann wieder da sein?</span></span></big></label><br>
<input type="text" id="pauseundzeit" style="width:50px;height:20px;" maxlength="5"><br>
<big><span style="font-size:10px;"><span style="font-family:tahoma,geneva,sans-serif;">Format mm:hh</span></span></big>
</p>
<p>
<input style="height: 40px; width: 100px;" type="button" value="Übertragen" onclick="jsonupload();">
</p>
</form>
<script>
const
liednamen = {
'1': 'Sternenbanner',
'2': 'Weil ich dich gerne mag',
'3': 'Posaunenparade',
'10': 'Lieblingstück',
'11': 'Trompetenserenade',
'12': 'Hinter dem Wald',
'123': 'Walzerliebe',
'123': 'Wiener Marsch',
'312': 'Dixie Land Parade',
'402': 'Schritt für Schritt'
},
datalistLieder = document.querySelector('#datalist-lieder'),
inputLiedname = document.querySelector('#input-liedname');
for (const [key, value] of Object.entries(liednamen)) {
const html = `<option value="${key}: ${value}"></option>`;
datalistLieder.insertAdjacentHTML('beforeend', html);
}
</script>
</body>

Alles anzeigen

Und zu der anderen Frage. Ja die Ordnung soll so sein. Deswegen getrennt wegen verschiedener Schriftarten.

Beiträge von draexler

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen

Inhalt aus Inputfeld nehmen und Text suchen