问:
Why can't I interact with my components within my modal?
I am trying to create a modal and for some reason I cannot interact with any components like buttons or inputs within my modal.

I am building a React Portal, so that my modal and page are separate from each other and that the modal is not "running" in the background when it is not in use

```<code>import {useState, useLayoutEffect} from "react"
import { createPortal } from "react-dom"

const createWrapperAndAppendToBody = (wrapperId: string) => {
    if(!document) return null
    const wrapperElement = document.createElement("div")
    wrapperElement.setAttribute('id', wrapperId)
    document.body.appendChild(wrapperElement)
    return wrapperElement
 }

 function ReactPortal({children, wrapperId}: {children: React.ReactElement; wrapperId: string}) {
    const [wrapperElement, setWrapperElement] = useState<HTMLElement>()

    useLayoutEffect(() => {
        let element = document.getElementById(wrapperId)
        let systemCreated = false

        if(!element) {
            systemCreated = true
            element = createWrapperAndAppendToBody(wrapperId)
        }
        setWrapperElement(element!)

        return () => {
            if(systemCreated && element?.parentNode) {
                element.parentNode.removeChild(element)
            }
        }
    },[wrapperId])

    if(!wrapperElement) return null
    return createPortal(children, wrapperElement)

 }

 export default ReactPortal
</code>```

I am pretty sure this is fine.

```<code>import React, {useEffect} from "react";
import ReactPortal from "./ReactPortal";

interface ConfirmationModalProps {
    isOpen: boolean;
    handleClose: () => void
    children: React.ReactNode

}

export const ConfirmationModal =({children, isOpen, handleClose}:ConfirmationModalProps) => {
//allows to press Escape Key
 useEffect(() => {
    const closeOnEscapeKey = (e: KeyboardEvent) =>
        e.key === 'Escape' ? handleClose() : null
        document.body.addEventListener('keydown', closeOnEscapeKey)
        return () => {
            document.body.removeEventListener('keydown', closeOnEscapeKey)
        };
 },[handleClose])

 //stops scrolling fuction when modal is open
 useEffect(() => {
    document.body.style.overflow = 'hidden';
    return (): void => {
        document.body.style.overflow = 'unset'
    }
 },[isOpen])

 if(!isOpen) return null

 return (
   <ReactPortal wrapperId='react-portal-modal-container'>
    <>
        <div className='fixed top-0 left-0 w-screen h-screen z-40 bg-neutral-800 opacity-50' />
        <div className='fixed  rounded flex flex-col box-border min-w-fit overflow-hidden p-5 bg-zinc-800 inset-y-32 inset-x-32'>
            <button className='py-2 px-8 self-end font-bold hover:bg-violet-600 border rounded'
            onClick={() => console.log('Pressed')}>
                Close
            </button>
        <div className='box-border h-5/6'>{children}</div>
        </div>
    </>
   </ReactPortal>
 )
}
</code>```

This is my reusable Modal component so that I do not have to build a new modal from scratch. The close button within here is no also not working/can't event click on it via a console.log('pressed')

Here is a picture of the modal, but none of the buttons work, however, my Escape key function does work. Any thoughts would be great!

Body:
I am trying to create a modal and for some reason I cannot interact with any components like buttons or inputs within my modal.

I am building a React Portal, so that my modal and page are separate from each other and that the modal is not "running" in the background when it is not in use

import {useState, useLayoutEffect} from "react"
import { createPortal } from "react-dom"

const createWrapperAndAppendToBody = (wrapperId: string) => {
    if(!document) return null
    const wrapperElement = document.createElement("div")
    wrapperElement.setAttribute('id', wrapperId)
    document.body.appendChild(wrapperElement)
    return wrapperElement
 }

 function ReactPortal({children, wrapperId}: {children: React.ReactElement; wrapperId: string}) {
    const [wrapperElement, setWrapperElement] = useState<HTMLElement>()

    useLayoutEffect(() => {
        let element = document.getElementById(wrapperId)
        let systemCreated = false

        if(!element) {
            systemCreated = true
            element = createWrapperAndAppendToBody(wrapperId)
        }
        setWrapperElement(element!)

        return () => {
            if(systemCreated && element?.parentNode) {
                element.parentNode.removeChild(element)
            }
        }
    },[wrapperId])

    if(!wrapperElement) return null
    return createPortal(children, wrapperElement)

 }

 export default ReactPortal

I am pretty sure this is fine.

import React, {useEffect} from "react";
import ReactPortal from "./ReactPortal";

interface ConfirmationModalProps {
    isOpen: boolean;
    handleClose: () => void
    children: React.ReactNode

}

export const ConfirmationModal =({children, isOpen, handleClose}:ConfirmationModalProps) => {
//allows to press Escape Key
 useEffect(() => {
    const closeOnEscapeKey = (e: KeyboardEvent) =>
        e.key === 'Escape' ? handleClose() : null
        document.body.addEventListener('keydown', closeOnEscapeKey)
        return () => {
            document.body.removeEventListener('keydown', closeOnEscapeKey)
        };
 },[handleClose])

 //stops scrolling fuction when modal is open
 useEffect(() => {
    document.body.style.overflow = 'hidden';
    return (): void => {
        document.body.style.overflow = 'unset'
    }
 },[isOpen])

 if(!isOpen) return null

 return (
   <ReactPortal wrapperId='react-portal-modal-container'>
    <>

            <button className='py-2 px-8 self-end font-bold hover:bg-violet-600 border rounded'
            onClick={() => console.log('Pressed')}>
                Close
            </button>

{children}

    </>
   </ReactPortal>
 )
}

This is my reusable Modal component so that I do not have to build a new modal from scratch. The close button within here is no also not working/can't event click on it via a console.log('pressed')

Here is a picture of the modal, but none of the buttons work, however, my Escape key function does work. Any thoughts would be great!


来源: stackexchange

问:
Combine sentinelhub evalscript to retrieve Sentinel 2 L2A raw bands and FAPAR, FCOVER, CAB, LAI in an optimize way
I am a complete beginner in javascript.

I want to create a custom evalscript on sentinelhub that allows me to retrieve via a WMS request with the python API the Sentinel 2 L2A raw bands as well as the CAB, LAI, FAPAR, FCOVER and CCC products. Added to that I try to optimize the processing units.

For that I started from the following links:

raw bands : "https://github.com/sentinel-hub/custom-scripts/tree/master/sentinel-2/bands"

CAB : "https://github.com/sentinel-hub/custom-scripts/blob/master/sentinel-2/cab/script.js"

FAPAR : "https://github.com/sentinel-hub/custom-scripts/blob/master/sentinel-2/fapar/script.js"

FCOVER : "https://github.com/sentinel-hub/custom-scripts/blob/master/sentinel-2/fcover/script.js"

LAI : "https://github.com/sentinel-hub/custom-scripts/blob/master/sentinel-2/lai/script.js"

CCC : "https://github.com/sentinel-hub/custom-scripts/tree/master/sentinel-2/ccc"

optimization of processing units via sample type : "https://medium.com/sentinel-hub/sampletype-whats-all-the-fuss-about-d7348b4de647"

I have currently used up all my credits/processing units because of the different tests I have done. Also, I haven't found anywhere a way to test the evalscript before testing it in real life.

In addition to that I would like to resample all bands to 10m resolution when this is not the case. I have not yet integrated this into the code below.

Could you tell me if what I did is correct?
Thanks in advance.

Here is the code I have written so far

