A Newbie’s Experience in the WebXR Weekend Challenge 2018

Do you know anything beyond how to make basic circle and rectangular in VR?

I sure as hell didn’t, at least on June 29 when I decided it was an excellent idea to join the WebXR Weekend Challenge at Microsoft Reactor!

I was mentally freaking out and wondering what I was doing. If you read my Twitter posts, you would know that I love VR – and know next to nothing on the actual coding part. My last VR-code-related tweet was a floating ball I created by following A-Frame tutorial.

Once I sat down though, it wasn’t so bad. The lady I first met turned out to be a mentor from Microsoft – they had a VR team coming all the way from Seattle this weekend for this event! Microsoft have really throw all in for this event. They provided the space with office snacks and drinks, a team of WebVR-specialized mentors, a draw for a Windows Mixed Reality headset prize,  and another opportunity to get the headset by submitting a project interest form.

During the pitch, one of the person on stage was interested in the use of VR in science but also didn’t know WebVR,  so he’s here to learn! Fellow WebVR learner spotted! I later learned that he is a high school student working with VR in Berkeley Lab during the summer.

High School.

Talk about modern technology in our academic system – the only thing I know to do with computer in high school was reading online stories, surfing MySpace, and accidentally getting our family PC infected while watching videos.

Our mentors are more familiar with Babloy.js – I totally didn’t realized Babylon.js is a Microsoft open source project until then – so that’s what we went with.

My teammate, Sam, had a multi-page tiff file of a butterfly wing, and the initial step was simple – materialize it in WebVR. One of our mentor suggested an A-Frame project that shows MRI in VR: aframe-mri-poc. Fortunately I had went through the A-Frame tutorial, and the code was very easy to read. The developer simply used <a-image> tag to source multiple images, lower opacity, then position the images side by side. We just have to implement that with Babylon.js, preferably done with some sort of loop so we don’t have to manually create an image tag for each image – the tiff file had hundreds of images.

Turned out Babylon.js has a transparency example that does something similar to what we had in mind. With Babylon, it was definitely more of a JavaScript language. Instead of a bunch of <a-image> tags, we did a loop where we called the image link with Texture() and created planes using MeshBuilder’s CreatePlane().

The number of images and the size expected of tiff files was just too heavy on the performance though. We spent most of first night trying to research a solution that would parse the files. Eventually, we just went with converting the images to jpeg beforehand. Sam used Google Cloud’s features to do mass conversion of the tiff file and got the file names ordered for easy looping.

Now, onto the features. With the image in VR, how would user interact with it? Several ideas popped up throughout the hackathon – we kind of just came up with ideas and tried them as we went. We moved from just uploading science images to medical images. Our Microsoft mentor connected us with a medical professional who also work with VR, and we got to Skype and learned about the industry from him. By the end, our VR model can be move, scale, have control of threshold, and have drawing on it that can erase at the press of a virtual button.

I started with the move feature. I was totally confused by controller, since that was never much of an issue when you are just creating floating object. This time, a fellow participant graciously lent us his Oculus headset, so we were going to target to that headset, meaning controller is a must. My targeted object would move and rotate at the same time, and I couldn’t figure how to fix it. Fortunately, my teammate gave it a try and figured it out.

Our mentors were amazing, and we had at least one person there to patiently explain and debug issues with us during the entire hackathon. That was particularly helpful when Sam was working with the painting tool and the resulted performance issues. I also got more help with understanding how the code behind controller works. Another mentor helped me figure out why was my scale button was getting smaller instead of changing the object that I want to scale.

During the hackathon, I learned various concepts and terminologies that I am going to research more about, such as mesh, shader, and how different controller operate (browser war renewed in the form of VR controller in 2018….). I also got to talked to various professionals about their view on VR – VR artists, doctor, and Microsoft team. The later of which showed a Teia Solution building demo by Stereograph3D built with Babylon.js after I asked them about architecture in WebVR, which had my jaw dropped (you can do that in a browser?).

Being the only team to do the medical category… we won the medical category for the Weekend Challenge, but the greatest prize is the learning experience, which was my goal for the hackathon. This is the result:

And here our mentor having some fun with the app – doesn’t our skullman look happy? :

I also got selected to received the Mixed Reality headset, which was amazing and really helpful because I can’t afford a headset now. Once I get the set, I hope to do a review. In addition, since the project we did was true hackathon-style spaghetti code and geared toward Oculus, maybe I can clean it up and gear it toward the new headset?  I only did a very small portion of the codebase since I struggled a lot with the controllers, so I really hope to study more and get a better grip of what was done.

