Om Carvers Corner.se konstigt fel. Psykbryt?

C, C++, Pascal, Assembly, Raspberry, Java, Matlab, Python, BASIC, SQL, PHP, etc.
Användarvisningsbild
Henry
Inlägg: 23588
Blev medlem: 20 april 2005, 02:52:47
Ort: Lund

Re: Om Carvers Corner.se

Inlägg av Henry »

SeniorLemuren skrev: 21 mars 2022, 17:19:42 Det börjar bli dags att samla ihop de bilder som skall kunna väljas till skylten. De är för det mesta i JPG-format från början och behöver göras transparenta. Efter ett kort googlande hittade jag ett onlineprogram där man laddar upp bilden och får tillbaks den transparent på några sekunder. Kanonbra.
Horsehead-1.JPG
horsehead-1-tranp.png
Planer på att man kan ladda upp egna bilder?
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Det blir svårt. Problemet är att det är mycket svårt att få en bild att bli "fräsbar". När man komponerat skylten så skickas ju alla parametrar för den via mail till mig

Ett sätt att lösa det på kunde vara att informera köparen om att han kan skicka med en eller flera önskade bilder på mailen så att jag kan avgöra om det går att använda den direkt, eller om jag måste lägga ned tid på den.

Jag kan ju i så fall meddela köparen om merkostnaden för den önskade bilden, viket kan bli dyrt. En del av bilderna jag använt har jag lagt mer än en timme på för att få dem användbara för fräsning.

Ett annat sätt är ju att gravera bilden med laser. Då kan man i princip använda vilken svartvit bild som helst, men då blir den ju alltid svart och går inte att fylla med färg som man kan göra med en djupfräst bild. Denna skylt har jag lagt laserfigurer på som jag i princip bara laddat hem som svg.
noga kopplat.jpg
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Nu blir det spännande. I denna ver. kan man flytta en bild dit man vill ha den på skylten.
I denna version kan man ändra storlek på bilden om man håller ner muskappen på det lilla krysset längs nbe till höger.
Och aldrig får jag dem att mötas. Några tips?

Rutinen för att ändra storlek är en jquery som heter resizable och används så här på min sida.
I CSS:

Kod: Markera allt

.resizable {
        display: inline-block;
        background: none;
        resize: both;
        overflow: hidden;
        line-height: 0;
    }
    
    .resizable img {
        width: 100%;
        height: 100%;
    }

och i HTML:

Kod: Markera allt

<div class='resizable upperborder-1'>
                    <img src="assets/img/upperborder_1.png" alt="upperborder">  
                </div
Not. upperborder-1 är bara till för att placera bildden under skylten vid start.

Rutinen för att flytta bilden är densamma ssom jag även använder för att flytta på textraderna. Det är ett javascript.

Kod: Markera allt

if (document.getElementById) {
    (function() {
        var n = 500;
        var dragok = false;
        var y = 50,
            x = 50,
            d, dy, dx;

        function move(e) {
            if (!e) e = window.event;
            if (dragok) {
                d.style.left = dx + e.clientX - x + "px";
                d.style.top = dy + e.clientY - y + "px";
                if (e.target.id == "textrad1") {
                    X1 = e.clientX - 533;
                    Y1 = e.clientY - 275;
                    document.getElementById("xtext1").innerHTML = 'Text Rad 1, X =' + X1 + " px";
                    document.getElementById("ytext1").innerHTML = 'Rad 1, Y =' + Y1 + " px";
                }
                if (e.target.id == "textrad2") {
                    X2 = e.clientX - 533;
                    Y2 = e.clientY - 275;
                    document.getElementById("xtext2").innerHTML = 'Text Rad 2, X =' + X2 + " px";
                    document.getElementById("ytext2").innerHTML = 'Rad 2, Y =' + Y2 + " px";
                }
                return false;
            }
        }

        function down(e) {
            if (!e) e = window.event;
            var temp = (typeof e.target != "undefined") ? e.target : e.srcElement;
            if (temp.tagName != "HTML" | "BODY" && temp.className != "dragclass") {
                temp = (typeof temp.parentNode != "undefined") ? temp.parentNode : temp.parentElement;

            }
            if (temp.className == "dragclass") {
                dragok = true;
                temp.style.zIndex = n++;
                d = temp;
                dx = parseInt(temp.style.left + 50);
                dy = parseInt(temp.style.top + 50);
                x = e.clientX;
                y = e.clientY;
                document.onmousemove = move;
                return false;
            }
        }

        function up() {
            dragok = false;
            document.onmousemove = null;
        }

        document.onmousedown = down;
        document.onmouseup = up;

    })();
} //End.
HTML:

Kod: Markera allt