```<code>//VERSION=3

var degToRad = Math.PI / 180;

//Main

function evaluatePixelOrig(samples) {
  var sample = samples[0];
  var b03_norm = normalize(sample.B03, 0, 0.253061520471542);
  var b04_norm = normalize(sample.B04, 0, 0.290393577911328);
  var b05_norm = normalize(sample.B05, 0, 0.305398915248555);
  var b06_norm = normalize(sample.B06, 0.006637972542253, 0.608900395797889);
  var b07_norm = normalize(sample.B07, 0.013972727018939, 0.753827384322927);
  var b8a_norm = normalize(sample.B8A, 0.026690138082061, 0.782011770669178);
  var b11_norm = normalize(sample.B11, 0.016388074192258, 0.493761397883092);
  var b12_norm = normalize(sample.B12, 0, 0.493025984460231);
  var viewZen_norm = normalize(Math.cos(sample.viewZenithMean * degToRad), 0.918595400582046, 1);
  var sunZen_norm  = normalize(Math.cos(sample.sunZenithAngles * degToRad), 0.342022871159208, 0.936206429175402);
  var relAzim_norm = Math.cos((sample.sunAzimuthAngles - sample.viewAzimuthMean) * degToRad)

  var n1_cab = neuron1_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n2_cab = neuron2_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n3_cab = neuron3_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n4_cab = neuron4_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n5_cab = neuron5_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var l2_cab = layer2_cab(n1_cab, n2_cab, n3_cab, n4_cab, n5_cab);
  var cab = denormalize(l2_cab, 0.007426692959872, 873.908222110306);

  var n1_fapar = neuron1_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n2_fapar = neuron2_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n3_fapar = neuron3_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n4_fapar = neuron4_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n5_fapar = neuron5_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var l2_fapar = layer2_fapar(n1_fapar, n2_fapar, n3_fapar, n4_fapar, n5_fapar);
  var fapar = denormalize(l2_fapar, 0.000153013463222, 0.977135096979553);

  var n1_fcover = neuron1_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n2_fcover = neuron2_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n3_fcover = neuron3_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n4_fcover = neuron4_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n5_fcover = neuron5_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var l2_fcover = layer2_fcover(n1_fcover, n2_fcover, n3_fcover, n4_fcover, n5_fcover);
  var fcover = denormalize(l2_fcover, 0.000181230723879, 0.999638214715);

  var n1_lai = neuron1_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n2_lai = neuron2_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n3_lai = neuron3_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n4_lai = neuron4_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n5_lai = neuron5_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var l2_lai = layer2_lai(n1_lai, n2_lai, n3_lai, n4_lai, n5_lai);
  var lai = denormalize(l2_lai, 0.000319182538301, 14.4675094548151);

  var ccc = lai * cab

  return {
      default: [
      cab / 300,
      fapar,
      fcover,
      lai / 3,
      ccc
      ]
  }

}

//CAB

function neuron1_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
      4.242299670155190
    + 0.400396555256580 * b03_norm
    + 0.607936279259404 * b04_norm
    + 0.137468650780226 * b05_norm
    - 2.955866573461640 * b06_norm
    - 3.186746687729570 * b07_norm
    + 2.206800751246430 * b8a_norm
    - 0.313784336139636 * b11_norm
    + 0.256063547510639 * b12_norm
    - 0.071613219805105 * viewZen_norm
    + 0.510113504210111 * sunZen_norm
    + 0.142813982138661 * relAzim_norm;

  return tansig(sum);
}

function neuron2_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 0.259569088225796
    - 0.250781102414872 * b03_norm
    + 0.439086302920381 * b04_norm
    - 1.160590937522300 * b05_norm
    - 1.861935250269610 * b06_norm
    + 0.981359868451638 * b07_norm
    + 1.634230834254840 * b8a_norm
    - 0.872527934645577 * b11_norm
    + 0.448240475035072 * b12_norm
    + 0.037078083501217 * viewZen_norm
    + 0.030044189670404 * sunZen_norm
    + 0.005956686619403 * relAzim_norm;

  return tansig(sum);
}

function neuron3_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 3.130392627338360
    + 0.552080132568747 * b03_norm
    - 0.502919673166901 * b04_norm
    + 6.105041924966230 * b05_norm
    - 1.294386119140800 * b06_norm
    - 1.059956388352800 * b07_norm
    - 1.394092902418820 * b8a_norm
    + 0.324752732710706 * b11_norm
    - 1.758871822827680 * b12_norm
    - 0.036663679860328 * viewZen_norm
    - 0.183105291400739 * sunZen_norm
    - 0.038145312117381 * relAzim_norm;

  return tansig(sum);
}

function neuron4_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 0.774423577181620
    + 0.211591184882422 * b03_norm
    - 0.248788896074327 * b04_norm
    + 0.887151598039092 * b05_norm
    + 1.143675895571410 * b06_norm
    - 0.753968830338323 * b07_norm
    - 1.185456953076760 * b8a_norm
    + 0.541897860471577 * b11_norm
    - 0.252685834607768 * b12_norm
    - 0.023414901078143 * viewZen_norm
    - 0.046022503549557 * sunZen_norm
    - 0.006570284080657 * relAzim_norm;

  return tansig(sum);
}

function neuron5_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 2.584276648534610
    + 0.254790234231378 * b03_norm
    - 0.724968611431065 * b04_norm
    + 0.731872806026834 * b05_norm
    + 2.303453821021270 * b06_norm
    - 0.849907966921912 * b07_norm
    - 6.425315500537270 * b8a_norm
    + 2.238844558459030 * b11_norm
    - 0.199937574297990 * b12_norm
    + 0.097303331714567 * viewZen_norm
    + 0.334528254938326 * sunZen_norm
    + 0.113075306591838 * relAzim_norm;

  return tansig(sum);
}

function layer2_cab(neuron1_cab, neuron2_cab, neuron3_cab, neuron4_cab, neuron5_cab) {
  var sum =
    + 0.463426463933822
    - 0.352760040599190 * neuron1_cab
    - 0.603407399151276 * neuron2_cab
    + 0.135099379384275 * neuron3_cab
    - 1.735673123851930 * neuron4_cab
    - 0.147546813318256 * neuron5_cab;

  return sum;
}

//FAPAR

function neuron1_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 0.887068364040280
    + 0.268714454733421 * b03_norm
    - 0.205473108029835 * b04_norm
    + 0.281765694196018 * b05_norm
    + 1.337443412255980 * b06_norm
    + 0.390319212938497 * b07_norm
    - 3.612714342203350 * b8a_norm
    + 0.222530960987244 * b11_norm
    + 0.821790549667255 * b12_norm
    - 0.093664567310731 * viewZen_norm
    + 0.019290146147447 * sunZen_norm
    + 0.037364446377188 * relAzim_norm;

  return tansig(sum);
}

function neuron2_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 0.320126471197199
    - 0.248998054599707 * b03_norm
    - 0.571461305473124 * b04_norm
    - 0.369957603466673 * b05_norm
    + 0.246031694650909 * b06_norm
    + 0.332536215252841 * b07_norm
    + 0.438269896208887 * b8a_norm
    + 0.819000551890450 * b11_norm
    - 0.934931499059310 * b12_norm
    + 0.082716247651866 * viewZen_norm
    - 0.286978634108328 * sunZen_norm
    - 0.035890968351662 * relAzim_norm;

  return tansig(sum);
}

function neuron3_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 0.610523702500117
    - 0.164063575315880 * b03_norm
    - 0.126303285737763 * b04_norm
    - 0.253670784366822 * b05_norm
    - 0.321162835049381 * b06_norm
    + 0.067082287973580 * b07_norm
    + 2.029832288655260 * b8a_norm
    - 0.023141228827722 * b11_norm
    - 0.553176625657559 * b12_norm
    + 0.059285451897783 * viewZen_norm
    - 0.034334454541432 * sunZen_norm
    - 0.031776704097009 * relAzim_norm;

  return tansig(sum);
}

function neuron4_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 0.379156190833946
    + 0.130240753003835 * b03_norm
    + 0.236781035723321 * b04_norm
    + 0.131811664093253 * b05_norm
    - 0.250181799267664 * b06_norm
    - 0.011364149953286 * b07_norm
    - 1.857573214633520 * b8a_norm
    - 0.146860751013916 * b11_norm
    + 0.528008831372352 * b12_norm
    - 0.046230769098303 * viewZen_norm
    - 0.034509608392235 * sunZen_norm
    + 0.031884395036004 * relAzim_norm;

  return tansig(sum);
}

function neuron5_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 1.353023396690570
    - 0.029929946166941 * b03_norm
    + 0.795804414040809 * b04_norm
    + 0.348025317624568 * b05_norm
    + 0.943567007518504 * b06_norm
    - 0.276341670431501 * b07_norm
    - 2.946594180142590 * b8a_norm
    + 0.289483073507500 * b11_norm
    + 1.044006950440180 * b12_norm
    - 0.000413031960419 * viewZen_norm
    + 0.403331114840215 * sunZen_norm
    + 0.068427130526696 * relAzim_norm;

  return tansig(sum);
}

function layer2_fapar(neuron1_fapar, neuron2_fapar, neuron3_fapar, neuron4_fapar, neuron5_fapar) {
  var sum =
    - 0.336431283973339
    + 2.126038811064490 * neuron1_fapar
    - 0.632044932794919 * neuron2_fapar
    + 5.598995787206250 * neuron3_fapar
    + 1.770444140578970 * neuron4_fapar
    - 0.267879583604849 * neuron5_fapar;

  return sum;
}

//FCOVER

function neuron1_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 1.45261652206
    - 0.156854264841 * b03_norm
    + 0.124234528462 * b04_norm
    + 0.235625516229 * b05_norm
    - 1.8323910258 * b06_norm
    - 0.217188969888 * b07_norm
    + 5.06933958064 * b8a_norm
    - 0.887578008155 * b11_norm
    - 1.0808468167 * b12_norm
    - 0.0323167041864 * viewZen_norm
    - 0.224476137359 * sunZen_norm
    - 0.195523962947 * relAzim_norm;

  return tansig(sum);
}

function neuron2_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 1.70417477557
    - 0.220824927842 * b03_norm
    + 1.28595395487 * b04_norm
    + 0.703139486363 * b05_norm
    - 1.34481216665 * b06_norm
    - 1.96881267559 * b07_norm
    - 1.45444681639 * b8a_norm
    + 1.02737560043 * b11_norm
    - 0.12494641532 * b12_norm
    + 0.0802762437265 * viewZen_norm
    - 0.198705918577 * sunZen_norm
    + 0.108527100527 * relAzim_norm;

  return tansig(sum);
}

function neuron3_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 1.02168965849
    - 0.409688743281 * b03_norm
    + 1.08858884766 * b04_norm
    + 0.36284522554 * b05_norm
    + 0.0369390509705 * b06_norm
    - 0.348012590003 * b07_norm
    - 2.0035261881 * b8a_norm
    + 0.0410357601757 * b11_norm
    + 1.22373853174 * b12_norm
    + -0.0124082778287 * viewZen_norm
    - 0.282223364524 * sunZen_norm
    + 0.0994993117557 * relAzim_norm;

  return tansig(sum);
}

function neuron4_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 0.498002810205
    - 0.188970957866 * b03_norm
    - 0.0358621840833 * b04_norm
    + 0.00551248528107 * b05_norm
    + 1.35391570802 * b06_norm
    - 0.739689896116 * b07_norm
    - 2.21719530107 * b8a_norm
    + 0.313216124198 * b11_norm
    + 1.5020168915 * b12_norm
    + 1.21530490195 * viewZen_norm
    - 0.421938358618 * sunZen_norm
    + 1.48852484547 * relAzim_norm;

  return tansig(sum);
}

function neuron5_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 3.88922154789
    + 2.49293993709 * b03_norm
    - 4.40511331388 * b04_norm
    - 1.91062012624 * b05_norm
    - 0.703174115575 * b06_norm
    - 0.215104721138 * b07_norm
    - 0.972151494818 * b8a_norm
    - 0.930752241278 * b11_norm
    + 1.2143441876 * b12_norm
    - 0.521665460192 * viewZen_norm
    - 0.445755955598 * sunZen_norm
    + 0.344111873777 * relAzim_norm;

  return tansig(sum);
}

function layer2_fcover(neuron1_fcover, neuron2_fcover, neuron3_fcover, neuron4_fcover, neuron5_fcover) {
  var sum =
    - 0.0967998147811
    + 0.23080586765 * neuron1_fcover
    - 0.333655484884 * neuron2_fcover
    - 0.499418292325 * neuron3_fcover
    + 0.0472484396749 * neuron4_fcover
    - 0.0798516540739 * neuron5_fcover;

  return sum;
}

//LAI

function neuron1_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 4.96238030555279
    - 0.023406878966470 * b03_norm
    + 0.921655164636366 * b04_norm
    + 0.135576544080099 * b05_norm
    - 1.938331472397950 * b06_norm
    - 3.342495816122680 * b07_norm
    + 0.902277648009576 * b8a_norm
    + 0.205363538258614 * b11_norm
    - 0.040607844721716 * b12_norm
    - 0.083196409727092 * viewZen_norm
    + 0.260029270773809 * sunZen_norm
    + 0.284761567218845 * relAzim_norm;

  return tansig(sum);
}

function neuron2_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 1.416008443981500
    - 0.132555480856684 * b03_norm
    - 0.139574837333540 * b04_norm
    - 1.014606016898920 * b05_norm
    - 1.330890038649270 * b06_norm
    + 0.031730624503341 * b07_norm
    - 1.433583541317050 * b8a_norm
    - 0.959637898574699 * b11_norm
    + 1.133115706551000 * b12_norm
    + 0.216603876541632 * viewZen_norm
    + 0.410652303762839 * sunZen_norm
    + 0.064760155543506 * relAzim_norm;

  return tansig(sum);
}

function neuron3_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 1.075897047213310
    + 0.086015977724868 * b03_norm
    + 0.616648776881434 * b04_norm
    + 0.678003876446556 * b05_norm
    + 0.141102398644968 * b06_norm
    - 0.096682206883546 * b07_norm
    - 1.128832638862200 * b8a_norm
    + 0.302189102741375 * b11_norm
    + 0.434494937299725 * b12_norm
    - 0.021903699490589 * viewZen_norm
    - 0.228492476802263 * sunZen_norm
    - 0.039460537589826 * relAzim_norm;

  return tansig(sum);
}

function neuron4_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 1.533988264655420
    - 0.109366593670404 * b03_norm
    - 0.071046262972729 * b04_norm
    + 0.064582411478320 * b05_norm
    + 2.906325236823160 * b06_norm
    - 0.673873108979163 * b07_norm
    - 3.838051868280840 * b8a_norm
    + 1.695979344531530 * b11_norm
    + 0.046950296081713 * b12_norm
    - 0.049709652688365 * viewZen_norm
    + 0.021829545430994 * sunZen_norm
    + 0.057483827104091 * relAzim_norm;

  return tansig(sum);
}

function neuron5_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 3.024115930757230
    - 0.089939416159969 * b03_norm
    + 0.175395483106147 * b04_norm
    - 0.081847329172620 * b05_norm
    + 2.219895367487790 * b06_norm
    + 1.713873975136850 * b07_norm
    + 0.713069186099534 * b8a_norm
    + 0.138970813499201 * b11_norm
    - 0.060771761518025 * b12_norm
    + 0.124263341255473 * viewZen_norm
    + 0.210086140404351 * sunZen_norm
    - 0.183878138700341 * relAzim_norm;

  return tansig(sum);
}

function layer2_lai(neuron1_lai, neuron2_lai, neuron3_lai, neuron4_lai, neuron5_lai) {
  var sum =
    + 1.096963107077220
    - 1.500135489728730 * neuron1_lai
    - 0.096283269121503 * neuron2_lai
    - 0.194935930577094 * neuron3_lai
    - 0.352305895755591 * neuron4_lai
    + 0.075107415847473 * neuron5_lai;

  return sum;
}

//Generic functions

function normalize(unnormalized, min, max) {
  return 2 * (unnormalized - min) / (max - min) - 1;
}
function denormalize(normalized, min, max) {
  return 0.5 * (normalized + 1) * (max - min) + min;
}
function tansig(input) {
  return 2 / (1 + Math.exp(-2 * input)) - 1;
}

function setup() {
    return {
        input: [{
            bands: ["B02","B03","B04","B05","B06","B07","B08","B8A","B11","B12","CLM","dataMask"]
        }],
        output: [
          {
          id:"default",
          sampleType: "UINT16",
          bands: 17
          }
        ]
    };
}

const f = 10000;

function evaluatePixel(sample, scene, metadata, customData, outputMetadata) {
    const res1 = [f * sample.B02,f * sample.B03,f * sample.B04,f * sample.B05,f * sample.B06,f * sample.B07,f * sample.B08,f * sample.B8A,f * sample.B11,f * sample.B12,f * sample.CLM,f * sample.dataMask];
    const res2 = evaluatePixelOrig([f * sample], [scene], metadata, customData, outputMetadata);
    const res3 = res1.concat(res2[Object.keys(res2)[0]]);
    return ,
            res3;
}
</code>```

