{"id":13724457,"url":"https://github.com/chonyy/handoff-visualizer","last_synced_at":"2026-01-18T08:43:20.865Z","repository":{"id":38992765,"uuid":"241960351","full_name":"chonyy/handoff-visualizer","owner":"chonyy","description":":signal_strength::iphone::car: Wireless Network Handoff Visualizer built with React!","archived":false,"fork":false,"pushed_at":"2023-03-03T10:03:05.000Z","size":9363,"stargazers_count":145,"open_issues_count":12,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-04T01:25:19.203Z","etag":null,"topics":["frontend","handoff","react","wireless","wireless-network"],"latest_commit_sha":null,"homepage":"https://chonyy.github.io/handoff-visualizer/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chonyy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-20T18:32:25.000Z","updated_at":"2024-05-24T17:53:05.000Z","dependencies_parsed_at":"2022-09-20T03:50:20.788Z","dependency_job_id":null,"html_url":"https://github.com/chonyy/handoff-visualizer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chonyy%2Fhandoff-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chonyy%2Fhandoff-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chonyy%2Fhandoff-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chonyy%2Fhandoff-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chonyy","download_url":"https://codeload.github.com/chonyy/handoff-visualizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224636560,"owners_count":17344568,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["frontend","handoff","react","wireless","wireless-network"],"created_at":"2024-08-03T01:01:57.503Z","updated_at":"2024-11-14T14:30:59.516Z","avatar_url":"https://github.com/chonyy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=center\u003e\n    \u003cimg src=\"img/demo.gif\"\u003e\n\u003c/p\u003e\n\n\u003cp align=center\u003e\n    \u003ca target=\"_blank\" href=\"https://travis-ci.com/chonyy/handoff-visualizer\" title=\"Build Status\"\u003e\u003cimg src=\"https://travis-ci.com/chonyy/handoff-visualizer.svg?branch=master\"\u003e\u003c/a\u003e\n    \u003ca target=\"_blank\" href=\"#\" title=\"language count\"\u003e\u003cimg src=\"https://img.shields.io/github/languages/count/chonyy/handoff-visualizer\"\u003e\u003c/a\u003e\n    \u003ca target=\"_blank\" href=\"#\" title=\"top language\"\u003e\u003cimg src=\"https://img.shields.io/github/languages/top/chonyy/handoff-visualizer?color=orange\"\u003e\u003c/a\u003e\n    \u003ca target=\"_blank\" href=\"http://nodejs.org/download/\" title=\"Node version\"\u003e\u003cimg src=\"https://img.shields.io/badge/node.js-%3E=_6.0-green.svg\"\u003e\u003c/a\u003e\n    \u003ca target=\"_blank\" href=\"https://opensource.org/licenses/MIT\" title=\"License: MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\"\u003e\u003c/a\u003e\n    \u003ca target=\"_blank\" href=\"#\" title=\"repo size\"\u003e\u003cimg src=\"https://img.shields.io/github/repo-size/chonyy/handoff-visualizer\"\u003e\u003c/a\u003e\n    \u003ca target=\"_blank\" href=\"http://makeapullrequest.com\" title=\"PRs Welcome\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e 📶 Visualizing the transmission between users and base stations!\n\nPlay with it! https://chonyy.github.io/handoff-visualizer/\n\nHandoff is the **transition** for any given user of signal transmission from one base station to a geographically adjacent base station as the user moves around. In this project, we **visualize** the process of handoff by generating cars moving around the blocks and connecting them to different base stations based on different policies.\n\nThis project is to **visualize** handoff and make the concept of handoff in wireless network easy to understand. **Different policies** are implemented to perform the handoff in different situations. The goal is to make the users try out all the different policies, understand the differences, and find out the most efficient policy.\n\nIf your are interested in this visualiztion, please also check out the [handoff-simulator](https://github.com/chonyy/handoff-simulator). We want people to understand handoff in this visualizer project, and we **value the data** in that [handoff-simulator](https://github.com/chonyy/handoff-simulator).\n\n## Simulation Structure\n\n\u003cp align=center\u003e\n    \u003cimg src=\"img/simulation structure.PNG\" width=\"558\" height=\"393\"\u003e\n\u003c/p\u003e\nEach node is a 20 * 20 (m^2) square. A block is composed of 24 nodes, whick makes the block size 120 * 80 (m^2). Cars are assummed to be moving on an extremely thin line path between blocks, the path doesn't take up any space. The velocity of the car is 20m/s. In our simulation, we iterate once in a second. The cars move one node, and all the data are calculated and updated every second.\n\n-   **Velocity** = 72km/hr = 20m/s\n-   **Probability of cars entrance** follows [Poisson distribution](https://en.wikipedia.org/wiki/Poisson_distribution)\n-   **⋋** = 1 cars/ min [ P(t) = ⋋\"e\" ^(−\"⋋\" ) (t is in sec) ]\n-   **Probability of cars turning** based on predefined value listed below\n-   **Received Power Calculation** explained below\n\n### Car Entrance Distribution\n\nThe probability of the entrance follows [Poisson distribution](https://en.wikipedia.org/wiki/Poisson_distribution)\u003cimg src=\"https://wikimedia.org/api/rest_v1/media/math/render/svg/c22cb4461e100a6db5f815de1f44b1747f160048\"\u003e and \u003cimg src=\"https://wikimedia.org/api/rest_v1/media/math/render/svg/2debd3f9adf97c8af4919aa69ed4a7121b47a737\"\u003e\n\nIn our simultation\n\n-   **⋋** = 0.0167 cars/ sec\n-   **k** = 1\n\n### Received Power\n\nThe received power is calculated by the formula below. Read [ScienceDirect](https://www.sciencedirect.com/topics/engineering/received-signal-power) to dig deeper.\n\n-   Base station transmission Pt(mW) = -50 dBm\n-   Base = 1mW\n-   10log(Pt / Base) = dBm\n-   First-meter path loss = 10 dBm\n-   **P0 = -50 dBm**\n-   **Pd = -50 - 10 - 20log(d(m) / 1m)**\n\n## Policies Pseudocode\n\nReceived Power referred to **P**, base station referered to **B**.\n\nThreshold referred to **T**, entrophy referred to **E**.\n\n### Best Policy\n\n```javascript\nif (Pnew \u003e Pold) {\n    car.bs = Bnew;\n    car.power = Pnew;\n}\n```\n\n### Threshold Policy\n\n```javascript\nif (Pnew \u003e Pold \u0026\u0026 Pold \u003c T) {\n    car.bs = Bnew;\n    car.power = Pnew;\n}\n```\n\n### Entrophy Policy\n\n```javascript\nif (Pnew \u003e Pold + E) {\n    car.bs = Bnew;\n    car.power = Pnew;\n}\n```\n\n### Minimum Policy\n\n```javascript\nif (Pnew \u003c Pmin) {\n    car.bs = Bnew;\n    car.power = Pnew;\n}\n```\n\n## Demo Video\n\n\u003cp align=center\u003e\n    \u003ca href=\"http://www.youtube.com/watch?feature=player_embedded\u0026v=xNy4vw-d1m8\n\" target=\"_blank\"\u003e\u003cimg src=\"http://img.youtube.com/vi/xNy4vw-d1m8/0.jpg\" \nalt=\"demo video\" width=\"480\" height=\"360\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## What is handoff?\n\n\u003cp align=center\u003e\n    \u003cimg src=\"img/handoff.PNG\" width=\"636\" height=\"391\"\u003e\n\u003c/p\u003e\n\n[Handoff](https://searchmobilecomputing.techtarget.com/definition/handoff) is the **transition** for any given user of signal transmission from one base station to a geographically adjacent base station as the user **moves around**.\n\nEach time a mobile or portable cellular subscriber passes from one cellinto another, the network automatically **switches** coverage responsibility from one basestation to another. Each base-station transition, as well as the switching processor sequence itself, is called handoff.\n\n## Policies parameter value\n\nThe different parameters for each policy are listed below.\n\n| Parameters |  Value   |\n| ---------- | :------: |\n| Threshold  | -108 dBm |\n| Entrophy   |  5 dBm   |\n| Minimum    | -112 dBm |\n\n## Posssibility of turning\n\nThe possibility of changing direction when encountering intersection is listed below.\n\n### Intersection with four roads\n\n| Direction   | Possibility |\n| ----------- | :---------: |\n| Go straight |     1/2     |\n| Turn right  |     1/3     |\n| Turn left   |     1/6     |\n\n### Intersection with three roads\n\n| Direction  | Possibility |\n| ---------- | :---------: |\n| Turn right |     1/2     |\n| Turn left  |     1/2     |\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\u003cbr /\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\u003cbr /\u003e\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\u003cbr /\u003e\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\u003cbr /\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr /\u003e\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.\n\nYou don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n### Code Splitting\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting\n\n### Analyzing the Bundle Size\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size\n\n### Making a Progressive Web App\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app\n\n### Advanced Configuration\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration\n\n### Deployment\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/deployment\n\n### `npm run build` fails to minify\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchonyy%2Fhandoff-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchonyy%2Fhandoff-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchonyy%2Fhandoff-visualizer/lists"}