google – type ‘Color’ is not a subtype of type ‘MaterialColor’ error in Flutter?

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following _TypeError was thrown building Builder:
type ‘Color’ is not a subtype of type ‘MaterialColor’

The relevant error-causing widget was:
MaterialApp file:///D:/FlutterExercise/FlutterExercise/07/spanishaudioplayer/lib/main.dart:9:12

When the exception was thrown, this was the stack:
#0 new _HomePageState (package:spanishaudioplayer/HomePage.dart:22:35)
#1 HomePage.createState (package:spanishaudioplayer/HomePage.dart:7:35)
#2 new StatefulElement (package:flutter/src/widgets/framework.dart:4584:24)
#3 StatefulWidget.createElement (package:flutter/src/widgets/framework.dart:916:38)
… Normal element mounting (166 frames)
#169 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3541:14)
#170 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6094:32)
… Normal element mounting (300 frames)
#470 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3541:14)
#471 Element.updateChild (package:flutter/src/widgets/framework.dart:3306:18)
#472 RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:1182:16)
#473 RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:1153:5)
#474 RenderObjectToWidgetAdapter.attachToRenderTree. (package:flutter/src/widgets/binding.dart:1095:18)
#475 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2647:19)
#476 RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:1094:13)
#477 WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:934:7)
#478 WidgetsBinding.scheduleAttachRootWidget. (package:flutter/src/widgets/binding.dart:915:7)
(elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)

════════════════════════════════════════════════════════════════════════════════════════════════════
W/InputMethodManager(14486): startInputReason = 8
W/IInputConnectionWrapper(14486): getExtractedText on inactive InputConnection
W/IInputConnectionWrapper(14486): getTextBeforeCursor on inactive InputConnection
V/ActivityThread(14486): Finishing stop of ActivityRecord{801579c token=android.os.BinderProxy@63e470c {com.example.spanishaudioplayer/com.example.spanishaudioplayer.MainActivity}}
W/libEGL (14486): EGLNativeWindowType 0x76efee7010 disconnect failed
W/libEGL (14486): EGLNativeWindowType 0x7713667010 disconnect failed
V/ActivityThread(14486): Handle window ActivityRecord{801579c token=android.os.BinderProxy@63e470c {com.example.spanishaudioplayer/com.example.spanishaudioplayer.MainActivity}} visibility: false

/////////////////////////////////////////////////////////////////////////////////////////////////////
//main.dart

import 'package:flutter/material.dart';
import 'HomePage.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Spanish Audio Numbers',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: HomePage(),
    );
  }
}

/////////////////////////////////////////////////////////////////////////////////////////////////////
//HomePage.dart

