{"id":27857427,"url":"https://github.com/jockdarock/clbarc-os-iot-dash","last_synced_at":"2026-01-27T13:03:52.379Z","repository":{"id":99518477,"uuid":"168269425","full_name":"JockDaRock/clbarc-os-iot-dash","owner":"JockDaRock","description":"Lab Guide for Building IoT Dashboards with OpenSource technologies","archived":false,"fork":false,"pushed_at":"2019-01-30T03:59:36.000Z","size":2,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-31T02:13:25.252Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JockDaRock.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-01-30T03:00:02.000Z","updated_at":"2019-09-05T10:46:38.000Z","dependencies_parsed_at":"2023-07-30T16:17:03.950Z","dependency_job_id":null,"html_url":"https://github.com/JockDaRock/clbarc-os-iot-dash","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JockDaRock/clbarc-os-iot-dash","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JockDaRock%2Fclbarc-os-iot-dash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JockDaRock%2Fclbarc-os-iot-dash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JockDaRock%2Fclbarc-os-iot-dash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JockDaRock%2Fclbarc-os-iot-dash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JockDaRock","download_url":"https://codeload.github.com/JockDaRock/clbarc-os-iot-dash/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JockDaRock%2Fclbarc-os-iot-dash/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28813230,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T12:25:15.069Z","status":"ssl_error","status_checked_at":"2026-01-27T12:25:05.297Z","response_time":168,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-04T13:20:20.077Z","updated_at":"2026-01-27T13:03:52.373Z","avatar_url":"https://github.com/JockDaRock.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# clbarc-os-iot-dash\nLab Guide for Building IoT Dashboards with OpenSource Technologies\n\n## Building the apps we need to build our dashboard.\n\n### First we need to download the main source code for our app with our terminal.\n\nFirst, we need to open iTerm or the default terminal app to get started\n\nNow, we are going to create our working directory and change our current working directory to our new directory.\n\n```\n$ mkdir dash-ws\n\n$ cd dash-ws\n\n```\n\nNext, we need to download the source code from GitHub that we will be using to build our dashboards and other tools.\n\n```\n\n$ git clone https://github.com/JockDaRock/mqtt-docker-lab-code\n\n$ git clone https://github.com/JockDaRock/freeboard-lab-code\n\n```\n\n### Now it is time to build the app from our source code\n\nChange directories into our first code base\n\n```\n$ cd mqtt-docker-lab-code\n```\n\nThen, using the docker engine we will build our mqtt broker app.\n\n```\n$ docker build -t mqtt-brk:latest .\n```\n\nOnce that is done building, we will run our application on our laptops.\n\n```\n$ docker run -d -p 1883:1883 -p 9001:9001 mqtt-brk:latest\n\n$ docker ps\n```\n\nNext, we will build the dashboard application we will connect to for our MQTT application.\n\nFirst, we need to get back out of our current directory and change into our freeboard app directory.\n\n```\n$ cd ..\n\n$ cd freeboard-lab-code\n\n```\n\nNext, we need to build out freeboard image.\n\n```\n$ docker build -t barca-freeboard:latest .\n```\n\nNow, we are going to run our application on our laptop.\n\n```\n$ docker run -d -p 8585:80 barca-freeboard:latest\n\n$ docker ps\n```\n\nOur applications are running! We can now start connecting our dashboard to our MQTT broker app.\n\n### Now it is time to connect our dash and datasource together.\n\nWe need to open up our browser to a couple of sites.\n\nLet's open our browser to `http://www.hivemq.com/demos/websocket-client/`.  We will use this a bit later.\n\nAlso, we will utilize the MQTT fx app as well.\n\nThen, we will open an additional browser tab to `http://127.0.0.1:8585`.\n\n#### Data Connections\n\n* Now, in the Freeboard Dashboard app, under **Datasources**, click the add link.\n* In the drop down menu, Select type **MQTT**\n* Name your first pane of Data, **Engine Data**\n* replace the default TOPIC with **devnet/dash**\n* change the server variable to **127.0.0.1**\n* change the port number to **9001**\n* change _USE ENCRYPTION_ to **NO**\n* then click save.\n\nOur data source is now connected to our dashboard.\n\n### Send a little bit of data\n\nUsing MQTT FX and our web based websockets client, we will use send a little bit of JSON data.\n\n```\n{\"Data\": {\"RPM\": 35}}\n```\n\n### Building our dashboard widgets\n\nOn the same dashboard site, click the **ADD PANE** button.\n\n* Inside the pane, click the **+** button.\n* For TYPE, select Text.\n* For Title, type RPM Text.\n* For value click DataSource, and then add the data source we connected.\n* Click SAVE.\n\nWe have now created our first real-time widget on our dashboard. Let's practice a few more.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjockdarock%2Fclbarc-os-iot-dash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjockdarock%2Fclbarc-os-iot-dash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjockdarock%2Fclbarc-os-iot-dash/lists"}