24 Hour Option?

[joshuapinter]

From what I can tell it's limited to a maximum of 12 hour time range, correct?

If so, have you thought about allowing up to 24 hours?

I'm a little worried with what that would do to the aesthetic, but I thought I'd post here and get the discussion going a little bit.

[nuttylord]

mess around with the maths in src/clockface.js Heres my attempt at it that works pretty well. i made changes to lines 15, 16, 40, 46, 47 and 49

import React, { PureComponent, PropTypes } from 'react';
   import { G, Circle, Text, Line } from 'react-native-svg';
import range from 'lodash.range';

export default class ClockFace extends PureComponent {

  static propTypes = {
    r: PropTypes.number,
    stroke: PropTypes.string,
  }

  render() {
    const { r, stroke } = this.props;
    const faceRadius = r - 2;
    const textRadius = r - 20;

    return (
      <G>
        {
          range(48).map(i => {
            const cos = Math.cos(2 * Math.PI / 48 * i);
            const sin = Math.sin(2 * Math.PI / 48 * i);

            return (
              <Line
                key={i}
                stroke={stroke}
                strokeWidth={i % 2 === 0 ? 2 : 1}
                x1={cos * faceRadius}
                y1={sin * faceRadius}
                x2={cos * (faceRadius - 7)}
                y2={sin * (faceRadius - 7)}
              />
            );
          })
        }
      <G transform={{translate: "0, -9"}}>
          {
            range(24).map((h, i) => (
              <Text
                key={i}
                fill={stroke}
                fontSize="11"
                textAnchor="middle"
                x={textRadius * Math.cos(Math.PI / 12 * i - Math.PI / 1.33  + Math.PI / 4)}
                y={textRadius * Math.sin(Math.PI / 12 * i - Math.PI / 1.33 + Math.PI / 4)}
              >
                { h }
              </Text>
            ))
          }
        </G>
      </G>
    );
  }
}

[Brian-Duggan]

I had been looking for a 24 hour clock as well. Big thanks to @nuttylord for his work. I made my own version of it that is a 24 hour clock that runs in an AM/PM fashion so it's 12 at the top and 12 at the bottom with h iterating from 1 to 11 on each side. Well technically it's h iterating from 0 to 11, then when it's actually output in the Text 1 is added to h to give it the proper formatting. I did it fairly sloppily so let me know if you can make it cleaner, but for now the bottom line is that it works!

import React, { PureComponent, PropTypes } from 'react';
import { G, Circle, Text, Line } from 'react-native-svg';
import range from 'lodash.range';

export default class ClockFace extends PureComponent {

  static propTypes = {
    r: PropTypes.number,
    stroke: PropTypes.string,
  }

  render() {
    const { r, stroke } = this.props;
    const faceRadius = r - 2;
    const textRadius = r - 20;

    return (
      <G>
        {
          range(48).map(i => {
            const cos = Math.cos(2 * Math.PI / 48 * i);
            const sin = Math.sin(2 * Math.PI / 48 * i);

            return (
              <Line
                key={i}
                stroke={stroke}
                strokeWidth={i % 2 === 0 ? 2 : 1}
                x1={cos * faceRadius}
                y1={sin * faceRadius}
                x2={cos * (faceRadius - 7)}
                y2={sin * (faceRadius - 7)}
              />
            );
          })
        }
        <G transform={{translate: "0, -7"}}>
          {
            range(12).map((h, i) => (
              <Text
                key={i}
                fill={stroke}
                fontSize="11"
                textAnchor="middle"
                x={textRadius * Math.cos(Math.PI / 12 * i - Math.PI / 1.5  + Math.PI / 4)}
                y={textRadius * Math.sin(Math.PI / 12 * i - Math.PI / 1.5 + Math.PI / 4)}
              >
                { h + 1}
              </Text>
            ))
          }
        </G>

        <G transform={{translate: "0, -7"}}>
            {
              range(12).map((h, i) => (
                <Text
                  key={i}
                  fill={stroke}
                  fontSize="11"
                  textAnchor="middle"
                  x={textRadius * Math.cos(Math.PI / 12 * i - Math.PI / 1.5  + Math.PI / -1.33)}
                  y={textRadius * Math.sin(Math.PI / 12 * i - Math.PI / 1.5 + Math.PI / -1.33)}
                >
                  { h + 1 }
                </Text>
              ))
            }
        </G>

      </G>
    );
  }
}

[nuttylord]

ive actually gone ahead and started making a pure JS version of this slider to suit my use case so im off with the rockets, glad to know i helped :)