HTML 및 JavaScript로 컴퓨터 화면 사용자 지정

HTML을 다루는 방법을 아는 사람이라면 이제 데스크톱 컴퓨팅 환경을 엉망으로 만들 수 있습니다. Topframe은 HTML/CSS/JavaScript를 사용하여 데스크탑 화면을 사용자 정의할 수 있는 오픈 소스 도구입니다.

macdriver 에 대한 데모로 시작했지만 지난 주 정도에 걸쳐 독립 실행형 버전을 만들고 있습니다. 그 시간의 90%는 데모를 만들면서 가지고 놀았습니다.



이것이 개인화된 MySpace 페이지와 Geocities 사이트의 컴퓨팅 미학을 다시 한 번 되살릴 수 있을까요? 아니?? ...아마도? 어느 쪽이든 사람들이 다시 한 번 실험할 수 있는 도구를 공유하게 되어 기쁩니다.

Topframe은 홈 디렉토리에서 제공되는 특수 웹페이지를 표시하는 전체 화면 오버레이입니다. 페이지 소스를 편집하고 저장을 누르면 브라우저에서 수행할 수 있는 거의 모든 작업이 화면에 마술처럼 업데이트됩니다.



예, Tailwind이 내장되어 있고 신뢰할 수 있는 구형jQuery도 있습니다. 그러나 사용하기 위해 topframe 디렉토리에 원하는 항목을 놓을 수 있습니다. 또는 핫링크, 왜 안되죠? 이것은 WEBSCALE이 아니라 컴퓨터에 있습니다. 개인용 컴퓨터.

탑프레임 시작하기

Topframe은 아직 초기 단계입니다. 전체 프로젝트는 Go의 400 lines보다 작습니다. Mac도 필요하지만 1.0에서는 크로스 플랫폼이 될 것입니다.

자세한 내용은 README을 참조하십시오. Homebrew을 사용하면 다음과 같이 쉽게 설치할 수 있습니다.

$ brew install progrium/taps/topframe

그런 다음 topframe를 실행하면 멋진 데모 콘텐츠가 포함된 오버레이 웹 페이지가 실행됩니다. 죄송합니다. 주목해야 할 중요한 사항은 새로운 메뉴 표시줄 아이콘 🔲과 메뉴입니다.



이것은 실제로 Topframe을 제어하는 ​​곳이지만 별로 많지는 않습니다. 활성화/비활성화(숨기기), 대화형으로 만들고(기본적으로 마우스 이벤트는 그냥 통과) 소스 디렉터리로 빠르게 이동할 수 있습니다.

소스 표시를 클릭하고 좋아하는 편집기로 index.html 파일을 열면 내가 화면에 넣은 모든 쓰레기를 지울 수 있습니다. 그러나, 당신은 또한 그것을 훑어보고 그것을 날려버리기 전에 무엇을 찾을 수 있는지 볼 수 있습니다. 멋진 아이디어나 기능이 숨겨져 있을 수 있습니다.

이것은 무엇을 위해 사용될 수 있습니까?

데모가 통신을 시도할 때 Topframe으로 할 수 있는 일이 많습니다. Twitch(like me)에서 스트리밍하는 경우 OBS에서 오버레이를 수행하는 대신 이것을 사용할 수 있습니다. 또는 약간의 자원이 있으면 모든 창에 대한 스킨을 만들 수 있습니다. 제거한 OS X 대시보드를 기억하는 사람이 있다면 자신만의 (더 나은) 버전을 만들 수 있습니다.



또는 90년대의 Dogz와 같은 화면 다마고치를 만들 수도 있습니다.



유일한 실제 한계는 ... yourself 입니다.

다음 단계

다시 말하지만 이것은 초기 프로젝트이지만 대부분 기여자 중심의 프로젝트이기도 합니다. 저는 이와 같은 것을 만들기 위한 도구(크로스 플랫폼으로 만드는 도구 포함)에 계속 집중할 것이므로 이것을 실제로 만드는 것은 여러분 모두에게 달려 있습니다. 예를 들어 전역 키보드 단축키를 사용하여 숨기기 또는 상호 작용을 전환할 수 있습니다.

궁금한 점이 있으면 GitHub discussions을 보고 있으니 자유롭게 게시하세요. 그렇지 않으면 재미 있고 고려하십시오 sponsoring my work !