Installing pandas in docker Alpine

I am having a really hard time trying to install a stable data science package configuration in docker. This should be easier with such mainstream, relevant tools.

The following is the Dockerfile that used to work, with a bit of a hack, removing pandas from the package core and installing it separately, specifying pandas<0.21.0, because, allegedly, higher versions conflict with numpy.

    FROM alpine:3.6

    ENV PACKAGES="\
    dumb-init \
    musl \
    libc6-compat \
    linux-headers \
    build-base \
    bash \
    git \
    ca-certificates \
    freetype \
    libgfortran \
    libgcc \
    libstdc++ \
    openblas \
    tcl \
    tk \
    libssl1.0 \
    "

ENV PYTHON_PACKAGES="\
    numpy \
    matplotlib \
    scipy \
    scikit-learn \
    nltk \
    " 

RUN apk add --no-cache --virtual build-dependencies python3 \
    && apk add --virtual build-runtime \
    build-base python3-dev openblas-dev freetype-dev pkgconfig gfortran \
    && ln -s /usr/include/locale.h /usr/include/xlocale.h \
    && python3 -m ensurepip \
    && rm -r /usr/lib/python*/ensurepip \
    && pip3 install --upgrade pip setuptools \
    && ln -sf /usr/bin/python3 /usr/bin/python \
    && ln -sf pip3 /usr/bin/pip \
    && rm -r /root/.cache \
    && pip install --no-cache-dir $PYTHON_PACKAGES \
    && pip3 install 'pandas<0.21.0' \    #<---------- PANDAS
    && apk del build-runtime \
    && apk add --no-cache --virtual build-dependencies $PACKAGES \
    && rm -rf /var/cache/apk/*

# set working directory
WORKDIR /usr/src/app

# add and install requirements
COPY ./requirements.txt /usr/src/app/requirements.txt # other than data science packages go here
RUN pip install -r requirements.txt

# add entrypoint.sh
COPY ./entrypoint.sh /usr/src/app/entrypoint.sh

RUN chmod +x /usr/src/app/entrypoint.sh

# add app
COPY . /usr/src/app

# run server
CMD ["/usr/src/app/entrypoint.sh"]

---

The configuration above used to work. What happens now is that build does go through, but pandas fails at import with the following error:

ImportError: Missing required dependencies ['numpy']

Since numpy 1.16.1 was installed, I don't know which numpy pandas is trying to find anymore...

Does anyone know how to obtain a stable solution for this?

NOTE: A solution consisting of a pull from a turnkey docker image for data science with at least the packages mentioned above, into Dockerfile above, would be also very welcomed.

---

EDIT 1:

If I move install of data packages into requirements.txt, as suggested in the comments, like so:

requirements.txt

numpy==1.16.1 # or numpy==1.16.0
scikit-learn==0.20.2
scipy==1.2.1
nltk==3.4   
pandas==0.24.1 # or pandas== 0.23.4
matplotlib==3.0.2 

and Dockerfile:

# add and install requirements
COPY ./requirements.txt /usr/src/app/requirements.txt
RUN pip install -r requirements.txt

It breaks again at pandas, complaining about numpy.

Collecting numpy==1.16.1 (from -r requirements.txt (line 61))
  Downloading https://files.pythonhosted.org/packages/2b/26/07472b0de91851b6656cbc86e2f0d5d3a3128e7580f23295ef58b6862d6c/numpy-1.16.1.zip (5.1MB)
Collecting scikit-learn==0.20.2 (from -r requirements.txt (line 62))
  Downloading https://files.pythonhosted.org/packages/49/0e/8312ac2d7f38537361b943c8cde4b16dadcc9389760bb855323b67bac091/scikit-learn-0.20.2.tar.gz (10.3MB)
Collecting scipy==1.2.1 (from -r requirements.txt (line 63))
  Downloading https://files.pythonhosted.org/packages/a9/b4/5598a706697d1e2929eaf7fe68898ef4bea76e4950b9efbe1ef396b8813a/scipy-1.2.1.tar.gz (23.1MB)
Collecting nltk==3.4 (from -r requirements.txt (line 64))
  Downloading https://files.pythonhosted.org/packages/6f/ed/9c755d357d33bc1931e157f537721efb5b88d2c583fe593cc09603076cc3/nltk-3.4.zip (1.4MB)
Collecting pandas==0.24.1 (from -r requirements.txt (line 65))
  Downloading https://files.pythonhosted.org/packages/81/fd/b1f17f7dc914047cd1df9d6813b944ee446973baafe8106e4458bfb68884/pandas-0.24.1.tar.gz (11.8MB)
    Complete output from command python setup.py egg_info:
    Traceback (most recent call last):
      File "/usr/local/lib/python3.7/site-packages/pkg_resources/__init__.py", line 359, in get_provider
        module = sys.modules[moduleOrReq]
    KeyError: 'numpy'

    During handling of the above exception, another exception occurred:

    Traceback (most recent call last):
      File "<string>", line 1, in <module>
      File "/tmp/pip-install-_e5z6o6_/pandas/setup.py", line 732, in <module>
        ext_modules=maybe_cythonize(extensions, compiler_directives=directives),
      File "/tmp/pip-install-_e5z6o6_/pandas/setup.py", line 475, in maybe_cythonize
        numpy_incl = pkg_resources.resource_filename('numpy', 'core/include')
      File "/usr/local/lib/python3.7/site-packages/pkg_resources/__init__.py", line 1144, in resource_filename
        return get_provider(package_or_requirement).get_resource_filename(
      File "/usr/local/lib/python3.7/site-packages/pkg_resources/__init__.py", line 361, in get_provider
        __import__(moduleOrReq)
    ModuleNotFoundError: No module named 'numpy'

Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-install-_e5z6o6_/pandas/

---

EDIT 2:

This seems like an open pandas issue. For more details please refer to:

pandas-dev github

"Unfortunately, this means that a requirements.txt file is insufficient for setting up a new environment with pandas installed (like in a docker container)".

  **ImportError**:

  IMPORTANT: PLEASE READ THIS FOR ADVICE ON HOW TO SOLVE THIS ISSUE!

  Importing the multiarray numpy extension module failed.  Most
  likely you are trying to import a failed build of numpy.
  Here is how to proceed:
  - If you're working with a numpy git repository, try `git clean -xdf`
    (removes all files not under version control) and rebuild numpy.
  - If you are simply trying to use the numpy version that you have installed:
    your installation is broken - please reinstall numpy.
  - If you have already reinstalled and that did not fix the problem, then:
    1. Check that you are using the Python you expect (you're using /usr/local/bin/python),
       and that you have no directories in your PATH or PYTHONPATH that can
       interfere with the Python and numpy versions you're trying to use.
    2. If (1) looks fine, you can open a new issue at
       https://github.com/numpy/numpy/issues.  Please include details on:
       - how you installed Python
       - how you installed numpy
       - your operating system
       - whether or not you have multiple versions of Python installed
       - if you built from source, your compiler versions and ideally a build log

from Installing pandas in docker Alpine

Fix sort order for mongoose model

I have a mongoose schema:

models/profile.js

var mongoose = require("mongoose");
var passportLocalMongoose = require("passport-local-mongoose");

var profileSchema = new mongoose.Schema({
    username: String,
    type: String,
    complete: {
        type: Boolean,
        default: false
    },
    email: { 
        type: String,
        default: ""
    },
    city: { 
        type: String,
        default: ""
    },
    position: { 
        type: String,
        default: ""
    },
    skills: Array
});

I am using this within an express framework, and on one page - shown below - I want to iterate over the key/value pairs and build a table.

I would like to retain the order designated in the Schema. Is it possible to set a sort order (or better yet, iterate over an unsorted object)?

Here's my profile.ejs file where I make the table:

<table class="table profile-display">
    <tbody>

    <% for(var key in profile.toObject({versionKey: false})) { %>
        <% if (key != '_id') { %>
            <% if (profile[key].length === 0){ %>
                <tr class="incomplete-warning table-rows">
            <% } else { %>
                <tr class="table-rows">
            <% } %>
                    <td class="key-text"><%=key.toUpperCase()%>:</td>
                    <td><%=profile[key]%></td>
                </tr>    
       <% } %>
    <% } %>

    </tbody>
</table>

from Fix sort order for mongoose model

How to get updated remote config values after setting user properties

I'm currently running an A/B test on a remote config value in Firebase. The target of the test is for users with a user property X that is contained in a regex.

My problem is that I fetch the remote configs for the user BEFORE setting the user property, so I need to update the remote config when the user property is set. So basically, a force update of a remote config (that is updated because the user is now part of the AB test).

Any ideas?

from How to get updated remote config values after setting user properties

Uber RideRequestButton not displaying estimates for countries other than US

I'm trying to add the RideRequestButton feature to my android app, I want it to update the estimates through the button but for some reason this only displays when I use US-related addresses/coordinates.

Is this only supported in US?

Here's my code:

public class SampleActivity extends AppCompatActivity {

    private RideRequestButton requestButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sample);

        // Colombia
//        RideParameters rideParams = new RideParameters.Builder()
//                .setPickupLocation(4.720431, -74.041871, "George M.", "Ak. 15 #136-45, Bogotá, Colombia")
//                .setDropoffLocation(4.732878, -74.054728, "Home s", "Cl. 150 #53-28, Bogotá, Colombia")
//                .setProductId("a1111c8c-c720-46c3-8534-2fcdd730040d")
//                .build();

        // US
        RideParameters rideParams = new RideParameters.Builder()
                .setPickupLocation(37.775304, -122.417522, "Uber HQ", "1455 Market Street, San Francisco")
                .setDropoffLocation(37.795079, -122.4397805, "Embarcadero", "One Embarcadero Center, San Francisco") // Price estimate will only be provided if this is provided.
                .setProductId("a1111c8c-c720-46c3-8534-2fcdd730040d") // Optional. If not provided, the cheapest product will be used.
                .build();

        SessionConfiguration config = new SessionConfiguration.Builder()
                .setClientId("---")
                .setServerToken("---")
                .setEnvironment(SessionConfiguration.Environment.SANDBOX)
                .build();
        ServerTokenSession session = new ServerTokenSession(config);

        RideRequestButtonCallback callback = new RideRequestButtonCallback() {

            @Override
            public void onRideInformationLoaded() {

            }

            @Override
            public void onError(ApiError apiError) {

            }

            @Override
            public void onError(Throwable throwable) {

            }
        };

        requestButton = findViewById(R.id.uber_button_black);
        requestButton.setRideParameters(rideParams);
        requestButton.setSession(session);
        requestButton.setCallback(callback);
        requestButton.loadRideInformation();

    }
}

Also, does SANDBOX really work with this SDK?

from Uber RideRequestButton not displaying estimates for countries other than US

Sort on dynamic added field

I have 20 Millions documents in my database with the following manner.

 {
    "_id": ObjectId("5bb84e931cb3d25a3b21d14e"),
    "merchant": "menswearhouse.com",
    "category": "Fashion > Clothing > Men's Clothing",
    "feature": [
      "-0.899652959529",
      "-0.02401520125567913",
      "0.08394625037908554",
      "0.06319021433591843",
      "-0.015963224694132805"
    ]
  }

Now I have below array with which I need to find documents.

const dummy = [
  "-0.899652959529",
  "-0.02401520125567913",
  "0.08394625037908554",
  "0.06319021433591843",
  "-0.015963224694132805"
];

I need to

1. Find difference of all the values i.e need to subtract first index of feature with the first index of my dummy array and so on for the all 5 values.
2. Take square of all values
3. Add all 5 values
4. Take square root.
5. Sort all the values with that field and get only 5 documents.

I am using this query which $projects the field when I use $limit. But I need to $sort with the $projected field and need to take top 5 documents. But there are 20 millions document it doesn't return anything and last forever.

db.collection.aggregate([
  { $project: {
    field: {
      $sqrt: {
        $sum: {
          $map: {
            input: { $range: [0, { $size: '$feature' }] },
            as: "d",
            in: {
              $pow: [
                {
                  $subtract: [
                    { $toDouble: { $arrayElemAt: [dummy, "$$d"] }},
                    { $toDouble: { $arrayElemAt: ["$feature", "$$d"] }}
                  ]
                },
                2
              ]
            }
          }
        }
      }
    }
  }}
])

Can I use index on the field which is being created at the runtime?

Thanks!!!

from Sort on dynamic added field

Loading React Native: UnhandledPromiseRejectionWarning: Error: Cannot find module 'View'

I'm trying to contribute to a testing library. The library should provide a wrapper for react-test-renderer like react-native-testing-library does.

In order to see if my code worked I wrote a simple unit test using the code I wrote for the library. Since this was the first test for React Native I added react-native as a dev dependency together with metro-react-native-babel-preset. Furthermore, I added the preset to babel.

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"]
        }
      }
    ],
    "react",
    "module:metro-react-native-babel-preset"
  ]
}

The library does its assertions using tape.

Now, every test (npm test) throws the error:

> node -r babel-register -r babel-polyfill source/test
/path/to/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
        throw e;
        ^

Error: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory

When I remove the preset from the babel config, I get the error:

(node:1841) UnhandledPromiseRejectionWarning: Error: Cannot find module 'View'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.get View [as View] (/path/to/node_modules/react-native/Libraries/react-native/react-native-implementation.js:165:12)
    at _callee7$ (/path/to/source/test.js:110:6)
    at tryCatch (/path/to/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/path/to/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:303:22)
    at Generator.prototype.(anonymous function) [as next] (/path/to/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/path/to/source/test.js:27:191)
(node:1841) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:1841) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
not ok 10 test exited without ending
  ---
    operator: fail
    at: process.<anonymous> (/path/to/node_modules/tape/index.js:90:19)
    stack: |-
      Error: test exited without ending
          at Test.assert [as _assert] (/path/to/node_modules/tape/lib/test.js:226:54)
          at Test.bound [as _assert] (/path/to/node_modules/tape/lib/test.js:77:32)
          at Test.fail (/path/to/node_modules/tape/lib/test.js:319:10)
          at Test.bound [as fail] (/path/to/node_modules/tape/lib/test.js:77:32)
          at Test._exit (/path/to/node_modules/tape/lib/test.js:191:14)
          at Test.bound (/path/to/node_modules/tape/lib/test.js:77:32)
          at process.<anonymous> (/path/to/node_modules/tape/index.js:90:19)
          at process.emit (events.js:194:15)

How can I get React Native components to run in my test in a library (and outside of an expo init or react-native init project?

EDIT: I found out that the repo is using Babel 6, which is why the metro preset doesn't seem to work. So I exchanged it for babel-preset-react-native and now I'm back to the initial error that View can't be found.

EDIT 2: package.json

  "scripts": {
    "lint": "eslint source && echo 'Lint complete.'",
    "typecheck": "npx -p typescript tsc --rootDir . source/test.js --allowJs --checkJs --noEmit --lib es6 --jsx react && echo 'TypeScript check complete.'",
    "ts": "npm run -s typecheck",
    "test": "node -r babel-register -r babel-polyfill source/test",
    "watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint && npm run -s typecheck' source",
    "precommit": "npm run -s test && npm run -s lint && npm run -s typecheck"
  },
  "devDependencies": {
    "@types/node": "10.12.27",
    "babel-cli": "6.26.0",
    "babel-eslint": "10.0.1",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-react-native": "4.0.1",
    "babel-register": "6.26.0",
    "eslint": "5.14.1",
    "eslint-plugin-react": "7.12.4",
    "react": "16.8.3",
    "react-native": "0.58.5",
    "tap-nirvana": "1.1.0",
    "typescript": "3.3.3333",
    "watch": "1.0.2"
  },
  "dependencies": {
    "cheerio": "1.0.0-rc.2",
    "esm": "3.2.6",
    "react-dom": "16.8.3",
    "react-test-renderer": "16.8.3",
    "tape": "4.10.1"
  }

from Loading React Native: UnhandledPromiseRejectionWarning: Error: Cannot find module 'View'

View index.html found in the assets folder using NanoHttpd server embedded within my app

I have an app (Let's call it the Main App) which has an index.html page in the assets folder. The index.html is a simple HTML file with some JavaScript. It doesn't need PHP or MySql.

What I'm trying to do is embed the NanoHttpd server within my Main app, and automatically start the Nano server when the app starts or resumes, and view my index.html file within my app. While I know I can use the

webView.loadUrl("file:///android_asset/index.html"); 

to access the index.html file, it is impossible to do that for this scenario. Hence the need to use a webserver.

Right now I have a different dedicated app as a web server, which runs at http://localhost:8080. When I open the Main app, it works automatically. As you can see, in order to view the HTML file, you need to launch the web server, start it, then go back to the Main app and start it. I wanted a solution where the NanoHttpd server starts automatically when I lunch my Main App and starts showing the index.html contents on the webview. Here is my code which works perfectly using my Main App and a web server

   WebView wv;
   wv = (WebView) findViewById(R.id.webView1);
   WebSettings webSettings = wv.getSettings();
   webSettings.setJavaScriptEnabled(true);
   wv.loadUrl("http://localhost:8080/index.html");   

While O couldn't find the exact documentation for it, I tried two different approaches from the following links

1. Using NanoHTTPD in Android

2. http://programminglife.io/android-http-server-with-nanohttpd/

Both didn't work, One just shows a white page while the others just gives me a response that the server is running.

So how can I automatically start NanoHttpd server when my app starts and automatically launch an html file from my assets folder to a webview? If it's too much to ask for the NanoHttpd, is there another way to embed a webserver with an app and launch the index.html?

from View index.html found in the assets folder using NanoHttpd server embedded within my app

WebView Open External Links & target=blank Links in New Window like GMail App

I want to Open External Links &

target="blank"

Links in my WebView App in New Close-able Window like GMail App.

I tried to do the same as mentioned here:

Android - Open target _blank links in WebView with external browser

&

Handling External Links in android WebView like Gmail App does

But it is not working.

Please help me implement this feature in my App.

Here's the MainActivity.java file:

public class MainActivity extends AppCompatActivity {
    private WebView myWebView;
    public SwipeRefreshLayout swipeLayout;
    ProgressBar progressBar;
    String OSVersion = android.os.Build.VERSION.RELEASE;
    int reqCode=0;
    public Uri imageUri;
    public ValueCallback<Uri[]> uploadMessage;
    public static final int REQUEST_SELECT_FILE = 100;
    //  private final static int FILECHOOSER_RESULTCODE = 1;
    private static final int INPUT_FILE_REQUEST_CODE = 1;
    private static final int FILECHOOSER_RESULTCODE = 1;
    private static final String TAG = MainActivity.class.getSimpleName();
    private ValueCallback<Uri> mUploadMessage;
    private Uri mCapturedImageURI = null;
    private ValueCallback<Uri[]> mFilePathCallback;
    private String mCameraPhotoPath;

    public static class DetectConnection {
        public static boolean checkInternetConnection(Context context) {

            ConnectivityManager con_manager = (ConnectivityManager)
                    context.getSystemService(Context.CONNECTIVITY_SERVICE);

            return (con_manager.getActiveNetworkInfo() != null
                    && con_manager.getActiveNetworkInfo().isAvailable()
                    && con_manager.getActiveNetworkInfo().isConnected());
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        myWebView = (WebView)findViewById(webView);
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setAllowFileAccess(true);
        webSettings.setAllowContentAccess(true);
        myWebView.getSettings().setUserAgentString(String.format("Mozilla/5.0 (Linux; Android %s; BlogMaza v4 Build/IMM76B) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/72.0.3626.96 Mobile Safari/537.36", OSVersion));
        if (!DetectConnection.checkInternetConnection(this)) {
            Toast.makeText(getApplicationContext(), "No Internet!", Toast.LENGTH_SHORT).show();
        } else {
            myWebView.loadUrl("https://www.blogmaza.com");
        }
        myWebView.setWebViewClient(new webclient());
        myWebView.setWebChromeClient(new PQChromeClient());

        myWebView.getSettings().setSupportMultipleWindows(true);
        myWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onCreateWindow(WebView view, boolean dialog, boolean userGesture, android.os.Message resultMsg)
            {
                WebView.HitTestResult result = view.getHitTestResult();
                String data = result.getExtra();
                Context context = view.getContext();
                Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(data));
                context.startActivity(browserIntent);
                return false;
            }
        });

        // Swipe to Refresh
        final SwipeRefreshLayout swipeLayout = (SwipeRefreshLayout)this.findViewById(R.id.swipeToRefresh);
        swipeLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                myWebView.reload(); // refreshes the WebView

                if (null != swipeLayout) {
                    swipeLayout.setRefreshing(false);
                }
            }
        });
    }

    private File createImageFile() throws IOException {
        // Create an image file name
        String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
        String imageFileName = "JPEG_" + timeStamp + "_";
        File storageDir = Environment.getExternalStoragePublicDirectory(
                Environment.DIRECTORY_PICTURES);
        File imageFile = File.createTempFile(
                imageFileName,  /* prefix */
                ".jpg",         /* suffix */
                storageDir      /* directory */
        );
        return imageFile;
    }

    public class PQChromeClient extends WebChromeClient {

        // For Android 5.0
        public boolean onShowFileChooser(WebView view, ValueCallback<Uri[]> filePath, WebChromeClient.FileChooserParams fileChooserParams) {
            // Double check that we don't have any existing callbacks
            if (mFilePathCallback != null) {
                mFilePathCallback.onReceiveValue(null);
            }
            mFilePathCallback = filePath;

            Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
            if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
                // Create the File where the photo should go
                File photoFile = null;
                try {
                    photoFile = createImageFile();
                    takePictureIntent.putExtra("PhotoPath", mCameraPhotoPath);
                } catch (IOException ex) {
                    // Error occurred while creating the File
                    Log.e(TAG, "Unable to create Image File", ex);
                }

                // Continue only if the File was successfully created
                if (photoFile != null) {
                    mCameraPhotoPath = "file:" + photoFile.getAbsolutePath();
                    takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT,
                            Uri.fromFile(photoFile));
                } else {
                    takePictureIntent = null;
                }
            }

            Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
            contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
            contentSelectionIntent.setType("image/*");

            Intent[] intentArray;
            if (takePictureIntent != null) {
                intentArray = new Intent[]{takePictureIntent};
            } else {
                intentArray = new Intent[0];
            }

            Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER);
            chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
            chooserIntent.putExtra(Intent.EXTRA_TITLE, "Image Chooser");
            chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray);

            startActivityForResult(chooserIntent, INPUT_FILE_REQUEST_CODE);

            return true;

        }

        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {

            mUploadMessage = uploadMsg;

            File imageStorageDir = new File(
                    Environment.getExternalStoragePublicDirectory(
                            Environment.DIRECTORY_PICTURES)
                    , "AndroidExampleFolder");

            if (!imageStorageDir.exists()) {
                // Create AndroidExampleFolder at sdcard
                imageStorageDir.mkdirs();
            }

            // Create camera captured image file path and name
            File file = new File(
                    imageStorageDir + File.separator + "IMG_"
                            + String.valueOf(System.currentTimeMillis())
                            + ".jpg");

            mCapturedImageURI = Uri.fromFile(file);

            // Camera capture image intent
            final Intent captureIntent = new Intent(
                    android.provider.MediaStore.ACTION_IMAGE_CAPTURE);

            captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, mCapturedImageURI);

            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("image/*");

            // Create file chooser intent
            Intent chooserIntent = Intent.createChooser(i, "Image Chooser");

            // Set camera intent to file chooser
            chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS
                    , new Parcelable[] { captureIntent });

            // On select image call onActivityResult method of activity
            startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE);


        }

        // openFileChooser for Android < 3.0
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {
            openFileChooser(uploadMsg, "");
        }

        //openFileChooser for other Android versions
        public void openFileChooser(ValueCallback<Uri> uploadMsg,
                                    String acceptType,
                                    String capture) {

            openFileChooser(uploadMsg, acceptType);
        }

    }


    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

            if (requestCode != INPUT_FILE_REQUEST_CODE || mFilePathCallback == null) {
                super.onActivityResult(requestCode, resultCode, data);
                return;
            }

            Uri[] results = null;

            // Check that the response is a good one
            if (resultCode == Activity.RESULT_OK) {
                if (data == null) {
                    // If there is not data, then we may have taken a photo
                    if (mCameraPhotoPath != null) {
                        results = new Uri[]{Uri.parse(mCameraPhotoPath)};
                    }
                } else {
                    String dataString = data.getDataString();
                    if (dataString != null) {
                        results = new Uri[]{Uri.parse(dataString)};
                    }
                }
            }

            mFilePathCallback.onReceiveValue(results);
            mFilePathCallback = null;

        } else if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.KITKAT) {
            if (requestCode != FILECHOOSER_RESULTCODE || mUploadMessage == null) {
                super.onActivityResult(requestCode, resultCode, data);
                return;
            }

            if (requestCode == FILECHOOSER_RESULTCODE) {

                if (null == this.mUploadMessage) {
                    return;
                }

                Uri result = null;

                try {
                    if (resultCode != RESULT_OK) {

                        result = null;

                    } else {

                        // retrieve from the private variable if the intent is null
                        result = data == null ? mCapturedImageURI : data.getData();
                    }
                } catch (Exception e) {
                    Toast.makeText(getApplicationContext(), "activity :" + e,
                            Toast.LENGTH_LONG).show();
                }

                mUploadMessage.onReceiveValue(result);
                mUploadMessage = null;

            }
        }

        return;
    }


    public class webclient extends WebViewClient {
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if(url.contains("play.google")){
                view.getContext().startActivity(
                        new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
            }
            if(url.startsWith("whatsapp://")){
                Uri uri=Uri.parse(url);
                String msg = uri.getQueryParameter("text");
                Intent sendIntent = new Intent();
                sendIntent.setAction(Intent.ACTION_SEND);
                sendIntent.putExtra(Intent.EXTRA_TEXT, msg);
                sendIntent.setType("text/plain");
                sendIntent.setPackage("com.whatsapp");
                startActivity(sendIntent);
                return true;
            }
            if (url.startsWith("tel:")) {
                Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse(url));
                startActivity(intent);
                view.reload();
                return true;
            }
            if ((url.contains("blogmaza.com"))) {
                view.loadUrl(url);
                return true;
            } else {
                view.getContext().startActivity(
                        new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
            }
            return true;
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            progressBar.setVisibility(View.VISIBLE);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            progressBar.setVisibility(View.GONE);
        }

    }

    private static final int TIME_DELAY = 2000;
    private static long back_pressed;
    @Override
    public void onBackPressed() {
        if(myWebView.canGoBack()) {
            myWebView.goBack();
        }

        if (back_pressed + TIME_DELAY > System.currentTimeMillis()) {
            super.onBackPressed();
        } else {
            Toast.makeText(getBaseContext(), "Press once again to exit!",
                    Toast.LENGTH_SHORT).show();
        }
        back_pressed = System.currentTimeMillis();
    }
}

