Om Carvers Corner.se konstigt fel. Psykbryt?

C, C++, Pascal, Assembly, Raspberry, Java, Matlab, Python, BASIC, SQL, PHP, etc.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

rvl skrev: 29 mars 2022, 17:57:34 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.
Vist kan det vara önskvärt med flera färger, Kolla länken här på de skyltar jag producerat. scrolla nedåt så kommer det ett gäng.
Användarvisningsbild
rvl
Inlägg: 5720
Blev medlem: 5 april 2016, 14:58:53
Ort: Helsingfors

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

Inlägg av rvl »

Jo jag såg flera exempel i tråden efter att jag tryckt på send. Huvudpoängen var färgvalet, men det verkar litet knepigt.
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 »

Nu har det efter mycket möda och stort besvär blivit möjligt att se hur träslaget ser ut när man designar skylten. Klicka på hjälpknappen för att få information.

Knappen "Registrera" öppnar en modal där man registrerar sina kontaktuppgifter. Där finns även all data som behövs för att tillverka skylten. De ligger i dolda fält. Jag har även lyckats göra en rutin som skapar en PNG:Base64-fil av den färdiga skylten. All data inklusive PNG-bilden sparas i en mySQL databas.
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 »

Nu har jag hittat ett otroligt hjälpmedel. För att få olika färg på de olika små bilderna som man kan flytta upp på skylten så har jag tidigare gjort varje bild i en egen färg. Eftersom det just nu är 10 bilder inlagda med 7 olika färger så har jag alltså fått gjort 70 bilder. Samma gäller ju färgerna på ramarna. Det finns just nu bara 3 olika ramtyper så det skulle bli 30 bilder.

När jag skulle till att börja med ramarna så googlade jag på '"change color on black and white png file with CSS." Det gav resultat kan jag säga. Jag hittade detta fantastiska script.. Om man anger färgkoden för önskad färg så returneras ett filter som ger den önskade färgen via CSS. Grön t.ex ser ut så här:

Kod: Markera allt

.myWhiteColor {
        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(313deg) brightness(109%) contrast(101%);
    }
    
    .myGreenColor {
        filter: invert(24%) sepia(92%) saturate(1808%) hue-rotate(99deg) brightness(98%) contrast(105%);
    }
    
    .myBlueColor {
        filter: invert(8%) sepia(100%) saturate(6315%) hue-rotate(247deg) brightness(103%) contrast(147%);
    }......
Och hur det kan ändra färgen i bilden från svart till grön,vit,blå ...., det är rent trolleri i alla fall för mig. :shock:
Sedan skriver jag in CSS för önskad färg i den svartvita bilden:

<div id="drag1" class="drag myGreenColor" style="float:left;"><img class="img" width="100" height="100" src="assets/img/pngikoner/black/kanin-1-black.png" /></div>

Så kontentan blev att jag nu bara behöver en svartvit bild för att få till alla färger. Det blir ju en klar förbättring när jag skall lägga in nya bilder.

Jag har nu även lagt in vit som användbar både i bild och på ramar. Det går ju att välja svart skylt så det kan vara bra att ha med vita bilder och ramar. Problemet var att de vita bilderna syntes ju inte mot vit bakgrund så jag fick lägga in en bakgrundsfärg med en nyans som medgav bra kontrast mot alla färger som används. Lite "spyig" men den funkar bra.

Först testade jag med att bara lägga bakgrundsfärg på bilderna, men det sket sig ju eftersom även bakgrundsfärgen klonades.

Sedan testade jag med att använda färgändringsfunktionen även när bilden är uppe på skylten men det gick inte att ändra på en bild och sedan ge en annan färg på nästa bild. Samtliga upplagda bilder ändrades till den sist valda färgen. Skall nog även lösa det i sinom tid.

Så här ser det i alla fall ut så här långt.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se Trolleri med färger.

Inlägg av SeniorLemuren »

Har lagt upp ett par video om hur man designar sin skylt i Carvers Corner.

Länk till del 1
Länk till del 2
Länk till Carvers corner
Användarvisningsbild
MadModder
Co Admin
Inlägg: 29905
Blev medlem: 6 september 2003, 13:32:07
Ort: MadLand (Enköping)
Kontakt:

Re: Om Carvers Corner.se Några videosnuttar

Inlägg av MadModder »

Trolleri :) Det är hue-rotate som roterar färgskalan runt färgcirkeln:
färgskala.jpg
Det blir dock olika siffror på filtervärdena varje gång. Vilket det blir på demosidan för filterfunktionen också. :D
Det är väl för att scriptet letar sig fram till närmsta lösningen...

Men går det inte att applicera filtret på samma bild i samma div istället för att ha en massa olika färglager?
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 Några videosnuttar

Inlägg av SeniorLemuren »

Jo. Det jag har gjort så med färgerna på ramarna. Men när jag gjorde färgvalen till bilderna så visste jag inte om att man kunde göra så. Det var mindre jobb att applicera den nya funktionen på redan befintliga lager. Kanske jag ändra det i framtiden. :)
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se Några videosnuttar