ContentLicense: CC BY-SA 4.0

Body:
I am a complete beginner in javascript.

I want to create a custom evalscript on sentinelhub that allows me to retrieve via a WMS request with the python API the Sentinel 2 L2A raw bands as well as the CAB, LAI, FAPAR, FCOVER and CCC products. Added to that I try to optimize the processing units.

For that I started from the following links:

raw bands : "https://github.com/sentinel-hub/custom-scripts/tree/master/sentinel-2/bands"

CAB : "https://github.com/sentinel-hub/custom-scripts/blob/master/sentinel-2/cab/script.js"

FAPAR : "https://github.com/sentinel-hub/custom-scripts/blob/master/sentinel-2/fapar/script.js"

FCOVER : "https://github.com/sentinel-hub/custom-scripts/blob/master/sentinel-2/fcover/script.js"

LAI : "https://github.com/sentinel-hub/custom-scripts/blob/master/sentinel-2/lai/script.js"

CCC : "https://github.com/sentinel-hub/custom-scripts/tree/master/sentinel-2/ccc"

optimization of processing units via sample type : "https://medium.com/sentinel-hub/sampletype-whats-all-the-fuss-about-d7348b4de647"

I have currently used up all my credits/processing units because of the different tests I have done. Also, I haven't found anywhere a way to test the evalscript before testing it in real life.

In addition to that I would like to resample all bands to 10m resolution when this is not the case. I have not yet integrated this into the code below.

Could you tell me if what I did is correct?
Thanks in advance.

Here is the code I have written so far

//VERSION=3

var degToRad = Math.PI / 180;

//Main

function evaluatePixelOrig(samples) {
  var sample = samples[0];
  var b03_norm = normalize(sample.B03, 0, 0.253061520471542);
  var b04_norm = normalize(sample.B04, 0, 0.290393577911328);
  var b05_norm = normalize(sample.B05, 0, 0.305398915248555);
  var b06_norm = normalize(sample.B06, 0.006637972542253, 0.608900395797889);
  var b07_norm = normalize(sample.B07, 0.013972727018939, 0.753827384322927);
  var b8a_norm = normalize(sample.B8A, 0.026690138082061, 0.782011770669178);
  var b11_norm = normalize(sample.B11, 0.016388074192258, 0.493761397883092);
  var b12_norm = normalize(sample.B12, 0, 0.493025984460231);
  var viewZen_norm = normalize(Math.cos(sample.viewZenithMean * degToRad), 0.918595400582046, 1);
  var sunZen_norm  = normalize(Math.cos(sample.sunZenithAngles * degToRad), 0.342022871159208, 0.936206429175402);
  var relAzim_norm = Math.cos((sample.sunAzimuthAngles - sample.viewAzimuthMean) * degToRad)

  var n1_cab = neuron1_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n2_cab = neuron2_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n3_cab = neuron3_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n4_cab = neuron4_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n5_cab = neuron5_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var l2_cab = layer2_cab(n1_cab, n2_cab, n3_cab, n4_cab, n5_cab);
  var cab = denormalize(l2_cab, 0.007426692959872, 873.908222110306);

  var n1_fapar = neuron1_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n2_fapar = neuron2_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n3_fapar = neuron3_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n4_fapar = neuron4_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n5_fapar = neuron5_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var l2_fapar = layer2_fapar(n1_fapar, n2_fapar, n3_fapar, n4_fapar, n5_fapar);
  var fapar = denormalize(l2_fapar, 0.000153013463222, 0.977135096979553);

  var n1_fcover = neuron1_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n2_fcover = neuron2_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n3_fcover = neuron3_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n4_fcover = neuron4_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n5_fcover = neuron5_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var l2_fcover = layer2_fcover(n1_fcover, n2_fcover, n3_fcover, n4_fcover, n5_fcover);
  var fcover = denormalize(l2_fcover, 0.000181230723879, 0.999638214715);

  var n1_lai = neuron1_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n2_lai = neuron2_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n3_lai = neuron3_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n4_lai = neuron4_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var n5_lai = neuron5_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm);
  var l2_lai = layer2_lai(n1_lai, n2_lai, n3_lai, n4_lai, n5_lai);
  var lai = denormalize(l2_lai, 0.000319182538301, 14.4675094548151);

  var ccc = lai * cab

  return {
      default: [
      cab / 300,
      fapar,
      fcover,
      lai / 3,
      ccc
      ]
  }

}

//CAB

function neuron1_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
      4.242299670155190
    + 0.400396555256580 * b03_norm
    + 0.607936279259404 * b04_norm
    + 0.137468650780226 * b05_norm
    - 2.955866573461640 * b06_norm
    - 3.186746687729570 * b07_norm
    + 2.206800751246430 * b8a_norm
    - 0.313784336139636 * b11_norm
    + 0.256063547510639 * b12_norm
    - 0.071613219805105 * viewZen_norm
    + 0.510113504210111 * sunZen_norm
    + 0.142813982138661 * relAzim_norm;

  return tansig(sum);
}

function neuron2_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 0.259569088225796
    - 0.250781102414872 * b03_norm
    + 0.439086302920381 * b04_norm
    - 1.160590937522300 * b05_norm
    - 1.861935250269610 * b06_norm
    + 0.981359868451638 * b07_norm
    + 1.634230834254840 * b8a_norm
    - 0.872527934645577 * b11_norm
    + 0.448240475035072 * b12_norm
    + 0.037078083501217 * viewZen_norm
    + 0.030044189670404 * sunZen_norm
    + 0.005956686619403 * relAzim_norm;

  return tansig(sum);
}

