New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Silicone keypad graphics #92

Closed
charlespax opened this Issue Mar 23, 2015 · 30 comments

Comments

Projects
None yet
2 participants
@charlespax
Member

charlespax commented Mar 23, 2015

@paxmanchris is taking care of the silicone keypad graphics.

The graphics can be found in the manual https://github.com/PaxInstruments/t400-electronics/blob/master/documentation/manual.md

Here are the dimensions we are working with.
screen shot 2015-03-23 at 14 48 07

A key here is to make a reusable interface if possible, so we can use this on other devices or people to use in their own projects.

Please add the graphics to a sub folder in https://github.com/PaxInstruments/t400-enclosure/tree/master/graphics

@paxmanchris

This comment has been minimized.

Contributor

paxmanchris commented Mar 23, 2015

Here is a draft for the cycle icon
cycle

@charlespax

This comment has been minimized.

Member

charlespax commented Mar 23, 2015

Here's what we have in the manual.

enclosure-front-buttons

Cycle channels
cycle_icon

Backlight
brightness_icon

Power
power_icon

Logging start/stop
logging_icon

Log interval
screen shot 2015-03-23 at 18 16 03

Units: Unknown

@paxmanchris

This comment has been minimized.

Contributor

paxmanchris commented Mar 23, 2015

Okay, I uploaded the design, staying as close to what was described in the documentation. Here is a picture what I have done so far:

buttons_export

@charlespax take a look and let me know if it needs to be tweaked.

@charlespax

This comment has been minimized.

Member

charlespax commented Mar 23, 2015

Check out https://useiconic.com/open#icons, a bunch of free icons on github https://github.com/iconic/open-iconic.

Cycle channels
cycle_icon or screen shot 2015-03-23 at 18 25 30 or screen shot 2015-03-23 at 18 25 34 or screen shot 2015-03-23 at 18 36 09

Backlight
brightness_icon or screen shot 2015-03-23 at 18 26 41 or screen shot 2015-03-23 at 18 36 18

Power
power_icon or screen shot 2015-03-23 at 18 26 12 or screen shot 2015-03-23 at 18 36 30

Logging start/stop
logging_icon or screen shot 2015-03-23 at 18 25 45 or screen shot 2015-03-23 at 18 36 13

Log interval
screen shot 2015-03-23 at 18 16 03 or screen shot 2015-03-23 at 18 36 25

Units:
Maybe screen shot 2015-03-23 at 18 25 05 or screen shot 2015-03-23 at 18 26 53 or screen shot 2015-03-23 at 18 36 35

@paxmanchris

This comment has been minimized.

Contributor

paxmanchris commented Mar 23, 2015

Interesting but, I don't see any that fit what you want. Here is a mock up of the front panel with logos:

front_panel_with_logos

@charlespax

This comment has been minimized.

Member

charlespax commented Mar 23, 2015

To the greatest practical extent we will use icons that already exist. Rotating an icon or combining elements of two icons is fine. I just want to keep a consistent look.

These icons from Google are pretty nice.

Icon Description
69ce5612-d193-11e4-9262-06f690e3425b Cycle through displayed channels. Modify the display.
ic_wb_sunny_black_24dp Turn on/off the backlight. Change the backlight intensity.
f1e7c252-d190-11e4-8b50-2f734937469a Power device on/off
ic_brightness_1_black_24dp Start/stop recording. Start/stop saving data to file. The circle should be the same size as the power button circle.
f675c074-d192-11e4-806b-c3cb89654cbb Cycle through the logging interval (delta T).
°CFK Cycle through the displayed units (C, F, K).

