1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

understand and improve canvas-gauges by Mikhus

Discussion in 'JavaScript' started by iago111, Mar 8, 2022.

0
  1. #1
    Hello,

    I was critizied very strongly here by relying on frameworks like vue or react, without
    properly understanding JS.

    AND GUYS YOU ARE RIGHT!!

    But how to gain a deeper knowledge?

    Since I'm still working on clocks gauges etc, I ended up with a library called canvas-gauges
    from Mikhus. I chose this library, because it doesn't break easily and the code has 2600 lines, so this must be understandable with the time!

    First question: Why are JS programmers using functions with names like:
    t,i,r,o,n,a ect.. ?

    Eg.: Then a canvas function looks like this:
    e.quadraticCurveTo(t + r, i + o, t + r - n, i + o)

    So how to access the JS code?
    https://canvas-gauges.com/download/latest/all/gauge.min.js

    Thanks!
     
    iago111, Mar 8, 2022 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    You aren't expected to understand all that code which has been minified and optimised to be low kb, not readable.

    The API docs have all you need to know https://canvas-gauges.com/documentation/api/

    I wouldn't be too sensitive about using frameworks. There are good reasons to use them, and good reasons not to.
     
    sarahk, Mar 8, 2022 IP
  3. iago111

    iago111 Member

    Messages:
    99
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    33
    #3
    You know it's not TRUE, what you are saying is just not true, Did you take a look at the libraries?
    These libraries are incomplete, and the author has stopped working on this project.
    And he also does not respond via email or social media.

    I'm actually DOING my research before I post something here!!!

    And I AM expected to understand the code, because other more COMPLEX code is programmed exactly like this.
     
    iago111, Mar 9, 2022 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #4
    ok, sure, if you can't find the unmodified version of the code you can use tools like https://beautifier.io/ to make it "pretty".

    Personally, if I knew the author was no longer working on the project and that the docs are incomplete I'd probably find another tool that does the same thing. When some dependency gets updated it's possible this code will break and you really will need to wade through.
     
    sarahk, Mar 9, 2022 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    As @sarahk said, you're looking at minified code, meant for deployment, not understanding or changing. If you had dug through the main site a little deeper, you'd have found it has a shithub where you can grab the complete unminified source.

    https://github.com/Mikhus/canvas-gauges

    An ugly mess of so much comments you can't even find the code, spread out over four dozen files "because"... but for the most part the contents of /lib/ is the raw source used to build the minified version.
     
    deathshadow, Mar 9, 2022 IP
    sarahk likes this.
  6. iago111

    iago111 Member

    Messages:
    99
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    33
    #6
    Yes I know, some poeple understand it partly..
    Anyway, if I take a closer look at the classes /lib/, this should reveal the shortcomings of the library, right!? E.g. you can draw s... on the canvas that contain these gauges, because when you change the viewport the drawn objects/images are getting bigger, smaller change their position. It's like crazy!! Even only pressing F12 changes the size and position of these objects.
     
    iago111, Mar 11, 2022 IP
  7. iago111

    iago111 Member

    Messages:
    99
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    33
    #7
    It's the best that I found, I also took a look at gaugeJS, chartJS, google GaugeCharts and some CSS/JS tutorials.
     
    iago111, Mar 12, 2022 IP
  8. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #8
    how do they fall short?
     
    sarahk, Mar 12, 2022 IP
  9. iago111

    iago111 Member

    Messages:
    99
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    33
    #9
    gaugeJS:
    The autor claimes that the gauges are highly configurable, but I don't see that, there are a way less properties for
    the configuration of the gauge object compared to the canvas-gauges. The documentation is just one page, and it's written in CoffeeScript.
    It also doesn't seem to include classes for linear gauges.

    chartJS:
    It's a tool mainly made for charts. You can also draw gauges with this but it's not specifically made for this.
    But it's actually better to draw freely into the canvas, I should reconsider this!
    You have to draw a needle yourself but then can also add other objects on the canvas and this should work!

    Google GaugeCharts:
    minimal possibility to configure these gauges.
    "At the moment there's no way to specify the title of a gauge chart as you can with other Google Charts."
    - quote google dev team -

    CSS/JS tutorials:
    mostly a complete waste of time.
     
    iago111, Mar 16, 2022 IP