
Færdiggjort
Slået op
Betales ved levering
JavaScript Timeline Editor for LED Display (Drag-and-Drop Cards) Project Overview I am building a small LED display system (64×32 pixels) and need a simple browser-based timeline editor built in JavaScript. The goal is to create a drag-and-drop timeline interface where users can add different types of “cards,” rearrange them, edit their properties, and export the result as JSON. This is a front-end only project. No database or backend logic is required. The output will be JSON that my existing Flask backend will process. Core Requirements Timeline Editor The interface should include: A card palette with buttons to add: Color card Image card Text card Transition card A timeline area where: Cards appear in sequence Cards can be dragged to reorder Cards can be deleted Clicking a card opens its properties A properties panel for editing the selected card. An Export button that outputs the timeline as JSON. Card Types and Properties 1) Color Card Background color picker Duration (milliseconds) 2) Image Card Image upload or image reference field Auto-resize later (handled by backend, not required in this task) Fit mode: Contain Cover Background color for letterboxing Duration (milliseconds) 3) Text Card Up to 4 lines of text Max 25 characters per line Font size selector: Small Medium Large Full Text color Duration (milliseconds) No scrolling or animation required for text in this phase. 4) Transition Card This represents a transition between two cards. Properties: Transition type: Fade Scroll up Duration (milliseconds) Smoothness (step count) No visual rendering of the transition is required in this phase, only the data model. Required Functionality The user must be able to: Add cards to the timeline Reorder cards using drag-and-drop Delete cards Click a card to edit its properties Export the timeline to JSON JSON Output Format Exact structure is flexible, but should resemble: Json Copy code { "width": 64, "height": 32, "loop": true, "items": [ { "type": "color", "bgColor": "#000000", "durationMs": 10000 }, { "type": "text", "lines": ["HELLO", "WORLD"], "font": "medium", "color": "#ffffff", "durationMs": 8000 }, { "type": "transition", "transition": "fade", "durationMs": 1000, "steps": 10 } ] } You may propose a slightly different structure if it is cleaner. Technical Requirements Plain JavaScript, or a lightweight framework (Vue, React, or similar) Must run in a browser No backend required Deliverable should be: A single HTML page Associated JS and CSS files Code should be clean, readable, and commented Deliverables Working timeline editor with: Drag-and-drop cards Card editing panel JSON export Source code Short README with: How to open and run it How to integrate into an existing site Acceptance Criteria Cards can be added, reordered, edited, and deleted. JSON export reflects the exact timeline order and properties. Works in a modern browser (Chrome, Edge, Firefox). No console errors during normal use. Nice-to-Have (Optional, not required) If easy to include: Live preview of current card Frame count or duration summary Project Type Small, self-contained front-end tool Fixed price preferred Estimated size: small to medium task for an experienced JS developer
Projekt-ID: 40217418
42 forslag
Projekt på afstand
Aktiv 24 dage siden
Fastsæt dit budget og din tidsramme
Bliv betalt for dit arbejde
Oprids dit forslag
Det er gratis at skrive sig op og byde på jobs

I can help you. I’ll build this using vanilla JavaScript and SortableJS for reliable drag-and-drop without the weight of a heavy framework. To ensure this integrates seamlessly with your Flask backend, I’ve identified three technical hurdles I will solve: 1. Image Persistence: Since there is no database, I will implement Base64 encoding for image uploads so the exported JSON contains the actual image data for your backend to process immediately. 2. State Syncing: I will use a unique ID system for each card to ensure that when you reorder items in the UI, the properties panel stays linked to the correct object in the underlying JSON array. 3. Data Constraints: I will bake your specific LED limitations (25 chars/line, 4-line max) directly into the UI inputs to prevent the frontend from ever generating invalid JSON that would crash the LED display. I will deliver a clean, modular structure where each card type is a class, making it easy for you to add new card types (like Video or GIF) later.
$20 CAD på 7 dage
4,1
4,1
42 freelancere byder i gennemsnit $24 CAD på dette job

