mbkupfer / dash-gif-component Goto Github PK
View Code? Open in Web Editor NEWA refined approach to add gifs to a dash app
License: MIT License
A refined approach to add gifs to a dash app
License: MIT License
Hi,
I'm using this component for my Django Dash app and I really like the functionality, the thing is I need to call the component in a callback and because it doesn't have the id attribute I couldn't, so I tried modifying your repo but kept having different npm errors, so I followed the cookiecutter dash-component-boilerplate and created the component from scratch and added your code and the id attribute to it, which basically is adding this:
export default class GifPlayer extends Component {
render() {
const {id, alt, gif, still, autoplay} = this.props;
return (
<React.Fragment>
<RSGifPlayer
id={id}
alt={alt}
gif={gif}
still={still}
autoplay={autoplay}
/>
</React.Fragment>
);
}
}
GifPlayer.defaultProps = {
autoplay: false
};
GifPlayer.propTypes = {
/**
* Id for identification in callbacks
*/
id: PropTypes.string.isRequired,
So for testing in my app I built the project and deployed to test.pypi and it worked fine now I can call the component in a callback but the thing is I wanted to ask you if we could update the code and add it to the real index so I can use it in my project with pip install.
I'm asking you this because I'm new to pypi and I think it makes no sense to upload the code that I added as a new package since it only has like 10 line codes of difference.
[Extra]
Now I'm having other issues with my project if you are interested please check:
I really like this dash component!
I appreciate the time it took you to write this code, thanks a bunch and awesome work!
I am a novice programmer by far, and have been digging for a few hours on a way to have a dash call back via a dash_html_components --> html.button --> using the n_clicks as the input send an output to change whether or not your component , the gif, is playing or not.
I imagine this is fairly simple for you since you wrote this, and are obviously an experienced code writer.
If you have the time to add this feature that would be great, as I would like to have the gif play dependent upon other variables in the dash app via a callback, and remove the option for some one to click it to play.
(Side note: I have dug around enough to find out how to make the play button completely transparent, and smaller, as well as removing the cursor when hovering the image, so if you don't know where to click on the image it wont play. Again thanks for any pointers on how to accomplish my objective)
Hope you have a great weekend.
[email protected]
Hi,
I host my dash app in Kubernetes with Docker, the thing is I want to have the gif files stored in a mounted volume because I have many apps that will share the same files. Is it possible to have your component point to another path instead of assets? I cannot change the path of my static files because I have other files in there such as css and js.
I want t deploy the GIF app I created. The app works locally with all the GIFs and Stills placed in the assets folder. However, I don't see any GIFs when the app is deployed to Heroku/GCP.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.