user choosing options to display working on new frontend

csv/crypto.csv

@@ -1,4 +1,4 @@
 symbol,name,base,current,24hr change
-BTC,bitcoin,usd,38562,-3.1527074759072398
+BTC,bitcoin,usd,46362,1.8691205900650751
-ETH,ethereum,gbp,1804.79,-5.029820064487153
+ETH,ethereum,gbp,2339.29,3.3388729475852204
-DOGE,dogecoin,usd,0.198365,-3.4809067470776904
+DOGE,dogecoin,usd,0.278677,9.96397119802603

csv/currency.json

@@ -1 +1 @@
-["USD", {"AUD": [1.3535, 1.358], "CAD": [1.2515, 1.2465], "CHF": [0.90324, 0.90535], "EUR": [0.8414, 0.84133], "GBP": [0.71817, 0.71991], "JPY": [109.13, 109.52], "NZD": [1.4264, 1.4337]}]
+["USD", {"AUD": [1.3618, 1.362], "CAD": [1.2525, 1.2565], "CHF": [0.9232, 0.92245], "EUR": [0.85339, 0.8531], "GBP": [0.7228, 0.72145], "JPY": [110.67, 110.46], "NZD": [1.4255, 1.4296]}]

csv/current_weather.json

@@ -1 +1 @@
-[{"main_weather": "Clouds", "description": "broken clouds", "temp": 27.33, "min_temp": 26.86, "max_temp": 29.57, "feels_like": 31.44, "humidity": 88, "clouds": 70, "wind_speed": 4.92, "wind_direction": 40, "visibility": 10000, "uv": 0, "rain_chance": 0.82}, {"main_weather": "Clouds", "description": "overcast clouds", "temp": 19.25, "min_temp": 13.89, "max_temp": 20.27, "feels_like": 19.01, "humidity": 68, "clouds": 94, "wind_speed": 4.63, "wind_direction": 130, "visibility": 10000, "uv": 1.06, "rain_chance": 0.56}]
+[{"main_weather": "Clouds", "description": "overcast clouds", "temp": 27.3, "min_temp": 27.3, "max_temp": 29.42, "feels_like": 31.86, "humidity": 92, "clouds": 100, "wind_speed": 0.45, "wind_direction": 8, "visibility": 10000, "uv": 0, "rain_chance": 0.65}, {"main_weather": "Clouds", "description": "overcast clouds", "temp": 18.32, "min_temp": 14.58, "max_temp": 23.64, "feels_like": 17.96, "humidity": 67, "clouds": 98, "wind_speed": 4.63, "wind_direction": 210, "visibility": 10000, "uv": 0, "rain_chance": 0}]

csv/daily_weather.json

@@ -1 +1 @@
-[[{"main_weather": "Rain", "description": "moderate rain", "min_temp": 26.86, "max_temp": 29.57}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 26.72, "max_temp": 28.32}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 26.03, "max_temp": 27.98}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 27.2, "max_temp": 28.08}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 27.91, "max_temp": 28.84}, {"main_weather": "Rain", "description": "light rain", "min_temp": 28.18, "max_temp": 29.87}, {"main_weather": "Rain", "description": "light rain", "min_temp": 28.09, "max_temp": 29.25}, {"main_weather": "Rain", "description": "light rain", "min_temp": 28.23, "max_temp": 29.96}], [{"main_weather": "Rain", "description": "light rain", "min_temp": 13.89, "max_temp": 20.27}, {"main_weather": "Rain", "description": "light rain", "min_temp": 13.12, "max_temp": 22.97}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 13.54, "max_temp": 21.04}, {"main_weather": "Rain", "description": "light rain", "min_temp": 15, "max_temp": 19.8}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 13.95, "max_temp": 19.15}, {"main_weather": "Rain", "description": "light rain", "min_temp": 13.39, "max_temp": 19.7}, {"main_weather": "Rain", "description": "light rain", "min_temp": 14.31, "max_temp": 22.84}, {"main_weather": "Clouds", "description": "overcast clouds", "min_temp": 15.14, "max_temp": 23.12}]]
+[[{"main_weather": "Rain", "description": "light rain", "min_temp": 27.3, "max_temp": 29.42}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 27.36, "max_temp": 29.08}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 25.87, "max_temp": 27.79}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 25.96, "max_temp": 27.5}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 26.6, "max_temp": 28.27}, {"main_weather": "Rain", "description": "light rain", "min_temp": 27.12, "max_temp": 28.64}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 26.75, "max_temp": 27.57}, {"main_weather": "Rain", "description": "light rain", "min_temp": 26.33, "max_temp": 27.22}], [{"main_weather": "Clouds", "description": "broken clouds", "min_temp": 14.58, "max_temp": 23.64}, {"main_weather": "Clouds", "description": "overcast clouds", "min_temp": 15.41, "max_temp": 23.1}, {"main_weather": "Clouds", "description": "overcast clouds", "min_temp": 14.49, "max_temp": 21.73}, {"main_weather": "Rain", "description": "light rain", "min_temp": 15.51, "max_temp": 23.53}, {"main_weather": "Rain", "description": "light rain", "min_temp": 16.91, "max_temp": 23.62}, {"main_weather": "Rain", "description": "moderate rain", "min_temp": 14.19, "max_temp": 17.08}, {"main_weather": "Clouds", "description": "scattered clouds", "min_temp": 13.11, "max_temp": 22.04}, {"main_weather": "Rain", "description": "light rain", "min_temp": 15.32, "max_temp": 18.95}]]

csv/display_settings.json

@@ -0,0 +1 @@
+["Forex", "Crypto", "Custom Messages", "Stocks"]

csv/last_updates.json

@@ -0,0 +1 @@
+{"stocks": "11/08/2021 15:55:17", "crypto": "11/08/2021 15:55:21", "news": "11/08/2021 15:55:23", "weather": "11/08/2021 15:55:22", "forex": "11/08/2021 21:55:27", "sports": "11/08/2021 15:55:24"}

csv/news.csv

@@ -1,21 +1,21 @@
 headline,source,date,time
