Code Monkey home page Code Monkey logo

xschem-viewer's Introduction

xschem-viewer

Build and Lint License

Explore and visualize XSchem schematics in your browser.

Online version

To use the online version, simply go to https://xschem-viewer.com/.

You can add the URL of your .sch file to the end of the URL to load it directly, e.g. https://xschem-viewer.com/?file=https://github.com/RTimothyEdwards/sky130_ef_ip__rc_osc_500k/blob/main/xschem/sky130_ef_ip__rc_osc_500k.sch

VS Code Extension

Barak Hoffer maintains a VS Code extension of xschem viewer. You can get it at the VS Code Marketplace.

Local Development

Prerequisites

  • Node.js (v20 or later) and NPM (usually comes with Node.js)

Instructions

  1. Clone the repository
  2. Run npm install to install dependencies
  3. Run npm run dev to start the development server
  4. Open http://localhost:5173 in your browser

Enjoy!

Running the tests

npm test will run the tests once. npm run test:watch will run the tests in watch mode.

Rebuilding the .sch parser

When making changes to the sch file parser, you will need to rebuild the parser by running npm run build:parser. This will generate a new xschem-parser.ts file in the src directory.

License

xschem-viewer is licensed under the Apache License, Version 2.0. See LICENSE for more details.

xschem-viewer's People

Contributors

urish avatar

Stargazers

\o_O/ avatar  avatar Mauricio Montanares avatar Yuji Iwai avatar Shambukari Jayanth avatar 野漫横江 avatar Yuan Wang avatar Curtis Mayberry avatar Dan Fritchman avatar VOONNA  HARSHA VARDHAN  avatar Dror Gluska avatar Masanori Ogino avatar Andreas Olofsson avatar Harald Pretl avatar  avatar Leo Moser avatar

Watchers

matt venn avatar  avatar  avatar

xschem-viewer's Issues

Hierarchical Schematics and Design Libraries

Thanks for the great work!

How do I include schematic and symbol libraries?
Could the web viewer understand the directory hierarchy when providing a schematic from GitHub using the ?file selection in the URL? i.e. Add directories above the schematic to XSCHEM_LIBRARY_PATH for it.

Example: https://xschem-viewer.com/?file=https://github.com/cascode-labs/bandgaps/blob/main/bandgaps/bandgap_sky130_v1/bandgap_1v_v01/bandgap_1v_v01.sch

Problem

You can see in the screenshot below from the web viewer that I am missing the amplifier symbol that is shown in the second screenshot using the desktop executable version of xschem.

Desktop Implementation

In the desktop version I just have to make sure the XSCHEM_LIBRARY_PATH is set in the xschemrc according to how I organize my design library files as explained in the xschem docs.

In order to define this more portably across projects without having seperate xschemrc file for each project, I add the following Tcl code to the end of my xschemrc. This then allows me to define an environment variable using one of the file structures in the xschem docs. In my case option 3 makes the most sense.

# allow a user-specific path add-on (https://github.com/iic-jku/iic-osic-tools/issues/7)
if { [info exists ::env(XSCHEM_USER_LIBRARY_PATH) ] } {
    append XSCHEM_LIBRARY_PATH :$env(XSCHEM_USER_LIBRARY_PATH)
}

A Possible Solution

Could we have the web viewer understand the file structure from github so that it can capture the schematics and symbols up to 2 levels above the provided schematic. This would allow us to include the library from the same repo assuming you folllow a similar library structure.

Here's the library file structure in my example:

image

Issue in the web viewer

Here is the schematic from one of my github projects:
https://xschem-viewer.com/?file=https://github.com/cascode-labs/bandgaps/blob/main/bandgaps/bandgap_sky130_v1/bandgap_1v_v01/bandgap_1v_v01.sch

image

Expected Result

Here is the same schematic in the desktop app:

image

@urish, @StefanSchippers, @barakhoffer

xschem-viewer vscode version

I think it would be cool to do a vscode extension xschem-viewer version, where you can use vscode preview to quickly move and browse schematics.
I can also take part in the development.

Descending into subcircuit replaces full url with just the file name

Example to reproduce:

  1. open https://www.xschem-viewer.com/?file=https://github.com/RTimothyEdwards/sky130_ef_ip__xtal_osc_16M/blob/main/xschem/sky130_ef_ip__xtal_osc_16M.sch
  2. click on the "level_shifter" subcircuit label
  3. url is rewritten to https://www.xschem-viewer.com/?file=level_shifter.sch

Relevant code:
https://github.com/TinyTapeout/xschem-viewer/blob/main/src/index.ts#L90-L92

Suggested fix (untested):
currentPath = new URLSearchParams(window.location.search).get('file') ?? defaultFile;
newPath = (new URL(path, currentPath)).href;

VS Code Extension

A lot of xschem users use vs code as their ide. It would be awesome if we could open a xschem schematic in vscode using a vscode extension.

Do you think xcshem-viewer could serve as the basis of a vscode extension?

load data

if there is data present (or becomes present during an action?) then it would be cool if the viewer loaded the data in the graphs

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.