RGB转Philips Hue(HSB)

19

我正在用Processing制作一个音乐播放器,这是我的学校任务。我想使用飞利浦Hue灯来制造一些相应的视觉效果。我希望为每首歌曲创建独特的视觉效果。

所以我通过LastFM API获取了当前播放曲目的封面艺术品,以获取最频繁的颜色,并将其用作创建其他颜色的基础。

飞利浦Hue以不同的方式显示颜色,即HSB。因此,我通过 Color.RGBtoHSB(); 进行了转换。

例如,对于R = 127,G = 190,B = 208,它给出了H = 0.5370371,S = 0.38942307,B = 0.8156863的值。现在我猜它们是基于1计算的,所以我将亮度和饱和度乘以255。色调乘以65535。(如 http://developers.meethue.com/1_lightsapi.html 中所示)

将这些计算出的值设置到飞利浦Hue中时,无论播放什么歌曲,颜色总是偏红或白色。

RGB和HSB之间的转换是否有问题?

根据受欢迎的要求,以下是我的代码:

作为测试:

Color c = Colorconverter.getMostCommonColour("urltoimage");
float[] f = Colorconverter.getRGBtoHSB(c);
ArrayList<Lamp> myLamps = PhilipsHue.getInstance().getMyLamps();
State state = new State();
state.setBri((int) Math.ceil(f[2]*255));
state.setSat((int) Math.ceil(f[1]*255));
state.setHue((int) Math.ceil(f[0]*65535));
state.setOn(true);
PhilipsHue.setState(myLamps.get(1), state);

如上所示的函数

    public static Color getMostCommonColour(String coverArtURL) {
            Color coulourHex = null;
            try {
                BufferedImage image = ImageIO.read(new URL(coverArtURL));
                int height = image.getHeight();
                int width = image.getWidth();

                Map m = new HashMap();
                for (int i = 0; i < width; i++) {
                    for (int j = 0; j < height; j++) {
                        int rgb = image.getRGB(i, j);
                        int[] rgbArr = getRGBArr(rgb);
                        // No grays ...
                        if (!isGray(rgbArr)) {
                            Integer counter = (Integer) m.get(rgb);
                            if (counter == null) {
                                counter = 0;
                            }
                            counter++;
                            m.put(rgb, counter);
                        }
                    }
                }

                coulourHex = getMostCommonColour(m);
                System.out.println(coulourHex);
            } catch (IOException e) {
                e.printStackTrace();
            }
            return coulourHex;
        }

    private static Color getMostCommonColour(Map map) {
            List list = new LinkedList(map.entrySet());
            Collections.sort(list, new Comparator() {
                public int compare(Object o1, Object o2) {
                    return ((Comparable) ((Map.Entry) (o1)).getValue())
                            .compareTo(((Map.Entry) (o2)).getValue());
                }
            });
            Map.Entry me = (Map.Entry) list.get(list.size() - 1);
            int[] rgb = getRGBArr((Integer) me.getKey());
            String r = Integer.toHexString(rgb[0]);
            String g = Integer.toHexString(rgb[1]);
            String b = Integer.toHexString(rgb[2]);
            Color c = new Color(rgb[0], rgb[1], rgb[2]);
            return c;
        }
private static int[] getRGBArr(int pixel) {
        int alpha = (pixel >> 24) & 0xff;
        int red = (pixel >> 16) & 0xff;
        int green = (pixel >> 8) & 0xff;
        int blue = (pixel) & 0xff;
        return new int[] { red, green, blue };

    }

    private static boolean isGray(int[] rgbArr) {
        int rgDiff = rgbArr[0] - rgbArr[1];
        int rbDiff = rgbArr[0] - rgbArr[2];
        // Filter out black, white and grays...... (tolerance within 10 pixels)
        int tolerance = 10;
        if (rgDiff > tolerance || rgDiff < -tolerance)
            if (rbDiff > tolerance || rbDiff < -tolerance) {
                return false;
            }
        return true;
    }

    public static float[] getRGBtoHSB(Color c) {
        float[] hsv = new float[3];
        return Color.RGBtoHSB(c.getRed(), c.getGreen(), c.getBlue(), hsv);
    }

设置状态只是向飞利浦灯泡进行简单的放置操作。当我检查受影响的灯泡上的JSON时

{
    "state": {
        "on": true,
        "bri": 81,
        "hue": 34277,
        "sat": 18,
        "xy": [
            0.298,
            0.2471
        ],
        "ct": 153,
        "alert": "none",
        "effect": "none",
        "colormode": "hs",
        "reachable": true
    },
    "type": "Extended color light",
    "name": "Hue Spot 1",
    "modelid": "LCT003",
    "swversion": "66010732",
    "pointsymbol": {
        "1": "none",
        "2": "none",
        "3": "none",
        "4": "none",
        "5": "none",
        "6": "none",
        "7": "none",
        "8": "none"
    }
}

1
HSB值看起来正确。我去了colorpicker.com。它接受的H、S、B值最大为360、100、100(就像Gary说的那样),因此您的值转换为H=193,S=39,B=82,这显示为一种带有RGB非常接近原始值的蓝色。我建议您再次检查硬件文档,以确定它期望的确切值(最重要的是值的范围)。 - ajb
1
@GaryKlasen 不,Philips Hue API使用0-255的亮度和饱和度值,以及0-65535的色调角度。 - erickson
2
不要使用从RGB计算出的值来测试灯光,而是尝试为已知颜色硬编码HSB值,并确保灯光的行为正常。换句话说,通过确定转换是否错误或与灯光的通信是否中断来隔离问题。 - erickson
2
我并不是在暗示灯泡坏了,而是在质疑转换或后续代码中是否存在错误。将搜索空间分割为简单的测试是基本的调试策略。请发布一个SSCCE,因为您的代码描述和结果不匹配。 - erickson
1
真的很离题,但是忍不住要问:需要多少程序员才能编程一个灯泡? :P - George Profenza
显示剩余7条评论
5个回答

19

感谢StackOverflow用户Gee858eeG指出我的错字,以及Erickson提供的绝妙提示和链接。

下面是一个可用的函数,用于将任何RGB颜色转换为飞利浦Hue XY值。 返回的列表仅包含两个元素,0代表X,1代表Y。 该代码基于这篇杰出的说明:https://github.com/PhilipsHue/PhilipsHueSDK-iOS-OSX/commit/f41091cf671e13fe8c32fcced12604cd31cceaf3

尽管此方法不返回HSB值,但XY值可用作更改Hue灯光颜色的替代方法。希望对其他人有所帮助,因为飞利浦的API没有提到任何公式。

public static List<Double> getRGBtoXY(Color c) {
    // For the hue bulb the corners of the triangle are:
    // -Red: 0.675, 0.322
    // -Green: 0.4091, 0.518
    // -Blue: 0.167, 0.04
    double[] normalizedToOne = new double[3];
    float cred, cgreen, cblue;
    cred = c.getRed();
    cgreen = c.getGreen();
    cblue = c.getBlue();
    normalizedToOne[0] = (cred / 255);
    normalizedToOne[1] = (cgreen / 255);
    normalizedToOne[2] = (cblue / 255);
    float red, green, blue;

    // Make red more vivid
    if (normalizedToOne[0] > 0.04045) {
        red = (float) Math.pow(
                (normalizedToOne[0] + 0.055) / (1.0 + 0.055), 2.4);
    } else {
        red = (float) (normalizedToOne[0] / 12.92);
    }

    // Make green more vivid
    if (normalizedToOne[1] > 0.04045) {
        green = (float) Math.pow((normalizedToOne[1] + 0.055)
                / (1.0 + 0.055), 2.4);
    } else {
        green = (float) (normalizedToOne[1] / 12.92);
    }

    // Make blue more vivid
    if (normalizedToOne[2] > 0.04045) {
        blue = (float) Math.pow((normalizedToOne[2] + 0.055)
                / (1.0 + 0.055), 2.4);
    } else {
        blue = (float) (normalizedToOne[2] / 12.92);
    }

    float X = (float) (red * 0.649926 + green * 0.103455 + blue * 0.197109);
    float Y = (float) (red * 0.234327 + green * 0.743075 + blue * 0.022598);
    float Z = (float) (red * 0.0000000 + green * 0.053077 + blue * 1.035763);

    float x = X / (X + Y + Z);
    float y = Y / (X + Y + Z);

    double[] xy = new double[2];
    xy[0] = x;
    xy[1] = y;
    List<Double> xyAsList = Doubles.asList(xy);
    return xyAsList;
}

太棒了。谢谢你发布这个! - MrUser
1
我将这个项目转换成了Python。https://gist.github.com/error454/6b94c46d1f7512ffe5ee - Error 454
2
List<Double> xyAsList = Doubles.asList(xy); 这行代码中出现了“Doubles”错误。同时,android.graphics.Color没有包含getRed、getGreen等方法。 - AjayR
Doubles类来自guava。您可以使用它代替(Java 8>)DoubleStream.of(xy).boxed().collect(Collectors.toList()); - asyard
非常好的帖子!我用TypeScript重建了这个逻辑,用于颜色选择器。你的逻辑也无法得到真正的彩色黄色吗? - WastedFreeTime
现在官方文档中有更多详细信息,位于“颜色转换公式RGB到XY和反向”页面:https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/ - giocomai

2
我认为这里的问题是Hue色彩空间受限制。它偏重于红色和紫色,但在蓝绿色区域的饱和度不高。

我建议将饱和度设置为最大值255,仅变化色相。

根据文档中给出的表格,Hue的“hue”属性并不直接映射到HSV的色相。这个近似可能足够接近,但如果不行,可以尝试转换到CIE 1931色彩空间,然后设置“xy”属性而不是色相。


谢谢这个。我会试一试! - timr
我尝试将RGB值转换为XY,但似乎无法完全正确。请阅读我的完整解释 - timr

2

我在谷歌上搜索了8年,这篇文章是唯一一个有用的结果。以下是飞利浦Meethue开发者文档转换例程的Python版本(我认为gamma设置有点不同):

def rgb2xyb(r,g,b):
    r = ((r+0.055)/1.055)**2.4 if r > 0.04045 else r/12.92
    g = ((g+0.055)/1.055)**2.4 if g > 0.04045 else g/12.92
    b = ((b+0.055)/1.055)**2.4 if b > 0.04045 else b/12.92

    X = r * 0.4124 + g * 0.3576 + b * 0.1805
    Y = r * 0.2126 + g * 0.7152 + b * 0.0722
    Z = r * 0.0193 + g * 0.1192 + b * 0.9505

    return X / (X + Y + Z), Y / (X + Y + Z), int(Y*254)

它还返回亮度信息,范围为0..254,与Hue Bridge API使用的相同。

相关文档(需要注册)https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/,以及有关使用Python控制Hue的更详细教程https://codeandlife.com/2022/03/20/control-philips-hue-color-rgb-lights-with-python/。 - jokkebk

1
你的RGB转换为HSB后,分别应该是193度、39%和82%。至少S和B看起来是正确的。根据飞利浦hue API文档,将这些数字乘以255是正确的做法。
要将H值作为角度获取,将计算出的H值乘以360即可。这就是你的情况下得出193的方法。一旦你有了角度,就可以乘以182得到应该发送给Philips hue API的值(来源于Hack the Hue)。
hue
The parameters 'hue' and 'sat' are used to set the colour
The 'hue' parameter has the range 0-65535 so represents approximately 
182*degrees (technically 182.04 but the difference is imperceptible)

这应该会给你比使用* 65535方法得到的不同的H值。


2
只是由于你引入的四舍五入误差而不同。RGB到HSB转换返回的色相值是从0到1的浮点数。0.5370371 * 65535 = 35195,这接近于通过四舍五入色相角度(193.33)和转换因子(182.04)得到的35126值。 - erickson
2
谢谢!但是飞利浦灯泡仍然显示白色,而不是在colorpicker.com上看到的蓝色。飞利浦API说色调值是0到65535之间的循环值。 0和65535都是红色,25500是绿色,46920是蓝色。如果按照您的计算,我的值应该更接近46920。 0.5370371 * 360° = 193.333356 乘以182 = 35186.67079 - timr

0

对于那些在这个问题上苦苦挣扎并寻找JavaScript解决方案的人,我将顶部答案的响应转换为@error454的Python适配,并确认它可以与HUE灯泡和API一起使用:D

function EnhanceColor(normalized) {
    if (normalized > 0.04045) {
        return Math.pow( (normalized + 0.055) / (1.0 + 0.055), 2.4);
    }
    else { return normalized / 12.92; }
        
}

function RGBtoXY(r, g, b) {
    let rNorm = r / 255.0;
    let gNorm = g / 255.0;
    let bNorm = b / 255.0;

    let rFinal = EnhanceColor(rNorm);
    let gFinal = EnhanceColor(gNorm);
    let bFinal = EnhanceColor(bNorm);

    let X = rFinal * 0.649926 + gFinal * 0.103455 + bFinal * 0.197109;
    let Y = rFinal * 0.234327 + gFinal * 0.743075 + bFinal * 0.022598;
    let Z = rFinal * 0.000000 + gFinal * 0.053077 + bFinal * 1.035763;

    if ( X + Y + Z === 0) {
        return [0,0];
    } else {
        let xFinal = X / (X + Y + Z);
        let yFinal = Y / (X + Y + Z);
    
        return [xFinal, yFinal];
    }

};

https://gist.github.com/NinjaBunny9000/fa81c231a9c205b5193bb76c95aeb75f


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接