Hello, As a seasoned JavaScript developer, I have the expertise and knowledge to create your desired LED Display Timeline Editor effortlessly. I have a deep understanding of front-end development and specialize in HTML, CSS, and JavaScript - all skills crucial for this project. At Our Software, we are highly proficient in developing browser-based applications as well as integrating them with existing systems. Moreover, my team and I pride ourselves on offering excellent customer service and value positive feedback. We will ensure that the final deliverable matches your exact requirements while maintaining clean and readable code. Additionally, our vast experience in constructing responsive user interfaces which incorporate drag-and-drop features makes me the ideal candidate for this job. In order to provide you with an outstanding solution, I plan to use a suitable lightweight framework (if you agree) while still ensuring the robustness of the application after integration. I promise a hassle-free experience How we will build an integrated platform that is best suited for modern browsers like Chrome, Edge, and Firefox. Undeniably, my skills, attention to detail, and commitment to deliver prompt results makes me perfect for transforming your dreams into reality in this LED display editor tool. Let's create a masterpiece together! Thanks!
$30 CAD på 1 dag
8,4
8,4

Hi there, I am excited about the opportunity to create a browser-based timeline editor for your LED display system. With my expertise in JavaScript and front-end development, I can craft a seamless drag-and-drop interface that meets all your specified requirements. Users will effortlessly add, reorder, and delete cards while editing their properties, with a clean JSON export feature to integrate with your existing Flask backend. I will develop a single HTML page along with the necessary JS and CSS files, ensuring everything is clean, well-commented, and browser-compatible. Let's connect soon to discuss the timeline for delivery and any specific needs you might have.
$30 CAD på 2 dage
6,6
6,6

Hi there, I’ve read your LED Timeline Editor spec and I’m confident I can deliver a clean, browser-only drag-and-drop editor in plain JavaScript that exports JSON ready for your Flask backend. I’ll craft a compact two-line proposal with hookpoints and two targeted questions to move this forward:
$10 CAD på 2 dage
5,5
5,5

Hello! I understand you're looking to develop a browser-based timeline editor for your LED display system. This project is clear, and I am excited to create an intuitive drag-and-drop interface that allows users to add, edit, reorder, and export different card types as JSON. Utilizing plain JavaScript or a lightweight framework, I'll ensure the editor is user-friendly and fully functional across modern browsers. The cards will include all specified types and properties and will support seamless JSON export. The final deliverable will include a clean, commented codebase along with a README for easy integration. Regards, Davide
$25 CAD på 1 dag
5,0
5,0

Hi there, I can build your JavaScript timeline editor for LED display with drag-and-drop cards and JSON export as specified. I've built similar browser-based visual editors and drag-and-drop interfaces using JavaScript. I'll implement all 4 card types (color, image, text, and transition) with editable properties, timeline reordering, and clean JSON output matching your structure. You can explore my portfolio and see examples of my previous work here: https://www.freelancer.com/u/afsahfarooqui119 I’d love to discuss your project further and collaborate to create a website that not only looks amazing but also performs exceptionally and drives results. Sincerely, Afsah Farooqui
$20 CAD på 4 dage
5,1
5,1

Hello , I came across your project Browser-Based LED Display Timeline Editor and I am very interested in working with you. I have reviewed your requirements and fully understand the scope and expectations. I specialize in JavaScript, Python, CSS, HTML5, HTML, JSON, Web Development, Frontend Development and have successfully delivered similar projects before. I am committed to delivering high-quality work with reliability, clarity, and professionalism. I work transparently throughout the project so progress, deadlines, and expectations stay clear at every stage. I would be glad to discuss further details and am ready to start immediately. Looking forward to hearing from you. Regards, Anum
$50 CAD på 3 dage
4,5
4,5