<!--bilder som skall visas på skylten. Dragclass flyttar bilden-->                 
                <div>
                    <img class="dragclass" id="upper" src="assets/img/upperborder_1.png" style="width:420px;top:-110px">  
                </div>
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Glöm föregående fråga. Jag hittade lite nya grepp på google. Den väcker i och för sig nya problem. Men jag återkommer till det. Testa gärna. Om man klickar på bilden så kan man flytta den med musknappen nere. Om man vill ha tag i handtagen i hörnen för att ändra storlek så får man klicka igen.
Här är en länk till den rutin jag byggde vidare på.

Edit Lade till bild
Carvers design test.JPG
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Hjälp önskas.

Jag använder en färdig javascript rutin för att flytta och ändra storlek på en bild. Det fungerar bra. det funkar på så vis att det klonar en bild som man plockar med musen från de bilder som visas till vänster. Man för bilden till önskad position på skylten och släpper den. Det går att flytta den utanför skylten om man inte vill ha den, men jag skulle vilja att det gick att deleta den helt i stället. Det borde ju kunna lösas med typ onClick (this) i javascriptet som hanterar flytt och resize? men det går utanför min komfortzon för tillfället. Dom bilder jag vill ta bort är alltså kaninen och hästen under skylten till höger.
Så här ser rutinen ut.
Länk till sidan.
Exempelbild:
carvers exempelsida.JPG
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Användarvisningsbild
MadModder
Co Admin
Inlägg: 29902
Blev medlem: 6 september 2003, 13:32:07
Ort: MadLand (Enköping)
Kontakt:

Re: Om Carvers Corner.se

Inlägg av MadModder »

Lite off topic, men jag läste först avliveri… :lol:

Det måste ju gå att placera ut ett kryss eller nåt mitt i bilen, precis som de små fyrkanterna runt om när man ska ändra storlek, och utföra en radering med den.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Jag tänkte kanske att man kunde fånga höger musknapp som delete-knapp. När man håller musknappen på själva bilden så aktiveras ju flyttningsrutinen. :humm:
Användarvisningsbild
MadModder
Co Admin
Inlägg: 29902
Blev medlem: 6 september 2003, 13:32:07
Ort: MadLand (Enköping)
Kontakt:

Re: Om Carvers Corner.se

Inlägg av MadModder »

Ett alternativ är ju att använda delete-knappen på tangentbordet.
Det borde gå att bara stoppa in i förflyttningsrutinen.

Exempel för tangenttryckning: https://jsfiddle.net/MadModder/zpayexmj/1/

[edit]
Nä, nu har jag trixat med jquery bra länge och det går inget vidare.
Försökte få till en "papperskorg" att släppa bilderna i, men inget funkar. :humm:
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Problemet är att man inte sätter något id på kopian. Jag gjorde en snutt som visade att det var en img när man klickade med höger musknapp och när jag klickar på den img man vill flytta fick jag även id, men klickar man på kopian blir det blankt i alert när man kollar id.

Ett sätt vore ju kanske att försöka sätta ett id i den rutin som skapar kopian. Men den fattar jag inte mycket av. Men det sista blocket i rutinen använder jag inte. Den flippar bilden upponer. Där kan man ju se att den flippade bilden får en cklass $('#droppable .img').addClass('drag2'); Kanske kan man göra på samma vis för att sätta ett id när kopian skapas. Fast då får man ju se till att det blir olika id på varje kopia som skapas. Jag har inte testat det ännu.

Visar hela rutinen för att dra och resiza:
});

Kod: Markera allt

$(document).ready(function() {
    var x = null;
    //Make element draggable
    $(".drag").draggable({
        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit',
        stack: '.drag',
        revert: "invalid"
    });
    $("#droppable").droppable({
        drop: function(e, ui) {
            if ($(ui.draggable)[0].id != "") {
                x = ui.helper.clone();
                ui.helper.remove();
                x.draggable({
                    //helper: 'original',
                    containment: '#droppable',
                    tolerance: 'fit',
                    stack: '.drag'
                });
                x.resizable({
                    animate: true,
                    //aspectRatio: 16 / 9,
                    helper: "ui-resizable-helper",
                    handles: "n, e, s, w, nw, ne, sw,se"
                });
                x.appendTo('#droppable');
            }
        }
    });
});

$(document).click(function(e) {
    // matches all children of droppable, change selector as needed
    if ($(e.target).closest(".drag").length > 0) {
        $(e.target).closest(".drag").find(".ui-resizable-handle").show();
        $("#tools").show();
    } else {
        $("#droppable").find(".ui-resizable-handle").hide();
        $("#tools").hide();
    }
});

