问:
Flutter: does scrollController.position.isScrollingNotifier need to remove listener on dispose? Why's it crashing my app?
I am able to demonstrate my issue with this simple code below.

Basically, I am adding listener to both the ScrollController and scrollController.position.isScrollingNotifier in the init. The scrollController.position.isScrollingNotifier allows me to listen for scrolling start and stopped events. It works fine.

Now when I tap a list tile, it navigates to a new screen (same widget as previous).

However, when I navigate back to the previous screen, the app crashes with error:

```<code>_AssertionError ('package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 107 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views.)
</code>```

The crash is occurring at the removeListener line in the dispose:

scrollController.position.isScrollingNotifier.removeListener(handleScrollStartStop);

If I comment this line out, then the app works fine.

I thought I am supposed to remove listeners in dispose if I added them? Then why the crash?

What am I doing wrong?

```<code>import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(
        viewNumber: 0,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.viewNumber});
  final int viewNumber;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late ScrollController scrollController = ScrollController();

  @override
  void initState() {
    print("initState GODVC");
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      scrollController.addListener(handleScrolled);
      scrollController.position.isScrollingNotifier.addListener(handleScrollStartStop);
    });
  }

  void handleScrollStartStop() {
    // print("handleScrollStartStop");
    if (!scrollController.position.isScrollingNotifier.value) {
      print('Scroll stopped');
    } else {
      print('Scroll started');
    }
  }

  void handleScrolled() {
    print("handleScrolled: $mounted, ${scrollController.offset}");
  }

  @override
  void dispose() {
    print("dispose");
    scrollController.position.isScrollingNotifier.removeListener(handleScrollStartStop);
    print("disposed GODVC 2");
    scrollController.removeListener(handleScrolled);
    print("disposed GODVC 3");
    scrollController.dispose();
    print("disposed GODVC 4");
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("${widget.viewNumber}"),
        leading: Navigator.canPop(context)
            ? MaterialButton(
                padding: EdgeInsets.zero,
                onPressed: () {
                  if (Navigator.canPop(context)) {
                    Navigator.pop(context);
                  }
                },
                child: const Icon(
                  Icons.chevron_left,
                  size: 45,
                  color: Colors.white,
                ),
              )
            : null,
      ),
      body: ListView.builder(
        controller: scrollController,
        itemBuilder: ((context, index) {
          return ListTile(
            title: Text("$index. Something"),
            onTap: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => MyHomePage(
                    viewNumber: widget.viewNumber + 1,
                  ),
                ),
              );
            },
          );
        }),
      ),
    );
  }
}
</code>```

Body:
I am able to demonstrate my issue with this simple code below.

Basically, I am adding listener to both the ScrollController and scrollController.position.isScrollingNotifier in the init. The scrollController.position.isScrollingNotifier allows me to listen for scrolling start and stopped events. It works fine.

Now when I tap a list tile, it navigates to a new screen (same widget as previous).

However, when I navigate back to the previous screen, the app crashes with error:

_AssertionError ('package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 107 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views.)

The crash is occurring at the removeListener line in the dispose:

scrollController.position.isScrollingNotifier.removeListener(handleScrollStartStop);

If I comment this line out, then the app works fine.

I thought I am supposed to remove listeners in dispose if I added them? Then why the crash?

What am I doing wrong?

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(
        viewNumber: 0,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.viewNumber});
  final int viewNumber;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late ScrollController scrollController = ScrollController();

  @override
  void initState() {
    print("initState GODVC");
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      scrollController.addListener(handleScrolled);
      scrollController.position.isScrollingNotifier.addListener(handleScrollStartStop);
    });
  }

  void handleScrollStartStop() {
    // print("handleScrollStartStop");
    if (!scrollController.position.isScrollingNotifier.value) {
      print('Scroll stopped');
    } else {
      print('Scroll started');
    }
  }

  void handleScrolled() {
    print("handleScrolled: $mounted, ${scrollController.offset}");
  }

  @override
  void dispose() {
    print("dispose");
    scrollController.position.isScrollingNotifier.removeListener(handleScrollStartStop);
    print("disposed GODVC 2");
    scrollController.removeListener(handleScrolled);
    print("disposed GODVC 3");
    scrollController.dispose();
    print("disposed GODVC 4");
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("${widget.viewNumber}"),
        leading: Navigator.canPop(context)
            ? MaterialButton(
                padding: EdgeInsets.zero,
                onPressed: () {
                  if (Navigator.canPop(context)) {
                    Navigator.pop(context);
                  }
                },
                child: const Icon(
                  Icons.chevron_left,
                  size: 45,
                  color: Colors.white,
                ),
              )
            : null,
      ),
      body: ListView.builder(
        controller: scrollController,
        itemBuilder: ((context, index) {
          return ListTile(
            title: Text("$index. Something"),
            onTap: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => MyHomePage(
                    viewNumber: widget.viewNumber + 1,
                  ),
                ),
              );
            },
          );
        }),
      ),
    );
  }
}


来源: stackexchange

问:
Can't click on buttons in CefSharp webpage
I'm trying to visualize a map generated with leaflet using CefSharp. This is the very simple code i used:

```<code>using CefSharp.WinForms;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace testLeafletBrowser
{
    public partial class frmMain : Form
    {
        public frmMain()
        {
            InitializeComponent();

            chromiumWebBrowser1.LoadUrl("local-path-tohtml-page");
        }
    }
}
</code>```

I can visualize the map and move/zoom using my mouse. The problem is that i can't click on the control buttons generated by leaflet (zoom in/out buttons, see attached image).

How can i solve this?

Note: i don't want to interact with the buttons programmatically, just click with my mouse.

ContentLicense: CC BY-SA 4.0

Body:
I'm trying to visualize a map generated with leaflet using CefSharp. This is the very simple code i used:

using CefSharp.WinForms;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace testLeafletBrowser
{
    public partial class frmMain : Form
    {
        public frmMain()
        {
            InitializeComponent();

            chromiumWebBrowser1.LoadUrl("local-path-tohtml-page");
        }
    }
}

I can visualize the map and move/zoom using my mouse. The problem is that i can't click on the control buttons generated by leaflet (zoom in/out buttons, see attached image).

How can i solve this?

Note: i don't want to interact with the buttons programmatically, just click with my mouse.


