Beiträge von Sempervivum

Sempervivum

Nach allem was mir bekannt ist, geht das mit CSS nicht. Die einzige Lösung, die mir einfällt ist, mit Canvas das Bild zu zeichnen. Dann hat man Zugriff auf die Pixel, kann die Farbe ermitteln und die Hintergrundfarbe des Containers setzen. Kannst Du das nicht manuell machen oder muss es sich dynamisch verschiedenen Bildern anpassen?

Sempervivum

Dieses:

Code

    var img=document.getElementById("NAME DER BILDDATEI");
    ctx.drawImage(img,(ctx.canvas.width-200)/2,0);

führt zu einem Fehler, da das betr. img-Element nicht definiert ist. Ich habe es deshalb hinzu gefügt und unsichtbar gemacht.

Und dieses:

Code

ctx.globalCompositeOperation='source-atop';

verhindert anscheinend das Füllen. Ich kenne es noch nicht und habe es zunächst mal auskommentiert. Ebenso das Füllen, weil es dann alles andere überschreibt.

Dies funktioniert dann bei mir:

Code

    <canvas width="1000" height="490" id="canvas">Sorry, no canvas available</canvas>
    <img id="das-bild" src="images/dia0.jpg" />
    <style>#das-bild {display: none;}</style>
    <div id="content">
        <h1>Test Logo Generator</h1>

        <input type="text" id="tgroup" placeholder="Test"><br>
        <h3>Logo:</h3>
        <a href="#" class="button-link" id="blue">Blue</a>
    </div>
    <script>
        window.onload = function () {
            function getGroup() {
                return document.getElementById('tgroup').value.trim();
            }
            function drawCanvas(color, c) {
                var ctx
                if (!c) {
                    var canvas = document.getElementById('canvas'),
                    ctx = canvas.getContext('2d');
                } else {
                    ctx = c
                }

                ctx.font = '12.76px EB Garamond';
                var wit = ctx.measureText(getGroup().toUpperCase()).width
                ctx.canvas.width = 200

                ctx.canvas.height = 101
                ctx.font = '12.76px EB Garamond';
                ctx.globalCompositeOperation = 'source-over';
                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                ctx.fillStyle = color;

                ctx.textAlign = 'center';

                var img = document.getElementById("das-bild");
                ctx.drawImage(img, (ctx.canvas.width - 200) / 2, 0);
                ctx.fillText("Test", ctx.canvas.width / 2, 75);
                ctx.fillText(getGroup().toUpperCase(), ctx.canvas.width / 2, 98);
                //ctx.globalCompositeOperation = 'source-atop';
                //ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            }
            document.getElementById('blue').addEventListener('click', function () {
                var format = "png";
                drawCanvas("rgb(10,48,135)");
                var canvas = document.getElementById('canvas');
                var dataURL = canvas.toDataURL();
                $.ajax({
                    type: "POST",
                    url: "savepic.php",
                    data: { img: dataURL }
                }).done(function (msg) {
                    alert(msg);
                });
            });
        }
    </script>

Alles anzeigen

Und, soweit ich mir erinnere, muss das Upload-Verzeichnis existieren, damit das Hochladen funktioniert.

Sempervivum

Und ja, die Werte (values) sind die Mutltiplikatoren. Wahrscheinlich wäre es klarer gewesen, wenn ich data-Attribute mit dem richtigen Namen verwendet hätte.

Sempervivum

Anscheinend habe ich mir da etwas angewöhnt, was eine Unart ist und im IE nicht funktioniert: Darauf zu vertrauen, dass DOM-Elemente mit einer ID als globale Variablen zur Verfügung stehen.

Verwendest Du den IE? Dann versuche dieses:

Code

    <form>
        Gewicht: <input id="gewicht" />
        Material:
        <select id="material">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leine</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis"></span>
    </form>
    <script>
            function berechnen() {
                var valgewicht = gewicht.value;
                var idxmaterial = material.selectedIndex;
                var preis = material.options[idxmaterial].value;
                if (valgewicht != "" && idxmaterial != 0) {
                    ergebnis.innerHTML = valgewicht * preis + ' €';
                } else {
                    ergebnis.innerHTML = "";
                }
            }
            var gewicht = document.getElementById("gewicht");
            var material = document.getElementById("material");
            var ergebnis = document.getElementById("ergebnis");
            gewicht.addEventListener("input", berechnen);
            material.addEventListener("change", berechnen);
    </script>

Alles anzeigen

Sempervivum

Probiere dieses:

Code

    <form>
        Gewicht: <input id="gewicht" />
        Material:
        <select id="material">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leine</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis"></span>
        <script>
            function berechnen() {
                var valgewicht = gewicht.value;
                var preis = material.options[material.selectedIndex].value;
                if (valgewicht != "" && material.selectedIndex != 0) {
                    ergebnis.innerHTML = valgewicht * preis + ' €';
                }
            }
            gewicht.addEventListener("input", berechnen);
            material.addEventListener("input", berechnen);
        </script>
    </form>

Alles anzeigen

Ich habe es ohne Berechnen-Button gemacht. so dass das Ergebnis sofort angezeigt wird. Natürlich kannst Du auch solch einen Button hinzu fügen.

Sempervivum

Das erste scheint mir einfacher zu sein. Hast Du es damit versucht?

Sempervivum

Das ist kein Problem: Für jeden Kreis definierst Du ein Display-Canvas mit jeweils einer anderen ID und die Funktionen rufst Du mehrmals, jeweils mit der richtigen ID auf. Würde dann so aussehen:
https://jsfiddle.net/Sempervivum/u4x71bvr/2/

Wenn alle Kreise gleich aussehen sollen und die selben Maximalwerte haben, kannst Du auch eine Klasse vergeben und die Initialisierung darauf machen.

Sempervivum

Hast Du es mit dem Timer genau so gemacht wie bei Stackoverflow beschrieben? Poste doch mal den Code.

Sempervivum

Schau mal ob dies dir weiter hilft:
https://stackoverflow.com/questions/3196…brary-is-loaded

Demnach wird Angular asynchron geladen.

Sempervivum

Ich denke, Angular baut auf jQuery auf. Ändere mal die Reihenfolge:

// @require https://code.jquery.com/jquery-2.1.3.min.js

// @require https://cdn.rawgit.com/brinley…er/libs/jSignature.min.js

// @require https://cdnjs.cloudflare.com/a…r.js/1.4.2/angular.min.js

Sempervivum

Nein, so wie Du es beschreibst, funktioniert es leider nicht, weil die Kreise keine HTML-Elemente sondern Layers von jCanvas sind.

Ich habe mal etwas ausgearbeitet, was deinen Wunsch erfüllen sollte:

HTML

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
    <canvas id="display" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val" />
    <script>
        // hier wird ein Eventlistener für das input-Feld
        // mit der ID "val" (Zeile 12) registriert
        // staende dieses Skript im Head, wäre dieses input-Feld noch nicht definiert
        $("#val").on("change", function () {
            updateCircleDisplay("#display", this.value);
        });

        function getColor(value, opts) {
            if (opts.threshold) {
                if (value < opts.threshold) return opts.colorCircle;
                else return opts.colorAbove;
            } else {
                return opts.colorCircle;
            }
        }
        function updateCircleDisplay(selector, value) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var deg = value / max * 360;
                canv.setLayer('text', {
                    text: canv.data("opts").templateText.replace("{value}", value),
                }).stopLayer('circle')
                .animateLayer('circle', {
                    end: deg,
                    strokeStyle: getColor(value, canv.data("opts"))
                }, {
                    duration: 1000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        console.log(now, fx);
                    }
                });
            });
        }
        function createCircleDisplay(selector, value, max, options) {
            var opts = {
                radius: 100,
                colorCircle: "blue",
                strokeWidthCircle: 20,
                colorBgCircle: "lightgrey",
                strokeWidthBgCircle: 20,
                colorText: "orange",
                templateText: "{value} $",
                threshold: 50,
                colorAbove: 'green'
            }
            $.extend(opts, options);

            // hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen
            // siehe Aufruf der Funktion in Zeile 94
            // staende dieses Skript im Head, waere dieses Element noch nicht definiert
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                canv.data("opts", opts);
                canv.data("max", max)
                var deg = value / max * 360;
                var colorCircle = getColor(value, opts);
                var size = 2 * opts.radius + opts.strokeWidthCircle;
                var pos = opts.radius + opts.strokeWidthCircle / 2;
                canv.attr("width", size);
                canv.attr("height", size);
                canv.drawArc({
                    layer: true,
                    name: 'circle2',
                    strokeStyle: opts.colorBgCircle,
                    strokeWidth: opts.strokeWidthBgCircle,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: 360
                });
                canv.drawArc({
                    layer: true,
                    name: 'circle',
                    strokeStyle: colorCircle,
                    strokeWidth: opts.strokeWidthCircle,
                    rounded: true,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: deg
                });
                canv.drawText({
                    layer: true,
                    name: 'text',
                    fillStyle: opts.colorText,
                    strokeWidth: 4,
                    x: pos, y: pos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: opts.templateText.replace("{value}", value)
                });
            });
        }
        createCircleDisplay('#display', 80, 100, {
            threshold: 60,
            colorCircle: 'red',
            colorAbove: 'green'
        });

    </script>

