Author Topic: Web App SVG/Canvas to mimic AutoCAD addin  (Read 221 times)

0 Members and 1 Guest are viewing this topic.

Jeff H

  • Needs a day job
  • Posts: 6035
Web App SVG/Canvas to mimic AutoCAD addin
« on: June 19, 2019, 11:23:16 PM »
One way they provide power for a large bases or campus is using sectionalizing switches and a loop network so if there is a fault at a feeder they can open switches to remove power and close other tie switches to so power has another path around the faulted feeder. Example of Loop/radial network
I have a little app I wrote using AutoCAD API that we can open and close switches and visually see what areas lose or gain power by closing/opening switches.
It just basically starts at the source and follows the paths(feeders) and branches out through all closed switches.
A couple of years ago one of our biggest client indicated they would like to use its functionality but do not have access to AutoCAD. So I wrote a little ASP.Net app to get an idea of what it would require so they could use it through a browser, and then figured if I just ignore it, it would go away, but has resurfaced.

The short screencast in link below shows the following
  • Using AutoCAD and addin opening/closing a couple switches and the switches/feeders turn grey if they lost power or turn the color of source feeder if a closed path
  • Using Chrome and running the little dinky app I slapped together & opening/closing a couple switches and moving around a couple of the switches which is not required
  • I then switch back to AutoCAD and turn on map in background to show visually what I am trying to accomplish
Screencast
I wrote web app like 2 years ago and used Joint.js I think along with SVG. I do not mess with web apps enough to keep up ever changing technology and need some guidance on how to approach this.

Here is a list of some parameters/requirements to keep in mind
  • The switches are static and we can place them so the user does not need the ability to move switches, add feeders, make connections etc....
  • Would like to mimic what end of video showed with switches laid out on map in general area where they are located.
  • I do not need the functionality of "staying connected" that joint.js provided but in doing so it created a graph and links that I was able traverse to follow feeders, figure which out which switches are open, etc... that I need.
Does anyone have some guidance on what libraries/technology would be good for this type app?
Trying to figure out how to approach just getting switches onto a map and draw feeders between them.
« Last Edit: June 19, 2019, 11:30:18 PM by Jeff H »

kdub

  • Mesozoic relic
  • SuperMod
  • Swamp Rat
  • Posts: 1363
  • class keyThumper<T>:ILazy<T>
Re: Web App SVG/Canvas to mimic AutoCAD addin
« Reply #1 on: June 19, 2019, 11:42:28 PM »

Hi Jeff,
Hurts my head just thinking about it.
.. but thats an issue with my head, not your idea

Be well

significantly off topic:
just noticed the front page in the
AcExtensionLibrary Documentation.chm
... had a little giggle.
called Kerry in my other life

Sometimes the question is more important than the answer.
#ridesober

MickD

  • Gator
  • Posts: 3289
  • (x-in)->[process]->(y-out)
Re: Web App SVG/Canvas to mimic AutoCAD addin
« Reply #2 on: June 20, 2019, 12:44:44 AM »
....
Here is a list of some parameters/requirements to keep in mind
  • The switches are static and we can place them so the user does not need the ability to move switches, add feeders, make connections etc....
  • Would like to mimic what end of video showed with switches laid out on map in general area where they are located.
  • I do not need the functionality of "staying connected" that joint.js provided but in doing so it created a graph and links that I was able traverse to follow feeders, figure which out which switches are open, etc... that I need.
Does anyone have some guidance on what libraries/technology would be good for this type app?
Trying to figure out how to approach just getting switches onto a map and draw feeders between them.

I'd forget about ASP for now, you really only need a static HTML page with a canvas element, later you can add input controls etc and wire them up with AJAX to talk to the server and load your data for different projects (typically JSON files).

I'd look at something this -> https://apps.autodesk.com/ACD/en/Detail/Index?id=7632618919968029469&appLang=en&os=Win32_64
They show an example of a model using three.js which is pretty popular and stable (and free :) ) so I'd imagine you might find example code on how to load a file into the canvas etc. and throw in the background image.

You already have the switching logic down in AutoCAD so you should be right porting it over to js all though you may need to go a bit more low level :)

another alternative that might be feasible is Google maps with your own .kml files but I'm not sure how much you can interact with the graphics to do what you need but it might be worth a look. This way you just send your client a special link to Google maps and it should just work.

That's the hard bit, after that you can just add your canvas and js to any platform such as ASP, PHP, Python whatever to handle other functionality such as login, uploads and other CMS type stuff. Unless you have full access to your server to run Python or your own executable files such as ASP or Golang then a plain cPanel host using PHP with Laravel will get you going quite quickly.
Debugging:
Being the detective in a crime movie where you're also the murderer.

“Someone's sitting in the shade today because someone planted a tree a long time ago.”
- Warren Buffet

Jeff H

  • Needs a day job
  • Posts: 6035
Re: Web App SVG/Canvas to mimic AutoCAD addin
« Reply #3 on: June 20, 2019, 09:54:24 AM »

Hi Jeff,
Hurts my head just thinking about it.
.. but thats an issue with my head, not your idea

Be well

significantly off topic:
just noticed the front page in the
AcExtensionLibrary Documentation.chm
... had a little giggle.
:-D

Thanks Mick,
You were on top of list I was hoping to get a reply from.

MickD

  • Gator
  • Posts: 3289
  • (x-in)->[process]->(y-out)
Re: Web App SVG/Canvas to mimic AutoCAD addin
« Reply #4 on: June 20, 2019, 05:53:26 PM »
No worries Jeff, just holler if you need an ear, this could turn out to be quite a project!
Debugging:
Being the detective in a crime movie where you're also the murderer.

“Someone's sitting in the shade today because someone planted a tree a long time ago.”
- Warren Buffet