refactor(website): Updates milkymist

pull/49/head
sovanna 2019-08-01 14:05:15 +02:00
parent b7dee72e43
commit 3084e84924
5 changed files with 105 additions and 79 deletions

View File

@ -34,14 +34,14 @@ Those transportation options take you to King's Road, then see the directions be
<div class="row">
{% layout_card(src="images/directions_1@2x.png", imgbottom=true) %}
{% layout_card(src="images/directions_1@2x.png", imgbottom=true, rmcard=true) %}
<span class="badge badge-primary">1</span> When entering from King's Road, Pan Hoi Street looks like this. Go to the location of the red arrow:
{% end %}
{% layout_card(src="images/directions_2@2x.png", imgbottom=true) %}
{% layout_card(src="images/directions_2@2x.png", imgbottom=true, rmcard=true) %}
<p style="padding-bottom: 46px;">
<span class="badge badge-primary">2</span> Enter here:
@ -50,7 +50,7 @@ Those transportation options take you to King's Road, then see the directions be
{% end %}
{% layout_card(src="images/directions_3@2x.png", imgbottom=true) %}
{% layout_card(src="images/directions_3@2x.png", imgbottom=true, rmcard=true) %}
<p style="padding-bottom: 21px;">
<span class="badge badge-primary">3</span> Turn right here, walk a little bit, and M-Labs will be on your left:

View File