Hi, I see you're looking to create a user-friendly browser-based timeline editor for your LED display system. The goal is to allow users to easily add, rearrange, and edit cards, and then export the timeline as JSON. I can help you develop a clean, intuitive interface using JavaScript, ensuring all core functionalities like drag-and-drop and property editing are smooth and straightforward. With my experience in front-end development, I can create a single HTML page that meets your specifications and integrates seamlessly with your existing Flask backend. I’ll make sure the code is well-structured and commented for easy maintenance. One question I have is whether you'd like any specific features in the properties panel for the cards, especially for the transition types. Best regards,
$25 CAD på 1 dag
4,6
4,6

Dear Hiring Manager, A focused front-end tool like this succeeds when usability and data accuracy move in lockstep, and that’s exactly where I concentrate my work. I build small, purpose-driven web apps that feel intuitive to use while producing structured, reliable output for downstream systems. I can develop a browser-based timeline editor with a card palette, sortable drag-and-drop sequence, property panel, and JSON export that your Flask backend can consume directly. Each card type—color, image, text, and transition—will have clearly defined editors for duration, styling, and behavior, and the exported structure will always reflect the on-screen order and values. The result will be a single, lightweight HTML/CSS/JS package (or a minimal framework if helpful) that opens locally in modern browsers with zero backend dependencies. My approach is methodical and reliability-first: define a clean internal data model, bind UI state predictably, keep interactions smooth, and validate output continuously so exported timelines stay correct even after heavy reordering and edits. You’ll receive readable, well-commented source code plus a concise README explaining how to run the tool and embed it into an existing site. If this sounds aligned, I’d be glad to propose a fixed price, delivery window, and share examples of similar UI-driven utilities I’ve shipped. Thanks
$10 CAD på 7 dage
3,6
3,6

Hello , I always focus on understanding the full scope of a project before getting started, ensuring that every detail aligns with your goals and expectations. We are an expert team which have many years of experience on JavaScript, Python, CSS, HTML5, HTML, JSON, Web Development, Frontend Development Lets connect in chat so that We discuss further. Thank You
$20 CAD på 7 dage
2,9
2,9

Hi , I prefer not to use auto bidding because I believe every project deserves a thoughtful and personalized approach. I would really appreciate the opportunity to discuss your project, "Browser-Based LED Display Timeline Editor", in more detail. Based on what you have shared, I am confident my background aligns well with what you are looking to achieve. My name is Karim Rattani, a U.S. based technology and creative consultant specializing in web design, web development, mobile app design, and UI UX solutions. I help businesses turn ideas into polished digital products by focusing on clean design, strong usability, and scalable development that delivers real results. When you work with me, you can expect clear communication, custom tailored design and development solutions, and revisions until you are fully satisfied. All final assets are delivered in professional formats, with original work and full ownership rights included. You can view my portfolio here: https://www.freelancer.com/u/karimrattani Thank you for considering my proposal. I would be happy to connect and discuss your project requirements, timeline, and goals in detail. Best regards, Karim Rattani
$10 CAD på 4 dage
3,1
3,1

Hello, I’ve reviewed your project brief for a browser-based LED Display Timeline Editor and I’m excited to help you bring a clean, frontend-only tool to life. You’ll get a self-contained HTML page (plus JS and CSS) built in plain JavaScript, focused on a drag-and-drop timeline where users can add Color, Image, Text, and Transition cards, reorder them, edit their properties, and export the timeline as JSON for your Flask backend. What you’ll get: - A card palette with Add buttons for color, image, text, and transition cards - A timeline canvas supporting drag-and-drop reordering and delete actions - A properties panel that appears when a card is selected, for editing duration, colors, text lines, font size, image reference, and transition parameters - An Export button that outputs the timeline JSON in a clean, backend-friendly structure (maintainable, with a small data model that your Flask endpoint can consume) - A single HTML file plus lightweight JS and CSS, with clear comments and a short README on how to run and integrate Deliverables: - Working editor with drag-and-drop, edit, delete, and export-to-JSON - Source code: HTML, JS, CSS, well-commented - Short README with run instructions and integration notes I’ll tailor the JSON shape to be compact and easy to consume by your Flask backend, and I can adapt the export to match any minor schema tweaks you prefer. Best regards, Jordan Rafael
$30 CAD på 1 dag
2,7
2,7

