GH-Component-Pictos - Githubissues

christophwaibel commented 4 years ago

Designing and drawing nice little grasshopper component pictos

christophwaibel commented 4 years ago

List of components @amraladdin :

[ ] SIA380.1: Monthly heating demand
[ ] SIA2024: This component get's all the different properties (g-values, u-values, internal gains, ...) according to a specified room type as defined by SIA 2024
[ ] SIA2028: This component get's all the weather-related parameters (irradiation, temperature, ...) as monthly data entires according to SIA 2028
[ ] EDandDHW: (Also SA2024) Calculates monthly electricity demand and domestic hot water.
[ ] EPWreader: Reads a weather file and outputs timeseries for temperature, irradiance, ...
[ ] ObstructedPanel: Computes irradiance (hourly) on a tilted, obstructed surface, using the Perez all weather solar model
[ ] SimplePanel: Computes irradiance (hourly) on a tilted but unobstructed surface, using the Perez all weather solar model
[ ] OrientationFactor: Computes the orientation factor, given a tilt angel and a location.
[ ] SimpleST: Computes thermal energy in kWh produced by a solar thermal collector. Simple version
[ ] ST-tr: Solar thermal energy in kWh but hourly values for the entire year, produced by a solar thermal collector.
[ ] SimplePV: Computes electricity generated in kWh by a simple photovoltaic panel
[ ] NOCTPV: Computes hourly electricity generated by a PV panel, using the nominal operatinv cell temperature method (NOCT)
[ ] SumYield: Given an hourly time series, this component can lump together data into daily, monthly or yearly results. Useful for NOCTPV, ST-tr, etc.
[ ] Boiler: Computes operating cost and carbon emissions from a gas/oil boiler, given heating demand
[ ] Boiler-tr: Same as Boiler, but does it hourly time resolved for the entire year
[ ] CHP: Computes operating cost and carbon emissions from a combined heat and power (CHP), given electricity or heating energy demand
- [ ] CHP-tr: Same as CHP, but hourly time resolved for the entire year
[ ] chiller: Computes operating cost and carbon emissions, as well as electricity demand of a chiller, given cooling energy demand
[ ] chiller-tr: Same as chiller, but hourly time resolved for the entire year
[ ] simple-hp: Computes operating cost, carbon emissions and electricity demand of a simple heat pump, given heating energy demand
[ ] simple-hp-cop: Computes a Coefficient of Performance of a simple heat pump, given source and sink temperature
[ ] ASHP-hp: Air source heat pump, calculates cost, carbon and electricity demand, hourly time resolved for the entire year. Efficiency of the ASHP depends on ambient air temperature and supply temperature

christophwaibel commented 4 years ago

how to make icons:

https://www.grasshopper3d.com/forum/topics/about-component-icons

maxenceryan commented 4 years ago

Hi Amr + Christoph,

Attached are the first draft of icons, in 24x24px png format and the illustrator file to go with it. It's definitely a first draft.

The concept was to stick to 4 colors apart from black and white

gray = non-energy generation/demand related
red = heating related
blue = cooling related
yellow = electricity related
and black or white line stroke.

the gradients are used to show a conversion from one form of energy to another, and currently left white for things air or boiler input (such as gas, biomass). There are two sets of icons for the regular vs -tr components.

and relentless hexagons everywhere.

vector preview 24x24 px preview:

note: ashp and ashp-tr should be switched. also some components are missing, as per Amr's suggestion to start with these. I also perhaps made icons for components that aren't listed.

I've also taken the liberty to try out a few hive logos in case you want to play with that. Hive_icons_files.zip

Best, Max

christophwaibel commented 4 years ago

@maxenceryan very nice, I like :) Good idea with the black logos for the simple components and the coloured ones for the time-resolved. The white background is transparent, yes? Let's put them into Grasshopper and then we can see how to improve them.

@daren-thomas How can we implement logos into honey-badger components? Can you show me next week? Cheers!

amraladdin commented 4 years ago

Great work @maxenceryan ! Very quick and nice.

A couple of thoughts:

Have you tried having all the icons with one line thickness instead of having a thicker border? I somehow like it more. See this example:
Are all the fonts the same type and size? Can we make all of them the same size as the ASHP? without bold? I would apply the same to the SIA and EPW logos. What do you think?
I would strictly keep one color gradient, e.g. the chiller or chiller_tr... I would make them either one tint of the blue you chose, or faded with white (so, no yellow gradient). Same for the rest of the logos.
The orange and red colors are quite close, so I was wondering if you can make the electricity logos more yellow to differentiate it from the red?
Can you keep a thin empty space bordering the logos? Similar to the simplePV or Simple ST icons, and not like the sia 380 or HP logos?

Can you make a couple of samples, including the above comments to see? You don't have to change all the icons, just a few samples?

Very nice! Thanks a lot.

maxenceryan commented 4 years ago

Thanks guys :)

@christophwaibel Im not sure if i have rights, but if you'd like i can make a merge request to add an Icons folder to the repository and push the icons directly in there, adhering to the naming convention of the components as per the first comment on this thread. Might then be easier to assign icons via honey badger.

@amraladdin some comments

thinner borders: agree, i'm curious to see how it would look in grasshopper
fonts: are different sizes, I find the ASHP too small to be readable at the 24x24px scale, so I was trying to keep it larger when possible. If i dont make it bold, there could be antialiasing that makes it too fuzzy to be readable. But below are a few icons with the same font / non-bold as the ASHP component
gradients: i was just trying to express a chiller using electricity vs in the future, if you were to use absorption chiller, that it would come from heat. But i understand its a bit messy at such a small scale. Below a couple examples with simple gradient. However, for CHP, I imagine you would still need to show both yellow and red as it produces heat and electricity.
stronger yellow: i was going for orange as a pure yellow can be hard to see on the screen, but perhaps it is legible enough.
icon border: i pushed it to the edge as I figured there is already a spacing/margin between component icons in grasshopper and wanted to use as much of the 24x24px as I could.

in terms of white/transparency, should i make all whites transparent? perhaps with the exception of the epw component, as it may get confused with the sia weather component.

Icons with all changes

__SIA2024 __SIA380 1 __EDandDHW __SIA2028 __EPWreader __SimplePV __NOCTPV-13 __SimpleST __simple-hp __simple-hp-tr __simple-hp-cop __ASHP __ASHP-tr __Boiler __Boiler-tr __chiller __chiller-tr __CHP __CHP-tr