Inlägg av SeniorLemuren »

Nu har jag kört fast helt. Jag sitter och jobbar mot en liten laptop men har kopplat en 19" skärm och externt tangentbord till den. Det funkar bra. i mitt program jobbar jag nu med sidan Beställ. När man kommer dit så finns de data på skylten man angivit i designen. samt eventuella priser.

Där visas även en bild på skylten. Jag skapar en png-fil med javascript "canvas"dataURL" som jag även sparar i databasen. Det funkar bra trodde jag, ända till jag körde det med laptopskärmen i stället för den stora skärmen. Då visades ingen bild.

Det visade sig efter mycket funderande att canvas2data inte ger någon data utan bara en liten startsnutt finns i png-filen när laptopskärmen används. Men inga problem om jag ansluter den stora skärmen. Jag har provat lita andra divar med mindre data i men inget läses från laptopskärmen utom en liten header. Kan det vara något strul med grafikkortet som gör att laptopskärmen inte går att läsa?

Gå gärna in och kolla om det funkar i andra laptop om intresse finns.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se konstigt fel. Löst?

Inlägg av SeniorLemuren »

Ja som vanligt när jag frågar något som jag kämpat med i två dagar så snubblar jag på lösningen precis när jag skickat min fråga.

Det är nämligen så att knappen för att registrera måste scrollas fram på laptopen eftersom upplösningen är sämre på den. När jag scrollar så stämmer inte koordinaterna av någon konstig anledning så det blir bara en del av bilden som scrollas. lösningen blir att sätta knappen för registrering längst upp på skärmen så att man inte behöver scrolla. Puuhh.
Användarvisningsbild
MadModder
Co Admin
Inlägg: 29905
Blev medlem: 6 september 2003, 13:32:07
Ort: MadLand (Enköping)
Kontakt:

Re: Om Carvers Corner.se konstigt fel. Löst?

Inlägg av MadModder »

Jag tycker det är en konstig lösning att skapa en bild utefter vad som syns i webbläsarfönstret. Då beror ju resultatet på vad användaren har för storlek på fönstret. :humm:
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se konstigt fel. Löst?

Inlägg av SeniorLemuren »

Javascriptet kopierar allt som finns mellan en angiven div. Så jag anger alltså id på den div som jag vill ha kopierad. Att det inte funkar när man scrollar kan kanske bero på att den div som bilden av skylten ligger i har position: relative; angivet i css. Skall testa lite nu på morgonen. :)
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se konstigt fel. Löst?

Inlägg av SeniorLemuren »

Nu har jag testat lite olika lösningar. Att sätta knappen uppe i rubriken funkar. Om man manuellt scrollar upp till top så fungerar rutinen. Problemet är att om man inte scrollar till max utan det blir en rad kvar till toppen, då funkar det inte. Endast en del av skylten kommer med då.

Det kom mig att testa att scrolla via javascript. Jag avvaktar även i en sekund för att scrollningen säkert skall genomföras innan jag läser av bilden. Detta fungera konstigt nog inte. bilden scrollas visserligen upp till max precis som om man gjort det manuellt men det fungerar bara med manuell scrollning. Så vad är det för skillnad på manuell scroll och window.scrollTo(0, 0); frågar man sig?

Kod: Markera allt

document.getElementById('skjut').addEventListener("click", function() { 
                window.scrollTo(0, 0);
                sleep(1000);               
                 html2canvas(document.getElementById('droppable')).then(function(canvas) {
                    document.body.appendChild(canvas);
                    var imgdata = canvas.toDataURL("image/png");
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se konstigt fel. Löst?

Inlägg av SeniorLemuren »

Mer info. Jag konstaterar att window.scrollTo(0, 0); sleep(1000); inte fungerar. window.scrollTo(0, 0); får ingen verkan för än 1000 ms har gått ut och då gör hinner ju fortfarande inte scrollningen utföras för än html2canvas(document.getElementById('droppable')).then(function(canvas) funktionen drar igång. Så hur skall jag få till en paus tills scrollningen är klar, innan funktionen startar?
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se konstigt fel. Löst?

Inlägg av SeniorLemuren »

Här satt buggen! Fick backa ver. från rc.5 till rc.1 Nu kan man scrolla utan att det påverkar, bara bilden är synlig på skärmen så kopieras den och uppladdas till server.
Hörde jag ett HURRA?

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.7/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.1/dist/html2canvas.min.js"></script>
newerewergiveup.JPG
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Användarvisningsbild
MadModder
Co Admin
Inlägg: 29905
Blev medlem: 6 september 2003, 13:32:07
Ort: MadLand (Enköping)
Kontakt:

Re: Om Carvers Corner.se konstigt fel. LÖST!

Inlägg av MadModder »

Hurra! :tårta: :D
Skriv svar