Errors Encountered Setting Up Django Project

I recently got a project, based in Django. Like all new project, I had to set up the development environment before working on it. The post is about issues I troubleshoot while setting up the development environment:

  • Python Virtual Environment: When a tool like virtualenv is setting up a virtual environment, it creates it base on the computer’s Python version unless we specify a different version in the command. The project was Python 2.7, so the setup encountered errors because my computer use Python 3 natively. If you are not sure what Python your computer is running on, a simple python –version will show it. To ensure there are no error, I use the command virtualenv -p python2.7 venv.
  • OS & Package Dependencies: Apparently Linux require manually installing several dependencies for matplotlib & scipy. At least according to the project README, which was written for Linux. As MacOS user, I didn’t have to worry about that.
  • Compiler in OS: I do, however, have to worry about command invocation not finding my compiler when I doing npm install. To resolve, use command CXX=clang++ npm install.
  • dyld: Library not loaded: executable_path/../.Python” => Homebrew & Python Path: The errors occurs after ./manage.py runserver, and it is a result of broken Python symlink after a Homebrew update I did for another project. Here are the steps to resolve:
    1. Deactivate the virtual environment.
    2. Upgrade the virtual environment tools. In my case, I did pip install –upgrade virtualenv and pip install –upgrade virtualenvwrapper.
    3. Delete broken symlink using find venv -type l -delete while inside the project directory.
    4. Now redo the virtual environment set up. In my case, it was virtualenv -p python2.7 venv => source venv/bin/activate => pip install -r requirements.txt.

Day… 8? Catch ups! Also, doing some select input & validation in Redux Form!

Some Personal Update

Wow, been a while since I last blog. Couple of things happened:

  1. I decided to dive fully into the Udemy React course pack I got (Modern React with Redux).
  2. A friend gave me a book on algorithm to study for future interview, which I sadly could not understand. I ended up purchasing an algorithm book that I got from the library previously – I only read it half way before it was due, but I did understood it. Once finish that, I am going to give my friend’s book another crack.
  3. I found a few internship to apply, with one requiring that I start on opensource contribution, which require me to set up an opensource project’s environment in the first. For those who have a bit more experience in development, I think we all know that can go……
  4. My family decided to travel for 3 whole weeks in Japan & Hong Kong, where the last 2 week consisted of living in a tiny bedroom with no table. My neck did not appreciated the experience. While I love – love – Japan, 3 weeks of 24 hours living in extremely close quarter with anyone is a bit too much. I have never been so happy to be back in San Francisco. If I ever tell you I am going to travel with my family to Asia for over 2 week in the future, STOP ME!

*cough* Yea, it’s been a bit eventful. The fact that I got sick the week I got back doesn’t help.

Anyway, I finally got some progress. I started with the Form component. The key issues I worked on are validation and incorporating <select> tag in Redux Form. I started coding with the example code in Redux Form’s  Field-Level Validation page.

Problem A: Select Input Tag

In the example, each input element is a <Field /> component, which contains an attribute named “component”. The component attribute accepts a method, which is named renderField() in this case. Props are passed to the called method – again, renderField in this case. The renderField() method contains code that outputs <input> tag using the data in the props passed by <Field />.

The problem for me is that I wanted to output one single <select> input element, while renderField()‘s code only output <input> HTML. For those who are not familiar with HTML, select is one of the very few input element that does not use <input> as its HTML – it uses <select> and the child element <option>.

While I can hard code the <select> <option> HTML, is there a way I can use the component feature to dynamically generate out the input fields?

So there are various solutions I can tried:

1) Check Redux Form’s <input> type

Natively, <input>’s type attribute does not recognize select as possible values. But hey, you never know – maybe Redux Form’s Field component do. It’s not in the documentation either, but let’s give it a try!

Result: Nope.

2) Change <Field /> into <Field></Field>

Maybe if I put in an <option> type somewhere? But Field component in the example is self-enclosing…… Let’s try to change it into <Field></Field> and put <option> between!

Result: Nah…

3) Conditional statement in renderField()

I guess I can use conditional statement to check if the input type is select…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const renderField = ({ input, label, type, children, meta: { touched, error } }) => (

<div>
    <label>{label}</label>
    <div>
      {
        (type === "select")
        ? <select {...input}><option>Test</option></select>
        : <input {...input} placeholder={label} type={type} />
      }
      { touched && error ? <span> {error} </span> : '' }
    </div>
  </div>

)