-Pentagon on lockdown after gunshots fired near Metro station - Daily Mail,Daily Mail,2021-08-03,16:26:56Z
+Magnitude 7.3 earthquake jolts Davao Oriental town - CNN Philippines,CNN Philippines,2021-08-11,18:38:58Z
-Andrew Cuomo: New York Governor sexually harassed women^ report finds - BBC News,BBC News,2021-08-03,16:14:54Z
+Kathy Hochul vows to change ‘toxic’ environment as New York’s next governor – live - The Guardian,The Guardian,2021-08-11,18:36:25Z
-New York Gov. Andrew Cuomo sexually harassed multiple women^ state attorney general report says - CNN,CNN,2021-08-03,16:13:00Z
+Chelsea vs Villarreal LIVE: Uefa Super Cup team news^ line-ups and more tonight - The Independent,Independent,2021-08-11,18:36:23Z
-Vaccinated people are much more protected from COVID-19 than unvaccinated individuals; the benefits of the COVID-19 vaccines outweigh their risks - Health Feedback,Health Feedback,2021-08-03,16:08:36Z
+Admiral Art McDonald plans to return to his job as chief of defence staff following sexual misconduct probe - CBC.ca,CBC News,2021-08-11,18:30:10Z
-Coronavirus live updates: Quebec reports 175 new cases^ no deaths - Montreal Gazette,Montreal Gazette,2021-08-03,16:06:05Z
+Samsung did Pixel owners dirty on trade-in values for the Z Fold3 and Flip3 - Android Police,Android Police,2021-08-11,18:05:00Z
-Index surges anew ahead of Q2 earnings - Philstar.com,Philippine Star,2021-08-03,16:00:00Z
+Gavin Williamson should be sacked over exam failures^ says Keir Starmer - The Guardian,The Guardian,2021-08-11,18:03:00Z
-Matt Damon’s New Statement Saying He Doesn’t “Use Slurs Of Any Kind” After “Retiring The F-Slur” Has Sparked A Huge Debate In Light Of Him Playing Gay Characters In The Past - BuzzFeed News,BuzzFeed News,2021-08-03,15:55:00Z
+C.D.C. Endorses Covid Vaccinations for Pregnant People - The New York Times,New York Times,2021-08-11,18:02:06Z
-Pentagon reopens after brief lockdown due to shooting near Metro station - Hindustan Times,Hindustan Times,2021-08-03,15:51:14Z
+Global warming begets more warming^ new paleoclimate study finds - Phys.org,Phys.Org,2021-08-11,18:00:05Z
-Massive Balloon the Size of a Soccer Stadium to Launch Telescope to Edge of Space to Study How Stars Form - Good News Network,Good News Network,2021-08-03,15:51:01Z
+Oregon indoor mask mandate will go into effect Friday - KATU,KATU,2021-08-11,18:00:00Z
-Today’s coronavirus news: Ontario reporting 164 cases Tuesday^ 168 cases Monday; NYC to require vaccination proof for indoor dining^ gyms - Toronto Star,Toronto Star,2021-08-03,15:45:00Z
+ISRO's Chandrayaan-2 instrument detects hydroxyl^ water molecules on the Moon - Deccan Herald,Deccan Herald,2021-08-11,17:53:07Z
-NBA free agency Day 1 winners and losers: Heat make power moves; Lakers defense takes hit; Knicks go sideways - CBS Sports,CBS Sports,2021-08-03,15:45:00Z
+Federal judge says Trump’s accountants must turn over tax records to House panel - POLITICO,Politico,2021-08-11,17:42:45Z
-Covid 19 coronavirus: China orders mass testing in Wuhan as outbreak spreads - New Zealand Herald,New Zealand Herald,2021-08-03,15:35:31Z
+Hackers Return Nearly Half Of $600 Million Stolen In Biggest Crypto Heist - NDTV Profit,NDTV News,2021-08-11,17:42:08Z
-Celtic sign goalkeeper Joe Hart and midfielder James McCarthy - Sky Sports,Sky Sports,2021-08-03,15:33:55Z
+'Jeopardy' will replace Alex Trebek with not one^ but two hosts - CNN,CNN,2021-08-11,17:30:00Z
-At least 3 injured in workplace shooting at SmileDirectClub in Antioch^ Tennessee - NBC News,NBC News,2021-08-03,15:32:02Z
+Razer’s Fantastic New Wireless Earbuds Put a Light Show in Your Earholes - Gizmodo,Gizmodo.com,2021-08-11,17:30:00Z
-#UnrestSA: State wants to adds treason charges to lawyer Ike Khumalo's incitement case - News24,News24,2021-08-03,15:27:28Z
+Tokyo Olympics 2020: Aussie Olympians face 28 days of quarantine - New Zealand Herald,New Zealand Herald,2021-08-11,17:29:56Z
-Boeing delays key uncrewed test flight of Starliner capsule to space station - The Straits Times,The Straits Times,2021-08-03,15:21:41Z
+Instagram says sorry for removing Pedro Almodovar film poster - BBC News,BBC News,2021-08-11,17:27:49Z
-Florida's Broward County school district reverses its mask mandate after funding threat from the governor - CNN,CNN,2021-08-03,15:21:00Z
+'More pepper^ please': New study analyzes role of scent compounds in the coevolution of bats and pepper plants - UW News,UW News,2021-08-11,17:26:08Z
-U.S. Gov. Cuomo sexually harassed multiple women^ probe finds - CTV News,Ctvnews.ca,2021-08-03,15:18:39Z
+1 man dead^ another injured in Lowertown shooting - CBC.ca,CBC News,2021-08-11,17:23:37Z
-COVID-19: UK records another 138 coronavirus deaths - the highest daily total since 17 March - Sky News,Sky.com,2021-08-03,15:17:28Z
+Mike Richards to replace Alex Trebek as 'Jeopardy!' host; Mayim Bialik gets role too - CTV News,Ctvnews.ca,2021-08-11,17:23:00Z
-Tokyo Olympics: PV Sindhu^ India's Double Olympic Medallist^ Felicitated After Returning From Tokyo | Olympics News - NDTVSports.com,NDTV News,2021-08-03,15:17:00Z
+Judge rejects acquittal of soldier accused of feeding troops cannabis-laced cupcakes - CBC.ca,CBC News,2021-08-11,17:21:49Z

csv/tickers.csv

@@ -1,4 +1,4 @@
 name,current,opening
-MSFT,286.9,285.605
+MSFT,286.91,287.17
-NFLX,510.84,514.24
+NFLX,512.04,516.025
-GOOG,2720.7,2721.21
+GOOG,2756.21,2768.665

server.py

@@ -17,6 +17,7 @@ import time
 import json
 from multiprocessing import Process
 from subprocess import Popen, PIPE
+import numpy as np
 #stock_ticker = StockTicker()
 api_caller = pexpect.spawn("sudo -E python3 api_caller.py")
 
@@ -267,8 +268,48 @@ def AddLogo():
             return hello()
     return hello()
 
-@app.route("/matrix", methods=['POST'])
+
+@app.route("/start", methods = ['PUT', 'POST'])
+def start():
+    data = str(request.data)
+  
+    
+    
+    all_settings = ['Stocks', 'Crypto', 'Forex', 'Current Weather', 'Daily Forecast', 'News', 'Sports (Upcoming Games)', 'Sports (Past Games)',
+                    'Sports (Live Games)', 'Sports (Team Stats)', 'Custom Images', 'Custom GIFs', 'Custom Messages']
+    positions = []
+    display_settings = []
+    
+    for setting in all_settings:
+        pos = data.find(setting)
+        if pos != -1:
+            display_settings.append(setting)
+            positions.append(pos)
+            
+    # sort settings by display 
+    inds = np.argsort(positions)
+    display_settings = np.array(display_settings)[inds]
+    
+    with open('csv/display_settings.json', 'w+') as f:
+        json.dump(list(display_settings), f)
+    
+    ticker.sendline('K')
+    ticker.sendline('A')
+    return hello()
+
+@app.route("/stop")
+def stop():
+    ticker.sendline('K')
+    return hello()
+
+@app.route("/shutdown")
+def shutdown():
+    os.system("sudo shutdown now")
+    return hello()
+
+@app.route("/matrix")
 def matrix():
+    
     if "Run Stocks" in request.form:
         ticker.sendline('K')
         ticker.sendline('S')

static/app.js

