{"id":21895295,"url":"https://github.com/persianturtle/touchscreen","last_synced_at":"2026-04-17T00:35:47.158Z","repository":{"id":96627743,"uuid":"52463840","full_name":"persianturtle/touchscreen","owner":"persianturtle","description":"This AngularJS app was created to showcase content on a 1920px x 1080px viewport.","archived":false,"fork":false,"pushed_at":"2016-04-21T20:22:04.000Z","size":4528,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-22T04:25:17.252Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/persianturtle.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}},"created_at":"2016-02-24T18:13:07.000Z","updated_at":"2023-03-05T03:36:59.000Z","dependencies_parsed_at":"2023-06-26T04:15:17.673Z","dependency_job_id":null,"html_url":"https://github.com/persianturtle/touchscreen","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/persianturtle/touchscreen","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/persianturtle%2Ftouchscreen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/persianturtle%2Ftouchscreen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/persianturtle%2Ftouchscreen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/persianturtle%2Ftouchscreen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/persianturtle","download_url":"https://codeload.github.com/persianturtle/touchscreen/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/persianturtle%2Ftouchscreen/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31910171,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"ssl_error","status_checked_at":"2026-04-16T18:21:47.142Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":"2024-11-28T13:33:59.700Z","updated_at":"2026-04-17T00:35:47.140Z","avatar_url":"https://github.com/persianturtle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Documentation for the 42\" Touchscreen App\n\nThis AngularJS app was created to showcase content on a _1920px x 1080px_ viewport.  \n\nTo view available features, visit the help screen by tapping the app's help icon, or by viewing below:\n\n![Help Screen](https://github.com/persianturtle/touchscreen/blob/master/img/help.png)\n\n\n## Table of Contents\n1. [Cloning the Repo](#cloning-the-repo)\n2. [Application Structure](#application-structure)\n3. [Adding and Removing Content](#adding-and-removing-content)\n4. [Style Guide](#style-guide)\n5. [How to Push Changes](#how-to-push-changes)\n6. [Example Project HTML Files](#example-project-html-files)\n7. [API](#api)\n8. [How to Pull Changes](#how-to-pull-changes)\n9. [License](#license)\n\n## Cloning the Repo\n\nTo clone the repo onto your local machine, run:\n```sh\n$ git clone https://github.com/persianturtle/touchscreen.git\n```\n\nThen run:\n```sh\n$ npm install\n```\n\n```sh\n$ bower install\n```\n\n```sh\n$ gulp\n```\n\n## Application Structure\n\nBelow is the application structure relevant to the user.  There are three main components:\n  1. config.json\n  2. projects/\n  3. screensavers/\n```\nroot\n│   config.json\n│\n└───  projects/\n    │\n    └───  ** project name **/\n        │   project.html\n        │   project.jpg ** optional **\n        │   project.mp4 ** optional **\n        │   project.css ** optional **\n        │   project.js ** optional **\n│\n└───  screensavers/\n    │ \n    │   ** all screensavers **\n```\n\nA `project.html` file must be present within each project directory.\n\nImage files, video files, CSS and JavaScript files may be added as need.\n\n##### Example `config.json`\nProject names must correspond to directories in `projects/`.\n\n```\n{\n  \"projects\": [\n    {\n      \"name\": \"precisioneffect\",\n      \"timer\": 60\n    },\n    { \n      \"name\": \"infinity\",\n      \"timer\": 60\n    },\n    { \n      \"name\": \"hypoxia\"\n    },\n    { \n      \"name\": \"cologuard\"\n    },\n    { \n      \"name\": \"beseengetscreened\"\n    }\n  ],\n  \"screensaver\": \"screensavers/Abbvie-Chintan.jpg\"\n}\n```\n\nA timer may be set, **in seconds**, for any project/slide.  If a project/slide is displaying a video, the next project/slide will be automatically shown after the video has ended, unless a timer has been set that is greater than or less than the length of the video.  If the timer length is greather than the length of the video, add the `loop` attribute on the video and it will loop until the timer triggers the next slide to be active.\n\n## Adding and Removing Content\n\nTo add a new project:\n  1. Create a new directory within `projects/`\n  2. Name the directory the name of the project\n  3. Add the project to `config.json`\n  4. Add a `project.html` file within the newly created project's directory.  The contents of this file will be displayed as a slide.\n  5. Add images, videos, CSS and/or JavaScript within this directory as needed. When adding CSS and/or JavaScript, run:\n\n```sh\n$ gulp\n```\nand refresh the browser.\n\nWhen adding CSS, be sure to prefix your selectors with you project name to **avoid overriding** any of the UI's CSS. Simply add the project name as a class on the `\u003csection class=\"** placeholder **\"\u003e` tag.\n  \nTo remove a project:\n  1. Remove the project's directory within `projects/`.\n  2. Remove the project from `config.json`.\n\nThe navigation will update automatically.\n\n## Style Guide\n\nThe AngularJS code in this application adhere's to [John Papa's AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md).\n\n## How to Push Changes\nTo push changes from your local machine, run:\n```sh\n$ git pull\n$ git add -A\n$ git diff --cached\n$ git commit -m 'Message'\n$ git pull\n$ git push\n```\nLet's be very sure that there are not any changes that have not been pulled to your local machine before pushing to the repo.  `git diff --cached` allows you to view your changes before commiting them.\n\n## Example Project HTML Files\n\n`** placeholder **` has been used in place of specific content for the examples below.\n\n### Plaim Image:\n\n**Note:** Images should be _1920px x 1080px_\n```\n\u003csection\u003e\n\n  \u003cimg src=\"projects/** project name **/** placeholder **.jpg\"\u003e\n\n\u003c/section\u003e\n```\n\n### Image \u0026 CTA:\n\n**Note:** Clicking on the CTA should probably do something.  `ng-click` triggers something(); below.  You may instead wrap `div.content` within an anchor tag.\n```\n\u003csection\u003e\n\n  \u003cimg src=\"projects/** project name **/** placeholder **.jpg\"\u003e\n\n  \u003cdiv class=\"content\" ng-click=\"something();\"\u003e\n    \u003ch1\u003e** placeholder **\u003c/h1\u003e\n    \u003ch2\u003e** placeholder **\u003c/h2\u003e\n    \u003cimg class=\"arrow\" src=\"img/arrow.png\"\u003e\n  \u003c/div\u003e\n\n\u003c/section\u003e\n```\n\n### Plain Video:\n\n**Note:** The `video-controls` directive will add tap to pause/play functionality.\n```\n\u003csection\u003e\n  \n  \u003cvideo autoplay height=\"1080px\" video-controls\u003e\n    \u003csource src=\"projects/** placeholder **/video.mp4\" type=\"video/mp4\"\u003e\n  \u003c/video\u003e\n\n\u003c/section\u003e\n```\n\n### Video \u0026 CTA:\n```\n\u003csection\u003e\n  \n  \u003cvideo autoplay height=\"1080px\" video-controls\u003e\n    \u003csource src=\"projects/** placeholder **/video.mp4\" type=\"video/mp4\"\u003e\n  \u003c/video\u003e\n\n  \u003ca href=\"** placeholder **\"\u003e\n    \u003cdiv class=\"content\"\u003e\n      \u003ch1\u003e** placeholder **\u003c/h1\u003e\n      \u003ch2\u003e** placeholder **\u003c/h2\u003e\n      \u003cimg class=\"arrow\" src=\"img/arrow.png\"\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n\n\u003c/section\u003e\n```\n\n### iFrame \u0026 Image Overlay\n\n**Note:** This requires a minor amount of JavaScript.\n\n#### How to Configure a Slide to Use an iFrame \u0026 Image Overlay\n\nLet's assume our project is `precisioneffect`.\n\n  1. Add `precisioneffect` to `config.json`.\n  2. Create a JavaScript file within `projects/precisioneffect/`. An example of the JavaScript file is shown below.\n  3. Add the `project/precisioneffect/project.html` file,  An example of HTML file is shown below.\n\n`project.js` file:\n```\n(function() {\n\n  'use strict';\n\n  angular.module('app').run(precisioneffect);\n\n  precisioneffect.$inject = ['$rootScope'];\n\n  function precisioneffect($rootScope) {\n      \n    $rootScope.project = {\n      precisioneffect: {\n        image: true,\n        cta: cta\n      }\n    };\n\n    function cta() {\n      $rootScope.$broadcast('timer:cancel');\n      $rootScope.$broadcast('help:hide');\n      $rootScope.$broadcast('nav:hide');\n      $rootScope.project.precisioneffect.image = false;\n    }\n\n  }\n\n})();\n```\n\nWhen the CTA is tapped, the `cta` function will execute.  An API has been provided to easily interact with the UI.  For complete API documentation, visit the [API Section](#API).\n\n`project.html` file:\n```\n\u003csection\u003e\n\n  \u003cimg ng-show=\"project.precisioneffect.image\" src=\"projects/** project name **/** placeholder **.jpg\"\u003e\n\n  \u003ciframe ng-if=\"!project.precisioneffect.image\" width=\"1920\" height=\"1080\" src=\"** placeholder **\"\u003e\u003c/iframe\u003e\n\n  \u003cdiv class=\"content\" ng-show=\"project.precisioneffect.image\" ng-click=\"project.precisioneffect.cta();\"\u003e\n    \u003ch1\u003e** placeholder **\u003c/h1\u003e\n    \u003ch2\u003e** placeholder **\u003c/h2\u003e\n    \u003cimg class=\"arrow\" src=\"img/arrow.png\"\u003e\n  \u003c/div\u003e\n\n\u003c/section\u003e\n```\n\n## API\n\nAnimations are automatic.\n\nHide the navigation:\n`$rootScope.$broadcast('nav:hide');`\n\nShow the navigation:\n`$rootScope.$broadcast('nav:show');`\n\nHide the help icon:\n`$rootScope.$broadcast('help:hide');`\n\nShow the help icon:\n`$rootScope.$broadcast('help:hide');`\n\nNext slide:\n`$rootScope.$broadcast('slider:next');`\n\nPrevious slide:\n`$rootScope.$broadcast('slider:prev');`\n\nJump to slide:\n`$rootScope.$broadcast('slider:jump', slideIndex);`\n\nStop timers:\n`$rootScope.$broadcast(timer:cancel);`\n\n## How to Pull Changes\nTo pull changes on your local machine, run:\n```sh\n$ git pull\n```\n\nTo pull changes on the touchscreen, run the following command from any directory in Command Prompt:\n```sh\n\u003e touchscreen\n```\nBehind the screens, `touchscreen` will run:\n\n```sh\n\u003e cd C:\\wamp\\www\n\u003e git pull\n```\n\n## License\n\nCopyright (c) 2016 [precisioneffect](http://precisioneffect.com)\n\n(The MIT License)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpersianturtle%2Ftouchscreen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpersianturtle%2Ftouchscreen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpersianturtle%2Ftouchscreen/lists"}