diff --git a/README.md b/README.md
index 639f19a..b538bbf 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ Worship your favorite molecule by setting it as your wallpaper.
Avogadrio is a web app that will render your favourite molecule as a desktop wallpaper from either a compund name or
[SMILES structure](https://en.wikipedia.org/wiki/Simplified_molecular-input_line-entry_system). Molecule rendering
is designed to be powered by [Sourire](https://github.com/tmoerman/sourire) which itself wraps the
-[Indigo cheminformatics toolkit](https://github.com/ggasoftware/indigo). Built on the
+[Indigo cheminformatics toolkit](https://github.com/ggasoftware/indigo). Built on the
[Silex](https://github.com/silexphp/Silex) micro-framework.

@@ -62,3 +62,4 @@ A big thank you to:
* [Nile Red](https://www.youtube.com/user/TheRedNile) inspired me to build this. I wasn't that big on chemistry until I came across his videos.
* [Jay Holtslander](https://codepen.io/j_holtslander/) put together the hamburger menu/sidebar combo in his [Pen](https://codepen.io/j_holtslander/pen/XmpMEp) on CodePen. I believe it's derived from earlier work by [maridlcrmn](https://bootsnipp.com/maridlcrmn).
* [Thomas Moerman](https://github.com/tmoerman) created [Sourire](https://github.com/tmoerman/sourire), which really simplified the molecule rendering process.
+* [Andre Plötze](https://github.com/andrepxx) created [Sourire](https://github.com/tmoerman/sourire), which really simplified the molecule rendering process.
diff --git a/src/coffee/main.coffee b/src/coffee/main.coffee
index e025309..fceba5e 100644
--- a/src/coffee/main.coffee
+++ b/src/coffee/main.coffee
@@ -240,6 +240,25 @@ $(document).ready ->
backgroundColor = $(e.target).val().substring(1)
modeAwareRefreshPreview()
+ # Set up the rotation knob.
+
+ rotationKnob = pureknob.createKnob(88, 88)
+ rotationKnob.setProperty 'angleStart', 0
+ rotationKnob.setProperty 'angleEnd', Math.PI * 2
+ rotationKnob.setProperty 'colorFG', '#C0C0C0'
+ rotationKnob.setProperty 'colorBG', '#505050'
+ rotationKnob.setProperty 'trackWidth', 0.4
+ rotationKnob.setProperty 'valMin', 0
+ rotationKnob.setProperty 'valMax', 359
+ rotationKnob.setProperty 'needle', true
+ rotationKnob.setValue 0
+ rotationKnob.addListener (knob, value) ->
+ rotation = value
+ modeAwareRefreshPreview()
+ knobNode = rotationKnob.node()
+ knobElem = document.getElementById 'rotation_knob'
+ knobElem.appendChild knobNode
+
# Compound name update button should refresh the preview.
$('.update-btn').on 'click', (e) ->
@@ -257,7 +276,7 @@ $(document).ready ->
customLabel = getCustomLabel()
modeAwareRefreshPreview()
- # Put passed parameter values into text boxes if needed.
+ # Put passed parameter values into UI if needed.
passedCompoundName = getParameterByName 'compound'
if passedCompoundName != null
@@ -273,20 +292,15 @@ $(document).ready ->
if passedLabel != null
customLabelTextBox.val(passedLabel)
- # Grab initial values from text boxes.
+ passedRotation = getParameterByName 'rotation'
+ if passedRotation != null
+ rotationKnob.setValue(passedRotation)
+
+ # Grab initial values from UI.
currentCompoundName = compoundTextBox.val()
currentCompoundSmiles = smilesTextBox.val()
customLabel = customLabelTextBox.val()
-
- window.knobListener = (k, v) ->
- rotation = v
- modeAwareRefreshPreview()
- initRotationKnob()
-
- passedRotation = getParameterByName 'rotation'
- if passedRotation != null
- rotationKnob.setValue(passedRotation)
rotation = rotationKnob.getValue()
# Initial update.
diff --git a/src/coffee/rotationknob.coffee b/src/coffee/rotationknob.coffee
deleted file mode 100644
index f6b8f63..0000000
--- a/src/coffee/rotationknob.coffee
+++ /dev/null
@@ -1,28 +0,0 @@
-###
- * Demo code for knob element.
-###
-
-initRotationKnob = ->
- # Create knob element, 300 x 300 px in size.
- knob = pureknob.createKnob(88, 88)
- # Set properties.
- knob.setProperty 'angleStart', 0
- knob.setProperty 'angleEnd', Math.PI * 2
- knob.setProperty 'colorFG', '#C0C0C0'
- knob.setProperty 'colorBG', '#505050'
- knob.setProperty 'trackWidth', 0.4
- knob.setProperty 'valMin', 0
- knob.setProperty 'valMax', 359
- knob.setProperty 'needle', true
- # Set initial value.
- knob.setValue 0
-
- knob.addListener window.knobListener
- # Create element node.
- node = knob.node()
- # Add it to the DOM.
- elem = document.getElementById('rotation_knob')
- elem.appendChild node
- window.rotationKnob = knob
-
-window.initRotationKnob = initRotationKnob
diff --git a/src/less/variables.less b/src/less/variables.less
index eb6e015..78ef7f8 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -28,7 +28,7 @@
@picker-border: #444;
// Width variables.
-@sidebar-width: 400px;
+@sidebar-width: 300px;
@width2: 100px;
@full-width: 100%;
diff --git a/templates/index.html.twig b/templates/index.html.twig
index 81d776d..00d5258 100644
--- a/templates/index.html.twig
+++ b/templates/index.html.twig
@@ -31,11 +31,10 @@
+
-
-
{% include "_analytics.html.twig" %}