@@ -0,0 +1,579 @@
+var availableFeatures = document.querySelectorAll("#available-features li");
+var displayFormat = document.querySelector("#display-format");
+var featureToDisplay = document.querySelector("#feature-to-display");
+var displayToFeature = document.querySelector("#display-to-feature");
+var displayToFormat = document.querySelectorAll("#display-format li");
+var availableToDisplay = document.querySelector("#available-features");
+var displayincreaseBtn = document.getElementById("display-increase-btn");
+var displayDecreaseBtn = document.getElementById("display-decrease-btn");
+
+// features lists
+var stocksFeatures = document.querySelectorAll("#stocks-features li");
+var cryptoFeatures = document.querySelectorAll("#crypto-features li");
+var forexFeatures = document.querySelectorAll("#forex-features li");
+var currentWeatherFeatures = document.querySelectorAll(
+  "#current-weather-features li"
+);
+var dailyForecastFeatures = document.querySelectorAll(
+  "#daily-forecast-features li"
+);
+var newsFeatures = document.querySelectorAll("#news-features li");
+var upcomingGamesFeatures = document.querySelectorAll(
+  "#upcoming-games-features li"
+);
+var pastGamesFeatures = document.querySelectorAll("#past-games-features li");
+var liveGamesFeatures = document.querySelectorAll("#live-games-features li");
+var teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
+var imagesFeatures = document.querySelectorAll("#images-features li");
+var gifsFeatures = document.querySelectorAll("#gifs-features li");
+var messagesFeatures = document.querySelectorAll("#messages-features li");
+
+var allFeaturesList = [
+  stocksFeatures,
+  cryptoFeatures,
+  forexFeatures,
+  currentWeatherFeatures,
+  dailyForecastFeatures,
+  newsFeatures,
+  upcomingGamesFeatures,
+  pastGamesFeatures,
+  liveGamesFeatures,
+  teamStatsFeatures,
+  imagesFeatures,
+  gifsFeatures,
+  messagesFeatures,
+];
+
+// features remove buttons
+var stocksRemoveBtn = document.getElementById("stocks-remove-btn");
+var cryptoRemoveBtn = document.getElementById("crypto-remove-btn");
+var forexRemoveBtn = document.getElementById("forex-remove-btn");
+var currentWeatherRemoveBtn = document.getElementById(
+  "current-weather-remove-btn"
+);
+var dailyForecastRemoveBtn = document.getElementById(
+  "daily-forecast-remove-btn"
+);
+var newsRemoveBtn = document.getElementById("news-remove-btn");
+var upcomingGamesRemoveBtn = document.getElementById(
+  "upcoming-games-remove-btn"
+);
+var pastGamesRemoveBtn = document.getElementById("past-games-remove-btn");
+var liveGamesRemoveBtn = document.getElementById("live-games-remove-btn");
+var teamStatsRemoveBtn = document.getElementById("team-stats-remove-btn");
+var imagesRemoveBtn = document.getElementById("images-remove-btn");
+var gifsRemoveBtn = document.getElementById("gifs-remove-btn");
+var messagesRemoveBtn = document.getElementById("messages-remove-btn");
+
+var allFeaturesRemoveBtns = [
+  stocksRemoveBtn,
+  cryptoRemoveBtn,
+  forexRemoveBtn,
+  currentWeatherRemoveBtn,
+  dailyForecastRemoveBtn,
+  newsRemoveBtn,
+  upcomingGamesRemoveBtn,
+  pastGamesRemoveBtn,
+  liveGamesRemoveBtn,
+  teamStatsRemoveBtn,
+  imagesRemoveBtn,
+  gifsRemoveBtn,
+  messagesRemoveBtn,
+];
+// features increase buttons
+var stocksincreaseBtn = document.getElementById("stocks-increase-btn");
+var cryptoincreaseBtn = document.getElementById("crypto-increase-btn");
+var forexincreaseBtn = document.getElementById("forex-increase-btn");
+var currentWeatherincreaseBtn = document.getElementById(
+  "current-weather-increase-btn"
+);
+var dailyForecastincreaseBtn = document.getElementById(
+  "daily-forecast-increase-btn"
+);
+var newsincreaseBtn = document.getElementById("news-increase-btn");
+var upcomingGamesincreaseBtn = document.getElementById(
+  "upcoming-games-increase-btn"
+);
+var pastGamesincreaseBtn = document.getElementById("past-games-increase-btn");
+var liveGamesincreaseBtn = document.getElementById("live-games-increase-btn");
+var teamStatsincreaseBtn = document.getElementById("team-stats-increase-btn");
+var imagesincreaseBtn = document.getElementById("images-increase-btn");
+var gifsincreaseBtn = document.getElementById("gifs-increase-btn");
+var messagesincreaseBtn = document.getElementById("messages-increase-btn");
+
+var allFeaturesIncreaseBtns = [
+  stocksincreaseBtn,
+  cryptoincreaseBtn,
+  forexincreaseBtn,
+  currentWeatherincreaseBtn,
+  dailyForecastincreaseBtn,
+  newsincreaseBtn,
+  upcomingGamesincreaseBtn,
+  pastGamesincreaseBtn,
+  liveGamesincreaseBtn,
+  teamStatsincreaseBtn,
+  imagesincreaseBtn,
+  gifsincreaseBtn,
+  messagesincreaseBtn,
+];
+
+// features decrease buttons
+var stocksDecreaseBtn = document.getElementById("stocks-decrease-btn");
+var cryptoDecreaseBtn = document.getElementById("crypto-decrease-btn");
+var forexDecreaseBtn = document.getElementById("forex-decrease-btn");
+var currentWeatherDecreaseBtn = document.getElementById(
+  "current-weather-decrease-btn"
+);
+var dailyForecastDecreaseBtn = document.getElementById(
+  "daily-forecast-decrease-btn"
+);
+var newsDecreaseBtn = document.getElementById("news-decrease-btn");
+var upcomingGamesDecreaseBtn = document.getElementById(
+  "upcoming-games-decrease-btn"
+);
+var pastGamesDecreaseBtn = document.getElementById("past-games-decrease-btn");
+var liveGamesDecreaseBtn = document.getElementById("live-games-decrease-btn");
+var teamStatsDecreaseBtn = document.getElementById("team-stats-decrease-btn");
+var imagesDecreaseBtn = document.getElementById("images-decrease-btn");
+var gifsDecreaseBtn = document.getElementById("gifs-decrease-btn");
+var messagesDecreaseBtn = document.getElementById("messages-decrease-btn");
+
+var allFeaturesDecreaseBtns = [
+  stocksDecreaseBtn,
+  cryptoDecreaseBtn,
+  forexDecreaseBtn,
+  currentWeatherDecreaseBtn,
+  dailyForecastDecreaseBtn,
+  newsDecreaseBtn,
+  upcomingGamesDecreaseBtn,
+  pastGamesDecreaseBtn,
+  liveGamesDecreaseBtn,
+  teamStatsDecreaseBtn,
+  imagesDecreaseBtn,
+  gifsDecreaseBtn,
+  messagesDecreaseBtn,
+];
+
+const changeVarValue = () => {
+  stocksFeatures = document.querySelectorAll("#stocks-features li");
+  cryptoFeatures = document.querySelectorAll("#crypto-features li");
+  forexFeatures = document.querySelectorAll("#forex-features li");
+  currentWeatherFeatures = document.querySelectorAll(
+    "#current-weather-features li"
+  );
+  dailyForecastFeatures = document.querySelectorAll(
+    "#daily-forecast-features li"
+  );
+  newsFeatures = document.querySelectorAll("#news-features li");
+  upcomingGamesFeatures = document.querySelectorAll(
+    "#upcoming-games-features li"
+  );
+  pastGamesFeatures = document.querySelectorAll("#past-games-features li");
+  liveGamesFeatures = document.querySelectorAll("#live-games-features li");
+  teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
+  imagesFeatures = document.querySelectorAll("#images-features li");
+  gifsFeatures = document.querySelectorAll("#gifs-features li");
+  messagesFeatures = document.querySelectorAll("#messages-features li");
+
+  allFeaturesList = [
+    stocksFeatures,
+    cryptoFeatures,
+    forexFeatures,
+    currentWeatherFeatures,
+    dailyForecastFeatures,
+    newsFeatures,
+    upcomingGamesFeatures,
+    pastGamesFeatures,
+    liveGamesFeatures,
+    teamStatsFeatures,
+    imagesFeatures,
+    gifsFeatures,
+    messagesFeatures,
+  ];
+};
+
+const addEventOnList = () => {
+  // for available feature
+  for (let i = 0; i < availableFeatures.length; i++) {
+    const availableFeature = availableFeatures[i];
+    availableFeature.addEventListener("click", () => {
+      for (let i = 0; i < availableFeatures.length; i++) {
+        availableFeatures[i].setAttribute("class", "");
+      }
+      if (availableFeature.getAttribute("class") == "active") {
+        availableFeature.setAttribute("class", "");
+      } else {
+        availableFeature.setAttribute("class", "active");
+      }
+    });
+  }
+  // for display format
+  for (let i = 0; i < displayToFormat.length; i++) {
+    const display_format = displayToFormat[i];
+    display_format.addEventListener("click", () => {
+      for (let i = 0; i < displayToFormat.length; i++) {
+        displayToFormat[i].setAttribute("class", "");
+      }
+      if (display_format.getAttribute("class") == "active") {
+        display_format.setAttribute("class", "");
+      } else {
+        display_format.setAttribute("class", "active");
+      }
+    });
+  }
+};
+
+const addEventonBtns = () => {
+  featureToDisplay.addEventListener("click", () => {
+    for (let i = 0; i < availableFeatures.length; i++) {
+      const availableFeature = availableFeatures[i];
+      if (availableFeature.getAttribute("class") == "active") {
+        availableFeature.remove();
+        availableFeature.setAttribute("class", "");
+        displayFormat.appendChild(availableFeature);
+        availableFeatures = document.querySelectorAll("#available-features li");
+        displayToFormat = document.querySelectorAll("#display-format li");
+        addEventOnList();
+      }
+    }
+  });
+
+  displayToFeature.addEventListener("click", () => {
+    for (let i = 0; i < displayToFormat.length; i++) {
+      const availableFormat = displayToFormat[i];
+      if (availableFormat.getAttribute("class") == "active") {
+        availableFormat.remove();
+        availableFormat.setAttribute("class", "");
+        availableToDisplay.appendChild(availableFormat);
+        availableFeatures = document.querySelectorAll("#available-features li");
+        displayToFormat = document.querySelectorAll("#display-format li");
+        addEventOnList();
+      }
+    }
+  });
+};
+
+addEventOnList();
+addEventonBtns();
+
+const addEventOnFeaturesList = () => {
+  allFeaturesList.map((value) => {
+    for (let i = 0; i < value.length; i++) {
+      const availableFeature = value[i];
+      availableFeature.addEventListener("click", () => {
+        for (let i = 0; i < value.length; i++) {
+          value[i].setAttribute("class", "");
+        }
+        if (availableFeature.getAttribute("class") == "active") {
+          availableFeature.setAttribute("class", "");
+        } else {
+          availableFeature.setAttribute("class", "active");
+        }
+      });
+    }
+  });
+};
+addEventOnFeaturesList();
+
+// display increase function
+displayincreaseBtn.addEventListener("click", () => {
+  for (let i = 0; i < displayToFormat.length; i++) {
+    var displayItem = displayToFormat[i];
+
+    if (displayItem.getAttribute("class") == "active") {
+      var prevElement = displayItem.previousElementSibling;
+      var currentText = displayItem.innerText;
+
+      displayItem.innerText = prevElement.innerText;
+      prevElement.innerText = currentText;
+      prevElement.setAttribute("class", "active");
+      displayItem.setAttribute("class", "");
+    }
+  }
+});
+
+// display decrease function
+displayDecreaseBtn.addEventListener("click", () => {
+  for (let i = 0; i < displayToFormat.length; i++) {
+    var displayItem = displayToFormat[i];
+
+    if (displayItem.getAttribute("class") == "active") {
+      var nextElement = displayItem.nextElementSibling;
+      var currentText = displayItem.innerText;
+
+      displayItem.innerText = nextElement.innerText;
+      nextElement.innerText = currentText;
+      nextElement.setAttribute("class", "active");
+      displayItem.setAttribute("class", "");
+      break;
+    }
+  }
+});
+
+// feature remove function
+allFeaturesRemoveBtns.map((value, index) => {
+  value.addEventListener("click", () => {
+    for (let i = 0; i < allFeaturesList[index].length; i++) {
+      var item = allFeaturesList[index][i];
+      if (item.getAttribute("class") == "active") {
+        item.remove();
+      }
+    }
+  });
+});
+
+// feature increase function
+allFeaturesIncreaseBtns.map((value, index) => {
+  value.addEventListener("click", () => {
+    for (let i = 0; i < allFeaturesList[index].length; i++) {
+      var item = allFeaturesList[index][i];
+
+      if (item.getAttribute("class") == "active") {
+        var prevElement = item.previousElementSibling;
+        var currentText = item.innerText;
+        item.innerText = prevElement.innerText;
+        prevElement.innerText = currentText;
+        prevElement.setAttribute("class", "active");
+        item.setAttribute("class", "");
+      }
+    }
+  });
+});
+
+// feature decrease function
+allFeaturesDecreaseBtns.map((value, index) => {
+  value.addEventListener("click", () => {
+    for (let i = 0; i < allFeaturesList[index].length; i++) {
+      var item = allFeaturesList[index][i];
+
+      if (item.getAttribute("class") == "active") {
+        var nextElement = item.nextElementSibling;
+        var currentText = item.innerText;
+
+        item.innerText = nextElement.innerText;
+        nextElement.innerText = currentText;
+        nextElement.setAttribute("class", "active");
+        item.setAttribute("class", "");
+        break;
+      }
+    }
+  });
+});
+
+// all features
+var stocks = document.getElementById("stocks-features");
+var crypto1 = document.getElementById("crypto-features");
+var forex = document.getElementById("forex-features");
+var currentWeather = document.getElementById("current-weather-features");
+var dailyForecast = document.getElementById("daily-forecast-features");
+var news = document.getElementById("news-features");
+var upcomingGames = document.getElementById("upcoming-games-features");
+var pastGames = document.getElementById("past-games-features");
+var liveGames = document.getElementById("live-games-features");
+var teamStats = document.getElementById("team-stats-features");
+var images = document.getElementById("images-features");
+var gifs = document.getElementById("gifs-features");
+var messages = document.getElementById("messages-features");
+
+var allFeatures = [
+  stocks,
+  crypto1,
+  forex,
+  currentWeather,
+  dailyForecast,
+  news,
+  upcomingGames,
+  pastGames,
+  liveGames,
+  teamStats,
+  images,
+  gifs,
+  messages,
+];
+
+// features select box
+var newsSelect = document.getElementById("inputTransition63");
+var upcomingGamesSelect = document.getElementById("inputTransition73");
+var pastGamesSelect = document.getElementById("inputTransition83");
+var liveGamesSelect = document.getElementById("inputTransition93");
+var teamStatsSelect = document.getElementById("inputTransition103");
+var allFeaturesSelectBox = [
+  null,
+  null,
+  null,
+  null,
+  null,
+  newsSelect,
+  upcomingGamesSelect,
+  pastGamesSelect,
+  liveGamesSelect,
+  teamStatsSelect,
+  null,
+  null,
+  null,
+];
+
+// features select add buttons
+var newsAddBtn = document.getElementById("inputTransitionBtn63");
+var upcomingGamesAddBtn = document.getElementById("inputTransitionBtn73");
+var pastGamesAddBtn = document.getElementById("inputTransitionBtn83");
+var liveGamesAddBtn = document.getElementById("inputTransitionBtn93");
+var teamStatsAddBtn = document.getElementById("inputTransitionBtn103");
+var allFeaturesSelectAddBtn = [
+  null,
+  null,
+  null,
+  null,
+  null,
+  newsAddBtn,
+  upcomingGamesAddBtn,
+  pastGamesAddBtn,
+  liveGamesAddBtn,
+  teamStatsAddBtn,
+  null,
+  null,
+  null,
+];
+
+allFeaturesSelectAddBtn.map((value, index) => {
+  if (value != null) {
+    value.addEventListener("click", () => {
+      var tag = document.createElement("li");
+      tag.innerHTML = allFeaturesSelectBox[index].value;
+      allFeatures[index].appendChild(tag);
+      changeVarValue();
+      addEventOnFeaturesList();
+    });
+  }
+});
+
+// features input file
+var imagesFile = document.getElementById("inputText11");
+var gifsFile = document.getElementById("inputText1112");
+
+var allFeaturesFile = [
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  imagesFile,
+  gifsFile,
+  null,
+];
+// features file add button
+var imagesFileAddBtn = document.getElementById("inputTextBtn11");
+var gifsFileAddBtn = document.getElementById("inputTextBtn1112");
+
+var allFeaturesFileAddBtn = [
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  imagesFileAddBtn,
+  gifsFileAddBtn,
+  null,
+];
+
+allFeaturesFileAddBtn.map((value, index) => {
+  if (value !== null) {
+    value.addEventListener("click", () => {
+      var tag = document.createElement("li");
+      tag.innerHTML = allFeaturesFile[index].files[0].name;
+      allFeatures[index].appendChild(tag);
+      changeVarValue();
+      addEventOnFeaturesList();
+    });
+  }
+});
+
+// features input text
+var stocksText = document.getElementById("inputText3");
+var cryptoText = document.getElementById("inputText4");
+var forexText = document.getElementById("inputText5");
+var currentWeatherText = document.getElementById("inputText6");
+var dailyForecastText = document.getElementById("inputText7");
+var messagesText = document.getElementById("inputText13");
+
+var allFeaturesText = [
+  stocksText,
+  cryptoText,
+  forexText,
+  currentWeatherText,
+  dailyForecastText,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  messagesText,
+];
+
+// features text add button
+var stocksTextAddBtn = document.getElementById("inputTextBtn3");
+var cryptoTextAddBtn = document.getElementById("inputTextBtn4");
+var forexTextAddBtn = document.getElementById("inputTextBtn5");
+var currentWeatherTextAddBtn = document.getElementById("inputTextBtn6");
+var dailyForecastTextAddBtn = document.getElementById("inputTextBtn7");
+var messagesTextAddBtn = document.getElementById("inputTextBtn13");
+
+var allFeaturesTextAddBtn = [
+  stocksTextAddBtn,
+  cryptoTextAddBtn,
+  forexTextAddBtn,
+  currentWeatherTextAddBtn,
+  dailyForecastTextAddBtn,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  messagesTextAddBtn,
+];
+
+allFeaturesTextAddBtn.map((value, index) => {
+  if (value !== null) {
+    value.addEventListener("click", () => {
+      var tag = document.createElement("li");
+      tag.innerHTML = allFeaturesText[index].value;
+      allFeatures[index].appendChild(tag);
+      changeVarValue();
+      addEventOnFeaturesList();
+    });
+  }
+});
+
+
+
+var startButton = document.getElementById("start-btn");
+
+// start the display
+
+startButton.addEventListener("click", () => {
+  var HTML = document.getElementById('display-format').innerHTML;
+  console.log('pressed');
+  console.log(HTML);
+  
+  
+  fetch("/start", {
+    method:"PUT", 
+    
+    
+    body:JSON.stringify(HTML)
+  });
+});

