Merge pull request #174 from /issues/169-style_the_senseHAT_astro_pi_model_pane

style the senseHAT astro pi model pane

Author: loiswells97

CHANGELOG.md

@@ -6,6 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased]
 
 ### Changed
+- Update styling on the `sense_hat` visual output (#174)
 - Update build workflow with a reusable job to update preview, staging, and prod (#176)
 
 ## [0.3.0]

package.json

@@ -42,6 +42,7 @@
     "react-tabs": "^3.2.3",
     "react-timer-hook": "^3.0.5",
     "react-toastify": "^8.1.0",
+    "react-toggle": "^4.1.3",
     "redux-oidc": "^4.0.0-beta1",
     "skulpt": "^1.2.0",
     "three": "^0.140.0",

src/App.scss

@@ -15,10 +15,6 @@ button {
   color: $editor-white;
   caret-color: $editor-white;
 
-  #sense-hat-sensor-controls-container {
-    background-color: #565555;
-  }
-
   .pythonrunner-input {
     color: rgb(36, 186, 236);
   }

src/Icons.js

@@ -73,6 +73,20 @@ export const FontIcon = (props) => {
   )
 }
 
+export const HumidityIcon = () => {
+  const [cookies] = useCookies(['fontSize'])
+  const scale = (fontScaleFactors[cookies.fontSize] || 1) * 1.6
+  return (
+    <svg transform={`scale(${scale}, ${scale})`} width="15" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g>
+        <path d="M7.5 2.5C4.909 4.775 3.611 6.74 3.611 8.4c0 2.49 1.847 4.1 3.889 4.1s3.889-1.61 3.889-4.1c0-1.66-1.298-3.625-3.889-5.9zm0 9c-1.628 0-2.917-1.285-2.917-3.1 0-1.17.948-2.72 2.917-4.57 1.969 1.85 2.917 3.395 2.917 4.57 0 1.815-1.289 3.1-2.917 3.1z"/>
+        <path d="M7.978 6.032a.339.339 0 1 1 .625.262l-1.605 3.831a.338.338 0 0 1-.624-.261z"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M6.357 8.051c.473 0 .857-.511.857-1.142 0-.632-.384-1.143-.857-1.143S5.5 6.277 5.5 6.909c0 .63.384 1.142.857 1.142zm-.001-.572c.158 0 .286-.256.286-.572 0-.315-.128-.571-.286-.571-.158 0-.286.256-.286.571 0 .316.128.572.286.572zM8.644 10.34c.473 0 .857-.511.857-1.142 0-.632-.384-1.143-.857-1.143s-.857.511-.857 1.143c0 .63.384 1.143.857 1.143zm-.001-.572c.158 0 .286-.256.286-.572 0-.315-.128-.571-.286-.571-.158 0-.286.256-.286.571 0 .316.128.572.286.572z"/>
+      </g>
+    </svg>
+  )
+}
+
 export const LoginIcon = () => {
   return (
     <svg width="17" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -101,6 +115,20 @@ export const NewFileIcon = () => {
   )
 }
 
+export const PressureIcon = () => {
+  const [cookies] = useCookies(['fontSize'])
+  const scale = (fontScaleFactors[cookies.fontSize] || 1) * 1.6
+  return (
+    <svg transform={`scale(${scale}, ${scale})`} width="15" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g>
+        <path d="M8.752 7.001a1 1 0 0 1-1.971.237c-.062-.252-.123-.52-.307-.704L5.411 5.471a.5.5 0 1 1 .707-.707l.957.957c.207.207.52.25.81.29a1 1 0 0 1 .867.99Z"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M11.75 6.75a4.25 4.25 0 1 1-8.5 0 4.25 4.25 0 0 1 8.5 0zm-1 0a3.25 3.25 0 1 1-6.5 0 3.25 3.25 0 0 1 6.5 0z"/>
+        <path d="M6.252 10.5h2.5v.75a1.25 1.25 0 1 1-2.5 0z"/>
+      </g>
+    </svg>
+  )
+}
+
 export const RemixIcon = () => {
   const [cookies] = useCookies(['fontSize'])
   const scale = fontScaleFactors[cookies.fontSize] || 1
@@ -112,6 +140,16 @@ export const RemixIcon = () => {
   )
 }
 
+export const ResetIcon = () => {
+  const [cookies] = useCookies(['fontSize'])
+  const scale = fontScaleFactors[cookies.fontSize] || 1
+  return (
+    <svg transform={`scale(${scale}, ${scale})`} width="12" height="12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+      <path d="M13.65 2.35C12.2 0.9 10.21 0 8 0C3.58 0 0.0100021 3.58 0.0100021 8C0.0100021 12.42 3.58 16 8 16C11.73 16 14.84 13.45 15.73 10H13.65C12.83 12.33 10.61 14 8 14C4.69 14 2 11.31 2 8C2 4.69 4.69 2 8 2C9.66 2 11.14 2.69 12.22 3.78L9 7H16V0L13.65 2.35Z" />
+    </svg>
+  )
+}
+
 export const RunIcon = () => {
   const [cookies] = useCookies(['fontSize'])
   const scale = fontScaleFactors[cookies.fontSize] || 1
@@ -140,7 +178,7 @@ export const SettingsIcon = () => {
   const scale = fontScaleFactors[cookies.fontSize] || 1
   return (
   <svg transform={`scale(${scale}, ${scale})`} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1 3H5M5 3C5 4.10457 5.89543 5 7 5C8.10457 5 9 4.10457 9 3M5 3C5 1.89543 5.89543 1 7 1C8.10457 1 9 1.89543 9 3M19 3H9M1 10H13M13 10C13 11.1046 13.8954 12 15 12C16.1046 12 17 11.1046 17 10M13 10C13 8.89543 13.8954 8 15 8C16.1046 8 17 8.89543 17 10M19 10H17M1 17H3M3 17C3 18.1046 3.89543 19 5 19C6.10457 19 7 18.1046 7 17M3 17C3 15.8954 3.89543 15 5 15C6.10457 15 7 15.8954 7 17M19 17H7" fill="none" stroke={isDarkMode? "white" : "black"} stroke-width="2" stroke-linecap="round"/>
+    <path d="M1 3H5M5 3C5 4.10457 5.89543 5 7 5C8.10457 5 9 4.10457 9 3M5 3C5 1.89543 5.89543 1 7 1C8.10457 1 9 1.89543 9 3M19 3H9M1 10H13M13 10C13 11.1046 13.8954 12 15 12C16.1046 12 17 11.1046 17 10M13 10C13 8.89543 13.8954 8 15 8C16.1046 8 17 8.89543 17 10M19 10H17M1 17H3M3 17C3 18.1046 3.89543 19 5 19C6.10457 19 7 18.1046 7 17M3 17C3 15.8954 3.89543 15 5 15C6.10457 15 7 15.8954 7 17M19 17H7" fill="none" stroke={isDarkMode? "white" : "black"} strokeWidth="2" strokeLinecap="round"/>
   </svg>
 
   )
@@ -184,6 +222,16 @@ export const SunIcon = () => {
   )
 }
 
+export const TemperatureIcon  = () => {
+  const [cookies] = useCookies(['fontSize'])
+  const scale = (fontScaleFactors[cookies.fontSize] || 1) * 1.6
+  return (
+    <svg transform={`scale(${scale}, ${scale})`} width="15" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M7.954 5.657a.457.457 0 0 0-.455-.456.454.454 0 0 0-.454.456v2.978a1.214 1.214 0 0 0-.734 1.36 1.217 1.217 0 0 0 1.19.984 1.21 1.21 0 0 0 1.19-.984 1.22 1.22 0 0 0-.736-1.36ZM5.379 4.593v-.001c.01-.558.237-1.09.633-1.482a2.116 2.116 0 0 1 2.973 0c.397.392.624.924.633 1.482v3.447a2.741 2.741 0 0 1-.662 4.039 2.72 2.72 0 0 1-3.918-1.137 2.746 2.746 0 0 1 .344-2.902c0-1.056-.005-2.42-.005-3.446zm.91-.001c-.004 1.265.002 2.531.002 3.797l-.122.131a1.827 1.827 0 0 0 1.332 3.068 1.813 1.813 0 0 0 1.667-1.096 1.83 1.83 0 0 0-.336-1.972L8.71 8.39V4.592c0-.323-.128-.632-.355-.86a1.209 1.209 0 0 0-2.067.86Z"/>
+    </svg>
+  )
+}
+
 export const ThemeIcon = () => {
   return (
     <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">

src/colours.scss

@@ -1,8 +1,9 @@
 $editor-white: white;
 $editor-light-light-light-grey: #FFFFFF80;
-$editor-light-light-grey:  #0000000D;
-$editor-light-grey: #0000001A;
-$editor-mid-grey: #1A1A1A80;
+$editor-light-light-grey: #F3F4F6;
+$editor-light-grey: #E8E9ED;
+$editor-mid-light-grey: #BFC3CE;
+$editor-mid-grey: #8C93A4;
 $editor-grey: #43454C;
 $editor-dark: #2E3038;
 $editor-dark-dark: #24262D;
@@ -14,9 +15,8 @@ $editor-pale-purple: #BBCAF7;
 $editor-pale-blue: #F0F3FD;
 $editor-light-blue: #B2E3EF;
 $editor-blue: #2143B3;
+$editor-dark-blue: #002B3F;
 
 $editor-turquoise: #14BCAC;
 $editor-dark-turquoise: #11A99A;
 $editor-turquoise-grey: #72D7CD1A;
-
-

src/components/AstroPiModel/AstroPiControls/AstroPiControls.js

@@ -4,22 +4,24 @@ import MotionInput from './MotionInput';
 import SliderInput from './SliderInput';
 import '../AstroPiModel.scss';
 import Stopwatch from './Stopwatch';
+import { HumidityIcon, PressureIcon, TemperatureIcon } from '../../../Icons';
 
 const AstroPiControls = (props) => {
   const {temperature, pressure, humidity, colour, motion} = props
 
   return (
-    <div id="sense-hat-sensor-controls-container" className="top hide-for-snapshot">
-      <div className="controls-container">
-        <SliderInput name="temperature" unit="°C" min={-40} max={120} defaultValue={temperature} />
-        <SliderInput name="pressure" unit="hPa" min={260} max={1260} defaultValue={pressure} />
-        <SliderInput name="humidity" unit="%" min={0} max={100} defaultValue={humidity} />
-      </div>
-    
-      <div className="controls-container motion-colour">
-        <MotionInput defaultValue={motion} />
-        <Input name="colour" label="Colour" type="color" defaultValue={colour} />
-        <Stopwatch />
+    <div className='sense-hat-controls'>
+      <h2 className='sense-hat-controls-heading'>Space Station Control Panel</h2>
+      <div className="sense-hat-controls-panel">
+          <SliderInput name="temperature" unit="°C" min={-40} max={120} defaultValue={temperature} Icon={TemperatureIcon} />
+          <SliderInput name="pressure" unit="hPa" min={260} max={1260} defaultValue={pressure} Icon={PressureIcon}/>
+          <SliderInput name="humidity" unit="%" min={0} max={100} defaultValue={humidity} Icon={HumidityIcon}/>
+      
+        <div className="sense-hat-controls-panel__control">
+          <Input name="colour" label="Colour Picker" type="color" defaultValue={colour} />
+          <MotionInput defaultValue={motion} />
+          <Stopwatch />
+        </div>
       </div>
     </div>
   )

src/components/AstroPiModel/AstroPiControls/Input.js

@@ -14,12 +14,10 @@ const Input = (props) => {
   }, [name, value])
 
   return (
-  <div className="rangeslider-container">
-    <div className={`readings-container ${name}-sensor`}>
-      <label htmlFor={`sense_hat_${name}`}>{label}:</label>
-      <input type={type} id={`sense_hat_${name}`} name={`sense_hat_${name}`} defaultValue={value} onChange={e => setValue(e.target.value)} />
+    <div className='sense-hat-controls-panel__container'>
+      <label className='sense-hat-controls-panel__control-name' htmlFor={`sense_hat_${name}`}>{label}</label>
+      <input type={type} id={`sense_hat_${name}`} defaultValue={value} onChange={e => setValue(e.target.value)} />
     </div>
-  </div>
   )
 };
 

src/components/AstroPiModel/AstroPiControls/MotionInput.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import Toggle from 'react-toggle';
 import Sk from 'skulpt';
 import '../AstroPiModel.scss';
+import "react-toggle/style.css"
 
 const MotionInput = (props) => {
   const {defaultValue} = props;
@@ -24,10 +26,12 @@ const MotionInput = (props) => {
   }, [value])
 
   return (
-  <div className="rangeslider-container">
-    <div className={`readings-container motion-sensor`}>
-      <label htmlFor={`sense_hat_motion`}>Motion:</label>
-      <input type="checkbox" id="sense_hat_motion" name="sense_hat_motion" checked={value} onChange={e => setValue(e.target.checked)} />
+  <div className="sense-hat-controls-panel__container">
+    <label className='sense-hat-controls-panel__control-name' htmlFor={`sense_hat_motion`}>Motion</label>
+    <div className='sense-hat-controls-panel__control-toggle'>
+      <label htmlFor={`sense_hat_motion`} >No</label>
+      <Toggle id='sense_hat_motion' icons={false} checked={value} onChange={e => setValue(e.target.checked)}/>
+      <label htmlFor={`sense_hat_motion`} >Yes</label>
     </div>
   </div>
   )

src/components/AstroPiModel/AstroPiControls/SliderInput.js

@@ -1,39 +1,26 @@
 import React from 'react';
 import { useEffect, useState } from 'react';
-import { useCookies } from 'react-cookie';
-import { Barometer, Humidity, Thermometer } from "@intern0t/react-weather-icons";
 import '../AstroPiModel.scss';
 import Sk from 'skulpt';
 
 const SliderInput = (props) => {
-  const { name, unit, min, max, defaultValue} = props;
+  const { name, unit, min, max, defaultValue, Icon} = props;
   const [value, setValue] = useState(defaultValue);
-  const [cookies] = useCookies(['theme'])
-  const isDarkMode = cookies.theme==="dark" || (!cookies.theme && window.matchMedia("(prefers-color-scheme:dark)").matches)
-  const iconColour = isDarkMode ? "white" : "black"
-
+  
   useEffect(() => {
     if (Sk.sense_hat) {
       Sk.sense_hat.rtimu[name][1] = value+Math.random()-0.5
     }
   }, [name, value])
 
   return (
-    <div className="rangeslider-container">
-      <div className="readings-container">
-        {name==="temperature" ?
-        <Thermometer color={iconColour} size={"1.5em"}/>
-        :
-        name==="pressure" ?
-        <Barometer color={iconColour} size={"1.5em"}/>
-        :
-        name==="humidity" ?
-        <Humidity color={iconColour} size={"1.5em"}/>
-        :
-        null}
-        <span className={`sensor-value sense-hat-${name}`}>{value}{unit}</span>
+    <div className="sense-hat-controls-panel__control">
+      <label className='sense-hat-controls-panel__control-name' htmlFor={`sense_hat_${name}`}>{name}</label>
+      <input id={`sense_hat_${name}`} className="sense-hat-controls-panel__control-input" type="range" min={min} max={max} step="1" defaultValue={value} onChange={e => setValue(parseFloat(e.target.value))}/>
+      <div className="sense-hat-controls-panel__control-reading">
+        {Icon ? <Icon /> : null}
+        <span className='sense-hat-controls-panel__control-value'>{value}{unit}</span>
       </div>
-      <input id={`sense_hat_${name}`} className="rangeslider" type="range" min={min} max={max} step="1" defaultValue={value} onChange={e => setValue(parseFloat(e.target.value))}/>
     </div>
   )
 };

src/components/AstroPiModel/AstroPiControls/Stopwatch.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react'
 import { useSelector } from 'react-redux';
 import { useStopwatch } from 'react-timer-hook';
-import './Stopwatch.scss'
 import Sk from 'skulpt'
 
 const Stopwatch = () => {
@@ -26,9 +25,9 @@ const Stopwatch = () => {
 
 
   return (
-    <div className='astro-pi-stopwatch-container'>
-      <label htmlFor='astro_pi_stopwatch'>Timer: </label>
-      <span className='astro-pi-stopwatch' id='astro_pi_stopwatch'>
+    <div className='sense-hat-controls-panel__container sense-hat-controls-panel__container-timer'>
+      <label className='sense-hat-controls-panel__control-name' htmlFor='sense_hat_timer'>Timer</label>
+      <span className='sense-hat-controls-panel__control-reading sense-hat-controls-panel__control-reading-timer' id='sense_hat_timer'>
         <span>{String(minutes).padStart(2, '0')}</span>:<span>{String(seconds).padStart(2, '0')}</span>
       </span>
     </div>