Svenska ElektronikForumet

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.

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.

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.

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: 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.
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.

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

Trolleri Det är hue-rotate som roterar färgskalan runt färgcirkeln: Det blir dock olika siffror på filtervärdena varje gång. Vilket det blir på demosidan för filterfunktionen också.
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?

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.

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.

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.

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.

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.

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?

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?

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>

Hurra!