function neuron3_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 3.130392627338360
    + 0.552080132568747 * b03_norm
    - 0.502919673166901 * b04_norm
    + 6.105041924966230 * b05_norm
    - 1.294386119140800 * b06_norm
    - 1.059956388352800 * b07_norm
    - 1.394092902418820 * b8a_norm
    + 0.324752732710706 * b11_norm
    - 1.758871822827680 * b12_norm
    - 0.036663679860328 * viewZen_norm
    - 0.183105291400739 * sunZen_norm
    - 0.038145312117381 * relAzim_norm;

  return tansig(sum);
}

function neuron4_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 0.774423577181620
    + 0.211591184882422 * b03_norm
    - 0.248788896074327 * b04_norm
    + 0.887151598039092 * b05_norm
    + 1.143675895571410 * b06_norm
    - 0.753968830338323 * b07_norm
    - 1.185456953076760 * b8a_norm
    + 0.541897860471577 * b11_norm
    - 0.252685834607768 * b12_norm
    - 0.023414901078143 * viewZen_norm
    - 0.046022503549557 * sunZen_norm
    - 0.006570284080657 * relAzim_norm;

  return tansig(sum);
}

function neuron5_cab(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 2.584276648534610
    + 0.254790234231378 * b03_norm
    - 0.724968611431065 * b04_norm
    + 0.731872806026834 * b05_norm
    + 2.303453821021270 * b06_norm
    - 0.849907966921912 * b07_norm
    - 6.425315500537270 * b8a_norm
    + 2.238844558459030 * b11_norm
    - 0.199937574297990 * b12_norm
    + 0.097303331714567 * viewZen_norm
    + 0.334528254938326 * sunZen_norm
    + 0.113075306591838 * relAzim_norm;

  return tansig(sum);
}

function layer2_cab(neuron1_cab, neuron2_cab, neuron3_cab, neuron4_cab, neuron5_cab) {
  var sum =
    + 0.463426463933822
    - 0.352760040599190 * neuron1_cab
    - 0.603407399151276 * neuron2_cab
    + 0.135099379384275 * neuron3_cab
    - 1.735673123851930 * neuron4_cab
    - 0.147546813318256 * neuron5_cab;

  return sum;
}

//FAPAR

function neuron1_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 0.887068364040280
    + 0.268714454733421 * b03_norm
    - 0.205473108029835 * b04_norm
    + 0.281765694196018 * b05_norm
    + 1.337443412255980 * b06_norm
    + 0.390319212938497 * b07_norm
    - 3.612714342203350 * b8a_norm
    + 0.222530960987244 * b11_norm
    + 0.821790549667255 * b12_norm
    - 0.093664567310731 * viewZen_norm
    + 0.019290146147447 * sunZen_norm
    + 0.037364446377188 * relAzim_norm;

  return tansig(sum);
}

function neuron2_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 0.320126471197199
    - 0.248998054599707 * b03_norm
    - 0.571461305473124 * b04_norm
    - 0.369957603466673 * b05_norm
    + 0.246031694650909 * b06_norm
    + 0.332536215252841 * b07_norm
    + 0.438269896208887 * b8a_norm
    + 0.819000551890450 * b11_norm
    - 0.934931499059310 * b12_norm
    + 0.082716247651866 * viewZen_norm
    - 0.286978634108328 * sunZen_norm
    - 0.035890968351662 * relAzim_norm;

  return tansig(sum);
}

function neuron3_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 0.610523702500117
    - 0.164063575315880 * b03_norm
    - 0.126303285737763 * b04_norm
    - 0.253670784366822 * b05_norm
    - 0.321162835049381 * b06_norm
    + 0.067082287973580 * b07_norm
    + 2.029832288655260 * b8a_norm
    - 0.023141228827722 * b11_norm
    - 0.553176625657559 * b12_norm
    + 0.059285451897783 * viewZen_norm
    - 0.034334454541432 * sunZen_norm
    - 0.031776704097009 * relAzim_norm;

  return tansig(sum);
}

function neuron4_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 0.379156190833946
    + 0.130240753003835 * b03_norm
    + 0.236781035723321 * b04_norm
    + 0.131811664093253 * b05_norm
    - 0.250181799267664 * b06_norm
    - 0.011364149953286 * b07_norm
    - 1.857573214633520 * b8a_norm
    - 0.146860751013916 * b11_norm
    + 0.528008831372352 * b12_norm
    - 0.046230769098303 * viewZen_norm
    - 0.034509608392235 * sunZen_norm
    + 0.031884395036004 * relAzim_norm;

  return tansig(sum);
}

function neuron5_fapar(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 1.353023396690570
    - 0.029929946166941 * b03_norm
    + 0.795804414040809 * b04_norm
    + 0.348025317624568 * b05_norm
    + 0.943567007518504 * b06_norm
    - 0.276341670431501 * b07_norm
    - 2.946594180142590 * b8a_norm
    + 0.289483073507500 * b11_norm
    + 1.044006950440180 * b12_norm
    - 0.000413031960419 * viewZen_norm
    + 0.403331114840215 * sunZen_norm
    + 0.068427130526696 * relAzim_norm;

  return tansig(sum);
}

function layer2_fapar(neuron1_fapar, neuron2_fapar, neuron3_fapar, neuron4_fapar, neuron5_fapar) {
  var sum =
    - 0.336431283973339
    + 2.126038811064490 * neuron1_fapar
    - 0.632044932794919 * neuron2_fapar
    + 5.598995787206250 * neuron3_fapar
    + 1.770444140578970 * neuron4_fapar
    - 0.267879583604849 * neuron5_fapar;

  return sum;
}

//FCOVER

function neuron1_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 1.45261652206
    - 0.156854264841 * b03_norm
    + 0.124234528462 * b04_norm
    + 0.235625516229 * b05_norm
    - 1.8323910258 * b06_norm
    - 0.217188969888 * b07_norm
    + 5.06933958064 * b8a_norm
    - 0.887578008155 * b11_norm
    - 1.0808468167 * b12_norm
    - 0.0323167041864 * viewZen_norm
    - 0.224476137359 * sunZen_norm
    - 0.195523962947 * relAzim_norm;

  return tansig(sum);
}

function neuron2_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 1.70417477557
    - 0.220824927842 * b03_norm
    + 1.28595395487 * b04_norm
    + 0.703139486363 * b05_norm
    - 1.34481216665 * b06_norm
    - 1.96881267559 * b07_norm
    - 1.45444681639 * b8a_norm
    + 1.02737560043 * b11_norm
    - 0.12494641532 * b12_norm
    + 0.0802762437265 * viewZen_norm
    - 0.198705918577 * sunZen_norm
    + 0.108527100527 * relAzim_norm;

  return tansig(sum);
}

function neuron3_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 1.02168965849
    - 0.409688743281 * b03_norm
    + 1.08858884766 * b04_norm
    + 0.36284522554 * b05_norm
    + 0.0369390509705 * b06_norm
    - 0.348012590003 * b07_norm
    - 2.0035261881 * b8a_norm
    + 0.0410357601757 * b11_norm
    + 1.22373853174 * b12_norm
    + -0.0124082778287 * viewZen_norm
    - 0.282223364524 * sunZen_norm
    + 0.0994993117557 * relAzim_norm;

  return tansig(sum);
}

function neuron4_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 0.498002810205
    - 0.188970957866 * b03_norm
    - 0.0358621840833 * b04_norm
    + 0.00551248528107 * b05_norm
    + 1.35391570802 * b06_norm
    - 0.739689896116 * b07_norm
    - 2.21719530107 * b8a_norm
    + 0.313216124198 * b11_norm
    + 1.5020168915 * b12_norm
    + 1.21530490195 * viewZen_norm
    - 0.421938358618 * sunZen_norm
    + 1.48852484547 * relAzim_norm;

  return tansig(sum);
}

function neuron5_fcover(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    - 3.88922154789
    + 2.49293993709 * b03_norm
    - 4.40511331388 * b04_norm
    - 1.91062012624 * b05_norm
    - 0.703174115575 * b06_norm
    - 0.215104721138 * b07_norm
    - 0.972151494818 * b8a_norm
    - 0.930752241278 * b11_norm
    + 1.2143441876 * b12_norm
    - 0.521665460192 * viewZen_norm
    - 0.445755955598 * sunZen_norm
    + 0.344111873777 * relAzim_norm;

  return tansig(sum);
}

function layer2_fcover(neuron1_fcover, neuron2_fcover, neuron3_fcover, neuron4_fcover, neuron5_fcover) {
  var sum =
    - 0.0967998147811
    + 0.23080586765 * neuron1_fcover
    - 0.333655484884 * neuron2_fcover
    - 0.499418292325 * neuron3_fcover
    + 0.0472484396749 * neuron4_fcover
    - 0.0798516540739 * neuron5_fcover;

  return sum;
}

//LAI

function neuron1_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 4.96238030555279
    - 0.023406878966470 * b03_norm
    + 0.921655164636366 * b04_norm
    + 0.135576544080099 * b05_norm
    - 1.938331472397950 * b06_norm
    - 3.342495816122680 * b07_norm
    + 0.902277648009576 * b8a_norm
    + 0.205363538258614 * b11_norm
    - 0.040607844721716 * b12_norm
    - 0.083196409727092 * viewZen_norm
    + 0.260029270773809 * sunZen_norm
    + 0.284761567218845 * relAzim_norm;

  return tansig(sum);
}

function neuron2_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 1.416008443981500
    - 0.132555480856684 * b03_norm
    - 0.139574837333540 * b04_norm
    - 1.014606016898920 * b05_norm
    - 1.330890038649270 * b06_norm
    + 0.031730624503341 * b07_norm
    - 1.433583541317050 * b8a_norm
    - 0.959637898574699 * b11_norm
    + 1.133115706551000 * b12_norm
    + 0.216603876541632 * viewZen_norm
    + 0.410652303762839 * sunZen_norm
    + 0.064760155543506 * relAzim_norm;

  return tansig(sum);
}

