mmoser/led-hands-rpi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

some styles

Browse Source
This commit is contained in:
Mark Moser 2019-02-24 04:35:56 +00:00
parent 67f267d7ab
commit 58c1e1185b
3 changed files with 64 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
main.rb
View File

@ -24,7 +24,6 @@ LEDS.each do |led|
IO.set_low led IO.set_low led
end end
# IO.reset
get '/' do get '/' do
@led_status = led_status @led_status = led_status
@ -35,11 +34,11 @@ get '/cycle' do
clear clear
5.times do |i| 5.times do |i|
sleep 0.5 sleep 0.3
IO.set_high LEDS[i] IO.set_high LEDS[i]
IO.set_low LEDS[i - 1] IO.set_low LEDS[i - 1]
end end
sleep 0.3
clear clear
redirect to('/') redirect to('/')
end end
@ -51,6 +50,11 @@ get '/led/:color' do |led|
redirect to('/') redirect to('/')
end end
get '/clear' do
clear
redirect to('/')
end
def pick led def pick led
case led case led
when 'blue' when 'blue'

42
public/main.css Normal file
View File

@ -0,0 +1,42 @@
html {
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
box-sizing: inherit;
}
.container {
margin: 15px auto;
max-width: 450px;
}
ul.switches {
display: flex;
margin: 0 0 15px;
padding: 0;
list-style: none;
}
.switches li {
margin: 5px;
}
.switches a {
display: inline-block;
padding: 10px;
border: 1px solid #000;
border-radius: 5px;
text-decoration: none;
color: #000;
}
.switches a:hover {
background-color: #eee;
}
.switches a.active {
background-color: #858585;
color: #eee;
}

27
views/index.erb
View File

@ -3,21 +3,24 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>LED Manager</title> <title>LED Manager</title>
<link href="main.css" rel="stylesheet">
</head> </head>
<body> <body>
<h1>LED Manager</h1> <div class="container">
<ul> <h1>LED Manager</h1>
<li><a href="/cycle">Cycle 3 Times</a></li>
<li><a href="/led/blue">Blue</a></li>
<li><a href="/led/white">White</a></li>
<li><a href="/led/red">Red</a></li>
<li><a href="/led/green">Green</a></li>
<li><a href="/led/yellow">Yellow</a></li>
</ul>
<pre> <ul class="switches">
<%= led_status %> <li><a href="/clear">clear</a></li>
</pre> <li><a href="/cycle">cycle test</a></li>
</ul>
<ul class="switches">
<li><a <%= (led_status[:blue]) ? 'class="active"' : "" %> href="/led/blue">blue</a></li>
<li><a <%= (led_status[:white]) ? 'class="active"' : "" %> href="/led/white">white</a></li>
<li><a <%= (led_status[:red]) ? 'class="active"' : "" %> href="/led/red">red</a></li>
<li><a <%= (led_status[:green]) ? 'class="active"' : "" %> href="/led/green">green</a></li>
<li><a <%= (led_status[:yellow]) ? 'class="active"' : "" %> href="/led/yellow">yellow</a></li>
</ul>
</div>
</body> </body>
</html> </html>