$(function() {
    $('#flip').click(function(e) {
        $('#droppable .img').addClass('drag2');
    });
});
Användarvisningsbild
Lennart Aspenryd
Tidigare Lasp
Inlägg: 12607
Blev medlem: 1 juli 2011, 19:09:09
Ort: Helsingborg

Re: Om Carvers Corner.se

Inlägg av Lennart Aspenryd »

Ett ts dvs time stamp går väl att sätta?
Kanske dags att låta kunder köra denna version oh se vad som ytterligare efterfrågas.
Användarvisningsbild
MadModder
Co Admin
Inlägg: 29902
Blev medlem: 6 september 2003, 13:32:07
Ort: MadLand (Enköping)
Kontakt:

Re: Om Carvers Corner.se

Inlägg av MadModder »

Läste nyss att man bör undvika att använda id för att identifiera element som ska klonas eftersom även id klonas.
Kanske kan använda class istället? :humm:

Men det går tydligen att ändra id.
https://stackoverflow.com/questions/101 ... -change-id

Kanske? :D
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Nu rör det på sig lite. Har tillkommit två knappar. Om man lägger en bild på skylten och klickar på den så får man en knapp för delete och en knapp för att spegelvända bilden. Kan ju vara bra om man vill att hästen skall vända på huvudet.

Ett litet aber finns fortfarande. Det är att man tyvärr raderar alla figurer som man lagt in. Så det gäller att kolla bild för bild, vilka bilder man vill använda innan man lägger upp allihop.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Till er som flitigt har funderat på lösningar så får jag väl informera om hur delete problemet löstes. Till att börja med kan jag konstatera att jag hade lösningen mitt framför mig, men såg den inte. Jag sov oroligt i natt och vaknade flera gånger av att jag körde fast i något javascript. Somnade om och samma problem gick igång igen i drömmarnas värd.

klockan havfem vaknade jag och blev klarvaken av att jag visste precis hur jag skulle lösa problemet. det var klockrent kan man säga. Jag försökte somna om men lyckades inte, så jag klev upp och tände i kaminen, fick i mig lite kaffe och startade upp datorn.

Grejen var den att javascriptet som jag använde för flyttning och resize hade en liten funktion som flippade bilden man lagt på skylten upponer, fötterna upp och huvudet ner kan man säga. Den rutinen tyckte jag inte till en början att jag behövde så jag tog bort knappen till rutinen. Själva rutinen fick ligga kvar.

Det jag hade hittat i min dröm var ju att kan den snutten vända på bilden så kan man säkert kopiera funktionen och få bort bilden med en knapptryckning. Rutinen fugerade på följande vis. När man klickade på knappen så adderades en class till bilden. Den klassen fans redan i CSS och var den som vände på bilden.

Kod: Markera allt

$('#flip').click(function(e) {
        $('#droppable .img').addClass('drag2');
    });
Bilden lystrade alltså till droppable.img och den fick klassen drag2 som ser ut som följer:

Kod: Markera allt

.drag2 {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}
Jag gjorde en egen knapp som ropade på ett eget javascript av samma modeshang

Kod: Markera allt

$('#delete').click(function(e) {

        $('#droppable .img').addClass('drag3');
        $('#droppable .drag').addClass('drag3');
    });
och skapade en CSS som blev så här:

Kod: Markera allt

.drag3 {
    position: absolute;
    display: none;
    top: -2000px;
    left: -2000px;
}
Den skickar bilden och dess container långt bort i fjärran från displayen. det räckte inte med att göra display none, den låg då kvar osynlig på skylten och tog emot klickande, så därför ändrade jag kordinaterna så att den hamnade utanför skärmen. Som grädde på moset så ändrade jag koordinaterna från Y till X i fliprutinen och fick då en rutin som vänder bilden i sidled i stället för upp och ned. :)
Användarvisningsbild
rvl
Inlägg: 5719
Blev medlem: 5 april 2016, 14:58:53
Ort: Helsingfors

Re: Om Carvers Corner.se

Inlägg av rvl »

Vet inte om det är önskvärt med flera färger på samma skylt, men oberoende på det, så vore det "intuitivt" att kunna välja färg efter att man dragit en bild till skylten. Nu verkar det som om man får radera allt och börja om, när man vill byta färg.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se Delete löst.

Inlägg av SeniorLemuren »

Det går inte att byta färg på en bild på något enkelt vis. Det kräver ett rätt så dugligt grafikprogram. i detta fall fungerar
det på så vis att det är färdiga bilder med olika färger som ligger i varsitt lager uppå varandra. När man klickar på en färg så visas just det lagret som har de figurer med den färgen. Man flyttar sedan inte bilden till skylten utan den kopieras och kan således inte ändra färg.
Skriv svar