Also, I want to open the links of the websites from Google search app and browser directly into the app. As mentioned here:

How to force open URL in WebView? Set App as Default for WebView URL

Which is working fine. Only problem is, all the pages are opening the homepage in app.

Like if an user clicks on a link say https://www.website.com/folder/page from browser, it opens https://www.website.com/ in the app.

How do I fix this issue?

Here's the AndroidManifest.xml file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.blogmaza">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <!-- Splash screen -->
        <activity
            android:name=".SplashScreen"
            android:label="@string/app_name"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.Black.NoTitleBar" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".MainActivity"
            android:windowSoftInputMode="adjustResize|stateHidden"
            android:configChanges="orientation|screenSize">
            <intent-filter>
                <data android:scheme="https" />
                <data android:scheme="https" android:host="www.blogmaza.com"/>
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.BROWSABLE"/>
                <category android:name="android.intent.category.DEFAULT"/>
            </intent-filter>
        </activity>
    </application>
    <uses-feature android:name="android.hardware.camera" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

</manifest>

Note: I am fairly new in Android Development. Please post the solution with brief explanation.

from WebView Open External Links & target=blank Links in New Window like GMail App

Error setting text to EditText inside RecyclerView's onBindViewHolder method

I'm trying to set a text to an EditText inside my custom adapter and I'm getting this stack:

> java.lang.NullPointerException: Attempt to read from field 'android.support.v7.widget.ViewInfoStore android.support.v7.widget.RecyclerView.mViewInfoStore' on a null object reference
    at android.support.v7.widget.RecyclerView$LayoutManager.addViewInt(RecyclerView.java:8194)
    at android.support.v7.widget.RecyclerView$LayoutManager.addView(RecyclerView.java:8180)
    at android.support.v7.widget.RecyclerView$LayoutManager.addView(RecyclerView.java:8168)
    at android.support.v7.widget.LinearLayoutManager.layoutChunk(LinearLayoutManager.java:1573)
    at android.support.v7.widget.LinearLayoutManager.fill(LinearLayoutManager.java:1519)
    at android.support.v7.widget.LinearLayoutManager.onLayoutChildren(LinearLayoutManager.java:614)
    at android.support.v7.widget.RecyclerView.dispatchLayoutStep2(RecyclerView.java:3812)
    at android.support.v7.widget.RecyclerView.onMeasure(RecyclerView.java:3225)
    at android.view.View.measure(View.java:17547)
    at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5535)
    at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1436)
    at android.widget.LinearLayout.measureVertical(LinearLayout.java:722)
    at android.widget.LinearLayout.onMeasure(LinearLayout.java:613)
    at android.view.View.measure(View.java:17547)
    at android.widget.ScrollView.measureChildWithMargins(ScrollView.java:1260)
    at android.widget.FrameLayout.onMeasure(FrameLayout.java:436)
    at android.widget.ScrollView.onMeasure(ScrollView.java:337)
    at android.view.View.measure(View.java:17547)
    at android.support.constraint.ConstraintLayout.onMeasure(ConstraintLayout.java:1676)
    at android.view.View.measure(View.java:17547)
    at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5535)
    at android.widget.FrameLayout.onMeasure(FrameLayout.java:436)
    at android.support.v7.widget.ContentFrameLayout.onMeasure(ContentFrameLayout.java:141)
    at android.view.View.measure(View.java:17547)
    at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5535)
    at android.support.v7.widget.ActionBarOverlayLayout.onMeasure(ActionBarOverlayLayout.java:400)
    at android.view.View.measure(View.java:17547)
    at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5535)
    at android.widget.FrameLayout.onMeasure(FrameLayout.java:436)
    at android.view.View.measure(View.java:17547)
    at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5535)
    at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1436)
    at android.widget.LinearLayout.measureVertical(LinearLayout.java:722)
    at android.widget.LinearLayout.onMeasure(LinearLayout.java:613)
    at android.view.View.measure(View.java:17547)
    at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5535)
    at android.widget.FrameLayout.onMeasure(FrameLayout.java:436)
    at com.android.internal.policy.impl.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2615)
    at android.view.View.measure(View.java:17547)
    at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:2015)
    at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1173)
    at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1379)
    at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1061)
    at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5885)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:767)
    at android.view.Choreographer.doCallbacks(Choreographer.java:580)
    at android.view.Choreographer.doFrame(Choreographer.java:550)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:753)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:135)
    at android.app.ActivityThread.main(ActivityThread.java:5254)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:903)
    at com.andro

