Skip to content

tuanchauict/MonoSketch

Repository files navigation

License Kotlin SASS GitHub release (with filter) Twitter Follow

What is it?

Mono Sketch is a client-side-only web-based sketch tool for drawing ASCII diagrams. You can use the app at app.monosketch.io.

        +10-15V                0,047R                                        
       ●─────────○───────○─░░░░░─○─○─────────○────○─────╮                    
    +  │         │       │       │ │         │    │     │                    
    ─═════─      │       │       │ │         │    │     │                    
    ─═════─    ──┼──     │       │╭┴╮        │    │     │                    
    ─═════─     ─┼─      │       ││ │ 2k2    │    │     │                    
    -  │      470│ +     │       ││ │        │    │     │                    
       │       uF│       ╰──╮    │╰┬╯       ╭┴╮   │     │                    
       └─────────│          │    │ │     1k │ │   │     ▽ LED                
                 │         6│   7│ │8       │ │   │     ┬                    
              ───┴───    ╭──┴────┴─┴─╮      ╰┬╯   │     │                    
               ─═══─     │           │1      │  │ / BC  │                    
                 ─       │           ├───────○──┤/  547 │                    
                GND      │           │       │  │ ▶     │                    
                         │           │      ╭┴╮   │     │                    
               ╭─────────┤           │  220R│ │   ○───┤├┘  IRF9Z34           
               │         │           │      │ │   │   │├─▶                   
               │         │  MC34063  │      ╰┬╯   │   │├─┐ BYV29       -12V6 
               │         │           │       │    │      ○──┤◀─○────○───X OUT
             - │ +       │           │2      ╰────╯      │     │    │        
6000 micro ────┴────     │           ├──○                C│    │   ─── 470   
Farad, 40V ─ ─ ┬ ─ ─     │           │ GND               C│    │   ███  uF   
Capacitor      │         │           │3                  C│    │    │\       
               │         │           ├────────┤├╮        │     │   GND       
               │         ╰─────┬───┬─╯          │       GND    │             
               │              5│  4│            │              │             
               │               │   ╰────────────○──────────────│             
               │               │                               │             
               ╰───────────────●─────/\/\/─────────○────░░░░░──╯             
                                     2k            │         1k0             
                                                  ╭┴╮                        
                                                  │ │5k6   3k3               
                                                  │ │in Serie                
                                                  ╰┬╯                        
                                                   │                         
                                                  GND                        

Features

Supporting features

Draw tools:

  • Rectangle
  • Text
  • Line

Shape formats:

  • Fill
  • Border
  • Line start/end heads
  • Rounded corner

Editing:

  • Infinity scroll, no limitation for 4 directions
  • Autosave
  • Multiple projects
  • Copy / Cut / Paste / Duplicate
  • Move and change shapes' order
  • Dark mode
  • Line snapping: connect a line to a shape

Exporting:

  • Export selected shapes
  • Copy as text (cmd + shift + C or ctrl + shift + C)

Future features

Grouping

Group is added as a kind of shape but until now, there are no features that are applying Group except for rendering. Besides, the shape tool does not work with groups or multiple selected shapes. This project aims to make the tool able to work with Group and also add a Shape tree on the left of the tool.

Paint tool

Currently, Mono Sketch provides only three tools: Rectangle, Text, and Line. One tool that is also used frequently when drawing with ASCII is paint - draw with a specific character. This project also aims to provide richer options of Fill, Border, Line Start/End head

Sharing

Allow opening files from a url, share to gist, etc.

Contributing

This project is fully written with KotlinJS and SASS for CSS. There is no environment setup required except for Java.

To run debug:

./gradlew browserDevelopmentRun --continuous -Dorg.gradle.parallel=false

Or with production configuration

./gradlew browserProductionRun --continuous -Dorg.gradle.parallel=false
  • -Dorg.gradle.parallel=false is a workaround for a bug on KotlinJS build with --continuous.

Run with Python

This is an alternative to browserDevelopmentRun for running the app for development (sometimes, the Gradle does not reload when the code is updated).

Requirements: Pipenv.

pipenv install
pipenv run dev