Tag: guide

Adding a Link to a Drawer – Material UI and ReactJS

Hi everyone,

I ran into a bit of an issue turning a menuitem into a link with Material UI and React-Router. The main problems being that underlines appeared and threw the spacing out.

To summarize, use the component attribute on the ListItem:

The official docs cover it here: https://material-ui.com/api/list-item/

See the following stackoverflow post for more info: https://stackoverflow.com/a/50558139/522859

Full Page Layout Example for Material UI – ReactJS

Hi everyone,

I’ve spent the last couple of days looking into MaterialUI. It seems really good however there are very few examples of a layout wireframe. After digging through Github I came across the following CodeSandbox:

https://codesandbox.io/embed/vm4r07mxn5

There are a number of other themes and templates available (such as the amazing Material Dashboard) but they are all very in depth and not really suitable for a quick prototype or mock.

Thanks to Luke Peavey for posting the answer on StackOverflow. It definitely deserves a lot more views: https://stackoverflow.com/a/50312721/522859

Hopefully, this will be able to save someone else a bit of time!

Cheers,
Chris

Pass a Component as a Child Prop and Render it – ReactJs

Hi everyone,

A quick post on how to pass a component as a prop and then render it as a child. 

const ChildComponent = () => 
Child Component
;

const MainComponent = (props) => 
Main component. Child appears below
{props.content}
;

class App extends React.Component {

  render () {                                        
    return (
      
          
          <MainComponent content={} />          
      

    );
  }
}

An alternative to all of this that I wasn’t aware of is to to use “children”:

See the Pen ozqNOV by Dan Abramov (@gaearon) on CodePen.

https://static.codepen.io/assets/embed/ei.js

Thanks to the following stackoverflow post for the info: https://stackoverflow.com/a/41499555/522859

Retrieving User Id in Web API 2 Controller – .NET

Hi everyone,

Just a quick post on how to retrieve the current user’s id in a Web API 2 controller:

var userId = RequestContext.Principal.Identity.GetUserId();

Note that you’ll need the following using statements:

using Microsoft.AspNet.Identity;
using System.Web.Http;

Thanks to the following stackoverflow post for the info: https://stackoverflow.com/a/21618056/522859

Git Ignore Template for .NET

Hi everyone,

A sample .gitignore file for if you’re working with .net:

*.cache
*.dll
*.exe
*.pdb
/build/
*.suo
*.user
_ReSharper.*/
*.sdf
*.opensdf
*.tlog
*.log
TestResult.xml
*.VisualState.xml
Version.cs
Version.h
Version.cpp

Also, if you happen to have added some files you didn’t mean to:

git rm –cached file_you_dont_want.pdb
git commit -m “Remove pdb file”

Thanks to these stackoverflow posts for the info:
https://stackoverflow.com/a/8675415/522859
https://stackoverflow.com/a/11629271/522859

Import an Existing Project to BitBucket

Hi everyone,

Today I needed to import an existing project to Bitbucket. The documentation is really good, but just in case you have trouble finding it:

  1. Navigate to the root directory of your project.
  2. Run the following commands in terminal/command prompt:
    git init
    git add –all
    git commit -m “Initial Commit”
  3. Login to Bitbucket and create repository.
  4. Locate the clone URL (left menu) e.g. https://email_address.bitbucket.domain:7999/project_name/repo.git
  5. Upload your files:
    git remote add origin https://email_address.bitbucket.domain:7999/project_name/repo.git
    git push -u origin master

    Check out the following link for more info: https://confluence.atlassian.com/bitbucketserver/importing-code-from-an-existing-project-776640909.html

Mini-360 DC-DC Buck Converter – Incorrect Voltage 10v Instead of 5v

Hi everyone,

I’ve been playing around with a few DC-DC buck converters similar to these ones: https://www.amazon.com.au/UEB-Power-Converter-Module-Supply/dp/B078CXHWXC/ref=sr_1_fkmr1_1?ie=UTF8&qid=1519030369&sr=8-1-fkmr1&keywords=mini+360+buck+converter

I had expected 5v output from my 12v supply but when I hooked it up to a multimeter I found I was getting just over 10v. This would fry pretty much everything in my circuit so I was pretty worried.

After a bit of research, I came across a thread on eevblog that mentioned a screw for adjustment. Looking closely you can see that there is a small screw on the side of the chip. Turning this quarter of a rotation anti-clockwise put mine at exactly 5.04 volts.

A few other small tips:

  • The thread seems to indicate that some models require a lot more turning (up to 30 seconds for one poster).
  • I had to push down fairly hard to get it to actually turn the part underneath instead of just the metal cover

Hopefully this helps someone else out!

Eevblog: https://www.eevblog.com/forum/beginners/dc-dc-buck-converter-step-down-module-lm2596-power-supply/

Thanks,
Chris

Duinotech Hall Effect Sensor with RaspberryPi

Hi everyone,

This is just a quick post to cover how the Duinotech hall effect sensor module (XC-4434) can be hooked up to a RaspberryPi.

Sample Code

The code below will output a zero when the sensor is activated by a magnet, otherwise a zero.


import time
import datetime
import RPi.GPIO as GPIO

# Define constants
BUCKET_HALL_EFFECT_SIG_PIN = 14

# Setup GPIO pins
GPIO.setmode(GPIO.BCM)
GPIO.setwarnings(False)
GPIO.setup(BUCKET_HALL_EFFECT_SIG_PIN, GPIO.IN, pull_up_down=GPIO.PUD_UP) # Important

while True:
print(str(GPIO.input(BUCKET_HALL_EFFECT_SIG_PIN))
time.sleep(0.5)

Wiring

Example

When near a magnetic field the light on the sensor will turn on. If you’re using the sample code above, a zero will be shown when close to a magnet, otherwise a 1.

Misc

Purchased from: https://www.jaycar.com.au/arduino-compatible-hall-effect-sensor-module/p/XC4434

Spec Sheet: Z7275

Updating to Python 3.5.1 on RaspberryPi

Hi everyone,

Just a quick post on how to update to Python 3.5.1 the normal upgrade process isn’t working for you:


cd ~
wget https://www.python.org/ftp/python/3.5.1/Python-3.5.1.tgz
tar -zxvf Python-3.5.1.tgz
cd Python-3.5.1
./configure && make && sudo make install

You may need to restart once this is complete. Run the following to confirm that the version is 3.5.1:

pi@raspberrypi:~ $ python3 --version
Python 3.5.1

Check out the following link for more info: https://stackoverflow.com/a/37079319/522859

Check Tensorflow Version – Raspbian

Hey everyone,

Just a quick post on how to check the Tensorflow version on Raspbian with a one-liner (assumes Python 3.x):


python3 -c 'import tensorflow as tf; print(tf.__version__)'

Check out this Stackoverflow post for more info: https://stackoverflow.com/a/38549357/522859