@ -5,13 +5,9 @@ template = "page.html"
+++
{% layout_centered_content() %}
{% layout_text_img(src="images/m1.jpg", popup="images/m1_large.jpg", alt="", textleft=true) %}
<a href="/images/m1_large.jpg"><img src="/images/m1.jpg"></a>
{% end %}
The Milkymist One is an experimental hardware appliance for live video effects.
##### The Milkymist One is an experimental hardware appliance for live video effects.
The small 172x145x45mm device creates visualizations similar to those generated by the <a href="http://www.geisswerks.com/milkdrop/" target="_blank" rel="noopener noreferrer">MilkDrop</a> software, and enables you to mix them with live footage from a camera and interact using MIDI and DMX controllers.
@ -25,10 +21,12 @@ Under the hood, the Milkymist One is like a mini-computer running our Flickernoi
But we did not stop at open source <em>software</em>. As a matter of fact, when this project started in August 2007, one of the goals was to open up <em>chip design</em>. Inside the device, which was launched in September 2011, the Flickernoise software is actually running on an open source CPU part of our own system-on-chip.
{% end %}
## Detailed specifications
<img src="/images/m1_board.jpg">
{% layout_text_img(src="images/m1_board.jpg", alt="") %}
##### Detailed specifications
- Multi-standard video input (PAL/SECAM/NTSC)
- Two DMX512 (RS485) ports
@ -44,7 +42,12 @@ But we did not stop at open source <em>software</em>. As a matter of fact, when
- RC-5 compatible infrared receiver
- RS232 debug port
## Press
{% end %}
{% layout_centered_content(min_width=true, force_left=true, bg="background-image: url(/images/stripe.svg); background-repeat: no-repeat; background-size: auto 100%; padding-left: 40px;") %}
##### Press
- Create Digital Motion (10/02/2012): <a href="http://createdigitalmotion.com/2012/02/milkymist-is-digital-visual-synthesizer-and-processor-built-on-sophisticated-open-source-hardware/">Milkymist is Digital Visual Synthesizer and Processor, Built as Sophisticated Open Source Hardware</a>
- MikroBitti (03/2012): <a href="http://www.mbnet.fi/artikkeli/lehti/avointa_vj_rautaa_3_2012">Milkymist One -visualisaattori: Avointa vj-rautaa</a> [FI]
@ -56,80 +59,89 @@ But we did not stop at open source <em>software</em>. As a matter of fact, when
- Create Digital Motion (16/08/2010): <a href="http://createdigitalmotion.com/2010/08/milkymist-one-all-in-one-open-source-vj-workstation/">Milkymist One, All-in-One Open Source VJ Workstation</a>
- Linux-Magazin (29/12/2009): <a href="http://www.linux-magazin.de/NEWS/26c3-Bewegtbildgenerator-Milkymist-bald-mit-Ethernet-und-USB">26c3: Bewegtbildgenerator Milkymist bald mit Ethernet und USB</a> [DE]
{% end %}
## Buy a Milkymist One
We are no longer selling Milkymist One. If you want one, you can ask about buying a second-hand unit on the <a href="https://ssl.serverraum.org/lists/listinfo/devel/listinfo.cgi/devel-milkymist.org">mailing list</a>, or take the open source design files and manufacture it yourself.
{{ layout_separator_empty() }}
## Video
{{ layout_separator(separator_title="Buy a Milkymist One", css="col-12 text-center mt-2 mb-2 mb-lg-5") }}
{% layout_centered_content(min_width=true, css="row d-flex align-items-center mt-5") %}
##### We are no longer selling Milkymist One.
If you want one, you can ask about buying a second-hand unit on the <a href="https://ssl.serverraum.org/lists/listinfo/devel/listinfo.cgi/devel-milkymist.org">mailing list</a>, or take the open source design files and manufacture it yourself.
##### Video
<a href="https://www.youtube.com/watch?v=0k080nzA_z4" target="_blank" rel="noopener noreferrer">Unboxing the Milkymist One video synthesizer</a> (YouTube)
## Screenshots
##### Screenshots
<a href="/fnscreenshots/pdf.png"><img src="/fnscreenshots/pdf_small.jpg"></a>
<a href="/fnscreenshots/darkblue.png"><img src="/fnscreenshots/darkblue_small.jpg"></a>
<a href="/fnscreenshots/sailing1.png"><img src="/fnscreenshots/sailing1_small.jpg"></a>
<a href="/fnscreenshots/sailing2.png"><img src="/fnscreenshots/sailing2_small.jpg"></a>
<a href="/fnscreenshots/sailing3.png"><img src="/fnscreenshots/sailing3_small.jpg"></a>
<a href="/fnscreenshots/sailing4.png"><img src="/fnscreenshots/sailing4_small.jpg"></a>
<a href="/fnscreenshots/sailing5.png"><img src="/fnscreenshots/sailing5_small.jpg"></a>
<a href="/fnscreenshots/starballet1.png"><img src="/fnscreenshots/starballet1_small.jpg"></a>
<a href="/fnscreenshots/starballet2.png"><img src="/fnscreenshots/starballet2_small.jpg"></a>
<a href="/fnscreenshots/starballet3.png"><img src="/fnscreenshots/starballet3_small.jpg"></a>
<a href="/fnscreenshots/starballet4.png"><img src="/fnscreenshots/starballet4_small.jpg"></a>
<a href="/fnscreenshots/starballet5.png"><img src="/fnscreenshots/starballet5_small.jpg"></a>
<a href="/fnscreenshots/starballet6.png"><img src="/fnscreenshots/starballet6_small.jpg"></a>
<a href="/fnscreenshots/starballet7.png"><img src="/fnscreenshots/starballet7_small.jpg"></a>
<a href="/fnscreenshots/starpainter1.png"><img src="/fnscreenshots/starpainter1_small.jpg"></a>
<a href="/fnscreenshots/starpainter2.png"><img src="/fnscreenshots/starpainter2_small.jpg"></a>
<a href="/fnscreenshots/starpainter3.png"><img src="/fnscreenshots/starpainter3_small.jpg"></a>
<a href="/fnscreenshots/plasmastreams.png"><img src="/fnscreenshots/plasmastreams_small.jpg"></a>
<a href="/fnscreenshots/pshroomery.png"><img src="/fnscreenshots/pshroomery_small.jpg"></a>
<a href="/fnscreenshots/pshroomery2.png"><img src="/fnscreenshots/pshroomery2_small.jpg"></a>
<a href="/fnscreenshots/pshroomery3.png"><img src="/fnscreenshots/pshroomery3_small.jpg"></a>
<a href="/fnscreenshots/pshroomery4.png"><img src="/fnscreenshots/pshroomery4_small.jpg"></a>
<a href="/fnscreenshots/eerieberi.png"><img src="/fnscreenshots/eerieberi_small.jpg"></a>
<a href="/fnscreenshots/pdb1.png"><img src="/fnscreenshots/pdb1_small.jpg"></a>
<a href="/fnscreenshots/pdb2.png"><img src="/fnscreenshots/pdb2_small.jpg"></a>
<a href="/fnscreenshots/kalei.png"><img src="/fnscreenshots/kalei_small.jpg"></a>
<a href="/fnscreenshots/torridtales3.png"><img src="/fnscreenshots/torridtales3_small.jpg"></a>
<a href="/fnscreenshots/torridtales.png"><img src="/fnscreenshots/torridtales_small.jpg"></a>
<a href="/fnscreenshots/burningdisc.png"><img src="/fnscreenshots/burningdisc_small.jpg"></a>
<a href="/fnscreenshots/burningdisc2.png"><img src="/fnscreenshots/burningdisc2_small.jpg"></a>
<a href="/fnscreenshots/burningpanel.png"><img src="/fnscreenshots/burningpanel_small.jpg"></a>
<a href="/fnscreenshots/crazyface.png"><img src="/fnscreenshots/crazyface_small.jpg"></a>
<a href="/fnscreenshots/crazyface2.png"><img src="/fnscreenshots/crazyface2_small.jpg"></a>
<a href="/fnscreenshots/mateball.png"><img src="/fnscreenshots/mateball_small.jpg"></a>
<a href="/fnscreenshots/pyramids.png"><img src="/fnscreenshots/pyramids_small.jpg"></a>
<a href="/fnscreenshots/madness.png"><img src="/fnscreenshots/madness_small.jpg"></a>
<a href="/fnscreenshots/explosiveminds.png"><img src="/fnscreenshots/explosiveminds_small.jpg"></a>
<a href="/fnscreenshots/torridtales2.png"><img src="/fnscreenshots/torridtales2_small.jpg"></a>
<a href="/fnscreenshots/8bitstarfield.png"><img src="/fnscreenshots/8bitstarfield_small.jpg"></a>
<a href="/fnscreenshots/airs.png"><img src="/fnscreenshots/airs_small.jpg"></a>
<a href="/fnscreenshots/aqualung.png"><img src="/fnscreenshots/aqualung_small.jpg"></a>
<a href="/fnscreenshots/balkacid.png"><img src="/fnscreenshots/balkacid_small.jpg"></a>
<a href="/fnscreenshots/cloudedbottle.png"><img src="/fnscreenshots/cloudedbottle_small.jpg"></a>
<a href="/fnscreenshots/cosmicechoes.png"><img src="/fnscreenshots/cosmicechoes_small.jpg"></a>
<a href="/fnscreenshots/digitalflame.png"><img src="/fnscreenshots/digitalflame_small.jpg"></a>
<a href="/fnscreenshots/drunkenboat.png"><img src="/fnscreenshots/drunkenboat_small.jpg"></a>
<a href="/fnscreenshots/eerieberi2.png"><img src="/fnscreenshots/eerieberi2_small.jpg"></a>
<a href="/fnscreenshots/interwoven.png"><img src="/fnscreenshots/interwoven_small.jpg"></a>
<a href="/fnscreenshots/madness2.png"><img src="/fnscreenshots/madness2_small.jpg"></a>
<a href="/fnscreenshots/shaking.png"><img src="/fnscreenshots/shaking_small.jpg"></a>
<a href="/fnscreenshots/ssmatrix.png"><img src="/fnscreenshots/ssmatrix_small.jpg"></a>
<a href="/fnscreenshots/patcheditor2.png"><img src="/fnscreenshots/patcheditor2_small.jpg"></a>
<a href="/fnscreenshots/glass.png"><img src="/fnscreenshots/glass_small.jpg"></a>
<a href="/fnscreenshots/glass2.png"><img src="/fnscreenshots/glass2_small.jpg"></a>
<a href="/fnscreenshots/face.png"><img src="/fnscreenshots/face_small.jpg"></a>
<img data-popup="true" data-nsrc="/fnscreenshots/pdf.png" src="/fnscreenshots/pdf_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/darkblue.png" src="/fnscreenshots/darkblue_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/sailing1.png" src="/fnscreenshots/sailing1_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/sailing2.png" src="/fnscreenshots/sailing2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/sailing3.png" src="/fnscreenshots/sailing3_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/sailing4.png" src="/fnscreenshots/sailing4_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/sailing5.png" src="/fnscreenshots/sailing5_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet1.png" src="/fnscreenshots/starballet1_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet2.png" src="/fnscreenshots/starballet2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet3.png" src="/fnscreenshots/starballet3_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet4.png" src="/fnscreenshots/starballet4_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet5.png" src="/fnscreenshots/starballet5_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet6.png" src="/fnscreenshots/starballet6_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet7.png" src="/fnscreenshots/starballet7_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starpainter1.png" src="/fnscreenshots/starpainter1_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starpainter2.png" src="/fnscreenshots/starpainter2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starpainter3.png" src="/fnscreenshots/starpainter3_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/plasmastreams.png" src="/fnscreenshots/plasmastreams_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pshroomery.png" src="/fnscreenshots/pshroomery_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pshroomery2.png" src="/fnscreenshots/pshroomery2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pshroomery3.png" src="/fnscreenshots/pshroomery3_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pshroomery4.png" src="/fnscreenshots/pshroomery4_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/eerieberi.png" src="/fnscreenshots/eerieberi_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pdb1.png" src="/fnscreenshots/pdb1_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pdb2.png" src="/fnscreenshots/pdb2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/kalei.png" src="/fnscreenshots/kalei_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/torridtales3.png" src="/fnscreenshots/torridtales3_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/torridtales.png" src="/fnscreenshots/torridtales_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/burningdisc.png" src="/fnscreenshots/burningdisc_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/burningdisc2.png" src="/fnscreenshots/burningdisc2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/burningpanel.png" src="/fnscreenshots/burningpanel_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/crazyface.png" src="/fnscreenshots/crazyface_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/crazyface2.png" src="/fnscreenshots/crazyface2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/mateball.png" src="/fnscreenshots/mateball_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pyramids.png" src="/fnscreenshots/pyramids_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/madness.png" src="/fnscreenshots/madness_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/explosiveminds.png" src="/fnscreenshots/explosiveminds_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/torridtales2.png" src="/fnscreenshots/torridtales2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/8bitstarfield.png" src="/fnscreenshots/8bitstarfield_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/airs.png" src="/fnscreenshots/airs_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/aqualung.png" src="/fnscreenshots/aqualung_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/balkacid.png" src="/fnscreenshots/balkacid_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/cloudedbottle.png" src="/fnscreenshots/cloudedbottle_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/cosmicechoes.png" src="/fnscreenshots/cosmicechoes_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/digitalflame.png" src="/fnscreenshots/digitalflame_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/drunkenboat.png" src="/fnscreenshots/drunkenboat_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/eerieberi2.png" src="/fnscreenshots/eerieberi2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/interwoven.png" src="/fnscreenshots/interwoven_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/madness2.png" src="/fnscreenshots/madness2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/shaking.png" src="/fnscreenshots/shaking_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/ssmatrix.png" src="/fnscreenshots/ssmatrix_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/patcheditor2.png" src="/fnscreenshots/patcheditor2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/glass.png" src="/fnscreenshots/glass_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/glass2.png" src="/fnscreenshots/glass2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/face.png" src="/fnscreenshots/face_small.jpg">
{% end %}
## Milkymist SoC
{% layout_text_img(src="images/jtagserialb.jpg", src2="images/jtagserialt.jpg", alt="", textleft=true) %}
<img src="/images/jtagserialb.jpg">
<img src="/images/jtagserialt.jpg">
##### Milkymist SoC
The Milkymist SoC is at the core of the Milkymist One, implemented in the Spartan-6 FPGA.
@ -145,8 +157,12 @@ The SoC source distribution includes software libraries, the BIOS and the demons
Milkymist SoC is phased out in favor of the more powerful [MiSoC](@/gateware/migen.md).
{% end %}
## Flickernoise
{% layout_centered_content(min_width=true, force_left=true, css="row d-flex align-items-center mt-5 mb-5 hkstyleh5") %}
##### Flickernoise
Flickernoise is the video synthesis application developed for the Milkymist One and the Milkymist SoC. It renders hardware-accelerated visual effects comparable (and, to some extent, compatible) with those of <a href="http://www.nullsoft.com/free/milkdrop">MilkDrop</a> 1.x, the popular audio visualization plug-in for Winamp.
@ -163,10 +179,12 @@ Flickernoise uses:
- <a href="http://www.github.com/m-labs/liboscparse">liboscparse</a>, a variant of <a href="http://liblo.sourceforge.net/">liblo</a>, for <a href="http://www.opensoundcontrol.org">OpenSoundControl</a> communications.
## Credits
##### Credits
Thanks to the many people who made Milkymist One possible - in no particular order:
Sebastien Bourdeauducq (founder), Michael Walle (software), Adam Wang (production engineering), Uwe Bonnes, Werner Almesberger, Jon Phillips (evangelist), Yi Zhang (operations), Christophe Devine, Don Miller, John Lejeune, Wim Vandeputte, Xiangfu Liu (software), Wolfgang Spraul, Joachim roh Steiger (mechanical), Yanjun Luo (jtag-serial design), Lars-Peter Clausen, Cristian Paul (early adopter), Christopher Adams (logo design), Christiaan Virant (advice), Takeshi Matsuya (Linux port), Akuei Chen (smt), Anson Lin (layout), Vera Cheng (layout), Terry (pcb), Nick Chen (remote control), Eva Su (sourcing), Sean Xiao (sourcing), Elisha Tseng (xilinx fae), Henry de Beauchesne, Philip Sheu (nor flash), Arno Lin (vga connector), Sun Hung Kuang (jtag-serial smt), Aaron Lee (usb connector), Ruby Su (sourcing), Yunchao Xie (ccd camera), Xiaochun Lu (power supply), Cailin Dai (box design), Mr. Zhang (box making), Xianke Zhang (eva), Xin Cai (label printing), Ting Jiang (sticker making), Xiaopeng Li (silicone keyboard), Mr. Ba (audio, video cables), Dehua Xiao (ethernet cable), Miss Zhao (usb cable), Shen Chun Yi (package pickup Taipei)...
Plus countless workers at dozens of suppliers and many more who created the free technology we were able to build upon.
{% end %}

View File

@ -219,4 +219,8 @@ ul:not(.navbar-nav) li {
a[aria-expanded='true']:after {
transform: rotate(-180deg);
}
.hkstyleh5 h5 {
text-align: center;
}

View File

@ -1,6 +1,6 @@
<div class="{% if css %}{{ css }}{% else %}col-12 col-md-4{% endif %}">
<div class="mb-4">
<div class="{% if not rmcard %}card shadow{% endif %} mb-4">
{% if not imgbottom %}

View File

@ -16,6 +16,10 @@
<img {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=popup, cachebust=true) }}"{% endif %} src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
{% endif %}
{% if src2 %}
<img {% if popup2 %}data-popup="true" data-nsrc="{{ get_url(path=popup2, cachebust=true) }}"{% endif %} src="{{ get_url(path=src2, cachebust=true) }}" alt="{% if alt %}{{ alt2 }}{% endif %}" width="100%" class="card-img-top img-fluid">
{% endif %}
</div>
</div>