Result: Of course it works, but the conditional statement will be check each time <Field> is rendered. I don’t want to add unnecessary complexity. My app is small, so it only have 2 input element, but I want to build it to have good maintainability if the code get bigger.

4) Add a new method, such as renderSelect()

I could put the select HTML all into a new method, used as a value for <Field />’s component attribute only when <select> is needed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const renderField = ({ input, label, type, meta: { touched, error } }) => (

<div>
    <label>{label}</label>
    <div>
      { <input {...input} placeholder={label} type={type} /> }
      { touched && error ? <span> {error} </span> : '' }
    </div>
  </div>

)
const renderSelect = ({ input, label, type, meta: { touched, error } }) => (

<div>
    <label>{label}</label>
    <div>
      { <select {...input}><option>Test</option></select>
      }
      { touched && error ? <span> {error} </span> : '' }
    </div>
  </div>

)

Result: That’s better! But…

Problem B: Option tag!

As I mentioned earlier, <option> is a child element for the <select> tag. For those unfamiliar with HTML, option is used to output the choices in an select input element. In my case, my options are: Muni, Bart, and Caltrain.

Also mentioned earlier was that <Field /> is a self-enclosing tag in the examples. My question lies in how I should insert something like option, which is a child element and is different for each select input element?

Let’s try some possible solution:

1) Hard Code:

In this case, I only have one select input type, so I can hard code the options of muni, bart, and caltrain.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const renderSelect = ({ input, label, children, meta: { touched, error } }) => (

<div>
    <label>{label}</label>
    <div>
      {
        <select {...input}>
          <option value="">--None--</option>
          <option value="muni">Muni</option>
          <option value="bart">Bart</option>
          <option value="caltrain">Caltrain</option>
        </select>
      }
      { touched && error ? <span> {error} </span> : '' }
    </div>
  </div>

)

Result: … Yea, it works, but only for one select element. What am I going to do if I add more select input element in the future???

2) Change <Field/> to <Field></Field> & insert <option> between them

It didn’t work earlier during Problem B because I had hope that if I do <input type=”select”> in renderForm(), putting in <option> between <Field></Field> would somehow work due to Redux Form magic. Such magic did not exist.

But, now I have a renderSelect(), which outputs <select> HTML, will putting <option> between opening and closing Field tags work?

Result: Nope. In hindsight, if renderSelectInput() outputs <select> HTML, how would it even know to insert all the <option> tags before the closing tag of </select>?

3) Check if the props passed by <Field /> include child element data

Wait, do the props passed from <Field /> to renderField()/renderSelectForm contain data from child element?

1
2
3
4
5
6
7
8
9
10
11
const renderSelect = ({ input, label, children, meta: { touched, error } }) => (

<div>
    <label>{label}</label>
    <div>
      {  <select {...input}>{children}</select> }
      { touched && error ? <span> {error} </span> : '' }
    </div>
  </div>

)

Result: Ok, that works! Yes!

Problem C: Validation

Field component contain an attribute called validation. If the method or value called returns anything other than undefined, it knows an error have occurred and passed the returned String to the method called by components as the prop meta.error.

If you take a quick look at the example’s top section, the validation is not exactly fun to read. It is also hard coded and not flexible. So, let’s create a method for validation that generates error code more dynamically:

1
2
3
4
5
6
7
8
9
const validate = values => {
  const errors = {};

const options = ["muni", "bart", "caltrain"];
  errors.agency = (!values.agency || options.indexOf(values.agency) === -1 ) ? "Please select a valid agency" : '';
  errors.stopCode = ( isNaN(Number(values.stopCode)) || values.stopCode.length &lt; 3 || values.stopCode.length > 7 ) ? "Please enter a valid stop code" : '';

return errors;
}

And by adding valid as an argument for reduxForm(), the call to validate() would be automatic due to <a href=”https://redux-form.com/7.2.0/docs/api/reduxform.md/#-code-validate-values-object-props-object-gt-errors-object-code-optional->ReduxForm API. I don’t have to hard code in valid=valid() every single time!

1
2
3
4
5
6
7
8
9
const validate = values => {
  const errors = {};

const options = ["muni", "bart", "caltrain"];
  errors.agency = (!values.agency || options.indexOf(values.agency) === -1 ) ? "Please select a valid agency" : '';
  errors.stopCode = ( isNaN(Number(values.stopCode)) || values.stopCode.length &lt; 3 || values.stopCode.length > 7 ) ? "Please enter a valid stop code" : '';

return errors;
}

That’s a lot less chaotic, isn’t it? My next step should be the output data once form fetch the JSON, but let’s rest for now. Until next time!

Day 7: Async Testing