Here are some icons that popped out to me.
ic_autorenew_black_24dp ic_cached_black_24dp ic_check_circle_black_24dp ic_dashboard_black_24dp ic_group_work_black_24dp ic_history_black_24dp ic_schedule_black_24dp ic_settings_backup_restore_black_24dp ic_album_black_24dp ic_av_timer_black_24dp ic_pause_black_24dp ic_pause_circle_fill_black_24dp ic_pause_circle_outline_black_24dp ic_play_arrow_black_24dp ic_play_circle_fill_black_24dp ic_play_circle_outline_black_24dp ic_repeat_black_24dp ic_replay_black_24dp ic_settings_black_24dp ic_settings_power_black_24dp ic_shuffle_black_24dp ic_skip_next_black_24dp ic_stop_black_24dp ic_swap_horiz_black_24dp ic_swap_vert_black_24dp ic_swap_vert_circle_black_24dp ic_trending_down_black_24dp ic_trending_up_black_24dp ic_view_agenda_black_24dp ic_visibility_black_24dp ic_access_time_black_24dp ic_add_box_black_24dp ic_add_circle_black_24dp ic_add_circle_outline_black_24dp ic_brightness_high_black_24dp ic_brightness_low_black_24dp ic_brightness_medium_black_24dp ic_call_made_black_24dp ic_data_usage_black_24dp ic_gps_fixed_black_24dp ic_gps_not_fixed_black_24dp ic_import_export_black_24dp ic_send_black_24dp ic_swap_calls_black_24dp ic_adjust_black_24dp ic_attachment_black_24dp ic_border_color_black_24dp ic_brightness_1_black_24dp ic_details_black_24dp ic_edit_black_24dp ic_file_download_black_24dp ic_filter_tilt_shift_black_24dp ic_filter_vintage_black_24dp ic_flare_black_24dp ic_folder_black_24dp ic_folder_open_black_24dp= ic_functions_black_24dp ic_gamepad_black_24dp ic_grain_black_24dp ic_insert_drive_file_black_24dp ic_remove_red_eye_black_24dp ic_rotate_left_black_24dp ic_rotate_right_black_24dp ic_tag_faces_black_24dp ic_texture_black_24dp ic_timelapse_black_24dp ic_wb_irradescent_black_24dp ic_wb_sunny_black_24dp ic_apps_black_24dp ic_arrow_forward_black_24dp ic_check_box_black_24dp ic_check_box_outline_blank_black_24dp ic_radio_button_off_black_24dp ic_radio_button_on_black_24dp ic_refresh_black_24dp ic_star_black_24dp ic_star_outline_black_24dp

@charlespax

This comment has been minimized.

Member

charlespax commented Mar 25, 2015

There is also stuff form Font Awesome http://fortawesome.github.io/Font-Awesome/icons/

@charlespax

This comment has been minimized.

Member

charlespax commented Mar 25, 2015

Here's a mockup on the SLA prototype.
img_20150325_145139

@paxmanchris

This comment has been minimized.

Contributor

paxmanchris commented Mar 25, 2015

Okay. Here is what I have so far:
front_panel_with_logos2

@charlespax

This comment has been minimized.

Member

charlespax commented Mar 25, 2015

Changes:

  • Make the record circle the same size as the power button circle
  • Make the temperature units button read "°CFK" or "CFK" in a single line. Do NOT do KFC :-)
  • Make the delta t a little smaller. I don't know why, but it just looks really big
  • Try the units button with "Units", "UNITS", "UNIT" and "Unit"
  • Try a stopwatch or a clock instead of delta t
@charlespax

This comment has been minimized.

Member

charlespax commented Mar 25, 2015

Here's a mockup with a smaller record button and a clock.
1262bb9c-d30b-11e4-9aad-2549f6f9b2c4 copy

I'm not really a fan of the "Units" label.
1262bb9c-d30b-11e4-9aad-2549f6f9b2c4 copy 2

@charlespax

This comment has been minimized.

Member

charlespax commented Mar 25, 2015

The thermometer icons below are from Font Awesome weather icons or are modified versions.

Empty thermometer
1262bb9c-d30b-11e4-9aad-2549f6f9b2c4 copy 2

Filled thermometer.
1262bb9c-d30b-11e4-9aad-2549f6f9b2c4 copy 2

