stephaneag / circuits-calculator

WIP POC of a circuit-calculation tool to work with 123DCircuits schematics's SVGs

circuits-calculator

WIP POC of a circuit-calculation tool to work with 123DCircuits schematics's SVGs

##TODOs:

• make the initial move(s) ! ^^
• add "reset" button on top right of header
• add "reset" functionality ( clears both the fields & the symbols' texts )
• add "hide infos" button on top right of header
• add "hide infos" functionality ( toggle the infos pane )
• add "edit json" button on top right of header
• add "edit json" functionality ( edit the circuit's json )
• add dynamic circuit name ( header )
• add dynamic author name ( header )
• add dynamic link(s) ( header )
• dynami[ze|te?] the infos pane ( and DON'T forget to add legends after the unities in the fields section )
• add dynamic loading of stuff from the json
  ( circuit name, author, link(s), notice, infos, formulas, fields, help, calculate(), .. )
• add event listener for symbols texts ( colorize symbol & text + scroll to & focus corresponding field )
• add event listener for fields focus ( colorize corresponding symbol & text )
• add event listener for input focusout ( uncolorize colorized symbol & text )
• add event listener for input 'Enter/Done' ( calculation - ex: if 3 vars on 4, get the 4th text & symbol )
• add event listener for input text change ? ( could be nice to append text as it's typed instead of 'Enter' )
• add circuits pane "add" button
• add circuits pane "add" functionality ( prompts user for an URL where (a) circuit(s) + json(s) can be found )
• allow user to review the .json [ & the SVG ] added ( if added one by one, aka url to a file(name) != a dir )
• display progress when downloading the circuits ( each circuit progrss bar can have 3 splits - svg, json, js)
• add circuits pane circuits listing
• add "config" support ( infos pane on top or bottom, colors override of default colors, .. )
• be able to load color from either user config ( global ) or specific to a particular circuit ( json-based )
• add js bookmark that extract schematic SVG from 123DCircuits & processes it to get a modded .SVG + .json
• add helpers to split value & unity from a string ( the string being a component value like "110Ω" )
• add parser logic to crawl parents/children/siblings from an element which holds a supported "pattern"
• add an example circuit + json files
• add code that gets files from a github repo ( .. )
• add support for said-"patterns" in components ( "#:R1" = Resistor "1" == set a dynamic value for it )
• add support for said-"patterns" in labels ( "#:Label" = "Label: " == append to it dynamically )
• be able to store/restore the last values used for a particular circuit
• animate the apparition of the schematics SVGs ( most generic possible )
• implement linking to other circuits ( aka handle a "circuit:" prefix for links pointing to other circuits )
• make the circuit js object available in window.CC.circuit so that sourced 'calculate()' js helpers can use it
• remember to tell the 123DCircuits team that the image for the label element is not the right one ( opamp :/ .. )

The goal is to be able to easily create a schematic in 123DCircuits, set specific "patterns" for the dynamic parts of it ( read: the ones that 'll be updated by the calculations ) & then "export" it ( generate a modded SVG + a .json file ) for usage in circuits-calculator.
Then, the json can be edited to specify which formula(s) to apply, & some infos about the name of the circuit, links, help [ & maybe an icon ? ^^ ] ( the fields are to be auto-generated from the said "specific patterns" ).
A collection of circuits can be added, just by clicking the 'Add' button on the left pane: it 'll popup a prompt asking for a repo ( url[/path] ) that should host the said SVG & related json. Once the circuit has been added ( or after editing it's json ), the list is refreshed to reflect the changes, and so does the right side view ( displaying the schematic & the fields / infos stuff ).

Depending on how the js plugin used for zooming & panning the SVG works ( this one's not dev in-house .. not YET ? ;p ), it may be also usable on tablets ( my original goal, to be explicit: find a way to mimick the very handy "Adafruit Circuit Playground Circuit Calculators", & be able to use localStorage & web techs to do so* ).

*no need for App store registration, installation done via "add to home screen" in Safari using localStorage means being able to save stuff from remote repos locally a cache file could as well be updated/editable to need no wifi connection while still being able to add/remove stuff easily ( .. )

=> I KNOW THE FORMULA DOESN'T CORRESPOND TO THE ONE ABOVE ! ^^ ==> it's just a quick way to test "AsciiMath" lib to format some stuff in a Mathy way ( .. )

/!\ / Nb: some of the graphics used are property of 123DCircuits & may be removed if told to do so* ( .. ) I'll mail them in few hours as well as others when the POC advances more, to see what can be done & by who :) ** for the "how", I already got a pretty good idea ;P

REMINDER(S): local: Documents/interactiveSchematicSVG/circuitsCalculator_roughPOC.html
hosted: Github preview
Github cdn
TestRun

Early screenshots:

Adding circuits:

see AddingCircuits.md