After installing PyQt5.5.1 together with Qt5.5.1 on my Ubuntu 14.04 successfully, I ran my simple pyqt file using QtQuick and met this error:
libQt5Network.so.5: undefined symbol: _Z24qt_subtract_from_timeoutii
Anyone has run into this before?
Thanks.
Python.py:
# Main Function
if __name__ == '__main__':
# Create main app
myApp = QApplication(sys.argv)
# Create a label and set its properties
appLabel = QQuickView()
appLabel.setSource(QUrl('basic.qml'))
# Show the Label
appLabel.show()
# Execute the Application and Exit
myApp.exec_()
sys.exit()
Basic.qml:
Grid {
id: colorPicker
rows: 2; columns: 3; spacing: 3
Rectangle { color: "white";}
Rectangle { color: "green";}
Rectangle { color: "blue"; }
Rectangle { color: "yellow";}
Rectangle { color: "steelblue";}
Rectangle { color: "black";}
}
The reason is i also installed python-Qt5, which is based on older Qt5 version.
With
find / -name libQt*
I could see some old qt lib residing in /usr/lib folder:
/usr/lib/i386-linux-gnu/libQt5Network.so
/usr/lib/i386-linux-gnu/libQt5Network.so.5
/usr/lib/i386-linux-gnu/libQt5Network.so.5.2
/usr/lib/i386-linux-gnu/libQt5Network.so.5.2.1
/home/tad/Qt5.5.1/gcc/lib/libQt5Network.so.5.5
/home/tad/Qt5.5.1/gcc/lib/libQt5Network.so
/home/tad/Qt5.5.1/gcc/lib/libQt5Network.so.5.5.1
/home/tad/Qt5.5.1/gcc/lib/libQt5Network.so.5
/home/tad/Qt5.5.1/Tools/QtCreator/lib/qtcreator/libQt5Network.so.5
/home/tad/Qt5.5.1/Tools/QtCreator/lib/qtcreator/libQt5Network.so.5.5.1
/home/tad/Qt5.5.1/Tools/QtCreator/lib/qtcreator/libQt5Network.so.5
The problem maybe inconsistent qt libs, so I remove all qt libs in /usr/lib and replace them with the ones in my home folder. It worked!However this is not recommended since some built-in Ubuntu components may use libQt* in /usr/lib folders. So, just remove python-qt5 and reinstall pyqt5 all over again!
By the way, for the error relating to Sip API version, we just have to run to remove all sip-related packages then reinstall sip again:
dpkg -l | grep sip
then
sudo apt-get purge python3-sip python3-sip-dev
Related
I have a Vue 2 app that uses Webpack, and I am trying to use in it the node module PSD.js, which in itself utilizes CoffeeScript as part of it's dependencies. When I try to compile i get the error:
Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type,
referring to the the file ./node_modules/coffee-script/lib/coffee-script/register.js that PSD.js installed as part of it's dependencies when I did npm install psd.
Any ideas on how to make this work?
I understand I need to tell the Vue app how to handle .coffee files with a loader, but I have tried installing coffee-loader, coffee, set the vue.config.js to:
module.exports = {
publicPath: "./",
configureWebpack: {
target: "node-webkit",
node: false,
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
yet still nothing works, I get the same error. I feel it is because I am not using CoffeeScript directly but rather a node module that I AM using, psd.js, is the one using it. That is why I cannot set lang="coffee" in the script tag attribute of my Vue module (I am using vanilla JS to run everything).
thnx in advance
ADDING MORE INFO:
I use a boilerplate framework to setup my app, and it initialises the vue/webpack app for me indirectly.
To reproduce, and even though this system is for Adobe plugins, you do not need the Adobe host app to see the issue, do:
npm install -g bombino
Then in a folder of your choosing run:
bombino
and fill in these params when asked:
? Name of panel? Hello World
? Use your custom templates or bombino defaults? Bombino
What tooling preset should be used? Vue-CLI
? Which Vue-CLI template should be used? bombino-vue-bare (Absolute minimum)
? Host apps to include: After Effects
? Base CEF Port (between 1024 and 65534) 8666
? Run npm install for you? Yes
then cd into Hello-World and run npm run serve. You should see the app is compiled correctly and is running on some port (8080 or higher if taken).
Now go back to the root folder and install psd.js: npm install psd
then go back into Hello-World and run npm run serve again. This time it will fail to compile with the error I started this question with. Even if you go and install coffee-loader by doing npm install --save coffeescript coffee-loader and change the vue.config.js to be like so:
publicPath: "./",
// Thanks Eric Robinson
configureWebpack: {
target: "node-webkit", // Set the target to node-webkit (https://webpack.js.org/configuration/target/)
node: false, // Don't set certain Node globals/modules to empty objects (https://webpack.js.org/configuration/node/),
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
or if you do vue use coffee - all of these result in the same error: the compiler/packager doesn't know how to handle the .coffee file (used as a dependency by psd.js).
Thnx again to anyone who has info
I am unable to add the tailwindcss library to my KotlinJS project. I tried multiple things.
I have multiple dependencies defined in my build.gradle.kts
implementation(npm("postcss", "latest"))
implementation(npm("postcss-loader", "latest"))
implementation(npm("tailwindcss", "1.8.10"))
I tried creating a tailwindcss.js in my webpack.config.d with this content
config.module.rules.push({
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'tailwindcss'
],
],
},
},
}
]
}
);
But that doesn't do anything. I also tried modifying this with multiple options, but I was never able to get tailwindcss to compile. I also tried disabling and enabling the KotlinJS CSS support in build.gradle.kts
I can't find any info on how to add postcss to KotlinJS project.
Thank you for any help.
A basic integration can be achieved with the node-gradle plugin.
In your build.gradle.kts:
plugins {
id("com.github.node-gradle.node") version "3.0.0-rc2"
}
Also in build.gradle.kts define a task called "tailwindcss" that calls the tailwind CLI via npx. For example:
val tailwindCss = tasks.register<com.github.gradle.node.npm.task.NpxTask>("tailwindcss") {
// Output CSS location
val generatedFile = "build/resources/main/static/css/tailwind-generated.css"
// Location of the tailwind config file
val tailwindConfig = "css/tailwind.css"
command.set("tailwind")
args.set(listOf("build", tailwindConfig, "-o", generatedFile))
dependsOn(tasks.npmInstall)
// The location of the source files which Tailwind scans when running ```purgecss```
inputs.dir("src/main/kotlin/path/to/your/presentation/files")
inputs.file(tailwindConfig)
outputs.file(generatedFile)
}
Finally, in build.gradle.kts bind the task to your processResources step, so that it runs automatically. Note you may want to refine this later, because running tailwind every time the processResources step is invoked will slow down your dev cycle.
tasks.processResources {
dependsOn(tailwindCss)
}
Now we need a minimal package.json in the root of your project. For example:
{
"name": "MyProject",
"devDependencies": {
"tailwindcss": "^1.7.0"
}
}
Finally, we configure our tailwind config in the location defined by our NpxTask, in the example ```css/tailwind.css"
#tailwind base;
#tailwind components;
#tailwind utilities;
So now after the processResource step is run, gradle will invoke the Tailwind npx task, consume your source and write the CSS to the location you specified.
The accepted answer seems to not work anymore. Also, using the Node Gradle plugin is sub-optimal (KotlinJS already maintains its own package.json and yarn installation).
I managed to get Tailwind to work with KotlinJS thanks for this repository (GitHub) with a few small updates that you can find here (GitLab).
The linked I posted is the answer, the whole repository. It is not just a part of it
If you instead want me to copy/paste the whole repository instead here you're
= Kotlin/JS + Tailwind CSS =
This is a small sample repository to show the idiomatic way of
configuring these two systems together.
== Running it ==
. Run `./gradlew run`.
. Open `http://localhost:8080/` in your browser.
. 🎉 Notice we're using Tailwind CSS classes successfully.
== How To ==
Steps taken to make this work:
=== Dependencies ===
Add the following dependencies to your JS target (`jsMain` dependencies) in your Gradle file:
[source,kotlin]
----
implementation("org.jetbrains:kotlin-extensions:1.0.1-pre.148-kotlin-1.4.21")
implementation(npm("postcss", "8.2.6"))
implementation(npm("postcss-loader", "4.2.0")) // 5.0.0 seems not to work
implementation(npm("autoprefixer", "10.2.4"))
implementation(npm("tailwindcss", "2.0.3"))
----
* `kotlin-extensions` is necessary to get the JavaScript link:https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-extensions/src/main/kotlin/kotlinext/js/CommonJS.kt#L20[`require`] function.
** Make sure the version number matches your version of the Kotlin multiplatform plugin at the top of your Gradle file.
** Kotlin Multiplatform 1.4.30 gave me `No descriptor found for library` errors. Try 1.4.21.
** Find the latest versions link:https://bintray.com/kotlin/kotlin-js-wrappers/kotlin-extensions[here].
* `postcss` and `autoprefixer` are link:https://tailwindcss.com/docs/installation#install-tailwind-via- npm[dependencies] as mentioned in the Tailwind CSS docs.
* `postcss-loader` is required because Kotlin/JS is built on top of Webpack.
** Note that while 5.0.0 is out, using it gave me build errors. The latest 4.x seems to work.
* `tailwindcss` is obviously what we're here for.
=== Add Tailwind as a PostCSS plugin ===
Just do link:https://tailwindcss.com/docs/installation#add-tailwind-as-a-post-css-plugin[this step].
If unsure, create this file in your project root:
[source,javascript]
----
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
----
=== Create your configuration file (optional) ===
link:https://tailwindcss.com/docs/installation#create-your-configuration-file[Official documentation].
Creating the `tailwind.config.js` file is a little tricky because simply `npx` won't work, as we haven't installed any
`node_modules`. Fortunately, Kotlin/JS has already done this for us.
Run the following:
[source,shell]
----
$ ./gradlew kotlinNpmInstall
$ ( cd build/js/ && npx tailwindcss init && mv tailwind.config.js ../../ )
----
This generates `tailwind.config.js` in the `build/js/` directory and then moves it up two directories to the project
root. Kotlin/JS generates the node modules into build/js/node_modules when the kotlinNpmInstall task runs.
This assumes your JavaScript module is `js`. If it's not, you'll need to change the `cd build/js/` part. If you're not
sure where your node_modules directory is, run find . -maxdepth 3 -name node_modules.
You should now have all your dependencies set up and config files created.
=== Create and Reference a Regular CSS File ===
_If you already have a CSS file that you're loading in your app, you can skip this step._
Create `app.css` in your `jsMain/resources/` directory. Put something obvious in there so you know
when it's loaded:
[source,css]
----
body {
background-color: red;
}
----
This file will get copied into the same folder as your transpiled JavaScript files.
In your JavaScript file (`client.kt` in this package), add:
[source,javascript]
----
kotlinext.js.require("./app.css")
----
to your main method. You can of course import the require method if you prefer.
If you run `./gradlew run`, you should be able to see a red page at `http://localhost:8080/`.
We're almost there, but we have two more steps: tell Webpack to use PostCSS and to finally inject Tailwind CSS.
=== Using PostCSS with Webpack ===
We want to "monkeypatch" the Webpack configuration that Kotlin/JS generates for us. This hook is
documented in the link:https://kotlinlang.org/docs/js-project-setup.html#webpack-bundling[webpack bundling] section. Basically, if we create .js files in webpack.config.d/, they'll be automatically
merged into build/js/packages/projectName/webpack.config.js, which exists after a build and you can go inspect.
The "problem", if you have `cssSupport.enabled = true` in your Gradle file (which you should!), is that this line
generates a webpack rule matching /\.css$/. We can't simply create another rule matching the same files...that
won't work.
So, we need to find the original rule and modify it. Create the following file relative to your project root:
[source,javascript]
----
// in webpack.config.d/postcss-loader.config.js
(() => {
const cssRule = config.module.rules.find(r => "test.css".match(r.test));
if (!cssRule) {
throw new Error("Could not resolve webpack rule matching .css files.");
}
cssRule.use.push({
loader: "postcss-loader",
options: {}
});
})();
----
We use an IIFE so that our new variable doesn't potentially interfere with other unseen variables.
Now PostCSS is working!
With PostCSS configured and the `tailwindcss` npm module in our dependencies, all that's left now
is to use it.
=== Importing Tailwind CSS ===
We're basically smooth sailing from here. Follow the link:https://tailwindcss.com/docs/installation#include-tailwind-in-your-css[Include Tailwind in your CSS] directions.
Just stick the following in your `app.css`:
[source,css]
----
#tailwind base;
#tailwind components;
#tailwind utilities;
----
If you start the server again, it should **Just Work**! It's a bit hard to tell, but if you check the devtools,
you should see the tw classes loading and massive js.js file being loaded (9.20mb!) which contains all of Tailwind CSS.
== Areas for Improvement ==
=== Modifications to app.css ===
Changes made to app.css don't get picked up unless you do a full `./gradlew clean` first, which is painful.
Adding the following line to build.gradle.kts seems to fix this:
[source,kotlin]
----
tasks.withType(KotlinWebpack::class.java).forEach { t ->
t.inputs.files(fileTree("src/jsMain/resources"))
}
----
=== Getting --continuous working ===
Even with the above fix, --continuous doesn't seem to work. 🤷
== Future Topics ==
* link:https://tailwindcss.com/docs/installation#building-for-production[Building for Production]
I compiled and installed QtWebEngine + QML plugins on Raspberry Pi 2 with Yocto recipes using information in this tutorial using Yocto dizzy branch and run the following script:
root#raspberrypi2:~# more chromium.qml
import QtQuick 2.1
import QtQuick.Controls 1.1
import QtWebEngine 0.9
ApplicationWindow {
width: 1280
height: 720
color: "lightgray"
visible: true
WebEngineView {
id: webview
url: "file:///home/root/hello.html"
anchors.fill: parent
}
}
Note that the IMPORT VERSION 0.9, not 1.0
I have tried both url: "file:///home/root/hello.html" and url: "https://duckduckgo.com" but all I am getting is a red screen with the black square mouse pointer.
root#raspberrypi2:~# more hello.html
<html>
<header><title>This is title</title></header>
<body>
Hello world
</body>
</html>
On the console:
root#raspberrypi2:~# /usr/bin/qt5/qmlscene -v -platform eglfs chromium.qml
[0605/163256:WARNING:resource_bundle.cc(280)] locale_file_path.empty()
[0605/163257:WARNING:proxy_service.cc(890)] PAC support disabled because there is no system implementation
[0605/163257:WARNING:resource_bundle.cc(280)] locale_file_path.empty()
PAC support disabled ... seems to be a none issue read here
UPDATE
I have followed this step-by-step tutorial (Poky fido branch) and then added qtwebengine (import QtWebEngine 1.0 this time) and qtwebengine-qmlplugins in my Yocto Image and created again my image with bitbake
When I booted and ran /usr/bin/qt5/qmlscene -v -platform eglfs chromium.qml I could see my HTML page.
I have tested a couple of dozen of websites and not all page show. So their might be a little more to it.
e.g.
http://wikipedia.com shows!!!
http://google.com doesn't show ???
http://https://stackoverflow.com/ shows!!!
http://facebook.com doesn't
Any further pointers are welcome
UPDATE 20160309
root#raspberrypi2:~/app# uname -a
Linux raspberrypi2 4.1.10 #1 SMP PREEMPT Wed Feb 17 16:51:44 CET 2016 armv7l GNU/Linux
root#raspberrypi2:~/app# lsb_release -a
LSB Version: core-4.1-noarch:core-4.1-arm
Distributor ID: poky
Description: Poky (Yocto Project Reference Distro) 2.0.1
Release: 2.0.1
Codename: jethro
QML
root#raspberrypi2:~/app# more chromium.qml
import QtQuick 2.1
import QtQuick.Controls 1.1
import QtWebEngine 1.0
ApplicationWindow {
width: 800
height: 600
color: "lightgray"
visible: true
WebEngineView {
id: webview
//url: "http://raspberrypi.stackexchange.com/" // PASS
//url: "http://google.com" // FAIL
//url: "http://video.webmfiles.org/big-buck-bunny_trailer.webm" // PASS but no Sound
//url: "https://youtube.com/" // FAIL
//url: "https://opentokrtc.com/anybots" // FAIL
//url: "http://speedof.me/" // PASS
url: "http://facebook.com" // FAIL
anchors.fill: parent
}
}
Maybe it is a little late but I tried to build QtWebEngine in Qt 5.6 alpha and it works properly for me on Raspberry Pi 2 for all the URLs you listed. This is a demo. Maybe they fixed something in QtWebEngine, so you can try 5.6-alpha.
Unfortunately, the branch jethro for meta-qt5 the qtwebengine caused many problems.
I was happy to see that in this branch master with chromium 45:
Branch jethro:
QT_MODULE BRANCH CHROMIUM = "40.0.2214-based"
Branch master:
QT_MODULE BRANCH CHROMIUM = "45-based"
I will try to build;)
I'm trying to use the gm module with ExpressJS to resize images on the server. The resize wasn't working as expected so I changed my code to just console.log a value, which I could immediately see was giving me an error. I installed ImageMagick with Homebrew.
CODE:
var gm = require('gm')
...
gm('uploads/4d03e739a7302fc7f68d022339205dee.JPG').filesize(function(err, value){
if (err) {
console.log(err)
} else {
console.log(value)
}
})
FIRST ERROR:
{ [Error: spawn ENOENT] code: 'ENOENT', errno: 'ENOENT', syscall: 'spawn' }
So, I did some Googling and read that I should change
var gm = require('gm')
to
var gm = require('gm').subClass({ imageMagick: true })
Now I'm getting this error, which I can't find anything about:
{ [Error: Command failed: dyld: Library not loaded: /usr/local/lib/liblzma.5.dylib
Referenced from: /usr/local/bin/identify
Reason: image not found
] code: null, signal: 'SIGTRAP' }
I've tried uninstalling ImageMagick, updating Homebrew and reinstalling. I've also tried uninstalling and reinstalling freetype and running brew unlink freetype && brew link freetype in terminal.
Answering my own question...the answer was difficult for me to find so maybe this will help somebody.
Looks like there is a problem with Homebrew's bottled build of ImageMagick.
Uninstalling ImageMagick and reinstalling with the --build-from-source flag did the trick for me.
brew install imagemagick --build-from-source
Source: https://github.com/Homebrew/homebrew/issues/12099
I have used the below (1.7) custom build profile to build my release folder.
var profile = {
basePath: "..",
action: "release",
cssOptimize: "comments",
mini: true,
optimize: "closure",
layerOptimize: "closure",
stripConsole: "all",
selectorEngine: "acme",
packages:[
{
name: "dojo",
location: "./../../dojo"
},
{
name: "dijit",
location: "./../../dijit"
},
{
name: "dojox",
location: "./../../dojox"
}
],
layers: {
"dojo/dojo": {
include: [
"dojo/dojo",
"dijit/form/Button",
"dojox/form/TimeSpinner"
],
customBase: true,
boot: true
}
},
resourceTags: {
amd: function (filename, mid) {
return /\.js$/.test(filename);
}
} };
In my web application, I am using just two components, one is Button from 'dijit' package and another one is TimeSpinner from 'dojox'. So, I have included these two components in to 'dojo/dojo.js' file, it is working as I have expected.
But the release folder contains the folders 'dojo', 'dijit' and 'dojox' with lot of files.
Most of the components are not used in my web application, but their files are present in the release folder. Even though they will not be loaded in to the browser (because of AMD), I don't want to have such files in my release folder.
It is unnecessary to maintain such huge number of files in my subversion.
So, my questions are below:
How to remove '.uncompressed.js' files from the release folder?
How to remove the files, CSS, templates of unused components from the release folder ?
Please help me...
You can add the following lines at the bottom of build.sh
find . -type f -name '*.uncompressed.js' -print0 | xargs -0 rm -rdf
find . -type f -name '*.consoleStripped.js' -print0 | xargs -0 rm -rdf
The dojo build utility is not meant to separate a subset of files and does not have configuration for this.
The builder makes compression, it wraps legacy modules into amd styled declarations and it combines layers in a cached module loading fashion.
This means that once you create the dojo/dojo, customBase (this is highly advanced setting btw, careful with usage) layer - a dependency tree is built. The dependency tree is a list of files which each are compressed and sutured together similar to following;
// file: dojo/dojo.js
declare(
{cache:
{
"moduleDep_1": dojo.cache("moduleDep_1", {}),
"moduleDep_2": dojo.cache("modu...", .. )
}, "dojo/dojo", null, {
dojo/dojo here
});
What if your visitor has a base-dependency which youve left out?
Anyways, the older build utility had a functionality dependencyList which is not present at the 1.7 build utility. This would have 'saved' you :)
If youre 100% certain that the only file which is needed is your layerfile - why not simply upload that single file to your webhotel?