samreid
commented
3 years ago Here's a quick feasibility test:
window.addEventListener( 'message', function( evt ) {
var data = JSON.parse( evt.data );
if ( data.type === 'reportColor' ) {
var name = data.name;
var value = data.value;
// Lazily create color inputs, so we don't need an up-front sim-specific list
var input = colorInputMap[ name ];
if ( !input ) {
input = colorInputMap[ name ] = document.createElement( 'input' );
input.type = 'color';
// Send user changes to the sim
input.addEventListener( 'input', function( evt ) {
console.log( input.value );
document.getElementById( 'sim-iframe' ).contentWindow.postMessage( JSON.stringify( {
type: 'setColor',
name: name,
value: input.value,
opacity: slider.valueAsNumber
} ), '*' );
} );
document.body.appendChild( document.createElement( 'br' ) );
document.body.appendChild( input );
const slider = document.createElement( 'input' );
slider.type = 'range';
slider.min = 0;
slider.max = 1;
slider.step = 0.01;
slider.value = input.value.opacity;
slider.addEventListener( 'input', evt => {
document.getElementById( 'sim-iframe' ).contentWindow.postMessage( JSON.stringify( {
type: 'setColor',
name: name,
value: input.value,
opacity: slider.valueAsNumber
} ), '*' );
} );
document.body.appendChild( slider );
document.body.appendChild( document.createTextNode( ' ' + name ) );
}
input.value = value;
}
} )And in ColorProfile.js
if ( data && data.type === 'setColor' ) {
const c = new Color( data.value );
this[ data.name + 'Property' ].value = new Color( c.red,c.green,c.blue,data.opacity );
}
pixelzoom
ariel-phet
zepumph
jonathanolson
kathy-phet
colors.hmtl and Studio both use this color editor that is based on input type=color, and therefore cannot support alpha channel.
This means that we currently cannot use alpha in colors that are specified in ColorProfile or in Properties editable by Studio.
So we need to come up with a new color editor that supports alpha, for use in colors.html and Studio.
In the meantime, I'm having to strip alpha channel out of colors in Fourier that we want to be editable via colors.html.
Slack discussion
Chris Malley 7:46 PM I just discovered that {{repo}}-color.html does not support alpha channel. Does Studio's color editor support alpha, or does it use the same editor? New Sam Reid 7:47 PM checking… 7:49 Looks like RGB. It uses input.type=‘color’ Chris Malley 7:50 PM So if a designer wants to (for example) tweak a UI component that is by design translucent, I guess they are currently out of luck, eh? 7:51 Does this mean we need to avoid using the alpha channel for any colors that appear in ColorProfile or are editable via PhET-iO? Sam Reid 7:52 PM We could see if there is support for this in color inputs, or add our own transparency channel control? Chris Malley 7:53 PM Which repo do you think would be appropriate for an issue? Sam Reid 7:53 PM According to MDN, input type=color cannot support opacity: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color Note: Setting the value to anything that isn’t a valid, fully-opaque, RGB color in hexadecimal notation will result in the value being set to #000000. 7:54 Is it for PhET-iO control or {repo}}-color.html or both? Chris Malley 7:54 PM Then a color editor that only supports input type=color is not a good fit for PhET. Sam Reid 7:54 PM Do we want to build a new color control that works in both PhET-iO and repo-color.html? Chris Malley 7:55 PM The case I ran into just now is for {repo}}-color.html. We had a Fourier design meeting today, and I was asked to add some things to ColorProfile, so that my design team could play with colors. Sam Reid 7:55 PM How about just putting transparency sliders next to the input type=color controls? Chris Malley 7:56 PM Sounds plausible. For now, I guess I'm stuck stripping out alpha channel where I can, and saying "sorry" where I can't. 7:57 For example, all of my chart grid lines are 'black', and I adjusted alpha to fade them out to the desired "look". I'm now having to convert those to rgb. Jonathan Olson 7:57 PM Presumably we can just not use the built in color editor browsers provide 7:58 It was just easier to use when I made the interface Chris Malley 7:58 PM Understood. Which repo for this change request? (edited) Jonathan Olson 7:58 PM I’ve used alphas in color profiles and that sounds niceAssigning to @ariel-phet for assignment and prioritization.