import 'package:flutter/material.dart';
import 'package:audioplayers/audio_cache.dart';
import 'NumberAudio.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  AudioCache audioPlayer = AudioCache();
  List<NumberAudio> audioList = (
    NumberAudio("one.wav", Colors.red, "one"),
    NumberAudio("two.wav", Colors.blue, "two"),
    NumberAudio("three.wav", Colors.pink, "three"),
    NumberAudio("four.wav", Colors.orange, "four"),
    NumberAudio("five.wav", Colors.purple, "five"),
    NumberAudio("six.wav", Colors.cyan, "six"),
    NumberAudio("seven.wav", Colors.green, "seven"),
    NumberAudio("eight.wav", Colors.grey, "eight"),
    NumberAudio("nine.wav", Colors.yellow, "nine"),
    NumberAudio("ten.wav", Colors.black, "ten"),
  );
  play(String audioFile) async {
    audioPlayer.play(audioFile);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Spanish Numbers',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24.0,
            fontWeight: FontWeight.bold,
          ),
        ),
        //backgroundColor: Colors.teal,
      ),
      body: Center(
        child: Column(
          children: (
            Image(
              image: AssetImage("images/logo.png"),
            ),
            Expanded(
              child: GridView.builder(
                padding: EdgeInsets.all(10.0),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  childAspectRatio: 1.0,
                  crossAxisCount: 2,
                  crossAxisSpacing: 5.0,
                  mainAxisSpacing: 5.0,
                ),
                itemCount: audioList.length,
                itemBuilder: (context, index) => SizedBox(
                  height: 50.0,
                  width: 100.0,
                  child: RaisedButton(
                    child: Text(
                      audioList(index).buttonTitle,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    color: audioList(index).buttonColor,
                    onPressed: () {
                      play(audioList(index).audioFile);
                    },
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

/////////////////////////////////////////////////////////////////////////////////////////////////////
//NumberAudio.dart

import 'package:flutter/material.dart';

class NumberAudio {
  String audioFile;
  MaterialColor buttonColor;
  String buttonTitle;
  NumberAudio(String audioFile, MaterialColor buttonColor, String buttonTitle) {
    this.audioFile = audioFile;
    this.buttonColor = buttonColor;
    this.buttonTitle = buttonTitle;
  }
}

/////////////////////////////////////////////////////////////////////////////////////////////////////

audio files are in the assets folder and the logo is in images folder.

magento2 – How to create my custom visual swatch color attribute in my own module Vendor/Module/Setup/Patch/Data/MyOwnColorAttribute?

I take from https://github.com/magento/magento2/blob/2.3/dev/tests/integration/testsuite/Magento/Swatches/_files/product_visual_swatch_attribute.php like example, but my own color attribute patch didn’t create any options if I add those parameters. This is my code:

<?php 
namespace VendorModuleSetupPatchData;

use MagentoCatalogModelProduct;
use MagentoEavModelEntityAttributeScopedAttributeInterface;
use MagentoEavModelEntityAttributeSourceTable;
use MagentoEavSetupEavSetupFactory;
use MagentoFrameworkSetupModuleDataSetupInterface;
use MagentoFrameworkSetupPatchDataPatchInterface;
use VendorModuleModelAttributeBackendColor as Backend;
use VendorModuleModelAttributeFrontendColor as Frontend;

class AddColorAttribute implements DataPatchInterface
{
    /**
     * @var ModuleDataSetupInterface
     */
    private $moduleDataSetup;

    /**
     * @var EavSetupFactory
     */
    private $eavSetupFactory;

    /**
     * @param ModuleDataSetupInterface $moduleDataSetup
     * @param EavSetupFactory $eavSetupFactory
     */
    public function __construct(
        ModuleDataSetupInterface $moduleDataSetup,
        EavSetupFactory $eavSetupFactory,
    ) {
        $this->moduleDataSetup = $moduleDataSetup;
        $this->eavSetupFactory = $eavSetupFactory;
    }

    /**
     * @inheritdoc
     */
    public function apply()
    {
        $this->moduleDataSetup->startSetup();
        $eavSetup = $this->eavSetupFactory->create();
        $eavSetup->addAttribute(Product::ENTITY, 'visual_swatch_color_attribute', (
            'type' => 'int',
            'label' => 'Visual Swatch Color Attribute',
            'input' => 'select',
            'frontend' => Frontend::class,
            'backend' => Backend::class,
            'source' => Table::class,
            'required' => false,
            'global' => ScopedAttributeInterface::SCOPE_GLOBAL,
            'visible' => true,
            'is_used_in_grid' => true,
            'is_visible_in_grid' => true,
            'is_filterable_in_grid' => true,
            'user_defined' => true,
            'searchable' => true,
            'filterable' => true,
            'comparable' => true,
            'visible_on_front' => true,
            'used_in_product_listing' => true,
            'is_html_alowed_on_front' => true,
            'unique' => false,
            'swatch_input_type' => 'visual',
            'swatchvisual' => (
                'value' => (
                    'Obsidian' => '#3a322d',
                    'Pure' => '#0000ff',
                    'Crimson' => '#dc143c',
                    'Emerald' => '#50c878',
                    'Ametyst' => '#9966cc',
                ),
            ),
            'optionvisual' => (
                'values' => (
                    'Obsidian' => ('Obsidian'),
                    'Pure' => ('Pure'),
                    'Crimson' => ('Crimson'),
                    'Emerald' => ('Emerald'),
                    'Ametyst' => ('Ametyst'),
                ),
            ),
            'default' => '1'
        ));

        $eavSetup->addAttributeToGroup(
            MagentoCatalogModelProduct::ENTITY,
            'Default',
            'Product Details',
            'visual_swatch_color_attribute',
            18
        );
        $this->moduleDataSetup->endSetup();
    }

    /**
     * @inheritdoc
     */
    public static function getDependencies(): array
    {
        return ();
    }

    /**
     * @inheritdoc
     */
    public function getAliases(): array
    {
        return ();
    }
}

reactjs – Why color appears as HTML attribute on a div?

This code works perfectly, it creates CSS classes with the corresponding color and applies the classes dynamically:

const Div = styled.div`
    color: ${({ color }) => color};
`;

export default function Email() {
    const (color, changeColor) = useState();

    return (
        <>
            <Div color={color}>Email</Div>
            {('red', 'palevioletred', 'blue', 'yellow').map(x => <button onClick={() => changeColor(x)}>{x}</button>)}
        </>
    )
}

However, the color attribute appears in the DOM on the div element:

<div class="sc-crHlIS jxntNS" color="yellow">Email</div>

When I change the color prop name to something else like divColor it doesn’t show as a DOM attribute. I understand that props appear as HTML attributes when they have the same name as a native HTML attribute, but color should not.

Why this behavior?

Disable Chrome web app’s custom toolbar color?

In Chrome, you can choose to turn a web site into a standalone app (... > More Tools > Create Shortcut > Open as window). Some sites anticipate this behavior and offer an app icon and colorize the toolbar. While I appreciate the app icon, the toolbar color is jarring. See Microsoft Outlook’s To Do app window:

todo

Gross. How can I disable this custom color and restore it to the default system color?

color correcting scans

I got an Epson ff-680w but can’t find any way to color correct the scans using a calibrated profile. My understanding is that this is the main thing to look out for when trying to scan in archive quality. How would I build a color calibration profile and apply that to the scanned images?

2013 – How to incorporate sorting in calculated column with background and text color formatting to use as a Grouping field

Here is the calculated code for the field:

=IF((AU-R CIR)=”7. ERROR”,”<div style=”””&”text-align:center; color: red; background: #ffffff”&”””>7. ERROR”,IF((AU-R CIR)=”6. Incomplete”,”<div style=”””&”text-align:center; color: blue; background: #ffffff”&”””>6. Incomplete”,IF((AU-R CIR)=”5. High”,”<div style=”””&”text-align:center; color: white; background: #c00000″&”””>5. High”,IF((AU-R CIR)=”4. Moderate-High”,”<div style=”””&”text-align:center; color: white; background: #ed7d31″&”””>4. Moderate-High”,IF((AU-R CIR)=”3. Moderate”,”<div style=”””&”text-align:center; color: white; background: #ffc000″&”””>3. Moderate”,IF((AU-R CIR)=”2. Low-Moderate”,”<div style=”””&”text-align:center; color: white; background: #92d050″&”””>2. Low-Moderate”,IF((AU-R CIR)=”1. Low”,”<div style=”””&”text-align:center; color: white; background: #00b050″&”””>1. Low”)))))))

I want to use as a grouping field but the built in ordering for grouping fields does not order based on the (AU-R CIR) field values. Can can the calculation code be adjusted to accommodate the ordering?

color management – Why is the contrast calculated in i1Profiler so low?

I just received a Dell S3221QS, which is a 32″ with a VA panel.

I used i1 Display Pro and i1Profiler 3.x to calibrate the monitor. At the end the calculated contrast ratio is just 256:1, which is very poor.

enter image description here

I tried different settings, like D65 vs native, 120 cd vs native, table vs matrix, small vs large patch set, always the same result.

I tried to use the test on Lagom to use my camera to measure the contrast ratio, and I got about 2000:1, which makes more sense for a Va panel.

Why is the value provided by i1Profiler so low? I remember that my previous monitor (Dell UP2414Q, IPS gb-r display) used to achieve 850-950:1 with i1Profiler 1.x, which was a more reasonable value.

Why the change in the values?

color management – What Conversion Engine works best in Photoshop? ACE or ICM

Adobe ACE v Microsoft ICM: Bakeoff

Adobe’s Windows Photoshop offers two conversion engines for converting colors. These are used when converting between different RGB colorspaces as well as doing conversion required for displaying using the monitor’s ICC profile.

Are there significant differences between these? Does one do a more accurate job than the other and, if so, are the differences visually significant?

One specific measure of accuracy is self consistency. For instance if one has an image in sRGB and converts it to ProPhoto RGB then back to sRGB again the results should be quite close since sRGB’s gamut is smaller in every dimension than ProPhoto.

So, if we consider a set of all possible, 8 bits per channel, RGB colors and convert them to ProPhoto RGB then back to sRGB what is the maximum error produced by the Microsoft ICM Engine v. the Adobe ACE Engine?

If there are errors, how large are they and are they visible?

sharepoint online – Unable to style the Label Color of a Office UI Fabric React Drop Down Control

I am creating an SPFx 1.11 web part where I have imported Dropdown, IDropdownProps, IDropdownOption from office-ui-fabric-react as:

  import {   
  Dropdown,
  IDropdownProps,
  IDropdownOption  
} from 'office-ui-fabric-react';

However I need to Style the Label of the DropDown for which I need to import IDropdownStyles as well. However when I try to import IDropDownStyles, I get the below error:

office-ui-fabric-react/lib/Dropdown”‘ has no exported member ‘IDropdownStyles

Please find the attached code screenshot. The dependencies from package.json are listed below :

"dependencies": {
    "@fluentui/react": "^8.8.0",
    "@microsoft/sp-core-library": "~1.4.1",
    "@microsoft/sp-lodash-subset": "~1.4.1",
    "@microsoft/sp-office-ui-fabric-core": "^1.11.0",
    "@microsoft/sp-webpart-base": "~1.4.1",
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "react": "15.6.2",
    "react-dom": "15.6.2"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.4.1",
    "@microsoft/sp-module-interfaces": "~1.4.1",
    "@microsoft/sp-webpart-workbench": "~1.4.1",
    "gulp": "~3.9.1",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/mocha": ">=2.2.33 <2.6.0",
    "ajv": "~5.2.2"
  }

Can anyone guide me on what I may be doing wrong here?

enter image description here

color management – Converting from sRGB to ProPhoto & vice versa on Photoshop (with a 120% sRGB screen)

Img 1
This is just academic:
I want to find a cyclical way to convert from sRGB to ProPhoto and vice-versa on Photoshop.

  1. I notice that no matter that the images from Is Your Browser Color-Managed? looks different inside of PS…

  2. the browser renders both identical and that’s the goal of the ICC profile, I know.

  3. But, when I try to change the color profile of the proPhoto one to sRGB on PS (with “convert to profile…” and “assign profile”) that doesn’t work and actually looks the same on PS and of course renders different on the browser.

  4. And with the same resultant image I tried to convert it back to proPhoto and that doesn’t work either.

  5. There is a cyclical way to convert a image between sRGB and Prophoto and making them to looks the same on the browser?

Edit

To consider:

  • My main display is a Huion Kamvas 13 with 120% sRGB according to the manufacturer.
  • Because of that the image on the ProPhoto space won’t look the same as the sRGB one without proofing colors.
  • The original image tagged with sRGB doesn’t have a ICC profile, but by default the browser will assume it as sRGB. That’s useless with mostly all the screens (100%-sRGB) but for my 120%-sRGB screen is useful because thanks to that my browser won’t over-saturate the image. Not the same with Photoshop, actually, PS will over-saturate the non-profiled image.

enter image description here
Regardless of my browser shows them the same, Photoshop show them different without proofing colors and also different with sRGB internet proofing colors. They only look the same if I only set the unprofiled one (sRGB tagged) to sRGB proof colors.
enter image description here

  • For the unmanaged image with no proof colors I guess that PS stretch the RGB colors (oversaturating them) to my larger 120% sRGB space right?
  • For the ProPhoto with sRGB proof colors I guess is like to have double conversion first from ProPhoto to 120% sRGB and than to 100% rgb. That implies that in a 100% rgb that image will look right Isn’t it?

After a kind of laboratory a realized (I think) that my 120% sRGB screen (or driver) tells to PS to operates the transformations with that space when converting color profiles as you can see in the “sRGB Converted to ProPhoto” (1st row, 2nd col) resulting in wrong colors. But if I tell to PS that the unmanaged image is on the sRGB space assigning it a sRGB profile before I convert to the ProPhoto space, PS do the works correcly
enter image description here

Now I want to go back from ProPhoto to sRGB
enter image description here
Here you an see that if I just assign a sRGB profile to the ProPhoto (sRGB, sRGB assigned, Converted to ProPhoto) image the colors get borked as @Tetsujin mentioned. But if a converted to sRGB and then remove the color management I’m able to get back a image virtualy equal to the original sRGB one

You will be able to calculate the RGB values that PS calculates with this calculator
http://www.brucelindbloom.com/index.html?ColorCalculator.html
First go from sRGB to XYZ and then to ProPhoto (white D65, gamma 1.8)

Then for the example of Steven Kersting sRGB(0,255,25) is XYZ(0.359330, 0.715854, 0.128430) and ProPhoto(138.0695, 236.5775 80.7067), but with a 8-bit depth with dont have that precision, actually we dont have decimales
so ProPhoto(138, 236, 80) is XYZ(0.358508, 0.712998, 0.126304) and sRGB(9.1773, 254.4782, 21.9759)

Proposal of answer

So for my question

There is a cyclical way to convert a image between sRGB and Prophoto
and making them to looks the same on the browser?

The answer has three big considerations: What is my native color space (the one that is told by the video driver to the PS), Is the source image color unmanaged or does it have color profiles assigned? and What is the format and color depth of the image?. If my native color space is 100% sRGB I could go straight converting profiles. But if I have another color space than 100% sRGB like me with 120% sRGB then a have to pay attention if the source image has a color profile, if it don’t have one I must assign a color profile before the conversion. Now if I have a 8-bit depth LQ JPEG we’ll be able to see some color distorsion in the cyclical conversions, but if I have a 16-bit uncompressed TIFF I may not see significant differences. In the image below you can see that i managed to replicate the conversion on my 120% sRGB workspace (the bottom-right one).
enter image description here

Consedirations

You will be able to calculate the RGB values that PS calculates with this calculator. First go from sRGB to XYZ and then to ProPhoto (white D65, gamma 1.8). Then for the example of @Steven Kersting, sRGB(0,255,25) is XYZ(0.359330, 0.715854, 0.128430) and ProPhoto(138.0695, 236.5775 80.7067), but with a 8-bit depth we dont have that precision, actually, we don’t have decimals, so for PS to get back, it will be ProPhoto(138, 236, 80) that is XYZ(0.358508, 0.712998, 0.126304) and is sRGB(9.1773, 254.4782, 21.9759) and of course this will be rounded. But this scenario is idealistic because as mention @doug if you set the dither option you will have some kind variation to maintain the average and reducing the error, and even better results if you have a 16-bit color depth