Hi there! ? thank you for your kindly description. I’m an experienced JavaScript developer who loves building clean, intuitive front-end tools, and this drag-and-drop timeline editor for your LED display is right in my wheelhouse. I can deliver a polished, browser-ready editor with smooth card reordering, a clear properties panel, and a rock-solid JSON export that plugs straight into your Flask backend—no clutter, no surprises. You’ll get well-commented source code, a simple README, and a reliable result that feels easy and pleasant to use. Best Regards, **Giang**
$40 CAD på 1 dag
2,4
2,4

⏩ JavaScript Timeline Editor for LED Display (Drag & Drop Cards) ⏪ Hi, I understand you need a browser-based timeline editor to build LED display sequences for a 64×32 pixel panel, with a clean drag-and-drop UI, editable cards, and JSON export—all front-end only, designed to plug into your existing Flask backend. Key Features: → Single-page timeline editor with card palette and sequence view → Drag-and-drop reordering, add, delete, and select cards → Property panel for editing each card’s settings → Supported card types: Color, Image, Text, Transition → Full support for required properties (duration, colors, fonts, fit modes, transitions, steps) → Clean JSON export reflecting exact order and values → Flexible JSON structure aligned with your sample (or cleaner proposal if preferred) → Built using plain JavaScript or a lightweight framework (React / Vue if approved) → Runs directly in modern browsers (Chrome, Edge, Firefox) → Clean, readable, and well-commented code Happy to discuss framework preference, timeline, and pricing. Best regards, Prabhat
$10 CAD på 9 dage
1,0
1,0

Drawing from my 4+ years of experience, I am confident that I am the perfect fit for this JavaScript Timeline Editor project. I am a technically versatile software developer, well-versed in both frontend and backend development, which makes me exceptionally qualified for this front-end-focused task. Having worked on similar projects involving data management, user-friendly interfaces, and JSON processing, I have a deep understanding of how to create an intuitive drag-and-drop experience while ensuring accurate representation in export formats like JSON. As far as my technical expertise goes, I am not confined to any particular stack. From the plain JavaScript requirement to working with lightweight frameworks such as Vue or React, I can handle it all. My detailed knowledge of JavaScript will ensure a seamless and efficient user experience - with minimal disruption to existing systems - on all major browsers you specified: Chrome, Edge, Firefox. Alongside my technical skills, you can expect clean and well-documented code from me; that's a commitment. Furthermore, given that I am accustomed to working with long-term applications as well as shorter tasks, speeding through this small-to-medium rate task in the quality you expect will not be a problem. Trust me to deliver!
$20 CAD på 7 dage
0,0
0,0

Thank you for considering my expertise at Prime Code Tech for your important project. As the leader of a team that prides itself in driving digital transformation, we're well-equipped to create your Browser-Based LED Display Timeline Editor exactly as you desire. With solid experience in frontend development and a deep understanding of JavaScript, Python, HTML etc. we are hands-on with all elements needed to make this system run seamlessly. Our approach is to not just satisfy requirements but to build products with purpose and long-term success, which aligns perfectly with your project's needs. Our skills extend beyond just coding - we believe in understanding and reflecting your business goals in our work, ensuring every feature is built with clarity, precision, and measurable business value. Lastly, I must note that although this project may appear small in size, our focus is always on intelligent, scalable transformation - a promise that extends from startups to enterprises alike. Trust us to deliver an end-to-end solution that is clean, readable, bug-free and gracefully transforms complex ideas into easily usable digital products.
$10 CAD på 3 dage
0,0
0,0