02-21 14:14:29.702 1707-1707/com.android.inputmethod.latin E/RichInputConnection: Unable to connect to the editor to retrieve text. 02-21 14:14:31.705 1707-1707/com.android.inputmethod.latin E/RichInputConnection: Unable to connect to the editor to retrieve text. 02-21 14:14:33.706 1707-1707/com.android.inputmethod.latin E/RichInputConnection: Unable to connect to the editor to retrieve text. 02-21 14:14:35.709 1707-1707/com.android.inputmethod.latin E/RichInputConnection: Unable to connect to the editor to retrieve text.

I'm not sure what is wrong, I am setting text to a TextView exactly the same way and It works fine. I've looked over forums and articles and I've seem people with similar issues but It seems they either no binding the view with I's ViewHolder property correctly or trying to access the

Here It is my custom Adapter class:

    public class ProductListAdapter extends RecyclerView.Adapter<ProductListViewHolder>{
    private List<Product> productList;
    private ProductItemManager productItemManager;

    public ProductListAdapter(List<Product> productList, ProductItemManager productItemManager) {
        this.productList = productList;
        this.productItemManager = productItemManager;
    }

    @NonNull
    @Override
    public ProductListViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View productListView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.adapter_product_list, parent, false);
        return new ProductListViewHolder(productListView, productItemManager);
    }

    @Override
    public void onBindViewHolder(@NonNull ProductListViewHolder productListViewHolder, final int position) {
        Product product = productList.get(position);

        Double finalPrice = product.getSellingPrice() * product.getQuantity();

        productListViewHolder.productDescription.setText(product.getDescription());
        productListViewHolder.productSellingPrice.setText("un. " + Utils.doubleToReal(product.getSellingPrice()));
        productListViewHolder.productFinalPrice.setText(Utils.doubleToReal(finalPrice));
        productListViewHolder.productQuantity.setText(Double.toString(product.getQuantity()));
    }

    @Override
    public int getItemCount() {
        return productList.size();
    }
}

And here It is my ViewHolder

    public class ProductListViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
    public TextView productDescription, productSellingPrice, productFinalPrice;
    public ImageView removeProductIcon;
    public EditText productQuantity;
    private ProductItemManager productItemManager;

    public ProductListViewHolder(View itemView, ProductItemManager productItemManager) {
        super(itemView);

        productDescription = itemView.findViewById(R.id.productDescription);
        productSellingPrice = itemView.findViewById(R.id.productSellingPrice);
        productFinalPrice = itemView.findViewById(R.id.productFinalPrice);
        removeProductIcon = itemView.findViewById(R.id.removeProductIcon);
        productQuantity = itemView.findViewById(R.id.productQuantity);

        this.productItemManager = productItemManager;

        removeProductIcon.setOnClickListener(this);

        this.productChangeListener();
    }

    private void productChangeListener() {
        productQuantity.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                Double quantity = Double.parseDouble(productQuantity.getText().toString());
                productItemManager.setProductQuantity(getAdapterPosition(), quantity);
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }

    @Override
    public void onClick(View v) {
        productItemManager.removeProduct(getAdapterPosition());
    }
}

from Error setting text to EditText inside RecyclerView's onBindViewHolder method

How can I invite a user to a newly created private chat channel using the Twilio?

I have created a private channel, and joined the channel. I like to invite another user to join that channel and chat. To be clear, this should be a chat between two members only.

public class MainActivity extends AppCompatActivity {
        /*
       Change this URL to match the token URL for your Twilio Function
    */
    final static String SERVER_TOKEN_URL = "https://example.com/twilio/token/";

    final static String MY_CHANNEL_NAME = "testchat1234567810";
    final static String TAG = "TwilioChat";

    // Update this identity for each individual user, for instance after they login
    private String mIdentity ;
    private String accessToken;
    private RecyclerView mMessagesRecyclerView;
    private MessagesAdapter mMessagesAdapter;
    private ArrayList<Message> mMessages = new ArrayList<>();

    private EditText mWriteMessageEditText;
    private Button mSendChatMessageButton;

    private ChatClient mChatClient;

    private Channel mGeneralChannel;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mMessagesRecyclerView = (RecyclerView) findViewById(R.id.messagesRecyclerView);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        // for a chat app, show latest at the bottom
        layoutManager.setStackFromEnd(true);
        mMessagesRecyclerView.setLayoutManager(layoutManager);

        mMessagesAdapter = new MessagesAdapter();
        mMessagesRecyclerView.setAdapter(mMessagesAdapter);

        mWriteMessageEditText = (EditText) findViewById(R.id.writeMessageEditText);

        mSendChatMessageButton = (Button) findViewById(R.id.sendChatMessageButton);

        mSendChatMessageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                createOrJoinChannel();
                if (mGeneralChannel != null) {

                    String messageBody = mWriteMessageEditText.getText().toString();
                    Message.Options options = Message.options().withBody(messageBody);
                    // mGeneralChannel.getMembers().add();
                    Members members = mGeneralChannel.getMembers();
                    if (members != null) {
                        ArrayList<Member> list = (ArrayList<Member>) members.getMembersList();
                        for (int i = 0; i < list.size(); i++) {
                            Log.i(TAG, "member " + i + list.get(i).getIdentity());
                        }
                    }
                    mGeneralChannel.getMembers().inviteByIdentity("user1@gmail.com", new StatusListener() {
                        @Override
                        public void onSuccess() {
                            Log.d(TAG, "User Invited on send!");

                        }

                        @Override
                        public void onError(ErrorInfo errorInfo) {
                            Log.i(TAG, "chats: inviting user" + errorInfo.getMessage());
                        }
                    });

                    mGeneralChannel.getMembersCount(new CallbackListener<Long>() {
                        @Override
                        public void onSuccess(Long aLong) {
                            Log.e("member count >>", aLong + "");
                        }
                    });
                    mGeneralChannel.getMessages().sendMessage(options, new CallbackListener<Message>() {
                        @Override
                        public void onSuccess(Message message) {
                            MainActivity.this.runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    Log.d(TAG, "Message created");
                                    // need to modify user interface elements on the UI thread
                                    mWriteMessageEditText.setText("");
                                }
                            });
                        }
                    });
                }
            }
        });

        retrieveAccessTokenfromServer();



    }



    private void retrieveAccessTokenfromServer() {
        String deviceId = Settings.Secure.getString(getContentResolver(), Settings.Secure.ANDROID_ID);
Log.e("deviceid >>",deviceId);
        String tokenURL = SERVER_TOKEN_URL + deviceId;

        Ion.with(this)
                .load(tokenURL)
                .asJsonObject()
                .setCallback(new FutureCallback<JsonObject>() {
                    @Override
                    public void onCompleted(Exception e, JsonObject result) {
                        Log.e("result >>", result.toString() + "");
                        if (e == null) {
                            mIdentity = result.get("identity").getAsString();
                            accessToken = result.get("token").getAsString();
                            setTitle(mIdentity);

                            ChatClient.Properties.Builder builder = new ChatClient.Properties.Builder();
                         //   ChatClient.setLogLevel(Log.VERBOSE);
                            ChatClient.Properties props = builder.createProperties();
                            ChatClient.create(MainActivity.this, accessToken, props, mChatClientCallback);

                        } else {
                            Toast.makeText(MainActivity.this,
                                    R.string.error_retrieving_access_token, Toast.LENGTH_SHORT)
                                    .show();
                        }
                    }
                });
    }

    private CallbackListener<ChatClient> mChatClientCallback =
            new CallbackListener<ChatClient>() {
                @Override
                public void onSuccess(ChatClient chatClient) {
                    mChatClient = chatClient;
                    //   createOrJoinChannel();
                    //  loadChannels();
                    Log.d(TAG, "Success creating Twilio Chat Client");
                }

                @Override
                public void onError(ErrorInfo errorInfo) {
                    Log.e(TAG, "Error creating Twilio Chat Client: " + errorInfo.getMessage());
                }


            };



    private void createOrJoinChannel() {
        //Only SID or unique name of channel can be supplied as parameter
        mChatClient.getChannels().getChannel(MY_CHANNEL_NAME, new CallbackListener<Channel>() {

            @Override
            public void onSuccess(Channel channel) {
                if (channel != null) {
                    if (channel.getStatus() == Channel.ChannelStatus.JOINED) {
                        // already in the channel, load the messages
                        mGeneralChannel = channel;
                        mGeneralChannel.addListener(mDefaultChannelListener);
                    } else if (channel.getStatus() == Channel.ChannelStatus.NOT_PARTICIPATING) {
                        // already in the channel, load the messages
                        mGeneralChannel = channel;
                        mGeneralChannel.addListener(mDefaultChannelListener);
                    } else {
                        // join the channel
                        joinChannel(channel);
                    }

                } else {
                    Log.i(TAG, "Error occurred in getting channel");
                }
            }

            @Override
            public void onError(ErrorInfo errorInfo) {
                Log.i(TAG, "Error retrieving channel: " + errorInfo.getMessage());
                createChannel();
            }

        });
    }

    private void joinChannel(final Channel channel) {
        Log.i(TAG, "inside join channel" + channel.getUniqueName());
        Log.i(TAG, "channel status: " + channel.getStatus());

        Members members = channel.getMembers();
        if (members != null) {
            ArrayList<Member> list = (ArrayList<Member>) members.getMembersList();
            for (int i = 0; i < list.size(); i++) {
                Log.i(TAG, "member " + i + list.get(i).getIdentity());
            }
        } else {
            Log.i(TAG, "null object"); //Getting this even when I get
            //"Member already exists" error
        }
        channel.join(new StatusListener() {
            @Override
            public void onSuccess() {
                mGeneralChannel = channel;
                mGeneralChannel.addListener(mDefaultChannelListener);
            }

            @Override
            public void onError(ErrorInfo errorInfo) {
                //Error joining channel: Member already exists
                Log.i(TAG, "Error joining channel: " + errorInfo.getMessage());
            }
        });
    }


    private void createChannel() {
        mChatClient.getChannels().createChannel(MY_CHANNEL_NAME,
                Channel.ChannelType.PUBLIC, new CallbackListener<Channel>() {
                    @Override
                    public void onSuccess(final Channel channel) {
                        if (channel != null) {
                               /* channel.getMembersCount(new CallbackListener<Long>() {
                                    @Override
                                    public void onSuccess(Long aLong) {
                                        Log.e("member count >>",aLong+"");
                                    }
                                });*/
                            channel.getMembers().inviteByIdentity("user1@gmail.com", new StatusListener() {
                                @Override
                                public void onSuccess() {
                                    Log.d(TAG, "User Invited!");
                                }

                                @Override
                                public void onError(ErrorInfo errorInfo) {
                                    Log.i(TAG, "chats: inviting user" + errorInfo.getMessage());
                                }
                            });
                            channel.join(new StatusListener() {
                                @Override
                                public void onSuccess() {

                                }
                            });
                            setUniqueNameAndJoin(channel);
                        }
                    }

                    @Override
                    public void onError(ErrorInfo errorInfo) {
                        Log.i(TAG, "chats: " + "Unique name could not be set: " + errorInfo.getMessage());
                    }
                });
    }

    private void setUniqueNameAndJoin(final Channel channel) {
        channel.setUniqueName(MY_CHANNEL_NAME, new StatusListener() {
            @Override
            public void onSuccess() {
                Log.i(TAG, "channel with unique name created " + channel.getUniqueName());
                joinChannel(channel);
            }

            @Override
            public void onError(ErrorInfo errorInfo) {
                super.onError(errorInfo);
            }
        });
    }

    private ChannelListener mDefaultChannelListener = new ChannelListener() {


        @Override
        public void onMessageAdded(final Message message) {
            Log.d(TAG, "Message added");
            MainActivity.this.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    // need to modify user interface elements on the UI thread
                    mMessages.add(message);
                    mMessagesAdapter.notifyDataSetChanged();
                }
            });

        }

        @Override
        public void onMessageUpdated(Message message, Message.UpdateReason updateReason) {
            Log.d(TAG, "Message updated: " + message.getMessageBody());
        }

        @Override
        public void onMessageDeleted(Message message) {
            Log.d(TAG, "Message deleted");
        }

        @Override
        public void onMemberAdded(Member member) {
            Log.d(TAG, "Member added: " + member.getIdentity());
        }

        @Override
        public void onMemberUpdated(Member member, Member.UpdateReason updateReason) {
            Log.d(TAG, "Member updated: " + member.getIdentity());
        }

        @Override
        public void onMemberDeleted(Member member) {
            Log.d(TAG, "Member deleted: " + member.getIdentity());
        }

        @Override
        public void onTypingStarted(Channel channel, Member member) {
            Log.d(TAG, "Started Typing: " + member.getIdentity());
        }

        @Override
        public void onTypingEnded(Channel channel, Member member) {
            Log.d(TAG, "Ended Typing: " + member.getIdentity());
        }

        @Override
        public void onSynchronizationChanged(Channel channel) {

        }
    };


    class MessagesAdapter extends RecyclerView.Adapter<MessagesAdapter.ViewHolder> {

        class ViewHolder extends RecyclerView.ViewHolder {

            public TextView mMessageTextView;

            public ViewHolder(TextView textView) {
                super(textView);
                mMessageTextView = textView;
            }
        }

        public MessagesAdapter() {

        }

        @Override
        public MessagesAdapter
                .ViewHolder onCreateViewHolder(ViewGroup parent,
                                               int viewType) {
            TextView messageTextView = (TextView) LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.message_text_view, parent, false);
            return new ViewHolder(messageTextView);
        }

        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {
            Message message = mMessages.get(position);
            String messageText = String.format("%s: %s", message.getAuthor(), message.getMessageBody());
            holder.mMessageTextView.setText(messageText);

        }

        @Override
        public int getItemCount() {
            return mMessages.size();
        }
    }



}

And also, I need to accept the invite. How it can be done?

from How can I invite a user to a newly created private chat channel using the Twilio?

Validator on add and without clearing (ngx-chips, angular)

I'm using ngx-chips to add a list of emails as tags into an input. A validator makes sure that each tag appears like an email.

How can I make sure that:

1) The validator only triggers when a tag is being added (i.e., user hits enter, space or comma)

2) If the email is not valid when enter/space/comma is hit, that the value persists (i.e., it does not clear...so that the user can fix it)

A stackblitz is here: https://stackblitz.com/edit/ngx-chips-example-2qdudc

Below is my email validator:

public validators = [ this.must_be_email ];
  public errorMessages = {
      'must_be_email': 'Please be sure to use a valid email format'
  };
  private must_be_email(control: FormControl) {        
      var EMAIL_REGEXP = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$/i;
      if (control.value.length != "" && !EMAIL_REGEXP.test(control.value)) {
          return { "must_be_email": true };
      }
      return null;
  }

Below is the tag:

<tag-input [(ngModel)]='emails' 
name="emails" 
#email="ngModel" 
[errorMessages]="errorMessages"
[validators]="validators" 
[editable]='true' 
(onTagEdited)="onTagEdited($event)" 
[separatorKeyCodes]="[32,188,186,13,9]"
[placeholder]="'Add email'" 
[secondaryPlaceholder]="'Enter email address(es)'" 
[clearOnBlur]="true" 
[addOnPaste]="true"
[addOnBlur]="true"
[pasteSplitPattern]="splitPattern" 
theme='bootstrap' 
required >
</tag-input>

For 2), I tried changing "return null" to control.value in the validator...but that did not work

