Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jul 2016
    Posts
    85
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Developing a project using html Canvas or svg

    Hi, I've just joined the forum.

    I have a concept for a computer service based on schematic diagrams with boxes and arrows representing parties in financial transactions. The technology probably needs to be something like that used for https://www.gliffy.com/ which is a online diagram drawing tool. However I would have output in terms of documents, and links to specific topics relating to what the user has drawn.

    I have previously been developing the concept as a computer program, with vb.net. But it seems that business users aren't willing to download a computer program these days for security concerns so I've been advised it would be better to do this as an Internet service. That's why I've been looking at gliffy. It seems that there are two choices for doing this - html Canvas and svg. I'm not too sure of the benefits of one over the other, but I note that gliffy switched from using a flash app to using html Canvas https://www.gliffy.com/blog/2012/06/...r-performance/ so I'm thinking that I should be using Canvas too.

    So I'm reading up on html Canvas. I think I can pretty much see how it would work. I would have <div> elements on top of the Canvas that the user would be able to enter text into and then I would draw arrows on the Canvas behind between the <div> elements.

    So that's about as far as I've got to. If anyone has any comments on the appropriateness or otherwise of my chosen approach, or even would like to work with me on the project, I'd be pleased to hear from you.

    Thanks

    Rob

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,322
    Thanks
    4
    Thanked 478 Times in 466 Posts
    SVG is a pain in the arse to work with... it's fat, it's bloated, it scales to small sizes poorly, and it generally doesn't tell you a whole lot of anything about the viewport it is displayed in. There's a reason the two companies who had the most to do with it's creation -- Adobe and Microsoft -- left it stillborne fifteen years ago. I still have little clue why the W3C picked it up, dusted it off, injected it with Herbert West's green goo and decided to run with it.

    If it's going to be a scripting controlled program, CANVAS is likely your better choice. I would probably NOT try to overlay DIV over canvas though as that can be tricky, unreliable, and cause slowdowns in rendering. Even though it is more work, you might be better off intercepting the keyboard and drawing that text on the canvas itself.

    PARTICULARLY since a canvas' context/backbuffer is resolution independent of the CANVAS element itself -- and you'd probably want to "overrender" at a larger size and make the whole thing scaleable, since you cannot guarantee what resolution or screen size potential clients will have. That skew in sizings would make the math of keeping the relationships of positioning between your text and the underlying arrows harder to maintain.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  3. #3
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,235
    Thanks
    6
    Thanked 1,348 Times in 1,317 Posts
    Quote Originally Posted by deathshadow View Post
    I still have little clue why the W3C picked it up, dusted it off, injected it with Herbert West's green goo and decided to run with it.
    Got any better idea for a generic format for scalable vector graphics?

  4. #4
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    293
    Thanks
    10
    Thanked 33 Times in 33 Posts
    2 reasons are support and CPU
    ALL modern browsers now support HTML5, they dont all promise to support svg
    processing is done on the GPU not CPU where possible in HTML5 canvas
    <DmncAtrny> I will write on a huge cement block "BY ACCEPTING THIS BRICK THROUGH YOUR WINDOW, YOU ACCEPT IT AS IS AND AGREE TO MY DISCLAIMER OF ALL WARRANTIES, EXPRESS OR IMPLIED, AS WELL AS DISCLAIMERS OF ALL LIABILITY, DIRECT, INDIRECT, CONSEQUENTIAL OR INCIDENTAL, THAT MAY ARISE FROM THE INSTALLATION OF THIS BRICK INTO YOUR BUILDING."
    <DmncAtrny> And then hurl it through the window of a Sony officer
    <DmncAtrny> and run like hell

    Portfolio, Tutorials - http://www.nomanic.biz/

  5. #5
    New Coder
    Join Date
    Jul 2016
    Posts
    85
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by deathshadow View Post
    SVG is a pain in the arse to work with... it's fat, it's bloated, it scales to small sizes poorly, and it generally doesn't tell you a whole lot of anything about the viewport it is displayed in. There's a reason the two companies who had the most to do with it's creation -- Adobe and Microsoft -- left it stillborne fifteen years ago. I still have little clue why the W3C picked it up, dusted it off, injected it with Herbert West's green goo and decided to run with it.

    If it's going to be a scripting controlled program, CANVAS is likely your better choice. I would probably NOT try to overlay DIV over canvas though as that can be tricky, unreliable, and cause slowdowns in rendering. Even though it is more work, you might be better off intercepting the keyboard and drawing that text on the canvas itself.

    PARTICULARLY since a canvas' context/backbuffer is resolution independent of the CANVAS element itself -- and you'd probably want to "overrender" at a larger size and make the whole thing scaleable, since you cannot guarantee what resolution or screen size potential clients will have. That skew in sizings would make the math of keeping the relationships of positioning between your text and the underlying arrows harder to maintain.
    Thanks, that's helpful. I did have a feeling that using html elements in front of the canvas wasn't very elegant. I guess I just use the onkeypress event to intercept key strokes?

  6. #6
    New Coder
    Join Date
    Jul 2016
    Posts
    85
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hmm, wondering how I show a cursor if I'm not using an html element and am just intercepting key strokes. gliffy seems to use an html page within the html page for an item in one of its diagrams if I understand the code correctly - I didn't even know that was possible.

    gliffy code:

    Code:
    <html style="overflow-y: hidden;"><head xmlns="http://www.w3.org/1999/xhtml"><style id="mceDefaultStyles" type="text/css">.mceResizeHandle {position: absolute;border: 1px solid black;background: #FFF;width: 5px;height: 5px;z-index: 10000}.mceResizeHandle:hover {background: #000}img[data-mce-selected] {outline: 1px solid black}img.mceClonedResizable, table.mceClonedResizable {position: absolute;outline: 1px dashed black;opacity: .5;z-index: 10000}
    </style><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link type="text/css" rel="stylesheet" href="https://gliffy.cachefly.net/prod/2afa4262ea2f63e9797ec1c2093312032fb16886/js/plugin/tiny_mce/themes/advanced/skins/default/content.css"><link type="text/css" rel="stylesheet" href="https://gliffy.cachefly.net/prod/2afa4262ea2f63e9797ec1c2093312032fb16886/js/plugin/tiny_mce/gliffy/tinymce.css?1469634898301"><style id="gliffy-font-style">
    
    
    
    </style></head><body id="tinymce" class="mceContentBody  gliffy-fixed-width" onload="window.parent.tinyMCE.get('gliffy-edit-text').onLoad.dispatch();" contenteditable="true" dir="ltr" style="overflow-y: hidden; padding-bottom: 0px;"><p style="text-align: center;"><span style="text-decoration: none; font-size: 12px; font-family: Arial;"><span style="text-decoration: none; line-height: 14px;">text here</span></span></p></body></html>
    Last edited by VIPStephan; Jul 28th, 2016 at 08:02 PM. Reason: added code BB tags

  7. #7
    New Coder
    Join Date
    Jul 2016
    Posts
    85
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Actually I note that gliffy does use div elements over the canvas, so they must have got it to work. Also a p element with the contenteditable attribute to allow the user to enter text in the box.

  8. #8
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,322
    Thanks
    4
    Thanked 478 Times in 466 Posts
    Quote Originally Posted by VIPStephan View Post
    Got any better idea for a generic format for scalable vector graphics?
    Laughably? TTF now that they're adding colour capability to it. Of course if you only need monochrome, from an efficiency standpoint MOST of the font formats kick SVG's backside.

    The ONLY advantage SVG has is full colour support... but it's ugly, slow, and bloated. Three things I'm VERY unforgiving of.

    Quote Originally Posted by Arbu View Post
    Actually I note that gliffy does use div elements over the canvas, so they must have got it to work. Also a p element with the contenteditable attribute to allow the user to enter text in the box.
    They did that by declaring everything in fixed pixels and not allowing for dynamic scaling. That's NOT something I would do since it's a middle finger to accessibility, but it's an increasingly common practice in web crapplets... or just among people who simply don't care if the result is actually useful to users without diving for the zoom. Hence why they have a fixed canvas and scrolling, NOT something I generally do with canvas either... but to be fair I use canvas for slightly different things than they did.

    Though it might explain why at least from what I'm seeing in the demo, it's as slow if not slower than Visio on a 286.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  9. #9
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    293
    Thanks
    10
    Thanked 33 Times in 33 Posts
    This is HTML5 canvas
    you can mouseover it, and press links on it (yes, you just lay transparent divs over the canvas)
    http://www.nomanic.biz/bloomberg/mar...ing_in_the_usa

    It's a pain, but then realistically if you want longevity you are better with HTML5, that can only be improved
    I don't know, but it almost seems SVG is being phased out somehow
    I think it's a bit like flash, nothing wrong with it, but Apple just didn't adopt it
    And that was the end of flash, some people haven't adopted SVG, so it might go down the pan
    HTML5 on the other hand, seems everybody has to conform to it
    <DmncAtrny> I will write on a huge cement block "BY ACCEPTING THIS BRICK THROUGH YOUR WINDOW, YOU ACCEPT IT AS IS AND AGREE TO MY DISCLAIMER OF ALL WARRANTIES, EXPRESS OR IMPLIED, AS WELL AS DISCLAIMERS OF ALL LIABILITY, DIRECT, INDIRECT, CONSEQUENTIAL OR INCIDENTAL, THAT MAY ARISE FROM THE INSTALLATION OF THIS BRICK INTO YOUR BUILDING."
    <DmncAtrny> And then hurl it through the window of a Sony officer
    <DmncAtrny> and run like hell

    Portfolio, Tutorials - http://www.nomanic.biz/

  10. #10
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,235
    Thanks
    6
    Thanked 1,348 Times in 1,317 Posts
    Quote Originally Posted by deathshadow View Post
    TTF now that they're adding colour capability to it.
    You mean TTF as in “TrueType Font”? You’re kidding, right? That’s not a generic all-around vector format. How are you editing TTF files with any application?

    Quote Originally Posted by nomanic View Post
    I don't know, but it almost seems SVG is being phased out somehow
    That’s far from true. And besides, SVG and canvas both serve very different purposes (and by the way: all I see in your linked example is a blank white page) so there is no general “this is better than that”. As the developers’ saying goes: “It depends.”

  11. #11
    New Coder
    Join Date
    Jul 2016
    Posts
    85
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Still not sure how I'd get a cursor without using a div element. Plus I need a dropdown box (I think it's the <select> element in html) which would be very hard for me to just draw on the Canvas.

  12. #12
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,322
    Thanks
    4
    Thanked 478 Times in 466 Posts
    Quote Originally Posted by VIPStephan View Post
    You mean TTF as in “TrueType Font”? You’re kidding, right?
    Not at all, it's a great monochrome vector format that is fully scaleable and easily measured in EM if you design it right.

    Quote Originally Posted by VIPStephan View Post
    That’s not a generic all-around vector format.
    I think the folks behind "font awesome" would beg to differ... It most certainly is a vector format, it's just monochrome only (M$ is workin indexed and bytecode compiled. That's why for a while crApple was using SVG for fonts and dropped it like everyone else who tried to use it for anything large-scale has. As a text XML style format SVG requires a parsing stage, is three to ten times the size to convey the same information as other formats like TTF, OTF, WOFF, etc, etc...

    Quote Originally Posted by VIPStephan View Post
    How are you editing TTF files with any application?
    How exactly do you think fonts are MADE? You go, grab a font editor like FontForge or Hi-Logic's FontCreator (the latter being worth every penny) and you'll quickly find that they work JUST like every other vector image editor -- though they can be a bit more CAD-like than say, Illustrator.

    SVG DOES make a great format for porting BETWEEN editors too... but that's kind of every XML implementation's job when it comes to complex data, it's great for porting data between systems, but inhales upon the proverbial equine of short stature every time you try to use it for anything realtime. See how Apple for a while was trying to use SVG for fonts on mobile, and dropped that just as quick when the realities of a fat, bloated, text format smacked into the wall at 200mph like a second rate Robert Kubica.... Don't worry, he walked away from that -- just like Apple has SVG... they support it, but they won't even use it for their own icons!

    I'd be a lot more open to SVG if it had a bytecode compiled format for distribution use, and if they stopped at a certain resolution on render buffer scaling down to then anisotropic filter and/or smart scale it smaller. Pretty much for any real image SVG falls apart MISERABLY at anything less than 64x64 -- that's why Apple uses PNG for their icons internally, scaling them down with smart sizing getting far better results than SVG did for them.

    In a LOT of cases I've seen people try to use SVG where for the size they were rendering the result looked like ***, and the file was actually bigger than a 2x resolution png or jpg would be... or worse, even if it saves you on file size, the render speed and client-side memory footprint was disastrous; gee you'd think it required floating point math and a rendering backbuffer.

    Yet, WOFF and TTF (and by extension EOT and OTF) lack these woes. The only real drawbacks are that if poorly scaled or positioned in the font file they're hard to ... well, scale and position... and they're monochrome. If you know how to avoid the former and can live with the latter, they're a GREAT alternative to SVG for static images.

    ... as "font awesome" proves. (though I dislike their implementation, I love the concept)

    NOT that TTF would be useful for the OP's usage scenario. Canvas really is the best tool for the job IMHO.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  13. #13
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,322
    Thanks
    4
    Thanked 478 Times in 466 Posts
    Quote Originally Posted by Arbu View Post
    Still not sure how I'd get a cursor without using a div element. Plus I need a dropdown box (I think it's the <select> element in html) which would be very hard for me to just draw on the Canvas.
    You have to manually check your bounding boxes and set it manually. This DOES have the advantage that you can use non-square shapes, though depending on the complexity of said shape you may want to two-step that comparison by doing box-binds first, then accurate binds if it's within the box-binding. Same technique is used in games for collision detection as a outer "collision" box is a easy quick check you can use to short-circuit out before doing the "accurate" collision detection.

    Really the DIV vs. on the canvas thing comes down to how you want to handle your scaling. If you want the engine to do scaling for you, keeping a pixel to pixel relationship to the DIV is not going to work as there is no such relationship. If you use DIV you're stuck using perfect pixel math, and doing all your scaling and positioning math yourself.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  14. #14
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,235
    Thanks
    6
    Thanked 1,348 Times in 1,317 Posts
    Quote Originally Posted by deathshadow View Post
    How exactly do you think fonts are MADE? You go, grab a font editor like FontForge or Hi-Logic's FontCreator (the latter being worth every penny) and you'll quickly find that they work JUST like every other vector image editor -- though they can be a bit more CAD-like than say, Illustrator.
    Yeah, I know (and, in fact, use) icon fonts and know how great they are in what they are doing, and I know that they can be edited in font editors. But that’s the point – and you were even confirming it – that they are not as “all around” as SVG when it comes to support in editors.
    But I guess we’re harping on about principles here. Every technology has its place and purpose. SVG has its strengths and weaknesses as does canvas and TTF (look at a canvas without JavaScript … eh?).

  15. #15
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    293
    Thanks
    10
    Thanked 33 Times in 33 Posts
    yeah, its blank (no idea why), resize the browser window and it all kicks in though
    will have to look at that
    http://www.nomanic.biz/bloomberg/mar...ing_in_the_usa
    <DmncAtrny> I will write on a huge cement block "BY ACCEPTING THIS BRICK THROUGH YOUR WINDOW, YOU ACCEPT IT AS IS AND AGREE TO MY DISCLAIMER OF ALL WARRANTIES, EXPRESS OR IMPLIED, AS WELL AS DISCLAIMERS OF ALL LIABILITY, DIRECT, INDIRECT, CONSEQUENTIAL OR INCIDENTAL, THAT MAY ARISE FROM THE INSTALLATION OF THIS BRICK INTO YOUR BUILDING."
    <DmncAtrny> And then hurl it through the window of a Sony officer
    <DmncAtrny> and run like hell

    Portfolio, Tutorials - http://www.nomanic.biz/


 
Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •