Apologies in advance for the stupid questions I am a novice.
I am creating a demo in framer x and I am trying to create a custom code component that uses framer motion. I tried installing framer motion using node.js ohmyzsh, npm and framer x still outputs "module named
"framer-motion" not found" I tried changing "framer-motion" to "'framer-motion/dist/framer-motion" and I also tried going into the package.json to change the version to 4.1.17 but still no avail.
I use Mojave 12.0.1, react-motion is nowhere to be found inside the contents of app but is stored in node modules folder in users. Is that the problem?
my component file:
`import {
animate,
motion,
useMotionTemplate,
useMotionValue,
useTransform,
} from "framer-motion"
import { Frame, addPropertyControls, ControlType } from "framer"
// Learn more: https://framer.com/api
export function A(props) {`.....
enter image description here
Thank you so much!
Not sure if this is still useful, but I used to work at Framer and this sounds like an outdated client.
What version of Framer are you running? You mention 'framer x', so if you really are on the older Framer X version I'd recommend to update to the latest release (framer.com/desktop). In that version, Motion comes pre-installed and all docs on framer.com/developers should be quite accurate.
Related
I'm using Next.js 10.0.7 and next-images 1.7 and big images take some seconds to appear.
I'm using the components correctly, you can see bellow, but I think that there is a solution to my problem.
<Image
height="600"
width="800"
src={
'https://myImageURL.png'
}
alt="my image"
/>
Some questions:
If I convert all images to .webp images is be showned faster?
Is there a solution to this problem?
I've been having trouble with the same issue, mostly in Slider components. Basically, because the image is off-screen until the Slider moves it into view, there is a delay and it doesn't show for a short time, which looks nasty.
Solution:
Add the sharp package.
The problem comes from the default image processor that NextJS uses. I don't know if this is good for OP, but in my case, I hadn't fully read the docs. There is a tip that states:
The next/image component's default loader uses the 'squoosh' library for image resizing and optimization. This library is quick to install and suitable for a dev server environment. For a production environment, it is strongly recommended that you install the optional sharp library by running
yarn add sharp
in your project directory. If sharp is already installed but can't be resolved you can manually pass the path to it via the NEXT_SHARP_PATH environment variable e.g. NEXT_SHARP_PATH=/tmp/node_modules/sharp
After adding sharp, my images were processed much faster and there is no noticeable delay anymore. I would try adding this before adding priority={true} to every image, as that will impact the site performance.
The problem is that the default behavior of the Image Component is lazy loading. You can change this behavior to eager by either adding the loading prop like this: loading="eager" or by adding priority={true}.
The recommended way is using priority.
About the image format. Webp is smaller than png, so it will load faster.
upgrade your next higher than 11.0.2-canary.20
yarn add sharp
beer
https://github.com/vercel/next.js/issues/23637#issuecomment-885631610
https://nextjs.org/blog/next-11-1#image-optimization
I just started using JavaFX 11, and SwingFXUtils seems to be gone (or renamed?)
I tried to download it manually, but the module-system complained about import sun.awt.image.IntegerComponentRaster;, and I couldn't get it to work.
I need to convert Swing Icon to JavaFX image.
Since Java 9, SwingFXUtils has been moved to the javafx.swing module, under the package javafx.embed.swing.
See JavaFX 9 Javadoc and the new JavaFX 11 Javadoc, hosted at https://openjfx.io.
If you have any issue with your sample, make sure you are adding the proper VM options. See the samples from the getting started guide.
Probably you will need to add something like:
--module-path <path-to>/javafx-sdk-11/lib --add-modules=javafx.controls,javafx.swing
SwingFXUtils is still there if you have correctly added the javafx.swing module to your build path (see answer from José) but importing an internal class like sun.awt.image.IntegerComponentRaster is not allowed anymore.
To convert your icon you can try this:
Icon icon; // Your icon
BufferedImage image = (BufferedImage)((ImageIcon)icon).getImage();
WritableImage writable = SwingFXUtils.toFXImage(image, null);
Whether this works or not depends on how your icon was created but it is worth a try.
I am using Storybook version 3.3.15 on Windows 7 running node version 6.3.1 and npm version 3.10.6.
On running storybook, I see 'No panels Available' message in the bottom of the page where actions panels are rendered. I have imported addon-actions in addons.js: import #storybook/addon-actions/register and the module is also present in node_modules folder. I am not getting any errors regarding this during webpack compliation or in browser console.
How do I make the Action Panel appear?
Note: I cannot update the Node and NPM versions because I am working on a professional level app wherein lots of people are involved and its a very big codebase.
In my case they were simply hidden and in the wrong orientation. Had to use the D and A keyboard shortcuts to make them appear again.
in my case just hitting d worked
For me the whole main menu disappeared at one point. The only thing that helped was running sessionStorage.clear() in the console and then refreshing the page.
First of all, check if you have the addon panel set to show/hide in the dropdown menu at the top left of the Stoybook UI screen, also check the dropdown item called 'change addons orientation' (mine was changed and was bumped off screen because of screen width).
If that doesn't work, try setting the options in the storybook config.js file:
In the Storybook config.js file you can add an options parameter for some default settings, this includes setting the visibility and position of the addons panel.
import { addParameters } from '#storybook/react';
// settings for storybook - show and position addon panel
addParameters({
options: {
// display panel that shows addon configurations
showPanel: true,
// where to show the addon panel --- #type {('bottom'|'right')}
panelPosition: 'bottom',
}
});
In my case I was missing the .storybook/addons.js file. It looks like this became a requirement in a recent version because the actions add-on used to work fine for me initially.
To clarify potential confusion:
As the documentation specifies, you need to have a addons.js file in your hidden .storybook/ directory (most likely at the root of your project) even if all it contains is just this 1 line.
import '#storybook/addon-actions/register';
I Just found out it by trying different keys on my keyboard:
If you press "S" - it switches Sidebar in StoryBook Of
and On! Try it!
My Browser: Chrome, Operating system: Mac OS
In Mac I solved it by pressing fn + s.
I was having this problem; hitting S would shift my components without showing the sidebar, and even after clearing my localStorage and sessionStorage I could barely see the edge of my sidebar.
Then, I realized that I had zoomed in to see my components more closely, and that the sidebar was hiding/showing, but just off-screen.. I just needed to zoom out. 🤦♂️
Sharing here in case anyone makes the same mistake.
I had a similar problem and installing #storybook/addons (in addition to the steps you mentioned) fixed it.
Run:
npm i -D #storybook/addons
I have this application where I display content together with a video file. The video files are either in image/jpeg (MJPG format according to vlc) or video/x-h264 format.
To do this, I use a mediasource combined with a video output element to display the video. This is working perfectly when using h264. However, this is not working at all with the mjpg video files.
But I have no idea how to do this. I have read up on libraries using either ffmpeg or vlc, but I can't seem to find libraries to use in combination with QML elements, only with regular QWidgets.
Here is some (stripped down) relevant code, it is really simple and I would prefer to keep it simple. So ideally I am just looking for a way to get a codec into the project or something like that.
property string videoLocation
FileDialog {
id: videoFileDialog
onAccepted: {
videoLocation = fileUrl
}
}
MediaPlayer {
id: mediaplayer
source: videoLocation
autoPlay: false
}
VideoOutput {
id: videoOutput
source: mediaplayer
}
Maybe relevant:
my system is ubuntu 13.04 and I use qt 5.3.
Thx in advance
EDIT: I have figured out the problem I think: The stream is recorded using gstreamer > 1.0. For some reason it won't play back in 0.10. If I record using the same settings, but with gstreamer 0.10, everything is fine and my application works (though this option is not feasible, I really need to capture using > 1)
Here is the code I am using to capture the stream to a file:
gst-launch-0.10 v4l2src device=/dev/cam1 ! image/jpeg,width=320,height=240,framerate=30/1 ! matroskamux ! filesink location=videotest.mkv
Any suggestions for a setting that is compatible between new and old gstreamer?
On *nix platforms, QtMultimedia uses GStreamer as its backend. On GStreamer's website it appears that JPEG is a supported format (and one would assume that includes motion jpeg.)
Check your package manager to make sure you have all of GStreamer's plugins installed. There's at least three different packages of GStreamer plugins on Ubuntu.
So I fixed it by using an avi container instead of a matroska container. No idea why it works now and not with matroska. I can honestly only think this has to be a bug somewhere.
I am trying to chance the icon of the exe file created native bundling of javafx packaging but it still contains the default icon. Please suggest
primaryStage.getIcons().add(FileUtility.loadImage("icon.png"));
did not help, it only changes the title bar and task bar icon.
The ico file still gets generated and icon of the exe files remains the default one
I also tried to assign an icon in the project properties-> Deployment-> icon but did not help
I believe I have encountered the same issue and the solution is described in the following thread.
As a side note - neither specifying your icon in the build.xml file or via the project's options in the deployment section is going to work thus far, but it seems to be fixed in the upcoming release of 7u10.
I added response here How to set custom icon for javafx native package icon on Windows and thinks it is the same issue you started out with. However you seem to have moved on, but others might find it interesting...
I added src/main/deploy/package/windows/myapp.ico there and it finally worked :)
For you:
Create src/main/deploy/package/windows/ folder
Add icon with name ${project.build.finalName}.ico
Run mvn jfx:build-native
I haven't played with it extensively - just got it to work and wanted to share. So if you want to use icon with different name, I don't know how. Not yet at least. The ... section in the config section seems to be for webstart, so I haven't been using it. Hope you get it to work!
Answered at How to set custom icon for javafx native package icon on Windows