static/style.css

@@ -1,11 +1,165 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html body {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+html {
+  scroll-behavior: smooth;
+}
 body {
-    background: black;
+  background-color: black;
-    color: white;
+}
 
-    @font-face {
+/* Top logo bar */
-        font-family: Encode;
+header {
-        src: EncodeSans.ttf;
+  display: block;
-      }
+  margin-top: 30px;
+  border-bottom: 2px solid white;
+  padding-bottom: 20px;
+}
+
+.logo {
+  width: 200px;
+  height: 70px;
+}
+.update-btn,
+.update-btn:hover {
+  background-color: gray;
+  float: right;
+  margin-top: 20px;
+  color: white;
+}
+
+/* General Ticker */
+.buttons-list {
+  display: flex;
+  justify-content: space-around;
+  list-style-type: none;
+}
+.btn-stop-display,
+.btn-stop-display:hover {
+  background-color: purple;
+  color: white;
+}
+.set-btn,
+.set-btn:hover {
+  background-color: gray;
+  color: white;
+}
+.row-2 {
+  border-bottom: 2px solid white;
+  padding-bottom: 30px;
+}
+
+/* Features to display */
+.features-div {
+  background-color: white;
+  padding-block: 10px;
+  height: 200px;
+  overflow-y: scroll;
+}
+.features-div-two {
+  background-color: white;
+  padding-block: 10px;
+  height: 370px;
+  overflow-y: scroll;
+}
+.display-features-list {
+  list-style-type: none;
+}
+
+.fa-chevron-right,
+.fa-chevron-left,
+.fa-chevron-up,
+.fa-chevron-down,
+.fa-minus {
+  background-color: gray;
+  padding: 10px;
+}
+.icons-list {
+  margin-block: 70px;
+}
+.icons-list a {
+  color: white;
+}
+.icons-list i {
+  cursor: pointer;
+}
+.display-features-list li:hover {
+  background-color: blue;
+  cursor: pointer;
+}
+
+.save-btn-div {
+  text-align: center;
+  margin-top: 60px;
+}
+.save-btn,
+.save-btn:hover {
+  background-color: gray;
+  color: white;
+  padding-inline: 40px;
+}
+
+.footer {
+  text-align: center;
+  color: white;
+  margin-top: 120px;
+}
+
+li.active {
+  background-color: skyblue;
+}
+.row-1, .row-3{
+  margin-block: 50px;
+}
+/* Responsiveness */
+@media (max-width: 767px) {
+
+  .buttons-list{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 25px;
+    position: relative;
+    right: 20px;
+  }
+  .row-1, .row-3{
+    margin-block: 25px;
+  }
+  .screen-saver{
+    margin-block: 25px;
+  }
+  .display-none-div{
+    display: none;
+  }
+  .icons-list{
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+  }
+  .icons-list a{
+    margin-left: -120px;
+  }
+
+  .remove{
+    margin-right: -100px;
+    margin-left: -100px;
+  }
+
+
+
+
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+
+  .icons-list a{
+   position: relative;
+    top: 10px;
+  }
 
-    font-family: Encode;
 }

stockTicker.py

@@ -58,15 +58,18 @@ class StockTicker():
         self.matrix = RGBMatrix(options = options)
         self.points = True # display crypto change in points or percent
      
-        self.functions = {'stocks': self.getStockImage, 'crypto': self.getCryptoImage, 'forex': self.getForexImage, 
+        self.functions = {'Stocks': self.getStockImage, 'Crypto': self.getCryptoImage, 'Forex': self.getForexImage, 
-                'daily_weather':self.getDailyWeatherImage, 'today_weather': self.getTodayWeatherImage, 
+                'Daily Forecast':self.getDailyWeatherImage, 'Current Weather': self.getTodayWeatherImage, 
-                'league_table':lambda : self.getLeagueTableImage('premier_league'), 'past_games': lambda:self.getLeagueImage('NBA', 'past'), 
+                'Sports (Team Stats)':lambda : self.getLeagueTableImage('premier_league'), 'Sports (Past Games)': lambda:self.getLeagueImage('NBA', 'past'), 
-                'future_games': lambda : self.getLeagueImage('NHL', 'future'), 'live_games': lambda: self.getLeagueImage('NBA', 'live'), 
+                'Sports (Upcoming Games)': lambda : self.getLeagueImage('NHL', 'future'), 'Sports (Live Games)': lambda: self.getLeagueImage('NBA', 'live'), 
-                'news':self.getNewsImage, 'text': self.getUserText, 'display_image': self.getUserImage, 'display_gif':self.getUserGIF, 
+                'News':self.getNewsImage, 'Custom Messages': self.getUserText, 'Custom Images': self.getUserImage, 'Custom GIFs':self.getUserGIF, 
                 
                 
                 'stocks_prof': self.getStockProfessional, 'crypto_prof': self.getCryptoProfessional, 'forex_prof': self.getForexProfessional, 
                 'today_weather_prof': self.getTodayWeatherProfessional, 'news_prof':self.getNewsProfessional} 
+                
+                
+                
         
 
     def openImage(self, image_file):
@@ -272,8 +275,9 @@ class StockTicker():
         for option in options:
             img = self.functions[option]()
             
-            if option not in ['display_gif']: # aving the gif like this kills the animation
+            if option not in ['Custom GIFs']: # aving the gif like this kills the animation
                 img.save('./display_images/'+ option+ '.ppm')
+         
     
     def incrementGIF(self, image):
         try:
@@ -314,11 +318,11 @@ class StockTicker():
             update_process.start()
             
             
-            if options[i % len(options)] != 'display_gif':
+            if options[i % len(options)] != 'Custom GIFs':
                 image = self.openImage('./display_images/' + options[i % len(options)] +'.ppm')
                 image = image.convert('RGB')
             else:
-                image = self.openImage('./display_images/display_gif.gif')
+                image = self.openImage('./display_images/Custom GIFs.gif')
             
             img_width, img_height = image.size
             
@@ -340,11 +344,11 @@ class StockTicker():
             if animation == 'up':
                 offset_y = 33
                 direction = -1
-                kill = self.scrollImageY(image, direction = direction, offset_x = offset_x, offset_y = offset_y, frame_skip = frame_skip, gif = options[i % len(options)] == 'display_gif')
+                kill = self.scrollImageY(image, direction = direction, offset_x = offset_x, offset_y = offset_y, frame_skip = frame_skip, gif = options[i % len(options)] == 'Custom GIFs')
             elif animation == 'down':
                 direction = 1
                 offset_y = -33
-                kill = self.scrollImageY(image, direction = direction, offset_x = offset_x, offset_y = offset_y, frame_skip = frame_skip, gif = options[i % len(options)] == 'display_gif')
+                kill = self.scrollImageY(image, direction = direction, offset_x = offset_x, offset_y = offset_y, frame_skip = frame_skip, gif = options[i % len(options)] == 'Custom GIFs')
                 
             if kill: break
             offset_y = 0
@@ -356,7 +360,7 @@ class StockTicker():
                         self.incrementGIF(image)
                     
                     pause_frames -=1
-                    if options[i % len(options)] != 'display_gif':
+                    if options[i % len(options)] != 'Custom GIFs':
                         self.double_buffer.SetImage(image, offset_x, offset_y)
                     else:
                         self.double_buffer.SetImage(image.convert('RGB'), offset_x, offset_y)
@@ -373,7 +377,7 @@ class StockTicker():
                        
             if kill: break
             
-            kill = self.scrollImage(image, offset_x = offset_x, offset_y = offset_y, frame_skip = frame_skip, gif = options[i % len(options)] == 'display_gif')
+            kill = self.scrollImage(image, offset_x = offset_x, offset_y = offset_y, frame_skip = frame_skip, gif = options[i % len(options)] == 'Custom GIFs')
             
             if kill: break
 
@@ -1899,7 +1903,7 @@ class StockTicker():
             frames.append(f)
             
         
-        frames[0].save('./display_images/display_gif.gif', save_all=True, append_images=frames[1:], loop=0, optimize = False)
+        frames[0].save('./display_images/Custom GIFs.gif', save_all=True, append_images=frames[1:], loop=0, optimize = False)
        
         
         return None
@@ -2106,11 +2110,11 @@ class StockTicker():
             
         elif msg == 'A': #everything
   
-            userSettings = ['display_gif', 'text', 'display_image', 'stocks', 'crypto', 'forex', 'today_weather', 'daily_weather', 'league_table', 'league_games', 'news'] # these wil be read from csv, just for demo
+            #userSettings = ['display_gif', 'text', 'display_image', 'stocks', 'crypto', 'forex', 'today_weather', 'daily_weather', 'league_table', 'league_games', 'news'] # these wil be read from csv, just for demo
             #userSettings = [ 'daily_weather']
             #userSettings = ['crypto', 'stocks'] # these wil be read from csv, just for demo
             #userSettings = [ 'display_image',  'news'] # these wil be read from csv, just for demo
-            
+            userSettings = json.load(open('csv/display_settings.json'))
             self.scrollFunctionsAnimated(userSettings, animation = 'down')
             
         elif msg == 'b':

templates/app.js

@@ -0,0 +1,569 @@
+
+
+var availableFeatures = document.querySelectorAll("#available-features li");
+var displayFormat = document.querySelector("#display-format");
+var featureToDisplay = document.querySelector("#feature-to-display");
+var displayToFeature = document.querySelector("#display-to-feature");
+var displayToFormat = document.querySelectorAll("#display-format li");
+var availableToDisplay = document.querySelector("#available-features");
+var displayincreaseBtn = document.getElementById("display-increase-btn");
+var displayDecreaseBtn = document.getElementById("display-decrease-btn");
+
+
+
+
+// features lists
+var stocksFeatures = document.querySelectorAll("#stocks-features li");
+var cryptoFeatures = document.querySelectorAll("#crypto-features li");
+var forexFeatures = document.querySelectorAll("#forex-features li");
+var currentWeatherFeatures = document.querySelectorAll(
+  "#current-weather-features li"
+);
+var dailyForecastFeatures = document.querySelectorAll(
+  "#daily-forecast-features li"
+);
+var newsFeatures = document.querySelectorAll("#news-features li");
+var upcomingGamesFeatures = document.querySelectorAll(
+  "#upcoming-games-features li"
+);
+var pastGamesFeatures = document.querySelectorAll("#past-games-features li");
+var liveGamesFeatures = document.querySelectorAll("#live-games-features li");
+var teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
+var imagesFeatures = document.querySelectorAll("#images-features li");
+var gifsFeatures = document.querySelectorAll("#gifs-features li");
+var messagesFeatures = document.querySelectorAll("#messages-features li");
+
+var allFeaturesList = [
+  stocksFeatures,
+  cryptoFeatures,
+  forexFeatures,
+  currentWeatherFeatures,
+  dailyForecastFeatures,
+  newsFeatures,
+  upcomingGamesFeatures,
+  pastGamesFeatures,
+  liveGamesFeatures,
+  teamStatsFeatures,
+  imagesFeatures,
+  gifsFeatures,
+  messagesFeatures,
+];
+
+// features remove buttons
+var stocksRemoveBtn = document.getElementById("stocks-remove-btn");
+var cryptoRemoveBtn = document.getElementById("crypto-remove-btn");
+var forexRemoveBtn = document.getElementById("forex-remove-btn");
+var currentWeatherRemoveBtn = document.getElementById(
+  "current-weather-remove-btn"
+);
+var dailyForecastRemoveBtn = document.getElementById(
+  "daily-forecast-remove-btn"
+);
+var newsRemoveBtn = document.getElementById("news-remove-btn");
+var upcomingGamesRemoveBtn = document.getElementById(
+  "upcoming-games-remove-btn"
+);
+var pastGamesRemoveBtn = document.getElementById("past-games-remove-btn");
+var liveGamesRemoveBtn = document.getElementById("live-games-remove-btn");
+var teamStatsRemoveBtn = document.getElementById("team-stats-remove-btn");
+var imagesRemoveBtn = document.getElementById("images-remove-btn");
+var gifsRemoveBtn = document.getElementById("gifs-remove-btn");
+var messagesRemoveBtn = document.getElementById("messages-remove-btn");
+
+var allFeaturesRemoveBtns = [
+  stocksRemoveBtn,
+  cryptoRemoveBtn,
+  forexRemoveBtn,
+  currentWeatherRemoveBtn,
+  dailyForecastRemoveBtn,
+  newsRemoveBtn,
+  upcomingGamesRemoveBtn,
+  pastGamesRemoveBtn,
+  liveGamesRemoveBtn,
+  teamStatsRemoveBtn,
+  imagesRemoveBtn,
+  gifsRemoveBtn,
+  messagesRemoveBtn,
+];
+// features increase buttons
+var stocksincreaseBtn = document.getElementById("stocks-increase-btn");
+var cryptoincreaseBtn = document.getElementById("crypto-increase-btn");
+var forexincreaseBtn = document.getElementById("forex-increase-btn");
+var currentWeatherincreaseBtn = document.getElementById(
+  "current-weather-increase-btn"
+);
+var dailyForecastincreaseBtn = document.getElementById(
+  "daily-forecast-increase-btn"
+);
+var newsincreaseBtn = document.getElementById("news-increase-btn");
+var upcomingGamesincreaseBtn = document.getElementById(
+  "upcoming-games-increase-btn"
+);
+var pastGamesincreaseBtn = document.getElementById("past-games-increase-btn");
+var liveGamesincreaseBtn = document.getElementById("live-games-increase-btn");
+var teamStatsincreaseBtn = document.getElementById("team-stats-increase-btn");
+var imagesincreaseBtn = document.getElementById("images-increase-btn");
+var gifsincreaseBtn = document.getElementById("gifs-increase-btn");
+var messagesincreaseBtn = document.getElementById("messages-increase-btn");
+
+var allFeaturesIncreaseBtns = [
+  stocksincreaseBtn,
+  cryptoincreaseBtn,
+  forexincreaseBtn,
+  currentWeatherincreaseBtn,
+  dailyForecastincreaseBtn,
+  newsincreaseBtn,
+  upcomingGamesincreaseBtn,
+  pastGamesincreaseBtn,
+  liveGamesincreaseBtn,
+  teamStatsincreaseBtn,
+  imagesincreaseBtn,
+  gifsincreaseBtn,
+  messagesincreaseBtn,
+];
+
+// features decrease buttons
+var stocksDecreaseBtn = document.getElementById("stocks-decrease-btn");
+var cryptoDecreaseBtn = document.getElementById("crypto-decrease-btn");
+var forexDecreaseBtn = document.getElementById("forex-decrease-btn");
+var currentWeatherDecreaseBtn = document.getElementById(
+  "current-weather-decrease-btn"
+);
+var dailyForecastDecreaseBtn = document.getElementById(
+  "daily-forecast-decrease-btn"
+);
+var newsDecreaseBtn = document.getElementById("news-decrease-btn");
+var upcomingGamesDecreaseBtn = document.getElementById(
+  "upcoming-games-decrease-btn"
+);
+var pastGamesDecreaseBtn = document.getElementById("past-games-decrease-btn");
+var liveGamesDecreaseBtn = document.getElementById("live-games-decrease-btn");
+var teamStatsDecreaseBtn = document.getElementById("team-stats-decrease-btn");
+var imagesDecreaseBtn = document.getElementById("images-decrease-btn");
+var gifsDecreaseBtn = document.getElementById("gifs-decrease-btn");
+var messagesDecreaseBtn = document.getElementById("messages-decrease-btn");
+
+var allFeaturesDecreaseBtns = [
+  stocksDecreaseBtn,
+  cryptoDecreaseBtn,
+  forexDecreaseBtn,
+  currentWeatherDecreaseBtn,
+  dailyForecastDecreaseBtn,
+  newsDecreaseBtn,
+  upcomingGamesDecreaseBtn,
+  pastGamesDecreaseBtn,
+  liveGamesDecreaseBtn,
+  teamStatsDecreaseBtn,
+  imagesDecreaseBtn,
+  gifsDecreaseBtn,
+  messagesDecreaseBtn,
+];
+
+const changeVarValue = () => {
+  stocksFeatures = document.querySelectorAll("#stocks-features li");
+  cryptoFeatures = document.querySelectorAll("#crypto-features li");
+  forexFeatures = document.querySelectorAll("#forex-features li");
+  currentWeatherFeatures = document.querySelectorAll(
+    "#current-weather-features li"
+  );
+  dailyForecastFeatures = document.querySelectorAll(
+    "#daily-forecast-features li"
+  );
+  newsFeatures = document.querySelectorAll("#news-features li");
+  upcomingGamesFeatures = document.querySelectorAll(
+    "#upcoming-games-features li"
+  );
+  pastGamesFeatures = document.querySelectorAll("#past-games-features li");
+  liveGamesFeatures = document.querySelectorAll("#live-games-features li");
+  teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
+  imagesFeatures = document.querySelectorAll("#images-features li");
+  gifsFeatures = document.querySelectorAll("#gifs-features li");
+  messagesFeatures = document.querySelectorAll("#messages-features li");
+
+  allFeaturesList = [
+    stocksFeatures,
+    cryptoFeatures,
+    forexFeatures,
+    currentWeatherFeatures,
+    dailyForecastFeatures,
+    newsFeatures,
+    upcomingGamesFeatures,
+    pastGamesFeatures,
+    liveGamesFeatures,
+    teamStatsFeatures,
+    imagesFeatures,
+    gifsFeatures,
+    messagesFeatures,
+  ];
+};
+
+const addEventOnList = () => {
+  // for available feature
+  for (let i = 0; i < availableFeatures.length; i++) {
+    const availableFeature = availableFeatures[i];
+    availableFeature.addEventListener("click", () => {
+      for (let i = 0; i < availableFeatures.length; i++) {
+        availableFeatures[i].setAttribute("class", "");
+      }
+      if (availableFeature.getAttribute("class") == "active") {
+        availableFeature.setAttribute("class", "");
+      } else {
+        availableFeature.setAttribute("class", "active");
+      }
+    });
+  }
+  // for display format
+  for (let i = 0; i < displayToFormat.length; i++) {
+    const display_format = displayToFormat[i];
+    display_format.addEventListener("click", () => {
+      for (let i = 0; i < displayToFormat.length; i++) {
+        displayToFormat[i].setAttribute("class", "");
+      }
+      if (display_format.getAttribute("class") == "active") {
+        display_format.setAttribute("class", "");
+      } else {
+        display_format.setAttribute("class", "active");
+      }
+    });
+  }
+};
+
+const addEventonBtns = () => {
+  featureToDisplay.addEventListener("click", () => {
+    for (let i = 0; i < availableFeatures.length; i++) {
+      const availableFeature = availableFeatures[i];
+      if (availableFeature.getAttribute("class") == "active") {
+        availableFeature.remove();
+        availableFeature.setAttribute("class", "");
+        displayFormat.appendChild(availableFeature);
+        availableFeatures = document.querySelectorAll("#available-features li");
+        displayToFormat = document.querySelectorAll("#display-format li");
+        addEventOnList();
+      }
+    }
+  });
+
+  displayToFeature.addEventListener("click", () => {
+    for (let i = 0; i < displayToFormat.length; i++) {
+      const availableFormat = displayToFormat[i];
+      if (availableFormat.getAttribute("class") == "active") {
+        availableFormat.remove();
+        availableFormat.setAttribute("class", "");
+        availableToDisplay.appendChild(availableFormat);
+        availableFeatures = document.querySelectorAll("#available-features li");
+        displayToFormat = document.querySelectorAll("#display-format li");
+        addEventOnList();
+      }
+    }
+  });
+};
+
+addEventOnList();
+addEventonBtns();
+
+const addEventOnFeaturesList = () => {
+  allFeaturesList.map((value) => {
+    for (let i = 0; i < value.length; i++) {
+      const availableFeature = value[i];
+      availableFeature.addEventListener("click", () => {
+        for (let i = 0; i < value.length; i++) {
+          value[i].setAttribute("class", "");
+        }
+        if (availableFeature.getAttribute("class") == "active") {
+          availableFeature.setAttribute("class", "");
+        } else {
+          availableFeature.setAttribute("class", "active");
+        }
+      });
+    }
+  });
+};
+addEventOnFeaturesList();
+
+
+
+
+
+// display increase function
+displayincreaseBtn.addEventListener("click", () => {
+  console.log('hello');
+  for (let i = 0; i < displayToFormat.length; i++) {
+    var displayItem = displayToFormat[i];
+
+    if (displayItem.getAttribute("class") == "active") {
+      var prevElement = displayItem.previousElementSibling;
+      var currentText = displayItem.innerText;
+
+      displayItem.innerText = prevElement.innerText;
+      prevElement.innerText = currentText;
+      prevElement.setAttribute("class", "active");
+      displayItem.setAttribute("class", "");
+    }
+  }
+});
+
+// display decrease function
+displayDecreaseBtn.addEventListener("click", () => {
+  for (let i = 0; i < displayToFormat.length; i++) {
+    var displayItem = displayToFormat[i];
+
+    if (displayItem.getAttribute("class") == "active") {
+      var nextElement = displayItem.nextElementSibling;
+      var currentText = displayItem.innerText;
+
+      displayItem.innerText = nextElement.innerText;
+      nextElement.innerText = currentText;
+      nextElement.setAttribute("class", "active");
+      displayItem.setAttribute("class", "");
+      break;
+    }
+  }
+});
+
+// feature remove function
+allFeaturesRemoveBtns.map((value, index) => {
+  value.addEventListener("click", () => {
+    for (let i = 0; i < allFeaturesList[index].length; i++) {
+      var item = allFeaturesList[index][i];
+      if (item.getAttribute("class") == "active") {
+        item.remove();
+      }
+    }
+  });
+});
+
+// feature increase function
+allFeaturesIncreaseBtns.map((value, index) => {
+  value.addEventListener("click", () => {
+    for (let i = 0; i < allFeaturesList[index].length; i++) {
+      var item = allFeaturesList[index][i];
+
+      if (item.getAttribute("class") == "active") {
+        var prevElement = item.previousElementSibling;
+        var currentText = item.innerText;
+        item.innerText = prevElement.innerText;
+        prevElement.innerText = currentText;
+        prevElement.setAttribute("class", "active");
+        item.setAttribute("class", "");
+      }
+    }
+  });
+});
+
+// feature decrease function
+allFeaturesDecreaseBtns.map((value, index) => {
+  value.addEventListener("click", () => {
+    for (let i = 0; i < allFeaturesList[index].length; i++) {
+      var item = allFeaturesList[index][i];
+
+      if (item.getAttribute("class") == "active") {
+        var nextElement = item.nextElementSibling;
+        var currentText = item.innerText;
+
+        item.innerText = nextElement.innerText;
+        nextElement.innerText = currentText;
+        nextElement.setAttribute("class", "active");
+        item.setAttribute("class", "");
+        break;
+      }
+    }
+  });
+});
+
+// all features
+var stocks = document.getElementById("stocks-features");
+var crypto1 = document.getElementById("crypto-features");
+var forex = document.getElementById("forex-features");
+var currentWeather = document.getElementById("current-weather-features");
+var dailyForecast = document.getElementById("daily-forecast-features");
+var news = document.getElementById("news-features");
+var upcomingGames = document.getElementById("upcoming-games-features");
+var pastGames = document.getElementById("past-games-features");
+var liveGames = document.getElementById("live-games-features");
+var teamStats = document.getElementById("team-stats-features");
+var images = document.getElementById("images-features");
+var gifs = document.getElementById("gifs-features");
+var messages = document.getElementById("messages-features");
+
+var allFeatures = [
+  stocks,
+  crypto1,
+  forex,
+  currentWeather,
+  dailyForecast,
+  news,
+  upcomingGames,
+  pastGames,
+  liveGames,
+  teamStats,
+  images,
+  gifs,
+  messages,
+];
+
+// features select box
+var newsSelect = document.getElementById("inputTransition63");
+var upcomingGamesSelect = document.getElementById("inputTransition73");
+var pastGamesSelect = document.getElementById("inputTransition83");
+var liveGamesSelect = document.getElementById("inputTransition93");
+var teamStatsSelect = document.getElementById("inputTransition103");
+var allFeaturesSelectBox = [
+  null,
+  null,
+  null,
+  null,
+  null,
+  newsSelect,
+  upcomingGamesSelect,
+  pastGamesSelect,
+  liveGamesSelect,
+  teamStatsSelect,
+  null,
+  null,
+  null,
+];
+
+// features select add buttons
+var newsAddBtn = document.getElementById("inputTransitionBtn63");
+var upcomingGamesAddBtn = document.getElementById("inputTransitionBtn73");
+var pastGamesAddBtn = document.getElementById("inputTransitionBtn83");
+var liveGamesAddBtn = document.getElementById("inputTransitionBtn93");
+var teamStatsAddBtn = document.getElementById("inputTransitionBtn103");
+var allFeaturesSelectAddBtn = [
+  null,
+  null,
+  null,
+  null,
+  null,
+  newsAddBtn,
+  upcomingGamesAddBtn,
+  pastGamesAddBtn,
+  liveGamesAddBtn,
+  teamStatsAddBtn,
+  null,
+  null,
+  null,
+];
+
+allFeaturesSelectAddBtn.map((value, index) => {
+  if (value != null) {
+    value.addEventListener("click", () => {
+      var tag = document.createElement("li");
+      tag.innerHTML = allFeaturesSelectBox[index].value;
+      allFeatures[index].appendChild(tag);
+      changeVarValue();
+      addEventOnFeaturesList();
+    });
+  }
+});
+
+// features input file
+var imagesFile = document.getElementById("inputText11");
+var gifsFile = document.getElementById("inputText1112");
+
+var allFeaturesFile = [
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  imagesFile,
+  gifsFile,
+  null,
+];
+// features file add button
+var imagesFileAddBtn = document.getElementById("inputTextBtn11");
+var gifsFileAddBtn = document.getElementById("inputTextBtn1112");
+
+var allFeaturesFileAddBtn = [
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  imagesFileAddBtn,
+  gifsFileAddBtn,
+  null,
+];
+
+allFeaturesFileAddBtn.map((value, index) => {
+  if (value !== null) {
+    value.addEventListener("click", () => {
+      var tag = document.createElement("li");
+      tag.innerHTML = allFeaturesFile[index].files[0].name;
+      allFeatures[index].appendChild(tag);
+      changeVarValue();
+      addEventOnFeaturesList();
+    });
+  }
+});
+
+// features input text
+var stocksText = document.getElementById("inputText3");
+var cryptoText = document.getElementById("inputText4");
+var forexText = document.getElementById("inputText5");
+var currentWeatherText = document.getElementById("inputText6");
+var dailyForecastText = document.getElementById("inputText7");
+var messagesText = document.getElementById("inputText13");
+
+var allFeaturesText = [
+  stocksText,
+  cryptoText,
+  forexText,
+  currentWeatherText,
+  dailyForecastText,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  messagesText,
+];
+
+// features text add button
+var stocksTextAddBtn = document.getElementById("inputTextBtn3");
+var cryptoTextAddBtn = document.getElementById("inputTextBtn4");
+var forexTextAddBtn = document.getElementById("inputTextBtn5");
+var currentWeatherTextAddBtn = document.getElementById("inputTextBtn6");
+var dailyForecastTextAddBtn = document.getElementById("inputTextBtn7");
+var messagesTextAddBtn = document.getElementById("inputTextBtn13");
+
+var allFeaturesTextAddBtn = [
+  stocksTextAddBtn,
+  cryptoTextAddBtn,
+  forexTextAddBtn,
+  currentWeatherTextAddBtn,
+  dailyForecastTextAddBtn,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  null,
+  messagesTextAddBtn,
+];
+
+allFeaturesTextAddBtn.map((value, index) => {
+  if (value !== null) {
+    value.addEventListener("click", () => {
+      var tag = document.createElement("li");
+      tag.innerHTML = allFeaturesText[index].value;
+      allFeatures[index].appendChild(tag);
+      changeVarValue();
+      addEventOnFeaturesList();
+    });
+  }
+});

templates/index_old.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+   <head>
+      <link rel="stylesheet" href='/static/style.css' />
+      <title>{{ title }}</title>
+      <style>p {color:gray}</style>
+   </head>
+   <body>
+      <center>
+      <h2>Stock Ticker Control Panel</h2>
+
+      <br><br>
+      <form action="/matrix" method="POST">
+        <input type="submit" name="Run Stocks" value="Run Stocks" style="height:50px" >
+        <input type="submit" name="Run Crypto" value="Run Crypto" style="height:50px" >
+        <input type="submit" name="Run Forex" value="Run Forex" style="height:50px" >
+        <input type="submit" name="Run News" value="Run News" style="height:50px" >
+        <input type="submit" name="Run Weather" value="Run Weather" style="height:50px" >
+        <input type="submit" name="Run Daily Weather" value="Run Daily Weather" style="height:50px" >
+        <input type="submit" name="Past NHL" value="Past NHL" style="height:50px" >
+        <input type="submit" name="Future NHL" value="Future NHL" style="height:50px" >
+        <input type="submit" name="Live NHL" value="Live NHL" style="height:50px" >
+        <input type="submit" name="Premier league table" value="Premier league table" style="height:50px" >
+        <input type="submit" name="Professional" value="Professional" style="height:50px" >
+        <input type="submit" name="All" value="All" style="height:50px" >
+        <input type="submit" name="Multiple" value="Multiple" style="height:50px" >
+        <input type="submit" name="Stop Display" value="Stop Display"style="height:50px">
+        <input type="submit" name="Shutdown the pi" value="Shutdown the pi"style="height:50px">
+      </form>
+      <br><br>
+      <br><br>
+      
+       <p>Set the speed the image scrolls across the screen (s, m of f for slow, medium or fast)</p>
+      <form action="/Speed" method="POST">
+        <input name="text" placeholder="m"style="height:24px">
+        <input type="submit" value="Speed"style="height:30px">
+      </form>
+      
+      <p>Set the brightness, an integer between 1 and 10, higher is brighter</p>
+      <form action="/Brightness" method="POST">
+        <input name="text" placeholder="10"style="height:24px">
+        <input type="submit" value="Brightness"style="height:30px">
+      </form>
+      
+      <p>Display scrolling text. Enter the message followed by the rgb values seperated by commas. e.g. hello world!,255,255,0</p>
+      <form action="/DisplayText" method="POST">
+        <input name="text" placeholder="hello world!,255,255,0"style="height:24px">
+        <input type="submit" value="Display"style="height:30px">
+      </form>
+      
+      <p>Set news search settings. keyword,category,country e.g. bitcoin,business,us </p>
+      <form action="/SetNews" method="POST">
+        <input name="text" placeholder="bitcoin,business,us"style="height:24px">
+        <input type="submit" value="Set"style="height:30px">
+      </form>
+      
+      <p>Set weather location, enter city name e.g. London </p>
+      <form action="/SetWeather" method="POST">
+        <input name="text" placeholder="London"style="height:24px">
+        <input type="submit" value="Set"style="height:30px">
+      </form>
+      
+      <p>Display a gif</p>
+      <form action="/DisplayGIF" method="POST" enctype=multipart/form-data>
+        <p><input type=file name=file style="height:30px">
+          <input type=submit value=Upload style="height:30px">
+      </form>
+      
+      <p>Display an image</p>
+      <form action="/DisplayImage" method="POST" enctype=multipart/form-data>
+        <p><input type=file name=file style="height:30px">
+          <input type=submit value=Upload style="height:30px">
+      </form>
+      
+      
+      <br><br>
+      <h3>Tickers to display</h3>
+      <p>To change the tickers displayed please upload a CSV (comma separated value) file with 11 tickers on each row e.g</p>
+      <p>MSFT,NFLX,GOOG,TSLA,AAPL,INTC,TXN,HPQ,HOG,LUV,WMT</p>
+      <p>WMT,LUV,HOG,HPQ,TXN,INTC,AAPL,TSLA,GOOG,NFLX,MSFT</p>
+      <form action="/Ticker" method="POST" enctype=multipart/form-data>
+        <p><input type=file name=file style="height:30px">
+          <input type=submit value=Upload style="height:30px">
+      </form>
+      
+      <br><br>
+      <h3>Logos</h3>
+      <p>Upload logo images (e.g "TICKER.png") or change the default images here</p>
+      <p>1) logos must be 32px in height and can be any width</p>
+      <p>2) "blank.png" is the space between stocks, default of 10x32px</p>
+      <p>3) "default.png" is the default logo to be used if no logo can be found</p>
+      <p>4) arrows (up/down.png) must be 16x14px</p>
+      <form action="/AddLogo" method="POST" enctype=multipart/form-data>
+        <p><input type=file name=file style="height:30px">
+          <input type=submit value=Upload style="height:30px">
+      </form>
+      
+      </center>
+   </body>
+</html>