So, definitely haven’t been working on the app lately. It’s been another busy week – went to the Livability Award, added new features to the Sponsorlane dashboard, and attended the API World Hackthon. I ended up not the participating in the hackathon, but I got to check out some cool companies and played around with Citi’s new beta API.

React app wise, I only got to work on the async action testing, using Redux’s doc as guide. I also commented out a bunch of unfinished code so they wouldn’t interrupt when I start the test commands. As a result, the testing is working again, and I find some error in components file. The testing is also giving a false positive for the async actions, but that should change once I get the stores in and commented out a few things.

Day Six: Slower progress this week. Worked on container & prop-types.

For the last weekend, I spent the days emerge in WordCamp Sacramento 2017. It was my first WordCamp, and it was awesome!

Since I didn’t carry my macbook all the way over to Sac, I spend most of my off time studying JavaScript in my iPad. Namely Learning JavaScript Design Patterns by Addy Osmani and Modern React with Redux by Stephen Grider.

So, for me, it was more about building fundamental this weekend. Progress-wise in my app:

  • Refactored the input form from version 1 in my Nextbus Connect project to my component, Form.
  • Incorporated prop-types.
  • Worked on container with React doc as reference, adding in mapStateToProps() and connect() for the reducer.

 

How to resolve angry beeping when GalliumOS refuse to boot

This time, I am going to post about a bit of troubleshooting with GalliumOS in my Chromebook. A little detour from my regular NextBus Compare project progress posting. This is more about working with developer tools, I guess.

I don’t actually use Chromebook that often since most of my work is on Macbook. As a result, it is not charge everyday. A few day, I forgot to turn it off. Left to its sleep mode, the battery completed drained itself.

Oops.

If I just have ChromeOS, it wouldn’t be a problem – but my system is dual-boot with a Linux OS. GalliumOS to be precise. To boot into GalliumOS, I typically just do a simple Ctrl-L. But this time, there is an angry, angry beep and no boot.

Chromebook Alert: OS Verification is Off
Chromebook’s white screen, now stucked

Oops.

I am almost certain it have to do with the battery drain, but what happened?

A bit more research on the documentation and GalliumOS reddit revealed that because the crossystem flag used for booting is a firmware level setting, it is therefore stored in volatile memory. When there is a complete drain, there is a possibility for the flag to be lost. To solve it, here are the steps:

  1. Boot into ChromeOS – yes, not GalliumOS, but ChromeOS. We need to access the developer mode! Usually, the command for ChromeOS booting is Ctrl-D.
  2. You may have to configure wifi if it is not set up. My Chromebook still remembers it, so it was good to go.
  3. Do a Ctrl-Alt-=> (=> is the right arrow on the first row your keyboard) – to boot yourself into the developer terminal.
  4. Enter chronos as username with no password.
  5. Enter sudo crossystem dev_boot_legacy=1. Some guides online may say dev_boot_usb, but as the GalliumOS documentation mentioned, that flag is not related to legacy boot issue. I should know – I tried it!
  6. Enter sudo reboot.
  7. Now the GalliumOS booting should be good to go!!!

Day Five: Building and Testing Redux Actions

For today, I started working on the actions file with redux’s own action documentation as reference. It seems their sample tend to favor seperating actions types and action creators into different files, but I think I favor keeping them one file for now so it is easier for me to keep track of things. I only have 3 actions types and 4 action creator for now anyway.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* action types*/
export const FETCH_REQUEST = 'FETCH_REQUEST'
export const FETCH_SUCCESS = 'FETCH_SUCCESS'
export const FETCH_FAILURE = 'FETCH_FAILURE'

/* action creators*/
export function fetchRequest() {
  return {
    type: FETCH_REQUEST
  }
}

export function fetchSuccess(body) {
  return {
    type: FETCH_SUCCESS,
    body
  }
}

export function fetchFailure(err) {
  return {
    type: FETCH_FAILURE,
    err
  }
}

fetchJSON action creator, posted as image because ${} escapes the code snippet display

I also using redux’s Writing Tests doc, so the action creators are tested. I didn’t work on the fetchJSON() one though, because there is a fetch() there, making the action create async. The doc do have a section for async action creator, but I think I will do that next.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
describe('actions.js: ', () => {
  it('should create an action to fetch request', () => {
    const requestAction = {
      type: 'FETCH_REQUEST',
    }
    expect(actions.fetchRequest()).to.eql(requestAction)
  });
  it('should create an action for successful request', () => {
    const body = 'Fetch successful';
    const successAction = {
      type: 'FETCH_SUCCESS',
      body
    }
    expect(actions.fetchSuccess(body)).to.eql(successAction)
  });
  it('should create an action for failed request', () => {
    const err = 'Fetch failed';
    const failureAction = {
      type: 'FETCH_FAILURE',
      err
    }
    expect(actions.fetchFailure(err)).to.eql(failureAction)
  });
})

