Free Signal Strength ViewComponent for Ruby On Rails

Recently I had the need for a signal strength UI indicator in a ruby on rails app and I didn’t see one anywhere so I had to make one from completely from scratch. In the spirit of giving back to the community, here is that code as a viewcomponent. It may need some tweaks to serve your own purposes but you may find it to be a great starting point.

Heres the final output:

signal_strength_component.rb

class SignalStrengthComponent < ViewComponent::Base def initialize(signal_strength:, reported_at: nil) super @signal_strength = signal_strength.to_i # Ensure it’s an integer @reported_at = reported_at ? reported_at&.strftime(‘%B %e, %Y’) : I18n.t(‘view_components.signal_strength.unavailable’) @cursor = ‘text’

if @signal_strength.between?(0, 4)
  @color_class = case @signal_strength
                 when 0, 1 then 'fill-red-600' # Low signal, red
                 when 2, 3 then 'fill-yellow-600' # Medium signal, yellow (or orange)
                 when 4 then 'fill-green-400' # Strong signal, green
                 else 'fill-gray-400' # Default if somehow out of range
                 end
  @tooltip = I18n.t('view_components.signal_strength.reported_at', date: @reported_at, signal: @signal_strength)
else
  @color_class = nil
  @tooltip = nil
end

end

def signal_bar_class(bar_index) @signal_strength >= bar_index ? @color_class : ‘fill-gray-300’ end end

signal_strength_component.html.erb

<% if @signal_strength.between?(0, 4) %>

  <%# Bar 1 (smallest) %>
  <rect x="0" y="70" width="15" height="30" rx="3" class="<%= signal_bar_class(1) %>"/>
  <%# Bar 2 %>
  <rect x="25" y="50" width="15" height="50" rx="3" class="<%= signal_bar_class(2) %>"/>
  <%# Bar 3 %>
  <rect x="50" y="30" width="15" height="70" rx="3" class="<%= signal_bar_class(3) %>"/>
  <%# Bar 4 (largest) %>
  <rect x="75" y="10" width="15" height="90" rx="3" class="<%= signal_bar_class(4) %>"/>

  <% if @signal_strength == 0 %>
    <%# No signal icon (e.g., a cross or a specific icon indicating no signal) %>
    <%# For now, just show all bars gray, but you could add a specific path here %>
  <% end %>
</svg>
<span class="ml-2"><%= t('view_components.signal_strength.level', signal: @signal_strength) %></span>

<% else %> <%= t('view_components.signal_strength.not_available') %> <% end %>

i18n

signal_strength: unavailable: “Not available” not_available: “N/A” level: ”%{signal} Bars” reported_at: “Signal Strength: %{signal} Bars on %{date}“

/show.html.erb

<%= render SignalStrengthComponent.new(signal_strength: 4, reported_at: 1.day.ago) %>

<%= render SignalStrengthComponent.new(signal_strength: 3, reported_at: 2.days.ago) %>

<%= render SignalStrengthComponent.new(signal_strength: 2, reported_at: 3.days.ago) %>

<%= render SignalStrengthComponent.new(signal_strength: 1, reported_at: 4.days.ago) %>

<%= render SignalStrengthComponent.new(signal_strength: 0, reported_at: 5.days.ago) %>