Skip to content

Can't import previous code #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ghost opened this issue Dec 29, 2020 · 6 comments
Closed

Can't import previous code #40

ghost opened this issue Dec 29, 2020 · 6 comments

Comments

@ghost
Copy link

ghost commented Dec 29, 2020

Hi, thank you for this great OSS.
I've done a lot of drawing, however, I lost my data by browser-back accidently.

I copied css by each times, so I have a backup. However, I couldn't import this big data.

ss 3

I attached my css below, would you kindly find any problems? I had looked in the source, but cannot figured out.

pixel.txt

@ghost
Copy link
Author

ghost commented Dec 29, 2020

update

I thought import data should be css, but actually it's json.

So I do like cat style.css | egrep -op 'rgba\(.+?\)' to get all rgba, and replace it into json code.
However, css looks lack of some pixels......it's broken

ss 4

seems like there is no way to recover...
(also, save data has maximum, I reached a maximum and save data later that has gone.)

@jvalen
Copy link
Owner

jvalen commented Dec 29, 2020

Hi! I'm so sorry to hear that you lost your browser data, however having the CSS info we may be able to recover your project.

The problem here it is exactly what you pointed out in the second message, the data that you stored was the CSS data but the data that you need to import a project is a bit different, which includes more info such as: all frames info, palette colors, num columns and num rows (you can find an example in the EXPORT section), in a format like the following:

{
    "frames":[
        {
            "grid":["rgba(0, 150, 136, 1)","rgba(255, 193, 7, 1)","rgba(255, 205, 210, 1)","rgba(96, 125, 139, 1)"],
            "interval":100,
            "key":"WIP_8OSqT3v"
        }
    ],
    "paletteGridData":[
        {"color":"rgba(0, 0, 0, 1)","id":"FrSXqI8Nd"},
        {"color":"rgba(255, 0, 0, 1)","id":"DjZxl1-zr6"},
        {"color":"rgba(233, 30, 99, 1)","id":"gKvYwI26BY"},
        {"color":"rgba(156, 39, 176, 1)","id":"t7J_iURRV1"},
        {"color":"rgba(103, 58, 183, 1)","id":"XthWxFBPIV"},
        {"color":"rgba(63, 81, 181, 1)","id":"Bs-XhnhcAK"},
        {"color":"rgba(33, 150, 243, 1)","id":"ONkN40Slzd"},
        {"color":"rgba(3, 169, 244, 1)","id":"mS0oI6DIIe"},
        {"color":"rgba(0, 188, 212, 1)","id":"hq0VF4Przq"},
        {"color":"rgba(0, 150, 136, 1)","id":"zCWW4qh40K"},
        {"color":"rgba(76, 175, 80, 1)","id":"4jrSo_GRGh"},
        {"color":"rgba(139, 195, 74, 1)","id":"-lX0QCEbT6"},
        {"color":"rgba(205, 220, 57, 1)","id":"vi-7JHYFk6"},
        {"color":"rgba(158, 224, 122, 1)","id":"mSVRgWqvix"},
        {"color":"rgba(255, 235, 59, 1)","id":"5jhW5Qes4T"},
        {"color":"rgba(255, 193, 7, 1)","id":"IsBOoIy2TL"},
        {"color":"rgba(255, 152, 0, 1)","id":"CS6M-SRx7QS"},
        {"color":"rgba(255, 205, 210, 1)","id":"uw4m2z_n05x"},
        {"color":"rgba(255, 87, 34, 1)","id":"Pa2OBZKhHbi"},
        {"color":"rgba(121, 85, 72, 1)","id":"TuUzLCUmScS"},
        {"color":"rgba(158, 158, 158, 1)","id":"UVy5gplsOl4"},
        {"color":"rgba(96, 125, 139, 1)","id":"FBzbNoWbXlw"},
        {"color":"rgba(48, 63, 70, 1)","id":"VRYTiPT3aYS"},
        {"color":"rgba(255, 255, 255, 1)","id":"M-guN3WiDfh"},
        {"color":"rgba(56, 53, 53, 1)","id":"zyaqOCQhj0s"},
        {"color":"rgba(56, 53, 53, 1)","id":"ZPA689U3-qg"},
        {"color":"rgba(56, 53, 53, 1)","id":"gZLb4-a6vKJ"},
        {"color":"rgba(56, 53, 53, 1)","id":"F110Ybv4XZJ"},
        {"color":"rgba(56, 53, 53, 1)","id":"qNg-bBpId7x"},
        {"color":"rgba(56, 53, 53, 1)","id":"1yTr9I_90Cn"}
    ],
    "cellSize":10,
    "columns":1,
    "rows":1,
    "animate":false
}