function neuron3_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 1.075897047213310
    + 0.086015977724868 * b03_norm
    + 0.616648776881434 * b04_norm
    + 0.678003876446556 * b05_norm
    + 0.141102398644968 * b06_norm
    - 0.096682206883546 * b07_norm
    - 1.128832638862200 * b8a_norm
    + 0.302189102741375 * b11_norm
    + 0.434494937299725 * b12_norm
    - 0.021903699490589 * viewZen_norm
    - 0.228492476802263 * sunZen_norm
    - 0.039460537589826 * relAzim_norm;

  return tansig(sum);
}

function neuron4_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 1.533988264655420
    - 0.109366593670404 * b03_norm
    - 0.071046262972729 * b04_norm
    + 0.064582411478320 * b05_norm
    + 2.906325236823160 * b06_norm
    - 0.673873108979163 * b07_norm
    - 3.838051868280840 * b8a_norm
    + 1.695979344531530 * b11_norm
    + 0.046950296081713 * b12_norm
    - 0.049709652688365 * viewZen_norm
    + 0.021829545430994 * sunZen_norm
    + 0.057483827104091 * relAzim_norm;

  return tansig(sum);
}

function neuron5_lai(b03_norm,b04_norm,b05_norm,b06_norm,b07_norm,b8a_norm,b11_norm,b12_norm, viewZen_norm,sunZen_norm,relAzim_norm) {
  var sum =
    + 3.024115930757230
    - 0.089939416159969 * b03_norm
    + 0.175395483106147 * b04_norm
    - 0.081847329172620 * b05_norm
    + 2.219895367487790 * b06_norm
    + 1.713873975136850 * b07_norm
    + 0.713069186099534 * b8a_norm
    + 0.138970813499201 * b11_norm
    - 0.060771761518025 * b12_norm
    + 0.124263341255473 * viewZen_norm
    + 0.210086140404351 * sunZen_norm
    - 0.183878138700341 * relAzim_norm;

  return tansig(sum);
}

function layer2_lai(neuron1_lai, neuron2_lai, neuron3_lai, neuron4_lai, neuron5_lai) {
  var sum =
    + 1.096963107077220
    - 1.500135489728730 * neuron1_lai
    - 0.096283269121503 * neuron2_lai
    - 0.194935930577094 * neuron3_lai
    - 0.352305895755591 * neuron4_lai
    + 0.075107415847473 * neuron5_lai;

  return sum;
}

//Generic functions

function normalize(unnormalized, min, max) {
  return 2 * (unnormalized - min) / (max - min) - 1;
}
function denormalize(normalized, min, max) {
  return 0.5 * (normalized + 1) * (max - min) + min;
}
function tansig(input) {
  return 2 / (1 + Math.exp(-2 * input)) - 1;
}

function setup() {
    return {
        input: [{
            bands: ["B02","B03","B04","B05","B06","B07","B08","B8A","B11","B12","CLM","dataMask"]
        }],
        output: [
          {
          id:"default",
          sampleType: "UINT16",
          bands: 17
          }
        ]
    };
}

const f = 10000;

function evaluatePixel(sample, scene, metadata, customData, outputMetadata) {
    const res1 = [f * sample.B02,f * sample.B03,f * sample.B04,f * sample.B05,f * sample.B06,f * sample.B07,f * sample.B08,f * sample.B8A,f * sample.B11,f * sample.B12,f * sample.CLM,f * sample.dataMask];
    const res2 = evaluatePixelOrig([f * sample], [scene], metadata, customData, outputMetadata);
    const res3 = res1.concat(res2[Object.keys(res2)[0]]);
    return ,
            res3;
}


问:
What are the cons of conditionally rendering <ApolloProvider> components? (Feedback wanted)
What are the disadvantages of conditionally rendering <ApolloProvider> components?

Sorry if you feel like this is a noob question.

I just came across a project in React Native using GraphQL with ApolloClient. The server exposes multiple schemas, each with its own endpoint.
And so the client logic, was to conditionally render a <ApolloProvider> component with a different client as props.
Also the condition to choose which client to render depends on a React Context.

Example

Sounds like an antipattern to me.
Will the cache work as it should?
It is probably impossible to introspect the schema(s), and thus use a code generator for Graphql types/operations.

I thought I would present these "issues" so that we could make the best use of GraphQL. To take advantage of all its benefits and not just to bend to the choices made on the server side.
One way to improve would be to forget about these multiple endpoints, either by grouping them together or by creating a gateway that would do so.

So what do you think about it? It definitely seems like it brings a lot of painpoints?
Have you ever crossed a similar design? And was it painful to use?


问:
INSTALL_FAILED_INVALID_INSTALL_LOCATION when sideloading an apk
I have a video projector based on android tv 9, but it's very closed, there isn't a file explorer, app store ecc. Wifi adb it's enabled by default. i want to install an file explorer (or any other app) but when i try to install the apk it gives me this

```<code>adb install filemanagerplus. apk
adb: failed to install filemanagerplus.apk: Failure [INSTALL_FAILED_INVALID_INSTALL_LOCATION]
</code>```

the apk it's android tv compatible. What i can do?

Projector name: surewheel sw10

Model (that i found on android tv about setting): NL5H00X_TP

Body:
I have a video projector based on android tv 9, but it's very closed, there isn't a file explorer, app store ecc. Wifi adb it's enabled by default. i want to install an file explorer (or any other app) but when i try to install the apk it gives me this

adb install filemanagerplus. apk
adb: failed to install filemanagerplus.apk: Failure [INSTALL_FAILED_INVALID_INSTALL_LOCATION]

the apk it's android tv compatible. What i can do?

Projector name: surewheel sw10

Model (that i found on android tv about setting): NL5H00X_TP


问:
Translation Error: ThermalZone; Medium.enthalpyOfCondensingGas
I am trying to run a simulation for the first time in OpenModelica with the Buildings library. I have a Thermal Zone and I am dragging and dropping components to the workspace. I connected an EP Spawn widget to the Zone Surface, then connected the Zone surface to the ThermalZone. I have encountered an error when checking the model
[Buildings.ThermalZones.EnergyPlus_9_6_0.ThermalZone: 81:3-82:48]: Function Medium.enthalpyOfCondensingGas not found in scope ThermalZone.
picture of thermal zone components

I click the link and the code clearly shows me a line where the function does exist.
Picture of Function Code
So, what does this mean in two sentences or less?

I am trying to run a check in OpenModelica using the LBL Buildings library and I encounter an error for the ThermalZone. The code seems fine. I want it to run.


问:
Automate Printing Multiple Envelope Addresses
Objective: print multiple different addresses on envelopes.

I have an ETSY shop where I get order sheets in PDFs that look like in the attached. Each order has its address obviously.enter image description here

Instead of copying and pasting each address one by one I want to automate printing those address on envelopes somehow, but I do not know how.enter image description here

I tried docparser to scrape the address data and then I download it in an excel format, but from there I am lost.enter image description here
enter image description here


问:
ViewPager2 "on a null object reference"
I don't know what I'm doing wrong or missing. I have an Activity with a viewpager2 with existing Fragments and Buttons in it.
If one of this Buttons is clicked, it starts a doInBackground in Mainactivity which gives me a String back.

With this String I want to change the Backgroundcolor of the Button. But I don't know how to get this String to Fragment. Everything I want to call gives me the exception

"java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.SharedPreferences android.content.Context.getSharedPreferences(java.lang.String, int)' on a null object reference"

I tried Sharedpreferences, setter and getter, bundles and a lot more. But nothing works.
How can I get the response from doInBackGround to Fragment and use it there?

```<code><?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/lichtliste"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".lichtliste">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="889dp"
        android:orientation="vertical">

        <Button
            android:id="@+id/btnwztv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="btnwztv"
            android:text="Wohnzimmer TV" />

    </LinearLayout>

</FrameLayout>
</code>```
```<code>public class lichtschalten extends AsyncTask<String, Void, String> {
    String eins;
    @Override
    protected String doInBackground(String... params) {}

    protected void onProgressUpdate(String... progress) {}

    @Override
    protected void onPostExecute(String s) {

               //here is the Point i dont cant do somthing in Fragment
               //i get a String and want to take this String to change the Buttonbackgroundcolor in Frgament with this.

            }
        }

    }
}
</code>```
```<code><?xml version="1.0" encoding="utf-8" ?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/licht"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Licht">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></com.google.android.material.tabs.TabLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tab_layout" />

</RelativeLayout>
</code>```
```<code>package com.example.weissetaube;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

public class lichtliste extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){

        View view = inflater.inflate(R.layout.fragment_lichtliste,null);

       Button btnwzesstisch = (Button)view.findViewById(R.id.btnwzesstisch);

    return view;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        String Wert = new btnColor().getwert();
        Toast.makeText(getActivity(), Wert, Toast.LENGTH_SHORT).show();
        Button btnwzesstisch = (Button)view.findViewById(R.id.btnwzesstisch);
        btnwzesstisch.setOnClickListener(v -> new Licht().onClick(btnwzesstisch));

    }
}
</code>```
```<code>package com.example.weissetaube;

import android.app.Activity;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerAdapter extends FragmentStateAdapter {
Activity activity;
    private String[] titles = new String[]{"Lichtliste","Grundriss"};

    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position){
            case 0:
                return new lichtliste();
            case 1:
                return new lichtgrundriss();
        }
        return new lichtliste();
    }

    @Override
    public int getItemCount() {
        return titles.length;
    }

}
</code>```
```<code>package com.example.weissetaube;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.viewpager2.widget.ViewPager2;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

public class Licht extends AppCompatActivity implements View.OnClickListener {
    private MainActivity MainActivity;
    private ViewPagerAdapter viewPagerAdapter;
    private ViewPager2 viewPager2;
    private TabLayout tabLayout;
    public String lichtrelais;
    private String[] titles = new String[]{"Lichtliste","Grundriss"};

    public String device;
    public String seite;
    public String device1;
    public String device2;
    public String url = "myurl";
    public String job = "6";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_licht);
        getSupportActionBar().hide();
        viewPager2 = findViewById(R.id.viewpager);
        tabLayout = findViewById(R.id.tab_layout);
        viewPagerAdapter = new ViewPagerAdapter(this);
        viewPager2.setAdapter(viewPagerAdapter);
        new TabLayoutMediator(tabLayout,viewPager2,((tab, position) -> tab.setText(titles[position]))).attach();
        url = "myurl";
        job = "6";
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case(R.id.btnwzesstisch):

                new MainActivity().licht();
        }

    }

    }

}
</code>```

