v2.06.0

-Significant UI / UX improvements
taoteh1221 · Oct 13, 2019 · 71a25dc · 71a25dc
1 parent b2fc9c3
commit 71a25dc
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 116 deletions.
diff --git a/README.txt b/README.txt
@@ -37,7 +37,7 @@ Follow the prompts, and the automated script will install / configure the ticker
 CONFIGURING AFTER INSTALLATION
 
 
-Edit the following file in a text editor to switch between the different Coinbase Pro crypto assets and their paired markets: 
+Edit the following file in a text editor to switch between different exchanges / crypto assets / base pairings, and to configure slideshow speed / font size / vertical position / screen orientation: 
 
 /home/pi/dfd-crypto-ticker/apps/ticker/config.js
 

diff --git a/TICKER-INSTALL.bash b/TICKER-INSTALL.bash
@@ -198,8 +198,8 @@ echo "Proceeding with required component installation..."
 
 echo " "
 
-# ttf-ancient-fonts provides needed unicode font coverage in chromium
-/usr/bin/sudo /usr/bin/apt-get install xdotool unclutter raspberrypi-ui-mods rpi-chromium-mods ttf-ancient-fonts -y
+# Including common font packages with good unicode support in chromium (needed for crypto / other unicode symbols)
+/usr/bin/sudo /usr/bin/apt-get install xdotool unclutter raspberrypi-ui-mods rpi-chromium-mods ttf-ancient-fonts ttf-dejavu ttf-mscorefonts-installer fonts-symbola fonts-noto xfonts-unifont ttf-unifont -y
 
 echo " "
 
@@ -554,8 +554,9 @@ fi
 
 
 
-echo "Edit the following file in a text editor to switch between the"
-echo "different Coinbase Pro crypto assets and their paired markets: "
+echo "Edit the following file in a text editor to switch between different"
+echo "exchanges / crypto assets / base pairings, and to configure"
+echo "slideshow speed / font size / vertical position / screen orientation:"
 echo "/home/$SYS_USER/dfd-crypto-ticker/apps/ticker/config.js"
 echo " "
 

diff --git a/dfd-crypto-ticker/Misc.Docs.Etc/changelog.txt b/dfd-crypto-ticker/Misc.Docs.Etc/changelog.txt
@@ -166,6 +166,13 @@ v2.05.2
 ---------------------------------------------------------
 
 
+---------------------------------------------------------
+v2.06.0
+-Significant UI / UX improvements
+---------------------------------------------------------
+
+
+
 
 
 

diff --git a/dfd-crypto-ticker/apps/ticker/config.js b/dfd-crypto-ticker/apps/ticker/config.js
@@ -5,21 +5,39 @@
 //  TYPOS LIKE MISSED SEMICOLONS / MISSED QUOTES / ETC WILL BREAK THE APP, BE CAREFUL EDITING THIS CONFIG FILE
 
 
-// Which coinbase pro crypto to use ticker for
-// Separate with pipe | symbol to "slideshow" between multiple tickers (example:'BTC-USD|BTC-GBP|ETH-USD|ETH-EUR|LTC-EUR|MANA-USDC')
-var crypto_markets = 'BTC-USD|ETH-USD'; // BTC-USD / BTC-GBP / ETH-USD / ETH-EUR / LTC-EUR / MANA-USDC / whatever pairing available
+// What exchange to use
+// Currently only coinbase is supported (kraken is coming soon)
+var crypto_exchange = 'coinbase'; 
+
+
+// Which crypto asset(s) to display on the ticker
+// Separate with pipe | symbol to "slideshow" between multiple tickers (example:'BTC-USD|BTC-GBP|ETH-USD|ETH-BTC|ETH-EUR|LTC-BTC|LTC-EUR|MANA-USDC')
+// BTC-USD / BTC-GBP / ETH-USD / ETH-BTC / ETH-EUR / LTC-BTC / LTC-EUR / MANA-USDC / whatever pairing available on the exchange
+var crypto_markets = 'BTC-USD|ETH-USD|ETH-BTC'; 
 
 
 // Seconds between "slideshowing" multiple tickers (if multiple assets configured)
 var slideshow_speed = 20; 
 
 
-// Orientation (upright, or flip upside-down)
-var screen_position = 'flip'; // 'upright' or 'flip'
+// Title font size
+var title_size = 52;
+
+
+// Ticker font size
+var ticker_size = 72;
+
+
+// Volume font size
+var volume_size = 35;
+
+
+// Bottom margin (adjusts the ticker's vertical position)
+var bottom_margin = 43;
 
 
-// Bottom margin
-var bottom_margin = '55px'; // '[number]px' example: '55px'
+// Screen orientation (upright, or flip upside-down)
+var orient_screen = 'flip'; // 'upright' or 'flip'
 
 
 

diff --git a/dfd-crypto-ticker/apps/ticker/css/style.css b/dfd-crypto-ticker/apps/ticker/css/style.css
@@ -6,7 +6,7 @@
 body, html {
   margin: 0px;
   padding: 0px;
-  font-family: serif;
+  font-family: Montserrat, serif;
 }
 
 
@@ -19,70 +19,39 @@ html {
 }
 
 
