MEGAN RIEL-MEHAN
  • Home
  • Science Visualization
  • Research
    • Initial findings
    • Image processing
  • Civic Tech
  • Fine Art
  • News
  • Methods and Notes
  • CV and Resume

Deploying on gh-pages

8/7/2019

1 Comment

 
These are the steps to get certificates for both `www` subdomain and the apex domain. It's a bit of a workaround, and the certificates may expire in the long run, but it is the only way I found to get all the options I wanted:
  1. Both `www` and apex domain serve the same content. 
  2. Served over HTTPS
From this forum https://github.community/t5/GitHub-Pages/Does-GitHub-Pages-Support-HTTPS-for-www-and-subdomains/td-p/7116: GitHub doesn't currently support creating a certificate that covers both your root domain and your www subdomain. We only generate a certificate for the exact domain that you specify in the custom domain input box. ​
The other impetus for this is Github's recommendation that you use the www subdomain as the custom domain to take advantage of their CDN:
​We strongly recommend that you use a www subdomain for these reasons:
  • It gives your GitHub Pages site the benefit of our Content Delivery Network.
  • It is more stable because it is not affected by changes to the IP addresses of GitHub's servers.
  • Pages will load significantly faster because Denial of Service attack protection can be implemented more efficiently.

Warning: If your domain has HTTPS enforcement enabled, GitHub Pages' servers will not automatically route redirects. You must configure www subdomain and root domain redirects with your domain registrar.

1. Set up apex domain

1. Configure your custom domain using an A record with your DNS provider. Point to one of the following servers:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
2. Add custom apex domain to github pages, eg `townhallmaine.org`
3. Wait for SSL certificate to be issued, and then click `Enforce HTTPS` in your GitHub options. 
Picture

2. Set up the www subdomain

1. Change the custom domain on github to the www subdomain. The url should continue to work, but now no longer served over HTTPS. 
Picture
2. Change the default CNAME record that used to point `www` to `@` to point `www` to <githubname>.github.io
Follow your DNS provider's instructions to create a CNAME record that points your subdomain to your default pages domain. For example, if you own the subdomain www.example.com, you can configure a CNAME record to point www.example.com to YOUR-GITHUB-USERNAME.github.io. DNS changes can take over a full day to update, and the wait varies among DNS and hosting providers.
3. Wait again for the certificate to be issued, then reselect `Enforce HTTPS`.
Now all 4 domains should work: 
  1. https://www.townhallmaine.org
  2. https://townhallmaine.org
  3. http://www.townhallmaine.org
  4. http://townhallmaine.org
1 Comment

Generating obj meshes and ambient occlusion texture maps for use in THREE.js

4/30/2018

0 Comments

 
Picture
Github Repo (with scripts and .c4d starter file)
Goal: Automate a process create meshes and ambient occlusion texture maps for THREE.js from ome.tiff files of microscopy images. More specifically, we have 6 image files (1 for each stage of the cell cycle) for each of our published cell lines.

Method:
1. use USCF chimera to convert volumentic data to .obj files. 
2. use cinema4D to create UVs and texture maps. We started with a process developed by Graham Johnson using the C4D's GUI and Dan Toloudis and I converted it to python using MAXON's C4D python SDK and uPy

Results: 
One lesson was how difficult the MAXON documentation was to parse, which is why I decided to write this up.
For simple meshes the process was reasonably fast, the more complex meshes would hang for a long time but eventually finish. This was very polygon count dependent, changing the polygon reduction from 90% to anything lower made a huge difference in processing time. 

Creating the OBJ files 

