signdict / website

A sign language dictionary

SignDict.org

A crowdsourced sign language dictionary.

Here we will work on SignDict. A sign language dictionary where registered users can add new signs using their webcam. With the crowdsourcing approach we can create the most accurate and largest German sign language dictionary together.

You want to help? Awesome. Scroll through the issues, open a new one, join our Gitter Community or just send a short notice using the contact form. We are happy about every person who wants to help.

We also offer an API.

Development setup

SignDict uses Elixir and Phoenix. Information on how to install Elixir can be found here.

For the video transcoding it uses redis. On mac, install it via brew install --cask redis, or sudo apt install redis-server for Linux and start it.

As database it uses PostgreSQL.

After you installed everything, the setup is as follows:

Mac instructions:

mix ua_inspector.download
mix deps.get
mix ecto.setup
cd assets/ && yarn install && cd ..
mix phx.server

Linux instructions:

Note: If you run into postgres password authentication errors, check out this blogpost for help.

mix deps.get
mix ecto.setup
sudo apt install npm
sudo npm install -g yarn
cd assets/ && yarn install && cd ..
mix phx.server

Docker instructions:

First, make the PostgreSQL and redis servers point to the docker services. Change hostname: "localhost" to hostname: "db" in config/dev.exs, and add host: "redis" to the :exq section in config/config.exs.

Then run

docker-compose up

to install all dependencies and start the PostgreSQL, redis and web server services (including code reloading). The website is available at http://localhost:4000.

With that you have a running system and a default admin user called [email protected] with the password thepasswordisalie.

Before you contribute code, please make sure to read the CONTRIBUTING.md

In development mode Bamboo will not sent emails. Instead you can see what would have been sent out here: http://localhost:4000/sent_emails

This project is using yarn for javascript dependency management.

You can also use the included Procfile to start redis and the phoenix server at the same time. Install foreman with gem install foreman and execute foreman start to have both started automatically.

How to run the suite

mix test

Deployment

The server is configured using ansible with this playbook and can be updated with:

ansible-playbook ansible/playbook.yml -i ansible/hosts --extra-vars '{"username": "******"}'

The system is currently using bootleg to deploy the app. Simply call bootleg_user=USERNAME mix bootleg.update to deploy it to the production environment.

Importing files manually

You can import a file using a json file with mix importer file.json. The json should have this format.

Funding

This project is government funded by the German Federal Ministry of Education and Research and is part of the 1st batch of the prototype fund.

website's Issues

Add state-logic to video model

Right now the video model only has a field for the state, but no business logic is involved in the traversal between states. This should be the next step.

• Add new initial state: created
• Implement a state machine, maybe use this lib

The movement between the states is linear. From the first state, we can move on to the next state, or to deleted. From the second state, we can move to the third or deleted.

ExampleException in home#example

Test error in Example.com

ExampleException in home#example
Something really bad happened

View on Bugsnag

Stacktrace

app/controllers/home_controller.rb:123 - example
app/controllers/other_controller.rb:12 - broken
lib/important/magic.rb:4 - load_something

View full stacktrace

Add travis

thumbnail on search page should respect the voted video

If a user has rated a video, the search result page should show the thumbnail of that video. The link will open the user rated video and if we don't show the correct video on the thumbnail it is a bit confusing for the user.

Add code of conduct

Add entry page

The entry page should

• play the highest rated video
• shows a list of other videos for the entry and lets you select those
• lets you vote/unvote a video for an entry
• shows you which of the videos for the entries you favorited

Init phoenix application

add contact page

Add "word" Datamodel

We have to discuss how we want to implement "words". See the wiki for a rough outline.

These problems need to be discussed before we do it:

• a language needs to be attached to the word, so we need to create that model, too. What should be in that model?
• Should we link between the german and the english word? if yes, how can we make this editable by users? Currently I think it would be an awesome feature, but too hard to do.

Add hamburger menu

when the screen gets too small, I should add a hamburger menu for the navigation items

Add avatar

A user should have an avatar. Either by uploading a picture or by using gravatar if no user picture was uploaded.

If a picture was uploaded, a user needs to have the possibility to remove that picture again.

This needs #2 to be finished before working on it.

Add credo

And add it to travis

Add twitter card

https://dev.twitter.com/cards/overview

Add coveralls

I want to make sure the code has good test coverage from the start, add this:

https://github.com/parroty/excoveralls

Fix header to represent current page

The header of the html page needs some fixes:

• Add title for current page (entry name, user name, ...)
• Add basic metadata for search

Add accesslint.js to make sure the page has correct accessibility

search for an entry