-.title {
-	white-space: nowrap;
-  position: relative;
-  font-family: serif;
-  font-weight: 350;
-  font-size:48px;
-  margin: 0;
-}
-
-
-.small {
-  font-weight: 350;
-  font-size: 29px;
-}
-
-
 p {
   position: relative;
-  font-family: serif;
+  font-family: Montserrat, serif;
 }
 
 
-#ticker_window {
-
-  font-family: serif;
-  border: 0px solid red;
-  position:absolute;
-	text-align: center;
+.title {
 	white-space: nowrap;
-	display: inline-block;
   position: relative;
-  margin: 0px;
-  height: auto;
-  width: 90%; /* centers different assets ok on 3.5" screen */
-  background: black;
-  color: #c6c6c6;
-  padding: 1em;
-  padding-bottom: 55px;
-}
-
-
-#ticker_window div.asset_tickers {
-  display: none;
-  margin: 0px;
-  padding: 0px;
+  font-family: Montserrat, serif;
+  font-weight: 350;
+  font-size: 48px;
+  margin: 0;
 }
 
 
-#ticker_window div.asset_tickers:first-child {
-    display: inline-block;
+.ticker {
+	white-space: nowrap;
+  overflow: hidden;
+  font-weight: 350;
+  font-size: 60px;
 }
 
 
-#ticker_window > div.asset_tickers{
-   /* width:400px;
-    height:250px; */
+.tick_text {
+  margin: auto;
+  text-align: center;
 }
 
 
-.ticker {
-	white-space: nowrap;
-  overflow: hidden;
+.volume {
   font-weight: 350;
-  font-size: 60px;
+  font-size: 29px;
 }
 
 
@@ -97,56 +66,90 @@ p {
 
 
 .spacing {
+  position: relative;
 	margin-top: 30px;
 }
 
 
-.tick {
-  margin: auto;
-  text-align: center;
-}
-
-
 span {
   width: 175px;
   text-align: left;
 }
 
 
 span.arrow {
-border: 0px solid white;
-position: relative;
-vertical-align: middle;
-margin-right: 10px;
+position: absolute;
+left: 0px;
+  padding: 0px;
+  margin: 0px;
+  width: auto;
+  min-height: 58px;
+  max-height: 58px;
+  border-left: 24px solid transparent;
+  border-right: 24px solid transparent;
 }
 
 
+div.arrow_wrapper {
+display: inline-block;
+position: relative;
+top: 5px;
+  min-width: 48px;
+  max-width: 48px;
+  min-height: 58px;
+  max-height: 58px;
+padding: 0px;
+margin: 0px;
+margin-right: 8px;
+}
+
 
 span.buy {
-  /*background-color: solid rgb(105, 199, 115);*/
-  position: relative;
-  bottom: 35px;
-  width: auto;
-  height: 58px;
-  border-left: 24px solid transparent;
-  border-right: 24px solid transparent;
-  border-bottom: 58px solid rgb(105, 199, 115);
-  font-size: 0px;
-  line-height: 0px;
+bottom: 0px;
+border-bottom: 58px solid rgb(105, 199, 115);
 }
 
 
 span.sell {
-  /*background-color: rgb(199, 105, 105);*/
+top: 0px;
+border-top: 58px solid rgb(199, 105, 105);
+}
+
+
+#ticker_window {
+
+  font-family: Montserrat, serif;
+  border: 0px solid red;
+  position:absolute;
+	text-align: center;
+	white-space: nowrap;
+	display: inline-block;
   position: relative;
-  bottom: -23px;
-  width: auto;
-  height: 58px;
-  border-left: 24px solid transparent;
-  border-right: 24px solid transparent;
-  border-top: 58px solid rgb(199, 105, 105);
-  font-size: 0px;
-  line-height: 0px;
+  margin: 0px;
+  height: auto;
+  width: 90%; /* centers different assets ok on 3.5" screen */
+  background: black;
+  color: #c6c6c6;
+  padding: 1em;
+  padding-bottom: 55px;
+}
+
+
+#ticker_window div.asset_tickers {
+  display: none;
+  margin: 0px;
+  padding: 0px;
+}
+
+
+#ticker_window div.asset_tickers:first-child {
+    display: inline-block;
+}
+
+
+#ticker_window > div.asset_tickers{
+   /* width:400px;
+    height:250px; */
 }
 
 

diff --git a/dfd-crypto-ticker/apps/ticker/index.html b/dfd-crypto-ticker/apps/ticker/index.html
@@ -10,6 +10,8 @@
     <link rel="stylesheet prefetch" href="css/normalize.min.css"/>
 
      <link rel="stylesheet prefetch" href="css/font-awesome.min.css"/>
+
+     <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
 
 	<link rel="stylesheet" href="css/style.css" type="text/css" />
 
@@ -31,7 +33,7 @@
 
   	<script>
   	markets.forEach(element => {
-  	render_ticker(element);
+  	ticker_html(element);
 	});
   	</script>
-Original file line number
+Diff line change
@@ Expand Up / @@ -166,6 +166,13 @@ v2.05.2 @@
     ---------------------------------------------------------
+    ---------------------------------------------------------
+    v2.06.0
+    -Significant UI / UX improvements
+    ---------------------------------------------------------
@@ Expand Down @@