+
+
+
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml new file mode 100644 index 0000000..70c476a --- /dev/null +++ b/.github/workflows/publish.yml @@ -0,0 +1,38 @@ +# git tag reminder : +# version tag look like : v1.0.0-rc0 +# add a tag locally : git tag tagName +# push it : git push origin tagName +# remove a tag locally : git tag -d tagName +# remove it on remote : git push --delete origin tagName + +name: Deploy +on: + push: + tags: + - v* + +jobs: + deploy_job: + name: Deploy Job + runs-on: ubuntu-18.04 + steps: + - uses: actions/checkout@v1 + - name: build + run: | + mkdir .public + mv * .public/ + mv .public public + rm public/LICENSE.txt public/README.md + - name: SSH setup + env: + DEPLOY_KEY: ${{ secrets.deploy_key }} + #KNOWN_HOSTS: ${{ secrets.known_hosts }} + run: | + mkdir -p ~/.ssh + echo "${DEPLOY_KEY}" > ~/.ssh/my_rsync_key + echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config + echo "IdentityFile ~/.ssh/my_rsync_key" >> ~/.ssh/config + chmod -R 700 ~/.ssh + - name: Rsync deployment + run: | + rsync -az -e ssh --delete public/ gammanu@1000i100.fr:~/lo0p.it diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b770ab9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.idea +.generated* +generated* \ No newline at end of file diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml new file mode 100644 index 0000000..ab05dc9 --- /dev/null +++ b/.gitlab-ci.yml @@ -0,0 +1,43 @@ +stages: + - build + - preview + - prod + +build: + stage: build + image: node:current-alpine + script: + - mkdir .public + - mv * .public/ + - mv .public public + - rm public/LICENSE.txt public/README.md + artifacts: + paths: + - public + expire_in: 1 week + +pages: + stage: preview + script: + - ls public + artifacts: + name: loopy + paths: + - public + +OK_publish: + #when: manual + stage: prod + image: liaohuqiu/rsync + before_script: + - eval $(ssh-agent -s) + - ssh-add <(echo "$SSH_PRIVATE_KEY") + - mkdir -p ~/.ssh + - >- + [[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > + ~/.ssh/config + script: + - rsync -az -e ssh ./public/ gammanu@1000i100.fr:~/lo0p.it + only: + - tags + diff --git a/v1.1/css/balloon.css b/2/css/balloon.css similarity index 99% rename from v1.1/css/balloon.css rename to 2/css/balloon.css index 17d00ed..9283e6c 100755 --- a/v1.1/css/balloon.css +++ b/2/css/balloon.css @@ -1,3 +1,4 @@ +/* from https://kazzkiq.github.io/balloon.css/ */ button[data-balloon] { overflow: visible; } diff --git a/splash/css/cursors/drag.png b/2/css/cursors/drag.png similarity index 100% rename from splash/css/cursors/drag.png rename to 2/css/cursors/drag.png diff --git a/splash/css/cursors/erase.png b/2/css/cursors/erase.png similarity index 100% rename from splash/css/cursors/erase.png rename to 2/css/cursors/erase.png diff --git a/splash/css/cursors/ink.png b/2/css/cursors/ink.png similarity index 100% rename from splash/css/cursors/ink.png rename to 2/css/cursors/ink.png diff --git a/splash/css/cursors/label.png b/2/css/cursors/label.png similarity index 100% rename from splash/css/cursors/label.png rename to 2/css/cursors/label.png diff --git a/splash/css/icons/controls.png b/2/css/icons/controls.png similarity index 100% rename from splash/css/icons/controls.png rename to 2/css/icons/controls.png diff --git a/2/css/icons/controls2.png b/2/css/icons/controls2.png new file mode 100644 index 0000000..1a05b94 Binary files /dev/null and b/2/css/icons/controls2.png differ diff --git a/splash/css/icons/drag.png b/2/css/icons/drag.png similarity index 100% rename from splash/css/icons/drag.png rename to 2/css/icons/drag.png diff --git a/splash/css/icons/erase.png b/2/css/icons/erase.png similarity index 100% rename from splash/css/icons/erase.png rename to 2/css/icons/erase.png diff --git a/favicon.png b/2/css/icons/favicon.png similarity index 100% rename from favicon.png rename to 2/css/icons/favicon.png diff --git a/splash/css/icons/ink.png b/2/css/icons/ink.png similarity index 100% rename from splash/css/icons/ink.png rename to 2/css/icons/ink.png diff --git a/splash/css/icons/label.png b/2/css/icons/label.png similarity index 100% rename from splash/css/icons/label.png rename to 2/css/icons/label.png diff --git a/splash/css/icons/speed_fast.png b/2/css/icons/speed_fast.png similarity index 100% rename from splash/css/icons/speed_fast.png rename to 2/css/icons/speed_fast.png diff --git a/splash/css/icons/speed_slow.png b/2/css/icons/speed_slow.png similarity index 100% rename from splash/css/icons/speed_slow.png rename to 2/css/icons/speed_slow.png diff --git a/v1/css/loopy.css b/2/css/loopy.css similarity index 59% rename from v1/css/loopy.css rename to 2/css/loopy.css index 0f70fa7..920f3c9 100644 --- a/v1/css/loopy.css +++ b/2/css/loopy.css @@ -15,8 +15,7 @@ canvas{ #canvasses{ position:absolute; - top:0; left:0; - width: calc(100% - 300px); + top:0; left:0; right: 300px; height: 100%; } #canvasses[fullscreen=yes]{ @@ -137,8 +136,25 @@ div[big=yes] .play_button_label{ SIDEBAR **********/ +#sidebarSwitch{ + position: absolute; + top:0; right: 300px; + padding: 10px; + padding-top: 8px; + padding-bottom: 12px; + line-height: 30px; + width: 30px; + text-align: center; + vertical-align: middle; + background-color: #eaeaea; + cursor: pointer; +} +#sidebarSwitch:hover{ + background-color: #ccc; +} #sidebar{ position: absolute; + overflow: auto; top:0; right:0; width: 300px; height: 100%; @@ -152,8 +168,11 @@ div[big=yes] .play_button_label{ -ms-user-select: none; user-select: none; } +.globalLoopyFirstItem{margin-top: -20px;} #sidebar > div{ margin: 25px; + margin-right: 15px; + padding-top: 20px; } #sidebar > div > div{ margin-bottom: 20px; @@ -181,16 +200,25 @@ div[big=yes] .play_button_label{ #sidebar[mode=play] .mini_button:hover{ background: #666; } +#sidebar[mode=play] .not_in_play_mode{ + display: none; +} #sidebar a{ color: #777; } #sidebar a:hover{ color: #999; } #sidebar hr{ border: none; border-bottom: 2px solid rgba(150,150,150,0.5); - width: 300px; - position: relative; - left:-25px; - margin: 10px 0; + margin: 30px -25px; + margin-right: -15px; +} +#sidebar .combineWithNext{ + margin: 0; } +#sidebar .combineWithNext+div .component_label, +#sidebar .combineWithNext+div .docLink{ +display: none +} + .component_input{ border: none; @@ -222,18 +250,50 @@ div[big=yes] .play_button_label{ width: 250px; height: 52px; } -.component_slider_graphic{ +.component_slider_graphic, +.component_slider_clickCatcher, +.component_slider_graphic_activeAtLeft, +.component_slider_graphic_activeAtRight, +.component_slider_graphic_activeOption +{ position: absolute; + background-size: cover; + background-repeat: no-repeat; width: 250px; height: 40px; cursor: pointer; } +.component_slider_graphic_activeAtLeft{ left: 0; background-position: left center;} +.component_slider_graphic_activeAtRight{ right: 0; background-position: right center;} .component_slider_pointer{ position: absolute; top: 42px; width: 15px; height: 10px; -} + background-image: url("sliders/slider_pointer_up.png"); + background-size: cover; +} +.combineWithNext .component_slider_graphic, +.combineWithNext .component_slider_graphic_activeOption, +.combineWithNext .component_slider_graphic_activeAtLeft, +.combineWithNext .component_slider_graphic_activeAtRight {top: 12px;} +.combineWithNext .component_slider_pointer{top: 0px; background-image: url("sliders/slider_pointer_down.png");} +.component_slider_clickCatcher{height: 52px} + +#sidebar > .compact{padding-top: 5px;} +#sidebar .compact hr{margin: 5px -25px;} +#sidebar > .compact > div{margin-bottom: 0;} +.compact .component_slider{height: 40px;} +.compact .component_slider_pointer{top: 30px;background-image: url("sliders/slider_high_contrast_pointer_up.png");} +.compact .combineWithNext .component_slider_graphic, +.compact .combineWithNext .component_slider_graphic_activeOption, +.compact .combineWithNext .component_slider_graphic_activeAtLeft, +.compact .combineWithNext .component_slider_graphic_activeAtRight {top: 0;} +.compact .combineWithNext .component_slider_pointer{top: 0; background-image: url("sliders/slider_high_contrast_pointer_down.png");} +.compact .component_slider_clickCatcher{height: 40px} +.compact .component_label{margin-bottom: 0;} +.compact .component_button{font-size: 20px;padding: 2px 10px;} + .component_label{ margin-bottom: 5px; } @@ -255,28 +315,73 @@ div[big=yes] .play_button_label{ } .component_button[header=yes]{ position: absolute; - top:0; left:0; - width: 280px; + top:0; left:0; right: 0; background: #222; - border-radius: 0px; + border-radius: 0; color: #888; } .component_button[header=yes]:hover{ background: #333; } - - +.advanced .simpleOnly, +.simpleOnly.inactive +{ + display: none; +} +.adv, .colorLogic, +.advanced .adv.colorLogic +{ + display: none; +} +.advanced .adv, +.advanced.colorLogicMode .adv.colorLogic +{ + display: block; +} +.adv_disclaimer, .colorLogic_disclaimer { + display: none; + color: #b84; + font-size: 80%; +} +.simple .adv.active, +.colorAestheticMode .adv.colorLogic.active +{ + display: block; + border: 1px dashed #b84; + background-image: linear-gradient(to bottom,#fed 0,#fed 20px,#ddd 20px); + margin: -9px; + padding: 8px; + padding-top: 2px; +} +.colorAestheticMode .adv.colorLogic.active { + border: 1px dashed #b44; + background: #fdd; /*linear-gradient(to bottom,#fdd 0,#fdd 20px,#ddd 20px);*/ +} +.colorLogic_disclaimer {color: #b44;} +.simple .adv.active>.adv_disclaimer, +.colorAestheticMode .adv.colorLogic.active>.colorLogic_disclaimer +{display: block;} /********** MODAL **********/ +.docLink{ + float:right; + font-size: 70%; + text-decoration: none; + cursor: pointer; + padding: 10px 5px; + margin: -10px 0; +} +.docLink:hover{transform: scale(2);} #modal_container{ display: none; position: absolute; width: 100%; height: 100%; + z-index: 1; -webkit-user-select: none; -moz-user-select: none; diff --git a/2/css/sliders/aggregationLatency.png b/2/css/sliders/aggregationLatency.png new file mode 100644 index 0000000..8751460 Binary files /dev/null and b/2/css/sliders/aggregationLatency.png differ diff --git a/2/css/sliders/cameraMode.png b/2/css/sliders/cameraMode.png new file mode 100644 index 0000000..c17878c Binary files /dev/null and b/2/css/sliders/cameraMode.png differ diff --git a/2/css/sliders/colorLogic.png b/2/css/sliders/colorLogic.png new file mode 100644 index 0000000..d674b99 Binary files /dev/null and b/2/css/sliders/colorLogic.png differ diff --git a/2/css/sliders/edgeFilterColor.png b/2/css/sliders/edgeFilterColor.png new file mode 100644 index 0000000..90fda1b Binary files /dev/null and b/2/css/sliders/edgeFilterColor.png differ diff --git a/2/css/sliders/edgeTargetColor.png b/2/css/sliders/edgeTargetColor.png new file mode 100644 index 0000000..36cc65d Binary files /dev/null and b/2/css/sliders/edgeTargetColor.png differ diff --git a/2/css/sliders/explode.png b/2/css/sliders/explode.png new file mode 100644 index 0000000..58ab8a5 Binary files /dev/null and b/2/css/sliders/explode.png differ diff --git a/2/css/sliders/filter.png b/2/css/sliders/filter.png new file mode 100644 index 0000000..af088e6 Binary files /dev/null and b/2/css/sliders/filter.png differ diff --git a/2/css/sliders/foreignColor.png b/2/css/sliders/foreignColor.png new file mode 100644 index 0000000..0bd21a9 Binary files /dev/null and b/2/css/sliders/foreignColor.png differ diff --git a/splash/css/sliders/color.png b/2/css/sliders/hue.png similarity index 100% rename from splash/css/sliders/color.png rename to 2/css/sliders/hue.png diff --git a/splash/css/sliders/initial.png b/2/css/sliders/init.png similarity index 100% rename from splash/css/sliders/initial.png rename to 2/css/sliders/init.png diff --git a/2/css/sliders/loopyMode.png b/2/css/sliders/loopyMode.png new file mode 100644 index 0000000..46029d8 Binary files /dev/null and b/2/css/sliders/loopyMode.png differ diff --git a/2/css/sliders/overflow.png b/2/css/sliders/overflow.png new file mode 100644 index 0000000..59ac7b8 Binary files /dev/null and b/2/css/sliders/overflow.png differ diff --git a/2/css/sliders/overflow_activeAtRight.png b/2/css/sliders/overflow_activeAtRight.png new file mode 100644 index 0000000..8b5bc0f Binary files /dev/null and b/2/css/sliders/overflow_activeAtRight.png differ diff --git a/2/css/sliders/quantitative.png b/2/css/sliders/quantitative.png new file mode 100644 index 0000000..8d679a9 Binary files /dev/null and b/2/css/sliders/quantitative.png differ diff --git a/2/css/sliders/signBehavior.png b/2/css/sliders/signBehavior.png new file mode 100644 index 0000000..b13c4f2 Binary files /dev/null and b/2/css/sliders/signBehavior.png differ diff --git a/2/css/sliders/size.png b/2/css/sliders/size.png new file mode 100644 index 0000000..bc08a72 Binary files /dev/null and b/2/css/sliders/size.png differ diff --git a/2/css/sliders/slider_high_contrast_pointer_down.png b/2/css/sliders/slider_high_contrast_pointer_down.png new file mode 100644 index 0000000..36d1d54 Binary files /dev/null and b/2/css/sliders/slider_high_contrast_pointer_down.png differ diff --git a/2/css/sliders/slider_high_contrast_pointer_up.png b/2/css/sliders/slider_high_contrast_pointer_up.png new file mode 100644 index 0000000..8f2c0dd Binary files /dev/null and b/2/css/sliders/slider_high_contrast_pointer_up.png differ diff --git a/2/css/sliders/slider_pointer_down.png b/2/css/sliders/slider_pointer_down.png new file mode 100644 index 0000000..3915203 Binary files /dev/null and b/2/css/sliders/slider_pointer_down.png differ diff --git a/splash/css/sliders/slider_pointer.png b/2/css/sliders/slider_pointer_up.png similarity index 100% rename from splash/css/sliders/slider_pointer.png rename to 2/css/sliders/slider_pointer_up.png diff --git a/splash/css/sliders/strength.png b/2/css/sliders/strength.png similarity index 100% rename from splash/css/sliders/strength.png rename to 2/css/sliders/strength.png diff --git a/2/css/sliders/textColor.png b/2/css/sliders/textColor.png new file mode 100644 index 0000000..58ddc77 Binary files /dev/null and b/2/css/sliders/textColor.png differ diff --git a/2/css/sliders/transmissionBehavior.png b/2/css/sliders/transmissionBehavior.png new file mode 100644 index 0000000..d131a13 Binary files /dev/null and b/2/css/sliders/transmissionBehavior.png differ diff --git a/2/css/sliders/underflow.png b/2/css/sliders/underflow.png new file mode 100644 index 0000000..d73b4af Binary files /dev/null and b/2/css/sliders/underflow.png differ diff --git a/2/css/sliders/underflow_activeAtLeft.png b/2/css/sliders/underflow_activeAtLeft.png new file mode 100644 index 0000000..2147aa6 Binary files /dev/null and b/2/css/sliders/underflow_activeAtLeft.png differ diff --git a/2/css/sliders/visibility.png b/2/css/sliders/visibility.png new file mode 100644 index 0000000..3f82505 Binary files /dev/null and b/2/css/sliders/visibility.png differ diff --git a/2/index.html b/2/index.html new file mode 100644 index 0000000..25b44d2 --- /dev/null +++ b/2/index.html @@ -0,0 +1,103 @@ + + +
+ + +'+(n?e:N(e,!0))+"\n":""+(n?e:N(e,!0))+""},t.blockquote=function(e){return"\n"+e+"\n"},t.html=function(e){return e},t.heading=function(e,t,n,r){return this.options.headerIds?"
"+e+"
\n"},t.table=function(e,t){return""+e+""},t.br=function(){return this.options.xhtml?""+se(e.message+"",!0)+"";throw e}}return oe.options=oe.setOptions=function(e){return ne(oe.defaults,e),le(oe.defaults),oe},oe.getDefaults=ie,oe.defaults=ae,oe.Parser=te,oe.parser=te.parse,oe.Renderer=X,oe.TextRenderer=Q,oe.Lexer=B,oe.lexer=B.lex,oe.InlineLexer=K,oe.inlineLexer=K.output,oe.Slugger=G,oe.parse=oe}); \ No newline at end of file diff --git a/v1.1/pages/page.css b/2/pages/page.css similarity index 100% rename from v1.1/pages/page.css rename to 2/pages/page.css diff --git a/CHANGELOG.fr.md b/CHANGELOG.fr.md new file mode 100644 index 0000000..fe15719 --- /dev/null +++ b/CHANGELOG.fr.md @@ -0,0 +1,162 @@ +[EN](CHANGELOG.md) | FR + +# Changelog | liste des changements +Tous les changements notables de ce projet seront documenté dans ce fichier. + +Le format est basé sur [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), +et ce projet adhère au [versionnage sémantique](https://semver.org/spec/v2.0.0.html). + +## Feuille de route | développements futurs +- Groupes +- Support Multi-langue +- Écrire les pages de documentations avec exemples +- Pour plus de détails, consultez les [tickets/issues](https://github.com/1000i100/loopy/issues) + +## [Non-publié/Non-Stabilisé] (par [1000i100]) + +### Ajouté + +##### Interface d'édition +- un **mode simple** pour garder LOOPY aussi simple qu'avant (prise en main aisée / apprentissage facile). Le mode simple ne contiens que ce qui était dans la v1 (et v1.1). +- un **mode avancé** pour débrider le potentiel de créativité avec les fonctionnalités de la V2. +- ajout pour chaque fonctionnalité d'un `?` pour accéder à l'aide contextuelle avec exemple d'usage. +- un commutateur entre mode **colorAesthetic** et **colorLogic** pour permettre l'usage des couleurs comme différenciateur de types de signaux et noeuds. +- zoom avec la molette de souris (ou cliqué déplacé avec l'outil main) dans la scène pour naviguer dans les modèles les plus vastes. +- sélectionné le **mode de camera** à utiliser en mode lecture. + +##### Play mode cameras +- **scene cam.** : (resize to scene) the camera scale to show all visible elements. +- **signal cam.** : (follow signals) the camera focus and zoom on signals. Switch to scene camera when there is no signal. +- **free cam.** : (user controllable) user can zoom in/out and drag the scene even in play mode. + +##### Death / Life mechanics +- nodes can now die and reborn (by receiving vital change propagation signal or by explosion threshold settings). +- when a node die, it sends (propagate) a death signal to all arrows allowing it. +- when a dead node receives any signal except reborn, it's dropped. +- when a dead node reborn, it sends (propagate) a reborn/life signal to all arrows allowing it. +- when an alive node receives a reborn signal, it's dropped. +- when a dead node receives a death signal, it's dropped. + +##### Node advanced features +- empty the name field to resize it to a tiny internal-logic node. +- name it "autoplay" to auto send a signal on start in play-mode. +- press del key when name field is empty to remove the node. +- 4 node **sizes** with 4 different **storage capacities** (none, normal, x5 and x100) +- **Overflow threshold** : a node can store signals without forwarding them up to a threshold, and down to another threshold (store signals within a threshold window, forward them outside the window). +- **Aggregation latency** : bypass thresholds to store signals for a duration before releasing them merged into one. +- **Death trigger** : choose if a node implode (die) when empty, or explode (die) when full. + +##### Arrow advanced features (previously named Edge) +- **Valency** allows you to act on the signal valency : preserve, invert, filter to keep only positive or negative signal, convert any signal to positive or to negative. +- Arrow can be set to randomly allow/drop signals +- Arrow can allow classical signal and/or vital change signal (death/life). +- Arrow can convert signal to vital change signal +- Arrow can handle signal as tendency (legacy default) or quantity (new) + + **Tendency mechanics** + nothing new here : when a signal reach a node it add it valency to the node stock and the node forward it + by cloning it on every output arrows (if no threshold or similar new node feature change that). + + **Quantitative mechanics** + when a signal reach a node it add it valency to the node stock, like in tendency mode. + But, if at least one output arrow is in quantitative mode, + all the overflow will be split between quantitative arrows, send and deduce from the node stock. + AND, all tendency (or vital change converter) arrow will get a fixed value signal. + +- Optional custom name (replacing it behavior symbols) +- Display signal timing to go from start node to end node thru this arrow. + +##### Text advanced features +- choose the color for each text message in your model (from 7 choices). +- switch text visibility : you can hide some text in play mode to keep them only as reminder for edition. +- link field : bind your text to a web link to make it clickable. + +##### ColorLogic mechanics +- When global colorLogic switch is enable, color become significant, and extra features are unlocked. +- A node stock is only updated by color matching signals. +- All nodes behaviors (threshold, latency, death) are only triggered by matching color signals. +- Signals reaching a node with a foreign color will be forwarded except if **Foreign color** is set to drop them. +- Arrow can **filter signals by color** to only allow a specific color. +- Arrow can also **convert a signal color** from one to another. +- Arrow can even convert to a **random color** from the ones allowed by arrows starting from end node. +- A specific arrow can change its end node color : it will **fill node with signal color** + (signal is destroyed in the process, use another arrow to clone and spread it if you want). + +##### Misc ergonomic / under the hood changes +- compact the edition sidebar on small screen. +- combined sliders to be able to change 2 parameters for one main feature (used for nodes thresholds) +- alternative image in sliderWidget depending of the selected option (for better understanding the choice effect) +- dynamic re-labeling feature name depending of selected option +- keep advanced selected setting in simple mode but display warning in the UI +- keep colorLogic selected setting in colorAesthetic mode but display warning in the UI +- added `json export` to export human readable json (old `save to file` now save a compressed file like `save as link` does now) +- added `load from url` to explain how to include in link an external loopy data file. + +### Changed +- **save as link** now store data in binary with lzma compression then base64 conversion. +- **load from file** (or from url) understand the legacy json format and the new compressed one (and the new human readable json format). +- arrows polarity + / - are ignored in advanced mode to let space for the more complete sign Behavior features. +- node text now have a white halo to improve readability. + + +## [Version 1.1] - 2017-04-11 (par [Nicky Case]) +### Added +- save as file, to store your work (system model) in your computer for backup and future improvement (and for big system that don't fit in the url) +- load from file, to load local or downloaded system models. +- make a GIF page to explain how to do gif from loopy with LICEcap or Peek + +### Changed +- node amounts are now "uncapped" +- better distribution of "signals" + + +## [1.0.0] - 2017-02-23 (par [Nicky Case]) +### Added + +##### Edit mode features +- an edit mode to create your system model. +- a tool bar to pick the tool you want to use +- use ink tool to add system entities to your model +- with ink tool create Node with pencil move +- with ink tool create Arrow/Edge with pencil move between nodes +- use text tool to add some text in your model +- use hand tool to move any part of your model +- use erase tool to delete any part of your model +- use ink or hand tool to select any part of your model and edit it +- a sidebar to view and edit any entity option and display some tips +- in sidebar for nodes, edit name, color and start amount +- in sidebar for edges, switch between positive effect (signal preservation) and negative effect (sgnial inverted) +- in sidebar for texts, edit content text +- in sidebar welcome page: an intro, somes links and import/export features +- save as link, to store your work (system model) in the url and share it easily +- embed in your website, to include the live demo directly in your website +- a play button to switch in play mode + +##### Play mode user interface +- a play mode to explore system reactions with moving signals. +- a stop/remix button to switch back in edit mode +- a reset button to start again your simulation from the beginning +- in embed/embedded mode : full screen mode with no sidebar +- a no-UI mode for tiny embed use-case +- an autoplay/autoSendSignal url parameter to start with a moving signal without user action +- a replay mode to discover how to build a system model with loopy just by watching a ghost replay of it. +- auto resize the play scene in full screen / embed mode +- a speed slider to run the simulation (signal speed) slower or faster. + +##### Play mode signals features +- as user, by a click, send positive or negative signal from a node +- signals follow arrows to reach next nodes (and change their color to match nodes color) +- signals add/remove theirs values to the node amount then bounce thru arrows +- arrow length changes the delay for a signal to go from a node to another + +##### And... +- all other stuff i miss to mention here. + + +[Non-publié/Non-Stabilisé]: https://github.com/1000i100/loopy/compare/v1.1.0...HEAD + +[Version 1.1]: https://github.com/1000i100/loopy/compare/v1.0.0...v1.1.0 +[1.0.0]: https://github.com/1000i100/loopy/releases/tag/v0.0.1 + +[Nicky Case]: https://github.com/ncase "@ncase" +[1000i100]: https://github.com/1000i100 "@1000i100" diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..b0efc34 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,164 @@ +EN | [FR](CHANGELOG.fr.md) + +# Changelog +All notable changes to this project will be documented in this file. + +The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), +and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + +## Road-map +- Groups +- Multi-lang support +- Write documentation pages and examples +- For more, check the [issues](https://github.com/1000i100/loopy/issues). + + + +## [Unreleased] (by [1000i100]) + +### Added + +##### Edit mode user interface +- a **simple mode** to keep loopy as simple as it used to be (easy onboarding or learning curve). Simple mode include only v1.* features. +- an **advanced mode** to unleash the power of creativity with V2 features. +- add a help shortcut `?` for each features linked to a page with some explanations and use-case examples +- a global switch between **colorAesthetic** and **colorLogic** mode to allow the use of color to unambiguous different kind of signals and nodes. +- zoom in and out (or drag with move tool) in the scene to explore big system. +- select the **camera mode** to use in play mode. + +##### Play mode cameras +- **scene cam.** : (resize to scene) the camera scale to show all visible elements. +- **signal cam.** : (follow signals) the camera focus and zoom on signals. Switch to scene camera when there is no signal. +- **free cam.** : (user controllable) user can zoom in/out and drag the scene even in play mode. + +##### Death / Life mechanics +- nodes can now die and reborn (by receiving vital change propagation signal or by explosion threshold settings). +- when a node die, it sends (propagate) a death signal to all arrows allowing it. +- when a dead node receives any signal except reborn, it's dropped. +- when a dead node reborn, it sends (propagate) a reborn/life signal to all arrows allowing it. +- when an alive node receives a reborn signal, it's dropped. +- when a dead node receives a death signal, it's dropped. + +##### Node advanced features +- empty the name field to resize it to a tiny internal-logic node. +- name it "autoplay" to auto send a signal on start in play-mode. +- press del key when name field is empty to remove the node. +- 4 node **sizes** with 4 different **storage capacities** (none, normal, x5 and x100) +- **Overflow threshold** : a node can store signals without forwarding them up to a threshold, and down to another threshold (store signals within a threshold window, forward them outside the window). +- **Aggregation latency** : bypass thresholds to store signals for a duration before releasing them merged into one. +- **Death trigger** : choose if a node implode (die) when empty, or explode (die) when full. + +##### Arrow advanced features (previously named Edge) +- **Valency** allows you to act on the signal valency : preserve, invert, filter to keep only positive or negative signal, convert any signal to positive or to negative. +- Arrow can be set to randomly allow/drop signals +- Arrow can allow classical signal and/or vital change signal (death/life). +- Arrow can convert signal to vital change signal +- Arrow can handle signal as tendency (legacy default) or quantity (new) + + **Tendency mechanics** + nothing new here : when a signal reach a node it add it valency to the node stock and the node forward it + by cloning it on every output arrows (if no threshold or similar new node feature change that). + + **Quantitative mechanics** + when a signal reach a node it add it valency to the node stock, like in tendency mode. + But, if at least one output arrow is in quantitative mode, + all the overflow will be split between quantitative arrows, send and deduce from the node stock. + AND, all tendency (or vital change converter) arrow will get a fixed value signal. + +- Optional custom name (replacing it behavior symbols) +- Display signal timing to go from start node to end node thru this arrow. + +##### Text advanced features +- choose the color for each text message in your model (from 7 choices). +- switch text visibility : you can hide some text in play mode to keep them only as reminder for edition. +- link field : bind your text to a web link to make it clickable. + +##### ColorLogic mechanics +- When global colorLogic switch is enable, color become significant, and extra features are unlocked. +- A node stock is only updated by color matching signals. +- All nodes behaviors (threshold, latency, death) are only triggered by matching color signals. +- Signals reaching a node with a foreign color will be forwarded except if **Foreign color** is set to drop them. +- Arrow can **filter signals by color** to only allow a specific color. +- Arrow can also **convert a signal color** from one to another. +- Arrow can even convert to a **random color** from the ones allowed by arrows starting from end node. +- A specific arrow can change its end node color : it will **fill node with signal color** + (signal is destroyed in the process, use another arrow to clone and spread it if you want). + +##### Misc ergonomic / under the hood changes +- compact the edition sidebar on small screen. +- combined sliders to be able to change 2 parameters for one main feature (used for nodes thresholds) +- alternative image in sliderWidget depending of the selected option (for better understanding the choice effect) +- dynamic re-labeling feature name depending of selected option +- keep advanced selected setting in simple mode but display warning in the UI +- keep colorLogic selected setting in colorAesthetic mode but display warning in the UI +- added `json export` to export human readable json (old `save to file` now save a compressed file like `save as link` does now) +- added `load from url` to explain how to include in link an external loopy data file. + +### Changed +- **save as link** now store data in binary with lzma compression then base64 conversion. +- **load from file** (or from url) understand the legacy json format and the new compressed one (and the new human readable json format). +- arrows polarity + / - are ignored in advanced mode to let space for the more complete sign Behavior features. +- node text now have a white halo to improve readability. + + +## [Version 1.1] - 2017-04-11 (by [Nicky Case]) +### Added +- save as file, to store your work (system model) in your computer for backup and future improvement (and for big system that don't fit in the url) +- load from file, to load local or downloaded system models. +- make a GIF page to explain how to do gif from loopy with LICEcap or Peek + +### Changed +- node amounts are now "uncapped" +- better distribution of "signals" + + +## [1.0.0] - 2017-02-23 (by [Nicky Case]) +### Added + +##### Edit mode features +- an edit mode to create your system model. +- a tool bar to pick the tool you want to use +- use ink tool to add system entities to your model +- with ink tool create Node with pencil move +- with ink tool create Arrow/Edge with pencil move between nodes +- use text tool to add some text in your model +- use hand tool to move any part of your model +- use erase tool to delete any part of your model +- use ink or hand tool to select any part of your model and edit it +- a sidebar to view and edit any entity option and display some tips +- in sidebar for nodes, edit name, color and start amount +- in sidebar for edges, switch between positive effect (signal preservation) and negative effect (sgnial inverted) +- in sidebar for texts, edit content text +- in sidebar welcome page: an intro, somes links and import/export features +- save as link, to store your work (system model) in the url and share it easily +- embed in your website, to include the live demo directly in your website +- a play button to switch in play mode + +##### Play mode user interface +- a play mode to explore system reactions with moving signals. +- a stop/remix button to switch back in edit mode +- a reset button to start again your simulation from the beginning +- in embed/embedded mode : full screen mode with no sidebar +- a no-UI mode for tiny embed use-case +- an autoplay/autoSendSignal url parameter to start with a moving signal without user action +- a replay mode to discover how to build a system model with loopy just by watching a ghost replay of it. +- auto resize the play scene in full screen / embed mode +- a speed slider to run the simulation (signal speed) slower or faster. + +##### Play mode signals features +- as user, by a click, send positive or negative signal from a node +- signals follow arrows to reach next nodes (and change their color to match nodes color) +- signals add/remove theirs values to the node amount then bounce thru arrows +- arrow length changes the delay for a signal to go from a node to another + +##### And... +- all other stuff i miss to mention here. + + +[Unreleased]: https://github.com/1000i100/loopy/compare/v1.1.0...HEAD + +[Version 1.1]: https://github.com/1000i100/loopy/compare/v1.0.0...v1.1.0 +[1.0.0]: https://github.com/1000i100/loopy/releases/tag/v0.0.1 + +[Nicky Case]: https://github.com/ncase "@ncase" +[1000i100]: https://github.com/1000i100 "@1000i100" diff --git a/README.fr.md b/README.fr.md new file mode 100644 index 0000000..b54a634 --- /dev/null +++ b/README.fr.md @@ -0,0 +1,45 @@ + + +[EN](README.md) | FR + +### [LOOPY - un outil pour penser en systèmes](https://lo0p.it/) + +Utilisez LOOPY dans sa dernière [version stable](https://lo0p.it/2/) ou testez les derniers ajouts dans la [version du jour même](https://1000i100.github.io/loopy/2/). + +Découvrez des [exemples d'usage de LOOPY créés par la communauté !](https://lo0p.it/2/pages/examples) + +- Project original par [Nicky Case](https://github.com/ncase/loopy) (juqu'à la v1.1 ~ 2017) +- Complété et maintenu par [1000i100](https://github.com/1000i100) (depuis la v2 ~ 2020) + +[Zero Droits Réservés](http://creativecommons.org/publicdomain/zero/1.0/): +LOOPY est entièrement open source / dans le domaine public. + +Pour copier/modifier/étendre LOOPY, clonez juste ce dépôt Github avec sa branche gh-pages. +([en savoir plus sur les pages Github gratuites](https://pages.github.com/)) + +### Liste des fonctionnalité + +Toutes les fonctions de LOOPY sont listé dans le [changelog](CHANGELOG.fr.md) écrit pour être compréhensible par des humains. + +Pour chaque fonction, vous pouvez trouver plus d'explications et des exemple spécifique d'usage dans la [documentation](2/pages/doc/). +La documentation est aussi disponible depuis l'aide contextuelle de LOOPY : Cliquez simplement sur le `?` associé à une fonction. + +### Contribuer + +Vous avez trouvé un bug ou vous souhaitez une nouvelle fonctionnalité ? Cherchez dans les [tickets/issues](https://github.com/1000i100/loopy/issues) pour voir si c'est déjà listé. Si ce n'est pas le cas, ajoutez le votre ! + +Vous savez le faire vous même ? Les [demande de fusion](https://github.com/1000i100/loopy/pulls) sont très bienvenue ! + +Traduire LOOPY ? Ça se passe sur [weblate] ! + +Financer tout ce travail ? +J'y ai passé environ 200 heurs jusqu'a maintenant (2020). +Je travaille aussi sur d'autre projets Libre (FOSS). +Je vie avec très peu de revenus, donc chaque don compte ! +Soutenez-moi via : +- [1forma-tic.fr (mon site pro)](https://1forma-tic.fr) +- [Tipeee](https://fr.tipeee.com/1000i100) +- [Liberapay](https://liberapay.com/1000i100/) +- [Open-Collective](https://opencollective.com/soutien-1000i100) +- [Patreon](https://www.patreon.com/1000i100) +- [Github Sponsors](https://github.com/sponsors/1000i100) diff --git a/README.md b/README.md index 70c8865..63cdd31 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,15 @@  -### [LOOPY - a tool for thinking in systems](http://ncase.me/loopy/) +EN | [FR](README.fr.md) + +### [LOOPY - a tool for thinking in systems](https://lo0p.it/) + +Use LOOPY in it last [stable version](https://lo0p.it/2/) or try latest features in the [nightly version](https://1000i100.github.io/loopy/2/). + +Check out these [user-made LOOPY's!](https://lo0p.it/2/pages/examples) + +- Original project by [Nicky Case](https://github.com/ncase/loopy) (up to v1.1 ~ 2017) +- Extended and maintained by [1000i100](https://github.com/1000i100) (since v2 ~ 2020) [Zero Rights Reserved](http://creativecommons.org/publicdomain/zero/1.0/): LOOPY is entirely open source/public domain. @@ -8,17 +17,28 @@ LOOPY is entirely open source/public domain. To mirror LOOPY, just clone this Github Repo with the gh-pages branch. ([learn more about these free Github Pages](https://pages.github.com/)) -Other Peeps' Open Source Code I Used: -- [minpubsub](https://github.com/daniellmb/MinPubSub) -- [balloon.css](https://kazzkiq.github.io/balloon.css/) -- [simple sharing buttons](https://simplesharingbuttons.com/) +### Features list + +All features are listed in a human readable [changelog](CHANGELOG.md). + +For any feature, you can find more explanation and specific use-case examples in the [documentation](2/pages/doc/). +Documentation is also available from contextual help inside LOOPY : Just click on the feature associated `?`. + +### Contribute -Check out these [user-made LOOPY's!](http://ncase.me/loopy/v1.1/pages/examples) +Found a bug or wish a feature ? Search in [issues](https://github.com/1000i100/loopy/issues) if it's not listed, add a new one ! ---- +You're able to do it ? [Merge/pull request](https://github.com/1000i100/loopy/pulls) are very welcome ! -Version 1.1: -- node amounts are now "uncapped" -- better distribution of "signals" +Translate LOOPY ? Here is the [weblate] ! -Version 1.0: the whole everything. +Funding all this work ? I've spent around 200 hours on loopy for now (2020). +I also work on other FOSS projects. +I live with very few incomes, so every gift count ! +Support me with : +- [Github Sponsors](https://github.com/sponsors/1000i100) +- [1forma-tic.fr (my freelancer website)](https://1forma-tic.fr) +- [Tipeee](https://fr.tipeee.com/1000i100) +- [Liberapay](https://liberapay.com/1000i100/) +- [Open-Collective](https://opencollective.com/soutien-1000i100) +- [Patreon](https://www.patreon.com/1000i100) diff --git a/css/icons/Email.png b/about/css/icons/Email.png similarity index 100% rename from css/icons/Email.png rename to about/css/icons/Email.png diff --git a/css/icons/Facebook.png b/about/css/icons/Facebook.png similarity index 100% rename from css/icons/Facebook.png rename to about/css/icons/Facebook.png diff --git a/css/icons/Twitter.png b/about/css/icons/Twitter.png similarity index 100% rename from css/icons/Twitter.png rename to about/css/icons/Twitter.png diff --git a/css/index.css b/about/css/index.css similarity index 100% rename from css/index.css rename to about/css/index.css diff --git a/v1.1/pages/examples/favicon.png b/about/favicon.png similarity index 100% rename from v1.1/pages/examples/favicon.png rename to about/favicon.png diff --git a/img/feature_draw.gif b/about/img/feature_draw.gif similarity index 100% rename from img/feature_draw.gif rename to about/img/feature_draw.gif diff --git a/img/feature_play.gif b/about/img/feature_play.gif similarity index 100% rename from img/feature_play.gif rename to about/img/feature_play.gif diff --git a/img/feature_remix.gif b/about/img/feature_remix.gif similarity index 100% rename from img/feature_remix.gif rename to about/img/feature_remix.gif diff --git a/img/logo.png b/about/img/logo.png similarity index 100% rename from img/logo.png rename to about/img/logo.png diff --git a/img/use_1.png b/about/img/use_1.png similarity index 100% rename from img/use_1.png rename to about/img/use_1.png diff --git a/img/use_2.png b/about/img/use_2.png similarity index 100% rename from img/use_2.png rename to about/img/use_2.png diff --git a/img/use_3.png b/about/img/use_3.png similarity index 100% rename from img/use_3.png rename to about/img/use_3.png diff --git a/img/use_4.png b/about/img/use_4.png similarity index 100% rename from img/use_4.png rename to about/img/use_4.png diff --git a/img/use_5.png b/about/img/use_5.png similarity index 100% rename from img/use_5.png rename to about/img/use_5.png diff --git a/social/thumbnail.png b/about/social/thumbnail.png similarity index 100% rename from social/thumbnail.png rename to about/social/thumbnail.png diff --git a/social/thumbnail_small.png b/about/social/thumbnail_small.png similarity index 100% rename from social/thumbnail_small.png rename to about/social/thumbnail_small.png diff --git a/splash/css/balloon.css b/about/splash/css/balloon.css similarity index 100% rename from splash/css/balloon.css rename to about/splash/css/balloon.css diff --git a/v1.1/css/cursors/drag.png b/about/splash/css/cursors/drag.png similarity index 100% rename from v1.1/css/cursors/drag.png rename to about/splash/css/cursors/drag.png diff --git a/v1.1/css/cursors/erase.png b/about/splash/css/cursors/erase.png similarity index 100% rename from v1.1/css/cursors/erase.png rename to about/splash/css/cursors/erase.png diff --git a/v1.1/css/cursors/ink.png b/about/splash/css/cursors/ink.png similarity index 100% rename from v1.1/css/cursors/ink.png rename to about/splash/css/cursors/ink.png diff --git a/v1.1/css/cursors/label.png b/about/splash/css/cursors/label.png similarity index 100% rename from v1.1/css/cursors/label.png rename to about/splash/css/cursors/label.png diff --git a/v1.1/css/icons/controls.png b/about/splash/css/icons/controls.png similarity index 100% rename from v1.1/css/icons/controls.png rename to about/splash/css/icons/controls.png diff --git a/v1.1/css/icons/drag.png b/about/splash/css/icons/drag.png similarity index 100% rename from v1.1/css/icons/drag.png rename to about/splash/css/icons/drag.png diff --git a/v1.1/css/icons/erase.png b/about/splash/css/icons/erase.png similarity index 100% rename from v1.1/css/icons/erase.png rename to about/splash/css/icons/erase.png diff --git a/v1.1/css/icons/ink.png b/about/splash/css/icons/ink.png similarity index 100% rename from v1.1/css/icons/ink.png rename to about/splash/css/icons/ink.png diff --git a/v1.1/css/icons/label.png b/about/splash/css/icons/label.png similarity index 100% rename from v1.1/css/icons/label.png rename to about/splash/css/icons/label.png diff --git a/v1.1/css/icons/speed_fast.png b/about/splash/css/icons/speed_fast.png similarity index 100% rename from v1.1/css/icons/speed_fast.png rename to about/splash/css/icons/speed_fast.png diff --git a/v1.1/css/icons/speed_slow.png b/about/splash/css/icons/speed_slow.png similarity index 100% rename from v1.1/css/icons/speed_slow.png rename to about/splash/css/icons/speed_slow.png diff --git a/splash/css/loopy.css b/about/splash/css/loopy.css similarity index 100% rename from splash/css/loopy.css rename to about/splash/css/loopy.css diff --git a/v1.1/css/sliders/color.png b/about/splash/css/sliders/color.png similarity index 100% rename from v1.1/css/sliders/color.png rename to about/splash/css/sliders/color.png diff --git a/v1.1/css/sliders/initial.png b/about/splash/css/sliders/initial.png similarity index 100% rename from v1.1/css/sliders/initial.png rename to about/splash/css/sliders/initial.png diff --git a/v1.1/css/sliders/slider_pointer.png b/about/splash/css/sliders/slider_pointer.png similarity index 100% rename from v1.1/css/sliders/slider_pointer.png rename to about/splash/css/sliders/slider_pointer.png diff --git a/v1.1/css/sliders/strength.png b/about/splash/css/sliders/strength.png similarity index 100% rename from v1.1/css/sliders/strength.png rename to about/splash/css/sliders/strength.png diff --git a/splash/css/sliders/strength_original.png b/about/splash/css/sliders/strength_original.png similarity index 100% rename from splash/css/sliders/strength_original.png rename to about/splash/css/sliders/strength_original.png diff --git a/splash/index.html b/about/splash/index.html similarity index 100% rename from splash/index.html rename to about/splash/index.html diff --git a/splash/js/Dragger.js b/about/splash/js/Dragger.js similarity index 100% rename from splash/js/Dragger.js rename to about/splash/js/Dragger.js diff --git a/splash/js/Edge.js b/about/splash/js/Edge.js similarity index 100% rename from splash/js/Edge.js rename to about/splash/js/Edge.js diff --git a/splash/js/Eraser.js b/about/splash/js/Eraser.js similarity index 100% rename from splash/js/Eraser.js rename to about/splash/js/Eraser.js diff --git a/splash/js/Ink.js b/about/splash/js/Ink.js similarity index 100% rename from splash/js/Ink.js rename to about/splash/js/Ink.js diff --git a/splash/js/Key.js b/about/splash/js/Key.js similarity index 100% rename from splash/js/Key.js rename to about/splash/js/Key.js diff --git a/splash/js/Label.js b/about/splash/js/Label.js similarity index 100% rename from splash/js/Label.js rename to about/splash/js/Label.js diff --git a/splash/js/Labeller.js b/about/splash/js/Labeller.js similarity index 100% rename from splash/js/Labeller.js rename to about/splash/js/Labeller.js diff --git a/splash/js/Loopy.js b/about/splash/js/Loopy.js similarity index 100% rename from splash/js/Loopy.js rename to about/splash/js/Loopy.js diff --git a/splash/js/Modal.js b/about/splash/js/Modal.js similarity index 100% rename from splash/js/Modal.js rename to about/splash/js/Modal.js diff --git a/splash/js/Model.js b/about/splash/js/Model.js similarity index 100% rename from splash/js/Model.js rename to about/splash/js/Model.js diff --git a/splash/js/Mouse.js b/about/splash/js/Mouse.js similarity index 100% rename from splash/js/Mouse.js rename to about/splash/js/Mouse.js diff --git a/splash/js/Node.js b/about/splash/js/Node.js similarity index 100% rename from splash/js/Node.js rename to about/splash/js/Node.js diff --git a/splash/js/PageUI.js b/about/splash/js/PageUI.js similarity index 100% rename from splash/js/PageUI.js rename to about/splash/js/PageUI.js diff --git a/splash/js/PlayControls.js b/about/splash/js/PlayControls.js similarity index 100% rename from splash/js/PlayControls.js rename to about/splash/js/PlayControls.js diff --git a/splash/js/Sidebar.js b/about/splash/js/Sidebar.js similarity index 99% rename from splash/js/Sidebar.js rename to about/splash/js/Sidebar.js index 02a5322..cdda86a 100644 --- a/splash/js/Sidebar.js +++ b/about/splash/js/Sidebar.js @@ -173,7 +173,7 @@ function Sidebar(loopy){ "
+
+
+




