Beiträge von Sempervivum

Sempervivum

Code

glob("images/*.jpg")

Sucht JPG-Bilder im Verzeichnis "images". Das muss natürlich existieren und es müssen Bilder drin sein.

Sempervivum

Hiermit schaltest Du die Fehleranzeige von PHP ein:

PHP

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>

Das funktioniert etwas anders als die Console des Browsers, denn die Anzeigen werden, ebenso wie Ausgaben durch echo, direkt auf der Seite ausgegeben. D. h. ruft man die Seite direkt im Browser auf, werden sie im Browserfenster angezeigt. Etwas komplizierter wird es, wenn das PHP-Skript durch Ajax aufgerufen wird. Dann stehen sie jedoch als Parameter im success-Callback zur Verfügung.

Auch in dem Beispiel in Posting #8 hast Du es unnötig kompliziert gemacht, denn glob liefert bereits ein Array als Rückgabewert. Dieses kann mal problemlos über JSON an Javascript übergeben, so wie in meinem Beispiel. Sieh dir mal den Quelltext davon an.

Ebenso wie mit console.log kannst Du mit echo oder var_dump Variablen und Hinweise etc. in die Ausgabe schreiben.

Sempervivum

Da hast Du es dir ja sehr schwer gemacht. Diese wenigen Zeilen schreiben die Bilder eines Verzeichnis in ein Javascript-Array:

PHP

<?php
$images = glob("images/*.jpg");
$imjson = json_encode($images);
?>
    <script>
        var images = <?php echo $imjson; ?>;
        console.log(images);
    </script>

Sempervivum

1. Dadurch, dass Du die Größe des Canvas mit CSS fest gelegt hast, wird es herauf skaliert, so dass die Maße, die Du beim Zeichnen des Rechtecks angegeben hast, nicht mehr stimmen. Das kannst Du vermeiden, indem Du die Größe des Canvas nicht über CSS definierst sondern über die Attribute.

2. Tut man dies, hat man immer noch das Problem, dass die Mausposition, die durch evt.clientX und evt.clientY ermittelt wird, sich auf die linke obere Ecke des Anzeigefensters bezieht:

https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/clientX

Besonders deutlich wird das, wenn man den Rahmen ein wenig größer macht.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Click Position</title>

    <style type="text/css">
        body {

            background-color: #FFF;

            margin: 30px;

            margin-top: 10px;

        }

        #myCanvas {

            position: absolute;

            top: 0px;

            left: 0px;

            /* width: 600px;

            height: 400px; */

            border: 20px red solid;
        }
    </style>

</head>

<body onmousedown="zeigKoord(event)">





    <canvas id="myCanvas" width="600" height="400">

        Your browser does not support the HTML5 canvas tag.

    </canvas>

        <span id='x'></span>x

        <span id='y'></span>y

        <script>



            var c = document.getElementById("myCanvas");

            var ctx = c.getContext("2d");

            ctx.font = "20px Arial";



            ctx.rect(100, 100, 60, 60);

            ctx.stroke();

            ctx.fillText(("zufall"), 80, 50);







            function zeigKoord(evt) {

                xPosition = evt.clientX;

                yPosition = evt.clientY;

                document.getElementById("x").innerHTML = xPosition;

                document.getElementById("y").innerHTML = yPosition;

            }



        </script>



    </body>

</html>

Alles anzeigen

Sempervivum

BTW: Entstanden ist diese Lösung, weil anfangs eine kreisförmige Anzeige gefragt war. Ein einfacher Balken mit Text lässt sich jedoch viel einfacher mit HTML und CSS realisieren. Wenn Du für die Zukunft flexibler sein willst, könnte es sich lohnen, auf eine solche Lösung umzustellen.

Sempervivum

Da fällt mir auch keine Lösung ein.

Nur, dass man es mit Prozentwerten responsiv machen könnte:

https://jsfiddle.net/Sempervivum/7cv7Lnbk/2/

Flexbox erlaubt auch absolute Positionierung:

https://stackoverflow.com/questions/3255…856609#33856609

aber ich verspreche mir bei diesem Problem keine Vorteile dadurch.

Sempervivum

Ich habe mal eine Funktion synchronisiereBalken hinzu gefügt, die das tun sollte, was Du erwartest:

Code

