From 7496b8177266e1f42de10588615b64c44fc1c0e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20F=C3=BCrth?= <furth@scilifelab.uu.se>
Date: Thu, 11 Apr 2024 18:39:42 +0200
Subject: [PATCH] updated readme

---
 README.md                             | 19 ++++++++++------
 _extensions/micrograph/micrograph.lua | 31 ++++++++++++++++-----------
 example.qmd                           |  6 ++++--
 3 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 20c9afe..835b822 100644
--- a/README.md
+++ b/README.md
@@ -2,14 +2,10 @@
 
 Quarto shortcode extension to display micrographs in revealjs presentations
 
-_TODO_: Add a short description of your extension.
-
 ## Installing
 
-_TODO_: Replace the `<github-organization>` with your GitHub organization.
-
 ```bash
-quarto add <github-organization>/micrograph
+quarto add furthlab/micrograph
 ```
 
 This will install the extension under the `_extensions` subdirectory.
@@ -17,9 +13,18 @@ If you're using version control, you will want to check in this directory.
 
 ## Using
 
-_TODO_: Describe how to use your extension.
+- First argument is path to file.
+- Second argument is name of the blue channel (default `DAPI`).
+- Third argument is name of the green channel (default `Phalloidin`).
+- Fourth argument is name of the red channel (default `anti-FLAG`).
+- Optional arguments are:
+    - `width = "255"` default is 255px. 
+
+```
+{{< micrograph ./img/GFP.jpg DAPI Phalloidin GFP width="255" >}}
+```
 
 ## Example
 
-Here is the source code for a minimal example: [example.qmd](example.qmd).
+Check our the source code for a minimal example using revealjs for the presentation: [example.qmd](example.qmd).
 
diff --git a/_extensions/micrograph/micrograph.lua b/_extensions/micrograph/micrograph.lua
index a27a6c5..85d835a 100644
--- a/_extensions/micrograph/micrograph.lua
+++ b/_extensions/micrograph/micrograph.lua
@@ -1,16 +1,18 @@
 function micrograph(args, kwargs, meta)
     cmt = meta['show_comments']
         local src = args[1] or ''
-        local imgWidth = args[2] or '255' -- Default size is 255x255
-        local channelOne = args[3] or 'DAPI'
-        local channelTwo = args[4] or 'Phalloidin'
-        local channelThree = args[5] or 'Alexa647'
+        local channelOne = args[2] or 'DAPI'
+        local channelTwo = args[3] or 'Phalloidin'
+        local channelThree = args[4] or 'Alexa647'
+        local imgWidth = pandoc.utils.stringify(kwargs["width"]) or '255'
+        local imgHeight = pandoc.utils.stringify(kwargs["height"]) or '100%'
+
         local html = [[
             <div class='container-wrapper'>
                 <div class='canvas-container'>
                     <h6 style="color: blue">]] .. channelOne .. [[</h6>
-                    <canvas id='redCanvas' width=']] .. imgWidth .. [[' height=']] .. imgWidth .. [['></canvas>
-                    <div class='slider-container'>
+                    <canvas id='redCanvas' width=']] .. imgWidth .. [[' height=']] .. imgHeight .. [['></canvas>
+                    <div class='slider-container channelOne-sliders'>
                         <label for='redMax'>Max:</label>
                         <input type='range' id='redMax' min='0' max='255' value='255'>
                         <label for='redMin'>Min:</label>
@@ -23,8 +25,8 @@ function micrograph(args, kwargs, meta)
                 </div>
                 <div class='canvas-container'>
                     <h6 style="color: green">]] .. channelTwo .. [[</h6>
-                    <canvas id='greenCanvas' width=']] .. imgWidth .. [[' height=']] .. imgWidth .. [['></canvas>
-                    <div class='slider-container'>
+                    <canvas id='greenCanvas' width=']] .. imgWidth .. [[' height=']] .. imgHeight .. [['></canvas>
+                    <div class='slider-container channelTwo-sliders'>
                         <label for='greenMax'>Max:</label>
                         <input type='range' id='greenMax' min='0' max='255' value='255'>
                         <label for='greenMin'>Min:</label>
@@ -37,8 +39,8 @@ function micrograph(args, kwargs, meta)
                 </div>
                 <div class='canvas-container'>
                     <h6 style="color: red">]] .. channelThree .. [[</h6>
-                    <canvas id='blueCanvas' width=']] .. imgWidth .. [[' height=']] .. imgWidth .. [['></canvas>
-                    <div class='slider-container'>
+                    <canvas id='blueCanvas' width=']] .. imgWidth .. [[' height=']] .. imgHeight .. [['></canvas>
+                    <div class='slider-container channelThree-sliders'>
                         <label for='blueMax'>Max:</label>
                         <input type='range' id='blueMax' min='0' max='255' value='255'>
                         <label for='blueMin'>Min:</label>
@@ -51,7 +53,7 @@ function micrograph(args, kwargs, meta)
                 </div>
                 <div class='canvas-container' style='vertical-align: top;'>
                     <h6>Merge</h6>
-                    <canvas id='originalCanvas' width='200' height='200'></canvas>
+                    <canvas id='originalCanvas' width=']] .. imgWidth .. [[' height=']] .. imgHeight .. [['></canvas>
                 </div>
             </div>
 
@@ -67,8 +69,9 @@ function micrograph(args, kwargs, meta)
                 .canvas-container canvas {
                     max-width: 100%;
                     height: auto;
+                    border-radius: 10px;
                 }
-    
+
                 .slider-container {
                     display: block;
                     line-height: 0.5;
@@ -87,6 +90,10 @@ function micrograph(args, kwargs, meta)
                     margin-bottom: 5px; /* Adjust vertical spacing between input and label */
                 }
                 
+                /* Adjust the color of the slider thumb for green sliders */
+                .channelOne-sliders::-webkit-slider-thumb {
+                    background-color: blue; /* Change the color as desired */
+                }
                 
             </style>
             <script src="https://docs.opencv.org/master/opencv.js"></script>
diff --git a/example.qmd b/example.qmd
index 80640e5..178cd39 100644
--- a/example.qmd
+++ b/example.qmd
@@ -4,7 +4,9 @@ author: "John Doe"
 format: revealjs
 ---
 
-## Microscope slide
+## Micrograph result
 
-{{< micrograph ./resources/MAX_240329_PC3_Rab_Anti_FlagTag_647_E300_I300_Phallodin_594_E100_I500_DAPI_E300_I300_1_MMStack_Pos0.ome.jpg 255 DAPI Phalloidin anti-FLAG >}}
+{{< micrograph ./resources/MAX_240329_PC3_Rab_Anti_FlagTag_647_E300_I300_Phallodin_594_E100_I500_DAPI_E300_I300_1_MMStack_Pos0.ome.jpg DAPI Phalloidin anti-FLAG width="255" >}}
 
+- **Primary antibody:** 1:1000 overnight
+- **Secondary antibody:** 1:1000 for 1h
\ No newline at end of file