</body>
</html>

Alles anzeigen

Eine coole Erweiterung wäre jetzt noch, wenn der Text nicht springt sondern während der Animation herauf- bzw. herunter gezählt würde :-;

Sempervivum

Da haben wir ja einen gemeinsamen Hintergrund. Ich habe auch mit Assembler angefangen und mich mit Leiterplatten beschäftigt. Ist aber lange her ...

Sempervivum

Hallo Basti, gut gemacht! Bei der Ermittlung der Koordinaten getAbsoluteX und getAbsoluteY hättest Du vorteilhaft nur eine Funktion verwenden und x und y in einem Objekt zurück geben können, wie wir es in anderem Zusammenhang mal besprochen hatten.

Hallo Yamah, dann poste noch Mal den neuen Code und das CSS, das dort eingebunden wird.

Sempervivum

Ich habe die Developertools von meinem Browser Opera verwendet, da ist ein Debugger eingeschlossen. Gibt es bei jedem gängigen Browser.

Sempervivum

Bei diesem:

HTML

<html>
<link href="MyGame.css" type="text/css" rel="stylesheet">
<head>
<title>
MyAnimation
</title>
<body>
<center>
<font face="arial" color="White" size="7">
Black'n
<font face="arial" color="Black" size="7">
White
</font>
</center>
<style>
</style>
<script>
</script>
</body>
</head>
</link>
</html>