function erstelleBalken(selector, value, max, options) {
            var balkenEigenschaften = { barWidth: 400, barHeight: 40, barPos: 10,
                cornerRadius: 5, colorBg: "lightgrey", colorText: "black", textPos: "right", 
                templateText: "{value} min" }
            $.extend(balkenEigenschaften, options);
            $(selector).each(function (index, element) {
                var cv = $(this);
                cv.data("balkenEigenschaften", balkenEigenschaften);
                cv.data("max", max);
                if (value > max) max = value;
                var colorBar = getColor2(value, balkenEigenschaften);
                var height = 2 * balkenEigenschaften.barPos + balkenEigenschaften.barHeight;
                cv.drawText({
                    layer: true,
                    name: 'text',
                    fromCenter: false,
                    fillStyle: balkenEigenschaften.colorText,
                    strokeWidth: 4,
                    x: balkenEigenschaften.barPos, y: balkenEigenschaften.barPos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: balkenEigenschaften.templateText.replace("{value}", max).replace("{remaining}", max)
                });
                cv.data("max-text-width", cv.measureText('text').width);
                yBar = balkenEigenschaften.barPos + cv.measureText('text').height / 2 - balkenEigenschaften.barHeight / 2;
                if (balkenEigenschaften.textPos == "left") {
                    var xBar = balkenEigenschaften.barPos + cv.measureText('text').width + 5,
                        xText = balkenEigenschaften.barPos;
                } else {
                    var xBar = balkenEigenschaften.barPos,
                        xText = balkenEigenschaften.barPos + balkenEigenschaften.barWidth + 10;
                }
                var width = balkenEigenschaften.barPos + cv.measureText('text').width + 10 + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
                cv.attr("width", width);
                cv.attr("height", height);
                cv.setLayer('text', {
                    text: getText(value, max, balkenEigenschaften),
                    x: xText,
                }).drawLayers();
                cv.drawRect({
                    layer: true,
                    name: 'background',
                    fromCenter: false,
                    fillStyle: balkenEigenschaften.colorBg,
                    x: xBar, y: yBar,
                    cornerRadius: balkenEigenschaften.cornerRadius,
                    width: balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
                });
                cv.drawRect({
                    layer: true,
                    name: 'bar',
                    fromCenter: false,
                    fillStyle: colorBar,
                    x: xBar, y: yBar,
                    cornerRadius: balkenEigenschaften.cornerRadius,
                    width: value / max * balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
                });
            });
        }
        function sychronisiereBalken(selector) {
            var maxTextWidth = 0;
            $(selector).each(function (index, element) {
                var cv = $(element);
                var currentWidth = cv.data("max-text-width");
                if (currentWidth > maxTextWidth) maxTextWidth = currentWidth;
            });
            $(selector).each(function (index, element) {
                var cv = $(element);
                var balkenEigenschaften = cv.data("balkenEigenschaften");
                if (balkenEigenschaften.textPos == "left") xText = balkenEigenschaften.barPos;
                else xText = balkenEigenschaften.barPos + maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
                cv.setLayer('background', {
                    x: maxTextWidth + balkenEigenschaften.barPos
                }).setLayer('bar', {
                    x: maxTextWidth + balkenEigenschaften.barPos
                }).setLayer('text', {
                    x: xText
                });
                cv.attr("width", balkenEigenschaften.barPos + 2 * maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos)
                    .drawLayers();
            });
        }
        erstelleBalken("#display1", 50, 100);
        erstelleBalken("#display2", 5, 100, {textPos: "left"});
        sychronisiereBalken("#display1, #display2");

Alles anzeigen

Rechtsausrichtung der Texte fehlt noch. Ich halte dies nur für sinnvoll, wenn der Text links vom Balken steht?

Sempervivum

Zitat

Kann man mit JS auf einen Ordner zugreifen? Ohne ajax ?

Nein, auf einen Ordner auf dem Server nur mit Ajax.

Edit: In meinem Posting #3 habe ich vergessen, die PHP-Funktion glob() einzutragen, damit ist es ganz einfach.

Sempervivum

Warum Greasemonkey? Ich verstehe dich so, dass Du eine Slideshow mit den Bildern auf deiner Homepage haben willst?

In dem Fall kannst Du die Bilder sehr einfach mit der PHP-Funktion aus dem Ordner auslesen und das HTML für die Slideshow erzeugen. Für die Slideshow empfehle ich z. B. Cycle2.

Sempervivum

Möglich ist das auf jeden Fall, auch responsiv. Ich stelle mir nur die Frage, ob es praktikabel ist. Um so ein Layout betrachten zu können, braucht man ja immer einen Riesen Bildschirm. Und Sinn macht das Ganze ja nur, wenn in die Kästchen auch Inhalte hinein kommen. Werden sie dafür nicht viel zu klein?

Sempervivum

Herunter skaliert werden müssen die Bilder ja auf jeden Fall, entweder gleich im iPhone oder später auf dem PC. Aus praktischen Gründen würde ich die Bilder jedoch in voller Größe machen und aufbewahren, denn sonst kann man sie später nicht drucken (dafür wäre 300 x 400 viel zu klein) und auch für das Betrachten auf dem PC bildschirmfüllend wären sie zu klein.

