Code Monkey home page Code Monkey logo

pengen's Introduction

pengen

A Drawing App created for the Mintbean.io hackathon on November 16, 2021

by collectivenectar & moogwol

A screenshot of the deployed app - it has a canvas, a color picker, a start over button, and a slider to adjust brush width

Pengen was developed for web browsers to be a drawing app with a simple set of features:

  • A color picker
  • A brush size slider
  • A 'start over' button to wipe the canvas
  • Save/load function (public, no userauth)

To try the app yourself, go to:

https://collectivenectar.github.io/pengen/

To host your own version of this app, follow the instructions in the readme at:

https://github.com/moogwol/pengen-django-api

This app was designed using the fabric.js and iro.js frameworks, so if you want to develop the app further there are no extra steps.

pengen's People

Contributors

collectivenectar avatar moogwol avatar

Watchers

 avatar  avatar

pengen's Issues

Remove white-space from the landing page directory name

Currently the server won't be able to display the homepage because the directory where it is stored has a space in its name ๐Ÿ˜‚. It should be renamed to to something like 'landing-page' or alternatively all html files could be placed in the root directory.

Save image button

Add a button to enable the user to save their drawing to their computer

UI Redesign - Resizability

Currently the UI lacks flexibility/accessibility, enough to limit functionality when the screen width gets small enough. Add some elements and css to increase UI flexibility so that a user can resize the window and not break the app. It would be great to have the toolbar be more flexible as well.

Page heading

I think we need a simple page heading that says 'Pengen' or something like that

Fix 'save' dialog exit bug

Fix a bug where when the user clicks save and then closes the dialog, the canvas is saved with a title of 'NULL'. The canvas should not save anything if the user exits the dialog without inputting a title.

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.