Download UCSF chimera
The first step is to open the tiff files in chimera, adjust the settings, and then export the .obj.
The main settings to change are:
  • the voxel sizing (if it's not 1, 1, 1) 
  • the step size
  • the isovalue (level)
The nice thing UCSF Chimera does is exports the .obj as a single nested file, instead of having to deal with multiple files. This is currently only true for Chimera and not ChimeraX, but may change in the future. 
Node template to create chimera code. 

    
To run a script in chimera, just right click on it and choose open with chimera. 
Picture
chimera-export.cmd

    
The result of this script is a whole set of .obj files to process. 

Creating texture maps in C4D

To start with, make sure to download and install uPy. 
Download upy
visualcell.py script imports and setup

    

Opening and merging files

We had two files to start with, the .obj file containing our meshes, and the C4D starter file with our render settings and pre-made deformers. One issue we ran into right away was being able to open the .obj file without the dialog box popping up, using MergeDocument without the SCENEFILTER_DIALOGSALLOWED flag fixed this. 
visualcell.py importing files 

    

Looping over elements

We make heavy use of this pattern throughout the code. We could have optimized it do less loops, but it was easier to follow the logic if we broke it down to the steps we would do in the GUI. 
visualcell.py Looping over elements in the hierarchy 

    

Creating/applying deformers

We experimented with two different ways of applying deformers. One was to make the deformer using the API, and the other was to create the deformers in a pre-made file and then apply them using parenting. We went with this second method because it was easier to set up, and some things are not exposed to the API, including the shader for the displacer deformer, but for some applications it's good to know how to make the deformers directly. 
Code Editor

    

Current state to object

After we've reduced the polygons, smoothed, and deformed the objects, we need to convert them to meshes. In the GUI you do this by right clicking on each one in the object bar and selecting 'current state to object'.
visusalcell.py current state to object

    

Generating UV maps

Now we need to create UVs for our newly created meshes.
Steps for doing this in the GUI: 
​
  1. Change C4D Layout: from Standard to {BP-UV Edit}
    1. In the ObjectManager (lower left), select one of the meshes, e.g. "TUBA1B_Int_20170124_C07_004.czi_cell_seg.tiff_1"
    2. In the UV editing window (upper right), turn on uv mesh/ShowUVmesh
    3. Select the Texture tag of that mesh in the Object Manager
      1. In the Attributes Manager, confirm (or change if needed) the Tag's Projection method to anything other than UVW Coordinates, e.g. "Spherical" (if you change these around, you should see UVs change in teh UV Editing Window
    4. Right click on the tag to choose "Generate UVW Coordinates"
    5. Optimize the UVs
      1. Choose the UV Mapping/OptimalMapping tab in the lower right panel (likely grayed out at this point)
      2. Select the new UV tag on the mesh object that you just creted in the Object Manager
      3. In the top Toolbar, select the Polygon edit mode (grey cube with orange top face)
      4. The Optimal Mapping panel should now be active
        1. Choose the Optimal Angle option
        2. Set Optimal Angle's parameters to:
          1. Preserve Orientation = off
          2. Stretch to fit = on
          3. Maximum Distortion = 1%
          4. Relaxation Steps = 0
          5. Spacing = 1%
        3. Click [Apply]
          1. This should take ~1 sec for the simple DNA shapes, ~10 sec for the membrane, and but up to 3 minutes for an ugly mesh like Microtubules.
        4. The ugly Mesh should now be spread realtively evenly in the UV Editing Panel
      5. Repeat for each mesh
visual.py genenerate UVs

    

Baking AO texture

Next we need to generate and save the ambient occlusion texture. We went back and forth on using this command and trying to set the settings in the GUI. We did find a command that allows you to trigger a button press in the GUI. But we never got it to bake correctly. The c4d.utils.BakeTexture command was also difficult to figure out, but after some research Dan was able to get it to work with this BakeOneOjb class that creates a new thread for the baking progress. 
Steps for doing this in the GUI:
Step 6: Apply a Bake Texture tag and Bake the textures
  1. Save the C4D file and give it a name- otherwise the following steps won't work
  2. Add a Subdivision Surface object to the scene and set: Sudivisions: Editor = 1, Render = 1
  3. Select one of the meshes that has new UVs from Step 4 and make it a child of this SubDivision Surface
  4. Add a Bake Texture tag to the mesh
  5. Set parameters for the Bake Texture tag:
    1. In the Basic panel:
    2. Set a file path with sensible name
    3. Increase resolution to 1024^2
    4. Pixel border = 3
    5. Turn on Options panel:
    6. Options/Ambient Occlusion = on
    7. Set Options/AmbientOcclusion/OptimalMapping= off
  6. Click [BAKE]
visualcell.py

    

Saving obj objects

The final step is to save the meshes as .obj files and then close everything out. We save the file as a tmp file just so the 'are you sure you want to close without saving' dialog didn't stop the process. 

    

Putting it all together

We started by just running through one file, but the goal of this was to be able to loop over a whole list of files. 
visualcell.py

    
0 Comments

iOS iframe issues

4/30/2018

1 Comment

 
Thanks to the collective wisdom of the internet, I was able to find why my iframed apps were not working on iOS but were in every other browser/device. iOS sizes iframes based on the content size, which screws things up if you're using 'overflow: scroll' in your application. 
We tested a number of fixes, and this what what finally worked. 
iframe HTML

    
1 Comment

Adding local fonts with webpack

1/8/2018

0 Comments

 
webpack.config.js

    
​Get font files:
https://google-webfonts-helper.herokuapp.com/fonts

Add to:
assests/fonts/

fontawesome for React
​https://fontawesome.com/how-to-use/js-component-packages#react

Notes:
*FOUC: flash of unstyled content. 
0 Comments

Call stack notes

11/13/2017

1 Comment

 
The call stack: 
    Array with two methods:
    first in last out. 
        push()
        pop()
        peak() //looks at the first one. 

Callback queue 
    first in, first out. 
    runs by adding them to the call stack
    basically an array, with two special methods:
        enqueue (unshift())
        dequeue (shift())

Hoisting variables is done to make sure everything is declared before adding to the call stack. 

this[this.length++] = value //increments after evaluation 
this[++this.length} = value //increments before evaluation 
1 Comment

Travis CI

11/9/2017

0 Comments

 
Continuous integration, tells you automatically if tests are passing or failing. 
.travis.yml: set project to be a node project
  language: node_js
  node_js : 
       - "7"
  services:
      - mongodb

npm test will run, you can add your lint run first and then run tests using '&'
0 Comments

Notes on deploying to heroku

11/9/2017

0 Comments

 
Procfile, runs commands before starting server, each command starts dyno
heroku create -a [name]
git push heroku [branch-name]:master
0 Comments

Building navigation menu

11/8/2017

1 Comment

 
We are working on building a navigation element that has the following behaviors: 
1. A switcher that changes the top level list of elements to pick between a nested list and a flat list. 
2. When the list is nested, selecting an element will unfold the elements below it. 
3. When the user selects one of the nested elements it slides to the right to show the final set of element. 

Making ajax calls to data

1. Make action attached to metadata. 
    - make constant in constants using makeConstant. 
    - make action in actions 'requestAllMetadata'. 
2. On sidebar: in componentDidMount add requestAllMetadata as a prop. Add it to the mapping that will get passed up to the state. 
3. Redux-logic: middleware, provides hooks to validate before data goes into the store. 
    - everything that has to do with event business logic goes into logics. We are working in the metadata branch of state. 
    - using axios to make ajax calls. 
* inject parameter even when you don't need it so you can mock it in tests. 
1 Comment

Notes from learning react-redux

11/7/2017

1 Comment

 
Setup structure 
Selectors: functions that get data from the state for you
Actions: incoming state changes. Generally have payload (new data) and type (key used to route the action). 
Reducer: handling the actions. Generally large switch statements that route actions. Make sure by default you return the state even if there was no change, because the reducer is getting called whether or not it needs to so you could lose track of your state. 

Currently, the three branches of our state are metadata (basically all the data that is not visual content), content (visual content displayed on the site), and selections (active selections made by the user).

To connect state to a component: use connect, which takes two arguments. The first is the function that returns a mapping of the particular element of the state you want to hand from the state to a property on the component, and the second is a property to give the component that will become a function wrapped in dispatch. Ie: {prop : fn} becomes dispatch(fn(prop)).

In both cases, do not directly access the state nested objects (ie like state.selections.navTab), or directly call the dispatch function, instead pass functions that take care of the mapping for you.





1 Comment

Comparing major protrusions

10/12/2016

1 Comment

 
Goal: Compare the average volume of the major protrusion for untreated cells and CK666 treated cells. 

Got all the major protrusion volumes

untreated.largest.prot = c(c14_protrusions_rv2$V3, c15_protrusions_rv$V3, c10_protrusions_rv2$V3, c12_protrusions_rv$V3)

Found the mean and the standard dev
mean(untreated.largest.prot)
sd(untreated.largest.prot)


Note: for setting all NAs to 0:
x[is.na(x)] <- 0

Results:
The average volume of the major protrusion is higher, but also has a very large standard deviation.
1 Comment
<<Previous

    Categories

    All
    Animation
    Cell Crawling
    HBV
    Heroku
    PGRN.org
    R
    Web Development

    RSS Feed

Download CV
Contact me:
  • Home
  • Science Visualization
  • Research
    • Initial findings
    • Image processing
  • Civic Tech
  • Fine Art
  • News
  • Methods and Notes
  • CV and Resume