We need a page where we can select the language and search for a word in that language.

Simple postgres text indexing is enough for now. I have details on how to implement such a thing from previous jobs and can help with this.

Add basic authentication

This should use guardian and have the following feature set:

• login / logout
• save user in session
• register
• forgot password

add sponsor page

i want to have a page where i explain what each sponsor did for the site

add js video player

Currently the video player just uses the browser defaults. We need to add our own player that has:

• a nice fallback to the browser default player if no js is active
• nice themed buttons
• possibility to adjust the play rate to 1/2, 1/4 of the speed
• sends a play event to the server so that we can count if the video was played by the user (only report once per page load, if the video loops, don't post it for every loop)
• Make it possible to mirror the video to make it easier to do them yourself

figure out why the credo checks on travis won't work

I added pronto-credo and from the travis logs I see that it is doing something. But somehow it does not comment the github pull requests?

configure to use ssl only

add imprint

yes, all the legal things

Add Backend UI for Entry, Language Models

...and make sure the video is attached properly to the entry views.

user profile edit

every user should be able to edit her/his profile with name, biography and change password.

the password change should only work if both the password and the confirmation are the same.If no password is filled out in the fields, that just will be ignored.

Add link in "please log in to vote" text

if you are not logged in and visit the entry page, you should see a link in the text that asks for you to log in.

We need a design

Right now this project does not have a design. And design is important
if you want to be successful. So yes, we need your help!

Add basic authorization

We need to have at least three permission levels:

• Admin
• Moderator
• User

Investigate what integration testing framework to use

Read this and figure out what is the best way to implement integration testing and add it to the project

add show entry page

We need a page that shows a word and the attached videos

We need a logo

This is one of the most important things we need right now. The logo
should somehow transport that this project deals with sign language.
With an interesting twist on it. Just a pair of hands is the goto logo
for projects dealing with sign language. I am searching for something
more unique than that.

Add `mix test.watch`

This is nice: https://github.com/lpil/mix-test.watch

Upload videos and make the viewable for the users

Add https://www.jwplayer.com as a video hosting service. We need a nice way
to upload videos from disk to them and generate an embed video html sniplet.

ALTERNATIVE SOLUTION: rrbone might also do this.

Add email confirm step

We need to add a step to verify the mail address.

Import wikisign data

I have a complete copy of the wikisign wiki on my disk, those need to be added to the site

Voting system for videos?

there is no 1 right way to sign a word. There are lots of variants. And because of that I want to make it possible to upload several videos per word. But this makes it hard for learners to know what is the best word to learn.

We could add a voting system to find the most popular version for a word and crowdsource that part, too.

add about page

on the about page we need to explain the concept of the page, how it started and encourage everyone to participate

add text when going to search page without any search word

we need to show a text that you have to enter something if you want to see a result.

Add video data models

See here

add flow type checker

add this: https://flow.org/

Upload videos to archive.org

To archive the videos in case that this project is discontinued, we should upload the videos to archive.org. One option would be their S3-Like infrastructure. The prototype fund has connections to the archive.org team and we should ask them before we do anything.

And if we do this, we need to document this to the users in a faq and in the readme here how to get the videos from there.

Add webpack and babel

To prepare the js work we need to add webpack. That makes it also
easier to add lots of other css related things because lots of people are
using webpack nowadays.

See here for details how to do it.

What license do we want to use?

We need to think about the license before we start working on this.

Possible candidates for me:

• MIT - really straight forward, giving everything away TL&DR
• MPL - Mozillas License. A nicer version of the GPL without the viral aspect of it. TL&DR

What do you think @EinLama ?

Add opengraph data

We need to have opengraph data for the page.

Implement 3 types:

• Generic SignDict OpenGraph with logo and short description
• Entry Page OpenGraph with name and thumbnail of entry
• User Page with avatar and short description of user

URLs for user should have a name in them

Add a slug for user urls .

A url for user should look like this: https://beta.signdict.org/users/1-bodotasche

Deploy to server

We need to figure out the best way for us to deploy to the server and deploy this app to beta.signdict.org .

user edit in the backend

I forgot to add a backend for the user model. That backend should only be viewable by admins. And when I am at it I can write a small backend entry point page that links to the videos and the users part of the backend.

Adding bugsnag

We should add bugsnag using this.

If anyone has an opinion about another bug tracking service that is better, feel free to comment here 👍

EU-Cookie warning

We should not forget to add a cookie warning dialog to the website to comply to eu law.

Find a way to create an easy backend

We need to have a nice backend to edit data. What should we use? Are there tools that help us that are similar to Administrate ?