+ 



- LOOPY is made by me, Nicky Case, - with the kind, lovely support of my fans on patreon! -
-- Speaking of which, here they are: -
-
-
- Aimee Jarboe
-
-
- Buster Benson
-
-
- Chad Sansing
-
-
- Jared Cosulich
-
-
- Louis-Jean Teitelbaum
-
-
- Mark McCartney
-
-
- Matt Hughes
-
-
- Michael Duke
-
-
- Michael Huff
-
-
- Natalie Sun
-
-
- Nicholas Perry
-
-
- Noel Lehmann
-
-
- Phil Dougherty
-
-
- Philippe Vallotti
-
-
- Travis Ross
-
-
- Yu-Han Kuo
-
- Cedric Rossi
-
- Dylan Field
-
- Dylan Sinnott
-
- Feiya Wang
-
- Glen E. Ivey
-
- Iago Medeiros Cordeiro
-
- Karen Cooper
-
- Kate Fractal
-
- Kevin Wang
-
- Klemen Slavic
-
- kuerqing1024
-
- Michelle Kelly
-
- Nimrod Kimhi
-
- Rob Napier
-
- Thomas de Rego
-
- William O'Hanley
-
- Zach Smith
- - and special thanks to my beta-testers, - who helped me squash the bugs and shame the kinks out of LOOPY: -
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/v1/pages/howto/1.png b/v1/pages/howto/1.png
deleted file mode 100644
index 59e9deb..0000000
Binary files a/v1/pages/howto/1.png and /dev/null differ
diff --git a/v1/pages/howto/2.png b/v1/pages/howto/2.png
deleted file mode 100644
index 35eabd0..0000000
Binary files a/v1/pages/howto/2.png and /dev/null differ
diff --git a/v1/pages/howto/3.png b/v1/pages/howto/3.png
deleted file mode 100644
index 69dc1ee..0000000
Binary files a/v1/pages/howto/3.png and /dev/null differ
diff --git a/v1/pages/howto/4.png b/v1/pages/howto/4.png
deleted file mode 100644
index 405fb9e..0000000
Binary files a/v1/pages/howto/4.png and /dev/null differ
diff --git a/v1/pages/howto/5.png b/v1/pages/howto/5.png
deleted file mode 100644
index 4cf4a46..0000000
Binary files a/v1/pages/howto/5.png and /dev/null differ
diff --git a/v1/pages/page.css b/v1/pages/page.css
deleted file mode 100644
index 34b15d2..0000000
--- a/v1/pages/page.css
+++ /dev/null
@@ -1,183 +0,0 @@
-body{
- background: #ddd;
- font-family: Helvetica, Arial, sans-serif;
- font-weight: 100;
- font-size: 19px;
- color: #222;
- margin: 0;
-}
-.full{
- width:100%;
- margin: 0;
- display: block;
-}
-.shadow{
- width:100%; height: 100%;
- position: fixed;
- top:0; left:0;
- box-shadow: inset 0 0 20px rgba(0,0,0,0.75);
-}
-
-/********************************/
-/********************************/
-
-#examples{
- width: 620px;
- margin:0 auto;
- overflow: hidden;
-}
-
-#examples hr{
- border:none;
- border-bottom: 2px dashed #aaa;
- width: 560px;
- margin: 0 auto;
- margin-top: 15px;
-}
-
-#more_examples{
- color: #333;
- width: 500px;
- margin: 30px auto;
-}
-#more_examples li{
- color: #666;
- margin-bottom: 1em;
- position: relative;
- left: -0.8em;
-}
-#more_examples li a{
- color: #dd4040;
-}
-#more_examples li a:hover{
- color: #ee6060;
-}
-#more_examples li a.twitter{
- color: inherit;
-}
-
-.example{
- display: block;
- float: left;
- width: 180px;
- height: 180px;
-
- cursor: pointer;
- transform: scale(1);
- transition: all 0.2s ease-in-out;
-}
-.example:hover{
- transform: scale(1.1);
-}
-.example > div{
- width: 180px;
- height: 180px;
- background: #888;
- border-radius: 100px;
- float: left;
- position: relative;
-}
-.example > div > div{
- font-size: 25px;
- color: #fff;
- width: 150px;
- height: 55px;
- position: absolute;
- top:0; left:0; right:0; bottom:0;
- margin: auto;
- text-align: center;
-}
-.example:nth-child(n+2){
- margin-left: 19px;
-}
-
-/********************************/
-/********************************/
-
-#credits{
- width: 600px;
- margin: 50px auto;
- font-weight: 100;
- color: #fff;
- font-size: 20px;
-}
-
-.credit_intro{
- font-size: 26px;
-}
-.credit_intro a{
- color: #dd3939;
-}
-.credit_intro a:hover{
- color: #ee6060;
-}
-
-#credits hr{
- border:none;
- border-bottom: 4px dashed #444;
- margin-top: 30px;
-}
-
-.credits_peeps{
- overflow: hidden;
- padding-bottom: 20px;
-}
-.credits_peeps > div{
- position: relative;
- width: 150px;
- height: 210px;
- float: left;
- text-align: center;
-}
-.credits_peeps > div > img:nth-child(1){
- position: absolute;
- left: 0;
- width: 150px;
- bottom: 30px;
-}
-.credits_peeps > div > img:nth-child(2){
- position: absolute;
- width: 50px;
- right: 5px;
- bottom: 30px;
-}
-.credits_peeps > div > span{
- display: block;
- position: absolute;
- bottom:0;
- width: 150px;
- height: 20px;
- text-transform: lowercase;
-}
-
-.credits_polygons{
- margin-top: 15px;
- overflow: hidden;
- color: #ddd;
- font-size: 18px;
- padding-bottom: 20px;
- text-align: center;
-}
-.credits_polygons > div{
- display: inline-block;
-}
-.credits_polygons > div > img{
- width: 40px;
- position: relative;
- top:10px;
-}
-.credits_polygons > div > span{
- text-transform: lowercase;
-}
-
-.credits_names{
- margin-top: 30px;
- overflow: hidden;
- color: #bbb;
- font-size: 16px;
- padding-bottom: 20px;
- text-align: center;
- -webkit-columns: 150px 3;
- -moz-columns: 150px 3;
- columns: 150px 3;
-}
\ No newline at end of file