Home
This documentation provides developers and maintainers information about the CRWA's flagging website, including information on: deploying the website, developing the website, using the website's code locally, and using the website's admin panel.
For Website Administrators
Read the admin guide.
Connecting the Widget
The outputs of the model can be exported as an iFrame, which allows the flagging website's live data to be viewed on a statically rendered web page (such as those hosted by Weebly).
To export the model outputs using an iFrame, do the following:
Header
Add the following to the <head>
of the document. In Weebly you can modify the head of the document via Pages > [page] > SEO Settings > Header Code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.min.js" integrity="sha512-ngVIPTfUxNHrVs52hA0CaOVwC3/do2W4jUEJIufgZQicmY27iAJAind8BPtK2LoyIGiAFcOkjO18r5dTUNLFAw==" crossorigin="anonymous"></script>
Body:
Add this where you want the iFrame to be:
<iframe id="flaggingIframe" src="https://crwa-flagging.herokuapp.com/flags" style="width:1px; min-width:100%; height:100%; background-image:url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22margin%3A%20auto%3B%20background%3A%20rgb(255%2C%20255%2C%20255)%20none%20repeat%20scroll%200%25%200%25%3B%20display%3A%20block%3B%20shape-rendering%3A%20auto%3B%22%20width%3D%22200px%22%20height%3D%22200px%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%22%3E%0A%3Cg%20transform%3D%22rotate(0%2050%2050)%22%3E%0A%20%20%3Crect%20x%3D%2247%22%20y%3D%2224%22%20rx%3D%223%22%20ry%3D%226%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22%236492ac%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20values%3D%221%3B0%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20begin%3D%22-0.9166666666666666s%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%0A%20%20%3C%2Frect%3E%0A%3C%2Fg%3E%3Cg%20transform%3D%22rotate(30%2050%2050)%22%3E%0A%20%20%3Crect%20x%3D%2247%22%20y%3D%2224%22%20rx%3D%223%22%20ry%3D%226%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22%236492ac%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20values%3D%221%3B0%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20begin%3D%22-0.8333333333333334s%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%0A%20%20%3C%2Frect%3E%0A%3C%2Fg%3E%3Cg%20transform%3D%22rotate(60%2050%2050)%22%3E%0A%20%20%3Crect%20x%3D%2247%22%20y%3D%2224%22%20rx%3D%223%22%20ry%3D%226%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22%236492ac%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20values%3D%221%3B0%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20begin%3D%22-0.75s%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%0A%20%20%3C%2Frect%3E%0A%3C%2Fg%3E%3Cg%20transform%3D%22rotate(90%2050%2050)%22%3E%0A%20%20%3Crect%20x%3D%2247%22%20y%3D%2224%22%20rx%3D%223%22%20ry%3D%226%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22%236492ac%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20values%3D%221%3B0%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20begin%3D%22-0.6666666666666666s%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%0A%20%20%3C%2Frect%3E%0A%3C%2Fg%3E%3Cg%20transform%3D%22rotate(120%2050%2050)%22%3E%0A%20%20%3Crect%20x%3D%2247%22%20y%3D%2224%22%20rx%3D%223%22%20ry%3D%226%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22%236492ac%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20values%3D%221%3B0%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20begin%3D%22-0.5833333333333334s%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%0A%20%20%3C%2Frect%3E%0A%3C%2Fg%3E%3Cg%20transform%3D%22rotate(150%2050%2050)%22%3E%0A%20%20%3Crect%20x%3D%2247%22%20y%3D%2224%22%20rx%3D%223%22%20ry%3D%226%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22%236492ac%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20values%3D%221%3B0%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20begin%3D%22-0.5s%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%0A%20%20%3C%2Frect%3E%0A%3C%2Fg%3E%3Cg%20transform%3D%22rotate(180%2050%2050)%22%3E%0A%20%20%3Crect%20x%3D%2247%22%20y%3D%2224%22%20rx%3D%223%22%20ry%3D%226%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22%236492ac%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20values%3D%221%3B0%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20begin%3D%22-0.4166666666666667s%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%0A%20%20%3C%2Frect%3E%0A%3C%2Fg%3E%3Cg%20transform%3D%22rotate(210%2050%2050)%22%3E%0A%20%20%3Crect%20x%3D%2247%22%20y%3D%2224%22%20rx%3D%223%22%20ry%3D%226%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22%236492ac%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20values%3D%221%3B0%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20begin%3D%22-0.3333333333333333s%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%0A%20%20%3C%2Frect%3E%0A%3C%2Fg%3E%3Cg%20transform%3D%22rotate(240%2050%2050)%22%3E%0A%20%20%3Crect%20x%3D%2247%22%20y%3D%2224%22%20rx%3D%223%22%20ry%3D%226%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22%236492ac%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20values%3D%221%3B0%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20begin%3D%22-0.25s%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%0A%20%20%3C%2Frect%3E%0A%3C%2Fg%3E%3Cg%20transform%3D%22rotate(270%2050%2050)%22%3E%0A%20%20%3Crect%20x%3D%2247%22%20y%3D%2224%22%20rx%3D%223%22%20ry%3D%226%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22%236492ac%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20values%3D%221%3B0%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20begin%3D%22-0.16666666666666666s%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%0A%20%20%3C%2Frect%3E%0A%3C%2Fg%3E%3Cg%20transform%3D%22rotate(300%2050%2050)%22%3E%0A%20%20%3Crect%20x%3D%2247%22%20y%3D%2224%22%20rx%3D%223%22%20ry%3D%226%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22%236492ac%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20values%3D%221%3B0%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20begin%3D%22-0.08333333333333333s%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%0A%20%20%3C%2Frect%3E%0A%3C%2Fg%3E%3Cg%20transform%3D%22rotate(330%2050%2050)%22%3E%0A%20%20%3Crect%20x%3D%2247%22%20y%3D%2224%22%20rx%3D%223%22%20ry%3D%226%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22%236492ac%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20values%3D%221%3B0%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20begin%3D%220s%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%0A%20%20%3C%2Frect%3E%0A%3C%2Fg%3E%0A%3C!--%20%5Bldio%5D%20generated%20by%20https%3A%2F%2Floading.io%2F%20--%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: center;" frameborder="0"></iframe>
<script>iFrameResize({}, '#flaggingIframe')</script>
For Developers
To locally deploy the website and start coding, follow the setup guide.
Once you have the website setup locally, you now have access to the following:
- Deploy the website to Heroku (guide here)
- Manually run commands and download data through the
flask shell
. - Make changes to the predictive model, including revising its coefficients. (Guide is currently WIP)
- Make other changes to the website.
To Deploy
The website can be one-click deployed to Heroku from the repo.
There will still be some additional configuration you should do after one-click deployment. Click here for more.