Day Four: Delays, Prismatic to CodeColorer, and New Repo

Delay

While I love volunteering at Sunday Streets as route captain, when the event is hosted at Alamo Square, my leg muscle does not love it.

For those who don’t live in SF, Alamo Square is on quite the hill. Sunday Street is an open street event, so the only way to travel long distance is by bicycling. As a captain, I was going back and forth several times to check up or resolve issues the whole day. Got plenty of exercises and vitamin D – but also got plenty of muscle sore to last the week.

I didn’t got much done on Sunday, and I pass out from delayed tiredness on Monday – thankfully I don’t have work that day. Naturally, there were no post updated yesterday. I am somewhat recovered today, so here’s some updates:

Prismatic to CodeColorer

After the last few post, I realize I really would like to post the codes I wrote without having to take a snapshot picture each time. It is probably best to go with a WordPress plugin for code snippet display, possibly with syntax highlight. There are several in the market.

Prismatic seems like a popular one. It was recently updated. Documentations and options are rich. Reviews are quite positive.

Sadly, the plugin didn’t seem to work.

Using Firefox’s Inspector, I notice that there are inline css that overwrites the styles for <code> and <pre>. I suspected it was the Edit CSS feature of Jetpack. Jetpack’s CSS tends to be loaded later in the process, so it have a higher risk of overwriting other plugins.

Unfortunately, I don’t fancy removing my Jetpack plugin. I did attempted to increase the loading order by turning the minification off using Jetpack’s own filterjetpack_implode_frontend_css -, but it didn’t seemed to have any effects. Trying to unset CSS in the child theme’s Editor and Jetpack’s Edit CSS didn’t work either.

In the end, I just tried another plugin called CodeColorer. Now, that one works! I had to change some of the CSS to correct width issues with the line numbering column, but once that’s done, it works fine!

1
<h3>Hello World!</h3>

New Github Repo

After some thought, I decided to start a new repo instead of sticking with my old Nextbus Compare repo. I am starting from scratch, so it is more of a rewriting a new app instead of a refactor. Create a new repo for a fresh start makes sense and would be much more simpler. The new repo will be Nextbus Compare V2!

Day Three: Looking at Redux Doc

So, create-react-app got started, testing environment is set up, directory is organized. Time to write more code than just test placeholder files.

It’s been over a month. so my memory of Redux is a bit blurry – but it’s ok, redux.js.org to the rescue! Reading their Todo List example and some of my old codes jogged my memory.

Here is the latest directory structure, with all the new files in. At the right is the current state of action creator, action.js.

action creater
Action Creater file, action.js

There is also a basic combineReducer in reducers/index.js. So far, the test file just check that the files in the components are outputting div. For now, I am mostly just setting up some empty functions.

Day 2: React File Organization and Understanding Syntax for Chai with Enzyme

Second day of my every-other-day-React-project-progress-posting (I need a better name… suggestions, anyone?), with the Day One posting here for those curious: Day One: Create-React-App with Mocha and Enzyme – with No NPM Eject!

Task One: File Organization

So, I was creating the directory organization for NextBus Compare. Looking at my previous sketches of possible file structure for my project:

file structure sketch
An old sketch from about a month ago

plus being so new to Redux, I am going to stick with the tradition method of organizing it by function/nature. For those who want to read about React file organization, there are 2 articles that I found useful:

They each called the typical organization method different name – function or nature centric. François also advocated for what he called a domain-centric approach, while Mikey went with a feature-centric approach. I have personally done domain-centric before, and did like it quite a bit. For this one though, I am going to play it safe because my focus is to learn Redux here.

So here is my current file structure:

Nextbus Compare File Structure
Nextbus Compare File Structure

Task Two: Writing Test Files

Once there are new files, I tried to write test files to make sure all the files are loading, even though they only load empty div at this point.

Then I slowly realize that every googled posting for Mocha/Chai/Enzyme seemed to have different but very similar syntax. Therefore, I have a lot of tabs open but is very confused.

*Sighs*

Eventually, I just close every tab, and search for the documentation for Chai and Enzyme. Restricting my reference source made it easier. Here is one of my test file:

Nextbus Compare Test File
The App.spec.js test file in my Nextbus Compare app

Save