Title: ViewPager2 "on a null object reference"

Body:
I don't know what I'm doing wrong or missing. I have an Activity with a viewpager2 with existing Fragments and Buttons in it.
If one of this Buttons is clicked, it starts a doInBackground in Mainactivity which gives me a String back.

With this String I want to change the Backgroundcolor of the Button. But I don't know how to get this String to Fragment. Everything I want to call gives me the exception

"java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.SharedPreferences android.content.Context.getSharedPreferences(java.lang.String, int)' on a null object reference"

I tried Sharedpreferences, setter and getter, bundles and a lot more. But nothing works.
How can I get the response from doInBackGround to Fragment and use it there?

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/lichtliste"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".lichtliste">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="889dp"
        android:orientation="vertical">

        <Button
            android:id="@+id/btnwztv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="btnwztv"
            android:text="Wohnzimmer TV" />

    </LinearLayout>

</FrameLayout>

public class lichtschalten extends AsyncTask<String, Void, String> {
    String eins;
    @Override
    protected String doInBackground(String... params) {}

    protected void onProgressUpdate(String... progress) {}

    @Override
    protected void onPostExecute(String s) {

               //here is the Point i dont cant do somthing in Fragment
               //i get a String and want to take this String to change the Buttonbackgroundcolor in Frgament with this.

            }
        }

    }
}

<?xml version="1.0" encoding="utf-8" ?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/licht"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Licht">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></com.google.android.material.tabs.TabLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tab_layout" />

</RelativeLayout>

package com.example.weissetaube;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

public class lichtliste extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){

        View view = inflater.inflate(R.layout.fragment_lichtliste,null);

       Button btnwzesstisch = (Button)view.findViewById(R.id.btnwzesstisch);

    return view;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        String Wert = new btnColor().getwert();
        Toast.makeText(getActivity(), Wert, Toast.LENGTH_SHORT).show();
        Button btnwzesstisch = (Button)view.findViewById(R.id.btnwzesstisch);
        btnwzesstisch.setOnClickListener(v -> new Licht().onClick(btnwzesstisch));

    }
}

package com.example.weissetaube;

import android.app.Activity;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerAdapter extends FragmentStateAdapter {
Activity activity;
    private String[] titles = new String[]{"Lichtliste","Grundriss"};

    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position){
            case 0:
                return new lichtliste();
            case 1:
                return new lichtgrundriss();
        }
        return new lichtliste();
    }

    @Override
    public int getItemCount() {
        return titles.length;
    }

}

package com.example.weissetaube;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.viewpager2.widget.ViewPager2;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

public class Licht extends AppCompatActivity implements View.OnClickListener {
    private MainActivity MainActivity;
    private ViewPagerAdapter viewPagerAdapter;
    private ViewPager2 viewPager2;
    private TabLayout tabLayout;
    public String lichtrelais;
    private String[] titles = new String[]{"Lichtliste","Grundriss"};

    public String device;
    public String seite;
    public String device1;
    public String device2;
    public String url = "myurl";
    public String job = "6";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_licht);
        getSupportActionBar().hide();
        viewPager2 = findViewById(R.id.viewpager);
        tabLayout = findViewById(R.id.tab_layout);
        viewPagerAdapter = new ViewPagerAdapter(this);
        viewPager2.setAdapter(viewPagerAdapter);
        new TabLayoutMediator(tabLayout,viewPager2,((tab, position) -> tab.setText(titles[position]))).attach();
        url = "myurl";
        job = "6";
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case(R.id.btnwzesstisch):

                new MainActivity().licht();
        }

    }

    }

}


问:
Laravel Sanctum pass token as key query param in request
I'm building a public API using Laravel 9 and Sanctum v3. I'm allowing users to create personal access tokens to be used as API keys on the public API. I have created a token, and a controller that uses the auth:sanctum middleware and am testing through Postman.

If I attach my plain access token as a Bearer token on the header, the validation passes, but I'd like to also be able to pass this as a key option in the request query params, which right now is unauthenticated.

What's the way around this?

<?php

namespace App\Http\Controllers\Api\V1;

use App\Http\Controllers\Controller;
use App\Models\Message;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Validator;

class SendController extends Controller
{
    /**
     * Instantiate a new AccountController instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth:sanctum');
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'phone' => 'required|digits_between:7,15|numeric|alpha_dash|phone:AUTO,GB',
            'message' => 'required|string|min:1|max:160',
            'sender' => 'nullable|min:2|max:160'
        ]);

        if ($validator->fails()) {
            return response()->json([
                'message' => "One or more fields have been missed or are invalid.",
                'errors' => $validator->messages()
            ], 400);
        }

        return response()->json([
            'message' => 'Sent'
        ], 200);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Message  $message
     * @return \Illuminate\Http\Response
     */
    public function show(Message $message)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Message  $message
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Message $message)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Message  $message
     * @return \Illuminate\Http\Response
     */
    public function destroy(Message $message)
    {
        //
    }
}
```


问:
horizontally fill background color after div to end of screen
I have an rtl react app. It means,

any element I create is filled from right to left.

to apply style to the left side of a div I have to use after selector, instead of before.

I want 2 partially overlapped divs, in which I can set a background color from the end of the second div, to the end of the screen. sth like this:

I've already done it, using these codes:

html:

```<code><Grid container xs={12} lg={9} css={styles.grid}>
  <div css={styles.item1}>item 1</div>
  <div css={styles.item2}>item 2</div>
</Grid>
</code>```

css:

```<code>  grid: css`
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    margin: 0 auto;
  `,
  item1: css`
    min-height: 300px;
    grid-column: 1 / 8;
    background-color: #00ff5560;
    grid-row: 1/2;
  `,
  item2: css`
    position: relative;
    background-size: cover;
    grid-column: 7 / -1;
    grid-row: 1/2;
      background-color: #0365f260;
      &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 100%;
      display: block;
      width: 100vw;
      height: 100%;
      background-color: #0365f2;
    }
  `
</code>```

The problem is that, it makes my screen, bigger than it's real size, so it becomes scrollable horizontally:

Can you please help me to figure out how to fix it?

Body:
I have an rtl react app. It means,

any element I create is filled from right to left.

to apply style to the left side of a div I have to use after selector, instead of before.

I want 2 partially overlapped divs, in which I can set a background color from the end of the second div, to the end of the screen. sth like this:

I've already done it, using these codes:

html:

<Grid container xs={12} lg={9} css={styles.grid}>

item 1

item 2

</Grid>

css:

  grid: css`
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    margin: 0 auto;
  `,
  item1: css`
    min-height: 300px;
    grid-column: 1 / 8;
    background-color: #00ff5560;
    grid-row: 1/2;
  `,
  item2: css`
    position: relative;
    background-size: cover;
    grid-column: 7 / -1;
    grid-row: 1/2;
      background-color: #0365f260;
      &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 100%;
      display: block;
      width: 100vw;
      height: 100%;
      background-color: #0365f2;
    }
  `

The problem is that, it makes my screen, bigger than it's real size, so it becomes scrollable horizontally:

Can you please help me to figure out how to fix it?


问:
Static IP in nextjs API
It's my first time using next.js api and I am trying to use a 3rd party API where I need to whitelist the IP of the server from where the request will be coming through. I know how to do this in AWS lambda's using elastic IPs and VPC, but I have no idea how this can be implemented in next.js itself. Does anyone have any idea if this is currently possible or not?

If not, then will I have to just use next API as a proxy and use the frontend static IP and whitelist it with my third-party provider?

Title: Static IP in nextjs API


问:
In url schema intent can I use component=com.android.htmlviewer
component=com.android.htmlviewer I still can't run them from the scheme url.

can you tell me about the component running on the scheme url.

myapp://?returnUrl=http:/google.com.au#Intent;action=android.intent.action.VIEW;launchFlags=0x4400000;component=MyApp.MyApp/myapp.auth.droid.MainActivity;end

component=MyApp.MyApp/myapp.auth.android.MainActivity and how does it have java syntax

I will do to write it component={name1}.{name2}/{name3}.{name4}.{name5}


问:
Adding symbol layer with one source removed FillLayer with another source - Mapbox android
I have ploygons which I have drawn using FillLayer mapbox which uses a set of GeoJson coordinates to create a source and add to the Fill layer.
After that I am creating another layer (Symbol Layer) this time with a different set of coordinates creating another source object.
When I add Symbol layer,the  previously added Fill layer disappears.
I tried multiple solutions but its not working.
Is it even possible to add multiple layers of different types with different source ids?

```<code>  var bm = BitmapFactory.decodeResource(
                resources,
                com.mapbox.services.android.navigation.ui.v5.R.drawable.mapbox_marker_icon_default
            )
            //  bm = Bitmap.createScaledBitmap(bm, 80, 80, true);
            style.addImage("ID_ICON_AIRPORT", bm)
            // Create a SymbolManager.
            val symbolManager = SymbolManager(mapView, map, style)

// Set non-data-driven properties.
            symbolManager.iconAllowOverlap = true
            //symbolManager.iconIgnorePlacement = true

// Create a symbol at the specified location.
            val options =
                SymbolOptions()
                    .withLatLng(LatLng(latitude, longitude))
                    .withIconImage("ID_ICON_AIRPORT")
                    .withIconSize(1.3f).withTextSize(2f)

            symbolManager?.create(options)
            symbolManager.addClickListener {
                // to open infowindow here
            }
