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. ![Logo](logo.png) @@ -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" %}