Sempervivum

Dazu brauchst Du ein Synchronisationsprogramm, das FTP unterstützt. Ich benutze z. B. gern Freefilesync.

Sempervivum

Stimmt, da hat jeder so seinen eigenen Stil. Was nicht nur reine Geschmackssache ist, ist die Formatierung: Richtiges Einrücken hilft ungemein, den Code zu verstehen und Fehler schnell zu erkennen. Ein guter Editor ist dabei hilfreich. Bei mir Rechtsklick - "Dokument formatieren" und der Code ist übersichtlich, auch wenn er vorher chaotisch aussah.

Sempervivum

Zitat

Danke! Es soll was links im Footer stehen und etwas rechts stehen und das ohne Abstand.

Das kannst Du sehr leicht mit zwei Containern und justify-content: space-between; oder justify-content: center; erreichen, je nachdem, wie es aussehen soll.

Sempervivum

Zitat

Kriege das auf der schnelle nicht hin .

Ich muß jetzt erstmal zur Arbeit. Vieleicht kann sich das in der Zeit ein anderer ankucken und dir helfen.

Wenn ich es richtig verstanden habe, sollte dies es tun:

Code

    <style>
        #wrapper1 {
            display: inline-flex;
            flex-direction: column;
            border: 2px solid lightblue;
        }

        .line {
            display: flex;
            flex-direction: row;
        }

        .box {
            /* width: 12.5vw;
            height: 12.5vw; */
            border: 2px solid lightblue;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .tt {
            position: absolute;
            width: 80%;
            left: 10%;
            text-align: center;
            background-color: aquamarine;
            display: none;
        }
        .box:hover .tt {
            display: block;
        }
    </style>
    <div id="wrapper1">
    </div>
    <input id="nrinput" type="number" min="2" max="10" onchange="go(this.value);">Gib die Anzahl der Kästchen pro Kante ein.
    <script>
        function go(nr) {
            var wrapper = document.getElementById("wrapper1");
            wrapper.innerHTML = "";
            for (var i = 0; i < nr; i++) {
                var line = document.createElement("div");
                line.className = "line";
                wrapper.appendChild(line);
                for (var j = 0; j < nr; j++) {
                    var box = document.createElement("div");
                    box.className = "box";
                    var d = 50 / nr + "vw";
                    box.id = "box-" + (i + 1) + "." + (j + 1);
                    box.style.width = box.style.height = d;
                    box.innerHTML = (i * nr + j + 1);
                    var tt = document.createElement("div");
                    tt.className = "tt";
                    tt.innerHTML = (i +1) + "." + (j + 1);
                    tt.style.top = d;
                    box.appendChild(tt);
                    line.appendChild(box);
                }
            }
        }
        go(5);
    </script>

Alles anzeigen

Hiermit: box.id = "box-" + (i + 1) + "." + (j + 1); habe ich jeder Box eine ID mit Zeilen- und Spaltennummer gegeben. Damit kannst Du dann von Javascript aus darauf zugreifen.

Sempervivum

Zitat

Fals hier einer mitlesen tut und ahnung hat ,der soll bitte was sagen wenn ich es falsch mache. Dannke.

IMO macht ein <ul> ohne <li>-s drin keinen Sinn.

Sempervivum

https://caniuse.com/#feat=css-grid

Zitat

Partial support in IE refers to supporting an older version of the specification.

Ist das das Problem?

Sempervivum

Gern geschehen, ich wünsche ebenfalls einen schönen Rest vom Abend.

Sempervivum

Dann brauchst Du ja eigentlich nur den Header zu verdoppeln und die linke Sidebar zu löschen ...

Sempervivum

Immer diese Anglizismen, tut mir Leid

Du findest es unter dem deutschen Begriff "Datei - Stabelbearbeitung ...".

Beiträge von Sempervivum

arrays

arrays

arrays

canvas Koordinaten

Java Script Bibliotheken

2/6 Kreiss 1/3 Kreiss

Java Script Bibliotheken

arrays

arrays

2/6 Kreiss 1/3 Kreiss

Viele verschiedene Bildgrößen auf eine einheitliche Größe bringen?

Filezilla Anfängerfrage zum Upload

4 x 4 mitFlex

Boxen erstellen

4 x 4 mitFlex

4 x 4 mitFlex

Flexbox vs Grid

Viele verschiedene Bildgrößen auf eine einheitliche Größe bringen?

Boxen erstellen

Viele verschiedene Bildgrößen auf eine einheitliche Größe bringen?