</code>```

I tried with SymbolManager , it works to display the marker but now I don't know how to add info window on the marker click. Expected to see both symbol layer and fill layer, I want symbol layer on top of fill layer.

Body:
I have ploygons which I have drawn using FillLayer mapbox which uses a set of GeoJson coordinates to create a source and add to the Fill layer.
After that I am creating another layer (Symbol Layer) this time with a different set of coordinates creating another source object.
When I add Symbol layer,the  previously added Fill layer disappears.
I tried multiple solutions but its not working.
Is it even possible to add multiple layers of different types with different source ids?

  var bm = BitmapFactory.decodeResource(
                resources,
                com.mapbox.services.android.navigation.ui.v5.R.drawable.mapbox_marker_icon_default
            )
            //  bm = Bitmap.createScaledBitmap(bm, 80, 80, true);
            style.addImage("ID_ICON_AIRPORT", bm)
            // Create a SymbolManager.
            val symbolManager = SymbolManager(mapView, map, style)

// Set non-data-driven properties.
            symbolManager.iconAllowOverlap = true
            //symbolManager.iconIgnorePlacement = true

// Create a symbol at the specified location.
            val options =
                SymbolOptions()
                    .withLatLng(LatLng(latitude, longitude))
                    .withIconImage("ID_ICON_AIRPORT")
                    .withIconSize(1.3f).withTextSize(2f)

            symbolManager?.create(options)
            symbolManager.addClickListener {
                // to open infowindow here
            }

I tried with SymbolManager , it works to display the marker but now I don't know how to add info window on the marker click. Expected to see both symbol layer and fill layer, I want symbol layer on top of fill layer.


问:
Error raised when trying to install Django
I'm trying to install Django into my project using the following requirements.txt file:

```<code>django>=4.1.0,<4.2.0
djangorestframework
pyyaml
requests
django-cors-headers
</code>```

But, the following error is raised:

```<code>     creating build/temp.macosx-10.14-arm64-cpython-38/lib
      clang -Wno-unused-result -Wsign-compare -Wunreachable-code -fno-common -dynamic -DNDEBUG -g -fwrapv -O3 -Wall -iwithsysroot/System/Library/Frameworks/System.framework/PrivateHeaders -iwithsysroot/Applications/Xcode.app/Contents/Developer/Library/Frameworks/Python3.framework/Versions/3.8/Headers -arch arm64 -arch x86_64 -Werror=implicit-function-declaration -I/Users/brendanahern/dev/drf/venv/include -I/Applications/Xcode.app/Contents/Developer/Library/Frameworks/Python3.framework/Versions/3.8/Headers -c lib/zoneinfo_module.c -o build/temp.macosx-10.14-arm64-cpython-38/lib/zoneinfo_module.o -std=c99
      lib/zoneinfo_module.c:1:10: fatal error: 'Python.h' file not found
      #include "Python.h"
               ^~~~~~~~~~
      1 error generated.
      error: command '/usr/bin/clang' failed with exit code 1
      [end of output]

  note: This error originates from a subprocess, and is likely not a problem with pip.
  ERROR: Failed building wheel for backports.zoneinfo
Successfully built pyyaml
Failed to build backports.zoneinfo
ERROR: Could not build wheels for backports.zoneinfo, which is required to install pyproject.toml-based projects
</code>```

I am using a Mac with an M1 chip.

Answers on a similar question suggested that the error came from numpy and I needed to install it differently due to the M1 chip, but it didn't fix the issue.

Body:
I'm trying to install Django into my project using the following requirements.txt file:

django>=4.1.0,<4.2.0
djangorestframework
pyyaml
requests
django-cors-headers

But, the following error is raised:

     creating build/temp.macosx-10.14-arm64-cpython-38/lib
      clang -Wno-unused-result -Wsign-compare -Wunreachable-code -fno-common -dynamic -DNDEBUG -g -fwrapv -O3 -Wall -iwithsysroot/System/Library/Frameworks/System.framework/PrivateHeaders -iwithsysroot/Applications/Xcode.app/Contents/Developer/Library/Frameworks/Python3.framework/Versions/3.8/Headers -arch arm64 -arch x86_64 -Werror=implicit-function-declaration -I/Users/brendanahern/dev/drf/venv/include -I/Applications/Xcode.app/Contents/Developer/Library/Frameworks/Python3.framework/Versions/3.8/Headers -c lib/zoneinfo_module.c -o build/temp.macosx-10.14-arm64-cpython-38/lib/zoneinfo_module.o -std=c99
      lib/zoneinfo_module.c:1:10: fatal error: 'Python.h' file not found
      #include "Python.h"
               ^~~~~~~~~~
      1 error generated.
      error: command '/usr/bin/clang' failed with exit code 1
      [end of output]

  note: This error originates from a subprocess, and is likely not a problem with pip.
  ERROR: Failed building wheel for backports.zoneinfo
Successfully built pyyaml
Failed to build backports.zoneinfo
ERROR: Could not build wheels for backports.zoneinfo, which is required to install pyproject.toml-based projects

I am using a Mac with an M1 chip.

Answers on a similar question suggested that the error came from numpy and I needed to install it differently due to the M1 chip, but it didn't fix the issue.


问:
How to find the enum value in c++ which is returned from a VkResult upon using vkCreateInstance?
I'm having some problem creating a Vulkan instance with vkCreateInstance because it's not returning the enum value of VK_SUCCESS. I know this because I put in this conditional.

if (vkCreateInstance(&createInfo, nullptr, &instance) != VK_SUCCESS){

throw std::runtime_error("failed to create an instance!\n Error type: ");

}

What I'm trying to find out is what enum value actually was returned from the vkCreateInstance so I'll have a better idea on how to debug it. What I'm looking for is a value in the specification found in https://registry.khronos.org/vulkan/specs/1.3-extensions/man/html/VkResult.html


问:
Input field suggestions focus moves to the auto fill options instead of actual suggestions
input field suggestions focus moves to the autofill options instead of actual suggestions in chrome

I have tried autocomplete="off" attribute for input field but still it is showing autofill suggestions


问:
Cannot run ArgoCD Workflow with UI
I follow the official guide on how to install Argo Workflow. In the official guide, you can only run it locally.

I try to edit the install.yaml file and I add a LoadBalancer, but it won't run through it. Only runs by forwarding the port.

Any idea or guide on how to run argo workflow publicly?

I'm using EKS Cluster, AWS.

The guide I followed is: https://argoproj.github.io/argo-workflows/quick-start/

Title: Cannot run ArgoCD Workflow with UI


问:
YOLOv4 modification
I try to use yolov4 for my school project to detect certain fruit seeds, however, I have tried to add in some backgorund images into the dataset, and also try increase the max_batches as well as changing the subdivisions as well. But, all of these do not show me any improve on the accuracy. Can anyone please help me?

Add background images into dataset

Change the max_batches = 5000, 6500, 7000 and 60000. (default is 6000)

Change the subdivisions = 32, 16, 64

Title: YOLOv4 modification


问:
Translate/Rename "Values" column labels in pivot table created using closed xml
I am creating a pivot table using Closed XML. My multilingual application generates an excel sheet(pivot table) with some source data based on my language chosen. I want to translate my excel's columns and other details to English/other language . As shown in the image I want a way to translate "Values" column labels. Or if I can rename "Values" as per my selection of language, if translation is not possible.

I tried the following -

```<code>ptSheet.Cell(5, 5).Value = langId == 0? "Values" : "Data";
</code>```

But once I generate the excel, a popup shows up for reloading the data and then excel is generated with column label as "Values" only.

Body:
I am creating a pivot table using Closed XML. My multilingual application generates an excel sheet(pivot table) with some source data based on my language chosen. I want to translate my excel's columns and other details to English/other language . As shown in the image I want a way to translate "Values" column labels. Or if I can rename "Values" as per my selection of language, if translation is not possible.

I tried the following -

ptSheet.Cell(5, 5).Value = langId == 0? "Values" : "Data";

But once I generate the excel, a popup shows up for reloading the data and then excel is generated with column label as "Values" only.


问:
movie recommendation ALS pyspark
I have a movielens dataset. I want to make a recommendation system based on the input but I'm having trouble doing the model transform.

```<code># get the recommendations for the users
recommendations_df = model.transform(rated_users)
</code>```

IllegalArgumentException: movieId does not exist. Available: userId

my code like this :

```<code># create the ALS model
als = ALS(userCol="userId", itemCol="movieId", ratingCol="rating", coldStartStrategy="drop")

# fit the model to the training data
model = als.fit(training)

# get the movie input
idmovie = int(input("Enter movie ID: "))

# get the users who have rated the input movie
rated_users = ratings.filter(movie_ratings["movieId"] == idmovie).select("userId")
</code>```

got error in :

```<code># get the recommendations for the users
recommendations_df = model.transform(rated_users)
</code>```

Title: movie recommendation ALS pyspark

Body:
I have a movielens dataset. I want to make a recommendation system based on the input but I'm having trouble doing the model transform.

# get the recommendations for the users
recommendations_df = model.transform(rated_users)

IllegalArgumentException: movieId does not exist. Available: userId

my code like this :

# create the ALS model
als = ALS(userCol="userId", itemCol="movieId", ratingCol="rating", coldStartStrategy="drop")

# fit the model to the training data
model = als.fit(training)

# get the movie input
idmovie = int(input("Enter movie ID: "))

# get the users who have rated the input movie
rated_users = ratings.filter(movie_ratings["movieId"] == idmovie).select("userId")

got error in :

# get the recommendations for the users
recommendations_df = model.transform(rated_users)


问:
ImportError: cannot import name 'experimental' from 'keras.mixed_precision'
I have this error when I executing my code. this error from library automatic-speech-recognition 1.0.4 . Help, please

ImportError: cannot import name 'experimental' from 'keras.mixed_precision' i tried to search in google, but no results


问:
"return" directive is not allowed here in
i got "return" directive is not allowed here in error on nginx -t
here is my nginx.conf

```<code>user nginx;
worker_processes auto;
worker_rlimit_nofile 100000;

events {
use epoll;
worker_connections 1024;
multi_accept on;
}

http {
    access_log off;
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 30;
    keepalive_requests 100000;

    server {
    listen 80;
    server_name _;
    return 301 https://$host$request_uri;
    }
    server {
    listen 443 ssl;
        server_name example.com;
        ssl_certificate ssl/example.pem;
        ssl_certificate_key ssl/example.key;
        ssl_conf_command Options KTLS;
        ssl_protocols TLSv1.2 TLSv1.3;

        location / {
            root /usr/local/etc/nginx/html;
            index   index.html index.htm;
            charset     utf-8;
        }
    }

}
</code>```

nginx -t command gives me

"return" directive is not allowed here in /usr/local/etc/nginx/nginx.conf:22

i tried remove conf file and created again, no luck

additional note: if i remove part of config

```<code>server {
   listen 80;
   server_name _;
   return 301 https://$host$request_uri;
   }
