Giter Club home page Giter Club logo

boxchareditor's People

Contributors

cybercarnage avatar gkamal avatar gulinss avatar mauritsmeijer avatar ogt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

boxchareditor's Issues

Add Type : Enable single line block char drawing (├, ─, │, └)

Sourced @oDesk for $100 - Job Completed Successfully

Add a type that uses , , , etc chars instead of the regular bar |, dash - and plus + .
Note that in this case we have 11 chars (4 corner chars, 4 T chars and the + |, - .)

List of chars
http://en.wikipedia.org/wiki/Box-drawing_character

┼ ─│
┌ ┐└ ┘
├ ┤┬ ┴

All the code should be included in a new file blocklines.js that implements the update function.

You will extend the drawingengine.js code below...

      if (!model.type || model.type == 'simple') {
        updateFunction = require('./simplelines.js');
      }
      //else if .... other types of chars 
      if (updateFunction) {
        updateFunction(model,s,oldpos,newpos, brush);
      }

to use the new block characters :

      if (!model.type || model.type == 'simple') {
        updateFunction = require('./simplelines.js');
      }
      else if (model.type == 'block') {
        updateFunction = require('./blocklines.js');
      }
      if (updateFunction) {
        updateFunction(model,s,oldpos,newpos, brush);
      }