Greetings, I’ve read your job post carefully and understand exactly what you want: a clean, browser-based timeline editor where users can create, arrange, and configure LED display cards, then export precise JSON for your Flask backend. I have extensive experience building structured UI tools with drag-and-drop workflows, dynamic forms, and deterministic data models. Projects like this require clarity in state management, predictable ordering, and an interface that remains simple while supporting flexible configuration. That’s where I work best. I can deliver a responsive timeline, card palette, and property editor with reliable drag reordering, validation (like text limits), and consistent JSON output. The code will be modular, commented, and easy to extend when you later add rendering or preview logic. You’ll receive a ready-to-run HTML/JS/CSS package plus a short README explaining usage and integration. Best, M.J
$15 CAD på 1 dag
0,0
0,0

Hello, thanks for posting this project. I can build a lightweight, browser-based JavaScript timeline editor for your LED display that allows drag-and-drop card management and JSON export. From your brief, the main goal is to provide an intuitive interface where users can add Color, Image, Text, and Transition cards, reorder them, edit their properties via a panel, and export the entire timeline as structured JSON compatible with your Flask backend. I will ensure the editor is clean, responsive, and works in modern browsers without backend dependencies. I have experience building front-end tools in plain JavaScript as well as lightweight frameworks like Vue or React, implementing drag-and-drop functionality, dynamic property panels, and exportable JSON workflows. My approach emphasizes readability, modularity, and easy integration. You can expect a fully functional HTML/JS/CSS package with clean, commented code, a working drag-and-drop editor, property editing panel, and JSON export, accompanied by a short README explaining how to open, run, and integrate the tool into your existing site.
$30 CAD på 3 dage
0,0
0,0

Hello, I went through your project description carefully and this is very doable. I can build a clean, browser-based timeline editor with drag-and-drop cards, an intuitive properties panel, and a reliable JSON export that matches your LED display workflow. I’ll keep everything front-end only, well-structured, and easy to integrate with your existing Flask backend. The code will be readable, commented, and tested in modern browsers with no console errors. I can also include a short README explaining setup and integration, and adjust the JSON schema if you want it cleaner. Thank you, Megha
$18 CAD på 7 dage
0,0
0,0

Hello I can build this timeline editor cleanly and without over-engineering it. I’ve done several browser-based editors and visual builders where drag-and-drop ordering, editable cards, and JSON export were the core output, so this fits well with how I normally work. My approach would be a single-page app using lightweight JavaScript (plain JS or Vue, depending on your preference) with a clear data model that mirrors the JSON you want to send to Flask. Cards live in an array, drag-and-drop simply reorders that array, and the properties panel edits the selected item in real time. Export is a straight, deterministic JSON dump so what you see on the timeline is exactly what your backend receives. I’ve worked on LED matrix tooling before (small resolutions, strict limits on text and timing), so I’m comfortable enforcing things like line length, font options, and durations at the UI level. The result will be easy to open in a browser, easy to integrate into your existing site, and well-commented so you can extend it later with previews or animations if you want. I can deliver this as a clean HTML/JS/CSS bundle with a short README and have it ready quickly. Regards.
$10 CAD på 1 dag
0,0
0,0

I’m a MERN Stack Developer with strong experience in Django backend development. I can build secure, scalable APIs and full-stack solutions tailored to your needs. Let’s connect PRICE is negotiable. Fast delivery | Clean code | 100%
$15 CAD på 3 dage
0,0
0,0

Edmonton, Canada
Betalingsmetode verificeret
Medlem siden jun. 27, 2019
$10-30 CAD
$30-250 CAD
$1500-3000 CAD
$1500-3000 CAD
$10-30 USD
$2-8 USD / time
$3000-5000 USD
₹750-1250 INR / time
$50-1500 USD
$30-250 USD
₹600-1500 INR
$30-250 USD
$250-750 USD
€30-250 EUR
₹600-1500 INR
$50 USD
₹100-400 INR / time
₹12500-37500 INR
₹1500-12500 INR
₹600-1500 INR
₹75000-150000 INR
₹12500-37500 INR
$750-1500 USD
₹150000-250000 INR