I can try to create a script to recover your work, the only thing I would need is the number of columns of your drawing.

@ghost
Copy link
Author

ghost commented Dec 29, 2020

@jvalen
Thank you very much for your kindness!
Yes, below is the all information in exported format.

tt.txt

I'm now coming to recover. Below is what I found. Maybe this is a bug.

  • If I export css, every cells on last column has gone. Therefore I needed to add like cat style.css | egrep -op 'rgba\(.+?\)' -> gsed -i '0~107 a\"rgba(17,26,31,1)",\' grid.json (I have 108 columns.)

As you see, it's almost recovering. Only 5 pixels are still gone, so dog's nose is broken. And I think missing cells are maybe transparent cells. I'm gonna dig more.
ss 5

P.S.

It was transparent as I expected.

# colors that occured 5 times is only `""`.

❯ cat test.colors| sort | uniq -c
   1
   5             "",
  84             "rgba(0, 0, 0, 1)",
  80             "rgba(0, 150, 136, 1)",
  84             "rgba(0,150,136,1)",
1699             "rgba(10,10,27,1)",
  94             "rgba(121, 85, 72, 1)",
3683             "rgba(15,9,23,1)",
 114             "rgba(16,51,51,1)",
 435             "rgba(17,26,31,1)",
  10             "rgba(19,51,63,1)",
  33             "rgba(225,138,36,1)",
2024             "rgba(23,43,64,1)",
 135             "rgba(251,200,109,1)",
  13             "rgba(255, 255, 255, 1)",
1055             "rgba(26,37,50,1)",
 597             "rgba(27,65,56,1)",
2305             "rgba(31,152,173,1)",
 180             "rgba(35,115,178,1)",
 704             "rgba(35,65,43,1)",
1333             "rgba(38,71,124,1)",
   2             "rgba(48, 63, 70, 1)",
 570             "rgba(60,83,132,1)",
 122             "rgba(89,122,103,1)",
 190             "rgba(9,12,16,1)",
   1             "rgba(96, 125, 139, 1)",

@jvalen
Copy link
Owner

jvalen commented Dec 29, 2020

Really good work finding the issue!

Using the current version of the app, the colors should appear always as rgba for both export and CSS output , for instance:

  • Transparent: rgba(158,158,158,0)
  • With some transparency: rgba(255,205,210,0.1)
  • Full opacity: rgba(255, 235, 59, 1)

Is this an old drawing or you created it recently?

I got a slightly different result than yours though, using the original CSS of your first message (pixel.txt), I'm missing only 3 pixels, that happen to be transparent, see in the image below (I just set the background-color to red and use your CSS).

image

In the project imported I only need 107 columns instead of 108, (rows don't matter), as you can see in the following screenshot:

image

I hope it helps!
I love your drawing by the way, it's really nice!

Please let me know if you need further assistance, I'll be happy to help!

@ghost
Copy link
Author

ghost commented Dec 29, 2020

@jvalen

Is this an old drawing or you created it recently?

I created this since 5 days ago.

Thank you for your support!
Yes, as you said it's only 3 pixels. I got wrong. (however, missing the last column is still problem, maybe?)
Now I noticed filling those three pixels solve the problem!

Pixel_Art_to_CSS

I really appreciate your support.


I love your drawing by the way, it's really nice!

Thank you! I've always wanted to create some drawing from childhood, but I've never.
Now I found this OSS and got motivated so much, and have begun drawing for the first time in my life!

This OSS is really great, I appreciate so much.
When I finish drawing, I'll tell this OSS to reddit friends!

@ghost
Copy link
Author

ghost commented Dec 29, 2020

solved.

@ghost ghost closed this as completed Dec 29, 2020
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant