@@rsporsche Nothing changed since we published they video. You still need to create your own component to have animated SVG. You can do animated GIF out of the box.
I've been working on an advanced canvas element. Your video and blog have been a really impressive support. But I'm struggling with the build process on a Grafana installation in a LXC container. Is there a workaround? Thanks for support!
Have you checked the Developer Guide from Grafana? github.com/grafana/grafana/blob/main/contribute/developer-guide.md. If you are using Windows, it's tricky. We have no issues compiling Grafana on MacOS or Linux.
@@volkovlabs I tried a bit, but right now I am working on other subjects with Grafana. I have already some ideas, need time to implement. In you video I've understood we will be able to "get" some API endpoints with Grafana in a near future?
Your videos have helped me so much as I've been working on my weather station project. I am lost now though as I am trying to create a custom animated svg that shows wind direction based on input, for example NNE from my data source. Any ideas where I can start?
As we demonstrated to create an animated SVG, you need to add an advanced component, which requires forking Grafana and build it yourself. Depends on your projects, I would suggest to check out the Apache ECharts. There is a popular topic for wind direction in Grafana Forum: community.grafana.com/t/wind-direction-speed-timeline/67168/20 -- Mikhail
Hello, thanks for the great video! I followed the blog post to a T and do not see the pizza oven option in the dropdown (i already enabled advanced elements to see wind turbine etc). I added the source code to the elements folder with the others and updated the registry. Any thoughts? Do i have to compile grafana after the change?
Yes, Grafana needs to be compiled to see the change. We described steps in the blog volkovlabs.io/blog/pizzeria-canvas-20230723/#developing-and-building-a-docker-image
Daria explained it at 1:46. SVG icons can be loaded from external URL or from Grafana's img folder. Depends on the installation files can be copied to the Docker container or local folders.
First of all, great video! Do you just have to change the enable_alpha settting of the [plugins]-section to true and remove the semicolon in the grafana.ini-File to activate the button? Because when I did this nothing has changed and the button hasn't appeared.
That's a great question. I have tried to update `enable_alpha` using environment variable in Docker container and it does not work, when it's supposed to. I can see Alpha panels, which means that settings enabled. I did both just in case. ``` - GF_PANELS_ENABLE_ALPHA=true - GF_PLUGINS_ENABLE_ALPHA=true ``` When I added Pizza Oven element, I looked at the button's code and removed `state: PluginState.alpha` from the element's code and compiled Grafana to test it. ``` export const buttonItem: CanvasElementItem = { id: 'button', name: 'Button', description: 'Button', state: PluginState.alpha, ``` I looked at the Grafana source code, it should be working, but it's not. I can't easily find an issue in the Grafana GitHub repository. It needs additional investigation and submit an issue to Grafana.
I have same thoughts, flowcharting plugins does the same, no need to edit source code to define animations. I like it but no longer maintain. I hope future canvas release will look like flowcharting.
@@volkovlabs In this case a lot of people will not update to G11. For me, flow charting is really powerful. I hope canvas plugin will shortly gives us possibilities similar to flow charting.
@@rafa2343 Looking at the number of downloads flowcharting is widely used. If Canvas can't fully replace it before G11, we can look into updating and supporting it. We will need to find a sponsor for this project.
this plugin is absolutely trash. First when you chaneg screen , all your hardwork of alligning the widget goes into tarsh. Great job here. Second , you cant select multiple data source, so ya very clever design .... Third the animated SVG thinsg are realy not straight forward. Just waait for a better plugin to hit the market
Grafana is constantly improving it, but it’s still lacks mentioned functionality. We see a lot of interest from the community and may create our own Business Flow plugin in near future. There are other community alternatives you can check out.
Animated SVG is not yet easy to incorporate, but there is a way! Let me know if our instructions worked for you!
Is it easy now?
@@rsporsche Nothing changed since we published they video. You still need to create your own component to have animated SVG. You can do animated GIF out of the box.
I've been working on an advanced canvas element. Your video and blog have been a really impressive support. But I'm struggling with the build process on a Grafana installation in a LXC container. Is there a workaround? Thanks for support!
Have you checked the Developer Guide from Grafana? github.com/grafana/grafana/blob/main/contribute/developer-guide.md. If you are using Windows, it's tricky. We have no issues compiling Grafana on MacOS or Linux.
Brillant! Thanks a lot for your video, I mean, as usual: you are great source of inspiration.
We appreciate the feedback! Do you use or plan to use the Canvas panel?
@@volkovlabs I tried a bit, but right now I am working on other subjects with Grafana. I have already some ideas, need time to implement. In you video I've understood we will be able to "get" some API endpoints with Grafana in a near future?
@@renobodyrenobody It's a POST request for now. You can enable it in the configuration.
thank you for video , its very helpful
Glad you learned from it! Are you creating a new advanced elements or using native?
Great!!!!
Looks like you found what you are looking for. Glad it helped.
Your videos have helped me so much as I've been working on my weather station project. I am lost now though as I am trying to create a custom animated svg that shows wind direction based on input, for example NNE from my data source. Any ideas where I can start?
As we demonstrated to create an animated SVG, you need to add an advanced component, which requires forking Grafana and build it yourself. Depends on your projects, I would suggest to check out the Apache ECharts.
There is a popular topic for wind direction in Grafana Forum: community.grafana.com/t/wind-direction-speed-timeline/67168/20
--
Mikhail
How to upload images to managed grafana in azure?!
I don't think it's possible as it's managed containers. You can reference image from external resources.
It is very useful for me , But if datasource is a list , when I have multi elements , how to bind text value from second item ( or others ) ? .
Selected field for the element will show the latest item by default. If you need any other element, use transformations or update query accordingly.
Hello, thanks for the great video! I followed the blog post to a T and do not see the pizza oven option in the dropdown (i already enabled advanced elements to see wind turbine etc). I added the source code to the elements folder with the others and updated the registry. Any thoughts? Do i have to compile grafana after the change?
Yes, Grafana needs to be compiled to see the change. We described steps in the blog volkovlabs.io/blog/pizzeria-canvas-20230723/#developing-and-building-a-docker-image
Great video!! Tks!! .....i dont understand how i can upload a SVG icon =/
Daria explained it at 1:46. SVG icons can be loaded from external URL or from Grafana's img folder. Depends on the installation files can be copied to the Docker container or local folders.
First of all, great video!
Do you just have to change the enable_alpha settting of the [plugins]-section to true and remove the semicolon in the grafana.ini-File to activate the button?
Because when I did this nothing has changed and the button hasn't appeared.
That's a great question. I have tried to update `enable_alpha` using environment variable in Docker container and it does not work, when it's supposed to. I can see Alpha panels, which means that settings enabled. I did both just in case.
```
- GF_PANELS_ENABLE_ALPHA=true
- GF_PLUGINS_ENABLE_ALPHA=true
```
When I added Pizza Oven element, I looked at the button's code and removed `state: PluginState.alpha` from the element's code and compiled Grafana to test it.
```
export const buttonItem: CanvasElementItem = {
id: 'button',
name: 'Button',
description: 'Button',
state: PluginState.alpha,
```
I looked at the Grafana source code, it should be working, but it's not. I can't easily find an issue in the Grafana GitHub repository. It needs additional investigation and submit an issue to Grafana.
Canvas panel for Grafana is very difficult to use.
Please tell us about the process of compiling Grafana to use Canvas panel for Grafana.
The process explained in details in the blog post for this video: volkovlabs.io/blog/pizzeria-canvas-20230723/#developing-and-building-a-docker-image
@@volkovlabs
Thank you for quick response.
how we can use the button of canvas to redirect to the other dashboards?
The latest version of Canvas supports data links. I would use them.
a very informative video, I want to know how you created that SVG image of Oven or Pizza
We use Figma for all our projects. It's really easy to create, group and name elements.
@@volkovlabs thank you for replying, can you please create a video which can help us to create an image like that.
@@harmeeshsingharora6769 We provided screenshot with layers in Figma in the blog post: volkovlabs.io/blog/pizzeria-canvas-20230723/#pizza-oven.
Hi @volkovlabs Could you please provide example for 3d panel creation with @react-three/fiber
There is no Grafana plugin for react-three library as I know of. You can create 3D panels using Apache ECharts or there is a new beta Grafana panel.
Thank you@@volkovlabs
Very good explanation. Canvas gives some predefined icons, server, text, etc. But for me, flowcharting is better. But it is not maintained.
Thank you. I have not used flowcharting and it's Angular plugin, which are end of life in G10.
I have same thoughts, flowcharting plugins does the same, no need to edit source code to define animations. I like it but no longer maintain.
I hope future canvas release will look like flowcharting.
@@henroljeogutierrez1294 I hope so, Canvas journey just started.
@@volkovlabs In this case a lot of people will not update to G11. For me, flow charting is really powerful. I hope canvas plugin will shortly gives us possibilities similar to flow charting.
@@rafa2343 Looking at the number of downloads flowcharting is widely used. If Canvas can't fully replace it before G11, we can look into updating and supporting it.
We will need to find a sponsor for this project.
line editing, snap to grid missing its sad :/
It has a potential. Still some functionality is missing.
agree@@volkovlabs
this plugin is absolutely trash. First when you chaneg screen , all your hardwork of alligning the widget goes into tarsh. Great job here. Second , you cant select multiple data source, so ya very clever design .... Third the animated SVG thinsg are realy not straight forward. Just waait for a better plugin to hit the market
Grafana is constantly improving it, but it’s still lacks mentioned functionality. We see a lot of interest from the community and may create our own Business Flow plugin in near future. There are other community alternatives you can check out.