问:
Get component size in .NET MAUI Blazor
I need to draw a heatmap in my MAUI Blazor application. I tried to do it with a canvas, but because the window and therefore the canvas is resizable, I need an axis with scalable labels (so that they don't overlap).

I searched in the internet, but did not find any way to get the real size of the canvas element or any other html element (i am using Blazor.Extensions.Canvas).

Is there any way to get the element dimensions or is there already a library for graphs in .NET MAUI Blazor which works for me?

Title: Get component size in .NET MAUI Blazor


问:
form input not resetting with useState
I have a react bootstrap number form and state.

I would like to reset hours state to 0 after performing the button click and API POST transaction.

hours state updates just fine for the onChange function where I call setHours() in form and I'm using this strategy to reset form data on other components. Any ideas why I can't get it to work elsewhere after button click (i.e. in my try/catch block)??

```<code>const [hours, setHours] = useState(0);

// ...

const handleAddWorkItem = async (sprintId, date, hours) => {
    try {
      await addWorkItemToAirtable(sprintId, date, hours);
      const workItems = await fetchWorkItemsByJobId(sprint.job.id);
      setworkItems(workItems);
      setHours(0); // not working
    } catch (error) {
      console.log({ error });
    }
  };

// ...

                  <Form>
                    <Form.Group
                      className="mb-2"
                      controlId="addTimeFormEmployee"
                    >
                      <Form.Label className="mb-0">
                        <strong>Employee:</strong>
                      </Form.Label>
                      <Form.Select
                        disabled
                        defaultValue={sprint.employee.id}
                        onChange={(e) => {
                          setEmployee(e.target.value);
                        }}
                        aria-label="Select Employee"
                      >
                        {employees &&
                          employees.map((employee) => {
                            return (
                              <option key={employee.id} value={employee.id}>
                                {`${employee.firstName} ${employee.surname}`}
                              </option>
                            );
                          })}
                      </Form.Select>
                    </Form.Group>
                    <Form.Group className="mb-2" controlId="addTimeFormDate">
                      <Form.Label className="mb-0">
                        <strong>Date:</strong>
                      </Form.Label>
                      <Form.Control
                        type="text"
                        onFocus={(e) => (e.target.type = "date")}
                        onChange={(e) => {
                          setDate(e.target.value);
                        }}
                        defaultValue={date}
                        placeholder={date}
                      />
                    </Form.Group>
                    <Form.Group className="mb-2" controlId="addTimeFormHours">
                      <Form.Label className="mb-0">
                        <strong>Hours:</strong>
                      </Form.Label>
                      <Form.Control
                        type="number"
                        defaultValue={0}
                        onChange={(e) => setHours(parseInt(e.target.value, 10))}
                        placeholder={0}
                        min={0}
                      />
                    </Form.Group>
                  </Form>

                  <Button
                    variant="success"
                    onClick={() => {
                      handleAddWorkItem(sprint.id, date, hours);
                    }}
                  >
                    Add Time
                  </Button>
</code>```

Thank you!

Title: form input not resetting with useState

Body:
I have a react bootstrap number form and state.

I would like to reset hours state to 0 after performing the button click and API POST transaction.

hours state updates just fine for the onChange function where I call setHours() in form and I'm using this strategy to reset form data on other components. Any ideas why I can't get it to work elsewhere after button click (i.e. in my try/catch block)??

const [hours, setHours] = useState(0);

// ...

const handleAddWorkItem = async (sprintId, date, hours) => {
    try {
      await addWorkItemToAirtable(sprintId, date, hours);
      const workItems = await fetchWorkItemsByJobId(sprint.job.id);
      setworkItems(workItems);
      setHours(0); // not working
    } catch (error) {
      console.log({ error });
    }
  };

// ...

                  <Form>
                    <Form.Group
                      className="mb-2"
                      controlId="addTimeFormEmployee"
                    >
                      <Form.Label className="mb-0">
                        Employee:
                      </Form.Label>
                      <Form.Select
                        disabled
                        defaultValue={sprint.employee.id}
                        onChange={(e) => {
                          setEmployee(e.target.value);
                        }}
                        aria-label="Select Employee"
                      >
                        {employees &&
                          employees.map((employee) => {
                            return (
                              <option key={employee.id} value={employee.id}>
                                {`${employee.firstName} ${employee.surname}`}
                              </option>
                            );
                          })}
                      </Form.Select>
                    </Form.Group>
                    <Form.Group className="mb-2" controlId="addTimeFormDate">
                      <Form.Label className="mb-0">
                        Date:
                      </Form.Label>
                      <Form.Control
                        type="text"
                        onFocus={(e) => (e.target.type = "date")}
                        onChange={(e) => {
                          setDate(e.target.value);
                        }}
                        defaultValue={date}
                        placeholder={date}
                      />
                    </Form.Group>
                    <Form.Group className="mb-2" controlId="addTimeFormHours">
                      <Form.Label className="mb-0">
                        Hours:
                      </Form.Label>
                      <Form.Control
                        type="number"
                        defaultValue={0}
                        onChange={(e) => setHours(parseInt(e.target.value, 10))}
                        placeholder={0}
                        min={0}
                      />
                    </Form.Group>
                  </Form>

                  <Button
                    variant="success"
                    onClick={() => {
                      handleAddWorkItem(sprint.id, date, hours);
                    }}
                  >
                    Add Time
                  </Button>

Thank you!


问:
How to deal with the "default case" in BlocBuilder when one wants to return nothing?
I have been using Flutter BLoC for some time and I'm quite content with it. However I am still wondering what is the best practice to adopt for the "default case" in BlocBuilder.

Imagine I have the code below which displays various based on the state of a Request (say to an API) :

BlocBuilder<RequestBloc, RequestState>(
  builder: (context, state) {
    if (state is RequestOk) {
      const Text("Name = ${state.firstname}");
      const Text("Name = ${state.lastname}");
      const Text("Name = ${state.age}");
    }
    if (state is RequestLoading)
    {
      const CircularProgressIndicator(color: Colors.orange);
    }
    else {
      return Container(); // any better way than this ?
    }
  },
);
```

The RequestOk and RequestLoading are the only two states I wish to display something specific for. Therefore, I need to implement the else as well because the BlocBuilder needs to return a Widget.

Currently, I return an empty Container and even tho it seems to be an "accepted" solution by many, I cannot help myself but think it is just a trick. Does anyone know if there is a more "correct" solution to deal with any other states ?

Thank you all very much in advance.

Body:
I have been using Flutter BLoC for some time and I'm quite content with it. However I am still wondering what is the best practice to adopt for the "default case" in BlocBuilder.

Imagine I have the code below which displays various based on the state of a Request (say to an API) :

BlocBuilder<RequestBloc, RequestState>(
  builder: (context, state) {
    if (state is RequestOk) {
      const Text("Name = ${state.firstname}");
      const Text("Name = ${state.lastname}");
      const Text("Name = ${state.age}");
    }
    if (state is RequestLoading)
    {
      const CircularProgressIndicator(color: Colors.orange);
    }
    else {
      return Container(); // any better way than this ?
    }
  },
);

The RequestOk and RequestLoading are the only two states I wish to display something specific for. Therefore, I need to implement the else as well because the BlocBuilder needs to return a Widget.

Currently, I return an empty Container and even tho it seems to be an "accepted" solution by many, I cannot help myself but think it is just a trick. Does anyone know if there is a more "correct" solution to deal with any other states ?

Thank you all very much in advance.


问:
Books/resources on Forward and Deferred Rendering
I need to write a paper for school on forward and deferred rendering (their differences, when to use what) and I am looking for some resources (preferably some literture) to use. I woud be thankful for some recomendations.</p>


问:
System.EnterpriseServices client-side
I have the server-side .NET Framework 4.0 project Server1.vbproj that references System.EntrepriseServices, and some classes that inherit ServicedComponent. I compile and register the dll with regsvc on servermachine1 and the COM+ application Server1 is created. I export the COM+ application as a proxy, install it on clientmachine1, and set the remote server to servermachine1. The proxy contains only the .tlb files.

I have the client-side .NET Framework 4.0 project Client1.vbproj that references Server1.vbproj which instantiates classes of Server1 with the New keyword (not with CreateObject). When running Client1.exe on clientmachine1, an exception is thrown, stating that Server1.dll is not found. If I register Server1.dll in the GAC of clientmachine1 it works.

The penetration assessment indicated, that it is not correct to have server-side dlls on the client.

I could nowhere find how to use System.EnterpriseServices client-side, is there somewhere some documentation?

Is it possible to get the client to work only with the proxy, without the server-side dlls?

Clients are Windows 10, servers are Windows Server 2012.

Title: System.EnterpriseServices client-side


问:
Remove the ?vietnam% extra string on URL
I have several links that duplicate the homepage. For example:
https://www.gameressential.com/?vietnam/2022-09-18102366_html

Also,

https://www.gameressential.com/?vn/2022-09-18122558_html

I wanted to permanently remove the /?vn/2022-09-18122558_html and /?vietnam/2022-09-18102366_html so that it will not show as an issue in Google search console. I already checked the htaccess and no codes added there. I tried to redirect but it is just a temporary solution. I need the permanent solution.


问:
hierarchical Mouse Events in vtk?
This is probably a simple question but I have not been able to figure it out.

I want to be able to implement implement a hierarchical processing of mouse events. For instance, I would like to be able to press on the middle mouse button and then and only then rotate the camera around its position.

Can anyone indicate how to achieve this or point towards some example?

Title: hierarchical Mouse Events in vtk?


Title: WebMock stopping selenium from deleting session

Body:
System

Ruby v2.6

WebMock gem v3.18.1

Selenium Webdriver gem v4.1.0

RSpec gem v3.11.0

Capybara gem v3.36.0

Summary

Whilst successfully running a suite of tests on GitLab CI[1], WebMock intercepts a request from Capybara's Selenium driver to delete a session[2].

743 examples, 0 failures, 30 pending

/builds/abelsoninfo/aws/pips/pips-console/vendor/ruby/ruby/2.6.0/gems/webmock-3.18.1/lib/webmock/http_lib_adapters/net_http.rb:104:in
`request': Real HTTP connections are disabled. Unregistered request:
DELETE
http://selenium__standalone-chrome:4444/wd/hub/session/0146cfc5158d585f445cfcdbda289733

Although the error appears after the tests have run I wonder if it occurs whilst the specs are running? This is due to seeing newlines appearing in the RSpec output:

......................................................................................................................................................................................................................................................................
...............................................................................................................................................................................................................................
.....................................................................................................................................................................................**...**............................................******

In spec/support/capybara.rb I have allowed connections to any URL with selenium, or session in it:

selenium_session_requests = %r{/((__.+__)|(hub/session.*))$}
allowed_connections = [
  '0.0.0.0', '127.0.0.1', 'https://chromedriver.storage.googleapis.com',
  'localhost', /selenium/, selenium_session_requests
].freeze

RSpec.configure do |config|
  config.before(:suite) do
    WebMock.enable!
  end

  config.after(:suite) do
    WebMock.disable!
  end

  Capybara.app_host = "http://#{Capybara.server_host}:#{Capybara.server_port}"

  Capybara.javascript_driver = ENV.fetch('CAPYBARA_JAVASCRIPT_DRIVER', :chrome_headless).to_sym

  WebMock.disable_net_connect!(allow: allowed_connections, net_http_connect_on_start: allowed_connections)
end

I have previously confirmed in the before(:suite) block that a session URL, such as http://selenium__standalone-chrome:4444/wd/hub/session/0146cfc5158d585f445cfcdbda289733 would be allowed by WebMock.

Per the suggestion in [2] I stubbed the request - though I don't believe this is desired behaviour - but that still caused the same error.

Observed behaviour

WebMock does not allow the Selenium driver to exit the browser.

Desired behaviour

The browser is closed, and no errors are raised.

[1] In .gitlab-ci.yml I have a docker service to enable the use of Selenium:

image: ruby:2.6
  services:
    - postgres:10.1
    - selenium/standalone-chrome:latest
    - redis:latest

The URL for that service is exposed to my specs via an environment variable:

- export SELENIUM_REMOTE_URL="http://selenium__standalone-chrome:4444/wd/hub"

[2] Here is the full output from the WebMock error:

/builds/abelsoninfo/aws/pips/pips-console/vendor/ruby/ruby/2.6.0/gems/webmock-3.18.1/lib/webmock/http_lib_adapters/net_http.rb:104:in
request': Real HTTP connections are disabled. Unregistered request: DELETE http://selenium__standalone-chrome:4444/wd/hub/session/0146cfc5158d585f445cfcdbda289733 with headers {'Accept'=>'application/json', 'Accept-Encoding'=>'gzip;q=1.0,deflate;q=0.6,identity;q=0.3', 'Content-Type'=>'application/json; charset=UTF-8', 'User-Agent'=>'selenium/4.1.0 (ruby linux)'} (WebMock::NetConnectNotAllowedError) You can stub this request with the following snippet: stub_request(:delete, "http://selenium__standalone-chrome:4444/wd/hub/session/0146cfc5158d585f445cfcdbda289733"). with( headers: {      'Accept'=>'application/json',       'Accept-Encoding'=>'gzip;q=1.0,deflate;q=0.6,identity;q=0.3',       'Content-Type'=>'application/json; charset=UTF-8',      'User-Agent'=>'selenium/4.1.0 (ruby linux)' }).   to_return(status: 200, body: "", headers: {}) ============================================================  from /builds/abelsoninfo/aws/pips/pips-console/vendor/ruby/ruby/2.6.0/gems/selenium-webdriver-4.1.0/lib/selenium/webdriver/remote/http/default.rb:124:in response_for'    from
/builds/abelsoninfo/aws/pips/pips-console/vendor/ruby/ruby/2.6.0/gems/selenium-webdriver-4.1.0/lib/selenium/webdriver/remote/http/default.rb:77:in
request'     from /builds/abelsoninfo/aws/pips/pips-console/vendor/ruby/ruby/2.6.0/gems/selenium-webdriver-4.1.0/lib/selenium/webdriver/remote/http/common.rb:59:in call'    from
/builds/abelsoninfo/aws/pips/pips-console/vendor/ruby/ruby/2.6.0/gems/selenium-webdriver-4.1.0/lib/selenium/webdriver/remote/bridge.rb:588:in
execute'     from /builds/abelsoninfo/aws/pips/pips-console/vendor/ruby/ruby/2.6.0/gems/selenium-webdriver-4.1.0/lib/selenium/webdriver/remote/bridge.rb:188:in quit'    from
/builds/abelsoninfo/aws/pips/pips-console/vendor/ruby/ruby/2.6.0/gems/selenium-webdriver-4.1.0/lib/selenium/webdriver/common/driver.rb:181:in
quit'    from /builds/abelsoninfo/aws/pips/pips-console/vendor/ruby/ruby/2.6.0/gems/capybara-3.36.0/lib/capybara/selenium/driver.rb:293:in quit'    from
/builds/abelsoninfo/aws/pips/pips-console/vendor/ruby/ruby/2.6.0/gems/capybara-3.36.0/lib/capybara/selenium/driver.rb:512:in
`block in setup_exit_handler'


问:
How to convert hierarchy nested array to separate select inputs?
I have the following nested array, where each level represents an hierarchy that should be a value of select with regards to its hierarchy. (Each nesting level has a value that represents its parent id)

Example data:

```<code>$data = [
  "group1" => [
        "group_id" => 0,
        "subgroup1" => [
            "subgroup_id" => 0,
            "unit1" => [
                "unit_id" => 0,
                "subunit1" => [
                    "subunit_id" => 0
                ],
            ],
            "unit2" => [
                "unit_id" => 1
            "subunit2" => [
                "subunit_id" => 1
            ],
        ],
    ],

    "subgroup2" => [
        "subgroup_id" => 1,
        "unit3" =>  [
            "unit_id" => 2,
            "subunit3" =>  [
                "subunit_id" => 2
            ],
        ],
        "unit4" => [
            "unit_id" => 3,
            "subunit4" => [
                "subunit_id" => 3
        ],
      ],
    ],
  ]
</code>```

And I want to create separate select for each nesting level:

```<code><select>
    <option>group1</option>
    <option>group2</option>
</select>

<select>
    <option class="group_id_0">subgroup1</option> //group_id refers to the parent group id
    <option class="group_id_1">subgroup2</option>
</select>
</code>```

I've tried doing it in a nested for each loop but I couldn't do it because the selects are separate

Body:
I have the following nested array, where each level represents an hierarchy that should be a value of select with regards to its hierarchy. (Each nesting level has a value that represents its parent id)

Example data:

$data = [
  "group1" => [
        "group_id" => 0,
        "subgroup1" => [
            "subgroup_id" => 0,
            "unit1" => [
                "unit_id" => 0,
                "subunit1" => [
                    "subunit_id" => 0
                ],
            ],
            "unit2" => [
                "unit_id" => 1
            "subunit2" => [
                "subunit_id" => 1
            ],
        ],
    ],

    "subgroup2" => [
        "subgroup_id" => 1,
        "unit3" =>  [
            "unit_id" => 2,
            "subunit3" =>  [
                "subunit_id" => 2
            ],
        ],
        "unit4" => [
            "unit_id" => 3,
            "subunit4" => [
                "subunit_id" => 3
        ],
      ],
    ],
  ]

And I want to create separate select for each nesting level:

<select>
    <option>group1</option>
    <option>group2</option>
</select>

<select>
    <option class="group_id_0">subgroup1</option> //group_id refers to the parent group id
    <option class="group_id_1">subgroup2</option>
</select>

I've tried doing it in a nested for each loop but I couldn't do it because the selects are separate


问:
Raspberry Pi Pico W , Timer
I am developing a project using pico w.

My objective is to add a timer to it. How can I do it ?

I want to create a timer like this:

When it is 04:00 in the U.T.C. time zone, the kitchen lamp will be turned on."

I want to add something like this. What can I do?

```<code>import urequests as requests from dfplayer import Player import time

music = Player(pin_TX=Pin(8), pin_RX=Pin(9))

# This is an example Anvil Uplink script for the Pico W.
# See https://anvil.works/pico for more information dfplayer_RX = Pin(4, Pin.OUT) dfplayer_TX = Pin(5, Pin.OUT)

UPLINK_KEY = "xxxxxxxxxxx"
# We use the LED to indicate server calls and responses. in1 = Pin(14, Pin.OUT) in2 = Pin(15, Pin.OUT) led3 = Pin(16, Pin.OUT) led4 = Pin(17,
Pin.OUT)

in1.value(1) in2.value(1) led3.value(0) led4.value(0)

@anvil.pico.callable(is_async=True) async def mutfak(n):
    for i in range(3):
        in1.toggle()
        sleep(1)
        await a.sleep_ms(5)
        return n * 2
     @anvil.pico.callable(is_async=True) async def kombi(x):
    for i in range(5):
        in2.toggle()

        sleep(1)
        await a.sleep_ms(5)
        return x * 2
     @anvil.pico.callable(is_async=True) async def diskapikontrol(y):
    for i in range (5):
        led3.toggle()

        sleep(1)
        await a.sleep_ms(5)
        return y * 2
     @anvil.pico.callable(is_async=True) async def salonperde(z):
    for i in range (5):
        led4.toggle()

        sleep(1)
        await a.sleep_ms(5)
        return z * 2

@anvil.pico.callable(is_async=True) async def mutfaklambasiniac():
    print("MUTFAK LAMBASI AÇILDI")
    music.play(4)
    sleep(2)

     @anvil.pico.callable(is_async=True) async def mutfaklambasinikapat():
    print("MUTFAK LAMBASI KAPATILDI")
    music.play(3)
    sleep(2)

@anvil.pico.callable(is_async=True) async def kombiac():
    print("KOMBİ AÇILDI")
    music.play(6)
    sleep(2)

@anvil.pico.callable(is_async=True) async def kombikapat():
    print("KOMBİ KAPATILDI")
    music.play(5)
    sleep(2)

@anvil.pico.callable(is_async=True) async def diskapiac():
    print("DIŞ KAPI AÇILDI")
    music.play(8)
    sleep(2)

@anvil.pico.callable(is_async=True) async def diskapikapat():
    print("DIŞ KAPI KAPATILDI")
    music.play(7)
    sleep(2)

@anvil.pico.callable(is_async=True) async def salonperdeac():
    print("SALON PERDESİ AÇILDI")
    music.play(2)
    sleep(1)

@anvil.pico.callable(is_async=True) async def salonperdekapat():
    print("SALON PERDESİ KAPATILDI")
    music.play(1)
    sleep(2)

anvil.pico.connect(UPLINK_KEY)

</code>```

I tried to add the code block below but got an error. CODE BLOCK

```<code>print(date_time)

def set_alarm():  global set_hour     global set_minute   global
set_second    global hour     global minute   global second

  while text_box_1_pressed_enter.text():      set_hour += value
      set_minute +=value      set_second += value         utime.sleep(0.1)
      set_hour = set_hour%24
              set_minute = set_minute%60      set_second = set_second%60      hour = str(set_hour)        minute = str(set_minute)        second =
str(set_second)

  while text_box_2_pressed_enter.text():      set_hour += value
      set_minute += value         set_second += value         utime.sleep(0.1)
      set_hour = set_hour%24      set_minute = set_minute%60      set_second =
set_second%60         hour = str(set_hour)        minute = str(set_minute)
      second = str(set_second)

  while text_box_3_pressed_enter.text():      set_hour += value
      set_minute += value         set_second += value         utime.sleep(0.1)
      set_hour = set_hour%24      set_minute = set_minute%60      set_second =
set_second%60         hour = str(set_hour)        minute = str(set_minute)
      second = str(set_second)

  while text_box_4    _pressed_enter.text():      set_hour += value
      set_minute += value         set_second += value         utime.sleep(0.1)
      set_hour = set_hour%24      set_minute = set_minute%60      set_second =
set_second%60         hour = str(set_hour)        minute = str(set_minute)
      second = str(set_second)

while True:     (Y,M,D,day,hr,m,s)=ds.date_time()
    if s < 10:
        s = "0" + str(s)
    if m < 10:
        m = "0" + str(m)
    if hr < 10:
        hr = "0" + str(hr)
    if D < 10:
        D = "0" + str(D)
    if M < 10:
        M = "0" + str(M)

    check_alarm(set_hour, set_minute, set_second)

</code>```

Title: Raspberry Pi Pico W , Timer

Body:
I am developing a project using pico w.

My objective is to add a timer to it. How can I do it ?

I want to create a timer like this:

When it is 04:00 in the U.T.C. time zone, the kitchen lamp will be turned on."

I want to add something like this. What can I do?

import urequests as requests from dfplayer import Player import time

music = Player(pin_TX=Pin(8), pin_RX=Pin(9))

# This is an example Anvil Uplink script for the Pico W.
# See https://anvil.works/pico for more information dfplayer_RX = Pin(4, Pin.OUT) dfplayer_TX = Pin(5, Pin.OUT)

UPLINK_KEY = "xxxxxxxxxxx"
# We use the LED to indicate server calls and responses. in1 = Pin(14, Pin.OUT) in2 = Pin(15, Pin.OUT) led3 = Pin(16, Pin.OUT) led4 = Pin(17,
Pin.OUT)

in1.value(1) in2.value(1) led3.value(0) led4.value(0)

@anvil.pico.callable(is_async=True) async def mutfak(n):
    for i in range(3):
        in1.toggle()
        sleep(1)
        await a.sleep_ms(5)
        return n * 2
     @anvil.pico.callable(is_async=True) async def kombi(x):
    for i in range(5):
        in2.toggle()

        sleep(1)
        await a.sleep_ms(5)
        return x * 2
     @anvil.pico.callable(is_async=True) async def diskapikontrol(y):
    for i in range (5):
        led3.toggle()

        sleep(1)
        await a.sleep_ms(5)
        return y * 2
     @anvil.pico.callable(is_async=True) async def salonperde(z):
    for i in range (5):
        led4.toggle()

        sleep(1)
        await a.sleep_ms(5)
        return z * 2

@anvil.pico.callable(is_async=True) async def mutfaklambasiniac():
    print("MUTFAK LAMBASI AÇILDI")
    music.play(4)
    sleep(2)

     @anvil.pico.callable(is_async=True) async def mutfaklambasinikapat():
    print("MUTFAK LAMBASI KAPATILDI")
    music.play(3)
    sleep(2)

@anvil.pico.callable(is_async=True) async def kombiac():
    print("KOMBİ AÇILDI")
    music.play(6)
    sleep(2)

@anvil.pico.callable(is_async=True) async def kombikapat():
    print("KOMBİ KAPATILDI")
    music.play(5)
    sleep(2)

@anvil.pico.callable(is_async=True) async def diskapiac():
    print("DIŞ KAPI AÇILDI")
    music.play(8)
    sleep(2)

@anvil.pico.callable(is_async=True) async def diskapikapat():
    print("DIŞ KAPI KAPATILDI")
    music.play(7)
    sleep(2)

@anvil.pico.callable(is_async=True) async def salonperdeac():
    print("SALON PERDESİ AÇILDI")
    music.play(2)
    sleep(1)

@anvil.pico.callable(is_async=True) async def salonperdekapat():
    print("SALON PERDESİ KAPATILDI")
    music.play(1)
    sleep(2)

anvil.pico.connect(UPLINK_KEY)

I tried to add the code block below but got an error. CODE BLOCK

print(date_time)

def set_alarm():  global set_hour     global set_minute   global
set_second    global hour     global minute   global second

  while text_box_1_pressed_enter.text():      set_hour += value
      set_minute +=value      set_second += value         utime.sleep(0.1)
      set_hour = set_hour%24
              set_minute = set_minute%60      set_second = set_second%60      hour = str(set_hour)        minute = str(set_minute)        second =
str(set_second)

  while text_box_2_pressed_enter.text():      set_hour += value
      set_minute += value         set_second += value         utime.sleep(0.1)
      set_hour = set_hour%24      set_minute = set_minute%60      set_second =
set_second%60         hour = str(set_hour)        minute = str(set_minute)
      second = str(set_second)

  while text_box_3_pressed_enter.text():      set_hour += value
      set_minute += value         set_second += value         utime.sleep(0.1)
      set_hour = set_hour%24      set_minute = set_minute%60      set_second =
set_second%60         hour = str(set_hour)        minute = str(set_minute)
      second = str(set_second)

  while text_box_4    _pressed_enter.text():      set_hour += value
      set_minute += value         set_second += value         utime.sleep(0.1)
      set_hour = set_hour%24      set_minute = set_minute%60      set_second =
set_second%60         hour = str(set_hour)        minute = str(set_minute)
      second = str(set_second)

while True:     (Y,M,D,day,hr,m,s)=ds.date_time()
    if s < 10:
        s = "0" + str(s)
    if m < 10:
        m = "0" + str(m)
    if hr < 10:
        hr = "0" + str(hr)
    if D < 10:
        D = "0" + str(D)
    if M < 10:
        M = "0" + str(M)

    check_alarm(set_hour, set_minute, set_second)


问:
Attaching video stream from ESP32-cam web server to ESP32 web server
I'm trying to build a wireless robot using an ESP32 and ESP32 cam. My idea is to use the ESP32 to control wheels and other sensors, while ESP32-cam is attached on the robot and sends live video to the user via a website. At the moment, I have made two separate websites for the two boards and they work as expected. However, I want to somehow "integrate" these two websites into a single one so that I don't have to open 2 windows for each boards to monitor the robot.

I'm using this library: https://github.com/me-no-dev/ESPAsyncWebServer for the ESP32 website and following this tutorial: https://randomnerdtutorials.com/esp32-cam-video-streaming-web-server-camera-home-assistant/ for the ESP32-cam web server.

One solution I'm thinking of is to paste the link of the stream to the ESP32 web server. This could be the fastest way, but I'm not certain whether this is possible or not. Any suggestions would be great!


问:
Model's prediction doesn't work. (Facial Expressions Kaggle) InvalidArgumentError: Computed output size would be negative: -1
To begin with I'm very very new to python and to ML,
which means i don't understand many things written, but
the idea was to take trained model from Kaggle and predict the expression on my test photo,
When is works, then try to go deeper into understanding the code.
But i suck here...

```<code>import tensorflow as tf
import cv2
import os
import matplotlib.pyplot as plt
import numpy as np
from tensorflow import keras
from keras.models import Sequential
from keras.layers import Conv2D, MaxPooling2D, Dense, Dropout, Flatten,BatchNormalization
from keras.preprocessing.image import load_img
from keras.preprocessing.image import img_to_array
from keras.preprocessing.image import ImageDataGenerator
</code>```

file_name = 'kaggle_model.h5'
model_path = os.path.join('checkpoint',file_name)

```<code>final_model = tf.keras.models.load_model(model_path)
</code>```
```<code>label_to_text = {0:'anger', 1:'disgust', 2:'fear', 3:'happiness', 4:'sadness', 5:'surprise', 6:'neutral'}
</code>```
```<code>from tensorflow.keras.preprocessing import image
img_path='test2.jpg'
test_image=image.load_img(img_path,target_size=(48,48),color_mode='grayscale')
test_image=image.img_to_array(test_image)
print(test_image.shape)
plt.imshow(test_image)
plt.show()
</code>```
```<code>test_image=np.expand_dims(test_image,0)
</code>```
```<code>predicted_class = final_model.predict(test_image).argmax()
print(f'predicted lable is{label_to_text[predicted_class]}')
</code>```

Output:

```<code>InvalidArgumentError:  Computed output size would be negative: -1 [input_size: 1, effective_filter_size: 3, stride: 1]
     [[node sequential/conv2d/Relu (defined at \AppData\Local\Temp\ipykernel_4280\3302287779.py:3) ]] [Op:__inference_predict_function_4813]

Function call stack:
predict_function
</code>```

There are couple of posts with the same problem here in stack, but i couldn't figure out the solution on that basis. Many thanks in advance!

If i try to reshape the image such as

```<code>test_image=test_image.reshape(1,48,48,1)
</code>```

then i get a different problem

```<code>ValueError: Input 0 of layer sequential is incompatible with the layer: expected axis -1 of input shape to have value 3 but received input with shape (None, 1, 48, 48, 1)
</code>```

and this
test_image=test_image.reshape(48,48,1)
gives

```<code>InvalidArgumentError:  input depth must be evenly divisible by filter depth: 1 vs 3
     [[node sequential/conv2d/Relu (defined at \AppData\Local\Temp\ipykernel_4280\1071859005.py:1) ]] [Op:__inference_predict_function_6387]
</code>```

Body:
To begin with I'm very very new to python and to ML,
which means i don't understand many things written, but
the idea was to take trained model from Kaggle and predict the expression on my test photo,
When is works, then try to go deeper into understanding the code.
But i suck here...

import tensorflow as tf
import cv2
import os
import matplotlib.pyplot as plt
import numpy as np
from tensorflow import keras
from keras.models import Sequential
from keras.layers import Conv2D, MaxPooling2D, Dense, Dropout, Flatten,BatchNormalization
from keras.preprocessing.image import load_img
from keras.preprocessing.image import img_to_array
from keras.preprocessing.image import ImageDataGenerator

file_name = 'kaggle_model.h5'
model_path = os.path.join('checkpoint',file_name)

final_model = tf.keras.models.load_model(model_path)

label_to_text = {0:'anger', 1:'disgust', 2:'fear', 3:'happiness', 4:'sadness', 5:'surprise', 6:'neutral'}

from tensorflow.keras.preprocessing import image
img_path='test2.jpg'
test_image=image.load_img(img_path,target_size=(48,48),color_mode='grayscale')
test_image=image.img_to_array(test_image)
print(test_image.shape)
plt.imshow(test_image)
plt.show()

test_image=np.expand_dims(test_image,0)

predicted_class = final_model.predict(test_image).argmax()
print(f'predicted lable is{label_to_text[predicted_class]}')

Output:

InvalidArgumentError:  Computed output size would be negative: -1 [input_size: 1, effective_filter_size: 3, stride: 1]
     [[node sequential/conv2d/Relu (defined at \AppData\Local\Temp\ipykernel_4280\3302287779.py:3) ]] [Op:__inference_predict_function_4813]

Function call stack:
predict_function

There are couple of posts with the same problem here in stack, but i couldn't figure out the solution on that basis. Many thanks in advance!

If i try to reshape the image such as

test_image=test_image.reshape(1,48,48,1)

then i get a different problem

ValueError: Input 0 of layer sequential is incompatible with the layer: expected axis -1 of input shape to have value 3 but received input with shape (None, 1, 48, 48, 1)

and this
test_image=test_image.reshape(48,48,1)
gives

InvalidArgumentError:  input depth must be evenly divisible by filter depth: 1 vs 3
     [[node sequential/conv2d/Relu (defined at \AppData\Local\Temp\ipykernel_4280\1071859005.py:1) ]] [Op:__inference_predict_function_6387]


问:
How to set charset to UTF8 for text files with gsutil when uploading to Google Cloud Storage bucket?
We have a (public) Google Cloud Storage bucket that hosts a simple website, meaning both HTML and images.

Our build process uses Google Cloud Build, however the question is not tied to using Cloud Build, but specifically regarding on how to use gsutil properly.

This is our current gsutil task:

```<code># Upload it to the bucket
- name: gcr.io/cloud-builders/gsutil
  dir: "public/"
  args: [
    "-m", # run the rsync command in parallel
    "-h", "Cache-Control: public, max-age=0", # Custom cache control header
    "cp", # copy command
    "-r", # recursively
    ".", # source folder
    "gs://mybucket/" # the target bucket and folder
  ]
</code>```

As you can see, this copies everything in the local public/ folder to the bucket and applies the Cache-Control header on all objects.

According to this:

https://cloud.google.com/storage/docs/gsutil/addlhelp/WorkingWithObjectMetadata

You can specify the content type with

```<code>-h "Content-Type:text/html; charset=utf-8"
</code>```

However, this makes all objects (not only .html files, but also images, etc) to get the content type text/html; charset=utf-8.

(I have even tried -h "Content-Type:; charset=utf-8" but then gsutil fails saying its an invalid content type value).

Is there a way to tell gsutil to apply charset=utf-8 on all objects, without actually overwriting the main content type?

Body:
We have a (public) Google Cloud Storage bucket that hosts a simple website, meaning both HTML and images.

Our build process uses Google Cloud Build, however the question is not tied to using Cloud Build, but specifically regarding on how to use gsutil properly.

This is our current gsutil task:

# Upload it to the bucket
- name: gcr.io/cloud-builders/gsutil
  dir: "public/"
  args: [
    "-m", # run the rsync command in parallel
    "-h", "Cache-Control: public, max-age=0", # Custom cache control header
    "cp", # copy command
    "-r", # recursively
    ".", # source folder
    "gs://mybucket/" # the target bucket and folder
  ]

As you can see, this copies everything in the local public/ folder to the bucket and applies the Cache-Control header on all objects.

According to this:

https://cloud.google.com/storage/docs/gsutil/addlhelp/WorkingWithObjectMetadata

You can specify the content type with

-h "Content-Type:text/html; charset=utf-8"

However, this makes all objects (not only .html files, but also images, etc) to get the content type text/html; charset=utf-8.

(I have even tried -h "Content-Type:; charset=utf-8" but then gsutil fails saying its an invalid content type value).

Is there a way to tell gsutil to apply charset=utf-8 on all objects, without actually overwriting the main content type?


问:
How to get image URL from Wordpress post trough API request in react native
My last post here helped me a lot, so now I have a list of suitcases in my app, that I got from my posts (which are my products). This is a screenshot of the current app:

Now for the picture, which is a gold suitcase that I imported with a simple URI, I also want to get the image from my individual posts so that every title has his own unique picture. For example: the EVO S black has to be a black suitcase, the EVO L needs to be a gold suitcase. This is how my wordpress post looks like, it's very simple:

This is how my json file - the part of the image - looks in postman:

```<code>"content": {
            "rendered": "\n<figure class=\"wp-block-image size-medium productfoto\" id=\"productfoto\"><img decoding=\"async\" loading=\"lazy\" width=\"200\" height=\"300\" src=\"https://evivermeeren.com/wp-content/uploads/2022/12/goud-medium-4-300-hard-4-1-200x300.webp\" alt=\"productfoto\" class=\"wp-image-2316\" title=\"productfoto\" srcset=\"https://evivermeeren.com/wp-content/uploads/2022/12/goud-medium-4-300-hard-4-1-200x300.webp 200w, https://evivermeeren.com/wp-content/uploads/2022/12/elementor/thumbs/goud-medium-4-300-hard-4-1-pyt9usybvdz52sk2fmq1xdh2o41yey1c3o3sjd2c0c.webp 500w, https://evivermeeren.com/wp-content/uploads/2022/12/goud-medium-4-300-hard-4-1.webp 600w\" sizes=\"(max-width: 200px) 100vw, 200px\" /></figure>\n",
            "protected": false
        },
</code>```

I gave my picture a class, an attribute name and so on, all of which are 'productfoto'.

This is the current code in React Native, with the fetch for the titles and here you can see that I import the picture myself with a URI instead of the fetch:

```<code>const AllSuitcasesScreen = ({ navigation }) => {

  const [suitcases, setSuitcases] = useState([]);

  const getSuitcases = async () => {
    try {
      const response = await fetch("https://evivermeeren.com/wp-json/wp/v2/posts?categories=59", {

        }
      )
      const json = await response.json();
      console.log(json);
      setSuitcases(json);
    } catch (error) {
      console.error(error);
    }

  }

  useEffect(() => {
    getSuitcases();
  }, []);

  return (
    <View style={styles.screen}>

          <View style={styles.flexbox2}>
            <Text style={styles.products}>Onze koffers</Text>
            <View style={styles.shoppingcart}>
              <Image
                  style={styles.icon}
                  source={{uri: 'https://cdn-icons-png.flaticon.com/512/1413/1413908.png'}}
                />
              <Text style={styles.number}>0</Text>
            </View>
          </View>

        <View style={styles.list}>
        <FlatList
        data={suitcases}

        renderItem={({ item }) => (
          <SuitcaseItem
          title={item.title.rendered}
          imageUri={{uri: 'https://evivermeeren.com/wp-content/uploads/2022/12/goud-medium-4-300-hard-4-1.webp'}}
          />

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

Does anybody know how I can take the image url from the api fetch and put this into my flatlist so that every post (block) has his own title with the right picture above it? Maybe it's simple, but I can't figure it out.

Thank you in advance, I'm very happy that this platform helps so much!

This is a part of my JSON, I thought it should be something like URI=item.yoast_head_json.og_image.url but that doesn't work.

```<code>{
        "id": 2484,
        "date": "2022-12-17T15:02:56",
        "date_gmt": "2022-12-17T15:02:56",
        "guid": {
            "rendered": "https://evivermeeren.com/?p=2484"
        },
        "modified": "2022-12-18T10:39:37",
        "modified_gmt": "2022-12-18T10:39:37",
        "slug": "zwart-groot-hard-249euro",
        "status": "publish",
        "type": "post",
        "link": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
        "title": {
            "rendered": "Evo L Black"
        },
        "content": {
            "rendered": "\n<p id=\"desc\">Een grote koffer in een zwarte kleur, gemaakt van hard materiaal. De prijs van deze koffer is €249.</p>\n",
            "protected": false
        },
        "excerpt": {
            "rendered": "<p>Een grote koffer in een zwarte kleur, gemaakt van hard materiaal. De prijs van deze koffer is €249.</p>\n",
            "protected": false
        },
        "author": 1,
        "featured_media": 2229,
        "comment_status": "closed",
        "ping_status": "closed",
        "sticky": false,
        "template": "",
        "format": "standard",
        "meta": [],
        "categories": [
            59
        ],
        "tags": [],
        "yoast_head": "<!-- This site is optimized with the Yoast SEO plugin v19.12 - https://yoast.com/wordpress/plugins/seo/ -->\n<title>Evo L Black - Evi Vermeêren</title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n<link rel=\"canonical\" href=\"https://evivermeeren.com/zwart-groot-hard-249euro/koffers/\" />\n<meta property=\"og:locale\" content=\"nl_NL\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"og:title\" content=\"Evo L Black - Evi Vermeêren\" />\n<meta property=\"og:description\" content=\"Een grote koffer in een zwarte kleur, gemaakt van hard materiaal. De prijs van deze koffer is €249.\" />\n<meta property=\"og:url\" content=\"https://evivermeeren.com/zwart-groot-hard-249euro/koffers/\" />\n<meta property=\"og:site_name\" content=\"Evi Vermeêren\" />\n<meta property=\"article:published_time\" content=\"2022-12-17T15:02:56+00:00\" />\n<meta property=\"article:modified_time\" content=\"2022-12-18T10:39:37+00:00\" />\n<meta property=\"og:image\" content=\"https://evivermeeren.com/wp-content/uploads/2022/12/zwart-klein-4-300-hard-4-e1670410664142.webp\" />\n\t<meta property=\"og:image:width\" content=\"200\" />\n\t<meta property=\"og:image:height\" content=\"300\" />\n\t<meta property=\"og:image:type\" content=\"image/webp\" />\n<meta name=\"author\" content=\"evivermeeren\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:label1\" content=\"Geschreven door\" />\n\t<meta name=\"twitter:data1\" content=\"evivermeeren\" />\n\t<meta name=\"twitter:label2\" content=\"Verwachte leestijd\" />\n\t<meta name=\"twitter:data2\" content=\"1 minuut\" />\n<script type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https://evivermeeren.com/zwart-groot-hard-249euro/koffers/#article\",\"isPartOf\":{\"@id\":\"https://evivermeeren.com/zwart-groot-hard-249euro/koffers/\"},\"author\":{\"name\":\"evivermeeren\",\"@id\":\"https://evivermeeren.com/#/schema/person/d74bd513920b6e8cf81e3693e10c9de0\"},\"headline\":\"Evo L Black\",\"datePublished\":\"2022-12-17T15:02:56+00:00\",\"dateModified\":\"2022-12-18T10:39:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https://evivermeeren.com/zwart-groot-hard-249euro/koffers/\"},\"wordCount\":20,\"publisher\":{\"@id\":\"https://evivermeeren.com/#/schema/person/d74bd513920b6e8cf81e3693e10c9de0\"},\"articleSection\":[\"Koffers\"],\"inLanguage\":\"nl\"},{\"@type\":\"WebPage\",\"@id\":\"https://evivermeeren.com/zwart-groot-hard-249euro/koffers/\",\"url\":\"https://evivermeeren.com/zwart-groot-hard-249euro/koffers/\",\"name\":\"Evo L Black - Evi Vermeêren\",\"isPartOf\":{\"@id\":\"https://evivermeeren.com/#website\"},\"datePublished\":\"2022-12-17T15:02:56+00:00\",\"dateModified\":\"2022-12-18T10:39:37+00:00\",\"breadcrumb\":{\"@id\":\"https://evivermeeren.com/zwart-groot-hard-249euro/koffers/#breadcrumb\"},\"inLanguage\":\"nl\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://evivermeeren.com/zwart-groot-hard-249euro/koffers/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://evivermeeren.com/zwart-groot-hard-249euro/koffers/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://evivermeeren.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Evo L Black\"}]},{\"@type\":\"WebSite\",\"@id\":\"https://evivermeeren.com/#website\",\"url\":\"https://evivermeeren.com/\",\"name\":\"Evi Vermeêren\",\"description\":\"\",\"publisher\":{\"@id\":\"https://evivermeeren.com/#/schema/person/d74bd513920b6e8cf81e3693e10c9de0\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://evivermeeren.com/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"nl\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https://evivermeeren.com/#/schema/person/d74bd513920b6e8cf81e3693e10c9de0\",\"name\":\"evivermeeren\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl\",\"@id\":\"https://evivermeeren.com/#/schema/person/image/\",\"url\":\"https://evivermeeren.com/wp-content/uploads/2022/11/logo.png\",\"contentUrl\":\"https://evivermeeren.com/wp-content/uploads/2022/11/logo.png\",\"width\":661,\"height\":824,\"caption\":\"evivermeeren\"},\"logo\":{\"@id\":\"https://evivermeeren.com/#/schema/person/image/\"},\"sameAs\":[\"https://evivermeeren.com\"],\"url\":\"https://evivermeeren.com/author/evivermeeren/\"}]}</script>\n<!-- / Yoast SEO plugin. -->",
        "yoast_head_json": {
            "title": "Evo L Black - Evi Vermeêren",
            "robots": {
                "index": "index",
                "follow": "follow",
                "max-snippet": "max-snippet:-1",
                "max-image-preview": "max-image-preview:large",
                "max-video-preview": "max-video-preview:-1"
            },
            "canonical": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
            "og_locale": "nl_NL",
            "og_type": "article",
            "og_title": "Evo L Black - Evi Vermeêren",
            "og_description": "Een grote koffer in een zwarte kleur, gemaakt van hard materiaal. De prijs van deze koffer is €249.",
            "og_url": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
            "og_site_name": "Evi Vermeêren",
            "article_published_time": "2022-12-17T15:02:56+00:00",
            "article_modified_time": "2022-12-18T10:39:37+00:00",
            "og_image": [
                {
                    "width": 200,
                    "height": 300,
                    "url": "https://evivermeeren.com/wp-content/uploads/2022/12/zwart-klein-4-300-hard-4-e1670410664142.webp",
                    "type": "image/webp"
                }
            ],
            "author": "evivermeeren",
            "twitter_card": "summary_large_image",
            "twitter_misc": {
                "Geschreven door": "evivermeeren",
                "Verwachte leestijd": "1 minuut"
            },
            "schema": {
                "@context": "https://schema.org",
                "@graph": [
                    {
                        "@type": "Article",
                        "@id": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/#article",
                        "isPartOf": {
                            "@id": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/"
                        },
                        "author": {
                            "name": "evivermeeren",
                            "@id": "https://evivermeeren.com/#/schema/person/d74bd513920b6e8cf81e3693e10c9de0"
                        },
                        "headline": "Evo L Black",
                        "datePublished": "2022-12-17T15:02:56+00:00",
                        "dateModified": "2022-12-18T10:39:37+00:00",
                        "mainEntityOfPage": {
                            "@id": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/"
                        },
                        "wordCount": 20,
                        "publisher": {
                            "@id": "https://evivermeeren.com/#/schema/person/d74bd513920b6e8cf81e3693e10c9de0"
                        },
                        "articleSection": [
                            "Koffers"
                        ],
                        "inLanguage": "nl"
                    },
                    {
                        "@type": "WebPage",
                        "@id": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
                        "url": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
                        "name": "Evo L Black - Evi Vermeêren",
                        "isPartOf": {
                            "@id": "https://evivermeeren.com/#website"
                        },
                        "datePublished": "2022-12-17T15:02:56+00:00",
                        "dateModified": "2022-12-18T10:39:37+00:00",
                        "breadcrumb": {
                            "@id": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/#breadcrumb"
                        },
                        "inLanguage": "nl",
                        "potentialAction": [
                            {
                                "@type": "ReadAction",
                                "target": [
                                    "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/"
                                ]
                            }
                        ]
                    },
                    {
                        "@type": "BreadcrumbList",
                        "@id": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/#breadcrumb",
                        "itemListElement": [
                            {
                                "@type": "ListItem",
                                "position": 1,
                                "name": "Home",
                                "item": "https://evivermeeren.com/"
                            },
                            {
                                "@type": "ListItem",
                                "position": 2,
                                "name": "Evo L Black"
                            }
                        ]
                    },
                    {
                        "@type": "WebSite",
                        "@id": "https://evivermeeren.com/#website",
                        "url": "https://evivermeeren.com/",
                        "name": "Evi Vermeêren",
                        "description": "",
                        "publisher": {
                            "@id": "https://evivermeeren.com/#/schema/person/d74bd513920b6e8cf81e3693e10c9de0"
                        },
                        "potentialAction": [
                            {
                                "@type": "SearchAction",
                                "target": {
                                    "@type": "EntryPoint",
                                    "urlTemplate": "https://evivermeeren.com/?s={search_term_string}"
                                },
                                "query-input": "required name=search_term_string"
                            }
                        ],
                        "inLanguage": "nl"
                    },
                    {
                        "@type": [
                            "Person",
                            "Organization"
                        ],
                        "@id": "https://evivermeeren.com/#/schema/person/d74bd513920b6e8cf81e3693e10c9de0",
                        "name": "evivermeeren",
                        "image": {
                            "@type": "ImageObject",
                            "inLanguage": "nl",
                            "@id": "https://evivermeeren.com/#/schema/person/image/",
                            "url": "https://evivermeeren.com/wp-content/uploads/2022/11/logo.png",
                            "contentUrl": "https://evivermeeren.com/wp-content/uploads/2022/11/logo.png",
                            "width": 661,
                            "height": 824,
                            "caption": "evivermeeren"
                        },
                        "logo": {
                            "@id": "https://evivermeeren.com/#/schema/person/image/"
                        },
                        "sameAs": [
                            "https://evivermeeren.com"
                        ],
                        "url": "https://evivermeeren.com/author/evivermeeren/"
                    }
                ]
            }
        },
        "_links": {
            "self": [
                {
                    "href": "https://evivermeeren.com/wp-json/wp/v2/posts/2484"
                }
            ],
            "collection": [
                {
                    "href": "https://evivermeeren.com/wp-json/wp/v2/posts"
                }
            ],
            "about": [
                {
                    "href": "https://evivermeeren.com/wp-json/wp/v2/types/post"
                }
            ],
            "author": [
                {
                    "embeddable": true,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/users/1"
                }
            ],
            "replies": [
                {
                    "embeddable": true,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/comments?post=2484"
                }
            ],
            "version-history": [
                {
                    "count": 10,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/posts/2484/revisions"
                }
            ],
            "predecessor-version": [
                {
                    "id": 2496,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/posts/2484/revisions/2496"
                }
            ],
            "wp:featuredmedia": [
                {
                    "embeddable": true,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/media/2229"
                }
            ],
            "wp:attachment": [
                {
                    "href": "https://evivermeeren.com/wp-json/wp/v2/media?parent=2484"
                }
            ],
            "wp:term": [
                {
                    "taxonomy": "category",
                    "embeddable": true,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/categories?post=2484"
                },
                {
                    "taxonomy": "post_tag",
                    "embeddable": true,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/tags?post=2484"
                }
            ],
            "curies": [
                {
                    "name": "wp",
                    "href": "https://api.w.org/{rel}",
                    "templated": true
                }
            ]
        }
</code>```

Body:
My last post here helped me a lot, so now I have a list of suitcases in my app, that I got from my posts (which are my products). This is a screenshot of the current app:

Now for the picture, which is a gold suitcase that I imported with a simple URI, I also want to get the image from my individual posts so that every title has his own unique picture. For example: the EVO S black has to be a black suitcase, the EVO L needs to be a gold suitcase. This is how my wordpress post looks like, it's very simple:

This is how my json file - the part of the image - looks in postman:

"content": {
            "rendered": "\n
<img decoding=\"async\" loading=\"lazy\" width=\"200\" height=\"300\" src=\"https://evivermeeren.com/wp-content/uploads/2022/12/goud-medium-4-300-hard-4-1-200x300.webp\" alt=\"productfoto\" class=\"wp-image-2316\" title=\"productfoto\" srcset=\"https://evivermeeren.com/wp-content/uploads/2022/12/goud-medium-4-300-hard-4-1-200x300.webp 200w, https://evivermeeren.com/wp-content/uploads/2022/12/elementor/thumbs/goud-medium-4-300-hard-4-1-pyt9usybvdz52sk2fmq1xdh2o41yey1c3o3sjd2c0c.webp 500w, https://evivermeeren.com/wp-content/uploads/2022/12/goud-medium-4-300-hard-4-1.webp 600w\" sizes=\"(max-width: 200px) 100vw, 200px\" />
\n",
            "protected": false
        },

I gave my picture a class, an attribute name and so on, all of which are 'productfoto'.

This is the current code in React Native, with the fetch for the titles and here you can see that I import the picture myself with a URI instead of the fetch:

const AllSuitcasesScreen = ({ navigation }) => {

  const [suitcases, setSuitcases] = useState([]);

  const getSuitcases = async () => {
    try {
      const response = await fetch("https://evivermeeren.com/wp-json/wp/v2/posts?categories=59", {

        }
      )
      const json = await response.json();
      console.log(json);
      setSuitcases(json);
    } catch (error) {
      console.error(error);
    }

  }

  useEffect(() => {
    getSuitcases();
  }, []);

  return (
    <View style={styles.screen}>

          <View style={styles.flexbox2}>
            <Text style={styles.products}>Onze koffers</Text>
            <View style={styles.shoppingcart}>
              <Image
                  style={styles.icon}
                  source={{uri: 'https://cdn-icons-png.flaticon.com/512/1413/1413908.png'}}
                />
              <Text style={styles.number}>0</Text>
            </View>
          </View>

        <View style={styles.list}>
        <FlatList
        data={suitcases}

        renderItem={({ item }) => (
          <SuitcaseItem
          title={item.title.rendered}
          imageUri={{uri: 'https://evivermeeren.com/wp-content/uploads/2022/12/goud-medium-4-300-hard-4-1.webp'}}
          />

        )}
      />
      </View>
    </View >
  );
}

Does anybody know how I can take the image url from the api fetch and put this into my flatlist so that every post (block) has his own title with the right picture above it? Maybe it's simple, but I can't figure it out.

Thank you in advance, I'm very happy that this platform helps so much!

This is a part of my JSON, I thought it should be something like URI=item.yoast_head_json.og_image.url but that doesn't work.

{
        "id": 2484,
        "date": "2022-12-17T15:02:56",
        "date_gmt": "2022-12-17T15:02:56",
        "guid": {
            "rendered": "https://evivermeeren.com/?p=2484"
        },
        "modified": "2022-12-18T10:39:37",
        "modified_gmt": "2022-12-18T10:39:37",
        "slug": "zwart-groot-hard-249euro",
        "status": "publish",
        "type": "post",
        "link": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
        "title": {
            "rendered": "Evo L Black"
        },
        "content": {
            "rendered": "\n
Een grote koffer in een zwarte kleur, gemaakt van hard materiaal. De prijs van deze koffer is €249.
\n",
            "protected": false
        },
        "excerpt": {
            "rendered": "
Een grote koffer in een zwarte kleur, gemaakt van hard materiaal. De prijs van deze koffer is €249.
\n",
            "protected": false
        },
        "author": 1,
        "featured_media": 2229,
        "comment_status": "closed",
        "ping_status": "closed",
        "sticky": false,
        "template": "",
        "format": "standard",
        "meta": [],
        "categories": [
            59
        ],
        "tags": [],
        "yoast_head": "\n<title>Evo L Black - Evi Vermeêren</title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n<link rel=\"canonical\" href=\"https://evivermeeren.com/zwart-groot-hard-249euro/koffers/\" />\n<meta property=\"og:locale\" content=\"nl_NL\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"og:title\" content=\"Evo L Black - Evi Vermeêren\" />\n<meta property=\"og:description\" content=\"Een grote koffer in een zwarte kleur, gemaakt van hard materiaal. De prijs van deze koffer is €249.\" />\n<meta property=\"og:url\" content=\"https://evivermeeren.com/zwart-groot-hard-249euro/koffers/\" />\n<meta property=\"og:site_name\" content=\"Evi Vermeêren\" />\n<meta property=\"article:published_time\" content=\"2022-12-17T15:02:56+00:00\" />\n<meta property=\"article:modified_time\" content=\"2022-12-18T10:39:37+00:00\" />\n<meta property=\"og:image\" content=\"https://evivermeeren.com/wp-content/uploads/2022/12/zwart-klein-4-300-hard-4-e1670410664142.webp\" />\n\t<meta property=\"og:image:width\" content=\"200\" />\n\t<meta property=\"og:image:height\" content=\"300\" />\n\t<meta property=\"og:image:type\" content=\"image/webp\" />\n<meta name=\"author\" content=\"evivermeeren\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:label1\" content=\"Geschreven door\" />\n\t<meta name=\"twitter:data1\" content=\"evivermeeren\" />\n\t<meta name=\"twitter:label2\" content=\"Verwachte leestijd\" />\n\t<meta name=\"twitter:data2\" content=\"1 minuut\" />\n\n",
        "yoast_head_json": {
            "title": "Evo L Black - Evi Vermeêren",
            "robots": {
                "index": "index",
                "follow": "follow",
                "max-snippet": "max-snippet:-1",
                "max-image-preview": "max-image-preview:large",
                "max-video-preview": "max-video-preview:-1"
            },
            "canonical": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
            "og_locale": "nl_NL",
            "og_type": "article",
            "og_title": "Evo L Black - Evi Vermeêren",
            "og_description": "Een grote koffer in een zwarte kleur, gemaakt van hard materiaal. De prijs van deze koffer is €249.",
            "og_url": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
            "og_site_name": "Evi Vermeêren",
            "article_published_time": "2022-12-17T15:02:56+00:00",
            "article_modified_time": "2022-12-18T10:39:37+00:00",
            "og_image": [
                {
                    "width": 200,
                    "height": 300,
                    "url": "https://evivermeeren.com/wp-content/uploads/2022/12/zwart-klein-4-300-hard-4-e1670410664142.webp",
                    "type": "image/webp"
                }
            ],
            "author": "evivermeeren",
            "twitter_card": "summary_large_image",
            "twitter_misc": {
                "Geschreven door": "evivermeeren",
                "Verwachte leestijd": "1 minuut"
            },
            "schema": {
                "@context": "https://schema.org",
                "@graph": [
                    {
                        "@type": "Article",
                        "@id": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/#article",
                        "isPartOf": {
                            "@id": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/"
                        },
                        "author": {
                            "name": "evivermeeren",
                            "@id": "https://evivermeeren.com/#/schema/person/d74bd513920b6e8cf81e3693e10c9de0"
                        },
                        "headline": "Evo L Black",
                        "datePublished": "2022-12-17T15:02:56+00:00",
                        "dateModified": "2022-12-18T10:39:37+00:00",
                        "mainEntityOfPage": {
                            "@id": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/"
                        },
                        "wordCount": 20,
                        "publisher": {
                            "@id": "https://evivermeeren.com/#/schema/person/d74bd513920b6e8cf81e3693e10c9de0"
                        },
                        "articleSection": [
                            "Koffers"
                        ],
                        "inLanguage": "nl"
                    },
                    {
                        "@type": "WebPage",
                        "@id": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
                        "url": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
                        "name": "Evo L Black - Evi Vermeêren",
                        "isPartOf": {
                            "@id": "https://evivermeeren.com/#website"
                        },
                        "datePublished": "2022-12-17T15:02:56+00:00",
                        "dateModified": "2022-12-18T10:39:37+00:00",
                        "breadcrumb": {
                            "@id": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/#breadcrumb"
                        },
                        "inLanguage": "nl",
                        "potentialAction": [
                            {
                                "@type": "ReadAction",
                                "target": [
                                    "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/"
                                ]
                            }
                        ]
                    },
                    {
                        "@type": "BreadcrumbList",
                        "@id": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/#breadcrumb",
                        "itemListElement": [
                            {
                                "@type": "ListItem",
                                "position": 1,
                                "name": "Home",
                                "item": "https://evivermeeren.com/"
                            },
                            {
                                "@type": "ListItem",
                                "position": 2,
                                "name": "Evo L Black"
                            }
                        ]
                    },
                    {
                        "@type": "WebSite",
                        "@id": "https://evivermeeren.com/#website",
                        "url": "https://evivermeeren.com/",
                        "name": "Evi Vermeêren",
                        "description": "",
                        "publisher": {
                            "@id": "https://evivermeeren.com/#/schema/person/d74bd513920b6e8cf81e3693e10c9de0"
                        },
                        "potentialAction": [
                            {
                                "@type": "SearchAction",
                                "target": {
                                    "@type": "EntryPoint",
                                    "urlTemplate": "https://evivermeeren.com/?s={search_term_string}"
                                },
                                "query-input": "required name=search_term_string"
                            }
                        ],
                        "inLanguage": "nl"
                    },
                    {
                        "@type": [
                            "Person",
                            "Organization"
                        ],
                        "@id": "https://evivermeeren.com/#/schema/person/d74bd513920b6e8cf81e3693e10c9de0",
                        "name": "evivermeeren",
                        "image": {
                            "@type": "ImageObject",
                            "inLanguage": "nl",
                            "@id": "https://evivermeeren.com/#/schema/person/image/",
                            "url": "https://evivermeeren.com/wp-content/uploads/2022/11/logo.png",
                            "contentUrl": "https://evivermeeren.com/wp-content/uploads/2022/11/logo.png",
                            "width": 661,
                            "height": 824,
                            "caption": "evivermeeren"
                        },
                        "logo": {
                            "@id": "https://evivermeeren.com/#/schema/person/image/"
                        },
                        "sameAs": [
                            "https://evivermeeren.com"
                        ],
                        "url": "https://evivermeeren.com/author/evivermeeren/"
                    }
                ]
            }
        },
        "_links": {
            "self": [
                {
                    "href": "https://evivermeeren.com/wp-json/wp/v2/posts/2484"
                }
            ],
            "collection": [
                {
                    "href": "https://evivermeeren.com/wp-json/wp/v2/posts"
                }
            ],
            "about": [
                {
                    "href": "https://evivermeeren.com/wp-json/wp/v2/types/post"
                }
            ],
            "author": [
                {
                    "embeddable": true,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/users/1"
                }
            ],
            "replies": [
                {
                    "embeddable": true,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/comments?post=2484"
                }
            ],
            "version-history": [
                {
                    "count": 10,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/posts/2484/revisions"
                }
            ],
            "predecessor-version": [
                {
                    "id": 2496,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/posts/2484/revisions/2496"
                }
            ],
            "wp:featuredmedia": [
                {
                    "embeddable": true,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/media/2229"
                }
            ],
            "wp:attachment": [
                {
                    "href": "https://evivermeeren.com/wp-json/wp/v2/media?parent=2484"
                }
            ],
            "wp:term": [
                {
                    "taxonomy": "category",
                    "embeddable": true,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/categories?post=2484"
                },
                {
                    "taxonomy": "post_tag",
                    "embeddable": true,
                    "href": "https://evivermeeren.com/wp-json/wp/v2/tags?post=2484"
                }
            ],
            "curies": [
                {
                    "name": "wp",
                    "href": "https://api.w.org/{rel}",
                    "templated": true
                }
            ]
        }


Title: plotting data availability and data gap on same plot using pandas

Body:
I have  3 station names  having the name  ASD, AFD and CDF respectively(column-1). And each station has started  recording the data from a day to another day(column 2 and 3)
.however in some days data recording has stopped because of power issue of the sensor, so there is gaps in the data (column 4 and 5)

I want to plot the data recording of each station from  2014-01-01 to 2019-01-01 and data gaps which is given below for each station input.csv

station    data_recording_start                       data_recording_end                        data_recording_stopped_from        data_recording_stopped_to
ASD        2014-01-01T00:12:00                    2019-01-01T00:12:00                           nan                                                   nan
ASD        2014-01-01T00:12:00                    2019-01-01T00:12:00                           2015-01-25T00:12:00                          2015-01-28T00:12:00
ASD        2014-01-01T00:12:00                    2019-01-01T00:12:00                           2015-01-25T00:12:00                          2015-01-28T00:12:00
AFD        2015-01-01T13:12:00                    2019-01-01T00:12:00                           2015-01-25T00:12:00                          2015-01-28T00:12:00
AFD        2015-01-01T13:12:00                    2019-01-01T00:12:00                           2015-01-25T00:12:00                          2015-01-28T00:12:00
AFD        2015-01-01T13:12:00                    2019-01-01T00:12:00                           2015-01-25T00:12:00                          2015-01-28T00:12:00
CDF        2018-01-01T00:12:00                    2019-01-01T00:12:00                           2015-01-25T00:12:00                          2015-01-28T00:12:00
CDF        2018-01-01T00:12:00                    2019-01-01T00:12:00                           2015-01-25T00:12:00                          2015-01-28T00:12:00
CDF        2018-01-01T00:12:00                    2019-01-01T00:12:00                           2015-01-25T00:12:00                          2015-01-28T00:12:00

I want to plot a chart where the x -axis should contain the month and year and y -axis should contain the stations name. My plot should looks like this

I tried this script but it doesnot help me doing this work

import matplotlib.pylab as plt
import datetime
from matplotlib import dates as mdates
import pandas as pd
import numpy as np

df = pd.read_csv('input.csv', header = 0,delimiter=r"\s+")
df.set_index('station').plot();

n = 3 # number of stations

df['Date'] = pd.to_datetime(df['station'])

After that i am unable to proceed as i am new to python, i hope experts may help me on this kind of plot.Thanks in advance.


问:
ImportError: cannot import name 'LayoutLMv3Processor' from 'transformers' in sagemaker estimator
I am getting following error in huggingface sagemaker.

```<code>ImportError: cannot import name 'LayoutLMv3Processor' from 'transformers' (/opt/conda/lib/python3.8/site-packages/transformers/__init__.py)
</code>```

Here is the entrypoint

```<code>huggingface_estimator = HuggingFace(entry_point='train.py',
                            source_dir='./',
                            instance_type='ml.g5.xlarge',
                            instance_count=1,
                            role=role,
                            transformers_version='4.12',
                            pytorch_version='1.9',
                            py_version='py38',
                            hyperparameters = hyperparameters,
                            sagemaker_session=sess,

                                   )
</code>```

Without the huggingface estimator, if I import this line in sagemaker, I did not get this error. The sagemaker version, I am using is '2.118.0'

Body:
I am getting following error in huggingface sagemaker.

ImportError: cannot import name 'LayoutLMv3Processor' from 'transformers' (/opt/conda/lib/python3.8/site-packages/transformers/__init__.py)

Here is the entrypoint

huggingface_estimator = HuggingFace(entry_point='train.py',
                            source_dir='./',
                            instance_type='ml.g5.xlarge',
                            instance_count=1,
                            role=role,
                            transformers_version='4.12',
                            pytorch_version='1.9',
                            py_version='py38',
                            hyperparameters = hyperparameters,
                            sagemaker_session=sess,

                                   )

Without the huggingface estimator, if I import this line in sagemaker, I did not get this error. The sagemaker version, I am using is '2.118.0'


问:
Flutter IOS mobile app - clicking on UI elements covering WebView triggers videos in webview's iframes
I have an issue with a Flutter IOS app

I have a webview with a youtube video embedded in an iframe

I have a widget containing the webview positioned under a flutter regular widget (such as a bottom or top bar, or a dialog)

Issue is that tapping on the flutter element above the webview actually starts the youtube video, even though the tap was NOT done directly on the webview.

This only happens on IOS. Android works fine.

Does anyone know how to prevent this from happening? I would like to have a dialog shown over the webview, but not start the video when a dialog option is tapped.

I suspect iframe is the issue here

Here is the code for webview part (I use InAppWebView here, but behavior is the same with WebView flutter), and photos for both android and ios apps

```<code>        body: ListView(
          children: [
            const SizedBox(
              height: 700,
            ),
            SizedBox(
              height: 400,
              child: InAppWebView(
                initialOptions: InAppWebViewGroupOptions(
                  crossPlatform: InAppWebViewOptions(),
                ),
                onWebViewCreated: (InAppWebViewController controller) {
                  controller.loadData(
                    data:
                        '<iframe id="inlineFrameExample" title="Inline Frame Example" width="500" height="200" src="https://www.youtube-nocookie.com/embed/-dLDifsmJo4?wmode=opaque"></iframe>',
                  );
                },
              ),
            ),
          ],
        ),
</code>```

Body:
I have an issue with a Flutter IOS app

I have a webview with a youtube video embedded in an iframe

I have a widget containing the webview positioned under a flutter regular widget (such as a bottom or top bar, or a dialog)

Issue is that tapping on the flutter element above the webview actually starts the youtube video, even though the tap was NOT done directly on the webview.

This only happens on IOS. Android works fine.

Does anyone know how to prevent this from happening? I would like to have a dialog shown over the webview, but not start the video when a dialog option is tapped.

I suspect iframe is the issue here

Here is the code for webview part (I use InAppWebView here, but behavior is the same with WebView flutter), and photos for both android and ios apps

        body: ListView(
          children: [
            const SizedBox(
              height: 700,
            ),
            SizedBox(
              height: 400,
              child: InAppWebView(
                initialOptions: InAppWebViewGroupOptions(
                  crossPlatform: InAppWebViewOptions(),
                ),
                onWebViewCreated: (InAppWebViewController controller) {
                  controller.loadData(
                    data:
                        '',
                  );
                },
              ),
            ),
          ],
        ),


问:
how to solve - Getting OLE2 exception while opening .xls excel file using selenium+java

Hello All

```<code>Hey,it's omkaar as a software tester(Automation Selenium+Java).
</code>```

There is a scinario of reading excel file using Automation (selenium+java)which having .xls (Microsoft Excel 97-2003 Worksheet) file extension.
Now i am not able to read excel file due to the error/popup massege(Please have look attched screenshot) which is obsereved while opening that file manually.

Steps which i have followed to read excel file.

Created object of file class and give the refference of that perticular file.

Created workbook instance.

Created sheet, row and cell instance.

Used "for each loop" to iterate through each cell to get the data.
(You can also go through attached code.)

here is my code.
public class WorkWithXLSFile extends BaseTest {

```<code>public static void main(String[] args) {

    try {
        File file = new File("C:\\Users\\Omkar Shrotri\\Downloads\\Ticketdetails.xls");

        if (file.exists()) {

            FileInputStream fis = new FileInputStream(file);

            HSSFWorkbook wb = new HSSFWorkbook(fis);

            HSSFSheet sheet1 = wb.getSheetAt(0);

            DataFormatter formatter11 = new DataFormatter();

            for (int i = 0; i <= 7; i++) {
                String excel_data = formatter11.formatCellValue(sheet1.getRow(2).getCell(i));
                // int s = i+1;
                String web_data = driver.findElement(By.xpath("//table/tbody/tr[1]/td['" + i + "']")).getText();
                if (excel_data.equals(web_data)) {
                    System.out.println("Passed");
                }
            }

        }
    } catch (Exception NotOLE2FileException) {
        System.out.print(NotOLE2FileException);
        // handle popup
        // try code
    }

}
</code>```

}

Body:
Hello All

Hey,it's omkaar as a software tester(Automation Selenium+Java).

There is a scinario of reading excel file using Automation (selenium+java)which having .xls (Microsoft Excel 97-2003 Worksheet) file extension.
Now i am not able to read excel file due to the error/popup massege(Please have look attched screenshot) which is obsereved while opening that file manually.

Steps which i have followed to read excel file.

Created object of file class and give the refference of that perticular file.

Created workbook instance.

Created sheet, row and cell instance.

Used "for each loop" to iterate through each cell to get the data.
(You can also go through attached code.)

here is my code.
public class WorkWithXLSFile extends BaseTest {

public static void main(String[] args) {

    try {
        File file = new File("C:\\Users\\Omkar Shrotri\\Downloads\\Ticketdetails.xls");

        if (file.exists()) {

            FileInputStream fis = new FileInputStream(file);

            HSSFWorkbook wb = new HSSFWorkbook(fis);

            HSSFSheet sheet1 = wb.getSheetAt(0);

            DataFormatter formatter11 = new DataFormatter();

            for (int i = 0; i <= 7; i++) {
                String excel_data = formatter11.formatCellValue(sheet1.getRow(2).getCell(i));
                // int s = i+1;
                String web_data = driver.findElement(By.xpath("//table/tbody/tr[1]/td['" + i + "']")).getText();
                if (excel_data.equals(web_data)) {
                    System.out.println("Passed");
                }
            }

        }
    } catch (Exception NotOLE2FileException) {
        System.out.print(NotOLE2FileException);
        // handle popup
        // try code
    }

}

}


问:
Google Ads API - How can I know that user remove the third party apps access
I am using this package https://github.com/googleads/google-ads-php to get the refresh and access token after provide the permission by user. I saved that access and refresh token to the databser.

Now user might be remove the access of third party apps like from this link: https://myaccount.google.com/permissions?continue=https%3A%2F%2Fmyaccount.google.com%2Fsecurity%3Fhl%3Den_GB&hl=en_GB

Now, How can I know usign that refresh or access token that user is remove the access or not?


问:
export alias object is {} in elasticdump cmd for alias?
I use elasticsearch with elasticsearch-head.
I use npm elasticdump package for backup/import indices.

I want to backup for analyzer, mapping, data, alias of indices.

backup for analyzer, mapping, data is OK. But,
alias backup cmd's result is "{}".
Using bash cmd is

```<code> elasticdump \
 --input=http://localhost:9200/index_name/alias-filter \
 --output=alias.json \
 --type=alias
</code>```

In alias.json, this result is: "{}". I don't know why?

Otherway, I run

```<code>curl -X GET "localhost:9200/index_name/_alias?pretty"
</code>```

The result is seem OK because of I add alias : productgp1, productgp2

```<code>{
 "index_name" : {
   "aliases" : {
     "productgp1" : { },
     "productgp2" : { }
    }
   }
}
</code>```

Body:
I use elasticsearch with elasticsearch-head.
I use npm elasticdump package for backup/import indices.

I want to backup for analyzer, mapping, data, alias of indices.

backup for analyzer, mapping, data is OK. But,
alias backup cmd's result is "{}".
Using bash cmd is

 elasticdump \
 --input=http://localhost:9200/index_name/alias-filter \
 --output=alias.json \
 --type=alias

In alias.json, this result is: "{}". I don't know why?

Otherway, I run

curl -X GET "localhost:9200/index_name/_alias?pretty"

The result is seem OK because of I add alias : productgp1, productgp2

{
 "index_name" : {
   "aliases" : {
     "productgp1" : { },
     "productgp2" : { }
    }
   }
}


问:
Can i uninstall python after install anaconda? In Ubuntu 20.04
I have a inbox python version with python3.8.10

and i install miniconda with python 3.9.12

if i link /usr/bin/python and /usr/bin/python to /etc/miniconda3/bin/python, and do the same things to pip, can i uninstall inbox python?

all things will be fine


问:
Unity WebGL build to fullscreen on mobile devices
Does anyone know if there is a way to have a working fullscreen button on a browser on mobile devices in WebGL Unity build? I've seen some topics here that it is not supported on mobile devices, but only on tablets. But anyway it is kinda a dealbreaker for us and we need to make this work. Thanks for any response!</p>


问:
Itext7 manipulate Dictionary for Fonts
I'd like to ask a question about the relationship between PdfDictionary Fonts and the Stream.

I have this piece of code to add a font into a page's dictionary:

```<code>private void addFonts(PdfDocument pdfa, String fontPath) throws IOException {
    PdfDictionary font;
    FontProgram fontProgram = FontProgramFactory.createFont(fontPath);
    FontProgramFactory.registerFont(fontPath);
    PdfFont fontNew = PdfFontFactory.createFont(fontProgram, PdfEncodings.IDENTITY_H, EmbeddingStrategy.PREFER_EMBEDDED);
    fontNew.setSubset(true);
    for (int i = 0; i <= pdfa.getNumberOfPdfObjects(); i++) {
        PdfObject obj = pdfa.getPdfObject(i);
        if (obj != null && !obj.isDictionary()) {
            continue;
        }
        font = (PdfDictionary) obj;
        if (font != null) {
            font.put(PdfName.Font, fontNew.getPdfObject());
              System.out.println(font);
        }

    }
    pdfa.addFont(fontNew);

}
</code>```

This is the result:

I ask:
1- Why is the font also added outside the resources? (blue)

2- How can I change the name /F47 (I know that itext generates it automatically) in /F1 (since in the stream there are references to /F1 /F2 /F3) (green)

3- In general how can I generate fonts
"/F1"
"/F2"
"/F3"
and change the references in the stream

Title: Itext7 manipulate Dictionary for Fonts

Body:
I'd like to ask a question about the relationship between PdfDictionary Fonts and the Stream.

I have this piece of code to add a font into a page's dictionary:

private void addFonts(PdfDocument pdfa, String fontPath) throws IOException {
    PdfDictionary font;
    FontProgram fontProgram = FontProgramFactory.createFont(fontPath);
    FontProgramFactory.registerFont(fontPath);
    PdfFont fontNew = PdfFontFactory.createFont(fontProgram, PdfEncodings.IDENTITY_H, EmbeddingStrategy.PREFER_EMBEDDED);
    fontNew.setSubset(true);
    for (int i = 0; i <= pdfa.getNumberOfPdfObjects(); i++) {
        PdfObject obj = pdfa.getPdfObject(i);
        if (obj != null && !obj.isDictionary()) {
            continue;
        }
        font = (PdfDictionary) obj;
        if (font != null) {
            font.put(PdfName.Font, fontNew.getPdfObject());
              System.out.println(font);
        }

    }
    pdfa.addFont(fontNew);

}

This is the result:

I ask:
1- Why is the font also added outside the resources? (blue)

2- How can I change the name /F47 (I know that itext generates it automatically) in /F1 (since in the stream there are references to /F1 /F2 /F3) (green)

3- In general how can I generate fonts
"/F1"
"/F2"
"/F3"
and change the references in the stream