How to add a progress bar showing the level of a person - discord.js

I've looked everywhere for a tutorial for this but had no luck.
What I'm trying to do is that lets say if a person has 10/100 XP I want it to show like a image progress bar.

You can make a bar for every one XP. You show them based on what they have. There aren't implemented features for progress bars.

Ill answer my 3 year old question as this post still receives views.
I'd advise using node-canvas as it's the best way to generate a buffered image to send.
Create a canvas (follow the tutorial via the README.md)
Set the width to something of your choice (ex. 500px)
Set the height to something of your choice (ex. 20px)
Calculate the percentage of the XP (ex. 10/100 would be .1 or 10%)
Fill the canvas with a height of the canvas, along with a width of the percentage (in decimal) multiplied by the width of your canvas.
Color the canvas that you filled to your choice (Should be prior to filling)
Enjoy your image generated progress bar!

Related

PostGIS clipping raster with the same color band as the orignal raster

I am trying to clip a raster so that the clipped raster would have the same minimum and maximum values for the color band as the original raster.
For example if i clip the raster with this command:
create table clipped AS SELECT
ST_Clip(rast,ST_MakePolygon(ST_GeomFromText ('LINESTRING(424920
7370964,
424920 7371476,425432 7371476,425432 7370964,424920 7370964) ')) ) FROM original;
I get the following result:
So the clipped raster has band minium value as 0 and maxium value as 20. Instead of that, i want it to be exactly same as the 'original' raster: from 0 to 33.
I am new for PostGIS, but i have tried to find an answer for a while to this question but i haven't found anything. I have tried the functions like ST_Reclass but with no success. What is the proper way to do this with PostGIS?
Why is that happening?
The reason that your range changes is because your maximum value (33 in your case) is not contained within the area you clipped. This is not a bad thing, its just a fact. It's not a PostGIS thing, its just a clipping thing.
Can we find a solution?
I'm guessing that the real problem you want solved is that the two rasters look very different in QGIS. That's really easy to fix! I'll show you how with some example data.
Exmaple Data
Here's what we're starting with:
Link to image because I don't have enough rep to embed an image yet, I guess...
Double click on the "clipped" layer to open up the "Layer Properties" window and select the Style tab from the list on the left side of the window
Locate the text window for "Max" and change it to 33 to match your original raster. This picture may help. It's worth noting that you may run into a case where your Minimum is different in the clipped raster as well like it is here. You can adjust that in the same fashion.
Apply your changes and watch them work!

How to interpolate between colors for a polygon in Bing Maps

I have a WPF application with the Bing Maps API. What I have is a polygon rendering on many countries as well as real time statistics being display. I'm using this to keep track of where my server traffic is mainly coming from. The project is coming along nicely, but I hit a small roadblock. What I have are polygons that go from green to red and vice versa if there is a change in the statistics. If someone logs off then it would go into the green, if someone logged on it would go into the red. What I'd like to do is given a set number of users, let's say 20, I can gradually change the colors over a period of a second.
An example is 0 would be green and 20 would be red. So 10 would be yellow. With this, is there a way to gradually change colors?
Thanks in advance
There might be a fancy way of doing what you are looking for in xaml, but I imagine it would be a lot easier to to just have the color of the polygon bound to a property in your viewmodel/code-behind and then update the color whenever necessary.
For color interpolation, there is another SO question on it here.

How do I remove the border of a WPF window in the Design view/tab?

I am trying to remove the border of my WPF window in the design view/tab in Visual Studio. Please don't mistake this as a request to create a border less WPF window. I did that and it is working fine. What bothers me is that even if you have set WindowStyle = None, ResizeMode = NoResize, the design view/tab still shows a border around your window in the preview.
Is there a way to remove said border and have a 1:1 preview of the border less window as in Windows Forms?
Every question I have found in regards to this only asks how to remove the border of the actual application. I would like to remove it in the preview.
Any help would be very much appreciated :)
here is a screenshot of my problem:
This cannot be done as this is just how Visual Studio renders a window in design view (I think the frame is probably there so that you can distinguish when you are editing a Window rather than a UserControl).
Rather than try and find a solution to this I would ask myself if this is something I need to be spending time figuring out - after all you say that your program works correctly when being run. I think your time will be better spent writing code for your program rather than trying to play with the design time environment.
Update: In response to you comment, consider that the window frame will be different on every users machine depending on their operating system version (XP vs. Win7) or the theme the user has installed.
My computer has XP installed so the side borders are a lot thinner than those shown in design time so any content will be smaller (but only my a few pixels - 4 in my case; does your user interface design really depend on 4 pixels?).
When using a technology such as WPF you should not be designing your UI to fit to exact pixel sizes; you should be designing with min / max values or using layout containers that adjust to the size of the window as set by the user. Any regions in your UI (E.G. sidebar and main content) should be expressed as a ratio or percentage of one another; instead of saying "The side bar is 150 pixels wide and the main content area is 350 pixels wide" you should be saying "The side bar takes up a third of the window width and the main content takes two thirds".
Although the question is very old and have already been answered (kind of), I just realized: if you set WindowStyle="None", your undesired border is gone.

MultiScaleImage Zoom Particular Areas

I am trying to create a Deep Zoom based multiscale image that essentially has 2 views. Initially it will display a large map of the world. When the user click the USA the image should then zoom into the USA. Clicking an external button should zoom the image back out. Thats it. I don't want panning or additional zooming.
What I don't understand is how to define a "hit area" around the USA that zooms it in. Can anyone provided links to resources that explain how to do this... I never seem to find exactly what I am after?
Thanks in advance.
I can't remember the code exactly.
But if you generate a project with the source code in Deepzoom composer and then take a look at the source code.
Right down the bottom of the the Deepzoom code is a function for zooming into a LogicalPoint.
Convert the top left point of the image you are zooming into a logical point. Set this as your ViewportOrigin as this will put it in the top left.
http://blogs.msdn.com/jaimer/archive/2008/06/23/working-with-collections-in-deep-zoom.aspx This post here explains the ViewportOrigin quite well. Just remember that everything is related to the Width.
You will also need to set the the ViewportWidth.
When the ViewportWidth = 1 the whole image is displayed so it will be a fraction of the total width of the image. (USA width / WorldMap Width)
Hope this makes sense.

WPF Custom Draw Multiple Progress Bar

In processing a group of items, I wanted to display a unified image of the status of the group, so I essentially made a Grid of a number of progressbars with transparent backgrounds and various colored foregrounds all at the same cell.
I'm running into some transparency artifacts (purple bar is actually purple under the green, and sometimes it draws over the top, etc) and it just seems a bit wasteful. So, I decided to make my own, but now I've got a bit of paralysis on how to do it. Do I use the DrawingContext in FrameworkElement's OnRender, or is there something simpler? Is there a set of general rules when it comes to making your own control?
I pondered switching to a pie chart since those are easy to come by, but its high time I did something not off-the-shelf.
Thanks!
I'm not quite sure how you intend the progressbar to combine different progresses, but if say the furthest along progress is at the bottom of the z-index and the least along progress is at the top, then I'd do something on the lines of this:
1) I would probably create a user control for this new progresbar.
2) It would have a property called NumberOfProgresses, that is tied with an array containing status of said progresses.
3) Each progress would be represented by a Border item (or perhaps something more suitable up the visual tree), because it's a simple wpf control with a background property. The background property would be set to nice a looking progress style and the progress color can be bound in the style to say the border's borderbrush property. Making it easy to set the color of the progress.
4) The user control would have a method UpdateProgress which takes the percentage value and the index of the progress in the array as parameters.
5) As progresses are updated you can either, just calculate the appropriate width (user control actual width * percentage) for the border and play around with the Z index to get it displayed at the top/bottom, or stack the borders horizontaly, set the least along progress as first, then for the rest of the progresses you'd have to substract previous progresses lengths to get the same effect.
This way there would be no transparency induced artifacts and no OnRender()...
Mind you, in WPF there should be no reason to mess with OnRender this and OnRender that, like it was required in WinForms with OnPaint.
Just set up the elements via code to get the look you want, and let WPF do it's rendering ;)
I can imagine one problem with this user control though. You'd have to provide feedback to the user as to which color belongs to which progress. But that would probably take you back to square one, meaning it's better/simpler to just display multiple progressbars.

Resources