Alles anzeigen

ist die Struktur völlig daneben:

Kein Doctype, </link> überflüssig, <link> gehört in den Head, schließendes </head> fehlt, <center> veraltet.

So wäre die Struktur richtig:

HTML

<doctype html>
<html>
<head>
<title>
MyAnimation
</title>
<link href="MyGame.css" type="text/css" rel="stylesheet">
</head>
<body>
<font face="arial" color="White" size="7">
Black'n
<font face="arial" color="Black" size="7">
White
</font>
<style>
</style>
<script>
</script>
</body>
</html>

Alles anzeigen

Sempervivum

Der Debugger bringt es an den Tag: Die Reihenfolge stimmt nicht: Der Code für die Validierung wird ausgeführt bevor die Combobox erzeugt wird. Lösung, indem Du beide Codes in je einer Funktion unter bringst und diese in der richtigen Reihenfolgen aufrufst.

html-seminar.de/woltlab/attachment/1238/

Sempervivum

Zitat

Alleine funktioniert das Script, bei mir jedoch nicht.

Wie meinst Du das? Ja, es funktioniert einwandfrei. Funktioniert es bei dir nicht, wenn Du es in eine andere Seite einbettest? Dann poste die URL dieser Seite, damit man den Fehler finden kann.

Sempervivum

Hallo und willkommen im Forum,

bei deiner Testseite steige ich leider nicht durch.

Zitat

den validator konnte ich leider so nicht mit einbinden, daher gibt es als Datei einzeln dazu.

Eine solche Datei kann ich nicht finden. Hast Du statt dessen das JS des Validators inline in die HTML-Datei kopiert?

Sempervivum

Zitat

Dann habe ich im Internet ein paar standart Scripts in den Editor kopiert, was auch nicht klappte.

Man findet allerdings einige Skripts, die so etwas realisieren. Suche noch einmal eines aus, von dem Du glaubst, dass es passt und poste den Code wenn es nicht funktioniert.

Wenn Du nur einen Kreis bewegen willst, reicht es aus, wenn Du eine Lösung mit HTML, CSS und Javascript nimmst. Soll das Spiel später etwas ausgefeilter werden, solltest Du überlegen, ob Du gleich mit Canvas oder SVG anfängst, jeweils mit einer Bibliothek wie z. B. jCanvas oder d3.js für SVG.

Sempervivum

Was das 10x10-div betrifft, zwei Empfehlungen:

1. Vergiss document.write, nicht nur, weil es in Userscript nicht geht, sondern weil das Ergebnis auch sonst schwer zu durchschauen ist.

2. Verwende absolute Positionierung nur, wenn es unbedingt nötig ist, z. B. weil Du Elemente übereinander anordnen willst, wie bei der Animation. Häufig schafft sie mehr Probleme als sie löst.

Versuche dies:

Code

<script>
        var ff = document.createElement("div");
        ff.id = 'ff';
        document.getElementsByTagName('body')[0].appendChild(ff);
        var nrcols = 10, nrrows = 10;
        for (var i = 0; i < nrrows; i++) {
            var row = document.createElement("div");
            ff.appendChild(row);
            for (var j = 0; j < nrcols; j++) {
                var box = document.createElement("div");
                box.className = "gridbox";
                row.appendChild(box);
            }
        }
    </script>
    <style>
        .gridbox {
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: top;
        }
        #ff div:nth-child(odd) .gridbox:nth-child(odd) {
            background-color: blue;
        }
        #ff div:nth-child(odd) .gridbox:nth-child(even) {
            background-color: lightgray;
        }
        #ff div:nth-child(even) .gridbox:nth-child(even) {
            background-color: blue;
        }
        #ff div:nth-child(even) .gridbox:nth-child(odd) {
            background-color: lightgray;
        }
    </style>

Alles anzeigen

Das Wechselmuster habe ich mal mit CSS gemacht. In diesem Fall könnte man es auch erzeugen, indem man mit dem Skript verschiedene Klassen für odd und even anlegt.

Beiträge von Sempervivum

Hintergrundbild mit alternative Farbe

Canvas Datei auf Server per PHP speichern

Gewicht berechnen

Gewicht berechnen

Gewicht berechnen

allgemeine fragen zu Javascript

Java Script Bibliotheken

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

Java Script Bibliotheken

Combobox mit jquery und Formvalidator

Objektsteuerung

Combobox mit jquery und Formvalidator

Objektsteuerung

Combobox mit jquery und Formvalidator

Objektsteuerung

Combobox mit jquery und Formvalidator

Objektsteuerung

allgemeine fragen zu Javascript