Proteopedia:Cookbook: Difference between revisions
Eric Martz (talk | contribs) |
Eric Martz (talk | contribs) |
||
| (45 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
This page contains some advanced editing information. Make sure you looked at [[Help:Getting Started in Proteopedia]] and [[Help:Editing]] before you delve into this page. | |||
==Text color== | ==Text color== | ||
'''{{Font color|red|Please}} | |||
{{Font color|green|see}}''' | |||
[[Help:Coloring text]]. | |||
==Tables== | |||
Most of the tags to define a HTML table [https://www.w3schools.com/html/html_tables.asp] are valid in a Proteopedia wiki text. | |||
The official [https://www.mediawiki.org/wiki/Help:Tables Help:Tables] warns "''Tables may be created in wiki pages. As a general rule, it is best to avoid using a table unless you need one. Table markup often complicates page editing''." | |||
A good alternative is available at [https://www.tablesgenerator.com/mediawiki_tables tablesgenerator.com] with a good interface to generate tables that can be inserted in Proteopedia pages. | |||
==Checkboxes, Buttons, Radio Buttons== | ==Checkboxes, Buttons, Radio Buttons== | ||
These can be used to toggle something in JSmol on/off, or for more complicated purposes, including running any JSmol script. See working examples at [[Proteopedia:DIY:Templates]], and more details in the [http://wiki.jmol.org/index.php/MediaWiki/ExtensionV4 Jmol Wiki]. | These can be used to toggle something in JSmol on/off, or for more complicated purposes, including running any JSmol script. See working examples at [[Proteopedia:DIY:Templates]], and more details in the [http://wiki.jmol.org/index.php/MediaWiki/ExtensionV4 Jmol Wiki].<br/> | ||
Also see [[Jmol/Interactivity]]. | |||
==Font Awesome icons on pages <span class="fas fa-child"></span>== | ==Font Awesome icons on pages <span class="fas fa-child"></span>== | ||
| Line 54: | Line 38: | ||
'''Note:''' assign unique text to green links, to be able to address each one of the green links on a given page. Otherwise the jump will go to the first occurrence of the word(s). | '''Note:''' assign unique text to green links, to be able to address each one of the green links on a given page. Otherwise the jump will go to the first occurrence of the word(s). | ||
==JSmol== | ==JSmol examples and documentation== | ||
[https://chemapps.stolaf.edu/pe/protexpl/htm/seleccmd.htm | Tips, examples and advanced help for using JSmol are available at [https://wiki.jmol.org wiki.jmol.org], a complete Jmol/JSmol [https://chemapps.stolaf.edu/jmol/docs/ interactive script documentation] and | ||
Jmol [https://chemapps.stolaf.edu/pe/protexpl/htm/seleccmd.htm select commands] with explanations. | |||
==Translucent Cylinder== | ==Translucent Cylinder== | ||
| Line 81: | Line 66: | ||
==Synchronizing molecules== | ==Synchronizing molecules== | ||
Please see [[Jmol/Synchronization]] | Please see [[Jmol/Synchronization]] | ||
==Capturing Movies== | |||
On pages titled with a [[PDB ID]], simple rocking or spinning movies can be captured using the ''Export Animated Image'' link under the molecule, or by clicking ''FirstGlance'' in the Resources block, and then clicking ''Save Image or Animation for Powerpoint'' under the molecule (see | |||
[http://firstglance.jmol.org/slides.htm overview]). | |||
Complex operations and manual movements with the mouse can be captured as movies by "screen recording". Here are [http://firstglance.jmol.org/videocapture.htm examples and instructions]. | |||
==Movies mp4== | ==Movies mp4== | ||
Click the ''Play'' icon below to start the sample movie.<br> | Click the ''Play'' icon below to start the sample movie.<br> | ||
<html5media height="300" width="300">/mp4/Resolution_holton.mp4</html5media> | <html5media height="300" width="300" loop>/mp4/Resolution_holton.mp4</html5media> | ||
{{Clear}} | {{Clear}} | ||
<pre><html5media height="300" width="300">/mp4/file.mp4</html5media></pre> | <pre><html5media height="300" width="300" loop>/mp4/file.mp4</html5media></pre> | ||
Shows the movie with the with a width of 300 and a height of 300 pixels. | Shows the movie with the with a width of 300 and a height of 300 pixels. Including "loop" makes the movie loop back to the beginning while playing. | ||
A movie controller is also displayed at the bottom beneath the movie. If the height is too small, the controller will not be displayed. Clicking on the movie stops playing, and | A movie controller is also displayed at the bottom beneath the movie. If the height is too small, the controller will not be displayed. Clicking on the movie stops playing, and clicking again resumes playing in both Mac OS X and Windows. This is | ||
useful in case the controller is not displayed ("controller=false"). | useful in case the controller is not displayed ("controller=false"). | ||
== Embedded Youtube == | == Embedded Youtube == | ||
<html5media height=" | <html5media height="337" width="600">https://www.youtube.com/watch?v=Q1ftYq13XKk</html5media> | ||
<pre><html5media height="337" width="600">https://www.youtube.com/watch?v=Q1ftYq13XKk</html5media></pre> | |||
== Embedded Youtube Shorts == | |||
<html5media height="300" width="300">https://www.youtube.com/shorts/9hLJao96r0k</html5media> | |||
<pre><html5media height=" | ==Embedded Vimeo == | ||
<html5media height="360" width="640">https://vimeo.com/235321305</html5media> | |||
<pre><html5media height="360" width="640">https://vimeo.com/235321305</html5media></pre> | |||
== Quiz == | == Quiz == | ||
| Line 115: | Line 114: | ||
</quiz> | </quiz> | ||
</pre> | </pre> | ||
== Image as clickable link == | |||
People tend to click an image expecting it to take them to more about that image, via a hyperlink. Below is the wikitext to do this. This method goes to only one link target, regardless of where you click within the image. If you want to have different targets for different parts of the image, see the next section below on ''Imagemaps''. | |||
<imagemap> | |||
Image:Cys-spacefilled.png|100px | |||
default [[Introduction to molecular visualization]] | |||
</imagemap> | |||
Clicking this image goes to ''Introduction to molecular visualization''. | |||
<PRE> | |||
<imagemap> | |||
Image:Cys-spacefilled.png|100px | |||
default [[Introduction to molecular visualization]] | |||
</imagemap> | |||
</PRE> | |||
For more options, such as putting a border around the image, or aligning it to the right side of the page, please see [[Proteopedia:Image as clickable link]]. | |||
== Imagemaps == | == Imagemaps == | ||
| Line 149: | Line 166: | ||
[http://image-mapper.mgwalk.com/ Here]'s a nice tool for finding the coordinates in an image. | [http://image-mapper.mgwalk.com/ Here]'s a nice tool for finding the coordinates in an image. | ||
Howeer, according to http://groups.google.com/group/google-excanvas/browse_thread/thread/affca8a3fcb5cf4d/44589930cf53d3dd , the link http://image-mapper.mgwalk.com/ has been updated to the link http://www.image-maps.com/ --> | Howeer, according to http://groups.google.com/group/google-excanvas/browse_thread/thread/affca8a3fcb5cf4d/44589930cf53d3dd , the link http://image-mapper.mgwalk.com/ has been updated to the link http://www.image-maps.com/ --> | ||
==Structure Gallery Generator== | |||
A list of PDB codes can generate small images and links automatically. See the [[Structure Gallery Generator]]. | |||
==Theoretical Models== | ==Theoretical Models== | ||
| Line 232: | Line 252: | ||
[http://bental.tau.ac.il/new_ConSurfDB/main_output.php?pdb_ID=1stp ConSurf]. | [http://bental.tau.ac.il/new_ConSurfDB/main_output.php?pdb_ID=1stp ConSurf]. | ||
<!-- end of content inserted by the ConSurf template --> | <!-- end of content inserted by the ConSurf template --> | ||
==ConSurf Documentation== | |||
[[ConSurf/Index]] has a list of many articles about ConSurf and evolutionary conservation. | |||
==Combine Proteopedia scenes with JSmol scripting== | |||
'''Advanced'''. You may wish to call up a scene saved via Proteopedia from within inline JSmol scripts placed in a page. For example, this can be useful for some pages that use multiple structures to call up a certain scene at the start of JSmol script be sure the user has the structure or scene open that you wish the inline JSmol script to build upon. Please see [[Combine Proteopedia scenes with inline JSmol scripting]]. | |||
==Mix and Edit scenes from other pages== | |||
To load on SAT scenes from other Proteopedia pages and become able to edit them, simply insert the page ID (wgArticleId) of other pages between < > like this: '''<!-- /471747/ /351028/ -->''' somewhere in your page. You may insert this way as many page IDs as you want, and [[Scene_authoring_tools|SAT]] will allow you to load any scene from those pages. From that moment, any edited scene will be saved under your page, without altering the original scene nor the source page. | |||
* How to find the page ID? Edit or view the source code (wikitext) of the page from which you want to borrow the scenes, find the <code>scene</code> tag and pick the number after the first slash, e.g. that in red here: | |||
<scene name='58/<span style="color:red;">587840</span>/Cartoon_rainbow_and_water/1'>Color by group</scene> | |||
==See Also== | ==See Also== | ||
| Line 237: | Line 269: | ||
* [[Proteopedia:DIY:Templates]] | * [[Proteopedia:DIY:Templates]] | ||
* [[DRuMS#The DRuMS Color Schemes|DRuMS color templates]] | * [[DRuMS#The DRuMS Color Schemes|DRuMS color templates]] | ||
* [[Jmol/Interactivity]] | |||