from Validator on add and without clearing (ngx-chips, angular)

How to implement and fire an event when a change occurs in a property of `T` in `List

prominence of card view layout and divider color

I used CardView layout in list_item.xml "the xml post cell" for RecyclerView", I trying to making the cards prominenced and the color of divider close to gray like this

But it appears as like there is no emergence or color of it,
this image for current situation

this post_item.xml

   <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="5dp"
    android:elevation="6dp"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:padding="10dp">

            <TextView
                android:id="@+id/postTitle"
                style="@style/Base.TextAppearance.AppCompat.Title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"
                android:layout_marginRight="5dp"
                android:ellipsize="end"
                android:maxLines="2"
                android:text="This is the post title,
you can check bla bla bla bla bla lkjdflkjhnfldkjhnflkjhnlfkjnglkjnlkjkln" />

            <TextView
                android:id="@+id/postDescription"
                style="@style/Base.TextAppearance.AppCompat.Body2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="5dp"
                android:layout_marginEnd="5dp"
                android:layout_marginRight="5dp"
                android:ellipsize="end"
                android:maxLines="4"
                android:text="This is the post titldfkjfdjffkjdhfnkjdsfjnkdsjnksskskjfnksjfnksjfnksjfnkjdfbdnfbjvb jkxzbvkjxcvbvkjve,
you can check bla bla bla bla bla lkjdflkjhnfldkjhnflkjhnlfkjnglkjnlkjkln" />

        </LinearLayout>

        <ImageView
            android:id="@+id/postImage"
            android:layout_width="match_parent"
            android:layout_height="125dp"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="3"
            android:adjustViewBounds="true"
            android:src="@mipmap/ic_launcher" />


    </LinearLayout>

</android.support.v7.widget.CardView>

I tried to solve the problem by adding this two lines on RecyclerView like this answer but it did not work
android:divider="#E6E6E6" android:dividerHeight="0px"

from prominence of card view layout and divider color

pyautogui doesn't let me select text

I want to select some text on the screen. I figured using pyautogui would be the way to go. I did the following:

keyDown('shift')
sleep(0.1)
press('end')
sleep(0.1)
keyUp('shift')

When doing this exact combination by hand it does select the text I want it to. Of course the sleep function is from the time module.

I even tried to select text in word using the following:

keyDown('shift')
press('right')
press('right')
keyUp('shift')

And even this didn't work... Does anyone know why?

Thanks in advance!

from pyautogui doesn't let me select text

Send keystrokes to a specific window (in background), but do something else in the meantime

This code (inspired from Which is the easiest way to simulate keyboard and mouse on Python?) opens a Notepad and send the keys A, B, C, D, ..., Z every second:

import win32com.client, time
shell = win32com.client.Dispatch("WScript.Shell")
shell.Run('Notepad')
time.sleep(1)
shell.AppActivate("Notepad")
for i in range(65,91):
    shell.SendKeys(chr(i))
    time.sleep(1)

I would like to let this operation continue in background, continue my work on the computer, and have the keystrokes sent to Notepad (in background).

Problem: if I open another application (example: browser) in the meantime, the keystrokes are sent ... to the currently active window, which I dont't want!

Question: how to have Python send the keystrokes to notepad.exe only, even if this application is not in foreground?

Context: I'm automating some long task requiring that my Python script sends keystrokes to app.exe (in background) during maybe 15 minutes, but I'd like to do something else with the computer in the meantime.

from Send keystrokes to a specific window (in background), but do something else in the meantime

How to intercept :enter & :leave Animations in Angular with a changes Diff?

I have a list in my template, where the first 3 items will be shown and the rest is in a collapsible, i.e. within a 'show more' link.

• item1
• item2

• item3

  Show More

Here is how it looks when you click Show More:

• item1
• item2
• item3
• item4

• item5

  Show Less

The list is highly dynamic. The items are held by component in a single list called myList. The collapsible is from our pattern library where the html structure is predefined. So i actually had to have 2 different lists in my template. First is for the first 3 items, second is for the rest within a collapsible. In order not to use the same HTML twice, i define the list with ng-template and reuse it 2 times. Here is the template's rough structure:

<ng-template #listRef let-list>
  <ul>
    <ng-container *ngFor="let item of list; trackBy: trackByFn;">
      <li @animation>

       ...

Here is the usage with template:

<!-- first part, max 3 items -->

<ng-container *ngTemplateOutlet="listRef; context: {$implicit: myList?.slice(0,3)}"></ng-container>


<!-- second part, rest in collapsible -->

<ng-container *ngIf="lebenslaufEintraege?.length > 3">
  <div class="my-collapsible">
    <a>...</a>
    <div>..
      <ng-container
          *ngTemplateOutlet="listRef; context: {$implicit: myList?.slice(3,myList.length)}">
      </ng-container>

Also, as soon as a new item is added it enters to the list animated. Also if an item is removed, it leaves animated. Here is my animation trigger:

trigger('animation', [
  transition(':enter', [
    style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0'}),  // initial
    animate('0.5s',
      style({ height: '*', 'padding-top': '*', 'padding-bottom': '*'}))  // final
  ]),
  transition(':leave', [
    style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', opacity: 1}),  // initial
    animate('0.5s',
      style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0', opacity: 0}))  // final
  ])
])

The problem is then, when we have more than 3 items and the collapsible is open, so all items are seen in viewport. In this case, when a new item is added to the first part of the list, it enters animated, but since the last item of the list also leaves the first list and enters to second list, it is also animated, which we do not want.

In another words; if we have 5 items, and add a new one to the top, item3 is removed from the first list, and added to the second list, which also triggers the animation.

How can i prevent this animation?

Today i have found out, that we can disable the animation for the individual items with this annotation:

<li [@.disabled]="item.isAnimated" @animation>

But i cannot imagine how i should implement the logic for this flag isAnimated. As soon as the item3 is shifted to the 2. list, i have to check if it was in the first list before, but i don't have the previous status of the first list.

I think the only possible option is to somehow intercept the animation, and look if the previous state of the list had the same item, and if yes interrupt the animation..

Or should i remove the animation from the item, and instead define some animation for the changes in my main-list (myList). But i do not know how to achieve this in my case with my template..

I appreciate any help.

from How to intercept :enter & :leave Animations in Angular with a changes Diff?

PermissionError: [Errno 13] for df.to_csv() when running python script in cmd

I have a python script where at one point I save a temporary file locally:

df.to_csv(temp_file_name)

This works fine when I run it in Pycharm.

However, when I schedule it as a batch in task scheduler (or if I manually open it with cmd and run it). I basically tell the Task Scheduler to open the program:

C:\Windows\System32\cmd.exe

And Add arguments:

/c C:\Github\project_folder\venv\Scripts\activate.bat && python C:\Github\project_folder\daily_main.py

However, I get the error at the line above:

PermissionError: [Errno 13] Permission denied: 'CLOSE'

where CLOSE is actually a column in my df. What is happening and how to resolve it?

from PermissionError: [Errno 13] for df.to_csv() when running python script in cmd

No output, even with `py.test -s`

I would like to use py.test combined with hunter:

PYTHONHUNTER="module_startswith='foo'" py.test -s -k test_bar

Unfortunately the output (trace) of hunter is not visible.

Version:

foo_cok_d@aptguettler:~$ py.test --version

This is pytest version 3.4.2, imported from /home/foo_cok_d/local/lib/python2.7/site-packages/pytest.pyc
setuptools registered plugins:
  pytest-xdist-1.22.2 at /home/foo_cok_d/local/lib/python2.7/site-packages/xdist/looponfail.py
  pytest-xdist-1.22.2 at /home/foo_cok_d/local/lib/python2.7/site-packages/xdist/plugin.py
  pytest-forked-0.2 at /home/foo_cok_d/local/lib/python2.7/site-packages/pytest_forked/__init__.pyc

In a simpler (smaller) virtualenv it works (same pytest version, but no plugins).

What could be the reason?

How to debug this?

from No output, even with `py.test -s`

HttpPostedFileBase null when I try to upload image in asp .net mvc5 with js knockout?

I'm trying to upload images in asp .net mvc 5 with knockout js and the paraFrame PhotoFile that is of type HttpPostedFileBase comes to me null, and I can not upload the image, I'm new working with Knockout js I would like someone to help me with that,

This is the model,

    public int LenderId { get; set; }
    public string GenderId { get; set; }
    public string GenderName { get; set; }
    public string Email { get; set; }
    public bool IsActive { get; set; }
    public string PhotoPath { get; set; }
    public HttpPostedFileBase PhotoFile { get; set; }

This is the html,

        <div class="form-group">
            <span class="control-label col-md-2"><strong>Foto:</strong></span>
            <div class="col-md-10">
                <span class="btn btn-default btn-file">
                    <input type="file" class="form-control" id="PhotoUpload" name="PhotoUpload" data-bind="attr:{src: PhotoPath}" />
                </span>
            </div>
        </div>

this is the js

function lenderModel() { var lenderModel = this;

lenderModel.LenderId = ko.observable();
lenderModel.FirstName = ko.observable();
lenderModel.MiddleName = ko.observable();
lenderModel.FirstLastName = ko.observable();
lenderModel.SecondLastName = ko.observable();
lenderModel.IdentificationCard = ko.observable();
lenderModel.GenderId = ko.observable();
lenderModel.GenderName = ko.observable();
lenderModel.Email = ko.observable();
lenderModel.IsActive = ko.observable();
lenderModel.PhotoPath = ko.observable();
lenderModel.CreateBy = ko.observable();
lenderModel.CreationDate = ko.observable();
lenderModel.ModifiedBy = ko.observable();
lenderModel.ModifiedDate = ko.observable();

}

lenderViewModel.Create = function () {
    if (lenderViewModel.IsNew()) {
        $.ajax({
            url: '/AdminLenders/Create',
            data: ko.toJSON(lenderViewModel.LenderModel()),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            async: true,
            success: function (data) {
                if (data.Success) {
                    LoadGenders();
                    LoadListLenders();
                    $('#TextboxFirstName').val('');
                    $('#TextboxMiddleName').val('');
                    $('#TextboxFirstLastName').val('');
                    $('#TextboxSecondLastName').val('');
                    $('#TextboxIdentificationCard').val('');
                    $('#TextboxEmail').val('');
                    $('#ComboBoxGenders').val('');
                    $('#TextboxIsActive').prop('checked', false);
                    swal("Prestamista creado!", "Se ha registrado correctamente!", "success")
                }
                else {
                    swal("Error creando el prestamista!", data.Data, "error")
                }
            },
            error: function (ex) {
                alert('Ocurrión un error');
            }
        });
    }
};

As I am new to this of knockout js I do not know how I can implement it, help appreciate the contribution and help

from HttpPostedFileBase null when I try to upload image in asp .net mvc5 with js knockout?

React - Button is not disabled during the ajax call, toast is not working

I have few buttons on the page and if I click the button ajax call is made. I want to disable the button so the user doesnt click it again and another ajax call is not made.

I tried the below code but the button is not disabling. I want to show the notification on success in react as well - I tried toast but its not working too.

Is there any other way I can show a balloon popup in react ?

Please suggest,

    onClickRun(params) {

    const url = `/api/${params}/run`;
    const id = "run"+params;
    return $.ajax({
        type: 'POST',
        url,
        processData: false,
        contentType: 'application/json',
        beforeSend :() =>{
           // $("#run"+params).classList.add("cursorDisabled");
           // $("#run"+params).attr('disabled',true);   
            document.getElementById(id).disabled = true;
            document.getElementById(id).classList.add('cursorDisabled');             
        },
        success: (response) => { 
            if(!response.error) {

                // toast({
                //     message: 'Pipeline ran successfully.',
                //     flavor: 'success',
                //     options: { timeOut: 5000 }
                // });
                //$("#"+params).classList.remove("cursorDisabled");
                //$("#run"+params).attr('disabled',false);
                document.getElementById(id).disabled = false;
                  document.getElementById(id).classList.remove('cursorDisabled'); 
                location.reload(true);
            }
        },
        error: (error) => {
            console.log("error");
        }
    });
}

CSS code :

.cursorDisabled{
    cursor: not-allowed;
    color: gray;
}

Button :

<button id= {"run"+col.name} type="button" onClick={() =>  this.onClickRun(col.name)} <i className="icon-play-filled"></i>
                                </button>

from React - Button is not disabled during the ajax call, toast is not working

Download image using SDWebImage, error -999

I am unable to download the image in Objective c Using SDWebImage 4.4.5 version., I tried the following , nothing worked.

Try 1:

[self.thumbnailImageView sd_setImageWithURL:[NSURL URLWithString:thumbnailURLString] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {

}];

Try 2:

[self.thumbnailImageView sd_setImageWithURL:[NSURL URLWithString:thumbnailURLString] placeholderImage:nil options:SDWebImageRefreshCached completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) { if(image != nil){
            self.thumbnailImageView.image = image;                
        } else {
            NSLog(@"Photo Not Available, fetch");
            [self.thumbnailImageView sd_setImageWithURL:[NSURL URLWithString:thumbnailURLString] placeholderImage:nil options:SDWebImageRefreshCached completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
                if(image != nil) { NSLog(@"Lo Res Image Loaded by %ld from '%@'", (long)cacheType, imageURL);
                    self.thumbnailImageView.image = image;

                } else {
                    self.thumbnailImageView.image = nil;

                } }];

        } }];

Try 3:

[[SDWebImageDownloader sharedDownloader] downloadImageWithURL:[NSURL URLWithString:thumbnailURLString] options:SDWebImageDownloaderUseNSURLCache progress:nil completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) {


        }];

Try 4:

SDWebImageManager *manager = [SDWebImageManager sharedManager];

        [manager loadImageWithURL:[NSURL URLWithString:thumbnailURLString] options:SDWebImageDelayPlaceholder progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) {
        } completed:^(UIImage * _Nullable image, NSData * _Nullable data, NSError * _Nullable error, SDImageCacheType cacheType, BOOL finished, NSURL * _Nullable imageURL) {

        }];

Try 5:

SDWebImageDownloader *manager = [SDWebImageManager sharedManager].imageDownloader;
        [manager setValue:@"application/vnd.learning.events.v1+json" forHTTPHeaderField:@"Accept"];
        [manager setValue:@"en-US" forHTTPHeaderField:@"Accept-Language"];
        [manager setValue:@"application/json; charset=utf-8" forHTTPHeaderField:@"Content-Type"];
        //[manager setValue:savedEmail forHTTPHeaderField:@"Email"];
        [manager setValue:savedToken forHTTPHeaderField:@"Authorization"];
        [manager downloadImageWithURL:[NSURL URLWithString:thumbnailURLString] options:SDWebImageDownloaderHighPriority progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) {
        } completed:^(UIImage * _Nullable image, NSData * _Nullable data, NSError * _Nullable error, BOOL finished) {
            self.thumbnailImageView.image = image;
        }];

In all the above cases, getting the following error:

Error Domain=NSURLErrorDomain Code=-999 "cancelled" UserInfo={NSErrorFailingURLStringKey=https://prodServer.azurewebsites.net/api/BAImage?ActionFlagId=97&id=615, NSErrorFailingURLKey=https://prodServer.azurewebsites.net/api/BAImage?ActionFlagId=97&id=615, _NSURLErrorRelatedURLSessionTaskErrorKey=( "LocalDataTask <92586538-B07D-46FB-8694-3B29AA3F0CB4>.<7>" ), _NSURLErrorFailingURLSessionTaskErrorKey=LocalDataTask <92586538-B07D-46FB-8694-3B29AA3F0CB4>.<7>, NSLocalizedDescription=cancelled}

Earlier, we used v3.5.4 version used, able to download the image with the following code. It's working good.

[self.thumbnailImageView setImageWithURL:[NSURL URLWithString:thumbnailURLString]
                            placeholderImage:nil
                                   completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType) {
                                       if (image != nil){
                                           self.thumbnailImageView.image = [self imageResizingToAspetRatio:image];

                                       }
                                   }];

Kindly let me know if did any mistake, or any suggestions.

Update 1: Tried to download the image using post man. Kindly check the image. The same image URL is working on SDWebImage v3.5.4 after i upgraded to SDWebImage v4.4.5, it is not lodging the image.

Is there any configurations am i missing? Installed pod 'SDWebImage/WebP' also, added SD_WEBP=1 in Build settings -> Preprocessor macros.

Error: Error Domain=SDWebImageErrorDomain Code=0 "Downloaded image has 0 pixels" UserInfo={NSLocalizedDescription=Downloaded image has 0 pixels}

from Download image using SDWebImage, error -999

why autosize collectoinviewcell is not working

As far as I am aware if you set estimatedItemSize of collectoinvewlayout to non-zero the self-sizing will start but its not working for me.

You can obtain the working copy here if you want to play around

from why autosize collectoinviewcell is not working

Typescript transpile es6 .js dependency to es5

I have a hypothetical Typescript file in my project (simplified example).

Utils.ts:

import * as HelperFromNodeModules from 'helper-from-node-modules';

class Utils {
  static foo() {
    return HelperFromNodeModules.parse(...);
  }
}

Importing helper-from-node-modules consists of a Javascript file.

helper-from-node-modules.js:

const dep = require('foo');
function parse(...) {
   return bar.map((e) => {...});
}

And from @types/helper-from-node-modules index.d.ts:

export function parse(...);

The tsconfig.json among other things contains the following:

{
  ...
  "target": "es5",
  "lib": ["es2015.collection","es6", "dom"],
  "sourceMap": true,
  "allowJs": true,
  ...
}

So my problem is the Typescript compiler's output file is a giant concatenation of my compiled source code plus all of the decencies. Since helper-from-node-modules was always a .js file, the compiler seems to just append its contents to the output file. So, despite "target": "es5" the output file still contains es6 artifacts like const and (e) => {...}, resulting in errors with things later that expect strictly es5 javascript.

Is there is a way to tell the Typescript compiler/transpiler to output es5 on the javascript dependencies as well?

Context if you care:

I made the horrible mistake of using react-create-app-typescript and react-scripts-ts as the boilerplate for my React app. The webpack stack built in is very opinionated on where source code should come from and that the compiled source must be es5. The minifier/uglifier packaged will crash if attempting to minify any es6 artifacts. I know I can run npm run-script eject and modify the various config scripts but I am trying to avoid that mess. I would love to just get the source to compile to es6 and not mess with their webpack stack.

from Typescript transpile es6 .js dependency to es5

NativeScript can only run in Xcode version 6.0 or greater

I have created new project based on this docs: https://nativescript-vue.org/en/docs/getting-started/quick-start/

When I ran tns run ios --bundle I got this error: NativeScript can only run in Xcode version 6.0 or greater

But I have much higher version: Xcode: 10.1 on MacOS High Sierra 10.13.6

When I ran tns doctor I get: No issues were detected.

Where could be the issue?

from NativeScript can only run in Xcode version 6.0 or greater

Canvas clipOutRect compatibility in AndroidX

I recently came across the deprecation of clipRect(Rect,Region.Op), which I would like to use with DIFFERENCE. This was replaced with clipOutRect(Rect) and thus I implemented:

@Suppress("DEPRECATION")
fun clipOutRect(canvas: Canvas, rect: Rect) =
    if (SDK_INT >= O) canvas.clipOutRect(rect)
    else canvas.clipRect(rect, DIFFERENCE)

Now this looks like it could be a compatibility method in AndroidX, but for some reason I was not able to figure out, where I could find it exactly.

Is there a class already providing a compatibility method for clipOutRect(Rect)?

from Canvas clipOutRect compatibility in AndroidX

Originate a call with text to speech message

I use the Asterisk-Manager package for NodeJs

https://www.npmjs.com/package/asterisk-manager

and have a tape announcement as a text which must be translated via text to speech. When I try to call an outgoing phone number how can I setup the text to speech variable and the recipient? An example would be

ami.action({
    'action': 'originate',
    '??? phonenumber ???': '12345',
    '??? text to be spoken ???': 'Hello, this is a tape announcement'
  }, (err, res) => {
    if (err) {
        throw err;
    }

    console.log('everything was fine');
  });

---

Edit:

I know that FreePbx is used for administration. As far as I know there is a TTS module for the Asterisk engine.

I think I could go for this code

const { phoneNumber, announcement } = phoneInfo; // the required data

ami.action({
    channel: `SIP/${phoneNumber}`,
    application: 'SendText',
    data: announcement
}, (err, res) => {
    if (err) {
      throw err;
    }

    console.log(res);
});

and the engine would manage the data property

from Originate a call with text to speech message

Shadow/Flash displaying when dragging image

When user upload image and when he try to drag the image , the image will display flash / shadow along with dragging, but i don't want to display the shadow....

codepen : https://codepen.io/kidsdial/pen/xMNbVz

 $(document).ready(function () {
                // dont have a webserver so im using base64string instead
var maskedImageUrlb ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaAAAAGECAYAAABwC/R5AAAACXBIWXMAAC4jAAAuIwF4pT92AAAF+mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTE5VDE4OjExOjMxKzA1OjMwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTAxLTE5VDE4OjExOjMxKzA1OjMwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wMS0xOVQxODoxMTozMSswNTozMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NDhiN2JiYi1kNDY4LWY5NDctYTdjMy1jYzMzZTQzYjc2ODgiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo0ZTJmZTkyNS01NzIyLTMxNGMtOTU2OC01NjQyNDFhYmVhYjMiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplZDNhMTc5My0yNTY5LTdhNDQtYTNiYi1kN2Y4ZGJkZmRjODkiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmVkM2ExNzkzLTI1NjktN2E0NC1hM2JiLWQ3ZjhkYmRmZGM4OSIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0xOVQxODoxMTozMSswNTozMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NDhiN2JiYi1kNDY4LWY5NDctYTdjMy1jYzMzZTQzYjc2ODgiIHN0RXZ0OndoZW49IjIwMTktMDEtMTlUMTg6MTE6MzErMDU6MzAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz79f9E7AAAfmklEQVR4nO3de5BedZ3n8bddqa5UisqkqMiwTkRkERkMiNwUQbzgBYaLoiKKV3QcdRhlHGQZ1nUpF+94Q1xFRUZRUBEcBAYZQGSQASZExBgQY4xUNmKKyoZUNtvb29Pb7B/fbul0+vL00+ec77m8X1Vd6XS6n+cjdvfn+f3O7/x+T3r88ceRpJItBfaa9Pa08T9XAMuBJcBiYDdg0fj7MxkGxoBRYNv425ZJ7z8C/A9gI7Bp/G1bgf9bVJAnWUCSCrII2B9YCfw5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";


               
                // maskedImage two
                var mask2 = $(".container").mask({
                    maskImageUrl: maskedImageUrlb,
                    onMaskImageCreate: function (img) {
                        // add your style to the img example below
                  img.css({ "position" : "fixed" ,  "left": 173, "top": 1 })
                                 
                                                
                    }
                });
                                
                                

                

                fileupa2.onchange = function () {
                    mask2.loadImage(URL.createObjectURL(fileupa2.files[0]));
                };
                                
                                
            }); // end of document ready

// jq plugin for mask
(function ($) {
    var JQmasks = [];
    $.fn.mask = function (options) {
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            maskImageUrl: undefined,
            imageUrl: undefined,
            scale: 1,
            id: new Date().getUTCMilliseconds().toString(),
            x: 0, // image start position
            y: 0, // image start position
            onMaskImageCreate: function (div) { },
        }, options);

      
        var container = $(this);
        
        let prevX = 0,
            prevY = 0,
            draggable = false,
            img,
            canvas,
            context,
            image,
            timeout,
            initImage = false,
            startX = settings.x,
            startY = settings.y,
            div;

         container.mousePosition = function(event){
           return { x: event.pageX || event.offsetX, y: event.pageY || event.offsetY };
         }
      
        container.selected = function (ev) {
             var pos = container.mousePosition(ev);
              var item =$(".masked-img canvas").filter(function(){
               var offset = $(this).offset()
                var x = pos.x - offset.left;
                var y = pos.y - offset.top;
                 var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
               return d[0] >0
            });
          
            JQmasks.forEach(function(el){
               var id = item.length> 0 ? $(item).attr("id") : "";
               if (el.id ==id )
                 el.item.enable();
                else el.item.disable();
            });
        };
      
        container.enable = function(){
          draggable = true;
          $(canvas).attr("active", "true");
          div.css({ "z-index": 2 });
        }
                          
        container.disable = function(){
             draggable = false;
             $(canvas).attr("active", "false");
             div.css({ "z-index": 1 });
          }

        container.onDragStart = function (evt) {
            container.selected(evt);
            prevX = evt.clientX;
            prevY = evt.clientY;
        };

        container.getImagePosition = function () {
            return { x: settings.x, y: settings.y, scale: settings.scale };
        };

        container.onDragOver = function (evt) {
            if (draggable && $(canvas).attr("active") === "true") {
              var x = settings.x + evt.clientX - prevX;
              var y =  settings.y + evt.clientY - prevY;
                 if (x == settings.x && y == settings.y)
                   return; // position has not changed
                settings.x += evt.clientX - prevX;
                settings.y += evt.clientY - prevY;
                prevX = evt.clientX;
                prevY = evt.clientY;
                container.updateStyle();
            }
        };

        container.updateStyle = function () {
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.beginPath();
                context.globalCompositeOperation = "source-over";
                image = new Image();
                image.setAttribute('crossOrigin', 'anonymous');
                image.src = settings.maskImageUrl;
                image.onload = function () {
                    canvas.width = image.width;
                    canvas.height = image.height;
                    context.drawImage(image, 0, 0, image.width, image.height);
                    div.css({ "width": image.width, "height": image.height });
                };

                img = new Image();
                img.src = settings.imageUrl;
                img.setAttribute('crossOrigin', 'anonymous');
                img.onload = function () {
                    settings.x =settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale )) / 2 : settings.x;
                    settings.y =settings.y == 0 && initImage ? (canvas.height - (img.height * settings.scale )) / 2 : settings.y;
                    context.globalCompositeOperation = 'source-atop';
                    context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
                    initImage = false;
                };
            }, 0);
        };

        // change the draggable image
        container.loadImage = function (imageUrl) {
            if (img)
                img.remove();
            // reset the code.
            settings.y = startY;
            settings.x = startX;
            prevX = prevY = 0;
            settings.imageUrl = imageUrl;
            initImage = true;
            container.updateStyle();
        };

        // change the masked Image
        container.loadMaskImage = function (imageUrl, from) {
            if (div)
                div.remove();
            canvas = document.createElement("canvas");
            context = canvas.getContext('2d');
            canvas.setAttribute("draggable", "true");
            canvas.setAttribute("id", settings.id);
            settings.maskImageUrl = imageUrl;
            div = $("<div/>", {
                "class": "masked-img"
            }).append(canvas);

            div.find("canvas").on('touchstart mousedown', function (event) {
                if (event.handled === false) return;
                event.handled = true;
                container.onDragStart(event);
            });

            div.find("canvas").on('touchend mouseup', function (event) {
                if (event.handled === false) return;
                event.handled = true;
                container.selected(event);
            });

            div.find("canvas").bind("dragover", container.onDragOver);
            container.append(div);
            if (settings.onMaskImageCreate)
                settings.onMaskImageCreate(div);
            container.loadImage(settings.imageUrl);
        };
        container.loadMaskImage(settings.maskImageUrl);
        JQmasks.push({item: container , id: settings.id})
        return container;
    };
}(jQuery));

.container {
    border: 1px solid #DDDDDD;
    display: flex;
    background: red;
        width:612px;
        height:612px;
}

.container canvas {
    display: block;
}

.masked-img {
    overflow: hidden;
    margin-top: 50px;
    position: relative;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>



image 2 
<input id="fileupa2"  type="file" >



<div class="container">

</div>

I don't want to display shadow when dragging....

Please let me know if you have any doubts on this....

Thanks in Advance....

from Shadow/Flash displaying when dragging image