记一次更新潘通色TPG&TCX电子文档

第一次尝试解析TCX
第二次尝试解析TPG
第三次一次到位TCX&TPG

一、获得Pantone官网数据

最近又登了一次潘通官网，查询颜色时，偶然发现，不知道啥时候官网改版了，可以通过控制台源码查看到色块颜色了，而且颜色值与我之前整理的还不一样。
奸笑~
那么，老样子，通过浏览器控制台窗口，检查元素，将结果保存到一个文件中。

这里需要调节下缩放，使所有的元素都显示出来，否则在控制台窗口，复制出来的数据不完整。
通过这里切换TCX和TPG两个颜色系统

二、格式化数据

不得不说，现在AI工具挺好用的，让AI生成一段代码，帮我们把结果检索出来吧。

	<script type="text/javascript" src="PANTONE TCX2625.js"></script>
	<script>
    // 将HTML字符串转换为DOM对象
    const parser = new DOMParser();
    const htmlDoc = parser.parseFromString(str, 'text/html');

    // 初始化结果对象
    const result = [];

    // 遍历DOM结构，提取id和background-color属性值
    const chipContainers = htmlDoc.querySelectorAll('[data-testid="grid-chip-container"]');
    chipContainers.forEach((container) => {
    const childDiv = container.querySelector('.MuiBox-root');
    if (childDiv) {
      const id = childDiv.getAttribute('id');
      const bgColor = childDiv.style.backgroundColor;

      // 提取并存储rgb值，同时处理id
      if (id && bgColor.startsWith('rgb')) {
        const rgbMatch = bgColor.match(/\d+/g);
        if (rgbMatch) {
          const cleanedId = id.replace('color-', '').replace(' TCX', '');
          const rgbString = `${rgbMatch.join(', ')}`;
          
          const kv = {
            id: cleanedId,
            rgb: rgbString
          }

          result.push(kv);
        }
      }
    }
    });

    // 构建并输出JSON字符串
    const jsonStr = JSON.stringify(result, null, 2);
    console.log(jsonStr);
	</script>

同样的，把输出的结果分别保存到一个TCX.txt、TPG.txt文件中，稍后我们会使用。

三、分析数据

第一个文件是通过之前解析TPG时得到的，可以看下文章开头给到的链接
通过分析可以得知，TCX与TPG共用一个编号系统，差别就是结尾用了TGP或TCX做区分，只是rgb值不一样，而十六进制颜色可以通过十进制换算得出。（ps.最新的到信息里，编号为17-3938的色号是在2020年的2625个颜色的基础上，于2022年新增加的，文中并不对此做处理）
操作：分别读取三个文件，通过TCX.txt中的id查询其其他信息(所在页码、行、名称)，然后整理成一个新的数据结构，并保存结果。

using Newtonsoft.Json;
using System;
using System.Text;

namespace PantoneColor
{
    internal class Program
    {
        public class PantonePageInfo
        {
            public string nr;
            public string hexCode;
            public string page;
            public int row;
            public string rgb;
            public string name;
        }
        public class Color
        {
            public string hexCode, rgb;
            public Color(KV kv)
            {
                rgb = kv.rgb;
                hexCode = RgbToHex(rgb);
            }
            public override string ToString()
            {
                return $"{{\"hexCode\":\"{hexCode}\",\"rgb\":\"{rgb}\"}}";
            }
            string RgbToHex(string rgbString)
            {
                // 从RGB字符串中提取每个十进制数值
                string[] rgbValuesStr = rgbString.Split(',');
                int[] rgbValues = Array.ConvertAll(rgbValuesStr, s => int.Parse(s.Trim()));

                // 将每个十进制数值转换为两位十六进制字符串，并确保以0填充不足两位的值
                StringBuilder hexBuilder = new StringBuilder("#");
                foreach (int value in rgbValues)
                {
                    hexBuilder.Append(((value & 0xFF).ToString("X2")));
                }

                return hexBuilder.ToString();
            }
        }
        public class KV
        {
            public string id;
            public string rgb;
        }
        public class Pantone
        {
            public string nr;
            public Color tcx;
            public Color tpg;
            public string page;
            public int row;
            public string name;