</code>```

it works

UPDATE :

if you compile nginx from source, if u do not add rewrite module it happens because return directive part of rewrite module

Body:
i got "return" directive is not allowed here in error on nginx -t
here is my nginx.conf

user nginx;
worker_processes auto;
worker_rlimit_nofile 100000;

events {
use epoll;
worker_connections 1024;
multi_accept on;
}

http {
    access_log off;
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 30;
    keepalive_requests 100000;

    server {
    listen 80;
    server_name _;
    return 301 https://$host$request_uri;
    }
    server {
    listen 443 ssl;
        server_name example.com;
        ssl_certificate ssl/example.pem;
        ssl_certificate_key ssl/example.key;
        ssl_conf_command Options KTLS;
        ssl_protocols TLSv1.2 TLSv1.3;

        location / {
            root /usr/local/etc/nginx/html;
            index   index.html index.htm;
            charset     utf-8;
        }
    }

}

nginx -t command gives me

"return" directive is not allowed here in /usr/local/etc/nginx/nginx.conf:22

i tried remove conf file and created again, no luck

additional note: if i remove part of config

server {
   listen 80;
   server_name _;
   return 301 https://$host$request_uri;
   }

it works

UPDATE :

if you compile nginx from source, if u do not add rewrite module it happens because return directive part of rewrite module


问:
Route [login] not defined. Laravel Sanctum with React as SPA
I am using Laravel sanctum to authenticate my SPA created in React. Once I login

Login.jsx

```<code>const response = await loginUser(authDispatchContext, payload)
if (response){
    toast.success("Log in successful, Redirecting.")
    navigate("/")
}
</code>```

the dashboard component is shown without any redirection, and an API is being called

Dashboard.jsx

```<code>import axios from "../config/axios";
....

const response = await axios.get(url + path)
setListings(response.data.data)
</code>```

my axios.js is

```<code>import axios from 'axios';
axios.defaults.withCredentials = true;
const user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null
console.log(user)
if(user){
    axios.defaults.headers.common = {'Authorization': `Bearer ${user.accessToken}`}
}
export default axios;
</code>```

After the successful login I get the following error screenshot.

My request headers screenshot

```<code>Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Authorization: Bearer 37|wOutmLsOgO3MPuuoJf13lmlbYTW4cQ3eax1FppGU
</code>```

I can see that Authorization header is being set properly and Bearer token is set. But Laravel server is not authenticating the request and sending back a redirect to login page but I am expecting json response.

**When i reload the page, it works normally as expected. Why this weird issue without reload? Can you please point me in the right direction. **

All of my routes except login and register in api.php are protected with auth:sanctum middleware

```<code>Route::middleware('auth:sanctum')->group(function () {
...
Route::get("crypto/all", [Crypto::class, "all"]);
Route::get("crypto/meta/{currencyId}", [Crypto::class, "meta"]);

...
});
</code>```

Update

If I directly include the Bearer token with my request, then everything works fine as well.

```<code>const response = await axios.get(url + path, {
                headers: {
                    "Authorization": "Bearer " + token
                }
            })
</code>```

Body:
I am using Laravel sanctum to authenticate my SPA created in React. Once I login

Login.jsx

const response = await loginUser(authDispatchContext, payload)
if (response){
    toast.success("Log in successful, Redirecting.")
    navigate("/")
}

the dashboard component is shown without any redirection, and an API is being called

Dashboard.jsx

import axios from "../config/axios";
....

const response = await axios.get(url + path)
setListings(response.data.data)

my axios.js is

import axios from 'axios';
axios.defaults.withCredentials = true;
const user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null
console.log(user)
if(user){
    axios.defaults.headers.common = {'Authorization': `Bearer ${user.accessToken}`}
}
export default axios;

After the successful login I get the following error screenshot.

My request headers screenshot

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Authorization: Bearer 37|wOutmLsOgO3MPuuoJf13lmlbYTW4cQ3eax1FppGU

I can see that Authorization header is being set properly and Bearer token is set. But Laravel server is not authenticating the request and sending back a redirect to login page but I am expecting json response.

**When i reload the page, it works normally as expected. Why this weird issue without reload? Can you please point me in the right direction. **

All of my routes except login and register in api.php are protected with auth:sanctum middleware

Route::middleware('auth:sanctum')->group(function () {
...
Route::get("crypto/all", [Crypto::class, "all"]);
Route::get("crypto/meta/{currencyId}", [Crypto::class, "meta"]);

...
});

Update

If I directly include the Bearer token with my request, then everything works fine as well.

const response = await axios.get(url + path, {
                headers: {
                    "Authorization": "Bearer " + token
                }
            })


问:
showMonthYearPicker ui is bugged/not completely showing in flutter
I'm trying to set a showMonthYearPicker in my flutter app, unless the bottom side of the selected date is incomplete. I could not find a way to fix it!

Here is my code:

```<code>selected = await showMonthYearPicker(
                context: navigatorKey.currentState!.overlay!.context,
                initialDate: DateTime.now(),
                firstDate: DateTime(2022),
                lastDate: DateTime.now(),
                builder: (context, child) {
                  return Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 50.0),
                        child: Container(
                          height: 500,
                          width: 800,
                          child: child,
                        ),
                      ),
                    ],
                  );
                },
              );
</code>```

Here is a screenshot of it:

I would be glad with any kind of help!

Body:
I'm trying to set a showMonthYearPicker in my flutter app, unless the bottom side of the selected date is incomplete. I could not find a way to fix it!

Here is my code:

selected = await showMonthYearPicker(
                context: navigatorKey.currentState!.overlay!.context,
                initialDate: DateTime.now(),
                firstDate: DateTime(2022),
                lastDate: DateTime.now(),
                builder: (context, child) {
                  return Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 50.0),
                        child: Container(
                          height: 500,
                          width: 800,
                          child: child,
                        ),
                      ),
                    ],
                  );
                },
              );

Here is a screenshot of it:

I would be glad with any kind of help!


问:
Poll in AMP story
I want to integrate a poll in my AMP-story but I can't seem to put it in the center of my page. Anyone that can help?

Title: Poll in AMP story


问:
Use SFPro font in Flutter rather than default SF UI
Flutter's Cupertino Text Theme uses the older versions of Apple's San Francisco Font known as .SF Pro Display and .SF Pro Text. It then adds custom tracking (letter spacing) to a few default styles.
https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/cupertino/text_theme.dart

This presumably will only approximate native iOS behaviour and requires each font size to be effectively hard coded with the correct letter spacing values.

There is no official support for the actual SF Pro font that is available from Apple for download. Apple also provides a guide on its tracking values.
https://developer.apple.com/design/human-interface-guidelines/foundations/typography/

Is there a way to use the actual SF Pro library and is there a reason why Flutter does not?

For example SF Pro could be presumably be implemented like this

pubspec.yaml

```<code>fonts:
    - family: SF-Pro
      fonts:
        - asset: fonts/SF-Pro.ttf
</code>```

Then the font values could be hard coded:

```<code>class SFTextStyles {
  static const _font = 'SF-Pro';

  static const TextStyle body = TextStyle(
    fontFamily: _font,
    fontSize: 17,
    letterSpacing: -0.43,
  );
  static const TextStyle callout = TextStyle(
    fontFamily: _font,
    fontSize: 16,
    letterSpacing: -0.31,
  );
  static const TextStyle caption = TextStyle(
    fontFamily: _font,
    fontSize: 12,
    letterSpacing: 0,
  );
}
</code>```

or even calculated:

```<code>extension SFTextStylesTracking on TextStyle {
  tracking(double fontSize){
    return merge(
      TextStyle(letterSpacing: _Tracking[fontSize]);
    }
  }

  // source of values: https://developer.apple.com/design/human-interface-guidelines/foundations/typography/

class _Tracking {
        static const Map<int, double> tracking = {
            6: 0.24,
            7: 0.23,
            8: 0.21,
            9: 0.17,
            10: 0.12,
            11: 0.06,
            12: 0,
            13: -0.08,
        etc..
        }
}
</code>```

Is there a reason why this is not done / not a good idea?

Body:
Flutter's Cupertino Text Theme uses the older versions of Apple's San Francisco Font known as .SF Pro Display and .SF Pro Text. It then adds custom tracking (letter spacing) to a few default styles.
https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/cupertino/text_theme.dart

This presumably will only approximate native iOS behaviour and requires each font size to be effectively hard coded with the correct letter spacing values.

There is no official support for the actual SF Pro font that is available from Apple for download. Apple also provides a guide on its tracking values.
https://developer.apple.com/design/human-interface-guidelines/foundations/typography/

Is there a way to use the actual SF Pro library and is there a reason why Flutter does not?

For example SF Pro could be presumably be implemented like this

pubspec.yaml

fonts:
    - family: SF-Pro
      fonts:
        - asset: fonts/SF-Pro.ttf

Then the font values could be hard coded:

class SFTextStyles {
  static const _font = 'SF-Pro';

  static const TextStyle body = TextStyle(
    fontFamily: _font,
    fontSize: 17,
    letterSpacing: -0.43,
  );
  static const TextStyle callout = TextStyle(
    fontFamily: _font,
    fontSize: 16,
    letterSpacing: -0.31,
  );
  static const TextStyle caption = TextStyle(
    fontFamily: _font,
    fontSize: 12,
    letterSpacing: 0,
  );
}

or even calculated:

extension SFTextStylesTracking on TextStyle {
  tracking(double fontSize){
    return merge(
      TextStyle(letterSpacing: _Tracking[fontSize]);
    }
  }

  // source of values: https://developer.apple.com/design/human-interface-guidelines/foundations/typography/

class _Tracking {
        static const Map<int, double> tracking = {
            6: 0.24,
            7: 0.23,
            8: 0.21,
            9: 0.17,
            10: 0.12,
            11: 0.06,
            12: 0,
            13: -0.08,
        etc..
        }
}

Is there a reason why this is not done / not a good idea?