templates/style.css

@@ -0,0 +1,165 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html body {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+html {
+  scroll-behavior: smooth;
+}
+body {
+  background-color: black;
+}
+
+/* Top logo bar */
+header {
+  display: block;
+  margin-top: 30px;
+  border-bottom: 2px solid white;
+  padding-bottom: 20px;
+}
+
+.logo {
+  width: 200px;
+  height: 70px;
+}
+.update-btn,
+.update-btn:hover {
+  background-color: gray;
+  float: right;
+  margin-top: 20px;
+  color: white;
+}
+
+/* General Ticker */
+.buttons-list {
+  display: flex;
+  justify-content: space-around;
+  list-style-type: none;
+}
+.btn-stop-display,
+.btn-stop-display:hover {
+  background-color: purple;
+  color: white;
+}
+.set-btn,
+.set-btn:hover {
+  background-color: gray;
+  color: white;
+}
+.row-2 {
+  border-bottom: 2px solid white;
+  padding-bottom: 30px;
+}
+
+/* Features to display */
+.features-div {
+  background-color: white;
+  padding-block: 10px;
+  height: 200px;
+  overflow-y: scroll;
+}
+.features-div-two {
+  background-color: white;
+  padding-block: 10px;
+  height: 370px;
+  overflow-y: scroll;
+}
+.display-features-list {
+  list-style-type: none;
+}
+
+.fa-chevron-right,
+.fa-chevron-left,
+.fa-chevron-up,
+.fa-chevron-down,
+.fa-minus {
+  background-color: gray;
+  padding: 10px;
+}
+.icons-list {
+  margin-block: 70px;
+}
+.icons-list a {
+  color: white;
+}
+.icons-list i {
+  cursor: pointer;
+}
+.display-features-list li:hover {
+  background-color: blue;
+  cursor: pointer;
+}
+
+.save-btn-div {
+  text-align: center;
+  margin-top: 60px;
+}
+.save-btn,
+.save-btn:hover {
+  background-color: gray;
+  color: white;
+  padding-inline: 40px;
+}
+
+.footer {
+  text-align: center;
+  color: white;
+  margin-top: 120px;
+}
+
+li.active {
+  background-color: skyblue;
+}
+.row-1, .row-3{
+  margin-block: 50px;
+}
+/* Responsiveness */
+@media (max-width: 767px) {
+
+  .buttons-list{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 25px;
+    position: relative;
+    right: 20px;
+  }
+  .row-1, .row-3{
+    margin-block: 25px;
+  }
+  .screen-saver{
+    margin-block: 25px;
+  }
+  .display-none-div{
+    display: none;
+  }
+  .icons-list{
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+  }
+  .icons-list a{
+    margin-left: -120px;
+  }
+
+  .remove{
+    margin-right: -100px;
+    margin-left: -100px;
+  }
+
+
+
+
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+
+  .icons-list a{
+   position: relative;
+    top: 10px;
+  }
+
+}