            public static Pantone ToPantone(PantonePageInfo info)
            {
                Pantone pantone = new Pantone();
                pantone.nr = info.nr.Replace("PANTONE ", "").Replace(" TPG", "");
                pantone.page = info.page;
                pantone.row = info.row;
                pantone.name = info.name;
                return pantone;
            }
            public override string ToString()
            {
                return $"{{" +
                    $"\"nr\":\"{nr}\"," +
                    $"\"tcx\":{tcx}," +
                    $"\"tpg\":{tpg}," +
                    $"\"page\":\"{page}\"," +
                    $"\"row\":{row}," +
                    $"\"name\":\"{name}" +
                    $"\"}}";
            }
        }
        static void Main(string[] args)
        {
            KV[] tcxs = GetKVs("TCX.txt");
            KV[] tgps = GetKVs("TGP.txt");

            using (FileStream fs1 = new FileStream("PantoneColorJson.txt", FileMode.Open, FileAccess.Read))
            {
                StreamReader reader = new StreamReader(fs1, Encoding.Default);
                string json = reader.ReadToEnd();
                reader.Close();

                PantonePageInfo[] pageInfos = JsonConvert.DeserializeObject<PantonePageInfo[]>(json);
                fs1.Close();
                using (FileStream fs2 = new FileStream("Pantone.txt", FileMode.Create, FileAccess.Write))
                {
                    StreamWriter writer = new StreamWriter(fs2, Encoding.UTF8);

                    for (int i = 0; i < pageInfos.Length; i++)
                    {
                        Pantone pantone = Pantone.ToPantone(pageInfos[i]);
                        KV tgp = GetKV(tgps, pantone.nr);
                        KV tcx = GetKV(tcxs, pantone.nr);
                        if (tgp == null)
                        {
                            Console.WriteLine("Can't find TGP: " + pantone.nr);
                            continue;
                        }
                        if (tcx == null)
                        {
                            Console.WriteLine("Can't find TCX: " + pantone.nr);
                            continue;
                        }
                        pantone.tpg = new Color(tgp);
                        pantone.tcx = new Color(tcx);

                        if (i == 0)
                        {
                            writer.WriteLine($"[{pantone},");
                        }
                        else if (i == pageInfos.Length - 1)
                        {
                            writer.WriteLine($"{pantone}]");
                        }
                        else
                        {
                            writer.WriteLine($"{pantone},");
                        }

                        Console.WriteLine(pantone.nr);
                    }

                    writer.Close();
                    fs2.Close();

                }
            }

            Console.WriteLine("Write Over! Press Any Key To Continue!");
        }
        public static KV GetKV(KV[] kvs, string nr)
        {
            for (int i = 0; i < kvs.Length; i++)
            {
                if (nr.Equals(kvs[i].id))
                {
                    return kvs[i];
                }
            };
            return null;
        }
        public static KV[] GetKVs(string jsonPath)
        {
            using (FileStream fs = new FileStream(jsonPath, FileMode.Open, FileAccess.Read))
            {
                StreamReader reader = new StreamReader(fs, Encoding.Default);
                string txt = reader.ReadToEnd();
                KV[] kvs = JsonConvert.DeserializeObject<KV[]>(txt);
                reader.Close();
                fs.Close();

                return kvs;
            }
        }
    }
}

就可以得到这样一个整合过的数据了：

[
	{
		"nr": "11-4001",
		"tcx": {
			"hexCode": "#EDF1FF",
			"rgb": "237, 241, 255"
		},
		"tpg": {
			"hexCode": "#F0F0F1",
			"rgb": "240, 240, 241"
		},
		"page": "1.001",
		"row": 1,
		"name": "Brilliant White"
	},
	{
		"nr": "11-0601",
		"tcx": {
			"hexCode": "#F4F9FF",
			"rgb": "244, 249, 255"
		},
		"tpg": {
			"hexCode": "#F5F7F6",
			"rgb": "245, 247, 246"
		},
		"page": "1.001",
		"row": 2,
		"name": "Bright White"
	},
	{
		"nr": "11-0700",
		"tcx": {
			"hexCode": "#F4F7FF",
			"rgb": "244, 247, 255"
		},
		"tpg": {
			"hexCode": "#F3F4F4",
			"rgb": "243, 244, 244"
		},
		"page": "1.001",
		"row": 3,
		"name": "Lucent White"
	},
	···
	···
	···
]

收工~