Design

Emoncms – Free Icons

Table of Contents

Download here you Emoncms Icons

Impression

PNG Icons v1.0

SVG Icons v1.1

Source Files v1.1

Use Icons local

				
					// save files in 
/var/www/emoncms/img

//And get them with
localhost/img/Grid.svg

// If this not work use the IP address!
http://192.168.1.210/img/Grid.svg
				
			

Links for direct use

				
					https://4wobi.com/wp-content/uploads/2021/11/Arrow_Left_Right.svg
https://4wobi.com/wp-content/uploads/2021/11/Arrow_Up_Down.svg
https://4wobi.com/wp-content/uploads/2021/11/ArrowDown.svg
https://4wobi.com/wp-content/uploads/2021/11/ArrowLeft.svg
https://4wobi.com/wp-content/uploads/2021/11/ArrowRight.svg
https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg
https://4wobi.com/wp-content/uploads/2021/11/Battery-1.svg
https://4wobi.com/wp-content/uploads/2021/11/Grid.svg
https://4wobi.com/wp-content/uploads/2021/11/Meter.svg
https://4wobi.com/wp-content/uploads/2021/11/Plug.svg
https://4wobi.com/wp-content/uploads/2021/11/Solarpanel.svg
https://4wobi.com/wp-content/uploads/2021/11/Inverter-1.svg
				
			
				
					// Example for import in emoncms dashboard
<img  alt="ArrowLeftRight" data-src="https://4wobi.com/wp-content/uploads/2021/11/Arrow_Left_Right.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/Arrow_Left_Right.svg" alt="ArrowLeftRight"></noscript>
<img  alt="ArrowUpDown.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/Arrow_Up_Down.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/Arrow_Up_Down.svg" alt="ArrowUpDown.svg"></noscript>
<img  alt="ArrowDown.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowDown.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/ArrowDown.svg" alt="ArrowDown.svg"></noscript>
<img  alt="ArrowLeft.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowLeft.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/ArrowLeft.svg" alt="ArrowLeft.svg"></noscript>
<img  alt="ArrowRight.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowRight.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/ArrowRight.svg" alt="ArrowRight.svg"></noscript>
<img  alt="ArrowUp.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img  alt="ArrowUp.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg" alt="ArrowUp.svg"></noscript></noscript>
<img  alt="ArrowUp.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img  alt="ArrowUp.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg" alt="ArrowUp.svg"></noscript></noscript>
<img  alt="Battery-1" data-src="https://4wobi.com/wp-content/uploads/2021/11/Battery.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/Battery.svg" alt="Battery-1"></noscript>
<img  alt="Grid" data-src="https://4wobi.com/wp-content/uploads/2021/11/Grid.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/Grid.svg" alt="Grid"></noscript>
<img  alt="Meter" data-src="https://4wobi.com/wp-content/uploads/2021/11/Meter.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/Meter.svg" alt="Meter"></noscript>
<img  alt="Plug" data-src="https://4wobi.com/wp-content/uploads/2021/11/Plug.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/Plug.svg" alt="Plug"></noscript>
<img  alt="Solarpanel" data-src="https://4wobi.com/wp-content/uploads/2021/11/Solarpanel.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/Solarpanel.svg" alt="Solarpanel"></noscript>
<img  alt="Inverter" data-src="https://4wobi.com/wp-content/uploads/2021/11/Inverter-1.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/Inverter-1.svg" alt="Inverter"></noscript>
// with style
<img  alt="ArrowLeftRight" style="width:500px;height:500px;" data-src="https://4wobi.com/wp-content/uploads/2021/11/Arrow_Left_Right.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://4wobi.com/wp-content/uploads/2021/11/Arrow_Left_Right.svg" alt="ArrowLeftRight" style="width:500px;height:500px;"></noscript>
				
			

Idea behind the icons

thresholds

place thresholds

change threshold value & colors

arangement, change grid size if you have problems

Endelement

Add Image

EmoncCMS - Elements

For me the best elements by far are those following…

  • Bar
  • Feedvalue
  • Threshold
  • Button
  • Led

Overall I don’t like the Emocms Dashboard / Editor, i think it’s big trash but we take what we get.

 

Add Image

Rotate Bar Element

				
					
				
			

Add Image

Hide Text

				
					// change 000000 to 00000000
colour_label="00000000"
				
			

Design – Fonts

Table of Contents

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

MtG – Lessons learnd

Table of Contents

Source

Lessons

Lesson #1: Fighting against human nature is a losing battle 

Lesson#2: Aesthetics matter 

Lesson #3: Resonance is important 

Lesson#4: Make use of piggybacking

Lesson#5: Don’t confuse “interesting” with “fun” 

Lesson #6: Understand what emotion your game is trying to evoke

Lesson #7: Allow the players the ability to make the game personal

Lesson #8: The details are where the players fall in love with your game

Lesson #9: Allow your players to have a sense of ownership

Lesson #10: Leave room for the player to explore

Lesson #11: If everyone likes your game, but no one loves it, it will fail

Lesson #12: Don’t design to prove you can do something

Lesson #13: Make the fun part also the correct strategy to win

Lesson #14: Don’t be afraid to be blunt

Lesson #15: Design the component for its intended audience

Lesson #16: Be more afraid of boring your players than challenging them

Lesson #17: You don’t have to change much to change everything

Lesson #18: Restrictions breed creativity

Lesson #19: Your audience is good at recognizing problems and bad at solving them

Lesson #20: All the lessons connect