移动端屏幕设备像素
What if all your mobile devices were a single screen? This probably isn’t the most common question to ask yourself.
如果您所有的移动设备都是一个屏幕怎么办？ 这可能不是问自己的最常见问题。
But, just for a second, actually think about it. Think about all the possibilities of being able to combine any kind of mobile device, independent of its operating system. That’s what Swip.js does.
但是，请稍等一会，再考虑一下。 考虑能够独立于其操作系统而组合任何种类的移动设备的所有可能性。 Swip.js就是这样做的。
The idea is quite simple: place several devices of any size next to each other and “swip” (pinch) your fingers on their edges to combine the separate screens into one big screen.
这个想法很简单：将多个大小不一的设备彼此相邻放置，然后将手指“滑动”(捏住)它们的边缘，以将单独的屏幕组合成一个大屏幕。
With Swip.js, you can build complicated multi-device experiences like this:
使用Swip.js，您可以构建复杂的多设备体验，如下所示：
这个想法的由来 (Origins of the idea)
When we were searching for an idea to develop at a Hackathon, Paul remembered this gimmick he saw quite a while ago:
当我们正在寻找一个在Hackathon上发展的想法时，Paul记得他很久以前看到的这个mm头：
We both liked the idea of having separate “dumb” things, which we could combine to create a working system. We thought about building something similar with a RaspberryPi.
我们俩都喜欢拥有独立的“笨拙”的东西的想法，可以将它们组合起来以创建一个工作系统。 我们考虑过使用RaspberryPi构建类似的东西。
But since we weren’t hardware people, we weren’t able to build something like that. That’s when we realized that nearly everyone has a small computer (with a web browser) in their pocket. A computer powerful enough to handle even complex tasks.
但是由于我们不是硬件人员，所以我们无法构建类似的东西。 从那时起，我们意识到几乎每个人的口袋里都装有一台小型计算机(带有Web浏览器)。 一台足以处理复杂任务的计算机。
We knew our language of choice would be JavaScript, since it’s completely platform independent, and works on any device with a browser.
我们知道我们选择的语言是JavaScript ，因为它完全独立于平台，并且可以在任何带有浏览器的设备上使用。
Inno {Hacks} -Hackathon的原型制作 (Prototyping at the Inno{Hacks}-Hackathon)
The first idea, actually, was to build a physics demo where phones could “throw” like cubes into a bigger device (like an iPad) which would contain the physical environment.
实际上，第一个想法是建立一个物理演示，其中电话可以像多维数据集一样“扔”到包含物理环境的更大设备(如iPad)中。
The ideas quickly escalated and after some tinkering and coding, and we decided to decrease the complexity a bit. By the end of the Hackathon we had a working demo.
这些想法Swift升级，并经过了一些修补和编码，我们决定稍微降低复杂性。 在Hackathon结束之前，我们已经进行了演示。
Our next idea was to build a game where you had an iPad lying on the table and you had to interact with it using your phone.
我们的下一个想法是制作一款游戏，您的桌子上有一个iPad，您必须使用手机与它进行交互。
If you take a look at the concept, you can see that the tablet should serve as the “board game” and with the phones you extended the board to beat the level. The idea was to have different path pieces on your phone from which you could choose one. The ball would move, constantly getting faster and the goal to either survive longer than the other players or reach the goal position.
如果您看一下这个概念，您会发现平板电脑应该充当“棋盘游戏”，并且您可以通过扩展手机将平板电脑扩展到超越水平的水平。 想法是在手机上设置不同的路径，您可以从中选择一个。 球会移动，不断地变快，并且目标要么比其他球员存活得更长，要么达到球门位置。
After a while we also threw that idea overboard (because we couldn’t get a tablet) and decided to make the fusion of displays the main feature of our pitch, instead of some gimmicky game that would quickly get boring.
过了一会儿，我们也把这个想法抛在了后面(因为我们无法获得平板电脑)，并决定使显示器的融合成为我们宣传的主要特征，而不是一些很快就会变得无聊的花哨的游戏。
That’s when we decided to go for 2 simple examples: the classic Pong game and, to showcase that it’s not just about fun with games, a little photo sharing app.
那时我们决定举两个简单的例子：经典的Pong游戏 并且，为了展示它不仅与游戏有关，还提供了一个小照片共享应用程序。
因此，这是在Hackathon上进行大约20小时的黑客攻击的结果： (So here’s the result of ~20h hacking at the Hackathon:)
这是什么魔法？ (What kind of sorcery is this?)
Believe it or not, it’s just JavaScript, Canvas, and a technology called WebSockets.
信不信由你，它只是JavaScript，Canvas和一项名为WebSockets的技术。
Libraries are always a good thing for Hackathons, so you won’t need to handle bare JavaScript. Therefore we used Socket.IO to give us a nicer API to handle the websockets in Swip.
对于Hackathons而言，库始终是一件好事，因此您不需要处理裸露JavaScript。 因此，我们使用Socket.IO为我们提供了更好的API来处理Swip中的websocket。
Go for it, take a look at how websockets work and try out Socket.IO! You will be blown away how powerful and easy to use they are.
尝试一下， 看看websockets的工作原理，然后尝试Socket.IO ！ 您将被它们强大而易用的功能所震撼。
Basically, you can imagine a websocket connection to work line a tunnel that connects a client and a server with a persistent, bidirectional real-time connection. Both parties can then simply send and receive and respond to messages.
基本上，您可以想象Websocket连接到工作线的隧道，该隧道通过持久的双向实时连接将客户端和服务器连接起来。 然后，双方都可以简单地发送和接收消息并对其进行响应。
使用Socket.IO的快速示例 (A quick example using Socket.IO)
Let’s first start with the server. Since we want to keep it easy and quick, we’ll use Express to quickly setup a server.
让我们首先从服务器开始。 由于我们希望保持它的简便和快捷，因此我们将使用Express来快速设置服务器。
This is all you need on the server-side to start.
这是您在服务器端开始所需的全部。
Now open the browser and head to localhost:3000 and ask yourself why it’s not logging anything to the console. You need to do one more thing. You’ll need to also start the websocket connection on the client-side. This will be the index.html you can see in the app.get function on the server-side.
现在打开浏览器并转到localhost:3000并问自己为什么它没有将任何内容记录到控制台。 您需要再做一件事。 您还需要在客户端上启动websocket连接。 这就是您可以在服务器端的app.get函数中看到的index.html 。
If you now head over to localhost:3000 and take a look at the terminal, where you started the server in, you’ll see a user connected there.
如果现在转到localhost:3000并查看启动服务器所在的终端，则会看到a user connected在那里。
The socket is the part you want to focus on now. In index.html we do socket.emit('message', 'Hello'). We are emitting a new message with the name message and the data Hello and want to react on that message on at the server. To do this, we need to work with the socket we get when calling io.on('connection', (socket) => ...). Therefore we simply add the following lines.
套接字是您现在要关注的部分。 在index.html我们执行socket.emit('message', 'Hello') 。 我们正在发出一条新消息，其中包含名称 message和数据 Hello 并希望对服务器上的该消息做出React。 为此，我们需要使用调用io.on('connection', ( socket ) => . ..)时获得的套接字。 因此，我们只需添加以下几行。
You will now see Hello printed to the console whenever a new client joins the server. By now that’s not too special. But we can also send data from the server to the client, over the same socket and even use whole objects instead of just Strings. The client simply has to react on the emitted event with socket.on('messageBack', (data) => ...) and can then use the sent data.
现在，每当新客户端加入服务器时，您都会看到Hello打印到控制台。 到目前为止，这还不太特殊。 但是我们也可以通过相同的套接字将数据从服务器发送到客户端，甚至可以使用整个对象，而不仅仅是字符串。 客户端只需使用socket.on('messageBack', (data) => . ...)对发出的事件做出React，然后可以使用发送的数据。
If you want to learn more about Socket.IO, check out their ChatApp tutorial, where you quickly build a basic Slack clone.
如果您想了解有关Socket.IO的更多信息，请查看其ChatApp教程 ，在那里您可以快速构建基本的Slack克隆。
Since you now know a little bit about the tech behind it, you can probably already guess how it basically worked.
由于您现在对它背后的技术有所了解，因此您可能已经猜到了它的基本工作原理。
We were just sending the position data of the elements all the time and render e.g. the pong-ball on each client.
我们只是一直在发送元素的位置数据，并在每个客户端上渲染例如乒乓球。
This really is not performant at scale. But we learned that when prototyping at a Hackathon you really shouldn’t worry about performance.
这确实不是大规模的性能。 但我们了解到，在Hackathon上进行原型制作时， 您真的不必担心性能 。
The people there were pretty impressed and puzzled how this might work and we ended up winning the Technology Innovation prize. They even asked us if we think about working on this further.
那里的人们对此印象深刻，并感到困惑， 我们最终获得了技术创新奖 。 他们甚至问我们是否考虑进一步开展这项工作。
Take away: If you don’t want to build something with the given tools of the hackathon, don’t. Experiment, play around, and — most importantly — have fun!
带走：如果您不想使用黑客马拉松的给定工具构建东西，那就不要。 实验，玩耍，而且-最重要的是-玩得开心！
宣传并获得前1,000个GitHub Stars (Spreading the word and getting the first 1,000 GitHub Stars)
When we finished our first usable version of Swip.js, we were pretty proud that it turned out to be such an entertaining project.
当我们完成了Swip.js的第一个可用版本时，我们为它是如此有趣而感到自豪。
We wanted to show it to more people, get some feedback and (of course) get some GitHub stars to improve our audience. The tech-news source of our choice was HackerNews. It has a special section to showcase your work.
我们想向更多人展示它，获得一些反馈，(当然)还得到一些GitHub明星来提高我们的受众。 我们选择的技术新闻来源是HackerNews 。 它有一个特别的部分来展示您的工作。
Paul sent me a message around half an hour after posting the link, telling me that we already hit more than 100 GitHub stars. From this moment, I checked back at the comments on HackerNews like every minute. We both couldn’t believe how fast this took off.
Paul在发布链接大约半小时后给我发了一条消息，告诉我我们已经击中了100多个GitHub星。 从这一刻起，我每分钟都会回头查看关于HackerNews的评论。 我们俩都不敢相信这起了多快。
I started to spam every possible blogger, JavaScript guru, and Subreddit I could think of with a link to the repo. We got some really awesome feedback. One person who noticed was Quincy Larson:
我开始以垃圾邮件的链接向所有可能的博客，JavaScript专家和Subreddit发出垃圾邮件。 我们收到了一些非常棒的反馈。 一个注意到的人是昆西·拉尔森 ( Quincy Larson) ：
Pauls Twitter got flooded with notifications and we even got featured in a Japanese blog.
Pauls Twitter充斥着通知 ，我们甚至还成为了日本博客的特色。
This was just awesome!
太棒了！
paulsonnentag/swipswip - a library to create multi device experimentsgithub.com
paulsonnentag / swip swip-创建多设备实验的库 github.com
Take away: Nobody will see your project unless you show it to them. Use popular channels to spread the word!
带走：除非您向他们展示，否则没人会看到您的项目。 使用流行的渠道来传播信息！
关于构建JavaScript库 (About building a JavaScript library)
After we heard the incredible feedback from all of the competitors and judges, we discussed whether we should work on this a bit more. We decided to put 2 more days into it to build a library.
在听取了所有竞争对手和评委的令人难以置信的反馈之后，我们讨论了是否应该做更多的工作。 我们决定再花2天时间建立一个图书馆。
Well, we ended up investing 2 whole weeks into the project, because we extremely underestimated the workload. We had to start from scratch, because our codebase was nearly unusable.
好吧，我们最终花了整整两个星期的时间在该项目中，因为我们大大低估了工作量。 我们必须从头开始，因为我们的代码库几乎无法使用。
While working on it, we came across quite a few challenges. One of the biggest challenges was how do we do this with more than 2 devices? While working on it at the hackathon we only had 2 phones with us, so we never thought of the problems we’d face in adding more.
在研究过程中，我们遇到了许多挑战。 最大的挑战之一是我们如何使用两个以上的设备来做到这一点？ 在hackathon上进行这项工作时，我们只有2部手机，因此我们从未想到添加更多手机会遇到的问题。
获得相当技术 (Getting quite technical)
If you’re not into the technical aspects of the project, feel free to skip this part and watch the demos we built with the library.
如果您不熟悉该项目的技术方面，请随时跳过此部分，并观看我们使用该库构建的演示。
Taking a rough and dirty prototype and turning it into a working and actually usable library comes with a whole lot of challenges we’d never thought of when building the prototype.
将一个粗糙而肮脏的原型转化为一个可以正常使用的库，会带来很多我们在构建原型时从未想到的挑战。
物理像素有多大？ (How big is a physical pixel?)
For a first proof of concept we build a small test where we would display a static image and expand it across two devices once they were ‘swiped together.’
作为第一个概念验证，我们构建了一个小型测试，在该测试中，我们将显示静态图像，并将其“扫过”到两个设备之间，并将其扩展。
After we got it running, we realized that there was something off: the pictures didn’t quite match up and the scaling wasn’t right. The problem is that depending on the size and resolution of a device 100px might be slightly bigger or smaller than on another device.
在运行它之后，我们意识到有些不对劲：图片并不完全匹配，缩放比例也不正确。 问题是，根据设备的大小和分辨率，100px可能会比其他设备大一点或小一点。
We measured several smartphones and tablets and simply took the average of all the measurements. For Swip.js we therefore determined that 60 pixels should be equivalent to 1 centimeter, and scaled the canvas according to that.
我们测量了几个智能手机和平板电脑，并简单地取了所有测量值的平均值。 因此，对于Swip.js，我们确定60像素应等于1厘米，并据此缩放画布。
This was key if we wanted to create the impression of a large continuous game world, in which you can take a look into with your smartphones.
如果我们想给大型连续游戏世界留下深刻印象，这是关键，您可以在其中使用智能手机进行研究。
Without standardized dimensions, the rendered particles had different sizes on different screens.
如果没有标准尺寸，则渲染的粒子在不同的屏幕上具有不同的大小。
Unfortunately we didn’t figure out a way to calculate this scaling factor automatically, so on the first start of the application, we prompt the user to enter the diagonal length of the device.
不幸的是，我们没有找到自动计算此比例因子的方法，因此在应用程序首次启动时，我们提示用户输入设备的对角线长度。
状态处理 (State handling)
Syncing state across multiple devices in realtime is a hard problem. There is no global time because the internal clock of each device might be set to time a few hundred milliseconds in the future or a few milliseconds in the past. The network isn’t always reliable and messages might be delayed or completely lost. We didn’t tackle all these problems in detail but instead aimed for a solution thats good enough to test out our idea.
跨多个设备实时同步状态是一个难题。 没有全局时间，因为每个设备的内部时钟可能设置为将来几百毫秒或过去几毫秒的时间。 网络并不总是可靠的，消息可能会延迟或完全丢失。 我们没有详细解决所有这些问题，而是针对一种足以测试我们想法的解决方案。
The logic of the application lives on the server and the smartphones are just dumb clients. The client sends an event to the server if the user triggers an action like touching the screen. The server reacts to that change computes the next game state and sends that update to the clients. That way the clients all get the same changes and won’t become out of sync after a while. It’s not a perfect solution and becomes laggy if the latency of the network increases but its easy to implement and works fine.
应用程序的逻辑存在于服务器上，而智能手机只是愚蠢的客户端。 如果用户触发了触摸屏幕之类的操作，则客户端会将事件发送到服务器。 服务器对该更改做出React，计算下一个游戏状态，并将该更新发送给客户端。 这样，所有客户端都将获得相同的更改，并且一段时间后不会变得不同步。 这不是一个完美的解决方案，并且如果网络的延迟增加，则会变得很迟钝，但是它易于实现并且运行良好。
We used redux to implement this pattern if you’re interested in the technical details you can read more about it here!
如果您对技术细节感兴趣，可以使用redux来实现此模式，您可以在此处阅读更多信息！
Initially, every device has it’s own cluster. The developer can specify what should happen when two devices are swiped and therefore combined. This all happens on the server side. In this example we simply want to merge all the balls in the scene.
最初，每个设备都有自己的集群。 开发人员可以指定刷卡并因此组合两个设备时应发生的情况。 这一切都发生在服务器端。 在此示例中，我们只想合并场景中的所有球。
画布世界实际上是什么样的？ (What did the canvas world actually look like?)
You can think of the “environment” as an infinitely long and wide area. Every device simple renders the content that would be visible in it’s windowed area.
您可以将“环境”视为一个无限长而宽的区域。 每个设备都简单地呈现在其窗口区域中可见的内容。
Once device will start off as the origin. With a “swip”, a simple pinch gesture, you define two reference points which are used to calculate the offsets taking into account the height and width of the device, as well as the physical X and Y translation of the new device.
一旦设备将开始作为原点。 使用“滑动”(简单的捏合手势)，您可以定义两个参考点，这些参考点用于在考虑设备的高度和宽度以及新设备的物理X和Y平移的情况下计算偏移量。
All right, since we’re now done with the nerdy stuff, here’s another demo to show off what the Swip.js library could do. Enjoy!
好的，因为我们现在已经完成了书呆子的工作，所以这是另一个演示Swip.js库可以做什么的演示。 请享用！
Take away: Don’t underestimate the work needed to take a quick and dirty concept to a real project!
带走：不要低估将一个快速而肮脏的概念应用于一个实际项目所需的工作！
我们是谁 (Who we are)
保罗·索南塔格 (Paul Sonnentag)
Lead Developer, Idea-Initiator and Mastermind of this project
该项目的首席开发人员，创意发起人和策划者
A passionate developer, studying computer science. At home on the web. Building things with JavaScript, Elm and Clojure.
一个热情的开发人员，正在研究计算机科学。 在家里上网。 使用JavaScript，Elm和Clojure构建事物。
蒂姆·格罗斯曼 (Tim Großmann)
Developer, Idea-Shaper, Word-Spreader and Writer
开发人员，思想塑造者，单词传播者和作家
Passionate learner and developer. Studying computer science at the Media University. Looking forward to work with ingenious teams on challenging projects.
热情的学习者和开发者。 在媒体大学学习计算机科学。 期待与富有创造力的团队合作完成具有挑战性的项目。
谢谢您的阅读，我们很乐意听到这个可以随意评论，或直接打到你的想法和意见我或者保罗与电子邮件 。 (Thank you for reading, we’d love to hear Your thoughts and opinion on this so feel free to comment or directly hit me or Paul with an email.)
Also be sure to follow us on YouTube and to star Swip.js on GitHub.
另外，请确保在YouTube上关注我们，并在GitHub上为Swip.js加上星号 。
We are always looking for new opportunities. Are you from a top tech company and search for interns or an organizer of a JS conference? Please contact us. We’d love to get in touch!
我们一直在寻找新的机会。 您是来自顶级科技公司的公司，正在寻找实习生或JS会议的组织者？ 请与我们联系 。 我们很想取得联系！
I’ll be in Palo Alto for an internship starting in September and would love to meet as many of You as possible! If you’re interested, hit me up on my Email, I’d be happy to get in touch!
从9月开始我将在帕洛阿尔托进行实习，并希望结识尽可能多的你们 ！ 如果您有兴趣，请在我的电子邮件中打我 ，我很乐意与您联系！
移动端屏幕设备像素
扫一扫
856
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