To simplify things I have put in this issue only single line drawing (introduction of the double line characters in the blocklines.js is part of a separate issue #3 ).
You will also need to add a test file (similar to what exists now test/test1.js for the simple type). You should at least reproduce the existing 8 tests (with the new characters). You may need to add more to maintain the current 100% code coverage by the tests.

When testing the project from the web interface, entering block in the type fieldand then pressing the restart button should switch to the new type. At that point I should be able to "draw" using the arrow keys. Attempting to create a double should have no effect - a single line would appear instead.

Follow the instructions in the README.md for making changes.


Budget : $100
Primary Skill : Nodejs
Required Skills : Nodejs, Javascript

Extend Type : Enable double line block char drawing (═ ║ ╒ ╓....)

I'm offering $60.00 on oDesk for someone to do this task: https://www.odesk.com/jobs/~01f9e0af301ef7c56a

Enhance the block type to allow for the drawing of double lines (in addition to the 11 double line chars we have 16 additional mix (for the corners and Ts)) (Fonts 255X, 256X)

Note that this is not a different type, its an extension of the existing type block,
similarly to the way we extended the simple time to use = for horizontal lines instead of just dashes - (issue #1 ).
This means that when the user presses Shift, then the line drawn between point a and point b should be double. The chars described in Issue #2 for single line drawing are (should be) compatible (connect) with the chars below. Double line would be drawn both in the case of horizontal move as well as in the case of vertical move.

The only files that will be needed to change should be : ./lib/blocklines.js, ./test/test_blocklines.js and ./README.md

Make sure that you extend the tests to maintain 100% code coverage.

═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟
╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬

http://en.wikipedia.org/wiki/Box-drawing_character

Follow the instructions of Issue #2 for any additional information.


Budget : $60
Required Skills : Nodejs, Javascript

Move browserify bundling into npm post install

According to substack https://github.com/substack/ploy#scripts

Before any services are started, npm install . will be run on the deployed repo. 
npm will   handle the preinstall, install, and postinstall hooks. 
postinstall is a good place to put bundle steps like browserify.

I think we should do that and possible take a look at other scripts in the Makefile
and bring them in the in the scripts object of package.json.. possibly completely eliminate the need for a makefile as suggested by https://twitter.com/substack/status/337310410657128448

Provide block (as opposed to row based) copy/paste/cut

I'm offering $60.00 on oDesk for someone to do this task: https://www.odesk.com/jobs/~01307bdb63e2197adf

Today in order to use anything that you draw with the boxchareditor you need to select with the mouse the area and then copy it. The problem with this approach is that the area selected is the corresponding html rows ... while often the area that you want to copy is defined based on a rectange .. similar to drawing editors.
So it would be nice to allow a similar functionality.
Now given that

  1. actual copying into the clipboard is non-obvious
  2. creating anything that provides a wysiwyg interface for the selection process is non-obvious

the simplest implementation for this would be to add a current col, row display so as the user can see the current row and column of the cursor
and then add a
[select area]
from : [column] [row]
to : [column] [row]

which when pressed it will popup a text dialog box with all the enclosed from -> to pasted in it and selected.

[column] and [row] are text input boxes that display in grayed text column and row to explain what the user needs to input (the text disappear on click)


Budget : $60
Skills : node.js javascript

Use a text-area as the editing canvas

Change the drawing logic to use an editable text area instead of <p> elements
The goal here is to allow someone to paste something and draw on top of it or draw and then add labels to boxes etc.

Add code coverage in tests

Cannot get tap to produce coverage information.

Ideally after confirming that all tests pass we should run the test coverage report and we should have a test that confirms that the tests are reaching a specific % of code coverage.

Allow for saving the current drawing

I'm offering $100.00 on oDesk for someone to do this task: https://www.odesk.com/jobs/~010a40f2355ca6dfb2

Allow someone to save the current drawing (model configuration + table)

  • use the public key val service (http://openkeyval.org/)
  • add a save button - which asks for name saves with key boxchareditor/name/table, boxchareditor/name/model
  • maintain the list of names at boxchareditor/list -> jsonified name list + timestamp
  • also email to a configured account the model, table json data every time that someone does this
  • add a list of links (name of saved) designs by time. clicking on the link will reload the saved drawing

Budget : 100
Skills : node.js javascript

Allowing the user to write text

I'm offering $100.00 on oDesk for someone to do this task: https://www.odesk.com/jobs/~0173106a972325957c

Add a Paste Text button

[Paste Text] 
[                           ] 
[                           ] 
[                           ] 

Pressing Paste Text will take the text in the text area and "paste" it in the current cursor position
(what should happen is that the past operation will do replace the corresponding cells of the grid and then will refresh the display giving the "illusion" of an actual paste.
The paste function should probably be added in the grid_utils.js .
The grid_util paste function would take as inputs two-dimentional array a (row,col) position and a target grid on which the "pasting" will be applied to.
In this case the `index.html can do

target_grid = gridutils.paste(gridutils.fromstring(buffer), row , col, target_grid)

From UI perspective, the text area should be expandable.
We should probably right-trim the lines.
If the pasted text extends beyond the end of the grid we shouldn't get an error... the pasted should be appropriately truncated.

We will need to add test to ensure that overwriting text with lines works as expected.


Budget : 100
Skills : node.js javascript

Make type multiple choice

make type multiple choice

Change the model type input to multiple choice

  • simple,
  • block1 (single-double),
  • block2 (thin thick)

Maintain the current "auto generation" of the model editor
Find the fonts that do have the current model type chars (move type top of the model list)

Extend Type : Draw `===` if `Ctrl` is pressed

Sourced @oDesk for $40 - Job Completed Successfully

Enhance the editor by allowing double lines to be drawn if ctrl is pressed '=' in horizontal movement - no change during in vertical movement.

For example someone should be able to draw a table like this

      +====+=============+===================+                                  
      |    |             |                   |                                  
      +----+-------------+-------------------+                                  
      |    |             |                   |                                  
      |    |             |                   |                                  
      |    |             |                   |                                  
      +====+=============+===================+                                  

Note that we still use the + sign when a double horizontal line (===) crosses a vertical line (|)

You will probably need to

  • check for the Ctrl key in the keypressed function (there is already a BRUSHDOUBLE brush constant to use)
  • modify the simplelines.js file to handle the case where there is =.

There aren't any testing functions for now so you will need to test it manually yourself.


Budget : $40
Primary Skill : Javascript
Required Skills : Javascript, jQuery, HTML

Add Type : Enable thin/thick line drawing (╄ ╅ ╆ ╇...)

I'm offering $120.00 on oDesk for someone to do this task: https://www.odesk.com/jobs/~012d414933e03d101e

Add a new type (call it org) that uses the thin/thick characters instead of the single double line block drawing characters.
Note that in this case the default character is the thick. Pressing Ctrl
results in using the thin (thin is described as light in wikipedia, thick is described as heavy in wikipedia)
Also Note that several fonts (like the font used in github issues below do not have compatible fonts for the complete combination. Use the wikipedia font as the "standard".





┌┍┎┏
┐┑┒┓
└┕┖┗
┘┙┚┛
┝┞┟┠┡┢┣
┥ ┦┧┨┩┪┫
┭ ┮ ┯ ┰ ┱ ┲ ┳
┵ ┶ ┷ ┸ ┹ ┺ ┻
┽ ┾ ┿ ╀ ╁ ╂ ╃
╄ ╅ ╆ ╇ ╈ ╉ ╊
╋ ┼

Make sure that you extend the tests to maintain 100% code coverage.
You will need to create a separate test file ./test/test_orglines.js.

You should expect to change primarily the file
./lib/orglines.js. The file ./lib/drawingengine.js should only have a minimal modification to allow expand the type switch.

Also you will need to update the README.md file with at least an example usage of that type.

Follow the instructions of Issues #2, #3 for any additional information.


Question : You are coding a nodejs module. How do you export a single function?
Required Skills : node.js, javascript
Budget : $120

Bugs when switching from block to simple and vice versa

When switching from block to simple and vice versa and apply setting (as opposed to clear grid) things are not working as expected.
It seems for example that you cannot erase block lines while you are in simple mode.
You can't overwrite them either.

We probably should add tests for that mixed mode too.

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.