Wide filled thermometer.
1262bb9c-d30b-11e4-9aad-2549f6f9b2c4 copy 2

With degree symbol.
1262bb9c-d30b-11e4-9aad-2549f6f9b2c4 copy 2

Wide filled thermometer with degree symbol.
1262bb9c-d30b-11e4-9aad-2549f6f9b2c4 copy 2

@charlespax

This comment has been minimized.

Member

charlespax commented Mar 25, 2015

Here's an updated screenshot
screen shot 2015-03-25 at 18 06 39

@paxmanchris

This comment has been minimized.

Contributor

paxmanchris commented Mar 25, 2015

After discussing about it, here is the interface with a half filled thermometer and the graph without arrow:
front_panel_with_logos3

@charlespax

This comment has been minimized.

Member

charlespax commented Mar 25, 2015

Perfect!

@paxmanchris

This comment has been minimized.

Contributor

paxmanchris commented Apr 1, 2015

I added a pdf that lays out the button placement. All the buttons are separated into svg's and exorted as 600dpi png files, all in the repository . If the pdf looks good please close.

@charlespax

This comment has been minimized.

Member

charlespax commented Apr 2, 2015

Use drawings with the white background. For each image, indicate the size of the image bounding box, not the distance to the edge. That will be much easier to measure.

@paxmanchris

This comment has been minimized.

Contributor

paxmanchris commented Apr 4, 2015

I could not find the pdf of the white background for the buttons. Could you put the asset in the repo?

@charlespax

This comment has been minimized.

Member

charlespax commented Apr 4, 2015

Here you go.

screen shot 2015-04-04 at 18 14 26

@paxmanchris

This comment has been minimized.

Contributor

paxmanchris commented Apr 4, 2015

I updated the pdf.

@charlespax

This comment has been minimized.

Member

charlespax commented Apr 5, 2015

Issues:

  • You can remove the dimensions of the buttons. They'll have that from the 3D file. The dimensioning is also inconsistent with how the graphics dimensions are shown.
  • I made a mistake with the keypad version. The keyway at the bottom will not be there. I'll have to give you an updated image.
  • There's a strange arrow floating on the side that can be removed.
  • I think there is a problem with the measurements. The clock and record icons are circles, but the document shows different height and widths for each.

screen shot 2015-04-05 at 13 41 13

@paxmanchris

This comment has been minimized.

Contributor

paxmanchris commented Apr 5, 2015

I committed some the changes you requested. I know the backlight is still off, but if made square the center circle looks distorted. Please add updated buttons layout when you can

@charlespax

This comment has been minimized.

Member

charlespax commented Apr 5, 2015

Post a screenshot.

@charlespax

This comment has been minimized.

Member

charlespax commented Apr 5, 2015

I've uploaded the new keypad drawing in PDF PNG and DXF (vector) formats. Here is the PNG.
t400-silicone-buttons-right-assembly

@paxmanchris

This comment has been minimized.

Contributor

paxmanchris commented Apr 5, 2015

Here is the comparison:
screen shot 2015-04-05 at 6 01 01 pm

Very minor. if you can tell me which is which then fine. Might make just to square it anyways.

@charlespax

This comment has been minimized.

Member

charlespax commented Apr 5, 2015

I mean post a screenshot the same as I did with my feedback. I want to see what it looks like.

@paxmanchris

This comment has been minimized.

Contributor

paxmanchris commented Apr 6, 2015

I think you're right, and we should have the dimensions square.
screen shot 2015-04-06 at 2 10 29 pm

@charlespax

This comment has been minimized.

Member

charlespax commented Apr 6, 2015

Now the power button is messed up.

@charlespax

This comment has been minimized.

Member

charlespax commented May 5, 2015

@paxmanchris what's the status of this?

@paxmanchris

This comment has been minimized.

Contributor

paxmanchris commented Jun 21, 2015

This is done. we got the buttons 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment